{% set contrat = equipement.getLastContrat ? equipement.getLastContrat : null %}
{% set secteur = equipement.getSecteur ? equipement.getSecteur : null %}
{% set num_serie = (simulateur_num_serie is defined and simulateur_num_serie != '' ? simulateur_num_serie : (equipement.getNumSeriePrincipal ? equipement.getNumSeriePrincipal : '')) %}
{% set id_equipement_famille = (simulateur_famille_equipement is defined and simulateur_famille_equipement != '' ? simulateur_famille_equipement : (equipement.equipementFamille ? equipement.equipementFamille.id : '')) %}
{% set id_equipement_type = (simulateur_equipement_type is defined  ? simulateur_equipement_type : (equipement.EquipementTypePuissance ? equipement.EquipementTypePuissance.EquipementType.id : '')) %}
{% set equipement_types = (simulateur_list_types is defined  ? simulateur_list_types : typesEquipement) %}
{% set id_equipement_puissance = (simulateur_equipement_puissance is defined  ? simulateur_equipement_puissance : (equipement.EquipementTypePuissance ? equipement.EquipementTypePuissance.EquipementPuissance.id : '')) %}
{% set equipement_puissances = (simulateur_list_puissances is defined  ? simulateur_list_puissances : puissances) %}
{% set date_allumage = (simulateur_date_premier_allumage is defined and simulateur_date_premier_allumage != '' ? simulateur_date_premier_allumage : (equipement.datePremierAllumage ? equipement.datePremierAllumage|date("d/m/Y") : null )) %}
{% set age = (simulateur_age is defined and simulateur_age != '' ? simulateur_age : (equipement.getAge ? equipement.getAge : '')) %}
{% set equipement_tva = (simulateur_equipement_tva is defined and simulateur_equipement_tva != '' ? simulateur_equipement_tva : (equipement.tauxTva ? equipement.tauxTva.id : '')) %}
{% set deplacement_tva = (simulateur_deplacement_tva is defined and simulateur_equipement_tva != '' ? simulateur_deplacement_tva : (equipement.tauxTva ? equipement.tauxTva.id : '')) %}
{% set mo_tva = (simulateur_mo_tva is defined and simulateur_mo_tva != '' ? simulateur_mo_tva : (equipement.tauxTva ? equipement.tauxTva.id : '')) %}
{% set coefficient = (simulateur_coefficient is defined and simulateur_coefficient != '' ? simulateur_coefficient : (contrat and contrat.getCoefficient ? contrat.getCoefficient : '0')) %}
{% set contrat_types = (simulateur_list_contrat_types is defined ? simulateur_list_contrat_types : typesContrat) %}
{% set id_contrat_type = (simulateur_contrat_type is defined and simulateur_contrat_type != '' ? simulateur_contrat_type : '') %}
{% set tarif_contrat = simulateur_tarif_contrat is defined and simulateur_tarif_contrat != '' ? simulateur_tarif_contrat : '' %}
{% set options = list_options is defined ? list_options : options %}
{% set supplement_zud = simulateur_supplement is defined ? simulateur_supplement : (equipement.getSite.nom == 'BRON' or (equipement.getSecteur and equipement.getSecteur.getSecteurZone.libelle != 'ZUD')) ? 'non' : 'oui' %}
{% set options_equipement = simulateur_options_equipement is defined ? simulateur_options_equipement : equipement.getOptionsId %}
{% set main_oeuvre_tarif = main_oeuvre_tarif is defined ? main_oeuvre_tarif : mainOeuvreTarif %}
{% set deplacement_tarif = deplacement_tarif is defined ? deplacement_tarif : deplacementTarif  %}
{% set supplement_deplacement =  supplement_deplacement is defined ? supplement_deplacement : 0 %}
{% set list_taux_tva = simulateur_tauxTva is defined ? simulateur_tauxTva : tauxTva %}
{% set tva_selected = null %}

