<?php
$csrf_name  = csrf_token();
$csrf_hash  = csrf_hash();

// fallback error dari flashdata (kalau controller pakai), optional
$err = session()->getFlashdata('msg');
?>
<?= view('customer/menu', ['func' => $func, 'db' => $db]) ?>

<style>
:root{
  --pm-accent:#ff2264;
  --pm-bgCard:rgba(15,18,24,.55);
  --pm-border:rgba(255,255,255,.10);
  --pm-text:rgba(255,255,255,.92);
  --pm-muted:rgba(255,255,255,.70);
  --pm-field:rgba(0,0,0,.18);
  --pm-shadow:0 18px 60px rgba(0,0,0,.35);
}
body.light, body[data-theme="light"], body.theme-light{
  --pm-bgCard:rgba(255,255,255,.70);
  --pm-border:rgba(0,0,0,.10);
  --pm-text:rgba(10,12,16,.92);
  --pm-muted:rgba(10,12,16,.68);
  --pm-field:rgba(255,255,255,.75);
  --pm-shadow:0 18px 60px rgba(0,0,0,.12);
}

.pm-auth-wrap{min-height:58vh;display:flex;align-items:center;justify-content:center;padding:28px 16px;}
.pm-auth-card{width:min(520px,100%);background:var(--pm-bgCard);border:1px solid var(--pm-border);border-radius:18px;box-shadow:var(--pm-shadow);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;}
.pm-auth-head{display:flex;gap:14px;align-items:center;padding:18px 18px 10px;}
.pm-auth-badge{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,34,100,.14);border:1px solid rgba(255,34,100,.30);color:var(--pm-accent);font-weight:800;}
.pm-auth-title{margin:0;font-size:20px;line-height:1.2;color:var(--pm-text);font-weight:800;}
.pm-auth-sub{margin:4px 0 0;color:var(--pm-muted);font-size:13px;}

.pm-auth-body{padding:10px 18px 18px;}
.pm-alert{border-radius:12px;padding:10px 12px;margin:0 0 12px;border:1px solid rgba(255,34,100,.25);background:rgba(255,34,100,.10);color:var(--pm-text);font-size:13px;display:none;}
.pm-alert.show{display:block;}

.pm-field{margin:10px 0 12px;}
.pm-label{display:block;font-size:12px;color:var(--pm-muted);margin-bottom:6px;}
.pm-input{width:100%;border-radius:14px;border:1px solid var(--pm-border);background:var(--pm-field);color:var(--pm-text);padding:12px 14px;outline:none;transition:border-color .15s,box-shadow .15s;}
.pm-input:focus{border-color:rgba(255,34,100,.55);box-shadow:0 0 0 3px rgba(255,34,100,.18);}

.pm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 14px;}
.pm-check{display:flex;align-items:center;gap:8px;color:var(--pm-muted);font-size:13px;}
.pm-link{color:var(--pm-accent);text-decoration:none;font-size:13px;}
.pm-link:hover{text-decoration:underline;}

.pm-actions{display:flex;gap:10px;align-items:center;margin-top:6px;}
.pm-btn{border:0;border-radius:14px;padding:12px 14px;cursor:pointer;font-weight:800;transition:transform .08s,filter .15s;user-select:none;}
.pm-btn:active{transform:translateY(1px);}
.pm-btn[disabled]{opacity:.7;cursor:not-allowed;}

.pm-btn-ghost{background:rgba(255,255,255,.08);color:var(--pm-text);border:1px solid var(--pm-border);}
body.light .pm-btn-ghost, body[data-theme="light"] .pm-btn-ghost, body.theme-light .pm-btn-ghost{background:rgba(0,0,0,.04);}
.pm-btn-primary{flex:1;background:var(--pm-accent);color:#fff;box-shadow:0 10px 30px rgba(255,34,100,.22);}

.pm-foot{padding:0 18px 18px;color:var(--pm-muted);font-size:13px;}
</style>

<div class="pm-auth-wrap">
  <div class="pm-auth-card">
    <div class="pm-auth-head">
      <div class="pm-auth-badge">PM</div>
      <div>
        <h1 class="pm-auth-title">Masuk</h1>
        <p class="pm-auth-sub">Login untuk akses transaksi dan menu admin.</p>
      </div>
    </div>

    <div class="pm-auth-body">
      <div id="pmAlert" class="pm-alert<?= !empty($err) ? ' show' : '' ?>">
        <?= !empty($err) ? htmlspecialchars($err, ENT_QUOTES, 'UTF-8') : '' ?>
      </div>

      <form id="signinForm" method="post" action="<?= site_url('home/signin'); ?>" autocomplete="on">
        <input type="hidden" name="<?= $csrf_name; ?>" value="<?= $csrf_hash; ?>">

        <div class="pm-field">
          <label class="pm-label">Email / Username / No HP</label>
          <input class="pm-input" type="text" name="email" required>
        </div>

        <div class="pm-field">
          <label class="pm-label">Password</label>
          <input class="pm-input" type="password" name="pass" required>
        </div>

        <div class="pm-row">
          <label class="pm-check">
            <input type="checkbox" name="remember" value="1">
            Ingat saya
          </label>
          <a class="pm-link" href="<?= site_url('home/signin/pwreset'); ?>">Lupa password?</a>
        </div>

        <div class="pm-actions">
          <a class="pm-btn pm-btn-ghost" href="<?= site_url(); ?>" style="text-decoration:none;display:inline-flex;align-items:center;justify-content:center;">
            Kembali
          </a>
          <button id="btnLogin" class="pm-btn pm-btn-primary" type="submit">Login</button>
        </div>
      </form>
    </div>

    <div class="pm-foot">
      Belum punya akun?
      <a class="pm-link" href="<?= site_url('home/signup'); ?>">Daftar dulu</a>
    </div>
  </div>
</div>

<script>
(function(){
  const form = document.getElementById('signinForm');
  const btn  = document.getElementById('btnLogin');
  const alertBox = document.getElementById('pmAlert');

  function showErr(msg){
    alertBox.textContent = msg || 'Login gagal. Coba lagi.';
    alertBox.classList.add('show');
  }

  form.addEventListener('submit', async function(e){
    e.preventDefault();
    alertBox.classList.remove('show');

    const fd = new FormData(form);

    btn.disabled = true;
    const oldText = btn.textContent;
    btn.textContent = 'Memproses...';

    try{
      const res = await fetch(form.action, {
        method: 'POST',
        body: fd,
        headers: { 'X-Requested-With': 'XMLHttpRequest' } // biar controller tetap mode JSON (AJAX)
      });

      const text = await res.text();

      // coba parse JSON (karena controller Anda mengembalikan JSON)
      let data = null;
      try { data = JSON.parse(text); } catch(_){}

      if (data && (data.success === true || data.success === 'true')) {
        const go = data.redirect ? String(data.redirect).replace(/\\\//g,'/') : '<?= site_url(); ?>';
        window.location.href = go;
        return;
      }

      // jika JSON tapi error
      if (data && (data.success === false || data.success === 'false')) {
        showErr(data.message || data.msg || 'Email/Password salah atau akun tidak aktif.');
        return;
      }

      // kalau bukan JSON (misal controller kirim HTML), fallback: tampilkan potongan atau redirect manual
      showErr('Respon server tidak sesuai (bukan JSON). Pastikan endpoint home/signin adalah login AJAX.');
      // console.log(text);

    } catch (err){
      showErr('Server tidak merespons. Coba lagi.');
    } finally{
      btn.disabled = false;
      btn.textContent = oldText;
    }
  });
})();
</script>
