{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/inputs_form.html.twig" as forms %}

{% block title %}
    INSTALL-BOIS
{% endblock %}

{% block head %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript"
            src="https://cdn.datatables.net/responsive/2.3.0/js/dataTables.responsive.min.js"></script>
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('externalJS/datepicker-fr.js') }}"></script>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js">
{% endblock %}

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

{% block page_content_start %}
        {{ parent() }}
        <div class="page-title">
            <h4 class="page-title-h4">
                Paramètres | Fiche magasin
            </h4>
        </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique" style="padding-bottom: 15px">
            <div class="rubrique_titre">
                <span>Informations magasin</span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                {{ form_start(form_new_agency, {'attr': {'novalidate':'true','id':'form_new_agency'}}) }}
                <div aria-hidden="true">
                    <div>
                        <div class="modal-body ">
                            <div class="form-group requiredInput col-sm-3 col-md-3 col-lg-3">
                                <label>Nom du magasin<span class="asterix">*</span></label>
                                {{ form_widget(form_new_agency.name) }}
                            </div>
                            <div style="display: none">
                                {{ form_widget(form_new_agency.company) }}
                            </div>
                            <div class="form-group col-sm-3 col-md-3 col-lg-3" style="margin-right: 5px;">
                                <label>Téléphone<span class="asterix">*</span></label>
                                <div class="requiredInput" style="display: flex; flex-direction: row">
                                    <div id="phoneIndicator" class="phoneIndicator">
                                        {{ form_widget(form_new_agency.phoneIndicatif) }}
                                    </div>
                                    <div class="phoneNumber">
                                        {{ form_widget(form_new_agency.phoneNumber) }}
                                    </div>
                                </div>
                            </div>
                            <div class="sousRubrique col-sm-6 col-md-6 col-lg-6">
                                <span class="titleSousRubrique">Adresse</span>
                                <div style="width: 100%;display: flex;justify-content: flex-end;">
                                    <button type="button" onclick="eraseAddress()" class="boutonAction">Effacer
                                        l'adresse
                                    </button>
                                </div>
                                <div id="containerFakeStreet" class="form-group streetContainer">
                                    <label class="control-label">Rue<span class="asterix"> *</span></label>
                                    <select id="select_street" class="js-example-responsive"
                                            name="select_street"
                                            style="width: 100%;">
                                        <option></option>
                                    </select>
                                </div>
                                <div class="form-group requiredInput containerStreet" style="display: none">
                                    <label>Rue<span class="asterix">*</span></label>
                                    {{ form_widget(form_new_agency.address.street) }}
                                </div>
                                <a id="addressNotFind" style="cursor:pointer; text-decoration: underline; float:right"
                                   class="txtlibre" onclick="addressNotFind()">
                                    Je ne trouve pas ma rue
                                </a>
                                <div class="form-group requiredInput cityContainer ">
                                    <label class="control-label">Ville<span class="asterix">*</span></label>
                                    <select id="select_agency_city" class="js-example-responsive"
                                            name="select_agency_city"
                                            style="width: 100%;" disabled>
                                        <option></option>
                                    </select>
                                </div>
                                <div style="display: none">
                                    {{ form_row(form_new_agency.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_new_agency.address.postalCode,{ 'attr': {'type': 'number'} }) }}
                                </div>

                                <div class="form-group requiredInput ">
                                    <label>Pays<span class="asterix">*</span></label>
                                    {{ form_widget(form_new_agency.address.country) }}
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-6" style="margin-top: 10px;">
                                <div class="form-group">
                                    <label>Assureur</label>
                                    {{ form_widget(form_new_agency.insurerName) }}
                                </div>
                                <div class="form-group">
                                    <label>N° police assurance</label>
                                    {{ form_widget(form_new_agency.insurancePoliceNumber) }}
                                </div>
                                {{ forms.inputFilePath(
                                    agency.insuranceCertificateFilepath,
                                    form_new_agency.insuranceCertificateFilepath,
                                    true,
                                    'agency_insuranceCertificateFilepath',
                                    "Attestation d'assurance",
                                    'logoFilePathContainer',
                                ) }}
                            </div>
                            {{ forms.inputFilePath(
                                agency.logoFilepath,
                                form_new_agency.logoFilepath,
                                false,
                                'agency_logoFilepath',
                                'Logo',
                                'InsuranceFilePathContainer'
                            ) }}
                            <div id="qualifBox" class="qualifLine form-group col-sm-12 col-md-12 col-lg-12">
                                <div class="col-sm-3 col-md-3 col-lg-3 control-label"
                                     style="margin-top: 2%;">
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualiBoisAir) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">N° de
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualificationNumberAir) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label"
                                           style="padding-bottom: 1%;">Date 1ère qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].firstDateQualificationAir) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <div class="qualifLine form-group col-sm-12 col-md-12 col-lg-12">
                                <div class="col-sm-3 col-md-3 col-lg-3 control-label" style="margin-top: 2%;">
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualiBoisEau) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">N° de
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualificationNumberEau) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">Date 1ère
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].firstDateQualificationEau) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <div class="qualifLine form-group col-sm-12 col-md-12 col-lg-12">
                                <div class="col-sm-3 col-md-3 col-lg-3 control-label" style="margin-top: 2%;">
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualiBoisRgePoele) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">N° de
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualificationNumberRgePoele) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">Date 1ère
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].firstDateQualificationRgePoele) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <div class="qualifLine form-group col-sm-12 col-md-12 col-lg-12">
                                <div class="col-sm-3 col-md-3 col-lg-3 control-label" style="margin-top: 2%;">
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualiBoisRgeChaudiere) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">N° de
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualificationNumberRgeChaudiere) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label" style="padding-bottom: 1%;">Date 1ère
                                        qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].firstDateQualificationRgeChaudiere) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <div class="qualifLine form-group col-sm-12 col-md-12 col-lg-12">
                                <div class="col-sm-3 col-md-3 col-lg-3 control-label"
                                     style="margin-top: 2%;">
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].other) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label"
                                           style="padding-bottom: 1%;">N° de qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].qualificationNumberOther) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                                <div class="col-sm-4 col-md-4 col-lg-4">
                                    <label class="control-label"
                                           style="padding-bottom: 1%;">Date 1ère qualification</label>
                                    {% if form_new_agency.qualifications|length > 0 %}
                                        {{ form_widget(form_new_agency.qualifications[0].firstDateQualificationOther) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <br>
                            <div id="containerJustificationQualif"
                                 class="form-group fileQualif">
                                {{ forms.inputFilePath(
                                    agency.proofOfQualificationFilepath,
                                    form_new_agency.proofOfQualificationFilepath,
                                    true,
                                    'agency_proofOfQualificationFilepath',
                                    "Justificatif de qualification",
                                    'proofOfQualificationFilepathContainer',
                                ) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Options</span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                {{ form_widget(form_new_agency.editionPdf) }}
                {{ form_widget(form_new_agency.sharedFolder) }}
            </div>
        </div>

        <div class="modal-footer">
            <a href="javascript:history.back()">
                <button type="button" class="boutonRetour pull-right" style="margin-right: 10px;">
                    Annuler
                </button>
            </a>
            <button id="btnEditAgency" type="submit"
                    class="boutonAction">{{ button_label|default('Enregistrer') }}</button>
        </div>
        <div style="display: none">
            {{ form_widget(form_new_agency.address.altitude) }}
            {{ form_widget(form_new_agency.address.longitude) }}
            {{ form_widget(form_new_agency.address.latitude) }}
        </div>
        {{ form_end(form_new_agency) }}
    </div>
    <script type="text/javascript" src="{{ asset('install-bois/datepickerCompanyConfig.js') }}"></script>
    <script type="text/javascript">
        initDatePicker(null, "0d");
        $('#agency_phoneIndicatif option')[1].disabled = "true"
        $(document).ready(function () {
            justStreet = true;
            $(`#agency_address_country`).select2({
                width: '100%',
                placeholder: "-- Sélectionnez votre choix --",
                allowClear: false,
                language: "fr",
            });

            $(`#agency_company`).select2({
                width: '100%',
                placeholder: "-- Sélectionnez votre choix --",
                allowClear: false,
                language: "fr",
            });
            $('#select_street').select2({
                width: '100%',
                allowClear: true,
                placeholder: "-- Commencez à écrire une rue --",
                language: "fr",
            })
            $('#agency_address_country').attr('disabled', 'disabled');

            $('#select_agency_city').on('select2:select', function (e) {
                let selectCityElement = document.getElementById("select_agency_city");
                document.getElementById("agency_address_city").value = document.getElementById("select_agency_city").options[document.getElementById("select_agency_city").selectedIndex].value;

                let postalCodeValue = selectCityElement.options[selectCityElement.selectedIndex].text;
                document.getElementById("agency_address_postalCode").value = postalCodeValue.substring(postalCodeValue.length, postalCodeValue.length - 5);
                document.getElementById("fakeInputCp").value = postalCodeValue.substring(postalCodeValue.length, postalCodeValue.length - 5);
            });

            $('#select_agency_city').on('select2:clearing', function (e) {
                document.getElementById("agency_address_city").value = ""
                document.getElementById("agency_address_postalCode").value = ""
                document.getElementById("fakeInputCp").value = ""
            })

            $('#select_agency_city').select2({
                minimumInputLength: 1,
                placeholder: "-- Commencez à écrire une ville --",
                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_street').select2({
                minimumInputLength: 1,
                allowClear: true,
                placeholder: "-- Commencez à écrire une rue --",
                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
                        };
                    }
                }
            })


            $('#select_street').on('select2:select', function (e) {
                let properties = e.params.data.properties;
                $('#select_street').append($('<option>', {
                    value: properties.name,
                    text: properties.name
                }));

                $('#select_street').val(properties.name);
                $('#agency_address_street').val(properties.name);

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

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

                $('#containerFakeStreet .select2').removeClass('errorInput')

            })
        });

        $("#btnEditAgency").bind('click', function (event) {
            let city = $('#select_agency_city')
            let max_chars = 10;
            if (justStreet) {
                if (city[0].value === "") {
                    $('#containerFakeStreet .select2').addClass('errorInput')
                    $('#containerFakeStreet').addClass('error')
                    event.preventDefault();
                } else {
                    $('#containerFakeStreet .select2').removeClass('errorInput')
                }
            } else {
                if (city[0].value === "") {
                    $('.cityContainer .select2').addClass('errorInput')
                    city.addClass('error')
                    event.preventDefault();
                } else {
                    $('.cityContainer .select2').removeClass('errorInput')
                }
            }
            if ($('#agency_name').val().length === 0) {
                $('#agency_name').parent().addClass('errorInput');
                event.preventDefault()
            } else {
                $('#agency_name').parent().removeClass('errorInput');
                if ($('#agency_phoneNumber').val().length !== max_chars) {
                    $('#agency_phoneNumber').parent().addClass('errorInputTel');
                    event.preventDefault()
                } else {
                    $('#agency_phoneNumber').parent().removeClass('errorInputTel');
                }
            }
        });

        $('#form_new_agency').submit(function (e) {
            if ($('#agency_phoneNumber').val().length !== 10) {
                $('#agency_phoneNumber').parent().addClass("errorInputTel");
                e.preventDefault();
            } else {
                $('#agency_phoneNumber').parent().removeClass("errorInputTel");
                // I20A-2713 prevent double click
                $('#btnEditAgency').css('pointer-events', 'none');
            }
        })

        function addressNotFind() {
            justStreet = false;
            $('.containerStreet').show().addClass('requiredInput');
            $('#containerFakeStreet').hide().removeClass('requiredInput')
            $('#select_agency_city').prop('disabled', false);
            $('#addressNotFind').text('Annuler').attr("onclick", "findAddress()");
        }

        function findAddress() {
            justStreet = true;
            $('.containerStreet').hide().removeClass("requiredInput").removeClass("errorInput");
            $('#containerFakeStreet').show().addClass('requiredInput')
            $('#select_agency_city').prop('disabled', true)
            $('#addressNotFind').text('Je ne trouve pas ma rue').attr("onclick", "addressNotFind()");
        }

        function eraseAddress() {
            $('#select_street').val(null).change();
            $('#select_agency_city').val(null).change();
            $('#fakeInputCp').val(null).change();
        }

        //QUALIFICATIONS
        $('.qualifLine').each(function () {
            let container = this
            eventCheckbox(container)
            $(this).find('input[type="checkbox"]').click(function () {
                eventCheckbox(container)
            })

            function eventCheckbox(container) {
                if ($(container).find('input[type="checkbox"]').is(':checked')) {
                    $(container).find('input[type="text"]').prop('required', true);
                    $(container).find('input[type="text"]').prop('disabled', false);
                } else {
                    $(container).find('input[type="text"]').prop('required', false);
                    $(container).find('input[type="text"]').prop('disabled', true);
                }
            }
        })
        //QUALIFICATIONS
    </script>

{% endblock %}