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

{% block body_class 'bg-grey font-size-sm' %}
{% block style_container %}padding:0;{% endblock %}
{% block title %} Validation intervention {% endblock %}
{% block main %}

<form id="form-change-intervention-recherche" class="form form-ajax" method="post" action="{{ path('maj_intervention_recherche') }}">
    <input type="hidden" name="type_change" form="form-change-intervention-recherche" value="">
    <input type="hidden" name="data_value" value="" form="form-change-intervention-recherche" >
</form>

<div class="d-flex bg-primary  pt-2 ps-2 ms-1 me-1  " style="flex-grow:1;">
    <form id="validation-form-search" method="post" class="w-100 form form-ajax" data-no-reset="no" data-target-html="#target-list-intervention" action="{{ path('search_intervention_a_valider') }}">
        <div class="d-flex align-items-center justify-content-center">
            {% set utilisateurSites = app.user.getUtilisateurSites %}
            {% if utilisateurSites|length > 1 %}
                <div class="input-group form-group pb-2 d-flex w-auto me-4">
                    <label class="white me-2  control-label align-self-center">Site </label>
                    <select name="site" style="width:auto" class="form-control bg-grey change_recherche_intervention"  required data-form-change="#form-change-intervention-recherche" data-target="#target-intervention_responsable">
                        {% for utilisateurSite in utilisateurSites %}
                            <option value="{{ utilisateurSite.site.id }}">{{ utilisateurSite.site.nom }}</option>
                        {% endfor %}
                    </select>
                </div>
            {% else %}
                <div class="input-group form-group pb-2 d-flex w-auto me-4">
                    <label class="white me-2  control-label align-self-center" for="agent_nom" >Site</label>
                    <input type="text" id="intervention_site" disabled name="site" class="form-control bg-white" style="max-width: 164px;" value="{{ utilisateurSites[0].getSite.nom }}">
                </div>
            {% endif %}
            <div class="input-group form-group pb-2 d-flex w-auto me-4" id="target-intervention_responsable">
                {{ include('intervention/_select_intervention_responsable.html.twig') }}
            </div>
            <div class="input-group form-group pb-2 d-flex w-auto me-4" id="target-intervention_agent">
                {{ include('intervention/_select_intervention_agent.html.twig') }}
            </div>
            <div class="input-group form-group pb-2 d-flex w-auto me-4">
                <label class="white me-2 control-label align-self-center">A partir du</label>
                <input type="date"   name="a_partir_du" class="form-control bg-grey input-date-custom" value="" form="validation-form-search">
            </div>
            <div class="d-flex flex-column align-items-center h-100 pb-2" style="gap:0.5rem;">
                <button class="btn bg-vert-vert w-100" style="width: 193px !important;" type="submit">Rechercher</button>
                <button class="btn bg-rouge-rouge w-100" style="width:193px !important" type="reset" id="btn-efface-recherche-validation">Effacer</button>
            </div>
        </div>
    </form>
</div>
<div class="d-flex mt-2" id="body-validation">
    <div class="validation-left" style="min-width: 350px;height: 96vh; overflow-y: auto;" id="target-list-intervention">
    </div>
    <div id="target-show-intervention" class="d-flex flex-grow-1 mx-1"></div>
