<?php
session_start();
include('corings.php');

if (isset($_SESSION['nmuser'])) {
    redirect('index.php');
}

$error = $_SESSION['login_error'] ?? '';
unset($_SESSION['login_error']);

$store_name = getSetting('nama_toko', $app_name);
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>KiosKasir — Login · <?php echo esc($store_name); ?></title>
  <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
  <link href="css/sb-admin-2.min.css" rel="stylesheet">
  <link href="css/custom.css" rel="stylesheet">
  <link href="css/menubar.css" rel="stylesheet">
  <link href="css/login.css" rel="stylesheet">
</head>
<body class="kios-menubar-layout kios-login-layout">

<div class="kios-shell">
  <div class="kios-titlebar">
    <div class="kios-titlebar-left">
      <div class="kios-titlebar-icon"><i class="fas fa-store"></i></div>
      <div class="kios-titlebar-text">
        <span class="kios-titlebar-brand">KiosKasir</span>
        <span class="kios-titlebar-client"> &middot; <?php echo esc($store_name); ?></span>
        <span class="kios-titlebar-sub">Login</span>
      </div>
    </div>
    <div class="kios-titlebar-right">
      <span class="kios-titlebar-badge"><i class="fas fa-lock mr-1"></i> Akses Aman</span>
    </div>
  </div>

  <main class="kios-login-main">
    <div class="kios-login-card">
      <div class="kios-login-card-header">
        <h1>Masuk ke Sistem</h1>
        <p>Gunakan akun kasir atau admin untuk melanjutkan.</p>
      </div>
      <div class="kios-login-card-body">
        <?php if (!empty($error)): ?>
        <div class="alert alert-danger mb-3" role="alert">
          <i class="fas fa-exclamation-circle mr-1"></i>
          <?php echo esc($error); ?>
        </div>
        <?php endif; ?>

        <form method="POST" action="login_proses.php" autocomplete="on">
          <div class="form-group">
            <label for="nmuser"><i class="fas fa-user mr-1 text-primary"></i> Username</label>
            <input type="text" class="form-control" id="nmuser" name="nmuser" placeholder="Masukkan username" required autofocus>
          </div>
          <div class="form-group">
            <label for="password"><i class="fas fa-lock mr-1 text-primary"></i> Password</label>
            <input type="password" class="form-control" id="password" name="password" placeholder="Masukkan password" required>
          </div>
          <div class="kios-login-showpass custom-control custom-checkbox">
            <input type="checkbox" class="custom-control-input" id="showPass" onclick="togglePassword()">
            <label class="custom-control-label" for="showPass">Tampilkan password</label>
          </div>
          <div class="kios-login-actions">
            <button type="submit" class="btn btn-login">
              <i class="fas fa-sign-in-alt mr-1"></i> Login
            </button>
          </div>
        </form>
      </div>
    </div>
  </main>

  <footer class="kios-login-footer">
    <strong>KiosKasir</strong> &middot; Velove Ocra Consulting &copy; <?php echo date('Y'); ?>
  </footer>
</div>

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<div class="modal fade" id="appAlertModal" tabindex="-1" role="dialog" aria-labelledby="appAlertModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content" style="border-radius:6px;">
      <div class="modal-header py-2">
        <h5 class="modal-title font-weight-bold" id="appAlertModalLabel" style="font-size:14px;">
          <i class="fas fa-info-circle mr-2 text-primary"></i>Informasi
        </h5>
        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body py-3" id="appAlertModalBody" style="font-size:13px;"></div>
      <div class="modal-footer py-2">
        <button class="btn btn-primary btn-sm" type="button" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>
<script>
function showAppAlert(message) {
    var text = (message === undefined || message === null) ? '' : String(message);
    var body = document.getElementById('appAlertModalBody');
    if (body) body.textContent = text;
    $('#appAlertModal').modal('show');
}

window.alert = showAppAlert;

function togglePassword() {
    var field = document.getElementById('password');
    field.type = field.type === 'password' ? 'text' : 'password';
}
</script>
</body>
</html>
