{% 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 tva = (simulateur_equipement_tva is defined and simulateur_equipement_tva != '' ? simulateur_equipement_tva : (equipement.tauxTva ? equipement.tauxTva.taux : '')) %}
{% set coefficient = (simulateur_coefficient is defined and simulateur_coefficient != '' ? simulateur_coefficient : (contrat and contrat.getCoefficient ? contrat.getCoefficient : '')) %}
{% 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 : (contrat ? contrat and contrat.ContratType and contrat.ContratType.id : '')) %}
{% 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 %}
<div class="px-4 pb-4 d-flex justify-content-center align-items-center flex-column"  >
        <form class="form mt-3 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-{{ equipement.id }}"  id="form-simulateur-{{ equipement.id }}" data-js="$('.my-select-multiple').selectpicker({noneSelectedText: 'Selectionnez'});">
            <input type="hidden" name="simulateur_data_change" id="simulateur_data_change-{{ equipement.id }}">
            {#<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') )}}">#}
            <div>
                <div class="d-flex p-4 mt-2 mb-3 border-primary" style="width:900px;border-radius:12px;border:1px solid;flex-wrap:wrap">
                    <div class="d-flex flex-column" style="width:60%">
                        <div class="d-flex align-items-center me-5" style="position:relative;">
                            <label style="width:79px;" class="me-1">N° série*</label>
                            <input type="text" class="form-control form-input-change" data-formchanged="no" style="width:200px; "  form="form-simulateur-{{ equipement.id }}" name="simulateur_num_serie" value="{{ num_serie }}">
                            <span style="position:absolute;right:0"><b>OU</b></span>
                        </div>
                        <div class="d-flex align-items-center me-5 mt-3">
                            <label  style="width:77px;{{ form_error is defined and 'simulateur_famille_equipement' in form_error ? 'color:red !important;' : '' }}"  class="me-1">Famille</label>
                            <select name="simulateur_famille_equipement" style="width:auto" data-formchanged="no" form="form-simulateur-{{ equipement.id }}" class="form-control bg-grey form-input-change">
                                <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">
                            <div class="d-flex align-items-center me-5 mt-3">
                                <label  style="width:77px;{{ form_error is defined and 'simulateur_equipement_type' in form_error ? 'color:red !important;' : '' }}"  class="me-1">Type*</label>
                                <select name="simulateur_equipement_type" data-formchanged="no" style="width:auto" form="form-simulateur-{{ equipement.id }}" class="form-control bg-grey form-input-change">
                                    <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 class="d-flex align-items-center me-5 mt-3">
                                <label  style="width:77px;"  class="me-1 {{ form_error is defined and 'simulateur_equipement_puissance' in form_error ? 'color:red !important;' : '' }} ">Puissance*</label>
                                <select name="simulateur_equipement_puissance" data-formchanged="no" style="width:auto " form="form-simulateur-{{ equipement.id }}" class="form-control bg-grey form-input-change">
                                    {% 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>
                        <div class="d-flex align-items-center me-5 mt-3">
                            <label class="me-1">Supplément ZUD</label>
                            <select name="simulateur_supplement" style="width:auto" data-formchanged="no" class="form-control bg-grey" form="form-simulateur-{{ equipement.id }}" >
                                <option value="oui" {{ supplement_zud == 'oui' ? 'selected' : '' }}>Oui</option>
                                <option value="non" {{ supplement_zud == 'non' ? 'selected' : '' }}>Non</option>
                            </select>
                        </div>
                    </div>
                    <div class="d-flex flex-column" style="width:40%">
                        <div class="d-flex align-items-center me-5">
                            <label style="width:105px;" class="me-1">Date allumage*</label>
                            <input type="text"  style="width:150px"  data-formchanged="no" name="simulateur_date_premier_allumage" form="form-simulateur-{{ equipement.id }}"  class="form-control bg-grey form-input-change-date" value="{{ date_allumage }}">
                        </div>
                        <div class="d-flex align-items-center me-5 mt-3">
                            <label class="me-1" style="width:106px; {{ form_error is defined and 'simulateur_age' in form_error ? 'color:red !important;' : '' }}">Age*</label>
                            <input type="text"  style="width:50px"  name="simulateur_age"  data-formchanged="no" form="form-simulateur-{{ equipement.id }}" id="simulateur-age-{{ equipement.id }}" class="form-control bg-grey form-input-change" value="{{ age }}">
                            <input type="hidden" name="old_age" data-formchanged="no" value="{{ equipement.getAge ? equipement.getAge : '' }}">
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <label class="me-1 " style="width:106px;{{ form_error is defined and 'simulateur_equipement_tva' in form_error ? 'color:red !important;' : '' }}">TVA*</label>
                            <input type="text"  style="width:74px" data-formchanged="no"  name="simulateur_equipement_tva" form="form-simulateur-{{ equipement.id }}" class="form-control bg-grey" value="{{ tva }}">
                        </div>
                        <div class="d-flex align-items-center mt-3">
                            <label class="me-1 " style="width:106px; {{ form_error is defined and 'simulateur_coefficient' in form_error ? 'color:red !important;' : '' }}">Coefficient*</label>
                            <input type="text"  style="width:60px"  data-formchanged="no" name="simulateur_coefficient" form="form-simulateur-{{ equipement.id }}"  class="form-control bg-grey" value="{{ coefficient }}">
                        </div>
                    </div>
                    <br>
                    <div class="d-flex align-items-center me-5 mt-5">
                        <label class="me-1">Options à sélectionner:</label>
                        <select class="my-select-multiple" multiple="multiple" data-formchanged="no" data-live-search="true" form="form-simulateur-{{ equipement.id }}" name="simulateur_options_equipement[]" style="width:600px">
                            {% for opt in options %}
                                {% set selected = (opt.id  in options_equipement) ? 'selected' : '' %}
                                <option value="{{ opt.id }}" {{ selected }}>{{ opt.libelle_court is defined ? opt.libelle_court : opt.getLibelleCourt }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="w-100 mt-2">
                        <table class="table table-bordered table-responsive table-sm" id="simulateur-table-options">
                            <thead class="bg-primary">
                                <th>Option</th>
                                <th>Tarif TTC</th>
                            </thead>
                            <tbody>
                            {% for opt in options %}
                                {% if opt.id in options_equipement %}
                                <tr id="tr-{{ opt.id }}">
                                    <td>
                                        {{ opt.libelle_court is defined ? opt.libelle_court : opt.getLibelleCourt }}
                                    </td>
                                    <td>
                                        {{ (options_tarif is defined and options_tarif[opt.id] is defined) ? options_tarif[opt.id] : '' }}€
                                    </td>
                                </tr>
                                {% endif %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="bg-primary" style="width:900px;border-radius:12px;" >
                <div class="d-flex p-4">
                    <div class="d-flex flex-column" style="width:70%">
                        {% if contrat is defined %}
                            <div class="d-flex align-items-center me-5 mb-2">
                                <label style="width:127px;" class="me-1 color-white ">Contrat actuel</label>
                                <input type="text" value="{{ contrat  and contrat.getContratType and contrat.getContratType.getLibelleCourt }}" class="form-control bg-grey-dark" style="width:80px" disabled>
                            </div>
                        {% endif %}
                        <div class="d-flex align-items-center me-5">
                            <label style="width:127px; {{ form_error is defined and 'simulateur_contrat_type' in form_error ? 'color:red !important;' : '' }}" class="me-1 color-white">Contrat*</label>
                            <select name="simulateur_contrat_type"  data-formchanged="no" style="width:auto " class="form-control bg-grey" form="form-simulateur-{{ equipement.id }}"  required>
                                {% 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 me-5 mt-3">
                            <label  style="width:127px;"  class="me-1 color-white">Tarif TTC contrat</label>
                            <input type="text" class="bg-vert form-control me-2" data-formchanged="no" value="{{ tarif_contrat }}€" style="width:175px;" disabled>
                            {% if tarif_contrat %}
                                Tarif uniquement valable sur la période en cours du 01/01/{{ "now"|date("Y") }} au 31/12/{{ "now"|date("Y") }}
                            {% endif %}
                        </div>
                    </div>
                    <div class="d-flex justify-content-end align-items-center" style="width: 30%">
                        <input type="submit" value="Simuler contrat" data-formchanged="no" class="bg-vert btn px-3" style="width: 208px;height:44px;" form="form-simulateur-{{ equipement.id }}" onclick="$('#simulateur_data_change-{{ equipement.id }}').val('submit');">
                    </div>
                </div>

            </div>
            <span><i>* Champs obligatoires pour simuler contrat</i></span>
            <div class="form-group d-flex justify-content-center mt-4">
                <div class="form-actions-row">
                    <button  class="btn btn-danger btn-close-popup"  data-dxpopup-id="popup-simulateur-contrat-{{ equipement.id }}" type="button" >Fermer</button>
                </div>
            </div>
        </form>
</div>
<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();
            }
        });
    });
</script>