<?php
if ($_SERVER['REQUEST_METHOD']==='POST') {
    $user = trim($_POST['username']??'');
    $pass = $_POST['password']??'';
    $stmt = $pdo->prepare("SELECT * FROM admin WHERE username=? LIMIT 1");
    $stmt->execute([$user]);
    $admin = $stmt->fetch();
    if ($admin && password_verify($pass, $admin['password'])) {
        $_SESSION['admin_id']   = $admin['id'];
        $_SESSION['admin_nama'] = $admin['nama_lengkap'];
        $_SESSION['admin_role'] = $admin['role'];
        $pdo->prepare("UPDATE admin SET last_login=NOW() WHERE id=?")->execute([$admin['id']]);
        redirect('index.php?page=dashboard');
    }
    $err = 'Username atau password salah!';
}

// ── Ambil data pengaturan sekolah ──
$setting = [];
try {
    $rows = $pdo->query("SELECT kunci, nilai FROM pengaturan")->fetchAll();
    foreach ($rows as $r) $setting[$r['kunci']] = $r['nilai'];
} catch(Exception $e) {}

$namaSekolah  = $setting['nama_sekolah']  ?? 'SPP Sekolah';
$alamatSekolah= $setting['alamat_sekolah']?? '';
$logoFile     = $setting['logo_sekolah']  ?? '';
$rootDir      = str_replace('\\','/',dirname(__DIR__));
$logoAbs      = $rootDir . '/uploads/logo/' . $logoFile;
$logoUrl      = 'uploads/logo/' . $logoFile;
$hasLogo      = $logoFile && file_exists($logoAbs);
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Login – <?= e($namaSekolah) ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700;9..144,800&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'DM Sans', sans-serif;
  min-height: 100vh;
  display: flex;
  background: #F4F6FB;
  overflow: hidden;
}

