<?php
require __DIR__ . '/../config/app.php';

if (is_logged_in()) {
  header('Location: ' . BASE_URL);
  exit;
}

include __DIR__ . '/../partials/header.php';
?>

<link rel="stylesheet" href="../css/views/login.css">

<section class="position-relative d-flex justify-content-center align-items-center" style="min-height: calc(100vh - 56px);">
  <!-- overlay oscuro usando utilidades Bootstrap -->
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-dark bg-opacity-50"></div>
  <div class="container py-5 position-relative">
    <div class="row justify-content-center">
      <div class="col-md-5">
        <div class="p-4 rounded-3 shadow bg-white position-relative">

          <!-- Logo dentro del panel -->
          <img src="<?= asset('assets/logo.png') ?>" class="login-logo-inside" alt="Logo">

          <h4 class="mb-3 fw-semibold pe-5">Iniciar sesión</h4>
          <div id="loginAlert" class="alert alert-danger d-none small mb-3"></div>

          <form id="formLogin" action="../ajax/login.ajax.php" novalidate>
            <div class="mb-3">
              <label for="username" class="form-label small">Usuario</label>
              <input id="username" name="username" class="form-control form-control-sm" required>
              <div class="invalid-feedback">Ingrese su usuario</div>
            </div>

            <div class="mb-3">
              <label for="password" class="form-label small">Contraseña</label>
              <input id="password" name="password" type="password" class="form-control form-control-sm" required>
              <div class="invalid-feedback">Ingrese su contraseña</div>
            </div>

            <button id="btnLogin" class="btn btn-primary w-100" type="submit">
              <span class="spinner-border spinner-border-sm d-none me-2"></span>
              Entrar
            </button>
          </form>
        </div>
      </div>
    </div>

    <!-- Menú dinámico -->
    <nav id="navMenus" class="navbar navbar-expand-lg navbar-dark bg-dark mt-4 d-none">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">#VeladeroDigital_</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenusCollapse">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div id="navMenusCollapse" class="collapse navbar-collapse">
          <ul id="menuItems" class="navbar-nav me-auto mb-2 mb-lg-0"></ul>
        </div>
      </div>
    </nav>

    <div id="welcomeBox" class="d-none mt-3"></div>
  </div>
</section>


<script src="<?= asset('js/views/login.js') ?>"></script>
<?php include __DIR__ . '/../partials/footer.php'; ?>