<div class="d-flex justify-content-center align-items-center flex-column" style="width: 581px;"  >
    <form class="form  form-ajax form-simulateur" data-no-reset="" action="{{ path('contrat_simulateur', {'id' : equipement.id}) }}" data-idequipement="{{ equipement.id }}" method="post" data-target-html="#target-simulateur"  id="form-simulateur" >
        <input type="hidden" name="simulateur_data_change" id="simulateur_data_change-{{ equipement.id }}">
{#        <input type="hidden" name="simulateur_options" value="{{ equipement_options }}" id="simulateur_options">#}
        {#<input type="hidden" name="simulateur_list_contrat_types" value="{{ contrat_types|json_encode(constant('JSON_OBJECT_AS_ARRAY') )}}">#}
        {#<input type="hidden" name="simulateur_list_puissances" value="{{ equipement_puissances|json_encode(constant('JSON_OBJECT_AS_ARRAY') )}}">#}
        {#<input type="hidden" name="simulateur_list_types" value="{{ equipement_types|json_encode(constant('JSON_OBJECT_AS_ARRAY'))}}">#}
        {#<input type="hidden" name="list_options" value="{{ options|json_encode(constant('JSON_OBJECT_AS_ARRAY') )}}">#}
    </form>

    <div class="d-flex ms-auto align-items-center">
        <div class="me-2">Zone urbaine</div>
        <select class="form-control form-input-change" name="simulateur_supplement" data-formchanged="no" style="width:60px;" form="form-simulateur" >
            <option value="oui" {{ supplement_zud == 'oui' ? 'selected' : '' }}>Oui</option>
            <option value="non" {{ supplement_zud == 'non' ? 'selected' : '' }}>Non</option>
        </select>
    </div>
    <div class="text-left w-100 titre-medium color-primary">Prestation</div>
    <div class="border-top-grey-medium w-100 mt-1 mb-2"></div>
    <div class="d-flex justify-content-center align-items-center mb-2">
        <div class="d-flex flex-column">
            <div class="font-size-12 color-orange" style="width: 116px;">Déplacement</div>
            <div class="d-flex align-items-center">
                <div class="me-2">Prix HT</div>
                <input class="form-control me-2" disabled style="width:60px " value="{{ supplement_deplacement ? supplement_deplacement : (deplacement_tarif and deplacement_tarif.tarifHtDeplacement ? (deplacement_tarif.tarifHtDeplacement)) }}€" id="deplacement-ht">
                <div class="me-2">TVA</div>
                <select name="simulateur_deplacement_tva"  style="width:50px" class="form-control me-2" id="simulateur-deplacement-tva" form="form-simulateur">
                    {% for taux in list_taux_tva %}
                        {% if taux.actif %}
                            {% set selected =  (deplacement_tva and deplacement_tva == taux.id) ? 'selected' : '' %}
                            <option value="{{ taux.id }}" {{ selected }} >{{ taux.taux }}%</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <div class="me-2">Prix TTC</div>
                <input class="form-control me-2" disabled style="width:60px " id="deplacement-prix-ttc">
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-center align-items-center">
        <div class="d-flex flex-column">
            <div class="font-size-12 color-orange" style="width: 116px;">Main d'oeuvre (1/4h)</div>
            <div class="d-flex align-items-center">
                <div class="me-2">Prix HT</div>
                <input class="form-control me-2" disabled style="width:60px " value="{{ main_oeuvre_tarif.getPrixHt }}€" id="mo-ht">
                <div class="me-2">TVA</div>
                <select name="simulateur_mo_tva" style="width:50px"  form="form-simulateur" class="form-control me-2" id="simulateur-mo-tva">
                    {% for taux in list_taux_tva %}
                        {% if taux.actif %}
                            {% set selected =  (mo_tva and mo_tva == taux.id) ? 'selected' : '' %}
                            <option value="{{ taux.id }}" {{ selected }} >{{ taux.taux }}%</option>
                        {% endif %}
                    {% endfor %}
                </select>
                <div class="me-2">Prix TTC</div>
                <input class="form-control me-2" disabled style="width:60px " id="mo-prix-ttc">
            </div>
        </div>
    </div>
    <div class="text-left w-100 titre-medium color-primary mt-2">Contrat</div>
    <div class="border-top-grey-medium w-100 mt-1 mb-2"></div>
    <div class="w-100 mb-2" style="padding-left: 6px">
        <div class="d-flex align-items-center mb-2 ">
            <div class="d-flex align-items-center ">
                <label style="width:70px;">Famille</label>
                <select name="simulateur_famille_equipement"   style="width:274px;margin-right: 9px;" data-formchanged="no" class="form-control  form-input-change"  data-form-change="#form-change-infos-technique-{{ equipement.id }}" data-target="#result-infos-tech" form="form-simulateur">
                    <option value="" {{ id_equipement_famille ? '' : 'selected' }}></option>
                    {% for famille in famillesEquipement %}
                        {% set selected =  (id_equipement_famille == famille.id) ? 'selected' : '' %}
                        <option value="{{ famille.id }}" {{ selected }}>{{ famille.getCodeLibelle }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="d-flex align-items-center">
                <label  style="width:100px !important;">Type*</label>
                <select name="simulateur_equipement_type" style="width:120px" data-formchanged="no" class="form-control  form-input-change" id="equipement_type" data-form-change="#form-change-infos-technique-{{ equipement.id }}" data-target="#target-equipement-puissance-{{ equipement.id }}" form="form-simulateur">
                    <option value="" {{ id_equipement_type ? '' : 'selected' }}></option>
                    {% for type in equipement_types %}
                        {% set selected =  (id_equipement_type == type.id) ? 'selected' : '' %}
                        <option value="{{ type.id }}" {{ selected }}>{{ type.getType }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="d-flex align-items-center w-100">
            <div class="d-flex align-items-center">
                <label style="width:70px;line-height:normal">N°série</label>
                <input type="text"  style="width:130px"  maxlength="14" class="form-control form-input-change" name="simulateur_num_serie" value="{{ num_serie }}" form="form-simulateur">
            </div>
            <div class="d-flex   align-items-center" style="margin-left: 10.5px;margin-right: 10.5px;">
                <div class="border-top-grey-medium " style="width:55px"></div>
                <div class="mx-1">ou</div>
                <div class="border-top-grey-medium " style="width:55px"></div>
            </div>
            <div class="d-flex align-items-center">
                <label style="width:100px;line-height:normal">Date allumage</label>
                <input type="text" style="width:120px !important;"   name="simulateur_date_premier_allumage"  class="form-control form-input-change-date " value="{{ date_allumage }}" form="form-simulateur">
            </div>
        </div>
    </div>
    <div class="me-auto d-flex justify-content-between" style="padding-left: 6px;width: 581px;">
        <div class="d-flex align-items-center" >
            <label style="width:70px;">Puissance*</label>
            <select name="simulateur_equipement_puissance" data-formchanged="no" style="width:70px" class="form-control form-input-change" form="form-simulateur">
                <option value="" {{ equipement.EquipementTypePuissance ? '' : 'selected' }}></option>
                {% for puissance in equipement_puissances %}
                    {% set selected =  (id_equipement_puissance == puissance.id) ? 'selected' : '' %}
                    <option value="{{ puissance.id }}" {{ selected }}>{{ puissance.libelle }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="d-flex align-items-center">
            <label style="width:36px;">Age*</label>
            <input type="text"  style="width:28px;padding: 0!important"  name="simulateur_age"  data-formchanged="no" form="form-simulateur"  class="form-control form-input-change text-center" value="{{ age }}">
            <input type="hidden" name="old_age" data-formchanged="no" value="{{ equipement.getAge ? equipement.getAge : '' }}">
        </div>
        <div class="d-flex align-items-center"  >
            <label style="width:38px;">TVA*</label>
            <select name="simulateur_equipement_tva" style="width:60px"  form="form-simulateur" class="form-control me-2">
                {% for taux in list_taux_tva %}
                    {% if taux.actif %}
                        {% set selected =  ''  %}
                        {% if equipement_tva and equipement_tva == taux.id %}
                            {% set selected =  'selected'  %}
                            {% set tva_selected = taux %}
                        {% endif %}
                        <option value="{{ taux.id }}" {{ selected }} >{{ taux.taux }}%</option>
                    {% endif %}
                {% endfor %}
            </select>
        </div>
        <div class="d-flex align-items-center"  >
            <label  style="width:58px;">Remise*</label>
            <input type="text"  style="width:70px" required  name="simulateur_coefficient"  form="form-simulateur" class="form-control " value="{{ coefficient is not null ? coefficient }}%">
        </div>
     </div>

    <div class="w-100 mt-2">
        <div class="w-100 mt-2 d-flex">
            <table class="table table-bordered table-responsive table-sm table-inverse-color-datagrid mb-0" id="simulateur-table-options">
                <thead >
                <th style="width:76%">Option</th>
                <th>TVA</th>
                <th>Tarif HT</th>
                <th></th>
                </thead>
                <tbody style="border-right: 1px solid #E0E0E0">
                {% if options_equipement %}
                    {% for opt in options %}
                        {% if opt.id in options_equipement %}
                            <tr id="option-line-{{ loop.index }}" data-line-id="{{ loop.index }}">
                                <td>
                                    {{ opt.libelle_court is defined ? opt.libelle_court : opt.getLibelleCourt }}
                                    <input type="hidden" name="simulateur_options_equipement[]" value="{{ opt.id }}" form="form-simulateur">
                                </td>
                                <td>
                                    {{ tva_selected ? tva_selected.taux ~'%' : '' }}
                                </td>
                                <td>  {{ (options_tarif is defined and options_tarif[opt.id] is defined) ? options_tarif[opt.id] : '' }}€</td>
                                <td class="d-flex align-items-center justify-content-center"><i class="fa fa-trash delete_option_line" style="cursor: pointer"></i></td>
                            </tr>
                        {% endif %}
                    {% endfor %}
                {% else %}
                    <tr style="height:25px;" class="empty-row"><td></td><td></td><td></td><td></td></tr>
                    <tr style="height:25px;" class="empty-row"><td></td><td></td><td></td><td></td></tr>
                    <tr style="height:25px;" class="empty-row"><td></td><td></td><td></td><td></td></tr>
                {% endif %}
                </tbody>
            </table>
            <div class="d-flex " style="height: 25px;margin-left: 10px;">
                <i  id="add_option_simulation" class="fa fa-lg fa-plus bg-vert button-add me-0"  style="position:relative;border-color: #14a085 !important;top:inherit;right:inherit"></i>
            </div>
        </div>

        <div class="titre-small color-orange" style="font-style: italic">*Champs obligatoires pour simuler le tarif du contrat</div>
    </div>
    <div class="text-left w-100 titre-medium color-primary mt-2">Simulation</div>
    <div class="border-top-grey-medium w-100 mt-1 mb-2"></div>
    <div class="d-flex w-100" style="padding-left: 6px">
        <div class="d-flex align-items-center justify-content-between w-100">
            <div class="d-flex align-items-center">
                <div style="width:98px">Contrat actuel</div>
                <input class="form-control" style="width:70px;" disabled value="{{ contrat  and contrat.getContratType ?  contrat.getContratType.getLibelleCourt : 'AUCUN' }}">
            </div>
            <div class="d-flex align-items-center" style="margin-left: 20.5px;">
                <div style="width:117px">Contrat souhaité*</div>
                <select name="simulateur_contrat_type"  data-formchanged="no" style="width:auto " class="form-control" form="form-simulateur"  required>
                    <option value=""></option>
                    {% for type in contrat_types %}
                        {% set selected =  (id_contrat_type == type.id) ? 'selected' : '' %}
                        <option value="{{ type.id }}" {{ selected }}>{{ type.libelleCourt }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="d-flex align-items-center" style="margin-left: 20.5px;">
                <div style="width:68px">Tarif TTC</div>
                <input class="form-control" style="width:70px;" disabled value="{{ tarif_contrat ? tarif_contrat ~ '€' : ''}}">
            </div>
        </div>
    </div>
    <div class="text-center w-100 color-rouge fw-bold font-size-13 mt-1" style="font-style:italic">
        Tarif uniquement valable sur la période en cours du 01/01/{{ "now"|date("Y") }} au 31/12/{{ "now"|date("Y") }}
    </div>
    <div class="form-group d-flex justify-content-center mt-4">
        <div class="form-actions-row">
            <button  class="btn btn-outline-danger btn-close-popup"  data-dxpopup-id="popup-simulateur-tarifs" type="button" style="margin-right:16px;">Fermer</button>
            <input type="submit" value="Simuler les tarifs" data-formchanged="no" class="btn btn-outline-success px-3" form="form-simulateur" onclick="$('#simulateur_data_change-{{ equipement.id }}').val('submit');">
        </div>
    </div>
</div>
<script type="module">
    $(document).ready(function() {


        function extraireTVA(elementId) {
            const texte = $('#' + elementId + ' option:selected').text();
            return parseFloat(texte.replace('%', '')) || 0;
        }

        function calculerPrixTTC() {
            const prixHT = parseFloat($('#mo-ht').val()) || 0;
            const tva = extraireTVA('simulateur-mo-tva');
            const prixTTC = prixHT + (prixHT * tva / 100);

            $('#mo-prix-ttc').val(prixTTC.toFixed(2) + '€');
        }
        function calculerPrixTTCDeplacement() {
            const prixHT = parseFloat($('#deplacement-ht').val()) || 0;
            const tva = extraireTVA('simulateur-deplacement-tva');
            const prixTTC = prixHT + (prixHT * tva / 100);

           $('#deplacement-prix-ttc').val(prixTTC.toFixed(2)+ '€');
        }

        // Écouter TOUS les changements
        $('#simulateur-mo-tva').on('change', calculerPrixTTC);
        $('#simulateur-deplacement-tva').on('change', calculerPrixTTCDeplacement);

        // Calculer au chargement
        calculerPrixTTC();
        calculerPrixTTCDeplacement();
    });
</script>
<script type="module">
    $('.form-input-change-date').each(function () {
        $(this).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "dd/mm/yy",
            onSelect: function(dateText) {
                var form = $(this).attr('form');
                var id_equipement = $('#' + form).data('idequipement');
                $('#simulateur_data_change-' + id_equipement).val($(this).attr('name'));
                $('#' + form).submit();
            }
        });
    });
    $("#form_simulateur").on("submit", function(e) {
        e.preventDefault();

        // Récupérer les données de la DataGrid
        const donneesSimulation = recupererDonneesSimulation();

        // Ajouter les données au formulaire
        donneesSimulation.forEach(function(item, index) {
            $('<input>').attr({
                type: 'hidden',
                name: 'simulation[' + index + '][id]',
                value: item.libelle
            }).appendTo('#form_simulateur');
        });

        // Soumettre le formulaire
        this.submit();
    });
</script>