<?php
// ver_pdv_admin.php - Vista para mostrar cards de PDV por departamento interno
require_once __DIR__ . '/../../includes/version.php';
require_once __DIR__ . '/../../includes/admin_guard.php';
include_once __DIR__ . '/../../includes/topbar.php';
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PDV por Departamento Interno</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard_admin.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/styles.css') ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body class="d-flex flex-column min-vh-100" style="overflow:auto !important;">
    <style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
    </style>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="d-flex justify-content-between align-items-center mb-2 flex-wrap gap-2">
            <div class="titulo-pdv-admin d-flex align-items-center gap-2 mb-0 px-3 py-2 rounded-3 shadow-sm">
                <i class="fas fa-store fa-lg text-primary"></i>
                <span class="fw-bold fs-4" style="letter-spacing:1px;">Puntos de Venta por Sector</span>
            </div>
            <button class="btn btn-success ms-2" data-bs-toggle="modal" data-bs-target="#exportModal">
                <i class="fas fa-file-excel me-1"></i> Exportar a Excel
            </button>
            <button class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#modalFiltroPeriodo">
                <i class="fas fa-filter me-1"></i> Filtrar Periodo
            </button>
            <?php
            // Obtener sectores únicos para el filtro
            $sectoresFiltro = [];
            require_once __DIR__ . '/../../../backend/config/database.php';
            try {
                $db = (new Database())->connect();
                $query = "SELECT DISTINCT Sector FROM sectoresdPDVs ORDER BY Sector";
                $stmt = $db->prepare($query);
                $stmt->execute();
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                    $sector = $row['Sector'];
                    if (stripos($sector, 'Subdistr') === false && stripos($sector, 'Matriz') === false) {
                        $sectoresFiltro[] = $sector;
                    }
                }
            } catch (Exception $e) {}
            ?>
            <select id="sectorFilter" class="form-select w-auto ms-auto" style="min-width:200px;">
                <option value="">Todas Las Regiones</option>
                <?php foreach ($sectoresFiltro as $sector): ?>
                    <option value="<?php echo htmlspecialchars($sector); ?>"><?php echo htmlspecialchars($sector); ?></option>
                <?php endforeach; ?>
            </select>
            <input type="text" id="searchFilter" class="form-control w-auto ms-2" style="min-width:220px;max-width:300px;" placeholder="Buscar PDV o Departamento...">
        </div>
        <div class="row mb-3">
            <div class="col-12">
                <div id="periodoActualInfo" class="px-3 py-2 rounded-3 shadow-sm bg-white fw-semibold" style="border-left: 6px solid #764ba2; font-family: 'Poppins', sans-serif; letter-spacing:1px; min-width:320px;"></div>
            </div>
        </div>
    <!-- SweetAlert2 CDN -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <div class="row g-3" id="pdv-cards">
        <!-- Las cards se renderizan aquí, y el layout se mantiene homogéneo gracias a Bootstrap -->
        <?php include __DIR__ . '/modal_filtro_periodo.php'; ?>
        <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exportModalLabel">Exportar Horarios a Excel</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
              </div>
              <div class="modal-body">
                <form id="exportForm">
                  <div class="mb-3">
                    <label for="regionSelect" class="form-label">Región</label>
                    <select class="form-select" id="regionSelect" name="region">
                      <option value="">Todas las Regiones</option>
                      <?php foreach ($sectoresFiltro as $sector): ?>
                        <option value="<?php echo htmlspecialchars($sector); ?>"><?php echo htmlspecialchars($sector); ?></option>
                      <?php endforeach; ?>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label for="pdvSelect" class="form-label">PDV</label>
                    <select class="form-select" id="pdvSelect" name="pdv" disabled>
                      <option value="">Todos los PDV</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label for="colaboradorSelect" class="form-label">Colaborador</label>
                    <select class="form-select" id="colaboradorSelect" name="colaborador[]" multiple disabled style="min-height:90px;">
                      <option value="">Todos los Colaboradores</option>
                    </select>
                    <small class="text-muted">Puedes seleccionar uno, varios o todos (Ctrl+Click o Shift+Click)</small>
                  </div>
                  <div class="mb-3">
                    <label for="quincenaSelect" class="form-label">Quincena</label>
                    <select class="form-select" id="quincenaSelect" name="quincena" required>
                      <option value="">Selecciona una quincena</option>
                    </select>
                  </div>
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="exportarBtn">Exportar</button>
              </div>
            </div>
          </div>
        </div>
            <?php
            require_once __DIR__ . '/../../../backend/config/database.php';
            try {
                $db = (new Database())->connect();
                $query = "SELECT ID, ATTUIDEncargado, Tiendas, Sector FROM sectoresdPDVs";
                $stmt = $db->prepare($query);
                $stmt->execute();
                $cards = [];
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                    $sector = $row['Sector'];
                    $tiendas = array_map('trim', explode(',', $row['Tiendas']));
                    foreach ($tiendas as $tienda) {
                        if ($tienda !== '') {
                            $cards[] = [
                                'sector' => $sector,
                                'tienda' => $tienda,
                                'id' => $row['ID'],
                                'encargado' => $row['ATTUIDEncargado']
                            ];
                        }
                    }
                }
                foreach ($cards as $card) {
                    if (stripos($card['sector'], 'Subdistr') === false && stripos($card['sector'], 'Matriz') === false) {
                        $tiendaUrl = urlencode($card['tienda']);
                        echo '<div class="col-12 col-sm-6 col-md-4 col-lg-3">';
                        echo '<a href="ver_horario_tienda.php?tienda=' . $tiendaUrl . '" style="text-decoration:none; color:inherit;">';
                        echo '<div class="card pdv-card h-100 shadow-sm border-primary" data-sector="'.htmlspecialchars($card['sector']).'" data-encargado="'.htmlspecialchars($card['encargado']).'">';
                        echo '<div class="card-body">';
                        echo '<h5 class="card-title mb-2">' . htmlspecialchars($card['tienda']) . '</h5>';
                        echo '<span class="badge bg-primary mb-2">' . htmlspecialchars($card['sector']) . '</span>';
                        echo '<p class="mb-0"><small>Encargado: <b>' . htmlspecialchars($card['encargado']) . '</b></small></p>';
                        echo '</div>';
                        echo '</div>';
                        echo '</a>';
                        echo '</div>';
                    }
                }
            } catch (Exception $e) {
                echo '<div class="alert alert-danger">Error al conectar o consultar la base de datos: ' . htmlspecialchars($e->getMessage()) . '</div>';
            }
            ?>
        </div>
    </div>
    <style>
    .titulo-pdv-admin {
        background: linear-gradient(90deg, #f8fafc 60%, #e9e3f7 100%);
        border-left: 6px solid #764ba2;
        font-family: 'Poppins', sans-serif;
        box-shadow: 0 2px 8px rgba(118,75,162,0.07);
    }
    .titulo-pdv-admin .fa-store {
        filter: drop-shadow(0 2px 4px rgba(76,0,130,0.10));
    }
    .pdv-card {
        transition: box-shadow 0.2s, transform 0.15s;
        border-width: 2px;
        border-radius: 1.2rem;
        cursor: pointer;
        border-color: #ccc;
    }
    .pdv-card.estado-verde {
        border-color: #28a745 !important;
        box-shadow: 0 0 0 2px #28a74533;
        background: #eafbe7;
    }
    .pdv-card.estado-amarillo {
        border-color: #ffc107 !important;
        box-shadow: 0 0 0 2px #ffc10733;
        background: #fffbe6;
    }
    .pdv-card.estado-rojo {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 2px #dc354533;
        background: #fdeaea;
    }
    .pdv-card:hover {
        box-shadow: 0 8px 32px rgba(76,0,130,0.18);
        transform: translateY(-3px) scale(1.03);
        border-color: #764ba2;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- FontAwesome ya está incluido por CDN arriba -->
    <script>
    // Función para pintar las cards según el estado de horarios por periodo (usada por el modal)
    function pintarCardsPorPeriodo(periodoId) {
        const cardsContainer = document.getElementById('pdv-cards');
        if (!periodoId) {
            document.querySelectorAll('.pdv-card').forEach(card => {
                card.classList.remove('estado-verde', 'estado-amarillo', 'estado-rojo');
            });
            cardsContainer.style.display = 'flex';
            return;
        }
        cardsContainer.style.display = 'none';
        Swal.fire({
            title: 'Cargando datos...',
            allowOutsideClick: false,
            showConfirmButton: false,
            backdrop: true,
            didOpen: () => {
                Swal.showLoading();
            }
        });
        // Obtener fechas del periodo seleccionado y mostrar arriba de las cards
        fetch(`../../../backend/api/quincenas_disponibles.php`)
            .then(r => r.json())
            .then(qs => {
                let periodo = null;
                if (qs && Array.isArray(qs.quincenas)) {
                    periodo = qs.quincenas.find(q => q.id_quincena == periodoId);
                }
                if (periodo) {
                    // Crear fechas en UTC para evitar desfase por zona horaria
                    function parseFecha(fechaStr) {
                        const [anio, mes, dia] = fechaStr.split('-').map(Number);
                        return new Date(Date.UTC(anio, mes - 1, dia));
                    }
                    const fechaIni = parseFecha(periodo.fecha_inicio);
                    const fechaFin = parseFecha(periodo.fecha_fin);
                    const opciones = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
                    const texto = `Periodo actual del ${fechaIni.toLocaleDateString('es-MX', opciones)} al ${fechaFin.toLocaleDateString('es-MX', opciones)}`;
                    document.getElementById('periodoActualInfo').textContent = texto;
                } else {
                    document.getElementById('periodoActualInfo').textContent = '';
                }
            });
        fetch(`../../../backend/api/get_estado_horario_pdvs.php?id_quincena=${encodeURIComponent(periodoId)}`)
            .then(r => r.json())
            .then(data => {
                document.querySelectorAll('.pdv-card').forEach(card => {
                    card.classList.remove('estado-verde', 'estado-amarillo', 'estado-rojo');
                    const pdv = card.querySelector('.card-title').textContent;
                    const estado = data[pdv];
                    if (estado === 'verde') card.classList.add('estado-verde');
                    else if (estado === 'amarillo') card.classList.add('estado-amarillo');
                    else if (estado === 'rojo') card.classList.add('estado-rojo');
                });
                Swal.close();
                cardsContainer.style.display = 'flex';
            })
            .catch(() => {
                Swal.close();
                cardsContainer.style.display = 'flex';
            });
    }

    // --- Lógica para cargar PDVs y Colaboradores dinámicamente en el modal ---
    const cardsData = <?php echo json_encode($cards ?? []); ?>;

    // Llenar quincenas al abrir el modal
    document.getElementById('exportModal').addEventListener('show.bs.modal', function() {
      const quincenaSelect = document.getElementById('quincenaSelect');
      quincenaSelect.innerHTML = '<option value="">Selecciona una quincena</option>';
      fetch('../../../backend/api/quincenas_disponibles.php')
        .then(r => r.json())
        .then(qs => {
          if (qs && Array.isArray(qs.quincenas)) {
            qs.quincenas.forEach(q => {
              quincenaSelect.innerHTML += `<option value="${q.id_quincena}">${q.nombre}</option>`;
            });
          } else {
            quincenaSelect.innerHTML += '<option value="">No hay quincenas disponibles</option>';
            console.error('Respuesta inesperada de quincenas_disponibles.php:', qs);
          }
        });
    });

    document.getElementById('regionSelect').addEventListener('change', function() {
      const region = this.value;
      const pdvSelect = document.getElementById('pdvSelect');
      pdvSelect.innerHTML = '<option value="">Todos los PDV</option>';
      pdvSelect.disabled = !region;
      const colaboradorSelect = document.getElementById('colaboradorSelect');
      colaboradorSelect.innerHTML = '<option value="">Todos los Colaboradores</option>';
      colaboradorSelect.disabled = true;
      if (region) {
        // Agrupar por tienda pero guardar el DEPARTAMENTO INTERNO como value
        const pdvs = cardsData.filter(card => card.sector === region);
        const tiendasUnicas = [];
        pdvs.forEach(card => {
          if (!tiendasUnicas.some(t => t.tienda === card.tienda && t.sector === card.sector)) {
            tiendasUnicas.push({ tienda: card.tienda, departamento: card.tienda, sector: card.sector });
          }
        });
        tiendasUnicas.forEach(item => {
          pdvSelect.innerHTML += `<option value="${item.departamento}">${item.tienda}</option>`;
        });
        // Cargar colaboradores de la región (sin filtrar por PDV)
        fetch(`../../../backend/api/colaboradores_por_filtro.php?region=${encodeURIComponent(region)}`)
          .then(r => r.json())
          .then(colabs => {
            if (colabs.length > 0) {
              colaboradorSelect.disabled = false;
              colabs.forEach(colab => {
                colaboradorSelect.innerHTML += `<option value="${colab.curp}">${colab.nombre}</option>`;
              });
            }
          });
      }
    });

    document.getElementById('pdvSelect').addEventListener('change', function() {
      const pdv = this.value;
      const colaboradorSelect = document.getElementById('colaboradorSelect');
      colaboradorSelect.innerHTML = '<option value="">Todos los Colaboradores</option>';
      colaboradorSelect.disabled = !pdv;
      if (pdv) {
        fetch(`../../../backend/api/colaboradores_por_filtro.php?pdv=${encodeURIComponent(pdv)}`)
          .then(r => r.json())
          .then(res => {
            const colabs = res.colaboradores || res;
            if (colabs.length > 0) {
              colaboradorSelect.disabled = false;
              colabs.forEach(colab => {
                colaboradorSelect.innerHTML += `<option value="${colab.curp}">${colab.nombre}</option>`;
              });
            }
          });
      }
    });

    // Botón exportar
    document.getElementById('exportarBtn').addEventListener('click', function() {
      const form = document.getElementById('exportForm');
      const formData = new FormData(form);
      // Si no hay quincena seleccionada, no exportar
      if (!formData.get('quincena')) {
        alert('Selecciona una quincena para exportar.');
        return;
      }
      // Si no hay colaborador seleccionado, elimina el campo para que el backend exporte todos
      const colabSelect = document.getElementById('colaboradorSelect');
      const selectedColabs = Array.from(colabSelect.selectedOptions).map(opt => opt.value).filter(v => v);
      if (selectedColabs.length === 0) {
        formData.delete('colaborador[]');
      }
      const params = new URLSearchParams(formData).toString();
      window.open(`../../../backend/api/exportar_calendario.php?${params}`, '_blank');
    });
    // Filtro de sector para mostrar solo las cards correspondientes
    document.getElementById('sectorFilter').addEventListener('change', function() {
        const val = this.value;
        const cardCols = document.querySelectorAll('#pdv-cards > .col-12, #pdv-cards > .col-sm-6, #pdv-cards > .col-md-4, #pdv-cards > .col-lg-3');
        cardCols.forEach(col => {
            const card = col.querySelector('.pdv-card');
            if (!val || (card && card.getAttribute('data-sector') === val)) {
                col.style.display = '';
            } else {
                col.style.display = 'none';
            }
        });
        // Ya no se fuerza reflow, Bootstrap gestiona el grid automáticamente
    });

    // Filtro por texto para buscar coincidencias en PDV o Departamento Interno
    document.getElementById('searchFilter').addEventListener('input', function() {
        const search = this.value.trim().toLowerCase();
        // Siempre setear el filtro de región a 'Todas Las Regiones' al buscar
        const sectorFilter = document.getElementById('sectorFilter');
        if (sectorFilter.value !== '') {
            sectorFilter.value = '';
        }
        const region = sectorFilter.value;
        const cardCols = document.querySelectorAll('#pdv-cards > .col-12, #pdv-cards > .col-sm-6, #pdv-cards > .col-md-4, #pdv-cards > .col-lg-3');
        cardCols.forEach(col => {
            const card = col.querySelector('.pdv-card');
            let show = true;
            if (region && card.getAttribute('data-sector') !== region) show = false;
            if (search) {
                const nombre = card.querySelector('.card-title').textContent.toLowerCase();
                const sector = card.getAttribute('data-sector').toLowerCase();
                if (!nombre.includes(search) && !sector.includes(search)) show = false;
            }
            col.style.display = show ? '' : 'none';
        });
        // Ya no se fuerza reflow, Bootstrap gestiona el grid automáticamente
    });
    // --- Aplicar quincena actual automáticamente al cargar la página ---
    document.addEventListener('DOMContentLoaded', function() {
        fetch('../../../backend/api/quincenas_disponibles.php')
            .then(r => r.json())
            .then(qs => {
                if (qs && Array.isArray(qs.quincenas) && qs.quincenas.length > 0) {
                    // Buscar la quincena actual según la fecha de hoy
                    const hoy = new Date();
                    let actualId = null;
                    for (const q of qs.quincenas) {
                        // Parsear fechas en UTC para evitar desfase
                        const [ai, mi, di] = q.fecha_inicio.split('-').map(Number);
                        const [af, mf, df] = q.fecha_fin.split('-').map(Number);
                        const inicio = new Date(Date.UTC(ai, mi - 1, di));
                        const fin = new Date(Date.UTC(af, mf - 1, df));
                        // Comparar solo fecha (sin hora)
                        const hoyUTC = new Date(Date.UTC(hoy.getFullYear(), hoy.getMonth(), hoy.getDate()));
                        if (hoyUTC >= inicio && hoyUTC <= fin) {
                            actualId = q.id_quincena;
                            break;
                        }
                    }
                    // Si no se encontró, usar la última quincena disponible
                    if (!actualId) actualId = qs.quincenas[qs.quincenas.length - 1].id_quincena;
                    // Si tienes un select de quincena, seleccionarlo
                    const quincenaSelect = document.getElementById('quincenaSelect');
                    if (quincenaSelect) {
                        quincenaSelect.value = actualId;
                    }
                    // Pintar las cards automáticamente
                    pintarCardsPorPeriodo(actualId);
                }
            });
    });
    </script>
</body>
</html>
