<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="app-url" content="<?= APP_URL ?>">
  <title>Login — SINERGI</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="<?= asset('css/app.css') ?>">
</head>
<body>
<?php if (session_status()===PHP_SESSION_NONE){session_start();} ?>

<div class="login-page">
  <!-- LEFT PANEL -->
  <div class="login-left">
    <div class="login-logo">SINER<span>GI</span></div>
    <div class="login-tagline">
      Sistem Informasi Geografis Penanganan Kemiskinan<br>
      Berbasis Kolaborasi Rumah Ibadah, Masyarakat,<br>
      dan Pemerintah Kota Pontianak
    </div>

    <div style="margin-top:48px;display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:380px;width:100%">
      <?php $items = [
        ['🗺','Peta GIS Real-time'],['⛪','Kolaborasi Rumah Ibadah'],
        ['📊','Dashboard Monitoring'],['⚡','Deteksi Blind Spot'],
      ]; foreach ($items as [$icon,$label]): ?>
      <div style="background:rgba(255,255,255,0.08);border-radius:10px;padding:14px;display:flex;gap:10px;align-items:center;">
        <span style="font-size:1.4rem"><?= $icon ?></span>
        <span style="font-size:0.8rem;color:rgba(255,255,255,0.8);font-weight:500"><?= $label ?></span>
      </div>
      <?php endforeach; ?>
    </div>

    <div style="margin-top:48px;text-align:center">
      <a href="<?= APP_URL ?>/" style="color:rgba(255,255,255,0.5);font-size:0.82rem">← Kembali ke Halaman Publik</a>
    </div>
  </div>

  <!-- RIGHT PANEL (Form) -->
  <div class="login-right">
    <div style="margin-bottom:32px;">
      <div style="font-size:2rem;font-weight:900;color:var(--clr-primary);">SINER<span style="color:var(--clr-accent)">GI</span></div>
    </div>

    <div class="login-form-title">Selamat Datang</div>
    <div class="login-form-sub">Masuk ke sistem untuk melanjutkan</div>

    <?= flashMessage() ?>

    <form method="POST" action="<?= APP_URL ?>/login">
      <?= csrfField() ?>

      <div class="form-group">
        <label class="form-label" for="username">Username / Email <span class="required">*</span></label>
        <input type="text" id="username" name="username" class="form-control"
               placeholder="Masukkan username atau email" required autofocus
               value="<?= e($_POST['username'] ?? '') ?>">
      </div>

      <div class="form-group">
        <label class="form-label" for="password">Password <span class="required">*</span></label>
        <div style="position:relative">
          <input type="password" id="password" name="password" class="form-control"
                 placeholder="Masukkan password" required style="padding-right:44px">
          <button type="button" onclick="togglePwd()" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;color:var(--clr-text-muted);font-size:1rem;" id="pwd-toggle">👁</button>
        </div>
      </div>

      <button type="submit" class="btn btn-primary w-full" style="margin-top:8px;padding:12px;font-size:1rem;justify-content:center;">
        Masuk ke Sistem
      </button>
    </form>

    <div style="margin-top:20px;text-align:center">
      <a href="<?= APP_URL ?>/" style="font-size:0.82rem;color:var(--clr-text-muted)">← Kembali ke Beranda</a>
    </div>
  </div>
</div>

<script>
function togglePwd() {
  const i = document.getElementById('password');
  const b = document.getElementById('pwd-toggle');
  i.type = i.type === 'password' ? 'text' : 'password';
  b.textContent = i.type === 'password' ? '👁' : '🙈';
}
function fillLogin(u, p) {
  document.getElementById('username').value = u;
  document.getElementById('password').value = p;
}
</script>
<script src="<?= asset('js/app.js') ?>"></script>
</body>
</html>
