<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <meta name="description" content="<?=$description;?>">
  <meta name="keywords" content="<?=$keywords;?>">
  <meta name="author" content="Jabar IT Solution">

  <link href="<?= base_url('uploads/'); ?><?= info()['favicon']; ?>" rel="icon">
  <title><?= $title; ?></title>

  <!-- Bootstrap & Icons -->
  <link href="<?= base_url('assets/'); ?>vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="<?= base_url('assets/'); ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

  <!-- Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

  <style>
    :root{
      --glass-bg: rgba(13, 20, 35, 0.55);
      --glass-border: rgba(255, 255, 255, 0.22);
      --accent: #7aa2ff;
      --accent-2:#7c4dff;
      --text:#eef2ff;
      --muted:#c9d1e3;
    }
    html, body { height:100%; }
    body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
      color:var(--text);
      background:
        radial-gradient(1000px 600px at 80% 20%, #0a6cff22 0%, transparent 55%),
        radial-gradient(900px 500px at 10% 80%, #8b5cf61f 0%, transparent 60%),
        linear-gradient(160deg,#0b152b,#1b243d 60%,#1e2a48);
      background-attachment:fixed;
      overflow-x:hidden;
    }
    .scene-bg{
      position:fixed; inset:0; z-index:-1;
      background-image:url('<?= base_url('assets/img/landscape.jpg'); ?>');
      background-size:cover; background-position:center;
      filter:saturate(1.05) contrast(1.02) brightness(.95);
      opacity:.24;
    }
    .navbar-glass{
      background:rgba(12,18,35,.35);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .navbar-glass .nav-link{ color:var(--text)!important; opacity:.9;}
    .navbar-glass .nav-link:hover{ opacity:1;}
    .navbar-brand, .navbar-brand i{ color:var(--text); }

    .auth-wrap{
      min-height:calc(100vh - 64px);
      display:flex; align-items:center; justify-content:center;
      padding:24px;
    }
    .card-glass{
      width:100%; max-width:480px;
      background:var(--glass-bg);
      backdrop-filter:blur(14px) saturate(130%);
      -webkit-backdrop-filter:blur(14px) saturate(130%);
      border:1px solid var(--glass-border);
      border-radius:20px;
      box-shadow:0 20px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
    }
    .card-glass .card-body{ padding:28px; }
    .card-title{ font-weight:700; font-size:28px; letter-spacing:.3px; }
    .subtext{ color:var(--muted); }

    /* Input group modern */
    .form-label{ font-weight:600; }
    .input-group{
      border:1px solid rgba(255,255,255,.25);
      border-radius:12px; overflow:hidden;
      background:rgba(10,16,30,.55);
    }
    .input-group:focus-within{
      border-color:#4e6bff;
      box-shadow:0 0 0 3px rgba(122,162,255,.28);
      background:rgba(12,20,40,.75);
    }
    .input-group-text{
      background:transparent; border:none; color:#a9b4d3;
      display:flex; align-items:center; justify-content:center;
      padding:0 .85rem; min-width:44px;
    }
    .form-control{
      border:none; background:transparent; color:var(--text);
      padding:.8rem .95rem; min-height:44px;
    }
    .form-control::placeholder{ color:#adb7d9; opacity:.85; }

    .btn-accent{
      width:100%;
      border:none;
      border-radius:12px;
      position:relative;
      overflow:hidden;
      background:linear-gradient(135deg,#ff3ea5,#ff178f 55%,#ff5fc0);
      color:#fff;
      font-weight:700;
      letter-spacing:.3px;
      padding:.85rem 1rem;
      box-shadow:0 10px 24px rgba(255, 35, 150, .45), 0 0 18px rgba(255, 100, 190, .35);
      text-shadow:0 0 8px rgba(255,255,255,.45);
      transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
      animation:electricPulse 1.6s ease-in-out infinite;
    }
    .btn-accent::before{
      content:"";
      position:absolute;
      top:-45%;
      left:-120%;
      width:60%;
      height:190%;
      background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.14) 30%,rgba(255,255,255,.85) 50%,rgba(255,255,255,.14) 70%,transparent 100%);
      transform:rotate(12deg);
      animation:electricSweep 2.1s linear infinite;
      pointer-events:none;
    }
    .btn-accent:hover{
      filter:brightness(1.08);
      box-shadow:0 14px 30px rgba(255, 35, 150, .55), 0 0 24px rgba(255, 110, 200, .45);
    }
    .btn-accent:active{ transform:translateY(1px); }
    @keyframes electricPulse{
      0%, 100%{ box-shadow:0 10px 24px rgba(255, 35, 150, .45), 0 0 18px rgba(255, 100, 190, .35); }
      50%{ box-shadow:0 12px 28px rgba(255, 30, 150, .65), 0 0 28px rgba(255, 130, 210, .6); }
    }
    @keyframes electricSweep{
      0%{ left:-120%; }
      100%{ left:140%; }
    }

    .btn-social{
      display:inline-flex; align-items:center; justify-content:center;
      width:46px; height:46px; border-radius:50%;
      border:1px solid rgba(255,255,255,.35); color:#fff; text-decoration:none;
    }
    .btn-social:hover{ background:rgba(255,255,255,.08); }

    .divider{
      width:100%; height:1px;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
      margin:16px 0;
    }

    #version-ruangadmin{ color:#aeb7ce; font-size:12px; }
    @media (max-width:480px){ .card-title{ font-size:24px; } }

    /* =========================
       DEMO ACCOUNTS (AUTOFILL)
       ========================= */
    .demo-box{
      border:1px solid rgba(255,255,255,.18);
      background:rgba(10,16,30,.35);
      border-radius:14px;
      padding:14px;
      margin:14px 0 18px;
    }
    .demo-title{
      font-weight:700;
      font-size:13px;
      letter-spacing:.2px;
      color:rgba(238,242,255,.95);
      text-align:center;
      margin:0 0 10px;
    }
    .demo-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }
    .demo-btn{
      text-align:left;
      width:100%;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.06);
      padding:10px 12px;
      color:var(--text);
      cursor:pointer;
      transition:transform .06s ease, background .2s ease, border-color .2s ease;
      user-select:none;
    }
    .demo-btn:hover{
      background:rgba(255,255,255,.10);
      border-color:rgba(122,162,255,.45);
    }
    .demo-btn:active{ transform:translateY(1px); }
    .demo-role{
      font-weight:800;
      font-size:13px;
      line-height:1.1;
      margin-bottom:2px;
      color:#dfe6ff;
    }
    .demo-email{
      font-size:12px;
      color:rgba(201,209,227,.92);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    @media (max-width:420px){
      .demo-grid{ grid-template-columns:1fr; }
    }

    /* mini toast */
    .mini-toast{
      position:fixed;
      left:50%;
      bottom:22px;
      transform:translateX(-50%);
      background:rgba(10,16,30,.88);
      color:#eaf0ff;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      padding:10px 14px;
      font-size:13px;
      box-shadow:0 10px 26px rgba(0,0,0,.35);
      opacity:0;
      pointer-events:none;
      transition:opacity .2s ease, transform .2s ease;
      z-index:9999;
    }
    .mini-toast.show{
      opacity:1;
      transform:translateX(-50%) translateY(-4px);
    }
  </style>

  <script src="<?= base_url('assets/'); ?>vendor/jquery/jquery.min.js"></script>
</head>
<body>
  <div class="scene-bg"></div>

  <!-- CONTENT -->
  <main class="auth-wrap">
    <div class="container">
      <div class="mx-auto card-glass">
        <div class="card-body">
          <?php
            echo $this->session->flashdata('message');

            if(!empty($list)){
              if ($list->num_rows() > 0){
                $email = $email;
              }else{
                $email = '';
              }
            }else{
              $email = '';
            }
          ?>

          <h1 class="card-title text-center">Sign In</h1>
          <p class="text-center subtext mb-4">Halaman Login Absensi Karyawan</p>

          

          <!-- FORM LOGIN -->
          <form class="user" method="POST" action="<?= base_url(); ?>login/index" novalidate>
            <!-- Email -->
            <div class="mb-3">
              <label for="email_user" class="form-label">Email</label>
              <div class="input-group">
                <span class="input-group-text" aria-hidden="true">
                  <i class="far fa-envelope"></i>
                </span>
                <input
                  type="text"
                  class="form-control"
                  id="email_user"
                  name="email_user"
                  value="<?= $email; ?>"
                  placeholder="you@example.com"
                  inputmode="email"
                  autocomplete="username"
                  required
                >
              </div>
            </div>

            <!-- Password -->
            <div class="mb-2">
              <label for="pass_user" class="form-label">Password</label>
              <div class="input-group">
                <span class="input-group-text" aria-hidden="true">
                  <i class="fas fa-key"></i>
                </span>
                <input
                  type="password"
                  class="form-control"
                  id="pass_user"
                  name="pass_user"
                  placeholder="••••••••"
                  autocomplete="current-password"
                  required
                >
                <button class="input-group-text" type="button" id="togglePassBtn" aria-label="Tampilkan/Sembunyikan Password">
                  <i class="far fa-eye" id="toggleIcon"></i>
                </button>
              </div>
            </div>

            <button type="submit" name="submit" class="btn btn-accent mt-3">Sign In</button>

            <div class="divider"></div>

            <!-- =========================
               DEMO ACCOUNTS (CLICK TO FILL)
               UBAH EMAIL/PASS DEMO DI data-email & data-pass
               ========================= -->
          <!--div class="demo-box" id="demoAccounts">
            <p class="demo-title mb-0">Demo Accounts (click to fill)</p>
            <div class="demo-grid mt-2">
              <button type="button" class="demo-btn" data-email="admin@my.id" data-pass="admin">
                <div class="demo-role">ADMIN</div>
              </button>
              <button type="button" class="demo-btn" data-email="owner@my.id" data-pass="12345">
                <div class="demo-role">OWNER</div>

              </button>
              <button type="button" class="demo-btn" data-email="kasir@my.id" data-pass="12345">
                <div class="demo-role">KASIR</div>

              </button>
              <button type="button" class="demo-btn" data-email="keuangan@my.id" data-pass="12345">
                <div class="demo-role">KEUANGAN</div>

              </button>
              <button type="button" class="demo-btn" data-email="op@my.id" data-pass="12345">
                <div class="demo-role">OPERATOR</div>

              </button>
              <button type="button" class="demo-btn" data-email="desain@my.id" data-pass="12345">
                <div class="demo-role">DESAINER</div>

              </button>
            </div>
          </div-->
          <!-- ========================= END DEMO ACCOUNTS ========================= -->

            <p class="text-center subtext mb-2">Ini merupakan Login untuk Kehadiran Karyawan</p>
            <!--div class="d-flex justify-content-center gap-3 mb-1">
              <a href="#" class="btn-social" aria-label="Sign in with Facebook"><i class="fab fa-facebook-f"></i></a>
              <a href="#" class="btn-social" aria-label="Sign in with Google"><i class="fab fa-google"></i></a>
            </div-->
          </form>

          <p class="text-center mt-3" id="version-ruangadmin"></p>
        </div>
      </div>
    </div>
  </main>

  <!-- mini toast -->
  <div class="mini-toast" id="miniToast">Demo account terisi ✅</div>

  <!-- SCRIPTS -->
  <script src="<?= base_url('assets/'); ?>vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="<?= base_url('assets/'); ?>vendor/jquery-easing/jquery.easing.min.js"></script>
  <script>
    // Toggle show/hide password
    (function(){
      const pass = document.getElementById('pass_user');
      const btn  = document.getElementById('togglePassBtn');
      const icon = document.getElementById('toggleIcon');

      btn.addEventListener('click', function(){
        if(pass.type === 'password'){
          pass.type = 'text';
          icon.classList.replace('fa-eye', 'fa-eye-slash');
        }else{
          pass.type = 'password';
          icon.classList.replace('fa-eye-slash', 'fa-eye');
        }
      });
    })();

    // =========================
    // DEMO AUTOFILL
    // =========================
    (function(){
      const emailEl = document.getElementById('email_user');
      const passEl  = document.getElementById('pass_user');
      const box     = document.getElementById('demoAccounts');
      const toast   = document.getElementById('miniToast');

      function showToast(text){
        if(!toast) return;
        toast.textContent = text || 'Demo account terisi ✅';
        toast.classList.add('show');
        clearTimeout(showToast._t);
        showToast._t = setTimeout(()=>toast.classList.remove('show'), 1400);
      }

      if(!box || !emailEl || !passEl) return;

      box.addEventListener('click', function(e){
        const btn = e.target.closest('.demo-btn');
        if(!btn) return;

        const demoEmail = btn.getAttribute('data-email') || '';
        const demoPass  = btn.getAttribute('data-pass') || '';

        emailEl.value = demoEmail;
        passEl.value  = demoPass;

        // pastikan password kembali aman (hidden) setelah autofill
        if(passEl.type !== 'password'){
          passEl.type = 'password';
          const icon = document.getElementById('toggleIcon');
          if(icon){
            icon.classList.remove('fa-eye-slash');
            icon.classList.add('fa-eye');
          }
        }

        // fokus ke tombol Sign In biar tinggal enter / klik
        const submitBtn = document.querySelector('button[type="submit"][name="submit"]');
        if(submitBtn) submitBtn.focus();

        showToast('Terisi: ' + demoEmail + ' ✅');
      });
    })();

    document.getElementById('version-ruangadmin').textContent = '© Jabar IT Solution';
  </script>
</body>
</html>

