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

{% block title %}{{'Car'|trans}}{% endblock %}

{% block body %}
    <h1>{{'Car - %name%' | trans({'%name%': car.name})}}</h1>

    <table class="table details-table">
        <tbody>
            <tr>
                <th>{{'ID'|trans}}</th>
                <td>{{ car.id }}</td>
            </tr>
            <tr>
                <th>{{'Name'|trans}}</th>
                <td>{{ car.name }}</td>
            </tr>
            <tr>
                <th>{{'Places'|trans}}</th>
                <td>{{ car.places }}</td>
            </tr>
            <tr>
                <th>{{'Color'|trans}}</th>
                <td>{{ car.color }}</td>
            </tr>
            <tr>
                <th>{{'Car Class'|trans}}</th>
                <td>{{ car.carClass }}</td>
            </tr>
            <tr>
                <th>{{'Car Group'|trans}}</th>
                <td>{{ car.carGroup }}</td>
            </tr>
            <tr>
                <th>{{'Price'|trans}}</th>
                <td>{{ '%price%' | trans({'%price%': car.price|number_format(2)}) }}</td>
            </tr>
            <tr>
                <th>{{'Description'|trans}}</th>
                <td>{{ car.description|slice(0, 100) }}</td>
            </tr>
            <tr>
                <th>{{'Photos'|trans}}</th>
                <td>
                    <div class="photos-preview" id="photos-previews">
                        {% for photo in car.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>{{'Slug'|trans}}</th>
                <td>{{ car.slug }}</td>
            </tr>
        </tbody>
    </table>

    {{ include('dashboard/car/_delete_form_and_edit.html.twig') }}
{% 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('car_update_photos_order', { 'id': car.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('car_delete_photo', { 'id': car.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('car_generate_photo', { 'id': car.id }) }}?index=${photoIndex}`)
                    .then(response => response.data)
                    .then(response => {
                        el.classList.remove('show-updating-overlay');
                    });
            });
        }
    </script>
{% endblock %}