{% extends 'base_rma_general.html.twig' %}

{% import 'macros/macro.html.twig' as macro %}

{% block title %}
    {{ parent() }}
    CREATION USER
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('salsa/SalsaCalendar.min.css') }}" media="all" />
    <style>
        .row {
            diasplay: flex;
            margin-bottom: 4px;
            margin-left: 0!important;
            margin-bottom: 10px;
            padding-left: 5px;
            font-size: 14px;
        }

        .modal-footer>:not(:first-child) {
            margin-left: 16px;
        }
        .modal-footer .btn{
            margin-bottom: 12px;
        }
        .required-input-sign {
            font-size: 18px;
            color: #e54040;
        }

        #new-password, #confirmed-new-password {
            height: 30px;
            margin-left: 5px;
            margin-right: 5px;
            padding: 8px 8px;
        }


        .edit-user {
            height: 100%;
            width: 40%;
        }

        label[for^="create_user_services"] {
            display: block;
            margin : 5px 10px 15px 20px;
        }

        #create_user_services {
            text-align: left;
            width: 50%;

        }

        #create_user_newPassword, #create_user_confirmedNewPassword {
            width: 260px;
            height: 30px;
            border: 1px solid #d4dae3;
            margin-left: 8px;
            height: 35px;
            border-radius: 0.25rem;
        }

        #mot-de-passe {
            display: inline-flex;
            margin-bottom: 20px;
        }

        input[id^="create_user_services"] {
            position: absolute;
        }

        .footer {
            ;
        }

    </style>
{% endblock %}

{% block headerRight %}
    {{ parent() }}
    <button type="button" class="btn btn-secondary" id="btn-submit-rma-form" onclick="closeUserCreate()">Retour page précédente</button>
{% endblock %}

