<?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>Horario por PDV</title>

    <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="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
    <link href="../../assets/css/recruiter.css" rel="stylesheet" />
    
    <!-- SweetAlert2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet" />
    
    <style>
        /* Estilos para el modal mejorado */
        .bg-gradient-primary {
            background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
        }

        .modal-content {
            border: none;
            box-shadow: 0 5px 20px rgba(0,0,0,0.15);
        }

        .timepicker {
            cursor: pointer;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            transition: all 0.3s;
            min-height: 38px;
            /* Altura fija para evitar movimiento */
            box-sizing: border-box;
        }

        .timepicker:focus {
            outline: 2px solid #3a7bd5;
        }

        /* Flatpickr popup por encima, sin afectar layout */
        .flatpickr-calendar {
            z-index: 9999 !important;
        }

        .input-group-text {
            min-width: 40px;
            justify-content: center;
        }

        .rounded-pill {
            padding: 0.5rem 1.5rem;
        }

        .card {
            transition: transform 0.2s;
            border-radius: 0.5rem;
        }

        .card:hover {
            transform: translateY(-2px);
        }

        .day-card {
            border-left: 4px solid #3a7bd5;
        }

        .modal-header {
            border-bottom: none;
        }

        .modal-footer {
            border-top: none;
            background-color: #f8f9fa;
        }
    </style>
</head>
<body class="bg-light">
<div class="d-flex">
    <?php include __DIR__ . '/../../includes/sidebar.php'; ?>

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

        <main class="main-content" style="margin-left: 0;">
            <div class="container mt-4">
                <h3 class="mb-4">Tiendas asignadas por Sector y Encargado</h3>

                <table class="table table-bordered table-striped" id="tablaTiendas">
                    <thead class="table-dark">
                        <tr>
                            <th style="min-width: 120px;">Encargado (ATTUID)</th>
                            <th style="min-width: 180px;">Nombre del Encargado</th>
                            <th style="min-width: 120px;">Tienda</th>
                            <th style="min-width: 120px;">Sector</th>
                            <th style="min-width: 220px; white-space: normal;">Horario de operación</th>
                            <th style="min-width: 240px; white-space: normal; display: none;">Horario preferente de recepción de equipos</th>
                            <th style="min-width: 120px;">Acciones</th>
                        </tr>
                    </thead>
                    <tbody id="cuerpoTabla">
                        <tr>
                            <td colspan="6" class="text-center">
                                <div class="spinner-border text-primary" role="status">
                                    <span class="visually-hidden">Cargando...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>

<!-- Modal Actualizar Horario -->
<div class="modal fade" id="modalHorario" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <form id="formHorario">
      <div class="modal-content border-0 shadow-lg">
        <div class="modal-header bg-gradient-primary text-white rounded-top">
          <h5 class="modal-title fw-bold"><i class="fas fa-clock me-2"></i> Horario de <span id="nombreTienda" class="text-capitalize"></span></h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body p-4">
          <input type="hidden" name="tienda" id="tiendaInput">
          
          <div class="alert alert-info d-flex align-items-center mb-4">
            <i class="fas fa-info-circle me-2 fs-4"></i>
            <div>Configura los horarios de apertura y cierre para cada día de la semana.</div>
          </div>
          
          <div class="row g-3" id="camposHorario">
            <!-- Campos generados dinámicamente -->
          </div>
        </div>
        <div class="modal-footer bg-light rounded-bottom">
          <button type="button" class="btn btn-outline-secondary rounded-pill px-4" data-bs-dismiss="modal">
            <i class="fas fa-times me-1"></i> Cancelar
          </button>
          <button type="submit" class="btn btn-primary rounded-pill px-4">
            <i class="fas fa-save me-1"></i> Guardar cambios
          </button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
       let tiendasData = []; // Almacenaremos todos los datos aquí
