<!DOCTYPE html>
<html>

<head>
  
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Sampathbay</title>

  <!-- Place favicon.ico in the root directory -->
  <link rel="shortcut icon" type="image/x-icon" href="../img/S_favicon.ico">    
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.5 -->
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="dist/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="dist/css/ionicons.min.css">
  <!-- daterange picker -->
  <link rel="stylesheet" href="plugins/daterangepicker/daterangepicker-bs3.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="plugins/iCheck/all.css">
  <!-- Bootstrap Color Picker -->
  <link rel="stylesheet" href="plugins/colorpicker/bootstrap-colorpicker.min.css">
  <!-- Bootstrap time Picker -->
  <link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.css">
  <!-- Select2 -->
  <link rel="stylesheet" href="plugins/select2/select2.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
     <link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">

   </head>
   <body class="hold-transition skin-blue sidebar-mini">
    <div class="wrapper">

      <header class="main-header">
        <!-- Logo -->
        <a href="" class="logo">
          <!-- mini logo for sidebar mini 50x50 pixels -->
          <span class="logo-mini"><img src="img/logo_mini.png" width="50"></span>
          <!-- logo for regular state and mobile devices -->
          <span class="logo-lg"><b><img src="img/logo.png" width="200"></b></span>
        </a>
        <!-- Header Navbar: style can be found in header.less -->
        <nav class="navbar navbar-static-top" role="navigation">
          <!-- Sidebar toggle button-->
          <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="logo-lg">
             &nbsp;&nbsp;<font face="Lucida Sans Unicode, Lucida Grande, sans-serif">Sampathbay </font></span>
           </a>
           
           <div class="navbar-custom-menu">
            <ul class="nav navbar-nav">

              <!-- User Account: style can be found in dropdown.less -->
              
              <!-- Control Sidebar Toggle Button -->
              <li class="user-footer">
               
                <div class="pull-right">
                  <a href="../" class="btn btn-default btn-flat">Visit Site Home</a>
                </div>
              </li>
             <!-- <li>
                <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
              </li>-->
            </ul>
          </div>
        </nav>
      </header>
      <!-- Left side column. contains the logo and sidebar -->
      <aside class="main-sidebar">
        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">
          <!-- Sidebar user panel -->
          
          <div class="user-panel"> 
            <div class="pull-left image"> <img src="dist/img/user2-160x160.png" class="img-circle" alt="User Image"> 
            </div>
          </div>
          <!-- search form -->
          
          <!-- /.search form -->
          <!-- sidebar menu: : style can be found in sidebar.less -->
          
        </section>
        <!-- /.sidebar -->
      </aside>

      <!-- Content Wrapper. Contains page content -->
      <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
          <h1>
           Administrator Login
           <small>Preview</small>
         </h1>
         

       </section>

       <!-- Main content -->
       <section class="content">

        <!-- ************************************************* -->


        
        <!-- Horizontal Form -->
        <div class="box box-info"> 
          <div class="box-header with-border"> 
            <h3 class="box-title">Login</h3>
          </div>
          <!-- /.box-header -->
          <!-- form start -->
          <form class="form-horizontal" id="login-form" method="post">
            <div class="box-body"> 
             
             
             <!-- json response will be here -->
             <div id="errorDiv"></div>
             <!-- json response will be here -->
             
             <div class="form-group"> 
              <label for="inputEmail3" class="col-sm-2 control-label">Username</label>
              
              <div class="col-sm-10"> 
                <input type="text" name="user" placeholder="Username" autofocus class="form-control">
                <span class="help-block" id="error"></span>			
              </div>
              
              
            </div>
            <div class="form-group"> 
              <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
              
              <div class="col-sm-10"> 
                <input type="password" name="password" placeholder="Password" class="form-control" >
                <span class="help-block" id="error"></span>
              </div>
            </div>
            <div class="form-group"> 
              <div class="col-sm-offset-2 col-sm-10"> 
                
               
              </div>
            </div>
          </div>
          
          <!-- /.box-body -->
          
          <div class="box-footer"> 
           
            <button type="submit" id="btn-login" class="btn btn-info pull-right">Sign in</button>
          </div>
          <!-- /.box-footer -->
        </form>

        
      </div>
      <!-- /.box -->
    </section>

    <!-- ************************************************* -->
    
    <!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.box-body -->



<div class="row">
  
  
  
</div>
<!-- /.col (right) -->


</div>
<footer class="main-footer"> 
  <div class="pull-right hidden-xs">
    
  </div>  <strong>&copy; 2018 Sampathbay. </strong> All Rights Reserved.
</footer>

<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
  <!-- Create the tabs -->
  <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
    <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
    <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
  </ul>
  <!-- Tab panes -->
  <div class="tab-content">
    <!-- Home tab content -->
    <div class="tab-pane" id="control-sidebar-home-tab">
      

      
     

    </div><!-- /.tab-pane -->
    

  </div><!-- /.tab-pane -->
