<?php
 session_start();
    require_once 'connections/meekro/db.class.php';
  
    if (isset($_POST['btn-login'])) {
        $username =  $_POST['email'];
        $query = DB::queryFirstRow("SELECT * FROM users WHERE username=%s AND status=%s", $username, 'Active');
  if ($query) {
        $hashedPassword = $query['password'];
        $password = $_POST['password'];
		if (password_verify($password, $hashedPassword)) {
            $_SESSION['fullname'] = $query['fullname'];
            $_SESSION['svn'] = $query['svn'];
            $_SESSION['access_level'] = $query['access_level'];
            $_SESSION['LoggedIn'] = true;
            $_SESSION['username'] = $query['username'];
            $_SESSION['user_id'] = $query['user_id'];
            $_SESSION['command_code'] = $query['command_code'];
            $_SESSION['pass_change'] = $query['pass_change'];
            $msg = "<div class='bg-success p-2 mb-2  text-white text-center'> Successful: Loggin in ... </div>";
            	$accessLevel = $query['access_level'];
            	
            	if($accessLevel=='1'){
            	   // 	echo "<script>
    				        // window.setTimeout(function () {
                //                 location.href = 'https://licences.customs.gov.ng/onboarding/ncs/admin/';
                //             }, 2000);
                //         </script>";
            	}elseif($accessLevel=='2'){
                	echo "<script>
    				        window.setTimeout(function () {
                                location.href = 'https://databoxlab.com/apapa/dashboard/';
                            }, 2000);
                        </script>";
            	}elseif($accessLevel=='3'){
            	   // 	echo "<script>
    				        // window.setTimeout(function () {
                //                 location.href = 'https://licences.customs.gov.ng/onboarding/ncs/hq/';
                //             }, 2000);
                //         </script>";
            	}elseif($accessLevel=='6'){
            	   // 	echo "<script>
    				        // window.setTimeout(function () {
                //                 location.href = 'https://licences.customs.gov.ng/onboarding/ncs/validator/';
                //             }, 2000);
                //         </script>";
            	}elseif($accessLevel=='7'){
            	   // 	echo "<script>
    				        // window.setTimeout(function () {
                //                 location.href = 'https://licences.customs.gov.ng/onboarding/ncs/cc/';
                //             }, 2000);
                //         </script>";
            	}elseif($accessLevel=='8' || $accessLevel=='9' || $accessLevel=='10' ){
            	   // 	echo "<script>
    				        // window.setTimeout(function () {
                //                 location.href = 'https://licences.customs.gov.ng/onboarding/ncs/direct/';
                //             }, 2000);
                //         </script>";
            	}
        }else{
          $msg = "<div class='bg-danger p-2 mb-2  text-white text-center'>Incorrect Account Credentials </div>";
        }
     }else{
         $msg = "<div class='bg-danger p-2 mb-2  text-white' text-center>Incorrect Account Details </div>";
    }
}
?>

<html>
  <head>
    <title></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    
html, body {
  height: 100%;
  overflow: hidden;
}

.gradient-form {
  height: 100vh !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  /*height: 100%;*/
  overflow: hidden;
  border-radius: 0;
}

        
      .gradient-custom-2 {
/* fallback for old browsers */
background: #fccb90;

/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
}

@media (min-width: 768px) {
.gradient-form {
height: 100vh !important;
}
}
@media (min-width: 769px) {
.gradient-custom-2 {
border-top-right-radius: .3rem;
border-bottom-right-radius: .3rem;
}
}

.video-background-wrapper {
    position: relative;
    overflow: hidden;
  }

  .video-background-wrapper video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    object-fit:fill;
    opacity: 1; /* optional: adjust to darken/lighten */
  }

  .video-background-content {
    position: relative;
    z-index: 1;
  }
  
  @media (max-width: 767.98px) {
  .gradient-custom-2,
  .video-background-wrapper {
    border-radius: 0 !important;
    height: auto !important;
  }

  .video-background-wrapper video {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  .video-background-content {
    padding: 2rem;
    text-align: center;
  }

  .card-body {
    padding: 2rem 1rem !important;
  }
}

@media (max-width: 576px) {
  .video-background-wrapper {
    display: none;
  }
}
    </style>
  </head>
  <body class="p-0">
    <section class="h-100 gradient-form" style="background-color: #eee;">
      <div class="container-fluid h-100 p-0 m-0">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col-xl-12 m-0">
            <div class="card text-black">
              <div class="row g-0">
                <div class="col-lg-6 col-12">
                  <div class="card-body p-md-5 mx-md-5 ">
    
                    <div class="text-center">
                      <img src="images/logo.jpg"
                        style="width: 185px;" alt="logo">
                      <h4 class="mt-1 mb-0 pb-1">APAPA AREA COMMAND</h4>
                      <p class="fs-6 mb-4 text-success">Research & Development Office</p>
                    </div>
    
                    <form action="" method="post">
                        <?php echo @$msg; ?>
    
                      <div data-mdb-input-init class="form-outline mb-4">
                        <label class="form-label fw-semibold" for="email">Email</label>
                        <input type="email" id="email" name="email" class="form-control"
                          placeholder="Email address" />
                        
                      </div>
    
                      <div data-mdb-input-init class="form-outline mb-4">
                         <label class="form-label fw-semibold" for="form2Example22">Password</label>
                        <input type="password" id="password" name="password" placeholder="Password" class="form-control" />
                       
                      </div>
    
                      <div class="text-center pt-1 mb-5 pb-1">
                        <button  class="btn btn-outline-success col-12" type="submit" name="btn-login">Login</button>
                        <a class="text-muted" href="#!">Forgot password?</a>
                      </div>
    
                      <div class="d-flex align-items-center justify-content-center pb-4">
                        <p class="mb-0 me-2"><a href="#" class="text-success">DataboxLab</a></p>
                        <!-- <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-outline-danger">Create new</button> -->
                      </div>
    
                    </form>
    
                  </div>
                </div>
                <div class="col-lg-6 col-12 d-flex align-items-center video-background-wrapper">
                    <video autoplay muted loop playsinline>
                      <source src="images/analytics.mp4" type="video/mp4">
                      Your browser does not support the video tag.
                    </video>
                    <div class="text-white px-3 py-4 p-md-5 mx-md-4 video-background-content">
                      <h2 class="mb-4 text-center fw-semibold" style="text-shadow: 1px 1px 2px rgb(12, 79, 12);">Smarter Decisions Simplified</h2>
                      <p class="small mb-0 text-center fs-4 " style="text-shadow: 1px 1px 2px rgb(12, 79, 12);">
                        DataboxLab Helps growing organizatioins effortlessly unify their data, turning insights into action to boost performance and drive success
                      </p>
                    </div>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://kit.fontawesome.com/d9c9660a46.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery.counterup@2.1.0/jquery.counterup.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script>
        const video = document.querySelector("video");
        video.playbackRate = 0.3;
    </script>
  </body>
</html>