<?php
// ============================================================
//  MediCore — Login Page
//  File: login.php
// ============================================================
require_once 'includes/auth.php';

// Already logged in → go to dashboard
if (!empty($_SESSION['user_id'])) {
    header('Location: dashboard.php');
    exit;
}

$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim($_POST['username'] ?? '');
    $password = $_POST['password'] ?? '';
    if (attempt_login($username, $password)) {
        header('Location: dashboard.php');
        exit;
    }
    $error = 'Invalid username or password.';
}
$settings = get_settings();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login — <?= htmlspecialchars($settings['shop_name']) ?></title>
  <link rel="stylesheet" href="assets/style.css">
  <style>
    html,body{height:100%;overflow:auto;background:var(--bg)}
    body{display:flex}

    /* ── Split screen shell ─────────────────────────────────── */
    .lg-shell{display:flex;min-height:100vh;width:100%}

    /* ── Left — brand / hero panel ──────────────────────────── */
    .lg-hero{
      flex:1 1 46%;position:relative;overflow:hidden;
      background:linear-gradient(150deg,var(--sidebar) 0%,var(--brand) 55%,var(--brand2) 100%);
      color:#fff;display:flex;flex-direction:column;justify-content:center;
      padding:56px 60px;min-width:0;
    }
    .lg-hero::before,.lg-hero::after{
      content:'';position:absolute;border-radius:50%;
      background:rgba(255,255,255,.07);pointer-events:none;
    }
    .lg-hero::before{width:420px;height:420px;top:-160px;right:-140px}
    .lg-hero::after{width:280px;height:280px;bottom:-120px;left:-80px;background:rgba(255,255,255,.05)}

    .lg-hero-inner{position:relative;z-index:1;max-width:420px}
    .lg-hero-badge{
      width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.14);
      backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;
      font-size:28px;margin-bottom:26px;overflow:hidden;border:1px solid rgba(255,255,255,.18);
    }
    .lg-hero-badge img{width:100%;height:100%;object-fit:cover;border-radius:15px}
    .lg-hero h1{font-size:28px;font-weight:700;letter-spacing:-.4px;line-height:1.25;margin-bottom:10px}
    .lg-hero p.lead{font-size:14px;color:rgba(255,255,255,.78);line-height:1.6;margin-bottom:34px}

    .lg-feats{display:flex;flex-direction:column;gap:16px}
    .lg-feat{display:flex;align-items:flex-start;gap:12px;font-size:13px;color:rgba(255,255,255,.92)}
    .lg-feat .ic{
      flex-shrink:0;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.14);
      display:flex;align-items:center;justify-content:center;font-size:14px;
    }
    .lg-feat .tt{font-weight:600;margin-bottom:1px}
    .lg-feat .ds{color:rgba(255,255,255,.66);font-size:11.5px;line-height:1.5}

    /* ── Right — form panel ─────────────────────────────────── */
    .lg-form-side{
      flex:1 1 54%;display:flex;align-items:center;justify-content:center;
      padding:40px 24px;min-width:0;background:var(--bg);
    }
    .lg-card{width:100%;max-width:380px}
    .lg-card-logo{display:none;text-align:center;margin-bottom:22px}
    .lg-card-logo .ico{
      width:52px;height:52px;border-radius:13px;background:var(--brand);color:#fff;
      display:inline-flex;align-items:center;justify-content:center;font-size:24px;
      margin-bottom:10px;overflow:hidden;
    }
    .lg-card-logo .ico img{width:100%;height:100%;object-fit:cover;border-radius:12px}
    .lg-card-logo .shop{font-weight:700;font-size:14px;color:var(--text)}

    .lg-head{margin-bottom:26px}
    .lg-head h2{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.3px;margin-bottom:5px}
    .lg-head p{font-size:12.5px;color:var(--text3)}

    .lg-err{
      display:flex;align-items:center;gap:8px;background:var(--danger-light);
      border:1px solid #f3b4b4;color:#a11d1d;padding:9px 12px;border-radius:var(--rsm);
      font-size:12.5px;font-weight:500;margin-bottom:16px;
    }

    .lg-field{margin-bottom:16px}
    .lg-field label{
      display:block;font-size:11.5px;font-weight:700;color:var(--text2);
      text-transform:uppercase;letter-spacing:.4px;margin-bottom:6px;
    }
    .lg-input-wrap{position:relative}
    .lg-input-wrap .lg-ic{
      position:absolute;left:12px;top:50%;transform:translateY(-50%);
      font-size:14px;color:var(--text3);pointer-events:none;
    }
    .lg-input-wrap input{
      width:100%;padding:11px 12px 11px 38px;border:1.5px solid var(--border);
      border-radius:var(--rsm);font-family:inherit;font-size:14px;color:var(--text);
      background:var(--surface);outline:none;transition:border-color .15s,box-shadow .15s;
    }
    .lg-input-wrap input:focus{border-color:var(--brand2);box-shadow:0 0 0 3px var(--brand-xlight)}
    .lg-toggle-pw{
      position:absolute;right:4px;top:50%;transform:translateY(-50%);
      background:none;border:none;cursor:pointer;padding:7px 8px;font-size:13px;
      color:var(--text3);border-radius:var(--rxs);
    }
    .lg-toggle-pw:hover{color:var(--text2);background:var(--surface2)}

    .lg-submit{
      width:100%;padding:12px;border:none;border-radius:var(--rsm);
      background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;
      font-family:inherit;font-size:14.5px;font-weight:700;letter-spacing:.2px;
      cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;
      box-shadow:0 6px 16px rgba(45,58,140,.28);transition:transform .12s,box-shadow .12s;
      margin-top:6px;
    }
    .lg-submit:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(45,58,140,.34)}
    .lg-submit:active{transform:translateY(0)}
    .lg-submit:disabled{opacity:.75;cursor:default;transform:none}
    .lg-spin{
      width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);
      border-top-color:#fff;animation:lg-spin .7s linear infinite;display:none;
    }
    @keyframes lg-spin{to{transform:rotate(360deg)}}

    .lg-hint{
      display:flex;align-items:center;gap:7px;justify-content:center;margin-top:20px;
      font-size:11px;color:var(--text3);background:var(--surface2);
      border:1px solid var(--border);border-radius:var(--rsm);padding:8px 10px;
    }
    .lg-hint b{color:var(--text2);font-family:'JetBrains Mono',monospace;font-weight:600}

    .lg-footer{text-align:center;font-size:10.5px;color:var(--text3);margin-top:22px}

    @media (max-width:860px){
      .lg-hero{display:none}
      .lg-form-side{flex:1 1 100%}
      .lg-card-logo{display:block}
    }
  </style>
