{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/inputs_form.html.twig" as forms %}
{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
{% endblock %}

{% block page_content %}
    <div id="step02_create_final_customer" class="col-sm-12 col-md-12 col-lg-12">
        <span class="txtlibre" style="position: absolute">Ce client n’existe pas dans votre base INSTALL BOIS, merci de compléter les informations ci-dessous</span>
        <div class="container-fluid">
            <div class="row rubrique">
                <div class="rubrique_titre">
                    <span><span style="color: red">Client</span> de l'étude à réaliser
                    </span>
                </div>
                {{ form_start(form, {'attr': {'novalidate':'true', 'id' : "final_customer_form"}}) }}
                <div class="box-body">
                    <div class="row">
                        <div class="col-sm-3 col-md-3 col-lg-1 form-group requiredInput">
                            <label>Civilité<span class="asterix">*</span></label>
                            {{ form_widget(form.civility) }}
                        </div>
                        <div class="col-sm-5 col-md-5 col-lg-5"
                             style="display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
                            <div class="form-group requiredInput" id="realName" style="display: none">
                                <label>Nom du client ou de la société pour laquelle l'étude est réalisée <span
                                            class="asterix">*</span></label>
                                <div class="form-group">
                                    {{ form_widget(form.name) }}
                                </div>
                            </div>
                            <div id="fakeName" class="form-group requiredInput">
                                <label class="control-label">Nom du client ou de la société pour laquelle l'étude est
                                    réalisée<span class="asterix">*</span></label>
                                <input class="form-control" type="text" id="fakeInputName" disabled>
                            </div>
                            <span id="changeName" class="txtlibre"
                                  style="text-decoration: underline;cursor: pointer;padding-left: 5px">Modifier le nom</span>
                        </div>
                        <div class="col-sm-3 col-md-3 col-lg-2 form-group">
                            <label>Prénom</label>
                            {{ form_widget(form.firstname) }}
                        </div>
                        <div class="col-sm-2 col-md-2 col-lg-2 form-group extrabat-switch" style="padding-top: 25px;">
                            <div id="btnEB">
                                {{ forms.inputCheckbox('','Connecté à Extrabat',final_customer.extrabatId,'extrabatId') }}
                            </div>
                            <div style="display: none">
                                {{ form_widget(form.extrabatId) }}
                            </div>
                            <img id="loader" style="display: none;height: 70px;"
                                 src="{{ asset("install-bois/icon/loader.svg") }}"
                                 alt="loader">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3 col-md-3 col-lg-3 form-group">
                            <label>Société</label>
                            {{ form_widget(form.societe) }}
                        </div>
                        <div class="col-sm-3 col-md-3 col-lg-3 form-group">
                            <label>Nom du projet ou chantier</label>
                            {{ form_widget(form.projectName) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-3 col-md-3 col-lg-3 form-group">
                            <label>Email</label>
                            {{ form_widget(form.email) }}
                        </div>
                        <div class="col-sm-8 col-md-8 col-lg-8 "
                             style="display: flex; flex-direction: row;justify-content: flex-start; margin-bottom:30px">
                            <div class="form-group requiredInput">
                                <label>Téléphone</label>
                                <div style="display: flex; flex-direction: row">
                                    <div id="phoneIndicator" class="phoneIndicator">
                                        {{ form_widget(form.phoneIndicatif) }}
                                    </div>
                                    <div class="phoneNumber">
                                        {{ form_widget(form.phone) }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if is_granted('ROLE_DEMO') %}
                        <p id="info" style="display: block; margin-bottom: 2rem; margin-left: 2rem; clear: both;">Avec votre abonnement, vous pourrez modifier ces informations.</p>
                    {% endif %}
                    <div class="row">
                        <div class="sousRubrique col-sm-6 col-md-6 col-lg-6" id="address-block">
                            <span class="titleSousRubrique">Adresse de l'installation</span>
                            <div class="form-group">
                                <div class="checkbox">
                                    <label id="foreign_address_label">
                                        <input type="checkbox" id="foreign_address" autocomplete="off">
                                        Adresse hors de France
                                    </label>
                                </div>
                            </div>
                            {% if final_customer.ExtrabatId %}
                                <div id="InfoEb" style="display: flex;flex-direction: column;gap: 10px;margin: 10px 0;">
                                    <span class="orange-text">Adresse présente dans Extrabat :</span>
                                    <span>{{ addressEb.street }} - {{ addressEb.postalCode }} {{ addressEb.city }}</span>
                                    {% if addressInstall.city is not null %}
                                        <span class="orange-text">Sélectionner la correspondance :</span>
                                    {% else %}
                                        <span class="orange-text">Adresse non trouvée - merci de la sélectionner</span>
                                    {% endif %}
                                </div>
                            {% endif %}
                            <div id="foreign_address_fields" style="display: none;">
                                <div class="form-group requiredInput">
                                    <label class="control-label">Rue<span class="asterix"> *</span></label>
                                    <input type="text" id="manual_street" class="form-control">
                                </div>

                                <div class="form-group requiredInput">
                                    <label class="control-label">Ville<span class="asterix"> *</span></label>
                                    <input type="text" id="manual_city" class="form-control">
                                </div>

                                <div class="form-group requiredInput">
                                    <label class="control-label">Code postal<span class="asterix"> *</span></label>
                                    <input type="text" id="manual_postal_code" class="form-control" maxlength="20">
                                </div>
                            </div>
                            <div id="containerFakeStreet" class="form-group streetContainer requiredInput">
                                <label class="control-label">Rue<span class="asterix"> *</span></label>
                                <select id="select_final_customer_street" class="js-example-responsive"
                                        name="select_final_customer_street"
                                        style="width: 100%;">
                                    <option></option>
                                </select>
                            </div>
                            <div id="containerStreet" class="form-group" style="display: none">
                                <label class="control-label">Rue<span class="asterix"> *</span></label>
                                {{ form_widget(form.address.street) }}
                            </div>
                            <a id="addressNotFind" style="cursor:pointer; text-decoration: underline; float:right"
                               class="txtlibre" onclick="addressNotFind()">
                                Je ne trouve pas la rue de mon client
                            </a>
                            <a id="findAddress"
                               style="cursor:pointer; text-decoration: underline; float:right;display: none"
                               class="txtlibre" onclick="findAddress()">
                                Annuler
                            </a>
                            <div id="containerCity" class="form-group requiredInput cityContainer">
                                <label class="control-label">Ville<span class="asterix"> *</span></label>
                                <select disabled id="select_final_customer_city" class="js-example-responsive"
                                        name="select_final_customer_city"
                                        style="width: 100%;">
                                    <option></option>
                                </select>
                            </div>
                            <div style="display: none">
                                {{ form_row(form.address.city) }}
                            </div>
                            <div class="form-group">
                                <label class="control-label">Code postal<span class="asterix">*</span></label>
                                <input class="form-control" type="text" id="fakeInputCp" disabled>
                            </div>
                            <div style="display: none">
                                {{ form_row(form.address.postalCode,{ 'attr': {'type': 'number'} }) }}
                            </div>
                            {{ form_label(form.address.country) }}<br>
                            {{ form_widget(form.address.country) }}<br><br>
                        </div>
                        <div class=" col-sm-6 col-md-6 col-lg-6 containerAgencyFormFC">
                            <div style="margin-bottom: 15px">
                                {{ form_label(form.agency) }}<br>
                                {{ form_widget(form.agency) }}
                            </div>
                            <div>
                                {{ form_row(form.source) }}
                                <div id="sourceTextDiv" style="display: none">
                                    {{ form_row(form.sourceText) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 requiredInput form-group " id="containerAltitude"
                             style="display: none;">
                            <label class="control-label">Altitude non trouvée, merci de la renseigner <span class="asterix">*</span>
                                :</label>
                            {{ form_widget(form.address.altitude) }}
                        </div>
                        <div class="col-sm-6 col-md-6 col-lg-6 requiredInput form-group" id="containerExternalTemp" style="display: none;">
                            <label class="control-label">Température extérieure <span class="asterix">*</span> :</label>
                            <input type="text" id="external_temp" name="external_temp" class="form-control">
                        </div>
                        <div id="mandatory-fields-message" class="col-sm-6 col-md-6 col-lg-6" style="display: none;">
                            <span style="color: red;">Pour passer à l'enregistrement, compléter les champs "altitude" et "température".</span>
                        </div>
                        <div style="display: none">
                            {{ form_widget(form.address.longitude) }}
                            {{ form_widget(form.address.latitude) }}
                        </div>
                    </div>
                </div>
                <div class="box-footer">
                    <div>
                        <button type="button" id="step02BtnBack" class="boutonRetour" style="float: left">
                            {{ from === 'project_edit' ? 'Annuler' : 'Etape précédente' }}
                        </button>
                        <button type="submit" id="step02Btn" class="boutonAction" style="float: right">
                            {{ from === 'project_edit' ? 'Enregistrer' : 'Etape suivante' }}
                        </button>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
    {{ include('final_customer/modal/_extrabat_not_connected_pop_up.html.twig') }}
    <div class="modal fade" id="modal-extrabat-client" style="display: none; padding-right: 15px;" aria-hidden="true">
        <div class="modal-dialog popup">
            <div class="modal-content popup-border-radius">
                <div class="popup-border-radius">
                    <div class="popup-content" style="margin-left: 5%!important;">
                        <div style="display: flex">
                            <img style="width: 100px;" src="{{ asset('install-bois/icon/popup-info.png') }}"/>
                            <h5 style="margin: auto 10px;">Sélectionner la correspondance</h5>
                        </div>
                        {{ include('project/_block/createWorkflow/_step_02_many_fc.html.twig') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    <script type="application/javascript">
        $(document).ready(function () {
            if (isDemo) {
                setTimeout(() => {
                    applyTooltipToDisabledElements('.switch-button, select:disabled + .select2-container, #fakeInputCp, #final_customer_phoneIndicatif, #foreign_address, #foreign_address_label');
                    $('select:disabled + .select2-container *').css('cursor', 'not-allowed');
                }, 100);

                $('.switch-button input, .switch-button .button').css('pointer-events', 'none');

                $('#addressNotFind').remove()
                // Pour la rue
                let newStreetOption = new Option('46 Rue du 14 Juillet', '46 Rue du 14 Juillet', true, true);
                $('#select_final_customer_street').append(newStreetOption).trigger('change').prop('disabled', true);
                $('#final_customer_address_street').val('46 Rue du 14 Juillet');

                // Pour la ville
                let newCityOption = new Option('Niort', 'Niort', true, true);
                $('#select_final_customer_city').append(newCityOption).trigger('change').prop('disabled', true);
                $('#final_customer_address_city').val('Niort');

                // Pour le code postal
                $('#fakeInputCp').val('79000');
                $('#final_customer_address_postalCode').val('79000');
                // Coordonnées
                $('#final_customer_address_latitude').val('46.322552153671744');
                $('#final_customer_address_longitude').val('-0.45646717646064194');
                $('#final_customer_address_altitude').val('30');

                $('#final_customer_email')
                    .val('maildevotreclient@gmail.com')
                $('#final_customer_phone')
                    .val('0606060606')
                $('#final_customer_phoneIndicatif')
                    .select2({
                        disabled: true
                    });
                let tooltipTimeOut;
                $('#final_customer_email, #final_customer_phone')
                    .prop('readonly', true)
                    .css('cursor', 'not-allowed')
                    .on('mousemove', function(e) {
                        clearTimeout(tooltipTimeOut);

                        var mouseX = e.clientX;
                        var mouseY = e.clientY;
                        var tooltipX = mouseX + 10;
                        var tooltipY = mouseY + 10;

                        $('#tooltip').css({
                            display: 'block',
                            left: tooltipX + 'px',
                            top: tooltipY + 'px'
                        });
                        tooltipTimeOut = setTimeout(function() {
                            $('#tooltip').hide();
                        }, 2500);
                    })
                    .on('mouseleave', function() {
                        clearTimeout(tooltipTimeOut);
                        $('#tooltip').hide();
                    });
            }

            $('#external_temp').on('keypress', function(e) {
                let charCode = e.which ? e.which : e.keyCode;

                if(charCode === 45 && this.selectionStart === 0 && !this.value.includes('-')) {
                    return true;
                }

                if(charCode >= 48 && charCode <= 57) {
                    return true;
                }

                e.preventDefault();
                return false;
            })

            $('#foreign_address').prop('checked', false)
            let manualStreetValue = '';
            let manualCityValue = '';
            let manualPostalValue = '';
            let manualAltitudeValue = '';
            let manualExternalTempValue = '';
            let manualCountryValue = '';

            $('#foreign_address').on('change', function() {
                if ($(this).is(':checked')) {
                    // Store current values before showing foreign fields
                    $('#manual_street').val(manualStreetValue).change();
                    $('#manual_city').val(manualCityValue).change();
                    $('#manual_postal_code').val(manualPostalValue).change();
                    $('#final_customer_address_altitude').val(manualAltitudeValue).change();
                    $('#external_temp').val(manualExternalTempValue).change()
                    $('#final_customer_address_country').val(manualCountryValue).change();
                    $("#final_customer_address_latitude").val(null).change();
                    $("#final_customer_address_longitude").val(null).change();

                    // Hide French address fields
                    $('#containerFakeStreet').hide();
                    $('#containerStreet').hide();
                    $('#containerCity').hide();
                    $('.form-group:has(#fakeInputCp)').hide();

                    // Show foreign address fields
                    $('#foreign_address_fields').show();
                    $('#containerAltitude').show();
                    $('#containerExternalTemp').show();
                    $("#final_customer_address_country").prop("disabled", false);

                    $('#addressNotFind').hide();
                    $('#findAddress').hide();

                } else {
                    // Store values before hiding
                    manualStreetValue = $('#manual_street').val();
                    manualCityValue = $('#manual_city').val();
                    manualPostalValue = $('#manual_postal_code').val();
                    manualAltitudeValue = $('#final_customer_address_altitude').val();
                    manualExternalTempValue = $('#external_temp').val();
                    manualCountryValue = $('#final_customer_address_country').val();

                    // Show French address fields
                    $('#containerFakeStreet').show();
                    $('#containerCity').show();
                    $('.form-group:has(#fakeInputCp)').show();

                    // Hide foreign fields
                    $('#foreign_address_fields').hide();
                    $('#containerAltitude').hide();
                    $('#containerExternalTemp').hide();

                    $("#final_customer_address_country").prop("disabled", true);
                    $("#final_customer_address_country").val('FR').trigger('change');
                    $('#addressNotFind').show();

                    resetInputAddress()
                    $('#external_temp').val(null).change()
                }
            });

            // Mettre à jour les champs cachés lors de la saisie
            $('#manual_street').on('change', function() {
                $('#final_customer_address_street').val($(this).val());
            });

            $('#manual_city').on('change', function() {
                $('#final_customer_address_city').val($(this).val());
            });

            $('#manual_postal_code').on('change', function() {
                $('#final_customer_address_postalCode').val($(this).val());
            });

            $("#final_customer_address_country").prop("disabled", true);
            $("#fakeInputName")[0].value = {{ final_customer.name | json_encode | raw }};

            if ('{{ hasServiceCreated }}') {
                $('#addressNotFind').hide();
                $('#foreign_address').prop('disabled', 'true')
                // $('#address-block :input').prop('disabled', true);
                $('#select_final_customer_street, #select_final_customer_city, #fakeInputCp').prop('disabled', true);
                $('#address-block').css('cursor', 'not-allowed');
                $('#address-block').prop('title', 'Un service est déjà commencé avec cette adresse, elle n\'est donc pas modifiable');
                setTimeout(() => {
                    $('#address-block span').css('cursor', 'not-allowed');
                    $('#address-block span').prop('title', 'Un service est déjà commencé avec cette adresse, elle n\'est donc pas modifiable');
                }, 100);

            }
            if ({{ isUpdate|json_encode|raw }}) {
                let fc = {{ final_customer.toArrayLite|json_encode|raw }};
                let address = {{ addressInstall.toArrayLite|json_encode|raw }};

                // fc = JSON.parse(fc);
                $("#fakeInputName").val(fc['name']);
                $('#select_final_customer_street').append($('<option>', {
                    value: address['street'],
                    text: address['street']
                }));
                $('#select_final_customer_city').append($('<option>', {
                    value: address['city'],
                    text: address['city']
                }));

                $("#select_final_customer_street, #final_customer_address_street").val(address['street']);
                $("#select_final_customer_city, #final_customer_address_city").val(address['city']);
                $("#fakeInputCp, #final_customer_address_postalCode").val(address['postalCode']);
                $("#final_customer_address_longitude").val(address['longitude']);
                $("#final_customer_address_latitude").val(address['latitude']);
                $("#final_customer_address_altitude").val(address['altitude']);

                if (address['altitude'] === undefined || address['altitude'] === null) {
                    $('#containerAltitude').show();
                }
            }

            $("form#final_customer_form :input").each(function () {
                let input = $(this); // This is the jquery object of the input, do what you will
                input.keyup(function (event) {
                    if (event.keyCode === 13) {
                        $("#step02Btn").click();
                    }
                });
            });

            $('#final_customer_agency').select2({
                width: '100%',
                allowClear: false,
                language: "fr",
            })

            $('#final_customer_address_country').select2({
                width: '100%',
                placeholder: "Choisissez un pays",
                allowClear: false,
                language: "fr",
            })
            $('#select_final_customer_city').on('select2:select', function (e) {
                let cityInput = $("#select_final_customer_city").find(':selected');
                $("#final_customer_address_city").val(cityInput.val());

                let postalCodeValue = cityInput.text().substring(cityInput.text().length, cityInput.text().length - 5);
                $("#final_customer_address_postalCode").val(postalCodeValue);
                $("#fakeInputCp").val(postalCodeValue);

                initCoordinates()
            });
            $('#select_final_customer_city').on('select2:clearing', function (e) {
                $("#final_customer_address_city").val("");
                $("#final_customer_address_postalCode").val("");
                $("#fakeInputCp").val("");
            })

            $('#select_final_customer_street').on('select2:select', function (e) {

                let properties = e.params.data.properties;
                $('#select_final_customer_street').append($('<option>', {
                    value: properties.name,
                    text: properties.name
                }));
                $('#select_final_customer_street').val(properties.name);
                $('#final_customer_address_street').val(properties.name);

                $('#select_final_customer_city').append($('<option>', {
                    value: properties.city,
                    text: properties.city
                }));
                $('#select_final_customer_city').val(properties.city);
                $('#select_final_customer_city').change();
                $('#final_customer_address_city').val(properties.city);

                $('#fakeInputCp').val(properties.postcode);
                $('#final_customer_address_postalCode').val(properties.postcode);

                let latitude = e.params.data.geometry.coordinates[1];
                let longitude = e.params.data.geometry.coordinates[0];

                $('#final_customer_address_latitude').val(latitude);
                $('#final_customer_address_longitude').val(longitude);

                initCoordinates();

                if ($('#final_customer_address_city').val() === null) {
                    $('#select_final_customer_city').prop('disabled', false);
                }
            })

            $('#select_final_customer_city').select2({
                minimumInputLength: 1,
                placeholder: "",
                language: "fr",
                tags: false,
                allowClear: true,
                ajax: {
                    cache: true,
                    delay: 250,
                    url: 'https://geo.api.gouv.fr/communes?fields=nom,codesPostaux',
                    data: function (params) {
                        let query = {
                            nom: params.term,
                        }
                        // Query parameters will be ?nom=[term]
                        return query;
                    },
                    processResults: function (data) {
                        let dataToReturn = $.map(data, function (obj) {
                            obj.id = obj.nom;
                            obj.text = obj.nom + " - " + obj.codesPostaux[0] + ""; // replace name with the property used for the text
                            return obj;
                        });
                        // Transforms the top-level key of the response object from 'items' to 'results'
                        return {
                            results: dataToReturn
                        };
                    }
                }
            });

            $('#select_final_customer_street').select2({
                minimumInputLength: 1,
                ajax: {
                    cache: true,
                    delay: 250,
                    url: 'https://api-adresse.data.gouv.fr/search/',
                    data: function (params) {
                        let query = {
                            q: params.term.replaceAll(' ', '+'),
                        }
                        // Query parameters will be ?nom=[term]
                        return query;
                    },
                    processResults: function (data) {
                        let dataToReturn = $.map(data.features, function (obj) {
                            obj.id = obj.properties.label;
                            obj.text = obj.properties.label;
                            return obj;
                        });
                        return {
                            results: dataToReturn
                        };
                    }
                }
            });
            $('#final_customer_source').on('change', function (e) {
                if ($(this).val() === "Autre") {
                    $('#final_customer_sourceText').val('')
                    $('#sourceTextDiv').show()
                } else {
                    $('#sourceTextDiv').hide()
                }
            })
            let extrabat = $('#final_customer_extrabatId')
            textSwitch = $('.extrabat-switch div span:eq(3)')
            if (!extrabat.val()) {
                textSwitch.text('Non connecté à Extrabat')
            }
            $('#extrabatId').on('change', function () {
                if ($(this).is(":checked")) {
                    textSwitch.text('Connecté à Extrabat')
                    startExtrabatProcess()
                } else {
                    extrabat.val(null)
                    textSwitch.text('Non connecté à Extrabat')
                }
            })
            $('#step02_many_final_customer').removeClass('col-sm-12 col-md-12 col-lg-12').show()
            $('#step02BtnManyBack').hide();
        });

        let coordinatesForAddressUri = "{{ path('final_customer_coordinates_for_address') }}";

        function initCoordinates() {
            if (
                $('#final_customer_address_latitude').val() == null ||
                $('#final_customer_address_latitude').val() == '' ||
                $('#final_customer_address_longitude').val() == null ||
                $('#final_customer_address_longitude').val() == ''
            ) {
                $('#final_customer_address_latitude,#final_customer_address_longitude').val(null);
            }
            // $('#final_customer_address_altitude').val(null);

            const postalCode = $('#final_customer_address_postalCode').val();
            const country = $('#final_customer_address_country').val();

            $.ajax({
                url: coordinatesForAddressUri,
                type: "GET",
                dataType: 'json',
                data: {
                    "city": $('#final_customer_address_city').val(),
                    "postalCode": $('#final_customer_address_postalCode').val(),
                    "latitude": $('#final_customer_address_latitude').val(),
                    "longitude": $('#final_customer_address_longitude').val(),
                },
                success: function (results) {
                    if (results['status'] === 'SUCCESS' && !$('#foreign_address').is(':checked')) {
                        if (!isOverseasPostalCode(postalCode, country)) {
                            $('#final_customer_address_altitude').val(results['datas']['altitude']);
                            $('#containerAltitude').hide()
                            $('#containerExternalTemp').hide()
                            $('#external_temp').val(null).change()
                            $('#mandatory-fields-message').hide()
                        } else {
                            $('#final_customer_address_altitude').val(null).change();
                        }
                        $('#final_customer_address_latitude').val(results['datas']['latitude']);
                        $('#final_customer_address_longitude').val(results['datas']['longitude']);
                    } else {
                        $('#containerAltitude').show();
                    }
                },
                error: function (err) {
                    $('#containerAltitude').show();
                }
            });
        }

        function isOverseasPostalCode(postalCode, country) {
            return postalCode && postalCode.toString().startsWith('97') && country && country === 'FR';
        }

        function addressNotFind() {
            resetInputAddress()
            $('#containerStreet').show().addClass('requiredInput');
            $('#containerFakeStreet').hide().removeClass('requiredInput')
            $('#select_final_customer_city').prop('disabled', false);
            $('#addressNotFind').hide();
            $('#findAddress').show();
        }

        function findAddress() {
            resetInputAddress()
            $('#containerStreet').hide().removeClass("requiredInput").removeClass("errorInput");
            $('#containerFakeStreet').show().addClass('requiredInput')
            $('#select_final_customer_city').prop('disabled', true)
            $('#findAddress').hide();
            $('#addressNotFind').show();
        }

        function resetInputAddress() {
            $('#final_customer_address_street').val('').change();
            $('#select_final_customer_street').val('').change();

            $('#select_final_customer_city option').each((key, element) => {
                if (key !== 0) {
                    element.remove();
                }
            });
            $('#select_final_customer_city').val('').change();
            $('#final_customer_address_city').val('').change();

            $('#fakeInputCp').val('').change();
            $('#final_customer_address_postalCode').val('').change();

            $('#final_customer_address_latitude').val('').change();
            $('#final_customer_address_longitude').val('').change();
            $('#final_customer_address_altitude').val('').change()
        }

        // I20A-2713 prevent double click
        $('#final_customer_form').on('submit', function() {
            $("#step02Btn").css('pointer-events', 'none');
        });

        $("#step02Btn").on('click', event => {
            if ($('#final_customer_agency option').length === 1) {
                $('#final_customer_agency').val($('#final_customer_agency option').val());
            }

            let postalCode = $('#final_customer_address_postalCode').val()
            let country = $('#final_customer_address_country').val()
            let externalTemp = $('#external_temp').val()
            let altitude = $('#final_customer_address_altitude').val()

            if (isOverseasPostalCode(postalCode, country) && (externalTemp === '' || altitude === '')) {
                $('#containerAltitude').show()
                $('#containerExternalTemp').show()
                $('#mandatory-fields-message').show()
                event.preventDefault()
                return
            }

            checkValues(event);
            streetValue(event);
            if ($('#containerStreet').hasClass('requiredInput')) {
                cityValue(event);
            }
            // if (
            //     $('#final_customer_phone').val().length > 0 &&
            //     $('#final_customer_email').val().length > 0 &&
            //     $('#final_customer_address_street').val().length > 0 &&
            //     $('#final_customer_address_city').val().length > 0 &&
            //     $('#final_customer_address_postalCode').val().length > 0
            // ) {
            //     $("#final_customer_address_country").prop("disabled", false);
            // }
        });

        $("#step02BtnBack").on('click', function () {
            let from = '{{ from }}';
            let to = '';
            if (from === 'project_create_step1') {
                to = '{{ path('project_create_wf') }}';
            } else if (from === 'project_create_step2') {
                let name = '{{ nameFC }}' ? '{{ nameFC }}' : '{{ app.request.get('nameFC') }}';
                to = '{{ path('project_create_wf', { 'step': 2, 'nameFC': 'XXNAME' })|raw }}';
                to = to.replace('XXNAME', name);
            } else if (from.startsWith('project_edit')) {
                let id = '{{ idProject }}' ? '{{ idProject }}' : '{{ app.request.get('idProject') }}';
                to = '{{ path('project_edit', { 'id': 'XXID' }) }}';
                to = to.replace('XXID', id);
            }
            window.location.href = to;
        });

        $('#final_customer_agency').val({{ userAgency }})
        $('#select_final_customer').val();

        // let civilityChoiceInput = document.getElementById("final_customer_civility");
        // civilityChoiceInput.addEventListener("change", function () {
        //     if (civilityChoiceInput.value === "Société") {
        //         $("#civility_firstname_input_id")[0].style.display = "none";
        //     } else {
        //         $("#civility_firstname_input_id")[0].style.display = "block";
        //     }
        // });

        // configuration of postalCode
        $("#final_customer_address_postalCode").oninput = function () {
            if (this.value.length > 5) {
                this.value = this.value.slice(0, 5);
            }
        }
        //for only 1 agency
        if ($('#final_customer_agency option').length === 1) {
            $('#final_customer_agency').val($('#final_customer_agency option').val());
        }

        $('#changeName').on("click", function () {
            $('#changeName').hide()
            $('#fakeName').hide()
            $('#realName').show()
        })

        $('#final_customer_phoneIndicatif option')[1].disabled = "true"

        // Delete logo email
        $('.input-group-addon').remove()
        $('.input-group').css('width', '100%')

        // Error select city
        function cityValue(event) {
            if ($('#foreign_address').is(':checked')) {
                return;
            }

            let city = $('#final_customer_address_city')
            if (city.val() === "") {
                $('.cityContainer .select2 ').addClass('errorInput')
                city.addClass('error')
                event.preventDefault();
            } else {
                $('.cityContainer .select2').removeClass('errorInput')
            }
        }

        // Error select street
        function streetValue(event) {
            if ($('#foreign_address').is(':checked')) {
                return;
            }
            let containerStreet = null;
            let streetValue = null;
            if ($('#containerFakeStreet').hasClass('requiredInput')) {
                streetValue = $('#select_final_customer_street');
                containerStreet = $('#containerFakeStreet');
                $('.cityContainer .select2').removeClass('errorInput')
            } else {
                streetValue = $('#final_customer_address_street');
                containerStreet = $('#containerStreet');
            }
            if (streetValue.val() === "") {
                containerStreet.addClass('errorInput')
                streetValue.addClass('error')
                event.preventDefault();
            } else {
                containerStreet.removeClass('errorInput')
            }
        }

        function checkValues(e) {
            const emailRegex = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/;

            const needsTemperature = isOverseasPostalCode($('#final_customer_address_postalCode').val(), $('#final_customer_address_country').val()) || $('#foreign_address').is(':checked');

            if (needsTemperature && $('#external_temp').val().length === 0) {
                $('#containerExternalTemp').addClass('errorInput');
                e.preventDefault();
            } else {
                $('#containerExternalTemp').removeClass('errorInput');
            }


            if ($('#final_customer_name').val().length === 0) {
                $('#final_customer_name').parent().addClass('errorInput');
                e.preventDefault();
            } else {
                $('#final_customer_name').parent().removeClass('errorInput');
            }
            if ($('#final_customer_address_altitude').val().length === 0) {
                $('#final_customer_address_altitude').parent().addClass('errorInput');
                e.preventDefault();
            } else {
                $('#final_customer_address_altitude').parent().removeClass('errorInput');
            }
            if ($('#final_customer_email').val().length > 0 && !String($('#final_customer_email').val()).toLowerCase().match(emailRegex)) {
                $('#final_customer_email').parent().addClass('errorInput');
                e.preventDefault();
            } else {
                $('#final_customer_email').parent().removeClass('errorInput');
            }

            if ($('#foreign_address').is(':checked')) {
                // Validation des champs d'adresse étrangère
                if ($('#manual_street').val().length === 0) {
                    $('#manual_street').parent().addClass('errorInput');
                    e.preventDefault();
                } else {
                    $('#manual_street').parent().removeClass('errorInput');
                }

                if ($('#manual_city').val().length === 0) {
                    $('#manual_city').parent().addClass('errorInput');
                    e.preventDefault();
                } else {
                    $('#manual_city').parent().removeClass('errorInput');
                }

                if ($('#manual_postal_code').val().length === 0) {
                    $('#manual_postal_code').parent().addClass('errorInput');
                    e.preventDefault();
                } else {
                    $('#manual_postal_code').parent().removeClass('errorInput');
                }

                // Validation de la température externe
                if ($('#external_temp').val().length === 0) {
                    $('#containerExternalTemp').addClass('errorInput');
                    e.preventDefault();
                } else {
                    $('#containerExternalTemp').removeClass('errorInput');
                }
            }
        }

        async function startExtrabatProcess() {
            let firstName = $('#final_customer_firstname')
            let phone = $('#final_customer_phone')
            $('#extrabatId').prop("checked", false)
            textSwitch.text('Non connecté à Extrabat')
            callSearchOnExtrabat($('#final_customer_name').val()).then(await function (response) {
                if (!response.notEbApiKey) {
                    $('#final-customer-list-eb a').map(function () {
                        $(this)
                            .on('click', function (e) {
                                e.preventDefault();
                                let idEb = getUrlParameter($(this).prop('href'), 'idExtrabat');
                                $('#final_customer_extrabatId').val(idEb)
                                $('#extrabatId').prop("checked", true)
                                textSwitch.text('Connecté à Extrabat')
                                let ebClient = response.eb.find(function (e) {
                                    console.log(e.id)
                                    return e.id == idEb;
                                });
                                if (firstName.val() === '') {
                                    firstName.val(ebClient.firstName)
                                }
                                if (phone.val() === '') {
                                    phone.val(ebClient.phone)
                                }
                                $('#modal-extrabat-client').modal('hide')
                            });
                    })
                    $('#modal-extrabat-client').modal()
                }
            })
        }
    </script>
{% endblock %}