{% extends '@InstallBois/index.html.twig' %}

{% 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:patternOneSpecial//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 %}
    {{ parent() }}
{% endblock %}

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

{% block page_content %}
    {% if  is_granted('ROLE_REFERENT_TECHNICIEN') and maxUserCanCreated - nbUserNotLC <= 0 %}
        <div class="col-sm-12 col-md-12 col-lg-12" style="padding: 0">
            <div class="containerCantAddUser">
                <h2><i class="icon fa fa-bell" style="margin-right: 0;"></i>Attention</h2>
                <span>Vous avez atteint le nombre maximum d’utilisateurs TECHNICIEN pour votre licence<br><br>
                    Vous avez la possibilité d’ajouter des utilisateurs avec le rôle LECTURE SEULE.<br>Cet utilisateur
                    pourra accéder et visualiser les études et toutes les informations, sans les modifier.<br><br>
                    Pour rajouter un utilisateur TECHNICIEN, avec possibilité de création et modification, vous pouvez
                    upgrader votre abonnement depuis votre <a href="{{ path("subscription_index") }}">espace client </a>ou en contactant votre

                    service commercial au 09 72 54 16 79.</span>
            </div>
        </div>
    {% endif %}
    <div class="container-fluid"
            {% if  is_granted('ROLE_REFERENT_TECHNICIEN') and maxUserCanCreated - nbUserNotLC <= 0 %}
                style="margin-top: 270px!important"
            {% endif %}
    >
        <div class="row rubrique ">
            <div class="rubrique_titre">
                <span>Informations utilisateur
                </span>
            </div>
            <div class="col-sm-12 col-md-12 col-lg-12">
                {% for flashError in app.flashes('verify_email_error') %}
                    <div class="alert alert-danger" role="alert">{{ flashError }}</div>
                {% endfor %}
                {{ form_start(registrationForm, {'attr': {'novalidate':'true','id':'formUser'}}) }}
                <div style="padding-right: 15px;" aria-hidden="true">
                    <div>
                        <div class="modal-body">
                            <div>
                                <div class="form-group requiredInput col-lg-4">
                                    <label>Prénom<span class="asterix">*</span></label>
                                    {{ form_widget(registrationForm.firstName) }}
                                </div>
                                <div class="form-group requiredInput col-lg-4">
                                    <label>Nom <span class="asterix">*</span></label>
                                    {{ form_widget(registrationForm.lastName) }}
                                </div>
                                <div class="form-group requiredInput  col-lg-4">
                                    <label>Email <span class="asterix">*</span></label>
                                    {{ form_widget(registrationForm.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(registrationForm.phoneIndicatif) }}
                                        </div>
                                        <div class="phoneNumber" style="width: 75%!important;">
                                            {{ form_widget(registrationForm.phoneNumber) }}
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group requiredInput  col-lg-4">
                                    <label>Magasin<span class="asterix">*</span></label>
                                    {{ form_widget(registrationForm.agency) }}
                                </div>
                                <div class="form-group requiredInput  col-lg-4">
                                    <label>Roles<span class="asterix">*</span></label>
                                    {{ form_widget(registrationForm.roles) }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row rubrique ">
            <div class="rubrique_titre">
                <span>Mot de passe utilisateur
                </span>
            </div>
            <div style="padding: 0 20px">
                <div class="form-group col-lg-8" style="margin-top:1%;">
                    {{ form_row(registrationForm.password) }}
                </div>
                <div class="col-lg-3">
                    <div>
                        <input id="minLenght" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
                        <label id="minLenghtLabel">8 caractères minimum</label>
                    </div>
                    <div>
                        <input id="oneUpper" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
                        <label id="oneUpperLabel">1 majuscule</label>
                    </div>
                    <div>
                        <input id="oneNumber" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
                        <label id="oneNumberLabel">1 chiffre</label>
                    </div>
                    <div>
                        <input id="oneSpecial" type="checkbox" disabled style="margin-left: 5px;vertical-align: top;">
                        <label id="oneSpecialLabel">1 caractère spécial</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a href="javascript:history.back()">
                <button type="button" class="boutonRetour pull-right">Annuler</button>
            </a>
            <button id="createSubmitBtn" type="submit"
                    class="boutonAction">{{ button_label|default('Enregistrer') }}</button>
        </div>
        {{ form_end(registrationForm) }}
    </div>
    <script type="application/javascript">
        $(document).ready(function () {
            let submitPassword = false
            let checkRequired = false

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

            function checkPassword(e) {
                console.log('laa')
                let inputPassword = document.getElementById("registration_form_password_first");
                let password = inputPassword.value;
                let secondPassword = $('#registration_form_password_second')[0].value
                let error = false

                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 || !isPatternOneUpper || !isPatternOneNumber || !isPatternOneSpecial) {
                    e.preventDefault();
                }
                if (submitPassword) {

                    if (isMinLenght && isPatternOneNumber && isPatternOneUpper && isPatternOneSpecial) {
                        $("#registration_form_password_first").parent().removeClass('errorInput')
                        $("#registration_form_password_first").removeClass('error')

                    } else {
                        $("#registration_form_password_first").parent().addClass('errorInput')
                        $("#registration_form_password_first").addClass('error')

                        // if (checkRequired) {
                        //     $('#formUser').submit()
                        //     checkRequired = false
                        // }
                        e.preventDefault()
                    }
                    if (password === secondPassword) {
                        $("#registration_form_password_second").parent().removeClass('errorInput')
                        $("#registration_form_password_second").removeClass('error')
                    } else {
                        $("#registration_form_password_second").parent().addClass('errorInput')
                        $("#registration_form_password_second").addClass('error')
                        // if (checkRequired) {
                        //     $('#formUser').submit()
                        //     checkRequired = false
                        // }
                        e.preventDefault()
                    }
                }
            }

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

                }
            }

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

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

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

            if ($('#registration_form_agency option').length <= 1) {
                $('#registration_form_agency').select2("enable", false);
            }

            $("#createSubmitBtn").on("click", function (e) {
                submitPassword = true
                checkRequired = true
                // checkAllFields(e);
                // checkPassword(e);
                $('#registration_form_agency').select2("enable");
            });

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

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

        document.addEventListener("DOMContentLoaded", function () {
            const passwordFields = document.querySelectorAll('#registration_form_password_first,#registration_form_password_second');
            passwordFields.forEach(passwordField => {
                const eyeIcon = document.createElement("i");
                eyeIcon.classList.add("fa", "fa-eye-slash", "toggle-password"); // Classes Font Awesome et classe personnalisée
                eyeIcon.setAttribute("aria-hidden", "true");
                eyeIcon.style.cursor = "pointer";
                eyeIcon.style.marginLeft = "10px";
                eyeIcon.addEventListener("click", function () {
                    if (passwordField.type === "password") {
                        passwordField.type = "text";
                        eyeIcon.classList.remove("fa-eye-slash");
                        eyeIcon.classList.add("fa-eye");
                    } else {
                        passwordField.type = "password";
                        eyeIcon.classList.remove("fa-eye");
                        eyeIcon.classList.add("fa-eye-slash");
                    }
                });
                passwordField.parentNode.insertBefore(eyeIcon, passwordField.nextSibling);
            });
        });

    </script>
{% endblock %}