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

{% 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() }}
{% 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 %}
    {#    <script src="{{ asset('install-bois/app.js') }}"></script> #}
    <script type="text/javascript"
            src="{{ asset('install-bois/initDateTimeFormatDatatable.js') ~ "?rnd=" ~ random() }}"></script>
    {{ parent() }}
{% endblock %}

{% block page_content_start %}
    {{ parent() }}
    <div class="page-title">
        <h4 class="page-title-h4">
            {% if user.id == app.user.id %}
                Mon espace | Mon profil
            {% else %}
                Paramètres | Fiche utilisateur
            {% endif %}
        </h4>
    </div>
{% endblock %}

{% block page_content %}
    <div class="container-fluid">
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Informations utilisateur
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                {% if is_granted('ROLE_DEMO') %}
                    <p style="margin-left: 3rem">Avec votre abonnement, vous pourrez réinitialiser votre mot de passe, ou faire des modifications</p>
                {% endif %}
                {{ form_start(form, {'attr': {'novalidate':'true','id':'form_edit_user'}}) }}
                <div aria-hidden="true">
                    <div>
                        <div class="modal-body">
                            <div class="form-group requiredInput  col-lg-4">
                                <label>Prénom<span class="asterix">*</span></label>
                                {{ form_widget(form.firstName) }}
                            </div>

                            <div class="form-group requiredInput  col-lg-4">
                                <label>Nom <span class="asterix">*</span></label>
                                {{ form_widget(form.lastName) }}
                            </div>
                            <div class="form-group requiredInput formSize  col-lg-4">
                                <label>Email (identifiant de connexion)<span class="asterix">*</span></label>
                                {{ form_widget(form.email) }}
                            </div>
                            <div class="form-group col-lg-4">
                                <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" style="width: 75%!important;">
                                        {{ form_widget(form.phoneNumber) }}
                                    </div>

                                </div>
                            </div>
                            <div class="form-group requiredInput formSize  col-lg-4"
                                    {% if user.id == app.user.id %}
                                        style="display: none"
                                    {% endif %}
                            >
                                <label>Magasin <span class="asterix">*</span></label>
                                {{ form_widget(form.agency) }}
                            </div>
                            {% if form.roles is defined %}
                                <div class="form-group requiredInput formSize  col-lg-4">
                                    <label>Roles <span class="asterix">*</span></label>
                                    {{ form_widget(form.roles) }}
                                </div>
                            {% endif %}
                            {% if form.extrabatApiKey is defined %}
                                <div class="form-group col-lg-4">
                                    {{ form_row(form.extrabatApiKey) }}
                                    <button style="margin:0" type="button" class="boutonAction" id="btnTestEb"
                                            onclick="startEbApiTest()">Tester la connexion
                                    </button>
                                    <img id="loader" style="display: none;height: 70px;"
                                         src="{{ asset("install-bois/icon/loader.svg") }}"
                                         alt="loader">
                                </div>
                            {% endif %}
                        </div>
                        <div class="col-sm-12 col-md-12 col-lg-12">
                            {% if not is_granted('ROLE_DEMO') %}
                            <div>
                                <h4>Réinitialisation du mot de passe</h4>
                                <a href="{{ path("reset_password_forgot_request_from_profile", {"email" : user.email}) }}">
                                    <button type="button" class="boutonAction">Envoyer une demande de
                                        réinitialisation du mot de passe
                                    </button>
                                </a>
                            </div>
                            {% endif %}
                            <div class="modal-footer">
                                <a href="javascript:history.back()">
                                    <button type="button" class="boutonRetour pull-right">Annuler</button>
                                </a>
                                <button id="submitBtn" type="submit"
                                        class="boutonAction">{{ button_label|default('Enregistrer') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
        </div>
        {% if not is_granted('ROLE_DEMO') %}
        <div class="row rubrique">
            <div class="rubrique_titre">
                <span>Connexions INSTALL BOIS</span>
            </div>
            {{ include('log_connection/modal/_list_logs_by_user.html.twig') }}
        </div>
        {% if is_granted("ROLE_ADMIN") == false %}
            <div class="row rubrique">
                <div class="rubrique_titre">
                    <span>CGU validées</span>
                </div>
                {{ include('cg/modal/_list_cgu_validated_by_user.html.twig') }}
            </div>
        {% endif %}
        {% endif %}
    </div>
    {% if is_granted('ROLE_DEMO') %}
        {{ include('tooltip/tooltip.html.twig') }}
    {% endif %}
    <script type="application/javascript">
        let hasEmailError = {{ form.children["email"].vars.errors|length > 0 ? "true" : "false" }};

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

        $(document).ready(function () {

            if (isDemo) {
                $('#user_form_firstName').val('Install Bois').change()
                $('#user_form_lastName').val('Install Bois').change()
                $('#user_form_email').val('contact@install-bois.pro').change()
                $('#user_form_phoneNumber').val('0972541679').change()

                applyTooltipToDisabledElements('input, select, .boutonAction')
            }

            if (hasEmailError) {
                $("#confirm-popup-danger").modal("show");
            }

            $("#boutonOui").on("click", function () {
                $("#user_form_email").val("{{ initialEmail }}");
            });

            $('#form_edit_user').submit(function (e) {
                if ($('#user_form_email').val().length === 0 || !String($('#user_form_email').val()).toLowerCase().match(emailRegex)) {
                    $('#user_form_email').parent().addClass("errorInput");
                    e.preventDefault();
                } else {
                    $('#user_form_email').parent().removeClass("errorInput");
                }
                if ($('#user_form_phoneNumber').val().length !== 10) {
                    $('#user_form_phoneNumber').parent().addClass("errorInputTel");
                    e.preventDefault();
                } else {
                    $('#user_form_phoneNumber').parent().removeClass("errorInputTel");
                }
            })

            function checkPassword() {
                let inputPassword = document.getElementById("registration_form_password_first");
                let password = inputPassword.value;

                const patternMinLenght = /^.{8,}$/gi;
                const patternOneUpper = /[A-Z]/;
                const patternOneNumber = /[0-9]/;
                const patternOneSpecial = /[^\w\s]|_/;

                let isMinLenght = isPatternOneUpper = isPatternOneNumber = isPatternOneSpecial = false;
                if (password.match(patternMinLenght)) {
                    document.getElementById("minLenght").checked = true;
                    document.getElementById("minLenghtLabel").style.color = "green";
                    isMinLenght = true;

                } else {
                    document.getElementById("minLenght").checked = false;
                    document.getElementById("minLenghtLabel").style.color = "red";
                }

                if (password.match(patternOneUpper)) {
                    document.getElementById("oneUpper").checked = true;
                    document.getElementById("oneUpperLabel").style.color = "green";
                    isPatternOneUpper = true;
                } else {
                    document.getElementById("oneUpper").checked = false;
                    document.getElementById("oneUpperLabel").style.color = "red";
                }

                if (password.match(patternOneNumber)) {
                    document.getElementById("oneNumber").checked = true;
                    document.getElementById("oneNumberLabel").style.color = "green";
                    isPatternOneNumber = true;
                } else {
                    document.getElementById("oneNumber").checked = false;
                    document.getElementById("oneNumberLabel").style.color = "red";

                }

                if (password.match(patternOneSpecial)) {
                    document.getElementById("oneSpecial").checked = true;
                    document.getElementById("oneSpecialLabel").style.color = "green";
                    isPatternOneSpecial = true;
                } else {
                    document.getElementById("oneSpecial").checked = false;
                    document.getElementById("oneSpecialLabel").style.color = "red";
                }


                if (isMinLenght && isPatternOneNumber && isPatternOneUpper && isPatternOneSpecial) {
                    document.getElementById("createSubmitBtn").disabled = false;
                    inputPassword.style.border = "1px solid green";
                } else {
                    document.getElementById("createSubmitBtn").disabled = true;
                    inputPassword.style.border = "1px solid red";
                }
            }

            let element = $("#registration_form_password_first");
            if (element.length > 0) {
                element[0].addEventListener('keyup', (event) => {
                    checkPassword();
                });
            }

            document.getElementById("createSubmitBtn") ? document.getElementById("createSubmitBtn").disabled = true : "";

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

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

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

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

        function startEbApiTest() {
            $('#btnTestEb').hide();
            $('#loader').show();
            $.ajax({
                url: "{{ path('user_test_extrabat_user_api_key') }}",
                type: "GET",
                dataType: "JSON",
                data: {
                    userApikey: $('#user_form_extrabatApiKey').val()
                },
                success: function (response) {
                    if (response.status === "SUCCESS") {
                        createToast("success", "Clé API utilisateur validée !")
                    } else {
                        createToast("error", "Une erreur s'est produite, la clé n'est pas correcte.")
                    }
                },
                error: function (err) {
                    createToast("error", "Une erreur s'est produite, la clé n'est pas correcte.")
                }
            });
            $('#loader').hide();
            $('#btnTestEb').show();
        }


    </script>
    <div id="reservedPopupDiv">
        {{ popup.simple("danger", "Modification impossible, cette adresse email est deja utilisée") }}
    </div>
{% endblock %}