{% extends 'admin.html.twig' %}

{% block title %}{{'Package :: Dashboard' | trans}}{% endblock %}

{% block body %}
    <h1>{{'Package'|trans}}</h1>

    <table class="table details-table details-table-large">
        <tbody>
            <tr>
                <th>{{'ID'|trans}}</th>
                <td>{{ package.id }}</td>
            </tr>
            <tr>
                <th>{{'Title'|trans}}</th>
                <td>{{ package.title }}</td>
            </tr>
            <tr>
                <th>{{'Slug'|trans}}</th>
                <td>{{ package.slug }}</td>
            </tr>
            <tr>
                <th>{{'Description'|trans}}</th>
                <td>{{ package.description }}</td>
            </tr>
            <tr>
                <th>{{'Full Description' | trans}}</th>
                <td>{{ package.fullDescription }}</td>
            </tr>
            <tr>
                <th>{{'Photos' | trans}}</th>
                <td>
                    <div class="photos-preview" id="photos-previews">
                        {% for photo in package.photosByName('admin-preview') %}
                            <div class="single-photo" data-index="{{ loop.index - 1 }}">
                                <img src="{{ asset('uploads/photos/' ~ photo) }}" />
                                <a href="javascript:" data-index="{{ loop.index - 1 }}" class="button button-small delete-image">{{ 'Delete Photo' | trans }}</a>
                                <a href="javascript:" data-index="{{ loop.index - 1 }}" class="button button-small generate-image">{{ 'Generate' | trans }}</a>
                            </div>
                        {% endfor %}
                        <div class="updating-overlay"></div>
                    </div>
                </td>
            </tr>
            <tr>
                <th>{{'Order'|trans}}</th>
                <td>{{ package.orderIndex }}</td>
            </tr>
        </tbody>
    </table>

    <a href="{{ path('package_edit', {'id': package.id}) }}" class="button">{{'Edit'|trans}}</a>

{% endblock %}


{% block javascripts %}
    <!-- jsDelivr :: Sortable :: Latest (https://www.jsdelivr.com/package/npm/sortablejs) -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

    <!-- Axios -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>

    <script>
        const el = document.getElementById('photos-previews');
        const sortable = Sortable.create(el, {
            dataIdAttr: 'data-id',
            filter: '.updating-overlay',
            onUpdate: (e) => {
                const updateData = {};
                const childs = document.getElementsByClassName('single-photo');
                const formData = new FormData();

                for (let index = 0; index < childs.length; index++) {
                    const child = childs[index];
                    const currentIndex = child.getAttribute('data-index');
                    child.setAttribute('data-index', index);
                    child.getElementsByClassName('delete-image')[0].setAttribute('data-index', index);
                    child.getElementsByClassName('generate-image')[0].setAttribute('data-index', index);
                    formData.append(`orders[${currentIndex}]`, index);
                }

                el.classList.add('show-updating-overlay');

                axios.post('{{ path('package_update_photos_order', { 'id': package.id }) }}', formData)
                    .then(response => response.data)
                    .then(() => el.classList.remove('show-updating-overlay'));
            }
        });

        const deletePhotoLinks = document.querySelectorAll('.delete-image');
        const generatePhotoLinks = document.querySelectorAll('.generate-image');

        for (let i = 0; i < deletePhotoLinks.length; i++) {
            const deletePhoto = deletePhotoLinks[i];
            deletePhoto.addEventListener('click', () => {
                const photoIndex = deletePhoto.getAttribute('data-index');
                const formData = new FormData();

                el.classList.add('show-updating-overlay');
                axios.delete(`{{ path('package_delete_photo', { 'id': package.id }) }}?index=${photoIndex}`)
                    .then(response => response.data)
                    .then(response => {
                        const childToRemove = el.querySelector(`.single-photo[data-index="${photoIndex}"]`);
                        el.removeChild(childToRemove);
                        el.classList.remove('show-updating-overlay');

                        const childs = document.getElementsByClassName('single-photo');
                        for (let index = 0; index < childs.length; index++) {
                            const child = childs[index];
                            child.setAttribute('data-index', index);
                            child.getElementsByClassName('delete-image')[0].setAttribute('data-index', index);
                            child.getElementsByClassName('generate-image')[0].setAttribute('data-index', index);
                        }
                    });
            });
        }

        for (let i = 0; i < generatePhotoLinks.length; i++) {
            const generatePhotoLink = generatePhotoLinks[i];
            generatePhotoLink.addEventListener('click', () => {
                const photoIndex = generatePhotoLink.getAttribute('data-index');

                el.classList.add('show-updating-overlay');
                axios.get(`{{ path('package_generate_photo', { 'id': package.id }) }}?index=${photoIndex}`)
                    .then(response => response.data)
                    .then(response => {
                        el.classList.remove('show-updating-overlay');
                    });
            });
        }
    </script>
{% endblock %}