<?php
session_start();
if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] === true) {
  header("Location: dashboard.php"); 
  exit(); 
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ai IT Solution Tools | Log in</title>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="dist/css/adminlte.min.css">
  <style>
    :root {
      --primary-color: #4e73df;
      --secondary-color: #f8f9fc;
    }
    
    body {
      background: linear-gradient(135deg, var(--secondary-color) 0%, #d2d6de 100%);
      height: 100vh;
      display: flex;
      align-items: center;
    }
    
    .login-box {
      width: 400px;
      margin: 0 auto;
    }
    
    .login-logo a {
      color: var(--primary-color);
      font-weight: 700;
      font-size: 2rem;
      text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
    }
    
    .login-card {
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.08);
      border: none;
      overflow: hidden;
    }
    
    .login-card-body {
      padding: 2rem;
      background: white;
    }
    
    .login-box-msg {
      font-size: 1rem;
      margin-bottom: 1.5rem;
      color: #5a5c69;
    }
    
    .input-group-text {
      background-color: var(--secondary-color);
      border-color: #d1d3e2;
    }
    
    .form-control {
      border-color: #d1d3e2;
      height: calc(2.25rem + 8px);
    }
    
    .form-control:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }
    
    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      padding: 0.5rem 1.5rem;
      font-weight: 600;
    }
    
    .btn-block {
      width: 100%;
    }
  </style>
</head>
<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo text-center mb-4">
    <a href="#"><b>AI IT Solution Tools</b></a> 
  </div>
  <div class="card login-card">
    <div class="card-body login-card-body">
      <p class="login-box-msg text-center">Sign in to start your session</p>
      <form action="#" method="post" id="loginForm">
        <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Username">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-user"></span>
            </div>
          </div>
        </div>
        <div class="input-group mb-3">
          <input type="password" class="form-control" placeholder="Password">
          <div class="input-group-append">
            <div class="input-group-text">
              <span class="fas fa-lock"></span>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-4 mx-auto">
            <button type="submit" class="btn btn-primary btn-block">Sign In</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script src="dist/js/pages/login.js"></script>
</body>
</html>