/* ══════════════════
   LEFT PANEL
══════════════════ */
.login-left {
  flex: 1;
  background: linear-gradient(145deg, #1E2D4E 0%, #243660 40%, #2E4478 70%, #3A5299 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 40px;
  position: relative; overflow: hidden;
}

/* decorative blobs */
.login-left::before {
  content: '';
  position: absolute; top: -80px; right: -60px;
  width: 260px; height: 260px; border-radius: 50%;
  background: rgba(79,110,247,.18);
}
.login-left::after {
  content: '';
  position: absolute; bottom: -60px; left: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: rgba(99,179,237,.14);
}
.blob-mid {
  position: absolute; top: 50%; left: 25%;
  width: 140px; height: 140px; border-radius: 50%;
  background: rgba(129,140,248,.10);
}

.left-content { position: relative; z-index: 1; text-align: center; max-width: 320px; }

/* ── Logo box ── */
.school-logo-wrap {
  margin-bottom: 24px;
  animation: floatLogo 3.5s ease-in-out infinite;
}
@keyframes floatLogo {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Jika ada gambar logo */
.school-logo-img {
  width: 110px; height: 110px;
  border-radius: 24px;
  object-fit: contain;
  background: rgba(255,255,255,.12);
  padding: 10px;
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: block; margin: 0 auto;
}

/* Fallback jika belum ada logo */
.school-logo-fallback {
  width: 110px; height: 110px;
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 56px;
  margin: 0 auto;
}

.school-name {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 800; color: #fff;
  line-height: 1.25; margin-bottom: 8px;
  letter-spacing: -.2px;
}
.school-addr {
  font-size: 12.5px; color: rgba(255,255,255,.5);
  line-height: 1.5; max-width: 240px; margin: 0 auto 28px;
}

.feature-pills {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
}
.feature-pill {
  display: flex; align-items: center; gap: 11px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 99px; padding: 9px 18px;
  font-size: 13px; color: rgba(255,255,255,.82); font-weight: 500;
  transition: background .2s;
}
.feature-pill:hover { background: rgba(255,255,255,.14); }
.fp-icon {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}

/* ══════════════════
   RIGHT PANEL
══════════════════ */
.login-right {
  width: 440px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 48px;
  background: #fff;
  box-shadow: -4px 0 32px rgba(30,45,78,.10);
}

.login-form-wrap { width: 100%; animation: slideIn .4s ease both; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Form header ── */
.form-header { text-align: center; margin-bottom: 32px; }

/* Logo kecil di form (mirror dari kiri) */
.form-logo-mini {
  width: 64px; height: 64px; border-radius: 18px;
  margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1E2D4E, #4F6EF7);
  box-shadow: 0 6px 20px rgba(79,110,247,.30);
  overflow: hidden;
}
.form-logo-mini img {
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
}
.form-logo-mini-fallback { font-size: 30px; }

.form-title {
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 700;
  color: #1A2035; margin-bottom: 4px; letter-spacing: -.2px;
}
.form-sub { font-size: 13px; color: #7A8BAA; }

/* ── Error ── */
.err-box {
  background: #FFF5F5; color: #C53030;
  border: 1.5px solid #FED7D7;
  border-radius: 10px;
  padding: 11px 15px; margin-bottom: 20px;
  font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}

/* ── Fields ── */
.field-wrap { margin-bottom: 18px; }
.field-label {
  display: block; font-size: 11px; font-weight: 600;
  color: #7A8BAA; margin-bottom: 6px;
  text-transform: uppercase; letter-spacing: .7px;
}
.field-input-wrap { position: relative; }
.field-icon {
  position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); font-size: 16px; pointer-events: none;
}
.field-input {
  width: 100%; padding: 11px 15px 11px 42px;
  border: 1.5px solid #E2E8F4;
  border-radius: 10px;
  font-size: 14px; font-family: 'DM Sans', sans-serif;
  background: #F7F9FF; color: #1A2035;
  outline: none; transition: all .2s;
}
.field-input:focus {
  border-color: #4F6EF7; background: #fff;
  box-shadow: 0 0 0 3px rgba(79,110,247,.12);
}
.field-input::placeholder { color: #B0BFDA; }

/* ── Submit ── */
.btn-login {
  width: 100%; padding: 13px;
  background: linear-gradient(135deg, #2E4478, #4F6EF7);
  color: #fff; border: none; border-radius: 10px;
  font-size: 14.5px; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 4px 16px rgba(79,110,247,.35);
  margin-top: 6px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: .1px;
}
.btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,110,247,.45); }
.btn-login:active { transform: translateY(0); }
.btn-login svg { width: 16px; height: 16px; }

.login-hint {
  text-align: center; font-size: 12px;
  color: #B0BFDA; margin-top: 20px;
}
.login-hint strong { color: #7A8BAA; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .login-left  { display: none; }
  .login-right { width: 100%; box-shadow: none; }
}
</style>
</head>
<body>

<!-- ═══ LEFT PANEL ═══ -->
<div class="login-left">
  <div class="blob-mid"></div>
  <div class="left-content">

    <!-- Logo Sekolah -->
    <div class="school-logo-wrap">
      <?php if($hasLogo): ?>
        <img src="<?= e($logoUrl) ?>" alt="Logo <?= e($namaSekolah) ?>" class="school-logo-img"
             onerror="this.style.display='none';document.getElementById('logoFallback').style.display='flex'">
        <div id="logoFallback" class="school-logo-fallback" style="display:none">🏫</div>
      <?php else: ?>
        <div class="school-logo-fallback" id="logoFallback">🏫</div>
      <?php endif ?>
    </div>

    <!-- Nama & Alamat Sekolah -->
    <div class="school-name"><?= e($namaSekolah) ?></div>
    <?php if($alamatSekolah): ?>
    <div class="school-addr"><?= e($alamatSekolah) ?></div>
    <?php endif ?>

    <!-- Feature pills -->
    <div class="feature-pills">
      <div class="feature-pill">
        <div class="fp-icon">📊</div> Dashboard real-time
      </div>
      <div class="feature-pill">
        <div class="fp-icon">💳</div> Multi metode pembayaran
      </div>
      <div class="feature-pill">
        <div class="fp-icon">📋</div> Laporan lengkap
      </div>
    </div>
  </div>
</div>

<!-- ═══ RIGHT PANEL ═══ -->
<div class="login-right">
  <div class="login-form-wrap">

    <!-- Mini logo + judul form -->
    <div class="form-header">
      <div class="form-logo-mini">
        <?php if($hasLogo): ?>
          <img src="<?= e($logoUrl) ?>" alt="logo">
        <?php else: ?>
          <span class="form-logo-mini-fallback">🔐</span>
        <?php endif ?>
      </div>
      <div class="form-title">Masuk ke Sistem</div>
      <div class="form-sub">Silakan masukkan kredensial Anda</div>
    </div>

    <?php if(!empty($err)): ?>
    <div class="err-box">
      <svg viewBox="0 0 20 20" fill="currentColor" style="width:16px;height:16px;flex-shrink:0"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
      <?= e($err) ?>
    </div>
    <?php endif ?>

    <form method="POST">
      <div class="field-wrap">
        <label class="field-label">Username</label>
        <div class="field-input-wrap">
          <span class="field-icon">👤</span>
          <input class="field-input" type="text" name="username"
                 placeholder="Masukkan username" required autofocus
                 value="<?= e($_POST['username']??'') ?>">
        </div>
      </div>

      <div class="field-wrap">
        <label class="field-label">Password</label>
        <div class="field-input-wrap">
          <span class="field-icon">🔒</span>
          <input class="field-input" type="password" name="password"
                 placeholder="Masukkan password" required>
        </div>
      </div>

      <button class="btn-login" type="submit">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
          <polyline points="10 17 15 12 10 7"/>
          <line x1="15" y1="12" x2="3" y2="12"/>
        </svg>
        Masuk Sekarang
      </button>
    </form>

    <p class="login-hint">
      Hubungi administrator jika lupa password
    </p>
  </div>
</div>

</body>
</html>