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

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Sistema de aspirantes Rocasa</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 align-items-center">
        <div class="col-md-6">
          <h2 class="fw-bold text-dark mb-2">Aspirantes</h2>
        </div>
        <div class="col-md-6">
          <div class="d-flex justify-content-end gap-2" id="vacantes-resumen">
            <div class="card text-center border-primary mb-0 cursor-pointer card-vacante" data-tipo="completas" style="min-width: 170px; max-width: 180px;">
              <div class="card-body py-2 px-2">
                <h6 class="card-title text-primary mb-1" style="font-size: 0.95rem;">Vacantes Tiempo Completo en PDV</h6>
                <span class="fw-bold" id="vacantes-completas-pdv" style="font-size: 1.5rem;">-</span>
              </div>
            </div>
            <div class="card text-center border-success mb-0 cursor-pointer card-vacante" data-tipo="administrativas" style="min-width: 170px; max-width: 180px;">
              <div class="card-body py-2 px-2">
                <h6 class="card-title text-success mb-1" style="font-size: 0.95rem;">Vacantes administrativas</h6>
                <span class="fw-bold" id="vacantes-administrativas" style="font-size: 1.5rem;">-</span>
              </div>
            </div>
            <div class="card text-center border-warning mb-0 cursor-pointer card-vacante" data-tipo="medio" style="min-width: 170px; max-width: 180px;">
              <div class="card-body py-2 px-2">
                <h6 class="card-title text-warning mb-1" style="font-size: 0.95rem;">Vacantes medio tiempo PDV</h6>
                <span class="fw-bold" id="vacantes-medio-tiempo-pdv" style="font-size: 1.5rem;">-</span>
              </div>
            </div>
          </div>
        </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>

      <!-- Selector 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>
              <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 desde recruiter.js -->
                  </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>

<!-- Modal de Vacantes -->
<div class="modal fade" id="modalVacantes" tabindex="-1" aria-labelledby="modalVacantesLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modalVacantesLabel">Vacantes</h5>
        <button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Cerrar"></button>
      </div>
      <div class="modal-body">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead class="table-light">
              <tr>
                <th>Código</th>
                <th>Puesto</th>
                <th>PDV</th>
                <th>Modalidad</th>
              </tr>
            </thead>
            <tbody id="tabla-vacantes-body">
              <!-- Vacantes cargadas dinámicamente -->
            </tbody>
          </table>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">Cerrar</button>
      </div>
    </div>
  </div>
</div>

<!-- Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.4.0/mdb.min.js"></script>
<script src="../assets/js/recruiter.js"></script>
<script>
// Cargar resumen de vacantes al iniciar
fetch('../../backend/vacantes/get_resumen_vacantes.php')
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      document.getElementById('vacantes-completas-pdv').textContent = data.vacantes_completas_pdv;
      document.getElementById('vacantes-administrativas').textContent = data.vacantes_administrativas;
      document.getElementById('vacantes-medio-tiempo-pdv').textContent = data.vacantes_medio_tiempo_pdv;
    }
  });

// Evento para abrir modal con vacantes por tipo
document.querySelectorAll('.card-vacante').forEach(card => {
  card.addEventListener('click', function () {
    const tipo = this.getAttribute('data-tipo');
    const titulo = {
      completas: 'Vacantes Completas en PDV',
      administrativas: 'Vacantes Administrativas',
      medio: 'Vacantes Medio Tiempo en PDV'
    }[tipo] || 'Vacantes';

    document.getElementById('modalVacantesLabel').textContent = titulo;
    const tbody = document.getElementById('tabla-vacantes-body');
    tbody.innerHTML = '<tr><td colspan="4">Cargando...</td></tr>';

    fetch(`../../backend/vacantes/get_detalle_vacantes.php?tipo=${tipo}`)
      .then(res => res.json())
      .then(data => {
        if (data.success && data.vacantes.length) {
          tbody.innerHTML = '';
          data.vacantes.forEach(v => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
              <td>${v.codigo}</td>
              <td>${v.puesto}</td>
              <td>${v.pdv}</td>
              <td>${v.modalidad}</td>
            `;
            tbody.appendChild(tr);
          });
        } else {
          tbody.innerHTML = '<tr><td colspan="4">No se encontraron vacantes.</td></tr>';
        }
      });

    const modal = new mdb.Modal(document.getElementById('modalVacantes'));
    modal.show();
  });
});
</script>
</body>
</html>