document.addEventListener("DOMContentLoaded", function () {
    const cuerpo = document.getElementById('cuerpoTabla');
 
    // Mostrar spinner SweetAlert2 mientras carga
    Swal.fire({
        title: 'Cargando tiendas...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch('../../../backend/regionales/pdv/obtener_tiendas.php')
        .then(response => response.json())
        .then(data => {
            Swal.close(); // cerrar spinner
            cuerpo.innerHTML = '';
            tiendasData = data.data; // Guardamos todos los datos

            if (data.success && data.data.length > 0) {
                data.data.forEach(item => {
    const dias = [
        { label: 'L', normal: item.lunes, comida: item.lunesC },
        { label: 'M', normal: item.martes, comida: item.martesC },
        { label: 'M', normal: item.miercoles, comida: item.miercolesC },
        { label: 'J', normal: item.jueves, comida: item.juevesC },
        { label: 'V', normal: item.viernes, comida: item.viernesC },
        { label: 'S', normal: item.sabado, comida: item.sabadoC },
        { label: 'D', normal: item.domingo, comida: item.domingoC }
    ];

    // Definir hayDatos aquí antes de usarla:
    const hayDatos = dias.some(d => d.normal || d.comida);

    const horario = hayDatos
        ? dias.map(d => {
            const normal = (d.normal || '').toLowerCase().trim();
            const comida = (d.comida || '').toLowerCase().trim();

            if (normal === 'no se labora' && comida === 'no se labora') {
                return `${d.label} (Cerrado)`;
            } else {
                return `${d.label} (${d.normal || '-'} - ${d.comida || '-'})`;
            }
        }).join('<br>')
        : 'Por definir';

    // Mostrar horario preferente de recepción de equipos
    let horarioRecepcion = 'Por definir';
    if (item.dia && item.horaini && item.horafin) {
        horarioRecepcion = `${item.dia} (${item.horaini} - ${item.horafin})`;
    }

    const fila = `
        <tr>
            <td>${item.encargado}</td>
            <td>${item.nombreEncargado}</td>
            <td>${item.tienda}</td>
            <td>${item.sector}</td>
            <td style="white-space: pre-line; vertical-align: top;">${horario}</td>
            <td style="white-space: pre-line; vertical-align: top; display: none;">${horarioRecepcion}</td>
            <td>
                <button class="btn btn-sm btn-primary" onclick="abrirModal('${item.tienda}')">
                    <i class="fas fa-clock"></i> Actualizar horario
                </button>
            </td>
        </tr>
    `;
    cuerpo.innerHTML += fila;
                });
            } else {
                cuerpo.innerHTML = `
                    <tr><td colspan="6" class="text-center">No se encontraron datos.</td></tr>
                `;
            }
        })
        .catch(error => {
            Swal.close();
            console.error('Error al cargar tiendas:', error);
            cuerpo.innerHTML = `
                <tr><td colspan="6" class="text-center text-danger">Error al cargar datos.</td></tr>
            `;
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error al cargar datos del servidor'
            });
        });
});

const diasSemana = ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'];

function abrirModal(tienda) {
    // Buscar los datos de la tienda específica
    const tiendaData = tiendasData.find(item => item.tienda === tienda);
    
    document.getElementById('nombreTienda').textContent = tienda;
    document.getElementById('tiendaInput').value = tienda;

    const contenedor = document.getElementById('camposHorario');
    contenedor.innerHTML = '';

    diasSemana.forEach(dia => {
        const diaLower = dia.toLowerCase();
        const apertura = tiendaData[diaLower] || '09:00';
        const cierre = tiendaData[diaLower + 'C'] || '20:00';
        const esNoLabora = apertura.toLowerCase().includes('no se labora');

        contenedor.innerHTML += `
        <div class="col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100 day-card">
                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 fw-bold"><i class="far fa-calendar-alt me-2 text-primary"></i>${dia}</h6>
                    <div class="form-check">
                        <input class="form-check-input no-labora-check" type="checkbox" id="${diaLower}_nolabora" name="${diaLower}_nolabora" ${esNoLabora ? 'checked' : ''}>
                        <label class="form-check-label small" for="${diaLower}_nolabora">No se labora</label>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-3 horario-group">
                        <label class="form-label small text-muted">Horario normal</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white"><i class="far fa-clock text-primary"></i></span>
                            <input type="text" name="${diaLower}" 
                                   class="form-control timepicker horario-input" 
                                   placeholder="Apertura" 
                                   value="${esNoLabora ? '' : apertura}"
                                   data-toggle="tooltip" 
                                   title="Hora de apertura"
                                   ${esNoLabora ? 'disabled' : ''}>
                            <input type="text" name="${diaLower}C" 
                                   class="form-control timepicker horario-input" 
                                   placeholder="Cierre" 
                                   value="${esNoLabora ? '' : cierre}"
                                   data-toggle="tooltip" 
                                   title="Hora de cierre"
                                   ${esNoLabora ? 'disabled' : ''}>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        `;
    });

    // Agregar bloque de Horario preferente de recepción de equipos
    /*
    contenedor.innerHTML += `
    <div class="col-12 mb-3">
        <div class="card border-0 shadow-sm h-100">
            <div class="card-header bg-light d-flex align-items-center">
                <h6 class="mb-0 fw-bold">
                    <i class="fas fa-truck me-2 text-success"></i>Horario preferente de recepción de equipos
                </h6>
            </div>
            <div class="card-body row align-items-end g-2">
                <div class="col-md-4">
                    <label class="form-label small text-muted">Día</label>
                    <select class="form-select" name="recepcion_dia" id="recepcion_dia" required>
                        <option value="">Selecciona un día</option>
                        <option value="Lunes">Lunes</option>
                        <option value="Martes">Martes</option>
                        <option value="Miercoles">Miércoles</option>
                        <option value="Jueves">Jueves</option>
                        <option value="Viernes">Viernes</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">Hora inicio</label>
                    <input type="text" class="form-control timepicker" name="recepcion_horaini" id="recepcion_horaini" placeholder="HH:MM" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label small text-muted">Hora fin</label>
                    <input type="text" class="form-control timepicker" name="recepcion_horafin" id="recepcion_horafin" placeholder="HH:MM" required>
                </div>
            </div>
        </div>
    </div>
    `;
    */

    setTimeout(() => {
        flatpickr(".timepicker", {
            enableTime: true,
            noCalendar: true,
            dateFormat: "H:i",
            time_24hr: true,
            allowInput: true,
            minuteIncrement: 15
        });

        $('[data-toggle="tooltip"]').tooltip();

        // Comportamiento de "No se labora"
        document.querySelectorAll('.no-labora-check').forEach(checkbox => {
            checkbox.addEventListener('change', () => {
                const card = checkbox.closest('.card');
                const inputs = card.querySelectorAll('.horario-input');
                if (checkbox.checked) {
                    inputs.forEach(input => {
                        input.disabled = true;
                        input.value = '';
                    });
                } else {
                    inputs.forEach(input => input.disabled = false);
                }
            });
        });
    }, 100);

    const modal = new bootstrap.Modal(document.getElementById('modalHorario'));
    modal.show();
}


