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

{% if is_granted('ROLE_ADMINISTRATOR') %}
    {% set pagetitle = 'Manage events' | trans %}
{% elseif is_granted('ROLE_ORGANIZER') %}
    {% set pagetitle = 'My events' | trans %}
{% endif %}

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

{% block content %}

    {% set navigation = [{"current":(pagetitle)}] %}
    {% include "Global/navigation.html.twig" with navigation %}

    <section class="section-content padding-y bg-white">
        <div class="{{ services.getSetting("app_layout") }}">
            <div class="row">
                <aside class="col-lg-3 pt-3 pt-lg-0">
                    {% include "Dashboard/sidebar.html.twig" %}
                </aside>
                <div class="col-lg-9 mt-4 mt-lg-0">

                    <div class="box shadow-none bg-gray mb-4">
                        <div class="row">
                            <div class="col-sm-12 col-lg-2 text-center text-lg-left mb-3 mb-lg-0">
                                <span class="center-lg-y text-muted">{{ "%resultsCount% result(s) found"|trans({'%resultsCount%': events.getTotalItemCount}) }}</span>
                            </div>
                            <div class="col-sm-12 col-lg-8 text-center text-lg-right">
                                <label for="sortable-select" class="display-inline">{{ "Sort by"|trans }}
                                    <select id="sortable-select" class="form-control display-inline-block bg-white select2 ml-3" data-placeholder="{{ "Select an option"|trans }}" style="width: 50%;">
                                        {{ knp_pagination_sortable(events, "Creation date"|trans ~ ' (' ~ "desc"|trans ~ ')', "e.createdAt", {"direction": "desc", "criteria": "e.createdAt"}) }}
                                        {{ knp_pagination_sortable(events, "Creation date"|trans ~ ' (' ~ "asc"|trans ~ ')', "e.createdAt", {"direction": "asc", "criteria": "e.createdAt"}) }}
                                        {{ knp_pagination_sortable(events, "Popularity"|trans ~ ' (' ~ "desc"|trans ~ ')', "e.views", {"direction": "desc", "criteria": "e.views"}) }}
                                        {{ knp_pagination_sortable(events, "Popularity"|trans ~ ' (' ~ "asc"|trans ~ ')', "e.views", {"direction": "asc", "criteria": "e.views"}) }}
                                    </select>
                                </label>
                                {% if is_granted('ROLE_ORGANIZER') %}
                                    <a href="{{ path('dashboard_organizer_event_add') }}" class="btn btn-primary ml-3"><i class="fas fa-plus"></i> {{'Add a new event' | trans}}</a>
                                {% endif %}
                            </div>
                            <div class="col-sm-12 col-lg-2 text-center text-lg-right">
                                <a href="#search-filters" class="btn btn-primary has-tooltip" data-toggle="collapse" title="{{ "Toggle display the search filters"|trans }}" aria-expanded="false" aria-controls="search-filters"><i class="fab fa-searchengin fa-lg"></i></a>
                            </div>
                            <div id="search-filters" class="col-sm-12 col-lg-12 text-center mb-3 mb-lg-0 collapse show">
                                <hr>
                                <form>
                                    <div class="row">
                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <label for="slug">{{ "Event"|trans }}</label>
                                            <input type="text" class="mr-sm-2 mb-2 mb-sm-0 autocomplete bg-white" id="slug" name="slug" data-url-list="{{ is_granted('ROLE_ADMINISTRATOR') ? path('get_events', { published: "all", elapsed: "all" }) : path('get_events', { organizer: app.user.organizer.slug, published: "all", elapsed: "all" }) }}" data-minimum-input-length="0">
                                        </div>
                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <label for="category">{{ "Category"|trans }}</label>
                                            <select id="category" name="category" class="form-control bg-white select2" data-sort-options="1">
                                                <option value="all">{{ "All"|trans }}</option>
                                                {% for category in services.getCategories({}).getQuery().getResult() %}
                                                    <option value="{{ category.slug }}">{{ category.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <label for="venue">{{ "Venue"|trans }}</label>
                                            <select id="venue" name="venue" class="form-control bg-white select2" data-sort-options="1">
                                                <option value="all">{{ "All"|trans }}</option>
                                                {% for venue in services.getVenues({}).getQuery().getResult() %}
                                                    <option value="{{ venue.slug }}">{{ venue.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <div class="custom-control custom-checkbox">
                                                <input id="elapsed-filter-all" type="radio" name="elapsed" value="all" class="custom-control-input">
                                                <label for="elapsed-filter-all" class="custom-control-label">{{ "All"|trans }}</label>
                                            </div>
                                            <div class="custom-control custom-checkbox">
                                                <input id="elapsed-filter-yes" type="radio" name="elapsed" value="1" class="custom-control-input">
                                                <label for="elapsed-filter-yes" class="custom-control-label">{{ "Elapsed only"|trans }}</label>
                                            </div>
                                            <div class="custom-control custom-checkbox">
                                                <input id="elapsed-filter-no" type="radio" name="elapsed" value="0" class="custom-control-input">
                                                <label for="elapsed-filter-no" class="custom-control-label">{{ "Not elapsed only"|trans }}</label>
                                            </div>
                                        </div>
                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <div class="custom-control custom-checkbox">
                                                <input id="published-filter-all" type="radio" name="published" value="all" class="custom-control-input">
                                                <label for="published-filter-all" class="custom-control-label">{{ "All"|trans }}</label>
                                            </div>
                                            <div class="custom-control custom-checkbox">
                                                <input id="published-filter-yes" type="radio" name="published" value="1" class="custom-control-input">
                                                <label for="published-filter-yes" class="custom-control-label">{{ "Published only"|trans }}</label>
                                            </div>
                                            <div class="custom-control custom-checkbox">
                                                <input id="published-filter-no" type="radio" name="published" value="0" class="custom-control-input">
                                                <label for="published-filter-no" class="custom-control-label">{{ "Draft only"|trans }}</label>
                                            </div>
                                        </div>

                                        <div class="col-12 col-sm-4 text-left mb-4">
                                            <button type="submit" class="btn btn-primary" data-toggle="tooltip" title="{{ "Search"|trans }}"><i class="fas fa-search"></i></button>
                                            <button type="reset" class="btn btn-primary" data-toggle="tooltip" title="{{ "Reset"|trans }}"><i class="fas fa-search-minus"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    {% if events.getTotalItemCount > 0 %}
                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    {% include "Dashboard/Shared/Event/manage-events-table.html.twig" with {events: events} %}
                                </div>
                            </div>
                            {{ knp_pagination_render(events, null, {}, {'align': 'center'}) }}
                        </div>
                    {% else %}
                        {% include "Global/message.html.twig" with { type: "info", message: ('No events found'|trans), icon: "fas fa-exclamation-circle" } %}
                    {% endif %}
                </div>
            </div>

        </div>
    </section>

{% endblock %}

{% block javascripts %}

    <script>

        $(document).ready(function () {

            if (getURLParameter("slug")) {
                var url = "{{ (path('get_event', { slug : "eventslug", published: "all", elapsed: "all" }))|raw }}";
                url = url.replace("eventslug", getURLParameter("slug"));
                $.ajax({
                    type: 'GET',
                    url: url
                }).then(function (data) {
                    $('#fake_slug').select2('data', {id: data.slug, text: data.text});
                    $('#slug').val(data.slug).change();
                });

            }

            if (getURLParameter('category') != "null") {
                $('#category').val(getURLParameter('category')).trigger("change");
            }

            if (getURLParameter('venue') != "null") {
                $('#venue').val(getURLParameter('venue')).trigger("change");
            }

            if (getURLParameter('elapsed') != "null") {
                $('input[type="radio"][name="elapsed"][value="' + getURLParameter('elapsed') + '"]').attr("checked", "checked");
            }

            if (getURLParameter('published') != "null") {
                $('input[type="radio"][name="published"][value="' + getURLParameter('published') + '"]').attr("checked", "checked");
            }

        });

    </script>

{% endblock %}