<?php
$title = 'Entrar';
require_once __DIR__ . '/auth.php';

$err = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  check_csrf();
  $r = do_login($pdo, trim($_POST['username'] ?? ''), (string)($_POST['password'] ?? ''));
  if ($r['ok']) { header('Location: ' . base_url('index.php')); exit; }
  $err = $r['msg'] ?? 'Falha no login';
}
?>
<!doctype html>
<html lang="pt-br">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>SDTrack — Entrar</title>

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Bootstrap Icons (para ícones nos inputs) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

  <style>
    :root{
      /* Troque a URL abaixo pela imagem desejada (pode ser um arquivo local em /assets) */
      --login-bg: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?q=80&w=1600&auto=format&fit=crop'); /* prateleiras/estoque TI */
      --brand-primary: #0d6efd;
    }

    html, body { height: 100%; }
    body{ background: #f3f5f9; }

    .auth-wrapper{
      min-height: 100vh;
    }

    /* Coluna esquerda (imagem) */
    .left-hero{
      background-image: var(--login-bg);
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .left-hero::after{
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(90deg, rgba(13,110,253,.55) 0%, rgba(13,110,253,.25) 60%, rgba(0,0,0,0) 100%);
    }
    .left-hero-content{
      position: relative; /* acima do overlay */
      z-index: 1;
      color: #fff;
      padding: 3rem 2rem;
    }
    .badge-chip{
      backdrop-filter: blur(6px);
      background: rgba(255,255,255,.15);
      border: 1px solid rgba(255,255,255,.25);
      border-radius: 999px;
      padding: .4rem .9rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }

    /* Coluna direita (form em branco) */
    .right-panel{
      background: #fff;
      display: flex;
      align-items: center;
      min-height: 100vh;
      box-shadow: -6px 0 30px rgba(0,0,0,.05);
    }
    .auth-card{
      width: 100%;
      max-width: 420px;
      margin-inline: auto;
    }
    .brand{
      display: flex; align-items: center; gap: .6rem;
      font-weight: 700; letter-spacing: .2px;
    }
    .brand i{
      color: var(--brand-primary);
    }
    .form-floating > label { color: #6c757d; }
    .form-control:focus{
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
    }
    .btn-primary{
      background: var(--brand-primary);
    }
    .helper-links a{
      text-decoration: none;
    }

    /* Mobile: esconde a coluna de imagem para ganhar espaço */
    @media (max-width: 991.98px){
      .left-hero{ display: none; }
      .right-panel{ min-height: 100dvh; }
    }
  </style>
</head>
<body>
  <div class="container-fluid p-0 auth-wrapper">
    <div class="row g-0">
      <!-- Coluna esquerda: imagem/hero -->
      <div class="col-lg-7 left-hero">
        <div class="left-hero-content d-flex flex-column h-100 justify-content-between">
          <div>
            <span class="badge-chip mb-3">
              <i class="bi bi-box-seam"></i> Estoque & Disponibilização de Equipamentos
            </span>
            <h1 class="display-6 fw-semibold mb-3">SDTRACK</h1>
             </div>
          <div class="small opacity-75">
            © <?= date('Y') ?> — SDTrack Pluris Midia Ltda
          </div>
        </div>
      </div>

      <!-- Coluna direita: painel branco com formulário -->
      <div class="col-lg-5 right-panel">
        <main class="auth-card px-4 px-md-5 py-5">
          <header class="mb-4 text-center">
            <div class="brand justify-content-center fs-4">
              <i class="bi bi-shield-lock"></i> <span>Área Restrita</span>
            </div>
            <div class="text-muted mt-1">Faça login para continuar</div>
          </header>

          <?php if ($err): ?>
            <div class="alert alert-danger" role="alert"><?= h($err) ?></div>
          <?php endif; ?>

          <form method="post" autocomplete="off" id="loginForm">
            <input type="hidden" name="csrf" value="<?= h(csrf_token()) ?>">

            <div class="form-floating mb-3">
              <input type="text" class="form-control" id="username" name="username" placeholder="usuario" required autofocus autocomplete="username">
              <label for="username"><i class="bi bi-person me-1"></i> Usuário</label>
            </div>

            <div class="mb-3 position-relative">
              <div class="form-floating">
                <input type="password" class="form-control" id="password" name="password" placeholder="senha" required autocomplete="current-password">
                <label for="password"><i class="bi bi-key me-1"></i> Senha</label>
              </div>
              <button type="button" class="btn btn-outline-secondary position-absolute top-50 end-0 translate-middle-y me-2" id="togglePass" aria-label="Mostrar/ocultar senha" style="border-radius: .6rem; padding: .3rem .6rem;">
                <i class="bi bi-eye"></i>
              </button>
            </div>

            <div class="d-flex justify-content-between align-items-center helper-links mb-3">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="" id="rememberMe">
                <label class="form-check-label" for="rememberMe">Lembrar-me neste dispositivo</label>
              </div>
              <a href="#" class="small text-decoration-none">Esqueci minha senha</a>
            </div>

            <button class="btn btn-primary w-100 py-2 d-flex align-items-center justify-content-center" id="btnSubmit">
              <span>Entrar</span>
              <span class="spinner-borde

