<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login — Struk App</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      background: linear-gradient(135deg, #1565C0 0%, #1976D2 55%, #42A5F5 100%);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Segoe UI', system-ui, sans-serif;
      padding: 20px;
    }
    .wrap { width: 100%; max-width: 380px; }

    .logo { text-align: center; margin-bottom: 28px; }
    .logo .icon { font-size: 54px; display: block; margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.2)); }
    .logo h1   { color: #fff; font-size: 26px; font-weight: 800; letter-spacing: .3px; }
    .logo p    { color: rgba(255,255,255,.72); font-size: 13px; margin-top: 5px; }

    .card {
      background: #fff;
      border-radius: 16px;
      padding: 32px 28px;
      box-shadow: 0 20px 60px rgba(0,0,0,.22);
    }
    .alert-error {
      background: #FFEBEE; color: #B71C1C;
      border-left: 4px solid #f44336;
      border-radius: 8px; padding: 10px 14px;
      font-size: 13px; margin-bottom: 18px;
    }
    .demo-hint {
      background: #E3F2FD; border-radius: 8px;
      padding: 10px 13px; font-size: 12px;
      color: #1565C0; margin-bottom: 18px; line-height: 1.7;
    }
    .form-group { margin-bottom: 16px; }
    .form-group label {
      display: block; font-weight: 700; font-size: 11px;
      color: #555; text-transform: uppercase; letter-spacing: .5px;
      margin-bottom: 6px;
    }
    .input-wrap { position: relative; }
    .input-icon {
      position: absolute; left: 12px; top: 50%;
      transform: translateY(-50%); font-size: 15px; pointer-events: none;
    }
    .form-control {
      width: 100%; padding: 11px 12px 11px 38px;
      border: 1.5px solid #E0E0E0; border-radius: 8px;
      font-size: 14px; background: #FAFAFA;
      transition: border .15s, box-shadow .15s;
    }
    .form-control:focus {
      outline: none; border-color: #1976D2; background: #fff;
      box-shadow: 0 0 0 3px rgba(25,118,210,.12);
    }
    .pw-toggle {
      position: absolute; right: 11px; top: 50%;
      transform: translateY(-50%); cursor: pointer;
      font-size: 15px; color: #aaa; user-select: none;
    }
    .pw-toggle:hover { color: #1976D2; }
    .btn-submit {
      width: 100%; padding: 13px;
      background: #1976D2; color: #fff;
      border: none; border-radius: 8px;
      font-size: 15px; font-weight: 700;
      cursor: pointer; letter-spacing: .3px;
      transition: background .15s, transform .1s, box-shadow .15s;
      margin-top: 4px;
    }
    .btn-submit:hover {
      background: #1565C0;
      transform: translateY(-1px);
      box-shadow: 0 4px 14px rgba(25,118,210,.35);
    }
    .btn-submit:active { transform: translateY(0); }
    .footer { text-align:center; margin-top:22px; color:rgba(255,255,255,.6); font-size:12px; }
  </style>
</head>
<body>
<div class="wrap">

  <div class="logo">
    <span class="icon">🧾</span>
    <h1>Struk App</h1>
    <p>Aplikasi Pencetak Struk</p>
  </div>

  <div class="card">

    <?php if ($this->session->flashdata('error')): ?>
      <div class="alert-error">
        <?= htmlspecialchars($this->session->flashdata('error')) ?>
      </div>
    <?php endif; ?>

   

    <form action="<?= base_url('auth/login') ?>" method="POST">

      <?php
      // CSRF token CI3 — ditambahkan jika csrf_protection aktif di config.php
      // Jika tidak aktif, $csrf_name/$csrf_hash akan return FALSE/empty — aman diabaikan
      $csrf_name = $this->security->get_csrf_token_name();
      $csrf_hash = $this->security->get_csrf_hash();
      if ($csrf_name && $csrf_hash):
      ?>
        <input type="hidden"
               name="<?= htmlspecialchars($csrf_name) ?>"
               value="<?= htmlspecialchars($csrf_hash) ?>">
      <?php endif; ?>

      <div class="form-group">
        <label>Username</label>
        <div class="input-wrap">
          <span class="input-icon">👤</span>
          <input type="text"
                 name="username"
                 class="form-control"
                 placeholder="Masukkan username"
                 value="<?= htmlspecialchars($this->input->post('username') ?? '') ?>"
                 required
                 autofocus
                 autocomplete="username">
        </div>
      </div>

      <div class="form-group">
        <label>Password</label>
        <div class="input-wrap">
          <span class="input-icon">🔒</span>
          <input type="password"
                 name="password"
                 id="pwInp"
                 class="form-control"
                 placeholder="Masukkan password"
                 required
                 autocomplete="current-password">
          <span class="pw-toggle" onclick="togglePw()">👁</span>
        </div>
      </div>

      <button type="submit" class="btn-submit">Masuk →</button>
    </form>

  </div>

  <div class="footer">Struk App &nbsp;·&nbsp; nvms</div>
</div>

<script>
function togglePw() {
  var f = document.getElementById('pwInp');
  f.type = f.type === 'password' ? 'text' : 'password';
}
</script>
</body>
</html>
