<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In – <?= e(setting('shop_name','MJPOS')) ?></title>
<?php $favicon = setting('site_icon',''); ?>
<?php if($favicon): ?>
<link rel="icon" type="image/png" href="<?= UPLOAD_URL ?>/<?= e($favicon) ?>">
<?php else: ?>
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='6' fill='%230f172a'/><text x='16' y='22' text-anchor='middle' font-size='18' font-family='Arial' font-weight='bold' fill='%233b82f6'>M</text></svg>">
<?php endif; ?>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<style>
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
       background:#0f172a;overflow-x:hidden}

  .split-wrap{display:flex;min-height:100vh}

  /* ── Left: Brand panel ─────────────────────────────────── */
  .brand-panel{
    flex:1.1;
    <?php $loginBg = setting('login_bg_image',''); ?>
    <?php if ($loginBg): ?>
    background-image:
      linear-gradient(135deg, rgba(15,23,42,.88) 0%, rgba(30,58,95,.82) 45%, rgba(8,145,178,.80) 100%),
      url('<?= UPLOAD_URL ?>/<?= e($loginBg) ?>');
    background-size: cover;
    background-position: center;
    <?php else: ?>
    background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 45%,#0891b2 100%);
    <?php endif; ?>
    color:#fff;display:flex;flex-direction:column;justify-content:center;
    padding:60px 70px;position:relative;overflow:hidden;
  }
  .brand-panel::before{
    content:'';position:absolute;top:-80px;right:-80px;width:320px;height:320px;
    background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);
    border-radius:50%;
  }
  .brand-panel::after{
    content:'';position:absolute;bottom:-100px;left:-60px;width:280px;height:280px;
    background:radial-gradient(circle,rgba(34,211,238,.12),transparent 70%);
    border-radius:50%;
  }
  .brand-logo{
    width:64px;height:64px;background:rgba(255,255,255,.12);border-radius:16px;
    display:flex;align-items:center;justify-content:center;font-size:28px;
    margin-bottom:28px;backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.15);
    position:relative;z-index:2;
  }
  .brand-panel h1{font-size:2.1rem;font-weight:800;margin-bottom:14px;position:relative;z-index:2}
  .brand-panel p.lead{font-size:1.02rem;opacity:.78;max-width:420px;line-height:1.6;position:relative;z-index:2}
  .feature-list{margin-top:42px;position:relative;z-index:2}
  .feature-item{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
  .feature-icon{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
  .feature-item .ft-title{font-weight:700;font-size:.9rem;margin-bottom:2px}
  .feature-item .ft-sub{font-size:.78rem;opacity:.65}

  /* ── Right: Login form panel ───────────────────────────── */
  .form-panel{
    flex:1;background:#fff;display:flex;align-items:center;justify-content:center;
    padding:40px 30px;
  }
  .login-box{width:100%;max-width:380px}
  .login-box h3{font-weight:800;color:#0f172a;margin-bottom:4px}
  .login-box .sub{color:#94a3b8;font-size:.88rem;margin-bottom:28px}

  .form-label-modern{font-size:.8rem;font-weight:700;color:#334155;margin-bottom:6px;display:block}
  .input-modern{
    border:1.5px solid #e2e8f0;border-radius:10px;padding:11px 14px;font-size:.92rem;
    width:100%;transition:border-color .15s,box-shadow .15s;background:#f8fafc;
  }
  .input-modern:focus{outline:none;border-color:#0891b2;box-shadow:0 0 0 3px rgba(8,145,178,.12);background:#fff}
  .input-group-modern{position:relative}
  .input-group-modern i.input-leading{
    position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#94a3b8;font-size:.95rem;z-index:2
  }
  .input-group-modern .input-modern{padding-left:40px}
  .toggle-pwd{
    position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;
    border:none;color:#94a3b8;cursor:pointer;padding:4px;z-index:2
  }
  .toggle-pwd:hover{color:#475569}

  .btn-login{
    background:linear-gradient(135deg,#0e7490,#0891b2);border:none;border-radius:10px;
    padding:12px;font-weight:700;font-size:.95rem;color:#fff;width:100%;
    transition:transform .12s,box-shadow .15s;
  }
  .btn-login:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(8,145,178,.35);color:#fff}
  .btn-login:active{transform:translateY(0)}

  .forgot-link{font-size:.78rem;color:#0891b2;text-decoration:none;font-weight:600}
  .forgot-link:hover{text-decoration:underline}

  .divider-text{display:flex;align-items:center;gap:10px;margin:24px 0;color:#cbd5e1;font-size:.75rem;justify-content:center}
  .divider-text::before,.divider-text::after{content:'';flex:1;height:1px;background:#e2e8f0;max-width:60px}

  .footer-note{text-align:center;color:#94a3b8;font-size:.75rem;margin-top:8px}

  @media (max-width:900px){
    .brand-panel{display:none}
    .form-panel{flex:1;padding:30px 20px}
  }
</style>
</head>
<body>

<div class="split-wrap">

  <!-- ── LEFT: Brand / marketing panel ───────────────────── -->
  <div class="brand-panel">
    <div class="brand-logo"><i class="bi bi-shop"></i></div>
    <h1><?= e(setting('shop_name','MJPOS')) ?></h1>
    <p class="lead">
      <?= e(setting('shop_tagline',
        'Complete point-of-sale, inventory and finance management — built for Sri Lankan retail, gym, and service businesses.'
      )) ?>
    </p>

    <div class="feature-list">
      <div class="feature-item">
        <div class="feature-icon"><i class="bi bi-receipt"></i></div>
        <div>
          <div class="ft-title">Fast POS & Invoicing</div>
          <div class="ft-sub">Barcode scanning, multi-payment checkout</div>
        </div>
      </div>
      <div class="feature-item">
        <div class="feature-icon"><i class="bi bi-graph-up-arrow"></i></div>
        <div>
          <div class="ft-title">Real-time Finance Tracking</div>
          <div class="ft-sub">Cash & bank accounts, receivables, payables</div>
        </div>
      </div>
      <div class="feature-item">
        <div class="feature-icon"><i class="bi bi-box-seam"></i></div>
        <div>
          <div class="ft-title">Inventory & Purchasing</div>
          <div class="ft-sub">Stock alerts, supplier management</div>
        </div>
      </div>
      <div class="feature-item">
        <div class="feature-icon"><i class="bi bi-people"></i></div>
        <div>
          <div class="ft-title">Payroll & Attendance</div>
          <div class="ft-sub">Fingerprint integration, automated payslips</div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── RIGHT: Login form ───────────────────────────────── -->
  <div class="form-panel">
    <div class="login-box">

      <h3>Welcome back </h3>
      <p class="sub">Sign in to continue to your dashboard</p>

      <?= flashMessages() ?>

      <form method="POST" action="<?= APP_URL ?>/auth/login" autocomplete="on">
        <?= Auth::csrfField() ?>

        <div class="mb-3">
          <label class="form-label-modern" for="username">Username</label>
          <div class="input-group-modern">
            <i class="bi bi-person input-leading"></i>
            <input type="text"
                   name="username"
                   id="username"
                   class="input-modern"
                   placeholder="Enter your username"
                   autocomplete="username"
                   value="<?= $this->old('username') ?>"
                   required
                   autofocus>
          </div>
        </div>

        <div class="mb-4">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <label class="form-label-modern mb-0" for="password">Password</label>
            <a href="<?= APP_URL ?>/auth/forgot-password" class="forgot-link">
              Forgot password?
            </a>
          </div>
          <div class="input-group-modern">
            <i class="bi bi-lock input-leading"></i>
            <input type="password"
                   name="password"
                   id="password"
                   class="input-modern"
                   style="padding-right:40px"
                   placeholder="Enter your password"
                   autocomplete="current-password"
                   required>
            <button class="toggle-pwd" type="button" onclick="togglePwd()" tabindex="-1">
              <i class="bi bi-eye" id="pwd-icon"></i>
            </button>
          </div>
        </div>

        <button type="submit" class="btn-login">
          <i class="bi bi-box-arrow-in-right me-1"></i> Sign In
        </button>
      </form>

      <div class="divider-text">SECURE LOGIN</div>

      <p class="footer-note">
        <i class="bi bi-shield-check me-1"></i>
        Protected by role-based access control
      </p>
      <p class="footer-note">
        &copy; <?= date('Y') ?> MJPOS SYSTEMS — All rights reserved.
      </p>

    </div>
  </div>

</div>

<script>
function togglePwd() {
  const p = document.getElementById('password');
  const i = document.getElementById('pwd-icon');
  if (p.type === 'password') {
    p.type = 'text'; i.className = 'bi bi-eye-slash';
  } else {
    p.type = 'password'; i.className = 'bi bi-eye';
  }
}
</script>
</body>
</html>