{% extends "Global/layout.html.twig" %}

{% set pagetitle = organizer.name %}

{% block title %}{{pagetitle}}{% endblock %}

{% block content %}

    <section class="section-content padding-y bg-white">
        <div class="{{ envFileAccessor.getSetting("app_layout") }}">
            <div class="row">
                <main class="col-12">

                    {% if is_granted('ROLE_ORGANIZER') %}
                        {% if app.user.organizer == organizer %}
                            {% include "Global/message.html.twig" with { type: 'info', icon: 'fas fa-info-circle', message: ('<a href="'~ path('dashboard_organizer_profile') ~'">' ~ 'Click here'|trans ~ '</a> ' ~ 'to edit your profile'|trans) } %}
                        {% endif %}
                    {% endif %}

                    <div class="shadow rounded overflow-hidden">

                        {% if organizer.coverName %}
                            <div class="organizer-profile-cover parallax-window" data-parallax="scroll" data-image-src="{{ vich_uploader_asset(organizer, 'coverFile') }}"></div>
                        {% endif %}

                        <div class="row">
                            <div class="col-12 col-lg-4">
                                <div class="organizer-profile-sidebar text-center {% if not organizer.coverName %}mt-3 mb-3{% endif %}">

                                    <span class="avatar organizer-profile-logo" style="background: url('{{ organizer.logoName ? vich_uploader_asset(organizer, 'logoFile') : organizer.getLogoPlaceholder }}');"></span>

                                    <h4 class="font-weight-bold text-center my-5">{{ organizer.name }}</h4>

                                    {% if organizer.hasSocialMedia %}

                                        <ul class="list-inline mb-0">
                                            {% if organizer.website %}
                                                <li class="list-inline-item">
                                                    <a href="{% if 'http://' not in organizer.website and 'https://' not in organizer.website %}http://{% endif %}{{ organizer.website }}"  class="display-inline-block mr-3" target="_blank"><i class="icon fas fa-globe fa-lg fa-fw"></i></a>
                                                </li>
                                            {% endif %}
                                            {% if organizer.email %}
                                                <li class="list-inline-item">
                                                    <a href="mailto:{{ organizer.email }}"  class="display-inline-block mr-3" target="_blank"><i class="icon fas fa-at fa-lg fa-fw"></i></a>
                                                </li>
                                            {% endif %}
                                            {% if organizer.phone %}
                                                <li class="list-inline-item">
                                                    <a href="tel:{{ organizer.phone }}" class="display-inline-block mr-3"><i class="icon fas fa-phone fa-lg fa-fw"></i></a>
                                                </li>
                                            {% endif %}
                                            {% if organizer.facebook %}
                                                <li class="list-inline-item">
                                                    <a href="{% if 'http://' not in organizer.facebook and 'https://' not in organizer.facebook %}http://{% endif %}{{ organizer.facebook }}" class="display-inline-block mr-3" target="_blank"><i class="icon fab fa-facebook-f fa-lg fa-fw"></i></a>
                                                </li>
                                            {% endif %}
                                            {% if organizer.x %}
                                                <li class="list-inline-item">
                                                    <a href="{% if 'http://' not in organizer.x and 'https://' not in organizer.x %}http://{% endif %}{{ organizer.x }}" class="display-inline-block mr-3" target="_blank"><i class="icon fab fa-xing fa-lg fa-fw"></i></a>
                                                </li>
                                            {% endif %}
                                            {% if organizer.instagram %}
                                                <a href="{% if 'http://' not in organizer.instagram and 'https://' not in organizer.instagram %}http://{% endif %}{{ organizer.instagram }}" class="display-inline-block mr-3" target="_blank"><i class="icon fab fa-instagram fa-lg fa-fw"></i></a>
                                                {% endif %}
                                                {% if organizer.linkedIn %}
                                                <a href="{% if 'http://' not in organizer.linkedIn and 'https://' not in organizer.linkedIn %}http://{% endif %}{{ organizer.linkedIn }}" class="display-inline-block mr-3" target="_blank"><i class="icon fab fa-linkedin fa-lg fa-fw"></i></a>
                                                {% endif %}
                                        </ul>
                                    {% endif %}

                                    {% if organizer.description %}
                                        <div class="py-4 px-4 text-muted line-height-2 readmore" data-collapsed-height="150" data-height-margin="20">
                                            {{ organizer.description|raw|nl2br }}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="col-12 col-lg-8 bg-light">

                                {% set publishedEventEcount = repository.getEvents({"count": true, elapsed: "all", organizer: organizer.slug}).getQuery().getSingleScalarResult() %}

                                <div class="p-4 d-flex justify-content-end text-center">
                                    <ul class="list-inline mb-0">
                                        {% if organizer.categories|length %}
                                            {% for category in organizer.categories %}
                                                <li class="list-inline-item mr-3">
                                                    <h5 class="font-weight-bold mb-0 d-block">
                                                        <i class="{{ category.icon }}"></i>
                                                    </h5>
                                                    <small class="text-muted">
                                                        {{ category.name }}
                                                    </small>
                                                </li>
                                            {% endfor %}

                                        {% endif %}
                                        {% if organizer.country %}
                                            <li class="list-inline-item mr-3">
                                                <h5 class="font-weight-bold mb-0 d-block">
                                                    <span class="flag flag-{{organizer.country.code|lower}}"></span>
                                                </h5>
                                                <small class="text-muted">
                                                    {{ organizer.country.name }}
                                                </small>
                                            </li>
                                        {% endif %}
                                        <li class="list-inline-item mr-3">
                                            <h5 class="font-weight-bold mb-0 d-block">{{ publishedEventEcount }}</h5><small class="text-muted"> <i class="fas fa-calendar-alt fa-fw mr-1"></i>{{ "Events"|trans }}</small>
                                        </li>
                                        <li class="list-inline-item">
                                            <h5 class="font-weight-bold mb-0 d-block">{{ organizer.followedBy|length }}</h5><small class="text-muted"> <i class="fas fa-folder-plus mr-1"></i>{{ "Followers"|trans }}</small>
                                        </li>
                                        <li class="list-inline-item ml-3">
                                            {% if not is_granted('IS_AUTHENTICATED_REMEMBERED') or is_granted('ROLE_ATTENDEE') %}
                                                {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                                                    {% if organizer.isFollowedBy(app.user) %}
                                                        <button class="organizer-unfollow btn btn-outline-primary btn-sm btn-block" data-target="{{ path('dashboard_attendee_following_remove', { slug : organizer.slug }) }}"><i class="fas fa-folder-minus"></i> {{ "Unfollow"|trans }}</button>
                                                    {% else %}
                                                        <button class="organizer-follow btn btn-outline-primary btn-sm btn-block" data-target="{{ path('dashboard_attendee_following_add', { slug : organizer.slug }) }}"><i class="fas fa-folder-plus"></i> {{ "Follow"|trans }}</button>
                                                    {% endif %}
                                                {% else %}
                                                    <a href="{{ path('login')~'?_target_path='~app.request.getPathInfo }}" class="btn btn-outline-primary btn-sm btn-block"><i class="fas fa-folder-plus"></i> {{ "Follow"|trans }}</a>
                                                {% endif %}
                                            {% endif %}
                                        </li>
                                    </ul>
                                </div>

                                {% set onSaleEventsCount = repository.getEvents({"count": true, elapsed: false, organizer: organizer.slug}).getQuery().getSingleScalarResult() %}
                                {% set pastEventsCount = repository.getEvents({"count": true, elapsed: true, organizer: organizer.slug}).getQuery().getSingleScalarResult() %}
                                <div class="py-4 px-4">
                                    <ul class="nav nav-pills mb-3">
                                        <li class="nav-item">
                                            <a class="nav-link active" data-toggle="pill" href="#organizer-onsale-events" role="tab" aria-controls="organizer-onsale-events" aria-selected="true">{{ "Events on sale"|trans }} ({{ onSaleEventsCount }})</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" data-toggle="pill" href="#organizer-past-events" role="tab" aria-controls="organizer-past-events" aria-selected="false">{{ "Past events"|trans }} ({{ pastEventsCount }})</a>
                                        </li>
                                    </ul>
                                    <div class="tab-content">
                                        <div class="tab-pane fade show active" id="organizer-onsale-events" role="tabpanel" aria-labelledby="organizer-onsale-events-tab">
                                            {% if onSaleEventsCount > 0 %}
                                                {% for event in repository.getEvents({elapsed: false, organizer: organizer.slug, limit: 10}).getQuery().getResult() %}
                                                    {% include "Global/event-card.html.twig" with {event: event} %}
                                                {% endfor %}
                                            {% else %}
                                                {% include "Global/message.html.twig" with { type: "info", message: ('No events on sale for now'|trans) } %}
                                            {% endif %}
                                            {% if onSaleEventsCount > 10 %}
                                                <a href="{{ path('events', { organizer: organizer.slug }) }}" class="btn btn-outline-primary mx-auto"><i class="fas fa-ticket-alt"></i> {{ "See all events on sale"|trans }}</a>
                                            {% endif %}
                                        </div>
                                        <div class="tab-pane fade" id="organizer-past-events" role="tabpanel" aria-labelledby="organizer-past-events">
                                            {% if pastEventsCount > 0 %}
                                                {% for event in repository.getEvents({elapsed: true, organizer: organizer.slug, limit: 10}).getQuery().getResult() %}
                                                    {% include "Global/event-card.html.twig" with {event: event, noLazyLoad: true} %}
                                                {% endfor %}
                                            {% else %}
                                                {% include "Global/message.html.twig" with { type: "info", message: ('No past events found'|trans) } %}
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>

                                {% if organizer.showVenuesMap and envFileAccessor.getSetting('google_maps_api_key') != "" %}
                                    {% set venuesCount = repository.getVenues({"count": true, organizer: organizer.slug}).getQuery().getSingleScalarResult() %}
                                    {% if venuesCount %}
                                        {% set venues = [] %}
                                        {% for venue in repository.getVenues({organizer: organizer.slug}).getQuery().getResult() %}
                                            {% set venues = venues|merge([{"name": venue.name, "address":(venue.name ~ ": " ~venue.stringifyAddress), "lat": venue.lat, "lng": venue.lng, "link": (path('venue', { slug : venue.slug })), "image": (venue.images|length ? (vich_uploader_asset(venue.images|first, 'imageFile')): (venue.getImagePlaceholder) ) }]) %}
                                        {% endfor %}

                                        <div class="py-4 px-4">
                                            <h4 class="mb-2"><i class="fas fa-compass mr-1"></i> {{ "Venues"|trans }}</h4>
                                            <div id="venues-map" data-pin-path="{{ asset('img/icons/pin.png') }}" data-venues="{{ venues|json_encode() }}" class="vh-90"></div>
                                        </div>
                                    {% endif %}
                                {% endif %}

                                {% if organizer.youtubeUrl %}
                                    <div class="py-4 px-4">
                                        <h4 class="mb-2"><i class="fab fa-youtube-square mr-1"></i> {{ "Video"|trans }}</h4>
                                        <iframe width="100%" height="400" src="https://www.youtube.com/embed/{{organizer.youtubeUrl|split('=')[1]}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    </div>
                                {% endif %}

                                {% if organizer.showFollowers and organizer.followedBy|length %}
                                    <div class="py-4 px-4">
                                        <h4 class="mb-2"><i class="fas fa-user-plus mr-1"></i> {{ "Followers"|trans }}</h4>
                                        <div class="card border-0 card-body overflow-auto text-nowrap">
                                            <div class="avatar-list py-4">
                                                {% for user in organizer.followedBy %}
                                                    {% include "Global/user-avatar.html.twig" with { user: user, showEmailTooltip: true } %}
                                                {% endfor %}
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}

                                {% set reviewsCount = repository.getReviews({"count": true, "organizer": organizer.slug}).getQuery().getSingleScalarResult() %}

                                {% if organizer.showReviews and reviewsCount %}
                                    <div class="row mt-5 px-4">
                                        <div class="col-12">
                                            <h4 class="mb-2"><i class="fas fa-star mr-1"></i> {{ "Reviews"|trans }}</h4>
                                        </div>
                                        {% for review in repository.getReviews({"organizer": organizer.slug, "limit": 8}).getQuery().getResult() %}
                                            <div class="col-12 col-lg-6 py-4">
                                                {% include "Global/user-review.html.twig" with { review : review, showUser: true, showEvent: true } %}
                                            </div>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </main>
            </div>
    </section>