document.getElementById('formHorario').addEventListener('submit', function(e) {
    e.preventDefault();
    // Validación personalizada para horario de recepción
    let horaIni = null;
    let horaFin = null;
    const inputHoraIni = document.getElementById('recepcion_horaini');
    const inputHoraFin = document.getElementById('recepcion_horafin');
    if (inputHoraIni) horaIni = inputHoraIni.value;
    if (inputHoraFin) horaFin = inputHoraFin.value;
    const minHoraIni = '09:00';

    // Validar que hora inicio no sea menor a 09:00
    if (horaIni && horaIni < minHoraIni) {
        Swal.fire({
            icon: 'warning',
            title: 'Hora de inicio inválida',
            text: 'La hora de inicio no puede ser menor a 09:00.'
        });
        return;
    }

    // Validar que hora fin no sea mayor a 18:00
    const maxHoraFin = '18:00';
    if (horaFin && horaFin > maxHoraFin) {
        Swal.fire({
            icon: 'warning',
            title: 'Hora fin inválida',
            text: 'La hora de fin no puede ser mayor a 18:00.'
        });
        return;
    }

    // Validar diferencia mínima de 3 horas
    if (horaIni && horaFin) {
        const [h1, m1] = horaIni.split(':').map(Number);
        const [h2, m2] = horaFin.split(':').map(Number);
        const minutosIni = h1 * 60 + m1;
        const minutosFin = h2 * 60 + m2;
        if (minutosFin - minutosIni < 180) {
            Swal.fire({
                icon: 'warning',
                title: 'Horario inválido',
                text: 'Debe haber al menos 3 horas de diferencia entre inicio y fin.'
            });
            return;
        }
    }

    const formData = new FormData(this);
    // Si los campos de horario preferente no existen, agregar como null
    if (!inputHoraIni) formData.append('recepcion_horaini', '');
    if (!inputHoraFin) formData.append('recepcion_horafin', '');

    Swal.fire({
        title: 'Guardando horario...',
        allowOutsideClick: false,
        didOpen: () => {
            Swal.showLoading();
        }
    });

    fetch('../../../backend/regionales/pdv/actualizar_horario.php', {
        method: 'POST',
        body: formData
    })
    .then(res => res.json())
    .then(res => {
        Swal.close();

        if (res.success) {
            Swal.fire({
                icon: 'success',
                title: 'Éxito',
                text: 'Horario actualizado correctamente',
                timer: 2000,
                showConfirmButton: false
            }).then(() => {
                location.reload();
            });
        } else {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: res.message || 'Error al guardar el horario'
            });
        }
    })
    .catch(err => {
        Swal.close();
        console.error(err);
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error en la solicitud'
        });
    });
});
</script>

</body>
</html>