{% extends '@PrestaShop/Admin/layout.html.twig' %}
{% block content %}
    <div id="success" class="success-message"></div>
    <div id="error" class="error-msg"></div>

    <div class="col-sm-12">
        <div class="card">
            {% include '@Modules/polarisprestaconnector/views/templates/admin/nav.html.twig' %}
            <div class="card-body">

                <h2 style="text-transform: uppercase;">{{ 'Mapping Produits'|trans }}</h2>

                <p>
                    Le mappage des produits permet de lier les produits créés manuellement ou antérieurement sur votre boutique Prestashop avec les produits de votre backoffice {{backoffice}}
                    en faisant correspondre la référence Prestashop avec le code barres {{backoffice}}.                                                                            
                </p>
                
                {% if (sure != 'yes') %}
                    <div class="alert alert-danger" role="alert">
                        <h4 class="alert-heading">Attention !</h4>
                        <p>
                            Modifier les mappages produits peut entraîner un dysfonctionnement partiel ou total de la synchronisation et 
                            n'est pas une opération à effectuer si vous ne savez pas exactement ce que vous faites.
                        </p>
                    </div>
                    <div style="text-align: right;">
                        <a href="{{ path('polarisprestaconnector_products_mapping') }}&sure=yes" class="btn btn-danger pointer">
                            Oui, je comprends et je souhaite accéder au mappage
                        </a>
                    </div>
                {% else %}
                <p>
                    <ul>
                        <li>La colonne <em>"Lié"</em> indique que le produit a été récupéré par le module et est désormais administré par celui-ci.</li>
                        <li>la colonne <em>"Verrouillé"</em> indique que la fiche du produit ne sera pas modifiée par le module et que seules le seront les données de prix et de stock.</li>
                    </ul>
                </p>
                <div style="margin: 1ex 4em;">
                    <table class="grid-table table polarisprestaconnector">
                        <thead>
                            <tr>
                                <th>ID Produit</th>
                                <th>Désignation du produit</th>
                                <th>ID Référence</th>                            
                                <th>Variante</th>
                                <th>EAN {{backoffice}}</th>
                                <th style="text-align: center;">Lié</th>
                                <th style="text-align: center;">Verrouillé</th>
                            </tr>
                            <tr>
                                <td><input type="text" size="2" class="form-control mapping-filter" data-key="id_product" placeholder="ID Produit" data-value="{{ filters.id_product }}" value="{{ filters.id_product }}"></td>
                                <td><input type="text" class="form-control mapping-filter" data-key="variant_name" placeholder="Filtrer par variante" data-value="{{ filters.variant_name }}" value="{{ filters.variant_name }}"></td>
                                <td><input type="text" size="2" class="form-control mapping-filter" data-key="id_product_attribute" placeholder="ID Attribut" data-value="{{ filters.id_product_attribute }}" value="{{ filters.id_product_attribute }}"></td>
                                <td><input type="text" class="form-control mapping-filter" data-key="product_name" placeholder="Filtrer par nom" data-value="{{ filters.product_name }}" value="{{ filters.product_name }}"></td>
                                <td><input type="text" class="form-control mapping-filter" data-key="ean" placeholder="Filtrer par EAN ('vide' pour filtrer que ceux non rempli)" data-value="{{ filters.ean }}" value="{{ filters.ean }}"></td>
                                <td colspan="2">                                    
                                </td>
                            </tr>
                        </thead>
                        <tbody>
                            {% for mapping in mappings %}
                            <tr>
                            </tr>
                            <td>
                                {% if mapping.id_product %}
                                <a href="{{ path('admin_product_form', { 'id': mapping.id_product }) }}" target="_blank">
                                    {{ mapping.id_product }}
                                </a>
                                {% endif %}
                            </td>
                            <td>{{ mapping.product_name }}</td>
                            <td>{{ mapping.id_reference }}</td>                            
                            <td>{{ mapping.variant_name }}</td>
                            <td>
                                <input type="text" class="form-control product-mapping" data-id="{{ mapping.id_reference }}" data-value="{{ mapping.ean }}" value="{{ mapping.ean }}">
                            </td>
                            <td style="text-align: center;">{{mapping.linked}}</td>
                            <td style="text-align: center;">
                                {{mapping.locked}}
                                <!-- switch -->                                
                                <input type="checkbox" class="form-check-input" 
                                style="width: 1.5em; height: 1.5em; line-height: 1.5em; margin: 0; top: 0; position: relative;"
                                {% if mapping.locked %} checked {% endif %}>
                            </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>

                    <!-- pagination manuelle -->
                    <div class="row justify-content-center pagination-block {% if (page == 1) %}disabled{% endif %}">
                        <ul class="pagination mb-0">
                            <li class="page-item {% if (page == 1) %}disabled{% endif %}">
                                <a href="{{ path('polarisprestaconnector_products_mapping', { 'page': 1 }) }}" class="page-link">1</a>
                            </li>
                            <li class="page-item previous {% if (page == 1) %}disabled{% endif %}">
                                <a href="{{ path('polarisprestaconnector_products_mapping', { 'page': page - 1 }) }}" class="page-link">
                                    <span class="sr-only">Précédent</span>
                                </a>
                            </li>
                            <li class="page-item active" style="line-height: 38px; margin: 0 1em;">
                                Page {{ page }} sur {{ nb_pages }} ({{ nb_items }} éléments)
                            </li>
                            <li class="page-item next {% if (page == nb_pages) %}disabled{% endif %}">
                                <a href="{{ path('polarisprestaconnector_products_mapping', { 'page': page + 1 }) }}" class="page-link">
                                    <span class="sr-only">Suivant</span>
                                </a>
                            </li>
                            <li class="page-item {% if (page == nb_pages) %}disabled{% endif %}">
                                <a href="{{ path('polarisprestaconnector_products_mapping', { 'page': nb_pages }) }}" class="page-link">{{ nb_pages }}</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Gestion JS du contrôleur -->
                    <script>
                        document.querySelectorAll('.product-mapping').forEach(input => {
                            // Déclenchement sur perte de focus (blur)
                            input.addEventListener('blur', function () {
                                productMappingChange(this);
                            });

                            // Déclenchement sur touche "Enter"
                            input.addEventListener('keyup', function (event) {
                                if (event.key === 'Enter') {
                                    productMappingChange(this);
                                    this.blur(); // Simule un blur après Enter
                                }
                            });
                        });

                        function productMappingChange(inputElement) {
                            const idCombination = inputElement.dataset.id;
                            const oldValue = inputElement.dataset.value;
                            const newValue = inputElement.value;

                            if (oldValue === newValue) {
                                return; // Pas de changement
                            }

                            console.log(`Mise à jour de l'ID ${idCombination} avec la valeur : ${newValue}`);

                            // Ici, ajoute ton appel AJAX pour enregistrer la nouvelle valeur
                            fetch("{{ path('polarisprestaconnector_products_mappings_update') }}", {
                                method: "POST",
                                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                                body: `id_combination=${idCombination}&supplier_reference=${encodeURIComponent(newValue)}`
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    inputElement.style.backgroundColor = "#d4edda"; // Vert clair pour succès
                                    inputElement.dataset.value = newValue; // Mise à jour de la valeur stockée
                                    setTimeout(() => inputElement.style.backgroundColor = "", 1000);
                                } else {
                                    alert('Erreur : ' + data.message);
                                }
                            })
                            .catch(error => {
                                console.error('Erreur AJAX:', error)
                                inputElement.style.color = "#eee"; // Rouge error
                                inputElement.style.backgroundColor = "#dd0000"; // Rouge error
                                inputElement.dataset.value = oldValue; // Mise à jour de la valeur stockée
                                inputElement.value = error; // Réinitialisation de l'input
                                setTimeout(() => {
                                    inputElement.style.backgroundColor = ""
                                    inputElement.style.color = ""
                                    inputElement.value = oldValue; // Réinitialisation de l'input
                                }, 1000);
                            });
                        }

                        document.querySelectorAll('.mapping-filter').forEach(input => {
                            // Déclenchement sur perte de focus (blur)
                            input.addEventListener('blur', function () {
                                productMappingFilterChange(this);
                            });

                            // Déclenchement sur touche "Enter"
                            input.addEventListener('keyup', function (event) {
                                if (event.key === 'Enter') {
                                    productMappingFilterChange(this);
                                    this.blur(); // Simule un blur après Enter
                                }
                            });
                        });

                        function productMappingFilterChange(inputElement) {
                            const oldValue = inputElement.dataset.value;
                            const newValue = inputElement.value;

                            if (oldValue == newValue) {
                                return; // Pas de changement
                            }
                            
                            // Ici, on rappelle la page avec un filtre
                            window.location.href = "{{ path('polarisprestaconnector_products_mapping') }}&sure=yes&" + 
                                inputElement.dataset.key + "=" + encodeURIComponent(newValue);
                        }
                    </script>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}