</head>
<body>
<div class="lg-shell">

  <!-- ── Left: brand hero ── -->
  <div class="lg-hero">
    <div class="lg-hero-inner">
      <div class="lg-hero-badge">
        <?php if (!empty($settings['logo'])): ?>
          <img src="<?= htmlspecialchars($settings['logo']) ?>" alt="">
        <?php else: ?>💊<?php endif; ?>
      </div>
      <h1><?= htmlspecialchars($settings['shop_name']) ?></h1>
      <p class="lead">Pharmacy Management System — run sales, inventory, purchasing and reporting from one connected workspace.</p>

      <div class="lg-feats">
        <div class="lg-feat">
          <div class="ic">⚡</div>
          <div>
            <div class="tt">Live stock across every terminal</div>
            <div class="ds">Sales, dashboards and alerts update in real time — no manual refresh needed.</div>
          </div>
        </div>
        <div class="lg-feat">
          <div class="ic">🤖</div>
          <div>
            <div class="tt">Smart requisition &amp; reordering</div>
            <div class="ds">Auto-match suppliers and reorder low-stock items in a couple of clicks.</div>
          </div>
        </div>
        <div class="lg-feat">
          <div class="ic">📊</div>
          <div>
            <div class="tt">Built-in reporting engine</div>
            <div class="ds">Sales, purchases, profit and custom reports — all in one place.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ── Right: login form ── -->
  <div class="lg-form-side">
    <div class="lg-card">

      <div class="lg-card-logo">
        <div class="ico">
          <?php if (!empty($settings['logo'])): ?>
            <img src="<?= htmlspecialchars($settings['logo']) ?>" alt="">
          <?php else: ?>💊<?php endif; ?>
        </div>
        <div class="shop"><?= htmlspecialchars($settings['shop_name']) ?></div>
      </div>

      <div class="lg-head">
        <h2>Welcome back</h2>
        <p>Sign in with your staff account to continue.</p>
      </div>

      <?php if ($error): ?>
        <div class="lg-err">⚠ <?= htmlspecialchars($error) ?></div>
      <?php endif; ?>

      <form method="POST" id="login-form">
        <div class="lg-field">
          <label>Username</label>
          <div class="lg-input-wrap">
            <span class="lg-ic">👤</span>
            <input type="text" name="username" autofocus autocomplete="username"
                   value="<?= htmlspecialchars($_POST['username'] ?? '') ?>"
                   placeholder="Enter your username">
          </div>
        </div>
        <div class="lg-field">
          <label>Password</label>
          <div class="lg-input-wrap">
            <span class="lg-ic">🔒</span>
            <input type="password" name="password" id="lg-pw" autocomplete="current-password"
                   placeholder="Enter your password" style="padding-right:38px">
            <button type="button" class="lg-toggle-pw" id="lg-pw-toggle" onclick="toggleLgPw()" tabindex="-1">Show</button>
          </div>
        </div>
        <button type="submit" class="lg-submit" id="lg-submit-btn">
          <span class="lg-spin" id="lg-spin"></span>
          <span id="lg-submit-txt">Sign In</span>
        </button>
      </form>

      <div class="lg-hint">🔑 Default login — <b>admin / admin123</b> (change after first login)</div>
      <div class="lg-footer">&copy; <?= date('Y') ?> <?= htmlspecialchars($settings['shop_name']) ?> · MediCore</div>
    </div>
  </div>
</div>

<script>
function toggleLgPw() {
  const pw  = document.getElementById('lg-pw');
  const btn = document.getElementById('lg-pw-toggle');
  const show = pw.type === 'password';
  pw.type = show ? 'text' : 'password';
  btn.textContent = show ? 'Hide' : 'Show';
}
document.getElementById('login-form').addEventListener('submit', () => {
  document.getElementById('lg-submit-btn').disabled = true;
  document.getElementById('lg-spin').style.display = 'inline-block';
  document.getElementById('lg-submit-txt').textContent = 'Signing in…';
});
</script>
</body>
</html>
