<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ASLM</title>
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,400i,600,700,800,900" rel="stylesheet">
    <link href="<?php echo $this->baseUrl('css/themes/lite-purple.min.css');?>" rel="stylesheet">
    <link href="<?php echo $this->baseUrl('css/jquery.toast.min.css');?>" rel="stylesheet">
</head>
<div class="auth-layout-wrap" style="background-image: url(<?php echo $this->baseUrl('images/logo.jpg');?>)">
    <div class="auth-content">
        <div class="card o-hidden">
            <div class="row">
                <div class="col-md-6">
                    <div class="p-4">
                        <div class="auth-logo text-center mb-4" style="background-size: cover;background-image: url(<?php echo $this->baseUrl('images/logo.jpg');?>)"><img /></div>
                        <h1 class="mb-3 text-18">Sign In</h1>
                        <form id="connectForm">
                            <div class="form-group">
                                <label for="login">Login</label>
                                <input class="form-control form-control-rounded" id="login" >
                            </div>
                            <div class="form-group">
                                <label for="password">Password</label>
                                <input class="form-control form-control-rounded" id="password" type="password">
                            </div>
                            <button id="submitForm" type="submit" class="btn btn-rounded btn-primary btn-block mt-2">Sign In</button>
                        </form>
                        <div class="mt-3 text-center"><a class="text-muted" href="forgot.html">
                                <u>Forgot Password?</u></a></div>
                    </div>
                </div>
                <div class="col-md-6 text-center" style="background-size: cover;background-image: url(<?php //echo $this->baseUrl('images/stop-covid.jpg');?>)">
                    
                </div>
            </div>
        </div>
    </div>
</div>
<script src="<?php echo $this->baseUrl('js/plugins/jquery-3.3.1.min.js');?>"></script>
<script src="<?php echo $this->baseUrl('js/plugins/loadingoverlay.min.js');?>"></script>
<script src="<?php echo $this->baseUrl('script/jquery.toast.min.js');?>"></script> 
 <script type="text/javascript">
        
        $(document).ajaxSend(function(event, jqxhr, settings){
            $.LoadingOverlay("show");
        });
        
        $(document).ajaxComplete(function(event, jqxhr, settings){
            $.LoadingOverlay("hide");
        });
        
        
        $("#connectForm").on("submit",function(e){
            e.preventDefault();
            var params = { 
                login : $("#login").val(),
                password : $("#password").val()
            };
            
            $.ajax({
               url :  "<?php echo $this->url(array('controller' => 'Index', 'action' => 'connexion')); ?>",
               data : params , 
               type : "post",
               dataType : "json",
               error : function(){
               },
               success : function(data){
                   if ( data.type === "success"){
                   console.log(JSON.stringify(data));
                   //return;
                       location.replace( "<?php echo $this->url(array('controller' => 'Accueil', 'action' => 'index')); ?>");
                   }else{
                       var top = $("#submitForm").offset().top;
                       var left = $("#submitForm").offset().left;
                       $.toast({
                           heading : "Info",
                           text : "Login ou mot de passe incorrect",
                           hideAfter : false,
                           stack : false,
                           icon : "error",
                           position : { top : top , left : left }
                       });
                   }
               }
            });
        });
    </script>

</html>
