<?php
// ============================================================
// FILE: login.php — Halaman Login Admin & Pelanggan
// Standalone (tidak pakai header/footer publik)
// ============================================================
require_once __DIR__ . '/includes/config.php';
require_once __DIR__ . '/includes/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/auth.php';

// Redirect jika sudah login
if (isLoggedIn()) {
    redirect(isAdmin() ? BASE_URL . '/admin/' : BASE_URL);
}

$error   = '';
$email   = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $email = trim($_POST['email']    ?? '');
    $pass  = trim($_POST['password'] ?? '');

    if (!$email || !$pass) {
        $error = 'Email dan password wajib diisi.';
    } elseif (loginUser($email, $pass)) {
        // Setelah login sukses, cek role user
        if (isAdmin()) {
            redirect(BASE_URL . '/admin/');
        } else {
            redirect(BASE_URL);
        }
    } else {
        $error = 'Email atau password salah. Coba lagi.';
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Masuk — <?= NAMA_TOKO ?></title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
  <style>
    body { background: #F5EDE2; min-height: 100vh; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; }
    .login-wrap { width: 100%; max-width: 420px; padding: 1rem; }

    .login-brand {
      text-align: center;
      margin-bottom: 2rem;
    }
    .login-brand-icon {
      width: 68px; height: 68px;
      background: linear-gradient(135deg, #8B5E3C, #6B4526);
      border-radius: 18px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 2rem; color: white;
      margin-bottom: 1rem;
      box-shadow: 0 8px 24px rgba(139,94,60,.35);
    }
    .login-brand-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.55rem;
      font-weight: 900;
      color: #2D1B0E;
      margin: 0;
      line-height: 1.2;
    }
    .login-brand-sub { color: #8B5E3C; font-size: .85rem; font-weight: 600; margin-top: .2rem; }

    .login-card {
      background: #fff;
      border-radius: 20px;
      padding: 2.25rem 2rem;
      box-shadow: 0 4px 32px rgba(139,94,60,.12), 0 1px 4px rgba(0,0,0,.06);
      border: 1px solid rgba(212,168,83,.2);
    }
    .login-title {
      font-size: 1.2rem; font-weight: 800;
      color: #2D1B0E;
      margin-bottom: .35rem;
    }
    .login-sub { font-size: .84rem; color: #92756A; margin-bottom: 1.75rem; }

    .login-label {
      font-size: .82rem; font-weight: 700;
      color: #3D2B1F;
      display: block; margin-bottom: .4rem;
    }
    .login-input {
      border: 1.5px solid #E8D9CC !important;
      border-radius: 10px !important;
      padding: .65rem 1rem !important;
      font-size: .95rem;
      font-family: 'Nunito', sans-serif;
      transition: border-color .2s, box-shadow .2s;
    }
    .login-input:focus {
      border-color: #8B5E3C !important;
      box-shadow: 0 0 0 3px rgba(139,94,60,.12) !important;
    }
    .btn-login {
      width: 100%;
      padding: .8rem;
      background: linear-gradient(135deg, #8B5E3C, #6B4526);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 800;
      font-family: 'Nunito', sans-serif;
      cursor: pointer;
      transition: all .2s;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
    }
    .btn-login:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(139,94,60,.35);
    }
    .btn-login:disabled {
      opacity: .7; transform: none; cursor: not-allowed;
    }
    .login-divider {
      text-align: center; color: #B8A090; font-size: .78rem;
      margin: 1.5rem 0;
      position: relative;
    }
    .login-divider::before, .login-divider::after {
      content: ''; position: absolute; top: 50%;
      width: calc(50% - 2.5rem); height: 1px;
      background: #E8D9CC;
    }
    .login-divider::before { left: 0; }
    .login-divider::after  { right: 0; }

    .login-back {
      display: flex; align-items: center; justify-content: center; gap: .35rem;
      color: #8B5E3C; font-size: .84rem; font-weight: 600;
      text-decoration: none; margin-top: 1.5rem;
      transition: color .18s;
    }
    .login-back:hover { color: #6B4526; }

    .toggle-pass-btn {
      background: #F5EDE2; border: 1.5px solid #E8D9CC;
      border-left: none; border-radius: 0 10px 10px 0 !important;
      color: #8B5E3C; padding: 0 .85rem;
      cursor: pointer; transition: background .18s;
    }
    .toggle-pass-btn:hover { background: #EDD9C4; }
    .pass-group .login-input {
      border-right: none !important;
      border-radius: 10px 0 0 10px !important;
    }

    .login-error {
      background: #FEF2F2;
      border: 1px solid #FECACA;
      border-radius: 10px;
      padding: .7rem 1rem;
      font-size: .87rem;
      color: #B91C1C;
      display: flex; align-items: center; gap: .5rem;
      margin-bottom: 1.25rem;
    }

    .login-hint {
      background: rgba(212,168,83,.1);
      border: 1px solid rgba(212,168,83,.3);
      border-radius: 10px;
      padding: .65rem 1rem;
      font-size: .78rem;
      color: #7A5A25;
      margin-top: 1rem;
    }
  </style>
</head>
<body>

<div class="login-wrap">

  <!-- Brand -->
  <div class="login-brand">
    <div class="login-brand-icon">
      <i class="bi bi-house-door-fill"></i>
    </div>
    <h1 class="login-brand-name"><?= NAMA_TOKO ?></h1>
    <div class="login-brand-sub">Kusen &amp; Gypsum Berkualitas</div>
  </div>

  <!-- Card -->
  <div class="login-card">
    <h2 class="login-title">Selamat Datang 👋</h2>
    <p class="login-sub">Masuk ke akun Anda untuk melanjutkan.</p>

    <?php if ($error): ?>
      <div class="login-error">
        <i class="bi bi-exclamation-circle-fill flex-shrink-0"></i>
        <?= e($error) ?>
      </div>
    <?php endif; ?>

    <form method="POST" id="frmLogin" novalidate>

      <!-- Email -->
      <div class="mb-3">
        <label class="login-label" for="iEmail">
          <i class="bi bi-envelope me-1"></i>Alamat Email
        </label>
        <input type="email" id="iEmail" name="email"
               class="form-control login-input"
               value="<?= e($email) ?>"
               placeholder="admin@budijaya.com"
               required autofocus autocomplete="email">
      </div>

      <!-- Password -->
      <div class="mb-4">
        <label class="login-label" for="iPass">
          <i class="bi bi-lock me-1"></i>Password
        </label>
        <div class="input-group pass-group">
          <input type="password" id="iPass" name="password"
                 class="form-control login-input"
                 placeholder="••••••••"
                 required autocomplete="current-password">
          <button type="button" class="toggle-pass-btn" id="btnTogglePass"
                  onclick="togglePass()" tabindex="-1" title="Tampilkan password">
            <i class="bi bi-eye" id="eyeIcon"></i>
          </button>
        </div>
      </div>

      <!-- Submit -->
      <button type="submit" class="btn-login" id="btnLogin">
        <i class="bi bi-box-arrow-in-right"></i>
        Masuk
      </button>
    </form>

    <div class="login-hint">
      <i class="bi bi-info-circle me-1"></i>
      Halaman ini untuk <strong>admin</strong> toko. Pelanggan tidak perlu login untuk berbelanja.
    </div>
  </div>

  <!-- Kembali ke toko -->
  <a href="<?= BASE_URL ?>" class="login-back">
    <i class="bi bi-arrow-left"></i>
    Kembali ke Toko
  </a>

</div>

<script>
function togglePass() {
  const inp = document.getElementById('iPass');
  const ico = document.getElementById('eyeIcon');
  if (inp.type === 'password') {
    inp.type = 'text';
    ico.className = 'bi bi-eye-slash';
    document.getElementById('btnTogglePass').title = 'Sembunyikan password';
  } else {
    inp.type = 'password';
    ico.className = 'bi bi-eye';
    document.getElementById('btnTogglePass').title = 'Tampilkan password';
  }
}

document.getElementById('frmLogin').addEventListener('submit', function(e) {
  const email = document.getElementById('iEmail').value.trim();
  const pass  = document.getElementById('iPass').value;
  if (!email || !pass) { e.preventDefault(); return; }
  const btn = document.getElementById('btnLogin');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> Memverifikasi…';
});
</script>

</body>
</html>
