{% extends '@InstallBois/index.html.twig' %}
{% import "forms-macro/popup.html.twig" as popup %}
{% 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>
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></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, {'attr': {'novalidate':'true','id':'form_edit_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.name) }}
                            </div>
                            <div style="display: none">
                                {{ form_widget(form.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.phoneIndicatif) }}
                                    </div>
                                    <div class="phoneNumber">
                                        {{ form_widget(form.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.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%;">
                                        <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>
                                <div class="form-group requiredInput">
                                    <label>Pays<span class="asterix">*</span></label>
                                    {{ form_widget(form.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.insurerName) }}
                                </div>
                                <div class="form-group">
                                    <label>N° police assurance</label>
                                    {{ form_widget(form.insurancePoliceNumber) }}
                                </div>
                                {{ forms.inputFilePath(
                                    agency.insuranceCertificateFilepath,
                                    form.insuranceCertificateFilepath,
                                    true,
                                    'agency_insuranceCertificateFilepath',
                                    "Attestation d'assurance",
                                    'logoFilePathContainer',
                                ) }}
                            </div>
                            {{ forms.inputFilePath(
                                agency.logoFilepath,
                                form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.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.qualifications|length > 0 %}
                                        {{ form_widget(form.qualifications[0].firstDateQualificationOther) }}
                                    {% else %}
                                        ERR
                                    {% endif %}
                                </div>
                            </div>
                            <br>
                            <div id="containerJustificationQualif" class="form-group fileQualif">
                                {{ forms.inputFilePath(
                                    agency.proofOfQualificationFilepath,
                                    form.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.editionPdf) }}
                {% if app.session.get('featuresAccess')['CLUSTERING_CUSTOMER_BY_AGENCY'] %}
                    {{ form_widget(form.sharedFolder) }}
                {% else %}
                    {{ form_widget(form.sharedFolder, { 'attr': {'disabled': true, 'checked': true} }) }}
                {% endif %}
            </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.address.altitude) }}
            {{ form_widget(form.address.longitude) }}
            {{ form_widget(form.address.latitude) }}
        </div>
        {{ form_end(form) }}
        {{ popup.popup('danger','deleteMedia',path('agency_delete_media',{'id':agency.id}),'agencyDelete','La suppression est définitive.') }}
        {% if not is_granted('ROLE_DEMO') %}
        <div class="row rubrique ">
            <div class="rubrique_titre">
                <span>Connexions INSTALL BOIS</span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                <div>
                    <table id="log-connection-user-list" class="hover row-border" style="padding:1%;width:100%">
                        <thead>
                        <tr>
                            <th>Nom</th>
                            <th>Prénom</th>
                            <th>Date</th>
                            <th class="hideOnSmartphone2">Connexion</th>
                        </tr>
                        </thead>
                        <tbody>

                        {% for logConnection in logs %}
                            <tr>
                                <td>{{ logConnection.user.firstName }}</td>
                                <td>{{ logConnection.user.lastName }}</td>
                                <td>{{ logConnection.createdAt|date('d/m/Y H:i:s') }}</td>
                                {% if logConnection.success %}
                                    <td class="tab_celluleTrue hideOnSmartphone2">RÉUSSIE</td>
                                {% else %}
                                    <td class="tab_celluleFalse hideOnSmartphone2">ERREUR</td>

                                {% endif %}
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    <script type="text/javascript" src="{{ asset('install-bois/datepickerCompanyConfig.js') }}"></script>
    <script type="text/javascript">
        initDatePicker(null, "0d");
        $('#select_street').append($('<option>', {
            value: $('#agency_address_street').val(),
            text: $('#agency_address_street').val()
        })).val($('#agency_address_street').val());

        // $('#select_street').val()
        let params = {
            "columnDefs": [
                {"type": "date-euro", "targets": [2]},
            ],
        };
        initDatatable('#log-connection-user-list', params, []);
        let max_chars_postal_code = 5;
        $('#agency_address_postalCode').keydown(function (e) {
            if ($(this).val().length >= max_chars_postal_code) {
                $(this).val($(this).val().substr(0, max_chars_postal_code));
            }
        });

        $('#agency_address_postalCode').keyup(function (e) {
            if ($(this).val().length >= max_chars_postal_code) {
                $(this).val($(this).val().substr(0, max_chars_postal_code));
            }
        });
        $('#agency_phoneIndicatif option')[1].disabled = "true"

        $(document).ready(function () {
            if (isDemo) {
                $('#select_agency_city, #agency_address_country, #select_street')
                    .select2({
                        disabled: true
                    })
                setTimeout(() => {
                    applyTooltipToDisabledElements('input, select, .boutonAction, .checkbox label, #addressNotFind, select:disabled + .select2-container, #logoFilePathContainer a.btnRemoveRedirect, #InsuranceFilePathContainer a.btnRemoveRedirect, #proofOfQualificationFilepathContainer a.btnRemoveRedirect')
                    $('select:disabled + .select2-container *').css('cursor', 'not-allowed');
                }, 400)
            }

            $(`#agency_address_country`).select2({
                width: '100%',
                placeholder: "-- Sélectionnez votre choix --",
                allowClear: false,
                language: "fr",
            });

            $('#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,
                placeholder: "-- Commencez à écrire une rue --",
                allowClear: true,
                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')

            })
        });


        var option = new Option($("#agency_address_city").val(), $("#agency_address_city").val(), true, true);
        $("#select_agency_city").append(option).trigger('change');

        $('#fakeInputCp').val($('#agency_address_postalCode').val())


        $("#btnEditAgency").bind('click', function (event) {
            let city = $('#select_agency_city')
            if (city[0].value === "") {
                $('.cityContainer .select2').addClass('errorInput')
                city.addClass('error')
                event.preventDefault();
            } else {
                $('.cityContainer .select2').removeClass('errorInput')
            }
        });

        $('#form_edit_agency').submit(function (e) {
            if ($('#agency_phoneNumber').val().length !== 10) {
                $('#agency_phoneNumber').parent().addClass("errorInputTel");
                e.preventDefault();
            } else {
                $('#agency_phoneNumber').parent().removeClass("errorInputTel");
            }
        })

        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();
            $('#agency_address_country').val(null).change();
        }
    </script>

{% endblock %}