@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="#">
                          <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">Se connecter</h3>
                      </div>
                      <div class="position-relative">
                        <hr class="bg-200 mt-5 mb-4" />
                        <div class="divider-content-center bg-white">REDISTAS</div>
                      </div>
                      <form class="LoginForm" 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="email" 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>
                          <div class="mb-3 text-start"><label class="form-label" for="password">Mot de passe</label>
                            <div class="form-icon-container"><input class="form-control form-icon-input" name="password" id="password" type="password" placeholder="Password" /><span class="fas fa-key text-900 fs--1 form-icon"></span></div>
                            <small id="passwordRequired" class="FormLabel text-danger"></small>
                          </div>
                          <div class="row flex-between-center mb-7">
                            <div class="col-auto">
                              <div class="form-check mb-0"><input class="form-check-input" name="remember" id="remember" type="checkbox" checked="checked" /><label class="form-check-label mb-0" for="basic-checkbox">Se souvenir</label></div>
                            </div>
                            <div class="col-auto"><a class="fs--1 fw-semi-bold text-success" href="{{route('ReinitialisationMotDePasse.view')}}">Mot de passe oublié ?</a></div>
                          </div><button type="submit"  class="btn btn-success w-100 mb-3">Connexion</a>
                     </form>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </main>

@include('../rightbar')

@include('../footer')

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

        if(localStorage.getItem('remember') === 'true') {
            $('#remember').prop('checked', true);
            $('#email').val(localStorage.getItem('email'));
            //$('#password').val(localStorage.getItem('password'));
        }
  $('.LoginForm').on('submit',function(e){

      if ($('#remember').is(':checked')) {
          localStorage.setItem('remember', 'true');
          localStorage.setItem('email', $('#email').val());
          //localStorage.setItem('password', $('#password').val());
      } else {
          localStorage.setItem('remember', 'false');
          localStorage.removeItem('email');
         // localStorage.removeItem('password');
      }
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "{{route('utilisateur.connexion')}}",
    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('')
      }

      if($('#password').val().length==0){
        $('#passwordRequired').text('Mot de passe obligatoire')
        return false;
      }else{
        $('#passwordRequired').text('')
      }
    },
    success: function (data) {
      if(data.succes){
        window.location.href="{{route('dashboard.view')}}";
      }

      if(data.error){

         $('#mailOrPasswordError').append(
                            '<div id="MailOrPasswordError"  class="alert alert-soft-danger alert-dismissible fade show animate__animated animate__fadeInDown" role="alert"><strong>Erreur !</strong> '+data.msg+'</div>'
                        );
          $('#mailOrPasswordError').show();
          setTimeout(() => {
              $('#MailOrPasswordError').alert('close');
          }, 3000);
      }
    }
   });
  })
})
</script>


</body>

</html>