<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>CPC-ASIDE</title>
    <link href="<?php echo $this->baseUrl('css/bootstrap.min.css');?>" rel="stylesheet">
    <link rel="icon" type="image/png" href="<?php echo $this->baseUrl('img/logo.PNG');?>" 
    <link href="<?php echo $this->baseUrl('css/font-awesome.min.css');?>" rel="stylesheet" type="text/css">
    <link href="<?php echo $this->baseUrl('css/AdminLTE.min.css');?>" rel="stylesheet">
     <link href="<?php echo $this->baseUrl('css/ionicons.min.css');?>" rel="stylesheet">
    <link href="<?php echo $this->baseUrl('css/jquery.toast.min.css');?>" rel="stylesheet">
    <link href="<?php echo $this->baseUrl('css/blue.css');?>" rel="stylesheet">
     <link href="<?php echo $this->baseUrl("css/bootstrap-select.min.css");?>" rel="stylesheet">
</head>

<body class="hold-transition " background="<?php echo $this->baseUrl('img/logo.PNG');?>" >

  <div class="login-box">
  
  <!-- /.login-logo -->
  <div class="login-box-body" >
    <p class="login-box-msg">Connectez vous pour demarrer votre session</p>
   
    <form id="connectForm">
      <div class="form-group has-feedback">
          <input id="login" type="text" class="form-control" placeholder="login">
        <span class="glyphicon glyphicon-edit form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
          <input id="password" type="password" class="form-control" placeholder="Password">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>
       
      <div class="row">
       
        <div class="col-xs-4">
          <button id ="submitForm" type="submit" class="btn btn-primary btn-block btn-flat">Connexion</button>
        </div>
        <!-- /.col -->
      </div>
    </form>

    

  </div>
  <!-- /.login-box-body -->
</div>
    <div class="navbar-fixed-bottom" style="background-color : #3c8dbc; min-height: 55px">
        <div class="row">
            <br/><p class="col-lg-12" style="text-align: center; color: white;">Conçu par <a style="color: black;" href="#">MELLCO</a></p>
        </div>
    </div>

    <script src="<?php echo $this->baseUrl('script/jquery.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/bootstrap.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/jquery.toast.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl('script/loadingoverlay.min.js');?>"></script>
    <script src="<?php echo $this->baseUrl("script/bootstrap.select.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"){
                       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>
</body>

</html>
