{% extends 'portal/layout/index.html.twig' %}
{% block portal_content %}
    {% set pageContentByPage = get_cms_page_content_by_page('project-details') %}
    {% set banners = get_cms_page_banner(pageContentByPage.id) %}
    {% set otherBanners = [] %}
    {% set hasTopBanner = false %}

    {% for banner in banners %}
        {% if banner.bannerPosition == 'top' %}
            {% set hasTopBanner = true %}
        {% else %}
            {% set otherBanners = otherBanners|merge({ (banner.bannerPosition) : banner}) %}
        {% endif %}
    {% endfor %}

    {#{% for page in get_cms_page(get_parameter('company_id')) %}
        {% if app.request.get('_route') == page.pageRoute%}
            {% set banners = get_cms_page_banner(page.id) %}
            {% if banners is not empty %}
                <section class="banner-carousel slider-item">
                    <div id="mainBanner" class="carousel slide" data-ride="carousel">
                        <figcaption>
                            <div class="container">
                                <div class="caption">
                                    {% if banners|length > 1 %}
                                        <ol class="carousel-indicators">
                                            {% set counter = 0 %}
                                            {% for banner in banners %}
                                                <li data-target="#mainBanner" data-slide-to="{{ counter }}"
                                                        {% if banner.sequenceNo == 1 %} class="active" {% endif %}>
                                                    {{ "%02d"|format (counter+1) }} </li>
                                                {% set counter = counter + 1 %}
                                            {% endfor %}
                                        </ol>
                                    {% endif %}

                                </div>
                            </div>
                        </figcaption>
                        <div class="carousel-inner">
                            {% for banner in banners %}
                                <div class="carousel-item {% if banner.sequenceNo == 1 %}active{% endif %}">
                                    {%  if (banner.bannerMediaType == 'image') %}
                                        <figure>
                                            <img src="{{ asset('images/files') }}/{{ banner.bannerDesktopImage}}" alt="{{ banner.bannerImageAlt }}" title="{{ banner.bannerImageTitle }}">
                                            <figcaption>
                                                <div class="container">
                                                    <div class="caption">
                                                        {{ banner.bannerDescription|raw }}
                                                    </div>
                                                </div>
                                            </figcaption>
                                        </figure>
                                    {% else %}
                                        {{ banner.bannerVideoPath|raw }}
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                        <div class="search-sec">
                            {{ include('portal/layout/_header_search.html.twig')  }}
                        </div>
                    </div>
                </section>
            {% endif %}
        {% endif %}
    {% endfor %}#}

    <!-- header css and script ends -->
    <section class="static-banner">
        {% if circle.backgroundImagePath != '' and circle.backgroundImagePath != 'files/' %}
        <img src="{{ asset('images') }}/{{ circle.backgroundImagePath }}"
             alt="">
        {% else %}
            <img src="/resources/images/common/details-banner.jpg" alt="">
        {% endif %}
    </section>

    {% set tmp = set_circle_read(circle.id) %}
    <div class="wrapper">
        {% set fundEventCount = get_fund_event_count(get_parameter('company_id'),circle.id ) %}
        {% set nCount = get_circle_count_data(circle.id) %}
        {{ include('portal/change-maker/_project-detail-heading.html.twig') }}
        <section class="about-circle">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <ul class="circle-details-list" data-aos="fade-down" data-aos-delay="200">
                            <li class="first-table" data-aos="fade-down" data-aos-delay="200">
                                <ul>
                                    <li>
                                        <ul class="member-event-list">
                                            <li>
                                                <div class="number">{{ nCount.memberCount }}</div>
                                                <div class="task">Members</div>
                                            </li>
                                            <li>
                                                <div class="number">{{ nCount.eventCount }}</div>
                                                <div class="task">Events</div>
                                            </li>
                                        </ul>
                                    </li>
                                    <li>
                                        <ul class="impact-list">
                                            <li><b class="orange">Impact</b></li>
                                            <li>Time <span class="number">{{ nCount.volunteerintime }}</span> <span>Events</span></li>
                                            <li>Money <span class="number">{{ nCount.fundraiser }}</span> <span>Events</span></li>
                                            <li>Material <span class="number">{{ nCount.materialinkind }}</span> <span>Events</span></li>
                                        </ul>
                                    </li>
                                    <li class="total-hrs">
                                        <ul>
                                            <li><span class="number">{{ nCount.totalCircleHrs }}</span> hrs</li>
                                            <li><span class="number">{{ nCount.totalFundRaised }}</span> lacs</li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            {% set changeMaker = get_change_maker_by_user(circle.appUser) %}
                            <li data-aos="fade-down" data-aos-delay="200">
                                <h3>About Me</h3>
                                <p>
                                    <span class="lesstxt">{{ circle.circleInformation|truncate(350)|raw  }}</span>
                                    <span class="more">{{ circle.circleInformation|raw }}</span>
                                    <span class="myBtn">See more</span>
                                    <span class="myBtn less">See Less</span>
                                </p>
                                <ul class="my-story">
                                    {% if changeMaker is not empty %}
                                        <li><a href="{{ path('change-maker-detail',{ 'articleSlugName' : changeMaker.articleSlugName }) }}"><i class="fc-my-story"></i> My Story</a></li>
                                    {% endif %}
                                    <li><a href="mailto:{{ circle.appUser.appUserInfo.userEmail }}?subject={{ circle.circle|raw }}&cc={{ get_gc_email() }}">
                                            <i class="fc-connect-with-me"></i> Connect with Me</a>
                                    </li>
                                </ul>
                            </li>
                            <li data-aos="fade-down" data-aos-delay="200">
                                <h3>How we will achieve the goal?</h3>
                                <p>
                                    <span class="lesstxt">{{ circle.howGoalWillBeAchieved|truncate(350)|raw  }}</span>
                                    <span class="more">{{ circle.howGoalWillBeAchieved|raw  }}</span>
                                    <span class="myBtn">See more</span>
                                    <span class="myBtn less">See Less</span>
                                </p>
                            </li>
                            {% if circle.impactStatement != null and circle.impactStatement|length > 0 %}
                            <li data-aos="fade-down" data-aos-delay="200">
                                <h3>Project Story</h3>

                                <p>
                                    <span class="lesstxt">{{ circle.impactStatement|truncate(350)|raw  }}</span>
                                    <span class="more">{{ circle.impactStatement|raw  }}</span>
                                    <span class="myBtn">See more</span>
                                    <span class="myBtn less">See Less</span>
                                </p>
                            </li>
                            {% endif %}
                        </ul>
                    </div>
                    <div class="col-md-4 my-goodness-timeline" data-aos="fade-down" data-aos-delay="200">
                        <h3>My Goodness Timeline
                            <div class="share-sec">
                                <a href="javascript:;" class="social-share-btn"><i class="fas fa-share-alt"></i></a>
                                <div class="social-media">
                                    <a href="#" class="fa fa-close"></a>
                                    <ul>
                                        {#<li>
                                            <a href="#" target="_blank"><i class="fc-facebook"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="fc-linkedin"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="fc-instagram"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="fc-youtube"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="fc-twitter"></i></a>
                                        </li>
                                        <li>
                                            <a href="#" target="_blank"><i class="fc-whatsapp"></i></a>
                                        </li>#}
                                        <li>
                                            <a href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.schemeAndHttpHost ~ path('project-goodness-timeline', {'id': circle.id})}}" target="_blank">
                                                <i class="fc-facebook"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://twitter.com/intent/tweet?text={{ circle.circle }}&amp;url={{ app.request.schemeAndHttpHost ~  path('project-goodness-timeline', {'id': circle.id}) }}&amp;via=GivingCircle_In" target="_blank">
                                                <i class="fc-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ app.request.schemeAndHttpHost ~  path('project-goodness-timeline', {'id': circle.id}) }}&amp;title={{ circle.circle }}" target="_blank">
                                                <i class="fc-linkedin"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://api.whatsapp.com/send?phone={{ get_whatsapp_number(true) }}&text={{ app.request.schemeAndHttpHost ~ path('project-goodness-timeline', {'id': circle.id})  }}" target="_blank">
                                                <i class="fc-whatsapp"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </h3>

                        <div class="testi-carousel owl-carousel">

                            {% for goodnessList in goodnessDetails %}

                                <ul>
                                    <li>
                                        <a href="{{ path('project-goodness-timeline', {id: circle.id}) }}" class="card-image">
                                            <figure>
                                                {% if goodnessList.mediaArr[0] is defined %}
                                                    {#{{ goodnessList.mediaArr[0].uploadedFilePath|imagine_filter('resize_image_h90') }}#}
                                                <img src="{{ asset('/images/')~goodnessList.mediaArr[0].uploadedFilePath }}"
                                                     alt="{{ goodnessList.name }}"
                                                     title="{{ goodnessList.name }}">
                                                {% endif %}
                                            </figure>
                                        </a>
                                        <div class="content">
                                            <p><b>{{ goodnessList.name }}</b></p>
                                            <p>{{ goodnessList.eventDate|date('l, d F Y') }}, {{ goodnessList.eventHrs }} Hrs</p>
                                            <p>{{ goodnessList.mstCity }}, {{ goodnessList.mstState }}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="{{ path('project-goodness-timeline', {id: circle.id}) }}" class="card-image">
                                            <figure>
                                                {% if goodnessList.mediaArr[1] is defined %}
                                                <img src="{{ goodnessList.mediaArr[1].uploadedFilePath|imagine_filter('resize_image_h90') }}"
                                                     alt="{{ goodnessList.name }}" title="{{ goodnessList.name }}">
                                                {% endif %}
                                            </figure>
                                        </a>
                                        <div class="content">
                                            <ul>
                                                <li>
                                                    <h2>{{ goodnessList.volunteerCnt }}</h2> Volunteers
                                                </li>
                                                <li>
                                                    <h2>{{ goodnessList.moneyRaised }}</h2> Lacs Money Raised
                                                </li>
                                                <li>
                                                    <h2>{{ goodnessList.materialPer > 100 ? 100 : goodnessList.materialPer }}%</h2> Material
                                                </li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            {% endfor %}
                        </div>
                        <ul class="inline-links">
                            <li><a href="{{ path('project-goodness-timeline', {id: circle.id}) }}">View All</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
        <section>
            <div class="container">
                <h2 data-aos="fade-right" data-aos-delay="200"><a href="{{ path('project-gallery', {id: circle.id}) }}">Gallery </a></h2>
                <div class="carousel-wrap" data-aos="fade-down" data-aos-delay="200">
                    <div class="owl-carousel">
                        {% for trnProductMedia in circle.trnProductMedia %}
                            {% if trnProductMedia.mediaType == 'image' %}
                                <div class="item" data-aos="fade-down" data-aos-delay="200">
                                    <a href="{{ path('project-gallery', {id: circle.id}) }}">
                                        <figure>
                                            <img src="{{ asset('images') }}/{{ trnProductMedia.uploadedFilePath}}"
                                                 alt="{{ circle.circle }}" title="{{ circle.circle }}">
                                        </figure>
                                    </a>
                                </div>
                            {% else %}
                                <div class="item" data-aos="fade-down" data-aos-delay="200">
                                    <a href="{{ path('project-gallery', {id: circle.id}) }}">
                                        <span class="vid-wrapper">
                                            <iframe src="{{ trnProductMedia.mediaURL }}" frameborder="0"
                                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                                                    allowfullscreen></iframe>
                                        </span>
                                    </a>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
        <section class="latest-events">
            <div class="container">
                <h2 data-aos="fade-right" data-aos-delay="200">Events ({{ nCount.eventCount }})</h2>
                <div class="row listing-page" data-aos="fade-right" data-aos-delay="200">
                    <div class="col-auto refine-search">
                        <ul class="categories">
                            <li>
                                <h5>Event Search By</h5>
                                <div class="search-sec">
                                    <div class="input-group">
                                        <input type="text" id="searchText" class="search-input" placeholder="Name, Location">
                                        <a href="#" class="btn search-input-btn" id="event-search-by"><i class="fa
                                        fa-search"></i></a>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <h5>Event Status</h5>
                                <ul>
                                    <li>
                                        <label class="checkbox-label" for="Upcoming">Upcoming
                                            <input type="checkbox" id="Upcoming" value="Upcoming" name="eventTime">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-label" for="Ongoing">Ongoing
                                            <input type="checkbox" id="Ongoing" value="Ongoing" name="eventTime">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                    <li>
                                        <label class="checkbox-label" for="Past">Past
                                            <input type="checkbox" id="Past" value="Past" name="eventTime">
                                            <span class="checkmark"></span>
                                        </label>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <h5>Event For</h5>
                                <ul>
                                    {% for mstEventProductType in arrMstEventProductType %}
                                        <li>
                                            <label class="checkbox-label" for="eventProductType{{ mstEventProductType.id }}">{{ mstEventProductType.eventProductType }}
                                                <input type="checkbox" id="eventProductType{{ mstEventProductType.id }}"
                                                       name="eventProductType" value="{{ mstEventProductType.id }}" >
                                                <span class="checkmark"></span>
                                            </label>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <div class="col right-list">
                        <section class="changeMakers">
                            <div class="row" id="projectEvents">
                                {% set circlEvents = get_latest_circle_events(circle.id) %}
                                {% for eventData in circlEvents %}
                                    {% set eventDates = get_events_dates(eventData.id) %}
                                    {% set eventCommentCount = get_event_comment_count(eventData.id)|default('0') %}

                                    {% set eventproducttype = [] %}
                                    {% for mstEventProductType in eventData.mstEventProductType %}
                                        {% set eventproducttype = eventproducttype|merge([mstEventProductType.eventProductType]) %}
                                    {% endfor %}

                                    {% set validButtons = get_valid_event_buttons('event_list',
                                        eventData.id, circle.id, eventproducttype, eventData.trnCircle.mstJoinBy, eventData.isTargetAchieved, eventData.mstStatus.status ) %}

{#{{ dump(validButtons) }}#}
                                    <div class="card col-sm-4" data-aos="fade-right" data-aos-delay="200">
                                        <figure>
                                            {% if eventData.profileImage is defined and  eventData.profileImage is not empty and
                                                eventData.profileImage != 'files/'  %}
                                                <img src="{{ asset('images') }}/{{ eventData.profileImage }}" alt="{{ eventData.name }}" title="{{ eventData.name }}">
                                            {% elseif eventData.backgroundImagePath is defined and  eventData.backgroundImagePath is not empty and
                                                eventData.backgroundImagePath != 'files/' %}
                                                <img src="{{ asset('images') }}/{{ eventData.backgroundImagePath }}" alt="{{ eventData.name }}" title="{{ eventData.name }}">
                                            {% else %}
                                                {% set break = false %}
                                                {% for trnProductMedia in eventData.trnProductMedia %}
                                                    {% if trnProductMedia.mediaType == 'image' and
                                                        break == false %}
                                                        {% set break = true %}
                                                        <img src="{{ asset('images') }}/{{ trnProductMedia.uploadedFilePath}}" alt="{{ eventData.name }}" title="{{ eventData.name }}">
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                        </figure>
                                        <div class="card-body">{% set isCrowdfundinEvent = false %}
                                            <a href="#">
                                                {% if eventDates.fromDate is defined and eventDates.fromDate is
                                                    not empty and eventDates.fromDate and eventDates.toDate
                                                    is defined and eventDates.toDate is
                                                    not empty and eventDates.toDate  %}
                                                    <div class="status">{{ eventDates.eventUpComingOrOnGoing }}</div>
                                                {% endif %}
                                                <h4>{{ eventData.name }}</h4>
                                                <h5 class="orange">{% for mstEventProductType in eventData
                                                        .mstEventProductType %}

                                                        {% if mstEventProductType .eventProductType == 'Crowdfunding' %}
                                                            {% set isCrowdfundinEvent = true %}
                                                        {% endif %}

                                                        {{ mstEventProductType
                                                    .eventProductType }}{% if not loop.last %}, {% endif %} {% endfor %}</h5>
                                                <ul class="timing">
                                                    {% if eventDates.fromDate is defined and eventDates.fromDate is
                                                        not empty and eventDates.fromDate and eventDates.toDate
                                                        is defined and eventDates.toDate is
                                                        not empty and eventDates.toDate  %}
                                                        <li><i class="fa fa-calendar-o"></i>
                                                            {% if eventDates.eventUpComingOrOnGoing == 'UPCOMING' %}
                                                                {{ eventDates.fromDate | date ('l') }} {{ eventDates.fromDate | date('d F Y') }}
                                                            {% else %}
                                                                {{ eventDates.toDate | date ('l') }} {{ eventDates.toDate | date('d F Y') }}
                                                            {% endif %}
                                                        </li>
                                                    {% endif %}
                                                    {% if eventDates.eventFromTime is defined and eventDates.eventFromTime is not empty and
                                                        eventDates.eventFromTime and eventDates.eventToTime is defined
                                                        and eventDates.eventToTime is not empty and eventDates.eventToTime  %}
                                                        <li><i class="fa fa-clock-o"></i> {{ eventDates.eventFromTime|date('h:i A')   }}
                                                            to {{ eventDates.eventToTime|date('h:i A')}}</li>
                                                    {% endif %}
                                                    <li><i class="fa fa-map-marker"></i> {{ eventData.mstCity }}, {{ eventData.mstState }}, {{
                                                        eventData.mstCountry }}</li>
                                                </ul>
                                            </a>
                                            <ul class="inline-links">
                                                {% if validButtons['view']['isValid'] == true %}
                                                <li>
                                                    {% if isCrowdfundinEvent == true %}
                                                        <a href="{{ path('crowd-funding-event-details', {'id': eventData.id}) }}"
                                                           class="btn-primary">{{ validButtons['view']['label'] }}</a>
                                                    {% else %}
                                                        <a href="{{ path(validButtons['view']['path']['key'], validButtons['view']['path']['value']) }}"
                                                           class="btn-primary">{{ validButtons['view']['label'] }}</a>
                                                    {% endif %}
{#                                                    <a href="{{ path('event-details', {'id' : eventData.id }) }}" class="btn-primary">View</a>#}
                                                </li>
                                                {% endif %}
                                                {#{% if eventData.trnCircle.mstJoinBy == 'Open' %}
                                                    <li>
                                                        <a href="#">Join</a>
                                                    </li>
                                                {% else %}
                                                    <li>
                                                        <a href="#">Request to Join</a>
                                                    </li>
                                                {% endif %}#}
{#                                                {% for mstEventProductType in eventData
                                                    .mstEventProductType %}
                                                    {% if mstEventProductType.eventProductType == 'Fundraiser' %}
                                                        <li>
                                                            <a href="#">Donate</a>
                                                        </li>
                                                    {% endif %}
                                                {% endfor %}#}
                                                {% if validButtons['donate']['isValid'] == true and isCrowdfundinEvent == false %}
                                                    <li>
                                                        {% set donatePath = validButtons['donate']['path'] %}
                                                        {% if validButtons['donate']['path']['key'] is defined %}
                                                            {% set donatePath = path(validButtons['donate']['path']['key'],
                                                                validButtons['donate']['path']['value'])~'#fundRaiserContribute' %}
                                                        {% endif %}
                                                        <a href="{{ donatePath }}">
                                                            {{ validButtons['donate']['label'] }}
                                                        </a>
                                                    </li>
                                                {% endif %}
                                            </ul>
                                            <ul class="share-view">
                                                <li>
                                                    <a href="#" class="eventLike" eventId = "{{ eventData.id
                                                    }}">
                                                        <i class="far fa-thumbs-up"></i>
                                                        <b id="eventLike_{{ eventData.id }}">{{ eventData.likeCount|default('0') }}</b>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="{{ path('event-details', {'id' : eventData.id }) }}#comments">
                                                        <i class="far fa-comment"></i>
                                                        <b>{{ eventCommentCount }}</b>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="javascript:;" class="social-share-btn"><i
                                                                class="fas fa-share-alt"></i></a>
                                                </li>
                                            </ul>
                                            <div class="share-sec">
                                                <div class="social-media">
                                                    <a href="#" class="fa fa-close"></a>
                                                    <ul>
                                                        <li><a onclick="getEventShareCount('{{ eventData.id }}')" href="https://www.facebook.com/sharer/sharer.php?u={{ app.request.schemeAndHttpHost ~ path('event-details', {'id': eventData.id})}}" target="_blank"><i class="fc-facebook"></i></a></li>
                                                        <li><a onclick="getEventShareCount('{{ eventData.id }}')" href="https://twitter.com/intent/tweet?text={{ eventData.name }}&amp;url={{ app.request.schemeAndHttpHost ~  path('event-details', {'id': eventData.id}) }}&amp;via=GivingCircle_In" target="_blank"><i class="fc-twitter"></i></a></li>
                                                        <li><a onclick="getEventShareCount('{{ eventData.id }}')" href="https://www.linkedin.com/shareArticle?mini=true&url={{ app.request.schemeAndHttpHost ~  path('event-details', {'id': eventData.id}) }}&amp;title={{ eventData.name }}" target="_blank"><i class="fc-linkedin"></i></a></li>
                                                        <li><a onclick="getEventShareCount('{{ eventData.id }}')" href="https://api.whatsapp.com/send?phone={{ get_whatsapp_number(true) }}&text={{ app.request.schemeAndHttpHost ~ path('event-details', {'id': eventData.id})  }}" target="_blank"><i class="fc-whatsapp"></i></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="col-12" data-aos="fade-right" data-aos-delay="200">
                                <div class="explore-more-events">
                                    <a href="{{ path('show_project_events', { 'project':circle.id }) }}" class="btn btn-blue">Explore More Events</a>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </section>
        <section class="listing-page latest-events comment-section">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <div class="comment-left">
                            <div id="loginMsg" class="message alert-warning font-weight-bolder text-center" style="display: none;">Please Login to post a comment</div>
                            <h2 id="comments">Comments</h2>
                            <ul class="comment-counter">
                                <li>
                                    <a href="javascript:void(0);" class="circleLike" circleId = "{{ circle.id }}">
                                        <i class="far fa-thumbs-up"></i> <b class="circleLike_{{ circle.id }}"> {{ nCount.likeCount }} </b> Likes
                                    </a>
                                </li>
                                <li>
                                        {% if app.user %}
                                            <a href="javascript:void(0)">
                                        {% else %}
                                            <a href="javascript:void(0)" onclick="getLoginMsg()">
                                        {% endif %}
                                        <i class="fa fa-comment-o"></i> <b>{{ nCount.commentCount }} Comments</b>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="fa fa-share-alt"></i> <b>{{ nCount.shareCount }} Share</b>
                                    </a>
                                </li>
                            </ul>
                            <div class="comment-area">
                                <div class="message alert-success" id="cmtmessage"></div>
                                <div class="input-group">
                                    {{ form_start(form, {'attr': {'id': 'commentForm', 'methos':'post'}}) }}
                                        <input type="hidden" id="circleId" value="{{ circle.id }}">

                                        {{ form_widget(form.comment) }}

                                    {% if app.user %}
                                        <button type="submit" class="btn btn-primary commentbutton float-right">Post</button>
                                    {% else %}
                                        <button type="button" onclick="getLoginMsg()" class="btn btn-primary float-right">Post</button>
                                    {% endif %}


                                    {{ form_row(form._token) }}
                                    {{ form_end(form, {'render_rest': false}) }}

                                </div>
                            </div>
                            {#
                            {% else %}
                            <div class="comment-area">
                                <h4>Login to post a comment...</h4>
                            </div>
                            #}


                            <ul class="comment-list">
                                {% set circle_comments = get_circle_comments(circle.id, 1) %}
                                {#{% set article_comments = get_cms_article_comments(article.id, 1) %}#}
                                {% if circle_comments is not empty %}
                                    {% for comment in circle_comments['comment'] %}
                                        <li>
                                            <div class="image-sec">
                                                <figure>
                                                    {% if(comment.userimage is not empty) %}
                                                        <img src="{{ comment.userimage|imagine_filter('resize_avatar_30') }}"
                                                             alt="{{ comment.name }}" title="{{ comment.name }}">
                                                    {% elseif(comment.userinitials is not empty) %}
                                                        <div>{{ comment.userinitials }}</div>
                                                    {% endif %}
                                                </figure>
                                            </div>
                                            <div class="comment-box" style="width: 100%">
                                                <div class="author-box">
                                                    <h3 class="author-tl">
                                                        <b>{{ comment.name }}</b>
                                                    </h3>
                                                    <p>{{ comment.comment }}</p>
                                                </div>
                                                <ul class="like-reply-list">
                                                    <li><a onclick="getLikeCount({{ comment.id }}, 'comment_{{ comment.id }}')" href="#">Like</a></li>
                                                    {% if app.user %}
                                                        <li><a href="#" onclick="showReplyBlock('{{ comment.id }}')" class="reply-btn">Reply</a></li>
                                                    {% endif %}
                                                    <li>{{ comment.createtime|time_diff}}</li>
                                                </ul>
                                                {# <div id="commentreply" class="mt-2"></div>
                                                    <input type="hidden" id="comment" value="{{ comment.id }}">
                                                #}
                                                <div class="message alert-success" id="replymessage{{ comment.id }}"></div>
                                                <div class="reply-box" id="replybox{{ comment.id }}">
                                                    <div id="replypostarea{{ comment.id }}" class="replypostarea" style="width: 100%; display: flow-root;">
                                                        <div class="image-sec float-left">
                                                            <figure>
                                                                {% if app.user %}
                                                                    <img src="{{ app.user.appUserInfo.userAvatarImagePath|imagine_filter('resize_avatar_30')}}"
                                                                         alt="{{ app.user.userName|default('') }}"
                                                                         title="{{ app.user.userName|default('') }}">
                                                                {% endif %}
                                                            </figure>
                                                        </div>
                                                        <div class="reply-area float-left" id="replyarea{{ comment.id }}" style="width: 90%;">
                                                            <div class="input-group">

                                                                {% set rp_form =  reply_form.createView %}
                                                                {{ form_start(rp_form, {'attr': {'id': 'replyForm-'~comment.id, 'method':'post', 'class':'replyFrm' }}) }}
                                                                {{ form_widget(rp_form.comment, { 'id': 'reply_box_'~comment.id, 'attr': {'placeholder': 'Write your reply...' } } ) }}

                                                                <button type="submit" class="btn btn-primary replybutton">Post</button>

                                                                {{ form_row(rp_form._token) }}
                                                                {{ form_end(rp_form, {'render_rest': false}) }}
{#                                                                    <input type="text" id="reply_box_{{ comment.id }}" class="search-input" placeholder="Write your reply...">#}
{#                                                                    <a href="#" onclick="postComment('{{ comment.id }}')" class="btn btn-primary post-reply">Post</a>#}

                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div style="width: 100%;  display: flow-root;">
                                                        {% if circle_comments['reply'][comment.id] is defined %}
                                                            {% for reply in circle_comments['reply'][comment.id] %}
                                                                <div class="" style="margin-top: 10px">
                                                                    <div class="image-sec">
                                                                        <figure>
                                                                            {% if(comment.userimage is not empty) %}
                                                                                <img src="{{ comment.userimage|imagine_filter('resize_avatar_30') }}"
                                                                                     alt="{{ comment.name }}" title="{{ comment.name }}">
                                                                            {% elseif(comment.userinitials is not empty) %}
                                                                                <div>{{ comment.userinitials }}</div>
                                                                            {% endif %}
                                                                        </figure>
                                                                    </div>
                                                                    <div class="comment-box" style="width: 100%">
                                                                        <div class="author-box">
                                                                            <h3 class="author-tl">
                                                                                <b>{{ reply.name }}</b>
                                                                            </h3>
                                                                            <p>{{ reply.comment|raw }}</p>
                                                                        </div>
                                                                        <ul class="like-reply-list">
{#                                                              <li><a href="#">Like</a></li>#}
{#                                                              <li><a href="#">Reply</a></li>#}
                                                                            <li>{{ reply.createtime|time_diff}}</li>
                                                                        </ul>
                                                                    </div>
                                                                </div>
                                                            {% endfor %}
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="like-counter"><i class="far fa-thumbs-up"></i> <b><span id="comment_{{ comment.id }}">{{ comment.likecount|default(0) }}</span></b>
                                            </div>
                                        </li>

                                    {% endfor %}
                                {% endif %}

                            </ul>
                        </div>
                    </div>
                    <div class="col-auto right-list">

                        {#
                        <div class="changeMakers">
                            <div class="card">
                                <figure data-aos="fade-down" data-aos-delay="200"><img
                                            src="/resources/images/common/fund-raiser.jpg" alt="Save my son from Leukemia"
                                            title="Save my son from Leukemia"></figure>
                                <div class="card-body" data-aos="fade-right" data-aos-delay="200">
                                    <a href="#">
                                        <div class="status">Tax Benefit</div>
                                        <div class="status">Urgent </div>
                                        <h5 class="orange">Medical</h5>
                                        <h4>Save my son from Leukemia</h4>
                                        <h6>by Afroz</h6>
                                        <div class="fund-raiser">
                                            <h4><span class="rupee-icon">&#x20B9;</span> 17,55,250 <b>Raised</b></h4>
                                            <div class="progress">
                                                <div class="progress-bar w-50" role="progressbar" aria-valuenow="50"
                                                     aria-valuemin="0" aria-valuemax="100">
                                                    <div class="number">48%</div>
                                                </div>
                                            </div>
                                            <div class="row justify-content-between fund-status">
                                                <div class="col">
                                                    <b>37 days left</b>
                                                </div>
                                                <div class="col text-right">
                                                    <b>1254 Supporters</b>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <ul class="inline-links">
                                        <li>
                                            <a href="/projects-details.shtml" class="btn-primary">Donate</a>
                                        </li>
                                        <li>
                                            <div class="share-sec">
                                                <a href="javascript:;" class="social-share-btn"><i
                                                            class="fas fa-share-alt"></i></a>
                                                <div class="social-media">
                                                    <a href="#" class="fa fa-close"></a>
                                                    <ul>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-facebook"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-linkedin"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-instagram"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-youtube"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-twitter"></i></a>
                                                        </li>
                                                        <li>
                                                            <a href="#" target="_blank"><i class="fc-whatsapp"></i></a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        #}

                        {% if otherBanners|length > 0 and otherBanners['right'] is defined and otherBanners['right'] is not empty %}
                            <div class="express-donate-parallax" data-aos="fade-down" data-aos-delay="200"
                                 data-image-src="{{ asset('images/files/') ~ otherBanners['right'].bannerDesktopImage}}">
                                {{ otherBanners['right'].bannerDescription|default('<h2><br><br><br><br><br><br><br></h2>')|raw }}

                                {% if otherBanners['right'].bannerUrl is not empty %}
                                    <a href="{{ otherBanners['right'].bannerUrl }}" class="btn btn-primary">Express
                                        Donate</a>
                                {% endif %}

                            </div>
                        {% endif %}

                        {#<div class="express-donate-parallax" data-aos="fade-down" data-aos-delay="200">
                            <h2 data-aos="fade-down" data-aos-delay="200">Purvi raised <span class="price">&#x20B9;
                                    23,78,790</span> for
                                Pushpesh's <br>Cancer treatment in just 26 days.</h2>
                            <a href="#" class="btn btn-primary" data-aos="fade-down" data-aos-delay="200">Express
                                Donate</a>
                        </div>#}
                    </div>
                </div>
            </div>
        </section>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{asset('resources/js/easy-responsive-tabs.js')}}" type="text/javascript"></script>
    <script src="{{ asset('resources/js/captcha.basic.min.js') }}"></script>
    <script>
        var ajaxEventLikeURL = "{{ path('event-like') }}";
        var pathToEventShare = "{{ path('event-share') }}";

        $(document).ready(function () {
            $(".express-donate-parallax").css('background-image', function () {
                var bg = ('url(' + $(this).data("image-src") + ')');
                return bg;
            });
            $('body').addClass('details-page');
            $('.owl-carousel').owlCarousel({
                loop: false,
                margin: 10,
                nav: true,
                dots: false,
                navText: [
                    "<i class='fas fa-arrow-left'></i>",
                    "<i class='fas fa-arrow-right'></i>"
                ],
                autoplay: false,
                autoplayHoverPause: true,
                responsive: {
                    0: {
                        items: 2
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 4
                    }
                }
            });

            $('.comment-box').find('.author-box').show();

            $(document).on('click','.circleLike',function(){
                likeClick($(this));
            });

            function likeClick(elem) {
                var data = {};
                var circleId = data['id'] = $(elem).attr("circleId");
                jQuery.ajax({
                    url: "{{ path('circle-like') }}",
                    data: data,
                    type: "GET",
                    dataType: "JSON",
                    success: function (data) {
                        $(".circleLike_"+circleId).each(function () {
                            $(this).text(data.count);
                        });
                    }
                });
            }

            //eventTime
            $("[name='eventTime']").change(function () {
                getFilter();
            });

            $("[name='eventProductType']").change(function () {
                getFilter();
            });
            $("#event-search-by").click(function () {
                getFilter();
            });

            $(document).on('click','.eventLike',function(){
                var data = {};
                var eventId = data['id'] = $(this).attr("eventId");
                jQuery.ajax({
                    url: ajaxEventLikeURL,
                    data: data,
                    type: "GET",
                    dataType: "JSON",
                    success: function (data) {
                        $("#eventLike_"+eventId).text(data.count);
                    }
                });
            });

        });
        $(".testi-carousel").owlCarousel({
            loop: true,
            margin: 10,
            responsiveClass: true,
            responsive: {
                0: {
                    items: 1,
                    nav: true,
                },
                600: {
                    items: 1,
                    nav: true,
                },
                1000: {
                    items: 1,
                    nav: true,
                    loop: true,
                },
            },
        });

        $('.social-share-btn').on('click', function (e) {
            e.preventDefault();
            $(this).children('.fa-share-alt').addClass('toggle');
            $(this).siblings('.social-media').slideToggle();
        });

        $('.social-share-btn').on('click', function (e) {
            e.preventDefault();
            $(this).children('.fa-share-alt').addClass('toggle');
            $(this).parents('.share-view').siblings('.share-sec').find('.social-media').slideToggle();
        });
        $('.share-link').on('click', function (e) {
            e.preventDefault();
            $(this).siblings('.share-sec').find('.social-media').slideToggle();
        });
        $('.fa-close').on('click', function (e) {
            e.preventDefault();
            $(this).parent('.social-media').slideToggle();
            $(this).parents('.share-sec').find('.fa-share-alt').removeClass('toggle');
        });

        $(".forward-list").hide();
        $(".btn-forward-post").click(function (e) {
            e.preventDefault();
            $(this).siblings('.forward-list').fadeToggle();
        });
        $(".btn-reply").click(function (e) {
            e.preventDefault();
            $(this).toggleClass('disabled');
            $(this).parents('.comment-box').siblings('#reply-popup').toggle();
            $(this).parents('.comment-list').siblings('.reply-box').toggle();
        });
        $(".btn-close").click(function (e) {
            e.preventDefault();
            $(this).parents('#reply-popup').hide();
            $(this).parents('#reply-popup').siblings('.comment-box').find('.btn-reply').removeClass('disabled');
            $(this).parents('.comment-list').siblings('.reply-box').show();
        });
        $(".reply-btn").click(function (e) {
            e.preventDefault();
            $(this).parents('.like-reply-list').siblings('.reply-box').show();
        });
        $(".post-reply").click(function (e) {
            e.preventDefault();
            $(this).parents('.reply-area').hide();
            $(this).parents('.comment-box').find('.author-box').show();
            $(this).parents('.comment-box').find('.like-reply-list').show();
        });

        $('.no-form').removeClass('form-control no-form');

        $('.reply-box').css('display', 'block');
        $('.comment-box').find('.author-box').show();
        $('.comment-box').find('.like-reply-list').show();
        $('.replypostarea').hide();



        $("#commentForm").submit(function(event) {
            /* stop form from submitting normally */
            event.preventDefault();
            postComment('');
        });

        $(".replyFrm").submit(function(event) {
            /* stop form from submitting normally */
            event.preventDefault();

            var formid = $(this)[0].id;
            var commentid = formid.replace("replyForm-", "");
            postComment(commentid);
        });

        function getLikeCount(commentId, spanupdateId) {
            var data = {};
            //var articleId = $("#article_id").val();
            data['id'] = commentId;

            var spanupdate = $("#"+spanupdateId);

            jQuery.ajax({
                url: "{{ path('circle-comment-like') }}",
                data: data,
                type: "GET",
                dataType: "JSON",
                success: function (data) {
                    console.log(spanupdate);
                    spanupdate.text(data.count);
                }
            });
        }

        function getLoginMsg() {

            var message = $("#loginMsg");

            // message.text = "Please Login to post a comment";
            message.slideDown(500, function(){
                setTimeout(function(){
                    message.slideUp(500);
                },3000);
            });
        }

        function postComment(commentid) {
            var data = {};

            data['commentId'] = commentid;
            data['circleId'] = $('#circleId').val();
            //data['commentId'] = $("#commentId").val();
            //data['comment'] = $('#trn_user_comments_comment').val();

            if (commentid !== '') {
                var message = $('#replymessage'+commentid);
                message.text('Posting your reply to comment......');
                $('.replybutton').attr("disabled", "disabled");
                data['comment'] = $('#reply_box_'+commentid).val();
            } else {
                var message = $("#cmtmessage");
                message.text('Posting your comment......');
                $('.commentbutton').attr("disabled", "disabled");
                data['comment'] = $('#trn_user_comments_comment').val();
            }
console.log(data);
            $.ajax({
                url: '{{ path('circle-comment') }}',
                type: 'POST',
                data: data,
                success: (function (formdata) {

                    // empty the text boxes
                    if(commentid != '') {
                        // hide current open reply box if replying
                        $("#replypostarea"+commentid).hide();
                        $('#reply_box_'+commentid).val('');
                    } else {
                        $('#trn_user_comments_comment').val('');
                    }
                    message.text('');
                    message.text(formdata['message']);
                    message.slideDown(500, function(){
                        setTimeout(function(){
                            message.text('');
                            message.slideUp(500);
                        },3000);
                    });

                    //$("#submitcomment").show();

                    //enable all buttons
                    $('.commentbutton').removeAttr("disabled");
                    $('.replybutton').removeAttr("disabled");

                    //window.location.reload();
                })
            });
        }

        function showReplyBlock(commentid) {
            $("#replypostarea"+commentid).toggle();
            //$("#replyarea"+commentid).toggle();
        }


        function getFilter() {
            var eventTime = [];
            var eventProductType = [];
            $.each($("input[name='eventTime']:checked"), function(){
                eventTime.push($(this).val());
            });
            $.each($("input[name='eventProductType']:checked"), function(){
                eventProductType.push(parseInt($(this).val()));
            });
            var data = {};
            if(eventTime.length > 0) {
                data['eventTime'] = eventTime;
            }
            if(eventProductType.length > 0) {
                data['eventProductType'] = eventProductType;
            }
            data["searchText"] = $.trim($("#searchText").val());
            data['circleId'] = "{{ circle.id }}";
            jQuery.ajax({
                url: "{{ path('get-latest-circle-events-filter') }}",
                data: data,
                type: "POST",
                dataType: "html",
                success: function (data) {
                    var result = $("#projectEvents");
                    result.html('');
                    result.html(data);
                    AOS.init({
                        delay: 50,
                        duration: 800,
                    });
                }
            });
        }

        var pathToCircleShare = "{{ path('circle-share') }}";

        function requestToJoin(circleId) {
            var data = {};
            data['circleId'] = circleId;

            window.location = '{{ path('circle-request-to-join', { 'id': circle.id}) }}';
            /*jQuery.ajax({
                url: "",
                data: data,
                type: "GET",
                dataType: "JSON",
                success: function (result) {
                    if(result['status'] == 'redirect') {
                        window.location = result['url'];
                    }
                }
            });*/
        }

    </script>
{% endblock %}