<?php
session_start();
if (!isset($_SESSION['attuid'])) {
    header('Location: ../../index.php');
    exit;
}
$attuid = $_SESSION['attuid'];

require_once __DIR__ . '/../includes/valida_posiciones.php';
?>

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Dashboard | Reclutador</title>
  <!-- Bootstrap + MDB + FontAwesome -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.css" rel="stylesheet"/>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <link href="../assets/css/dashboard.css" rel="stylesheet" /> 
</head>
<body>
  <!-- Sidebar -->
  <?php include '../includes/sidebar.php'; ?>

  <!-- Main Content -->
    <div class="main-content">
      <?php include '../includes/topbar.php'; ?>

      <main class="container-fluid mt-4">
    <!-- Filtros de fecha -->
    <div class="row mb-3">
      <div class="col-md-3">
        <label for="fechaInicio" class="form-label">Desde:</label>
        <input type="date" id="fechaInicio" class="form-control">
      </div>
      <div class="col-md-3">
        <label for="fechaFin" class="form-label">Hasta:</label>
        <input type="date" id="fechaFin" class="form-control">
      </div>
      <div class="col-md-3 d-flex align-items-end">
        <button class="btn btn-primary w-100" id="btnFiltrarFechas">
          <i class="fas fa-filter me-2"></i>Aplicar Filtro
        </button>
      </div>
      <div class="col-md-3 d-flex align-items-end">
        <button class="btn btn-outline-secondary w-100" id="btnLimpiarFiltro">
          <i class="fas fa-times-circle me-2"></i>Limpiar Filtro
        </button>
      </div>
      <div class="col-md-3 d-flex align-items-end">
        <div id="rangoActivo" class="text-muted ms-2 small"></div>
      </div>
    </div>

    <!-- Tarjetas de métricas -->
    <div class="row g-4 mb-4" id="dashboard-cards">
      <!-- Aquí se inyectan las cards dinámicamente con JS -->
    </div>

    <!-- Tabla de aspirantes -->
    <div class="row">
      <div class="col">
        <div class="card shadow">
          <div class="card-body">
            <h5 class="card-title">Aspirantes Recientes</h5>
            <div class="table-responsive">
              <table class="table" id="tabla-aspirantes">
                <thead>
                  <tr>
                    <th>Nombre completo</th>
                    <th>Puesto</th>
                    <th>Estatus</th>
                    <th>Última modificación</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Aquí se inyectan los aspirantes dinámicamente -->
                </tbody>
              </table>
            </div>
          </div> <!-- /.card-body -->
        </div> <!-- /.card -->
      </div> <!-- /.col -->
    </div> <!-- /.row -->
  </main>
</div>

  <!-- JS Scripts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js"></script>
  <script src="../assets/js/dashboard.js"></script>
</body>
</html>