</div>
    {{ encore_entry_script_tags('loader') }}

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="module">
        let initialValues = {};
        let valueChanged = false;
        let gridModified = false;
        $('body').on('change', '.change_recherche_intervention', function(e) {
            var form = $(this).data('form-change');
            var name = $(this).attr('name');
            $(form + ' > input[name=type_change]').val(name);
            $(form + ' > input[name=data_value]').val($(this).val());
            $(form).data('target-html', $(this).data('target'));
            $(form).submit();
            //si nom = site on vide la selection responsable et agent
            if (name == 'site') {
                $('#intervention_responsable').val('');
                $('#intervention_agent').html('');
            }
            //si nom = responsable, on vide la selection agent
            else if (name == 'intervention_responsable') {
                $('#intervention_agent').val('');
            }
        });
        $('body').on('click', '#btn-efface-recherche-validation', function(e) {
            $('#target-list-intervention').html('');
        })
        $('body').on('click', '.accordion-button', function(e) {
            // Récupérer le bouton cliqué
            var button = $(this);

            // Faire défiler jusqu'au bouton, en le rendant visible
            button[0].scrollIntoView({
                behavior: 'smooth', // Défilement fluide
                block: 'nearest'    // Le bouton sera visible sans remonter tout en haut
            });
        });
        $('body').on('click', '.list-group-item.show_validation', function(e) {
            var route = $(this).data('href');
            showLoader();
            window.getHtmlFromAjax(route)
                .then(function (data) {
                    $('#target-show-intervention').html(data);
                })
                .catch(function (error) {
                    console.error('Erreur :', error);
                })
                .finally(function() {
                    initDevExtremeGrids('#intervention-grid-facturation');
                    initFacturationGridEvents();
                    updateMontantHTRecap();
                    updateMontantTTCRecap();
                    updatePrixTTC('deplacement');
                    updatePrixTTC('mo');
                    hideLoader();
                    saveInitialValues();
                    valueChanged = false;
                    gridModified = false;
                });
        });
        $('body').on('change','.tva-select', function(e) {
            const group = $(this).data('group');
            updatePrixTTC(group);
        });
        $('body').on('click', '#add_facture-piece', function (e) {
            var datagridFacturePiece = $('#intervention-grid-facturation').dxDataGrid('instance');
            datagridFacturePiece.addRow();
        });
        $('body').on('change', '#mode-paiement, #mo-tva, #deplacement-tva, #montant-acompte, #contrat_type, #equipement_tva', function(e) {
            const elementId = $(this).attr('id');
            const currentValue = getFieldValue(elementId);
            const initialValue = initialValues[elementId];

            console.log(`${elementId}: initial=${initialValue}, current=${currentValue}`);

            // Mettre à jour le statut du popup
            updatePopupModifiedStatus();
        });
        $(document).on('ready turbo:load', function() {
            console.log('laa');
            if ($('#intervention_responsable').val() != '' && $('#intervention_agent option').length  == 1) {
                $('#intervention_responsable').val('');
            }
        })

        function calculatePrixTTC(prixHT, tva) {
            if (!prixHT || !tva) return '';
            const prixHtNumber = parseFloat(prixHT.replace(',', '.'));
            const tvaNumber = parseFloat(tva.replace(',', '.'));
            if (isNaN(prixHtNumber) || isNaN(tvaNumber)) return '';

            const prixTTC = prixHtNumber * (1 + (tvaNumber / 100));
            return prixTTC.toFixed(2).replace('.', ',');
        }
        function initFacturationGridEvents() {
            const gridElement = '#intervention-grid-facturation';
            const grid = $(gridElement).dxDataGrid('instance');

            if (!grid) return;

            // Écouter les événements du grid
            $(gridElement).on('grid:contentReady grid:rowInserted grid:rowRemoved grid:rowUpdated', function(event, e) {
                updateTotalHTPieces(e.component);
                updateRecapTVA(e.component);

                if (event.type !== 'grid:contentReady') {
                    gridModified = true;
                    $('#button-valider-adm').attr('data-dxpopup', true);
                }
            });

            // Écouter les changements sur les champs qui peuvent affecter le total
            $('body').on('change', '#deplacement-prix-ht, #deplacement-tva, #mo-prix-ht, #mo-tva', function() {
                updateMontantHTRecap();
                updateRecapTVA(grid);
            });

            $('body').on('change', '#montant-ttc-recap, #montant-paiement, #montant-acompte', function() {
                updateMontantEcart();
            });
        }

        function updatePrixTTC(group) {
            const prixHT = $(`#${group}-prix-ht`).val();
            const tva = $(`#${group}-tva option:selected`).text().replace('%', '');  // Plus complexe et fragile
            const prixTTC = calculatePrixTTC(prixHT, tva);
            $(`#${group}-prix-ttc`).val(String(prixTTC) + '€');
        }
        function formatNumber(number) {
            return number.toFixed(2).replace('.', ',');
        }

        // Fonction pour parser un nombre au format français
        function parseNumber(str) {
            if (!str) return 0;
            return parseFloat(str.replace(',', '.')) || 0;
        }

        function updateTotalHTPieces(gridInstance) {
            let total = 0;
            // Somme de tous les total_ht du tableau
            const visibleRows = gridInstance.getVisibleRows();
            visibleRows.forEach(function(row) {
                if (row.data && row.data.total_ht) {
                    total += parseNumber(String(row.data.total_ht));
                }
            });

            $('#total-ht-pieces').text(formatNumber(total) + ('€'));
            // Déclencher la mise à jour du récapitulatif
            updateMontantHTRecap();
        }

        // Fonction pour mettre à jour le montant HT récap
        function updateMontantHTRecap() {
            const totalHTPieces = parseNumber($('#total-ht-pieces').text().replace('%', ''));
            const totalHTDeplacement = parseNumber($('#deplacement-prix-ht').val());
            const totalHTMO = parseNumber($('#mo-prix-ht').val());

            const totalHT = totalHTPieces + totalHTDeplacement + totalHTMO;
            $('#montant-ht-recap').val(formatNumber(totalHT));

            // Déclencher la mise à jour du TTC
            updateMontantTTCRecap();
        }

        // Fonction pour mettre à jour le montant TTC récap
        function updateMontantTTCRecap() {
            const montantHT = parseNumber($('#montant-ht-recap').val());
            const montantTVA = parseNumber($('#montant-tva-recap').val());

            const montantTTC = montantHT + montantTVA;
            $('#montant-ttc-recap').val(String(formatNumber(montantTTC)) + '€');
            updateMontantEcart();
        }

        function updateRecapTVA(gridInstance) {
            // Objet pour stocker les totaux par taux de TVA
            let tvaRecap = {};

            // 1. Récupérer les TVA du grid
            gridInstance.getVisibleRows().forEach(function(row) {
                if (row.data && row.data.total_ht && row.data.taux_tva) {
                    const taux = parseNumber(String(row.data.taux_tva));
                    const ht = parseNumber(String(row.data.total_ht));
                    const tva = (ht * taux) / 100;

                    if (!tvaRecap[taux]) {
                        tvaRecap[taux] = { baseHT: 0, montantTVA: 0 };
                    }
                    tvaRecap[taux].baseHT += ht;
                    tvaRecap[taux].montantTVA += tva;
                }
            });

            // 2. Ajouter TVA du déplacement
            const deplacementHT = parseNumber($('#deplacement-prix-ht').val());
            const deplacementTVA = parseNumber($('#deplacement-tva option:selected').text().replace('%', ''));
            if (deplacementHT && deplacementTVA) {
                const tva = (deplacementHT * deplacementTVA) / 100;
                if (!tvaRecap[deplacementTVA]) {
                    tvaRecap[deplacementTVA] = { baseHT: 0, montantTVA: 0 };
                }
                tvaRecap[deplacementTVA].baseHT += deplacementHT;
                tvaRecap[deplacementTVA].montantTVA += tva;
            }

            // 3. Ajouter TVA de la main d'œuvre
            const moHT = parseNumber($('#mo-prix-ht').val());
            const moTVA = parseNumber($('#mo-tva option:selected').text().replace('%', ''));
            if (moHT && moTVA) {
                const tva = (moHT * moTVA) / 100;
                if (!tvaRecap[moTVA]) {
                    tvaRecap[moTVA] = { baseHT: 0, montantTVA: 0 };
                }
                tvaRecap[moTVA].baseHT += moHT;
                tvaRecap[moTVA].montantTVA += tva;
            }

            // 4. Mettre à jour le tableau récapitulatif
            const tbody = $('#tab-recap-taux tbody');
            tbody.empty();

            let totalTVA = 0;

            // Trier les taux de TVA
            Object.keys(tvaRecap).sort((a, b) => parseFloat(a) - parseFloat(b)).forEach(function(taux) {
                const recap = tvaRecap[taux];
                tbody.append(`
            <tr style="max-height:25px">
                <td class="text-end">${formatNumber(recap.baseHT)}€</td>
                <td class="text-center">${formatNumber(parseFloat(taux))}%</td>
                <td class="text-end">${formatNumber(recap.montantTVA)}€</td>
            </tr>
        `);
                totalTVA += recap.montantTVA;
            });

            // Si aucune ligne, ajouter une ligne vide
            if (Object.keys(tvaRecap).length === 0) {
                tbody.append('<tr><td colspan="3"></td></tr>');
            }

            // 5. Mettre à jour le montant total de TVA

            $('#total-recap-tab-tva').text(String(formatNumber(totalTVA)) + '€');
            $('#montant-tva-recap').val(String(formatNumber(totalTVA)) + '€');

            // 6. Déclencher la mise à jour du TTC
            updateMontantTTCRecap();
        }
        function updateMontantEcart() {
            const montantTTC = parseNumber($('#montant-ttc-recap').val());
            const montantPaiement = parseNumber($('#montant-paiement').val());
            const montantAcompte = parseNumber($('#montant-acompte').val());

            const ecart = montantTTC - (montantPaiement + montantAcompte);
            $('#montant-ecart').val(formatNumber(ecart));
        }
        function markPopupAsModified() {
            $('#popup-validation-fiche-doc').attr('data-dxpopup', true);
        }
        function hasValueChanged(elementId) {
            const currentValue = $(`#${elementId}`).val();
            return initialValues[elementId] !== currentValue;
        }
        function saveInitialValues() {
            initialValues = {
                'mode-paiement': $('#mode-paiement').val(),
                'mo-tva': $('#mo-tva').val(),
                'deplacement-tva': $('#deplacement-tva').val(),
                'montant-acompte': $('#montant-acompte').val(),
                'contrat_type': $('#contrat_type').val(),
                'equipement_tva' : $('#equipement_tva'),
            };
        }
        function updatePopupModifiedStatus() {
            const $popup = $('#button-valider-adm');

            if (checkAllFieldsUnchanged()) {
                // Si toutes les valeurs sont revenues à leur état initial
                $popup.removeAttr('data-dxpopup');
                console.log('Tous les champs sont revenus à leur état initial');
            } else {
                // Si au moins une valeur est différente
                $popup.attr('data-dxpopup', true);
            }
        }
        function checkAllFieldsUnchanged() {
            const fields = ['mode-paiement', 'mo-tva', 'deplacement-tva', 'montant-acompte', 'contrat_type', 'equipement_tva'];
            const fieldsUnchanged = fields.every(fieldId => !hasValueChanged(fieldId));

            // Retourne true seulement si les champs ET le grid sont inchangés
            return fieldsUnchanged && !gridModified;
        }
        function getFieldValue(elementId) {
            const $element = $(`#${elementId}`);

            if ($element.hasClass('dx-widget')) {
                const widget = $element.dxSelectBox('instance') ||
                    $element.dxNumberBox('instance') ||
                    $element.dxTextBox('instance');

                if (widget) {
                    return widget.option('value');
                }
            }

            return $element.val();
        }
    </script>
{% endblock %}