{% extends "base.html" %}

{% block title %}{{ locale.events_management }} - {{ locale.app_name }}{% endblock %}

{% block head_js %}
    <script src="{{ assets }}/js/popper.min.js"></script>
    <script src="{{ assets }}/js/tippy-bundle.umd.min.js"></script>
{% endblock %}

{% block content %}
    
    <div class="container grid px-6 mx-auto">

        <h2 class="my-6 text-2xl font-semibold text-gray-700 dark:text-gray-200">
            {{ locale.events_management }}
        </h2>

        <div class="w-full overflow-hidden rounded-lg shadow-2xl">

            <div class="w-full overflow-x-auto">
                <table class="w-full whitespace-no-wrap">

                    <thead>
                        <tr class="text-sm font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-white dark:text-gray-400 dark:bg-gray-800">
                            <th class="px-4 py-3">{{ locale.create }}</th>
                            <th class="px-4 py-3">{{ locale.event_title }}</th>
                            <th class="px-4 py-3">{{ locale.event_date }}</th>
                            <th class="px-4 py-3">{{ locale.event }}</th>
                            <th class="px-4 py-3">{{ locale.status }}</th>
                            <th class="px-4 py-3">{{ locale.actions }}</th>
                            <th class="px-4 py-3">{{ locale.date }}</th>
                        </tr>
                    </thead>

                    <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
                        {% for event in events %}

                            <tr class="text-gray-700 dark:text-gray-400">

                                <td class="px-4 py-3 text-sm">
                                    {{ event.name }} - {{ event.email }}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {% if event.event_title == '' %}
                                        {% set str = random('abasdjoohodneruiweosndweiqbdwe') %}
                                        <span @click="openModal('{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ str }}')" aria-label="View details" id="view" class="dark:text-purple-400 text-purple-700 cursor-pointer"></span>
                                    {% else %}
                                        <span @click="openModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')" aria-label="View details" id="view" class="dark:text-purple-400 text-purple-700 cursor-pointer">{{ event.event_title }}</span>
                                    {% endif %}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ event.event_date }}
                                </td>

                                <td class="px-4 py-3 text-sm">
                                    {{ event.event }}
                                </td>

                                <td class="px-4 py-3 text-xs w-40">
                                    {% if event.status == 0 %}
                                        <span class="px-2 py-1 font-semibold leading-tight text-yellow-700 bg-yellow-100 rounded-full dark:bg-yellow-500 dark:text-gray-800" id="not_active">{{ locale.not_active }}</span>
                                    {% elseif event.status == 1 %}
                                        <span class="px-2 py-1 font-semibold leading-tight text-green-700 bg-green-100 rounded-full dark:bg-green-700 dark:text-green-100" id="event_approved">{{ locale.event_approved }}</span>
                                    {% elseif event.status == 2 %}
                                        <span class="px-2 py-1 font-semibold leading-tight text-red-700 bg-red-100 rounded-full dark:text-red-100 dark:bg-red-700" id="event_blocked">{{ locale.blocked }}</span>
                                    {% elseif event.status == 3 %}
                                        <span class="px-2 py-1 font-semibold leading-tight text-gray-100 bg-gray-500 rounded-full dark:text-gray-100 dark:bg-gray-500" id="event_draft">{{ locale.draft }}</span>
                                    {% endif %}
                                </td>

                                <td class="px-4 py-3">
                                    <div class="flex items-center space-x-4 text-sm">

                                        {% for attachment in events_attachments %}

                                            {% if attachment.event_id == event.event_id %}
                                            
                                                {% if attachment.filename is not null or attachment.filename is not empty %}

                                                    <a aria-label="Download" id='{{ attachment.hashed_id|replace({"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":""}) }}' class="flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-purple-600 rounded-lg dark:text-gray-400 focus:outline-none focus:shadow-outline-gray" href="download/a/{{ attachment.hashed_id }}" download>
                                                        <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                            <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2"></path>
                                                            <polyline points="7 11 12 16 17 11"></polyline>
                                                            <line x1="12" y1="4" x2="12" y2="16"></line>
                                                        </svg>
                                                    </a>

                                                    <script>
                                                        tippy('#{{ attachment.hashed_id|replace({"0":"","1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":"","9":""}) }}', {
                                                            content: '{{ locale.download }} ' + '{{ attachment.filename }}',
                                                            interactive: true,
                                                        });
                                                    </script>

                                                {% endif %}

                                            {% endif %}

                                        {% endfor %}

                                        {% if event.status == 0 %}

                                            <button aria-label="Approve" id="{{ event.event_id }}-{{ event.user_id }}" class="approve-event flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-green-400 focus:outline-none focus:shadow-outline-gray">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <circle cx="12" cy="12" r="9"></circle>
                                                    <path d="M9 12l2 2l4 -4"></path>
                                                </svg>
                                            </button>

                                        {% elseif event.status == 1 %}

                                            <button aria-label="Block" id="{{ event.event_id }}-{{ event.user_id }}" class="block-event flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-red-700 rounded-lg dark:text-red-600 focus:outline-none focus:shadow-outline-gray">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <circle cx="12" cy="12" r="9"></circle>
                                                    <path d="M10 10l4 4m0 -4l-4 4"></path>
                                                </svg>
                                            </button>

                                        {% elseif event.status == 2 %}

                                            <button aria-label="Approve" id="{{ event.event_id }}-{{ event.user_id }}" class="approve-event flex items-center justify-between px-2 py-2 text-sm font-medium leading-5 text-green-600 rounded-lg dark:text-green-400 focus:outline-none focus:shadow-outline-gray">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <circle cx="12" cy="12" r="9"></circle>
                                                    <path d="M9 12l2 2l4 -4"></path>
                                                </svg>
                                            </button>

                                        {% endif %}

                                    </div>
                                </td>
                                
                                <td class="px-4 py-3 text-sm">
                                    {{ event.time_created|date('d-m-Y \\a\\t H:i') }}
                                </td>

                            </tr>

                            <!-- Modal -->
                            <div x-cloak 
                            class="fixed inset-0 z-30 flex items-end bg-black bg-opacity-50 sm:items-center sm:justify-center"

                            {% if event.event_title == "" %}
                                {% set str = random("abasdjoohodneruiweosndweiqbdwe") %}
                                x-show="modals.{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                            {% else %}
                                x-show="modals.{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                            {% endif %}

                            x-transition:enter="transition ease-out duration-150"
                            x-transition:enter-end="opacity-100"
                            x-transition:enter-start="opacity-0"
                            x-transition:leave="transition ease-in duration-150"
                            x-transition:leave-end="opacity-0"
                            x-transition:leave-start="opacity-100">

                                <div x-cloak 
                                @click.away="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                                @keydown.escape="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                                class="w-full px-6 py-4 overflow-hidden bg-white rounded-t-lg dark:bg-gray-800 sm:rounded-lg sm:m-4 sm:max-w-xl"
                                id="{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                                role="dialog"

                                {% if event.event_title == "" %}
                                    {% set str = random("abasdjoohodneruiweosndweiqbdwe") %}
                                    x-show="modals.{{ str|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                                {% else %}
                                    x-show="modals.{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}"
                                {% endif %}

                                x-transition:enter="transition ease-out duration-150"
                                x-transition:enter-end="opacity-100"
                                x-transition:enter-start="opacity-0 transform translate-y-1/2"
                                x-transition:leave="transition ease-in duration-150"
                                x-transition:leave-end="opacity-0  transform translate-y-1/2"
                                x-transition:leave-start="opacity-100">

                                    <div class="mt-4 mb-8">
                                        <!-- title -->
                                        <p class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-300">
                                            {{ event.event_title }}
                                        </p>
                                        <p class="flex text-sm text-gray-700 dark:text-gray-400 mb-2">
                                            <span class="w-1/5 font-semibold">{{ locale.event }}</span>
                                            <span class="w-4/5">{{ event.event }}</span>
                                        </p>
                                        <p class="flex text-sm text-gray-700 dark:text-gray-400 mb-2">
                                            <span class="w-1/5 font-semibold">{{ locale.feedback }}</span>
                                            <span class="w-4/5">{{ event.event_feedback }}</span>
                                        </p>
                                        <p class="flex text-sm text-gray-700 dark:text-gray-400">
                                            <span class="w-1/5 font-semibold">{{ locale.url }}</span>
                                            <span class="w-4/5">{{ event.url }}</span>
                                        </p>
                                    </div>

                                    <footer class="flex flex-col items-center justify-end px-6 py-3 -mx-6 -mb-4 space-y-4 sm:space-y-0 sm:space-x-6 sm:flex-row bg-gray-200 bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-50">
                                        <button
                                        @click="closeModal('{{ event.event_title|replace({' ':'', '.':'','1':'a','2':'b','3':'c','4':'d','5':'e','6':'f','7':'g','8':'h','9':'i','0':'j'}) }}{{ event.event_id }}')"
                                        class="w-full px-5 py-3 text-sm font-medium leading-5 text-gray-700 transition-colors duration-150 border border-gray-300 rounded-full dark:text-gray-400 sm:px-4 sm:py-2 sm:w-auto active:bg-transparent hover:border-gray-500 focus:border-gray-500 active:text-gray-500 focus:outline-none focus:shadow-outline-gray">
                                            {{ locale.close }}
                                        </button>
                                    </footer>

                                </div>
                            </div>
                            <!-- Modal -->

                        {% endfor %}
                    </tbody>

                </table>
            </div>

            <div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-white sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
                {{ pagination|raw }}
            </div>

        </div>

    </div>

    <div class="flex justify-center">

        <div id="snackbar" class="hidden fixed bottom-8 px-5 py-4 space-x-4 min-w-fit dark:text-gray-500 dark:bg-white rounded-full divide-x divide-gray-200 shadow-2xl text-gray-200 dark:divide-gray-400 space-x bg-gray-700">
            <span id="icon">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-500" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
            </span>
            <div id="message" class="pl-4 text-sm font-normal"></div>
        </div>

    </div>

{% endblock %}

{% block js %}

    <script defer src="{{ assets }}/js/focus-trap.js"></script>
    <script defer src="{{ assets }}/js/snackbar.min.js?v=1"></script>
    <script defer src="{{ assets }}/js/events-management.min.js?v=1"></script>

    <script>
        tippy('#view', {
            content: '{{ locale.view_details }}',
            interactive: true,
        });
        tippy('.approve-event', {
            content: '{{ locale.approve_event }}',
            interactive: true,
        });
        tippy('.block-event', {
            content: '{{ locale.block_event }}',
            interactive: true,
        });
        tippy('#event_approved', {
            content: '{{ locale.event_approved_popup_admin }}',
            interactive: true,
        });
        tippy('#event_blocked', {
            content: '{{ locale.event_blocked_popup_admin }}',
            interactive: true,
        });
        tippy('#not_active', {
            content: '{{ locale.not_active_popup_admin }}',
            interactive: true,
        });
    </script>

{% endblock %}