<?php require_once __DIR__ . '/config/app.php'; ?>
<!doctype html>

<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Login</title>
    <!-- CSS files -->
    <link href="<?=$app_url;?>dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
    <link href="<?=$app_url;?>dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
    <link href="<?=$app_url;?>dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
    <link href="<?=$app_url;?>dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
    <link href="<?=$app_url;?>dist/css/demo.min.css?1692870487" rel="stylesheet"/>
    <style>
      @import url('https://rsms.me/inter/inter.css');
      :root {
      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
        --car-rental-primary: #1f4e79;
        --car-rental-primary-dark: #153957;
        --car-rental-accent: #f59f00;
      }
      body {
      	font-feature-settings: "cv03", "cv04", "cv11";
      }
      .hotel-heading {
            font-family: inherit;
            font-size: 2rem;
            font-weight: 700;
            color: var(--car-rental-primary);
            letter-spacing: 0;
            margin-bottom: 1.5rem;
        }
      .card-md {
            border-top: 4px solid var(--car-rental-accent);
        }
      .btn-primary {
            --tblr-btn-bg: var(--car-rental-primary);
            --tblr-btn-border-color: var(--car-rental-primary);
            --tblr-btn-hover-bg: var(--car-rental-primary-dark);
            --tblr-btn-hover-border-color: var(--car-rental-primary-dark);
            --tblr-btn-active-bg: var(--car-rental-primary-dark);
            --tblr-btn-active-border-color: var(--car-rental-primary-dark);
        }
    </style>
  </head>
  <body  class=" d-flex flex-column">

    <div class="page page-center">
      <div class="container container-tight py-4">
        <div class="text-center mb-4">
            <!--<img src="img/logo_lg.png" alt="Tabler" class="navbar-brand-image w-50 h-50">-->
        </div>
        <div class="card card-md">
          <div class="card-body">
            <h2 class="hotel-heading text-center mb-4">Car Rental</h2>
            
            <!-- Display error message if any -->
            <?php 
            if (isset($_GET['error'])) {
                if ($_GET['error'] == 'empty') {
                    echo '<div class="alert alert-warning" role="alert">Username or password should not be blank!</div>';
                } else {
                    echo '<div class="alert alert-danger" role="alert">Invalid username or password!</div>';
                }
            }
            ?>


            <form action="<?=$app_url;?>checklogin.php" method="post" autocomplete="on" novalidate>
              <div class="mb-3">
                <label class="form-label">Name</label>
                <input type="text" class="form-control" placeholder="Your Name" id="username" name="username" required value="<?php echo isset($_GET['username']) ? htmlspecialchars($_GET['username']) : ''; ?>">
              </div>
              <div class="mb-2">
                <label class="form-label">
                  Password
                </label>
                <div class="input-group input-group-flat">
                  <input type="password" class="form-control"  placeholder="Your password"  autocomplete="off"  id="password" name="password" required>
                </div>
              </div>
              <div class="form-footer">
                <button type="submit" class="btn btn-primary w-100">Log In</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
    <!-- Libs JS -->
    <!-- Tabler Core -->
    <script src="<?=$app_url;?>dist/js/tabler.min.js?1692870487" defer></script>
    <script src="<?=$app_url;?>dist/js/demo.min.js?1692870487" defer></script>
    <script>
    // JavaScript to close alerts after 3 seconds
    window.onload = function() {
        const alertMessages = document.querySelectorAll('.alert');
        alertMessages.forEach(alert => {
            setTimeout(() => {
                alert.classList.remove('show');
                alert.classList.add('fade'); // Optional: Add fade-out effect
                // Remove the alert after fade-out
                setTimeout(() => {
                    alert.remove(); // Remove the alert from the DOM
                }, 500); // Match this duration with your CSS transition time
            }, 1000);
        });
    };
</script>

  </body>
</html>