{% block body %}
    {{ parent() }}

    <input type="hidden" id="user_list" value="{{ path('user_list') }}">

    {% if status == 'ok' %}

        <div id="main-block" class="block">

            {{ form_start(form, {'attr' : {'id' : 'create_user_form', 'autocomplete' : 'off'}}) }}
            {{ form_widget(form.listNewServices, {'attr' : { 'style' : 'display : none;'}})}}
            <div class="block block-themed block-transparent mb-0">
                <div class="block-header">
                    <h3 style="font-size: 18px;" class="block-title">Création d'un Utilisateur</h3>
                </div>
                <div class="block-content">

                    <div class="row" style="margin-bottom: 30px;">
                        <div class="form-group">
                            <div class="col-12 pl-0" style="margin-bottom: 10px;">
                                <label>Prénom <span class="required-input-sign">*</span></label>
                                {{ form_widget(form.firstname) }}
                            </div>
                            <div class="col-12 pl-0" style="margin-bottom: 10px;" required="required">
                                <label>Nom <span class="required-input-sign">*</span></label>
                                {{ form_widget(form.lastname) }}
                            </div>
                            <div class="col-12 pl-0" style="margin-bottom: 10px;">
                                <label>Email <span class="required-input-sign">*</span></label>
                                {{ form_widget(form.email) }}
                            </div>
                        </div>
                        <div id="mot-de-passe" class="col-12 pl-0" style="display: inline-flex; margin-bottom: 20px;">
                            <div class="col-4 pl-0" >
                                <div class="col-12 pl-0">
                                    <label style="width: 100%;" >Mot de passe <span class="required-input-sign">*</span></label>
                                    {{ form_widget(form.newPassword) }}
                                    <button type="button" class="btn btn-secondary si si-eye" onclick="showPassword()"></button>
                                </div>
                                <div class="col-12 pl-0" style="margin-top: 10px;">
                                    <label style="width: 100%;" >Confirmer mot de passe <span class="required-input-sign">*</span></label>
                                    {{ form_widget(form.confirmedNewPassword) }}
                                    <button type="button" class="btn btn-secondary si si-eye" onclick="showConfirmPassword()"></button>
                                </div>
                            </div>
                            <div class="col-6 pl-0" style="margin-top: 30px; margin-right: 50px;">
                                <div class="col-12 pl-0" style="margin-bottom: 6px;">
                                    Le mot de passe doit contenir au minimum :
                                    <li>1 Majuscule</li>
                                    <li>1 Chiffre</li>
                                    <li>8 Caractères au total</li>
                                </div>
                            </div>
                        </div>

                        <label style="margin-bottom: 10px;" class="col-12 pl-0">Services associés à l'utilisateur <span class="required-input-sign">*</span></label>
                        <div class="col-5" style="display: block">
                            {{ form_widget(form.services)}}
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <div class="left" style="display: flex; flex-wrap: wrap;">
                        <button id="btn-edit-profile-close" type="button" class="btn btn-secondary" onclick="closeUserCreate()" style="margin: 10px 16px 15px 30px">Annuler</button>
                        <button id="btn-edit-profile-valid" type="button" class="btn btn-primary" onclick="ValidateForm()" style="margin: 10px 0 15px 0px"><i class="fa fa-check"></i> Valider</button>
                    </div>
                </div>
            </div>

            {{ form_end(form) }}
        </div>

    {% else %}

        <h4>Aucun utilisateur trouvé</h4>

    {% endif %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('assets/js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/plugins/datatables/dataTables.bootstrap4.min.js') }}"></script>
    <script type="text/javascript">

        $(document).ready(function() {

        })

        function showPassword() {
            var inputNewPass = document.getElementById("create_user_newPassword");
            if (inputNewPass.type === "password") {
                inputNewPass.type = "text";
            } else {
                inputNewPass.type = "password";
            }
        }

        function showConfirmPassword() {
            var inputConfirmNewPass = document.getElementById("create_user_confirmedNewPassword");
            if (inputConfirmNewPass.type === "password") {
                inputConfirmNewPass.type = "text";
            } else {
                inputConfirmNewPass.type = "password";
            }
        }

        function CheckForm() {
            var length = false;
            var upper = false;
            var number = false;

            var newPassword = document.getElementById("create_user_newPassword");
            var confirmedNewPassword = document.getElementById("create_user_confirmedNewPassword");
            var lastname = document.getElementById("create_user_lastname");
            var firstname = document.getElementById("create_user_firstname");
            var email = document.getElementById("create_user_email");
            if (newPassword.value === confirmedNewPassword.value) {
                if (newPassword.value.length >= 8) {
                    length = true;
                }
                for (var i = 0; i < newPassword.value.length ; i++) {
                    if (newPassword.value[i] >= 'A' && newPassword.value[i] <= 'Z')
                        upper = true;
                    if (newPassword.value[i] >= '0' && newPassword.value[i] <= '9')
                        number = true;
                }
            }
            if (length && upper && number) {
                return 0;
            }
            else {
                if (!lastname.value) {
                    alert('Vous devez rentrer un nom.')
                }
                else if (!firstname.value) {
                    alert('Vous devez rentrer un prénom.')
                }
                else if (!email.value) {
                    alert('Vous devez rentrer un email.')
                }
                else if (newPassword.value != confirmedNewPassword.value){
                    alert('Les mots de passe ne correspondent pas.')
                }
                else if (!length) {
                    alert('Votre mot de passe doit contenir minimum 8 caractères.')
                }
                else if (!number) {
                    alert('Votre mot de passe doit contenir au moins 1 chiffre.')
                }
                else if (!upper) {
                    alert('Votre mot de passe doit contenir au moins 1 majuscule.')
                }
                return 1;
            }
        }

        function ValidateForm() {
            var result = '';

            var form = document.getElementById('create_user_form');
            if (CheckForm() === 0)
            {
                $.each($("input[id^='create_user_services_']:checked"), function () {
                    result = result + $(this).val() + "|";
                });
                if (!result) {
                    alert('L\'utilisateur doit avoir au moins 1 service associé');
                    return 1;
                }
                $('#create_user_listNewServices').val(result);
                form.submit();
            }
        }

        function redirect(url) {
            window.location.replace(url);
        }

        function closeUserCreate() {
            redirect($('#user_list').val());
        }

    </script>
{% endblock %}