<?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" />
  <style>
    /* Decoración moderna para los filtros */
    .form-control[type="date"] {
      border-radius: 10px;
      border: 2px solid #b6c7e3;
      box-shadow: 0 1px 6px rgba(30,90,168,0.07);
      font-size: 1.08rem;
      padding: 10px 14px;
      transition: border-color 0.2s;
    }
    .form-control[type="date"]:focus {
      border-color: #1E5AA8;
      outline: none;
      box-shadow: 0 2px 12px rgba(30,90,168,0.12);
    }
    #btnFiltrarFechas {
      background: linear-gradient(90deg, #1E5AA8 60%, #3B7CA8 100%);
      border: none;
      font-weight: 600;
      letter-spacing: 0.5px;
      box-shadow: 0 2px 8px rgba(30,90,168,0.10);
      border-radius: 10px;
      transition: background 0.2s;
      color: #fff;
    }
    #btnFiltrarFechas:hover {
      background: linear-gradient(90deg, #3B7CA8 0%, #1E5AA8 100%);
      color: #fff;
    }
    #btnLimpiarFiltro {
      border-radius: 10px;
      font-weight: 500;
      color: #1E5AA8;
      border: 2px solid #b6c7e3;
      background: #f8f9fa;
      transition: border-color 0.2s, background 0.2s;
    }
    #btnLimpiarFiltro:hover {
      background: #e3f0ff;
      border-color: #1E5AA8;
    }
    /* Botones de filtro rápido más estrechos */
    .btn-quick-filters button {
  padding: 8px 6px;
  font-size: 0.75rem;
      border-radius: 8px;
      border: 2px solid #b6c7e3;
      color: #1E5AA8;
      font-weight: 500;
      transition: all 0.2s;
    }
    .btn-quick-filters button:hover {
      background: #e3f0ff;
      border-color: #1E5AA8;
      transform: translateY(-1px);
    }
  </style>
</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>

    <!-- Quick filters: colocados encima de las cards -->
    <div class="row mb-3">
      <div class="col-12">
        <div class="btn-quick-filters">
          <button class="btn btn-outline-primary mb-2" id="btnSemana">Esta semana</button>
          <button class="btn btn-outline-primary mb-2" id="btn2Semanas">Últimas 2 semanas</button>
          <button class="btn btn-outline-primary mb-2" id="btnMes">Este mes</button>
          <button class="btn btn-outline-primary mb-2" id="btnSemanaAnterior">Semana anterior</button>
          <button class="btn btn-outline-primary mb-2" id="btnMesAnterior">Mes anterior</button>
        </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>

    <!-- Checkbox y ayuda debajo de las cards -->
    <div class="row mb-4" id="filaCheckboxFiltro" style="display: none;">
      <div class="col d-flex align-items-center">
        <input type="checkbox" id="incluirAsignadosPrevios" class="form-check-input me-2" checked>
        <label for="incluirAsignadosPrevios" class="form-check-label me-3">Incluir asignados anteriores al filtro</label>
        <button type="button" class="btn btn-sm btn-outline-secondary ms-2" id="btnAyudaFiltro" data-bs-toggle="tooltip" data-bs-placement="right" title="Contabilizar a gente">
          <i class="fas fa-question"></i>
        </button>
      </div>
    </div>

    <!-- Tabla de aspirantes -->
    <div class="row">
      <div class="col">
        <div class="card shadow">
          <div class="card-body">
            <h5 class="card-title">Tu Actividad Reciente</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>

  <!-- Modal para Asignados -->
  <div class="modal fade" id="modalAsignados" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header text-white" style="background-color: #1E5AA8;">
          <h5 class="modal-title">
            <i class="fas fa-user-tie me-2"></i>Aspirantes Asignados
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarAsignados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn text-white" id="btnExportarExcelAsignados" style="background-color: #1E5AA8;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <ul class="list-group" id="listaAsignados">
            <!-- Se llena dinámicamente -->
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal para Pendientes -->
  <div class="modal fade" id="modalPendientes" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header text-white" style="background-color: #3B7CA8;">
          <h5 class="modal-title">
            <i class="fas fa-clock me-2"></i>Aspirantes Pendientes
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarPendientes" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn text-white" id="btnExportarExcelPendientes" style="background-color: #3B7CA8;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <ul class="list-group" id="listaPendientes">
            <!-- Se llena dinámicamente -->
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Estatus En Proceso -->
  <div class="modal fade" id="modalEstatusProceso" tabindex="-1">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header text-white" style="background-color: #D29E00;">
          <h5 class="modal-title">
            <i class="fas fa-spinner me-2"></i>Estatus de Aspirantes en Proceso
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <ul class="list-group" id="listaEstatusProceso"></ul>
          <button id="btnDetalleProceso" class="btn text-white mt-3" style="background-color: #D29E00;">Ver detalles</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal Detalle En Proceso -->
  <div class="modal fade" id="modalDetalleProceso" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header text-white" style="background-color: #D29E00;">
          <h5 class="modal-title">
            <i class="fas fa-list-alt me-2"></i>Detalle de Aspirantes en Proceso
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarDetalleProceso" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn text-white" id="btnExportarExcelEnProceso" style="background-color: #D29E00;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <div id="contenidoDetalleProceso"><!-- Rellenado con JS --></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal para Contratados -->
  <div class="modal fade" id="modalContratados" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-success text-white">
          <h5 class="modal-title">
            <i class="fas fa-user-check me-2"></i>Aspirantes Contratados
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarContratados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn btn-success" id="btnExportarExcelContratados">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <ul class="list-group" id="listaContratados">
            <!-- Se llena dinámicamente -->
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal para Rechazados -->
  <div class="modal fade" id="modalRechazados" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title">
            <i class="fas fa-user-times me-2"></i>Aspirantes Rechazados
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarRechazados" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn btn-danger" id="btnExportarExcelRechazados">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <ul class="list-group" id="listaRechazados">
            <!-- Se llena dinámicamente -->
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- Modal para En el Banco -->
  <div class="modal fade" id="modalBanco" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header text-white" style="background-color: #3E4C59;">
          <h5 class="modal-title">
            <i class="fas fa-university me-2"></i>Aspirantes en el Banco
          </h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <input type="text" id="buscarBanco" class="form-control" placeholder="Buscar por nombre...">
          </div>
          <div class="mb-3">
            <button class="btn text-white" id="btnExportarExcelBanco" style="background-color: #3E4C59;">
              <i class="fas fa-file-excel me-2"></i>Exportar a Excel
            </button>
          </div>
          <ul class="list-group" id="listaBanco">
            <!-- Se llena dinámicamente -->
          </ul>
        </div>
      </div>
    </div>
  </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>
