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

{% block title %}
    {{ parent() }}
    PLM Services
{% 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>

    #email{
        border-radius: .25rem;
        border-color: #78787885;
        box-shadow: inherit!important;
    }

    </style>
{% endblock %}

{% block body %}
    {{ parent() }}
    <input type="text" id="forgotten-password" value="{{ path('forgotten_password') }}" style="display: none">
    <input type="text" id="login" value="{{ path('redirect') }}" 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">Mot de passe oublié</h1>
                        <div class="font-w300 text-muted mt-30 mb-10" id="explain_forgotten_password" style="display:block;">Entrer votre mail pour recevoir un lien de réinitialisation de mot de passe</div>
                    </div>
                    <!-- END Header -->

                    <form id="forgotten-password-form">
                        <div class="form-group row">
                            <div class="col-12">
                                <div class="form-material">
                                    <input type="email" id="email" name="_email" class="form-control" required="required">
                                    <label for="login-username" style="position: absolute">Saisissez votre mail</label>
                                </div>
                            </div>
                        </div>

                        <div class="form-group button_forgotten_password">
                            <button type="button" class="btn btn-alt-primary spinner_button button_forgotten_password-valider" style="width: 80px;">
                                Validé
                            </button>
                            <button type="button" class="btn spinner_button" style="margin-left: 25px;" onclick="goToLogin()">
                                Annuler
                            </button>
                        </div>
                        <div class="form-group explain_forgotten_password" style="display: none">
                            <div class="col-12">
                                Vous avez reçu un mail contenant un lien pour réinitialiser votre mot de passe.<br>
                                N'oubliez pas de vérifier dans vos spams.
                            </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">

        $('.button_forgotten_password-valider').click(function () {
            if (ValidateEmail($('#email').val())) {
                $('.button_forgotten_password').css('display', 'none')
                $('.explain_forgotten_password').css('display', 'block')
                $('#explain_forgotten_password').css('display', 'none')
                validate();
            }
        });

        function ValidateEmail(email)
        {
            if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email))
            {
                return (true)
            }
            alert("Vous avez rentrer un email invalide")
            return (false)
        }

        function validate() {
            var email = $('#email').val()
            $.ajax({
                url: $('#forgotten-password').val(),
                type: 'GET',
                data: {
                    'status' : 'requested',
                    'email' : email,
                },
            });
        }

        function goToLogin() {
            document.location = $('#login').val();
        }

    </script>

{% endblock %}