<?= $this->extend('layouts/auth') ?>
<?= $this->section('content') ?>

<div class="auth-card">
  <div class="auth-logo">
    <img src="<?= base_url('assets/img/logo.gif') ?>" alt="Logo STT El-Shadday">
    <h5>STT El-Shadday</h5>
    <p class="text-muted small mb-0">Repositori Digital Akademik</p>
  </div>

  <?php if (session()->has('error')): ?>
    <div class="alert alert-danger small py-2 mb-3">
      <i class="bi bi-exclamation-circle me-1"></i><?= esc(session('error')) ?>
    </div>
  <?php endif; ?>
  <?php if (session()->has('success')): ?>
    <div class="alert alert-success small py-2 mb-3">
      <i class="bi bi-check-circle me-1"></i><?= esc(session('success')) ?>
    </div>
  <?php endif; ?>

  <form action="<?= base_url('login') ?>" method="post" autocomplete="on">
    <?= csrf_field() ?>

    <div class="mb-3">
      <label class="form-label small fw-semibold">Email / NIM / NIDN</label>
      <div class="input-group">
        <span class="input-group-text bg-white"><i class="bi bi-person text-muted"></i></span>
        <input type="text" name="identity" class="form-control"
               placeholder="Email, NIM, atau NIDN"
               value="<?= old('identity') ?>"
               required autofocus autocomplete="username">
      </div>
    </div>

    <div class="mb-4">
      <label class="form-label small fw-semibold">Kata Sandi</label>
      <div class="input-group">
        <span class="input-group-text bg-white"><i class="bi bi-lock text-muted"></i></span>
        <input type="password" name="password" id="passwordInput"
               class="form-control" placeholder="Kata sandi"
               required autocomplete="current-password">
        <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()" tabindex="-1">
          <i class="bi bi-eye" id="eyeIcon"></i>
        </button>
      </div>
      <div class="text-end mt-1">
        <a href="<?= base_url('magic-link') ?>" class="small text-muted">Lupa kata sandi?</a>
      </div>
    </div>

    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="remember" id="rememberMe">
        <label class="form-check-label small" for="rememberMe">Ingat saya selama 30 hari</label>
      </div>
    </div>

    <button type="submit" class="btn btn-primary w-100 py-2 fw-semibold">
      <i class="bi bi-box-arrow-in-right me-2"></i>Masuk
    </button>
  </form>

  <hr class="my-3">
  <p class="text-center small text-muted mb-0">
    Belum punya akun? Hubungi administrator.
  </p>
</div>

<script>
function togglePassword() {
  const input = document.getElementById('passwordInput');
  const icon  = document.getElementById('eyeIcon');
  if (input.type === 'password') {
    input.type = 'text';
    icon.className = 'bi bi-eye-slash';
  } else {
    input.type = 'password';
    icon.className = 'bi bi-eye';
  }
}
</script>

<?= $this->endSection() ?>
