<?php
session_start();
if (!isset($_SESSION['attuid']) || !in_array($_SESSION['rol'] ?? '', ['subdistribuidor', 'adminTi'])) {
    header('Location: ../../index.php');
    exit();
}
require_once __DIR__ . '/../includes/valida_posiciones.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Candidatos - Subdistribuidor</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Bootstrap 5 + FontAwesome + MDB -->
  <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/font-awesome/6.4.0/css/all.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="../assets/css/recruiter.css" rel="stylesheet" />
</head>
<body class="bg-light">
<div class="d-flex">
  <?php include '../includes/sidebar.php'; ?>

  <div class="main-content" id="mainContent">
    <?php include '../includes/topbar.php'; ?>

    <div class="container-fluid p-4">
      <div class="row mb-4">
        <div class="col-12">
          <h2 class="fw-bold text-dark mb-2">Candidatos Subdistribuidor</h2>
        </div>
      </div>

      <!-- Filtros -->
      <div class="row mb-4">
        <div class="col-12">
          <div class="card shadow-sm">
            <div class="card-body">
              <div class="row g-3">
                <div class="col-md-4">
                  <label class="form-label">Buscar</label>
                  <div class="input-group">
                    <input type="text" class="form-control" id="filtro-busqueda" placeholder="Nombre, Folio..." />
                    <button class="btn btn-primary" id="btn-buscar">
                      <i class="fas fa-search"></i>
                    </button>
                  </div>
                </div>
                <div class="col-md-3">
                  <label class="form-label">Estatus</label>
                  <select class="form-select" id="filtro-estado">
                    <option value="">Todos</option>
                    <option value="activo">Activos</option>
                    <option value="rechazado">Rechazados</option>
                  </select>
                </div>
                <div class="col-md-2 d-flex align-items-end">
                  <button class="btn btn-outline-secondary w-100" id="btn-filtrar">
                    <i class="fas fa-filter me-2"></i>Filtrar
                  </button>
                </div>
                <div class="col-md-3 d-flex align-items-end">
                  <button class="btn btn-outline-danger w-100" id="btn-limpiar">
                    <i class="fas fa-times-circle me-2"></i>Limpiar filtros
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Botón de exportar -->
      <div id="btn-exportar-excel" style="display: none;" class="mb-3">
        <button class="btn btn-success">
          <i class="fas fa-file-excel me-2"></i> Exportar a Excel
        </button>
      </div>

      <!-- Select de paginación -->
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
          <label for="selectLimit" class="form-label me-2">Resultados por página:</label>
          <select id="selectLimit" class="form-select form-select-sm d-inline-block w-auto">
            <option value="10">10</option>
            <option value="20">20</option>
            <option value="50">50</option>
          </select>
        </div>
        <div id="pagination" class="pagination mb-0"></div>
      </div>

      <!-- Tabla de Candidatos -->
      <div class="row">
        <div class="col-12">
          <div class="card shadow-sm">
            <div class="card-header bg-white border-bottom d-flex justify-content-between align-items-center">
              <h5 class="mb-0"><span id="candidatos-count">0</span> candidatos encontrados</h5>
              <!-- Si quieres permitir agregar desde aquí, descomenta la línea siguiente -->
              <!--
              <button class="btn btn-sm btn-primary" onclick="window.location.href='../applicant/application-form.php'">
                <i class="fas fa-plus me-1"></i> Nuevo Candidato
              </button>
              -->
            </div>
            <div class="card-body p-0">
              <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                  <thead class="bg-light">
                    <tr>
                      <th width="40%">Candidato</th>
                      <th>Vacante</th>
                      <th>Estatus</th>
                      <th>Acciones</th>
                    </tr>
                  </thead>
                  <tbody id="candidatos-tbody">
                    <!-- Candidatos se cargan dinámicamente -->
                  </tbody>
                </table>
              </div>
            </div>
            <div class="card-footer bg-white border-top text-center">
              <small class="text-muted">Actualizado</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js"></script>
<!-- Cambia el JS si lo vas a separar -->
<script src="../assets/js/subdistribuidor/subdistribuidor.js"></script>
</body>
</html>
