@include('../header')

<main class="main" id="top">
    <div class="container-fluid bg-300 dark__bg-1200">
        <div class="bg-holder bg-auth-card-overlay" style="background-image:url(../../../assets/img/bg/37.png);"></div>
        <!--/.bg-holder-->
        <div class="row flex-center position-relative min-vh-100 g-0 py-5">
            <div class="col-11 col-sm-10 col-xl-8">
                <div class="card border border-200 auth-card card-shadow">
                    <div class="card-body pe-md-0">
                        <div class="row align-items-center gx-0 gy-7">
                            <div class="col-auto   rounded-3 position-relative overflow-hidden auth-title-box">
                                <div class="bg-holder" style="background-image:url(../../../assets/img/trabajo.png);">
                                </div>

                                <div class="position-relative z-index--1 mb-6 d-none d-md-block text-center mt-md-15">
                                    <img class="auth-title-box-img d-dark-none"
                                        src="../../../assets/img/spot-illustrations/auth.png" alt="" /><img
                                        class="auth-title-box-img d-light-none"
                                        src="../../../assets/img/spot-illustrations/auth-dark.png" alt="" />
                                </div>
                            </div>
                            <div class="col mx-auto">
                                <div class="auth-form-box">
                                    <div class="text-center mb-7"><a
                                            class="d-flex flex-center text-decoration-none mb-4"
                                            href="../../../index.html">
                                            <div class="d-flex align-items-center fw-bolder fs-5 d-inline-block"><img
                                                    src="../../../assets/img/icons/logo.png" alt="phoenix"
                                                    width="58" /></div>
                                        </a>
                                        <h3 class="text-1000">Reinitialisation</h3>
                                    </div>
                                    <div class="position-relative">
                                        <hr class="bg-200 mt-5 mb-4" />
                                        <div class="divider-content-center bg-white">REDISTAS</div>
                                    </div>
                                    <div id="BlockEmail">
                                        <form class="VerificationForm" method="POST">
                                            @csrf
                                            <div id="mailOrPasswordError"></div>
                                            <div class="mb-3 text-start"><label class="form-label" for="email">Adresse
                                                    mail</label>
                                                <div class="form-icon-container"><input class="form-control form-icon-input"
                                                        name="emailUtilisateur" id="email" type="email"
                                                        placeholder="name@example.com" /><span
                                                        class="fas fa-envelope text-900 fs--1 form-icon"></span></div>
                                                <small id="emailRequired" class="FormLabel text-danger"></small>
                                            </div>
                                            <button type="submit" class="btn btn-success w-100 mb-3">Vérification</a>

                                           
                                        </form>
                                    </div>

                                    <div>
                                     <a href="{{route('login.view')}}" id="lienRetour" class="FormLabel"> <i class="fa fa-arrow-left"></i> Retour</a>
                                    </div>
                                    
                                    <div style="display:none" id="BlockMotDePasse" class="animate__animated animate__fadeInDown">
                                        <form class="changePasswordForm" method="POST">
                                            @csrf
                                            <div id="NewPasswordErrorBlock"></div>
                                            <input class="form-control EmailHidden" name="EmailHidden" id="EmailHidden" type="hidden" />
                                            <div class="mb-3 text-start"><label class="form-label" for="email">Nouveau mot de passe</label>
                                                 <div class="form-icon-container"><input class="form-control form-icon-input" name="newpassword" id="newpassword" type="password" placeholder="Password" /><span class="fas fa-key text-900 fs--1 form-icon"></span></div>
                                                <small id="newpasswordRequired" class="FormLabel text-danger"></small>
                                            </div>

                                            <div class="mb-3 text-start"><label class="form-label" for="email">Confirmer le mot de passe</label>
                                                 <div class="form-icon-container"><input class="form-control form-icon-input" name="Cpassword" id="Cpassword" type="password" placeholder="Password" /><span class="fas fa-key text-900 fs--1 form-icon"></span></div>
                                                <small id="CpasswordRequired" class="FormLabel text-danger"></small>
                                                <small id="MatchingPassword" class="FormLabel text-danger"></small>
                                            </div>
                                            <button type="submit" class="btn btn-success w-100 mb-3">Modifier</a>
                                        </form>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>

@include('../rightbar')

@include('../footer')

<script>
    $(document).ready(function() {

        $('.VerificationForm').on('submit', function(e) {

            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "{{ route('utilisateurEmail.verification') }}",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if ($('#email').val().length == 0) {
                        $('#emailRequired').text('Email obligatoire')
                        return false;
                    } else {
                        $('#emailRequired').text('')
                    }
                },
                success: function(data) {
                    if (data.ligne.length ==0) {
                       $('#mailOrPasswordError').append(
                            '<div id="MailOrPasswordError"  class="alert alert-soft-danger alert-dismissible fade show animate__animated animate__fadeInDown" role="alert"><strong>Erreur !</strong> Adresse mail inconnu !</div>'
                        );
                        $('#mailOrPasswordError').show();
                        setTimeout(() => {
                            $('#MailOrPasswordError').alert('close');
                        }, 3000);
                    }

                     if (data.ligne.length > 0) {
                        $('#EmailHidden').val(data.ligne[0].email);
                        $('#BlockEmail').css('display','none')
                        $('#BlockMotDePasse').css('display','block')
                        $('#lienRetour').css('display','none')
                        
                     }

                }
            });
        })

          $('.changePasswordForm').on('submit', function(e) {

            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "{{ route('utilisateurMotdePasse.modifier') }}",
                data: new FormData(this),
                dataType: "JSON",
                processData: false,
                contentType: false,
                beforeSend: function() {
                    if ($('#newpassword').val().length == 0) {
                        $('#newpasswordRequired').text('Mot de passe obligatoire')
                        return false;
                    } else {
                        $('#newpasswordRequired').text('')
                    }
                    if ($('#Cpassword').val().length == 0) {
                   
                        $('#CpasswordRequired').text('Email obligatoire')
                        return false;
                    } else {
                        $('#CpasswordRequired').text('')
                    }

                    if($('#newpassword').val() !=$('#Cpassword').val()){

                        $('#MatchingPassword').text('Les deux mot de passe ne correspondent pas')
                        return false;
                    }else{
                        $('#MatchingPassword').text('');
                    }
                },
                success: function(data) {
                   
                        if(data.succes){
                            
                            window.location.href="{{route('login.view')}}"
                        }
                }
            });
        })
    })
</script>


</body>

</html>