<?php
use App\Core\Flash;
$flashes = Flash::pull();
?>
<!DOCTYPE html>
<html lang="id" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Masuk — <?= e(setting('umum.nama_aplikasi', 'SIPIUTANG')) ?></title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='7' fill='%231f3864'/><text x='16' y='23' font-size='18' font-family='Arial' font-weight='bold' fill='white' text-anchor='middle'>S</text></svg>">
<link href="<?= asset('vendor/bootstrap.min.css') ?>" rel="stylesheet">
<link href="<?= asset('vendor/bootstrap-icons.css') ?>" rel="stylesheet">
<link href="<?= asset('css/app.css') ?>" rel="stylesheet">
</head>
<body class="login-page">

<div class="login-card">
  <div class="login-head">
    <div class="brand-mark">S</div>
    <h1><?= e(setting('umum.nama_aplikasi', 'SIPIUTANG')) ?></h1>
    <p>Sistem Informasi Piutang &amp; Penagihan<br><?= e(setting('umum.nama_perusahaan', '')) ?></p>
  </div>

  <div class="login-body">
    <?php foreach ($flashes as $f): ?>
      <div class="alert alert-<?= e($f['type']) ?> py-2 small mb-3"><?= e($f['message']) ?></div>
    <?php endforeach; ?>

    <form method="post" action="<?= url('/masuk') ?>" autocomplete="on" data-loading>
      <?= csrf() ?>
      <div class="mb-3">
        <label class="form-label" for="username">Nama Pengguna</label>
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-person"></i></span>
          <input type="text" class="form-control" id="username" name="username" required autofocus
                 autocomplete="username" placeholder="Masukkan nama pengguna">
        </div>
      </div>
      <div class="mb-3">
        <label class="form-label" for="password">Kata Sandi</label>
        <div class="input-group">
          <span class="input-group-text"><i class="bi bi-lock"></i></span>
          <input type="password" class="form-control" id="password" name="password" required
                 autocomplete="current-password" placeholder="Masukkan kata sandi">
          <button class="btn btn-outline-secondary" type="button" id="lihatSandi" aria-label="Tampilkan kata sandi">
            <i class="bi bi-eye"></i>
          </button>
        </div>
      </div>
      <button class="btn btn-primary w-100 py-2" type="submit">
        <i class="bi bi-box-arrow-in-right me-1"></i> Masuk
      </button>
    </form>

    <?php if (!empty($tampilkan_demo)): ?>
      <div class="mt-3">
        <button class="btn btn-sm btn-link p-0 text-decoration-none" type="button"
                data-bs-toggle="collapse" data-bs-target="#akunDemo">
          <i class="bi bi-info-circle me-1"></i>Lihat akun demo
        </button>
        <div class="collapse mt-2" id="akunDemo">
          <div class="alert alert-warning py-2 px-3 demo-accounts mb-0">
            <strong>Akun demo (wajib ganti kata sandi saat pertama masuk):</strong>
            <table class="table table-sm mb-1 mt-2" style="font-size:11.5px">
              <?php
              $sandi = ['superadmin' => 'Admin#2026', 'finance' => 'Finance#2026', 'collection' => 'Collect#2026',
                        'sales' => 'Sales#2026', 'manajemen' => 'Manage#2026', 'auditor' => 'Audit#2026'];
              foreach ($demo as $d): ?>
                <tr>
                  <td class="p-1"><code><?= e($d['username']) ?></code></td>
                  <td class="p-1"><code><?= e($sandi[$d['username']] ?? '—') ?></code></td>
                  <td class="p-1 text-muted"><?= e($d['role_name']) ?></td>
                </tr>
              <?php endforeach; ?>
            </table>
            <span class="text-danger">Hapus atau ganti kata sandi seluruh akun demo sebelum dipakai di lingkungan produksi.</span>
          </div>
        </div>
      </div>
    <?php endif; ?>
  </div>

  <div class="login-foot">
    &copy; <?= date('Y') ?> <?= e(setting('umum.nama_perusahaan', '')) ?> &middot; SIPIUTANG v<?= e($app_version ?? '1.0.0') ?>
  </div>
</div>

<script src="<?= asset('vendor/bootstrap.bundle.min.js') ?>"></script>
<script src="<?= asset('js/app.js') ?>"></script>
<script>
document.getElementById('lihatSandi').addEventListener('click', function () {
  var i = document.getElementById('password');
  var on = i.type === 'password';
  i.type = on ? 'text' : 'password';
  this.querySelector('i').className = on ? 'bi bi-eye-slash' : 'bi bi-eye';
});
</script>
</body>
</html>
