{% extends "base_login.html.twig" %}

{% block title %}
    {{ parent() }}
    PLM Services
{% endblock %}

{% block body %}
    {{ parent() }}
    <input type="text" id="reset-password" value="{{ path('reset_password') }}" style="display: none">
    <input type="text" id="choose-services" value="{{ path('choose_services') }}" style="display: none">
    <!-- Page Content -->
    <div class="bg-image" style="background-image: url('{{ asset('assets/media/photos/photo1@2x.jpg') }}');">
        <div class="row mx-0 bg-black-op">
            <div class="hero-static col-md-6 col-xl-8 d-none d-md-flex align-items-md-end">
                <div class="p-30 invisible" data-toggle="appear">
                    <p class="font-size-h3 font-w600 text-white">
                        PLM Services
                    </p>
                    <p class="font-italic text-white-op">
                        Copyright &copy; <span class="js-year-copy">2019</span>
                    </p>
                </div>
            </div>
            <div class="hero-static col-md-6 col-xl-4 d-flex align-items-center bg-white invisible" data-toggle="appear" data-class="animated fadeInRight">
                <div class="content content-full">
                    <!-- Header -->
                    <div class="px-30 py-10">
                        <a href="{{ path('redirect') }}">
                            <img width="200" src="{{ absolute_url(asset('img/_RVB_LOGO_BASSE DEF.png')) }}">
                        </a>
                        <h1 class="h5 font-w400 mt-30 mb-10">Réinitialisation du mot de passe</h1>
                        <div class="font-w300 text-muted mt-30 mb-10" id="explain_forgotten_password" style="display:block;">Entrer votre nouveau mot de passe et sa confirmation</div>
                    </div>
                    <!-- END Header -->

                    <form id="reset-password-form">
                        <div class="form-group row">
                            <div class="col-12">
                            </div>
                        </div>

                        <div class="form-group button_reset_password">
                            <div id="change-password-div" class="col-12">
                                <div class="col-12" style="margin-top: 10px;">
                                    <div class="col-12" style="margin-bottom: 6px;">
                                        Le nouveau mot de passe doit contenir au minimum :
                                        <li>1 Majuscule</li>
                                        <li>1 Chiffre</li>
                                        <li>8 Caractères au total</li>
                                    </div>
                                    <label style="width: 100%;" >Nouveau mot de passe: </label>
                                    <input type="password" id="reset-password-newPassword" style="width: 260px; height: 30px;">
                                    <button type="button" class="btn btn-secondary si si-eye" onclick="showPassword('')"></button>
                                </div>
                                <div class="col-12" style="margin-top: 10px;">
                                    <label style="width: 100%;" >Confirmer nouveau mot de passe: </label>
                                    <input type="password" id="reset-password-confirmedNewPassword" style="width: 260px; height: 30px;">
                                    <button type="button" class="btn btn-secondary si si-eye" onclick="showPassword('confirm')"></button>
                                </div>
                                <div class="right col-12" style="display: flex; flex-wrap: wrap; margin-top: 15px;">
                                    <button type="button" class="btn btn-primary" id="btn-submit-rma-form" style="margin-left: 16px;" onclick="validateChangePassword()"><i style="margin-right: 8px" class="fa fa-check"></i>Valider</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- END Page Content -->
{% 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 src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>

    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet"/>
    <script src="https://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
    <script type="text/javascript">

        function showPassword(which) {
            if (which === 'confirm')
                var inputNewPass = document.getElementById("reset-password-confirmedNewPassword");
            else
                var inputNewPass = document.getElementById("reset-password-newPassword");
            if (inputNewPass.type === "password") {
                inputNewPass.type = "text";
            } else {
                inputNewPass.type = "password";
            }
        }

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

            var form = document.getElementById('reset-password-form');
            var newPassword = document.getElementById("reset-password-newPassword");
            var confirmedNewPassword = document.getElementById("reset-password-confirmedNewPassword");
            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) {
                validate(newPassword.value);
            }
            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.')
                }
            }
        }

        function validate(newPassword) {
            $.ajax({
                url: $('#reset-password').val(),
                type: 'GET',
                data: {
                    'status' : 'requested',
                    'password' : newPassword,
                    'userId' : {{ user.getId() }},
                },
                success: function(data){
                    document.location = ($('#choose-services').val());
                }
            });
        }

    </script>

{% endblock %}