</div>
</aside><!-- /.control-sidebar -->
      <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
       <div class="control-sidebar-bg"></div>
     </div><!-- ./wrapper -->

     <!-- jQuery 2.1.4 -->
     <script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
     <!-- Bootstrap 3.3.5 -->
     <script src="bootstrap/js/bootstrap.min.js"></script>
     <!-- Select2 -->
     <script src="plugins/select2/select2.full.min.js"></script>
     <!-- InputMask -->
     <script src="plugins/input-mask/jquery.inputmask.js"></script>
     <script src="plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
     <script src="plugins/input-mask/jquery.inputmask.extensions.js"></script>
     <!-- date-range-picker -->
     <script src="plugins/daterangepicker/moment.min.js"></script>
     <script src="plugins/daterangepicker/daterangepicker.js"></script>
     <!-- bootstrap color picker -->
     <script src="plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
     <!-- bootstrap time picker -->
     <script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
     <!-- SlimScroll 1.3.0 -->
     <script src="plugins/slimScroll/jquery.slimscroll.min.js"></script>
     <!-- iCheck 1.0.1 -->
     <script src="plugins/iCheck/icheck.min.js"></script>
     <!-- FastClick -->
     <script src="plugins/fastclick/fastclick.min.js"></script>
     <!-- AdminLTE App -->
     <script src="dist/js/app.min.js"></script>
     <!-- AdminLTE for demo purposes -->
     <script src="dist/js/demo.js"></script>
     <!-- Page script -->
     <script>
      $(function () {
        //Initialize Select2 Elements
        $(".select2").select2();

        //Datemask dd/mm/yyyy
        $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
        //Datemask2 mm/dd/yyyy
        $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
        //Money Euro
        $("[data-mask]").inputmask();

        //Date range picker
        $('#reservation').daterangepicker();
        //Date range picker with time picker
        $('#reservationtime').daterangepicker({timePicker: false, timePickerIncrement: 30, format: 'MM/DD/YYYY'});
        //Date range as a button
        $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          
        },
        function (start) {
          $('#reportrange span').html(start.format('MMMM D, YYYY'));
        }
        );

        //iCheck for checkbox and radio inputs
        $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
          checkboxClass: 'icheckbox_minimal-blue',
          radioClass: 'iradio_minimal-blue'
        });
        //Red color scheme for iCheck
        $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
          checkboxClass: 'icheckbox_minimal-red',
          radioClass: 'iradio_minimal-red'
        });
        //Flat red color scheme for iCheck
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
          checkboxClass: 'icheckbox_flat-green',
          radioClass: 'iradio_flat-green'
        });

        

        
      });
    </script>
    
    <script>

// JavaScript Validation For Registration Page
$('document').ready(function()
{ 		 


		//////////////////////////////////////////////////////////////////////////////////////
   
   $("#login-form").validate({
     
    rules:
    {	
      password: {
       required: true
     },
     user: {
       required: true
     }
   },
   messages:
   {
    
    password: {
     required: "Password is Required.",
   },
   user: {
     required: "Username is Required.",
   }
 },
 errorPlacement : function(error, element) {
   $(element).closest('.form-group').find('.help-block').html(error.html());
 },
 highlight : function(element) {
   $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
 },
 unhighlight: function(element, errorClass, validClass) {
   $(element).closest('.form-group').removeClass('has-error');
   $(element).closest('.form-group').find('.help-block').html('');
 },
 submitHandler: loginForm
}); 

   
		   ///////////////////////////////////////
		   
       function loginForm(){
        
        $.ajax({
          url: 'login_fun_admin.php',
          type: 'POST',
          data: $('#login-form').serialize(),
          dataType: 'json'
        })
        .done(function(data){
          
          $('#btn-login').html('Sign in...').prop('disabled', true);
          $('input[type=text],input[type=password]').prop('disabled', true);
          
          setTimeout(function(){
           
            if ( data.status==='ok' ) {
             
              setTimeout('window.location.href = "home.php"; ',3);
              
              
            } else {
              
              $('#errorDiv').slideDown('fast', function(){
               $('#errorDiv').html('<div class="alert alert-danger">'+data.message+'</div>');
               $("#login-form").trigger('reset');
               $('input[type=text],input[type=password]').prop('disabled', false);
               $('#btn-login').html('Sign in').prop('disabled', false);
             }).delay(3000).slideUp('fast');
            }
            
          },1000);
          
        })
        .fail(function(){
          $("#login-form").trigger('reset');
          alert('An unknown error occoured, Please try again Later...');
        });
      }
    });
  </script>

  <script src="assets/jquery.validate.min.js"></script>	
  
  
</body>
</html>