{% endblock %}

{% block javascripts %}
    {% if envFileAccessor.getSetting('google_maps_api_key') != "" %}

        <script src="{{ asset('vendor/marker-clusterer/marker-clusterer.js') }}"></script>
        <script src="{{ asset('vendor/handlebars/dist/handlebars.min.js') }}"></script>

        <script>


            // snazzy-info-window must be loader after Google Maps is completely loader
            function initMap() {
                if ($('#venues-map').length > 0) {
                    $.getScript('https://cdn.jsdelivr.net/npm/snazzy-info-window@1.1.1/dist/snazzy-info-window.min.js', function () {
                        drawMap($('#venues-map').data('venues'));
                    });
                }
            }

// Initializes Google Maps

            function drawMap(venues) {

                var map = new google.maps.Map(document.getElementById('venues-map'), {
                    zoom: 7,
                    center: {
                        lat: parseFloat(venues[0].lat),
                        lng: parseFloat(venues[0].lng)
                    }
                });

                var markers = venues.map(function (venue, i) {
                    var marker = new google.maps.Marker({
                        position: {
                            lat: parseFloat(venue.lat),
                            lng: parseFloat(venue.lng)
                        },
                        icon: $('#venues-map').data('pin-path')
                    });

                    var template = Handlebars.compile($('#organizer-info-box').html());

                    var info = null;
                    var closeDelayed = false;
                    var closeDelayHandler = function () {
                        $(info.getWrapper()).removeClass('active');
                        setTimeout(function () {
                            closeDelayed = true;
                            info.close();
                        }, 300);
                    };
                    // Add a Snazzy Info Window to the marker
                    info = new SnazzyInfoWindow({
                        marker: marker,
                        wrapperClass: 'custom-window',
                        offset: {
                            top: '-72px'
                        },
                        edgeOffset: {
                            top: 50,
                            right: 60,
                            bottom: 50
                        },
                        border: false,
                        closeButtonMarkup: '<button type="button" class="custom-close">&#215;</button>',
                        content: template({
                            title: venue.name,
                            link: venue.link,
                            bgImg: venue.image,
                            body:
                                    '<p class="text-muted"><small>' + venue.address + '</small></p>'
                        }),
                        callbacks: {
                            open: function () {
                                $(this.getWrapper()).addClass('open');
                            },
                            afterOpen: function () {
                                var wrapper = $(this.getWrapper());
                                wrapper.addClass('active');
                                wrapper.find('.custom-close').on('click', closeDelayHandler);
                            },
                            beforeClose: function () {
                                if (!closeDelayed) {
                                    closeDelayHandler();
                                    return false;
                                }
                                return true;
                            },
                            afterClose: function () {
                                var wrapper = $(this.getWrapper());
                                wrapper.find('.custom-close').off();
                                wrapper.removeClass('open');
                                closeDelayed = false;
                            }
                        }
                    });

                    return marker;
                });
                new MarkerClusterer(map, markers,
                        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
            }


        </script>


        <script async defer src="https://maps.googleapis.com/maps/api/js?key={{ envFileAccessor.getSetting('google_maps_api_key') }}&callback=initMap">
        </script>


        {% include "Global/organizer-info-box.html.twig" %}
    {% endif %}
{% endblock %}