{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as macro %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {


            $('#tableDevices').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('validations_devices_ajax') }}',
                    type: 'GET'
                },
                searchDelay: 1000,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                columns: [
                    {data: 'brand'},
                    {data: 'model'},
                    {data: 'createdBy'},
                    {data: 'nbStudies'},
                    {data: 'version'},
                    {data: 'dateAdded'},
                    {data: 'finition'},
                    {data: 'departFumee'},
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return '<div class="action-buttons">' +
                                '<a href="' + data.editUrl + '" class="action-button" title="Modifier un appareil"><img src="/install-bois/icon/tab_action_modifier.png"/></a>' +
                                '<button type="button" class="action-button deleteButton" data-id="' + data.id + '" title="Supprimer un appareil"><img alt="Supprimer" src="/install-bois/icon/tab_action_supprimer.png"/></button>' +
                                '<a href="' + data.publicUrl + '" class="action-button" title="Rendre public l\'appareil"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">verified</span></button></a>' +
                                '<a href="' + data.companyUrl + '" class="action-button" title="Valider l\'appareil pour l\'entreprise"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">domain</span></button></a>' +
                                '<a href="' + data.notValidatedUrl + '" class="action-button" title="Invalider l\'appareil"><button type="button" class="boutonRetour validProduct"><span class="material-icons-outlined">thumb_down_alt</span></button></a>' +
                                '</div>';
                        }
                    }
                ],
                order: [[1, 'asc']]
            });
            $('#tableDevices, #tableDevicesToDelete').on('click', '.deleteButton', function () {
                var deviceId = $(this).data('id');
                var popupHtml = {{ macro.popup(
                    'danger',
                    'form_delete_device_PLACEHOLDER',
                    path('products_delete', {'id': 'PLACEHOLDER'}),
                    'PLACEHOLDER'
                ) | json_encode | raw }}.
                replace(/PLACEHOLDER/g, deviceId);

                $('.modal').remove();
                $('body').append(popupHtml);
                $('#popup-danger-' + deviceId).modal('show');
            });
            setTimeout(() => {
                $('#tableBrands_filter label').contents().first()[0].textContent = 'Rechercher par marque : ';
            }, 500)

            $('#tableDevicesToDelete').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('validations_devices_to_delete_ajax') }}',
                    type: 'GET'
                },
                searchDelay: 1000,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                columns: [
                    {data: 'brand'},
                    {data: 'model'},
                    {data: 'createdBy'},
                    {data: 'nbStudies'},
                    {data: 'version'},
                    {data: 'dateAdded'},
                    {data: 'finition'},
                    {data: 'departFumee'},
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function(data, type, row) {
                            return '<div class="action-buttons">' +
                                '<a href="' + data.editUrl + '" class="action-button" title="Modifier un appareil"><img src="/install-bois/icon/tab_action_modifier.png"/></a>' +
                                '<button type="button" class="action-button deleteButton" data-id="' + data.id + '" title="Supprimer un appareil"><img alt="Supprimer" src="/install-bois/icon/tab_action_supprimer.png"/></button>' +
                                '<a href="' + data.publicUrl + '" class="action-button" title="Rendre public l\'appareil"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">verified</span></button></a>' +
                                '<a href="' + data.companyUrl + '" class="action-button" title="Valider l\'appareil pour l\'entreprise"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">domain</span></button></a>' +
                                '</div>';
                        }
                    }
                ],
                order: [[1, 'asc']]
            });

            $('#tableDucts').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('validations_ducts_ajax') }}',
                    type: 'GET'
                },
                searchDelay: 1000,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                columns: [
                    {data: 'brand'},
                    {data: 'model'},
                    {data: 'createdBy'},
                    {data: 'nbStudies'},
                    {data: 'version'},
                    {data: 'dateAdded'},
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return '<div class="action-buttons">' +
                                '<a href="' + data.editUrl + '" class="action-button" title="Modifier un conduit"><img src="/install-bois/icon/tab_action_modifier.png"/></a>' +
                                '<button type="button" class="action-button deleteButton" data-id="' + data.id + '" title="Supprimer un conduit"><img alt="Supprimer" src="/install-bois/icon/tab_action_supprimer.png"/></button>' +
                                '<a href="' + data.publicUrl + '" class="action-button" title="Rendre public le conduit"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">verified</span></button></a>' +
                                '<a href="' + data.companyUrl + '" class="action-button" title="Valider le conduit pour l\'entreprise"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">domain</span></button></a>' +
                                '<a href="' + data.notValidatedUrl + '" class="action-button" title="Invalider le conduit"><button type="button" class="boutonRetour validProduct"><span class="material-icons-outlined">thumb_down_alt</span></button></a>' +
                                '</div>';
                        }
                    }
                ],
                order: [[1, 'asc']]
            });
            $('#tableDucts').on('click', '.deleteButton', function () {
                var ductId = $(this).data('id');
                var popupHtml = {{ macro.popup(
                    'danger',
                    'form_delete_duct_PLACEHOLDER',
                    path('products_delete', {'id': 'PLACEHOLDER'}),
                    'PLACEHOLDER'
                ) | json_encode | raw }}.
                replace(/PLACEHOLDER/g, ductId);

                $('.modal').remove();
                $('body').append(popupHtml);
                $('#popup-danger-' + ductId).modal('show');
            });

            $('#tableDuctsToDelete').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('validations_ducts_to_delete_ajax') }}',
                    type: 'GET'
                },
                searchDelay: 1000,
                language: {
                    url: '/localisation/fr_FR.json'
                },
                columns: [
                    {data: 'brand'},
                    {data: 'model'},
                    {data: 'createdBy'},
                    {data: 'nbStudies'},
                    {data: 'version'},
                    {data: 'dateAdded'},
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return '<div class="action-buttons">' +
                                '<a href="' + data.editUrl + '" class="action-button" title="Modifier un conduit"><img src="/install-bois/icon/tab_action_modifier.png"/></a>' +
                                '<button type="button" class="action-button deleteButton" data-id="' + data.id + '" title="Supprimer un conduit"><img alt="Supprimer" src="/install-bois/icon/tab_action_supprimer.png"/></button>' +
                                '<a href="' + data.publicUrl + '" class="action-button" title="Rendre public le conduit"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">verified</span></button></a>' +
                                '<a href="' + data.companyUrl + '" class="action-button" title="Valider le conduit pour l\'entreprise"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">domain</span></button></a>' +
                                '</div>';
                        }
                    }
                ],
                order: [[1, 'asc']]
            });
            $('#tableDuctsToDelete').on('click', '.deleteButton', function () {
                var ductId = $(this).data('id');
                var popupHtml = {{ macro.popup(
                    'danger',
                    'form_delete_duct_PLACEHOLDER',
                    path('products_delete', {'id': 'PLACEHOLDER'}),
                    'PLACEHOLDER'
                ) | json_encode | raw }}.
                replace(/PLACEHOLDER/g, ductId);

                $('.modal').remove();
                $('body').append(popupHtml);
                $('#popup-danger-' + ductId).modal('show');
            });

            $('#tableBrands').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ path('validations_brands_ajax') }}',
                    type: 'GET'
                },
                searchDelay: 1000,
                language: {
                    url: '/localisation/fr_FR.json',
                    search: "Rechercher une marque :"
                },
                columns: [
                    {
                        data: 'manufacturer',
                        orderable: false
                    },
                    {data: 'brand'},
                    {
                        data: 'createdBy',
                        orderable: false
                    },
                    {
                        data: 'nbStudies',
                        orderable: false
                    },
                    {data: 'dateAdded'},
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row) {
                            return '<div class="action-buttons">' +
                                '<a href="' + data.editUrl + '" class="action-button" title="Modifier une marque"><img src="/install-bois/icon/tab_action_modifier.png"/></a>' +
                                '<button type="button" class="action-button deleteButton" data-id="' + data.id + '" title="Supprimer une marque"><img alt="Supprimer" src="/install-bois/icon/tab_action_supprimer.png"/></button>' +
                                '<a href="' + data.publicUrl + '" class="action-button" title="Rendre public la marque"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">verified</span></button></a>' +
                                '<a href="' + data.companyUrl + '" class="action-button" title="Valider la marque pour l\'entreprise"><button type="button" class="boutonAction validProduct"><span class="material-icons-outlined">domain</span></button></a>' +
                                '</div>';
                        }
                    }
                ],
                order: [[1, 'asc']]
            });
            $('#tableBrands').on('click', '.deleteButton', function () {
                var brandId = $(this).data('id');
                var popupHtml = {{ macro.popup(
                    'danger',
                    'form_delete_brand_PLACEHOLDER',
                    path('brand_delete', {'id': 'PLACEHOLDER'}),
                    'PLACEHOLDER'
                ) | json_encode | raw }}.
                replace(/PLACEHOLDER/g, brandId);

                $('.modal').remove();
                $('body').append(popupHtml);
                $('#popup-danger-' + brandId).modal('show');
            });
            $('#tableBrands_filter label').contents().filter(function() {
                return this.nodeType === 3;
            }).replaceWith('Rechercher par marque : ');

            $("#tabs").tabs();

            // Gérer l'onglet actif
            var activeTab = "{{ tabsContainer }}";
            switch (activeTab) {
                case 'tabBrands':
                    $("#tabs").tabs("option", "active", 0);
                    break;
                case 'tabDevices':
                    $("#tabs").tabs("option", "active", 1);
                    break;
                case 'tabDucts':
                    $("#tabs").tabs("option", "active", 2);
                    break;
                default:
                    $("#tabs").tabs("option", "active", 0);
                    break;
            }
        });
    </script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .action-buttons {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .action-button {
            margin-right: 5px;
            background-color: transparent;
            border: none;
            padding: 0;
            cursor: pointer;
        }

        .action-button:last-child {
            margin-right: 0;
        }

        .action-button img,
        .action-button .material-icons-outlined {
            vertical-align: middle;
        }
    </style>
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            Validations des marques, appareils et conduits
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div id="tabs" class="col-sm-12 col-md-12 col-lg-12">
        <ul>
            <li><a href="#tabBrands">Marques</a></li>
            <li><a href="#tabDevices">Appareils</a></li>
            <li><a href="#tabDucts">Conduits</a></li>
        </ul>
        <div id="tabBrands">
            <table id="tableBrands" class="display">
                <thead>
                <tr>
                    <th>Fabricant</th>
                    <th>Marque</th>
                    <th>Créé par</th>
                    <th>Nb études</th>
                    <th>Date ajout</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>
        </div>
        <div id="tabDevices">
            <div class="rubrique rubrique_titre">
                <span>Appareils à valider</span>
            </div>
            <table id="tableDevices" class="display">
                <thead>
                <tr>
                    <th>Marque</th>
                    <th>Appareil</th>
                    <th>Créé par</th>
                    <th>Nb études</th>
                    <th>Version</th>
                    <th>Date ajout</th>
                    <th>Finitions</th>
                    <th>Départ fumées</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>
            <div class="rubrique rubrique_titre">
                <span>Appareils à supprimer</span>
            </div>
            <table id="tableDevicesToDelete" class="display">
                <thead>
                <tr>
                    <th>Marque</th>
                    <th>Appareil</th>
                    <th>Créé par</th>
                    <th>Nb études</th>
                    <th>Version</th>
                    <th>Date ajout</th>
                    <th>Finitions</th>
                    <th>Départ fumées</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>
        </div>
        <div id="tabDucts">
            <div class="rubrique rubrique_titre">
                <span>Conduits à valider</span>
            </div>
            <table id="tableDucts" class="display">
                <thead>
                <tr>
                    <th>Marque</th>
                    <th>Conduits</th>
                    <th>Créé par</th>
                    <th>Nb études</th>
                    <th>Version</th>
                    <th>Date ajout</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>

            <div class="rubrique rubrique_titre">
                <span>Conduits à supprimer</span>
            </div>
            <table id="tableDuctsToDelete" class="display">
                <thead>
                <tr>
                    <th>Marque</th>
                    <th>Conduits</th>
                    <th>Créé par</th>
                    <th>Nb études</th>
                    <th>Version</th>
                    <th>Date ajout</th>
                    <th>Actions</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
{% endblock %}