<?php
// Incluimos helpers, el topbar y verificamos la sesión
require_once __DIR__ . '/../../includes/version.php';
include_once __DIR__ . '/../../includes/topbar.php';

// Verificar permisos o roles si es necesario
$rol = strtolower($_SESSION['user_puesto']);
$attuid = strtolower($_SESSION['user_attuid']);
if ($attuid !== 'admin' && strpos($rol, 'gerente') === false && strpos($rol, 'assistant') === false) {
    header('Location: ../../index.php');
    exit;
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestionar Equipo - Sistema de Horarios</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Datepicker CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <!-- FullCalendar CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/horarios/fullcalendar/core.global.min.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/horarios/fullcalendar/daygrid.global.min.css') ?>" rel="stylesheet">
    <!-- Custom CSS (con cache busting) -->
    <link href="<?= asset('/frontend/assets/css/styles.css') ?>" rel="stylesheet">
    <link href="<?= asset('/frontend/assets/css/horarios/crear.css') ?>" rel="stylesheet">
    <style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
    /* Scroll para el contenedor del calendario */
    .calendario-scroll-container {
        max-height: 70vh;
        min-height: 400px;
        overflow-x: auto;
        overflow-y: auto;
        padding: 8px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        margin-bottom: 1rem;
    }
    #calendario-horarios {
        min-width: 900px;
        min-height: 600px;
    }
    /* Visual para colaborador deshabilitado */
    .disabled-colaborador {
        opacity: 0.5;
        pointer-events: none;
        background: #f5f5f5 !important;
    }
    /* Indicador de horario asignado */
    .horario-asignado-badge {
        position: absolute;
        top: 5px;
        right: 5px;
        background: #28a745;
        color: white;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        z-index: 10;
    }
    .colaborador-tarjeta {
        position: relative;
    }
    .empleados-list-scroll {
        max-height: calc(100vh - 220px);
        min-height: 200px;
        overflow-y: auto;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #e3e3e3;
        margin-bottom: 1rem;
    }
    /* Estilo para días de descanso */
    .dia-descanso {
        background-color: #f8f9fa !important;
    }
    .dia-descanso input[type="time"] {
        background-color: #e9ecef !important;
        cursor: not-allowed;
    }
    </style>
</head>
<body class="d-flex flex-column min-vh-100">
    <?php include_once __DIR__ . '/../../includes/topbar.php'; ?>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="row">
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header bg-primary text-white">
                        <h6 class="mb-0">Colaboradores de nuevo ingreso</h6>
                    </div>
                    <div class="card-body p-2" id="empleados-nuevo-ingreso-list">
                        <div class="text-center text-muted">Cargando colaboradores de nuevo ingreso...</div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-header bg-white d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-users me-2"></i>Gestionar Equipo
                        </h5>
                        <a href="../../dashboard/dashboard.php" class="btn btn-sm btn-outline-secondary">
                            <i class="fas fa-arrow-left me-1"></i> Volver
                        </a>
                    </div>
                    <div class="card-body">
                        <!-- Botón para asignar horario -->
                        <div class="mb-3">
                            <button type="button" class="btn btn-primary" id="btn-asignar-horario">
                                <i class="fas fa-clock me-1"></i> Asignar horario
                            </button>
                        </div>
                        <!-- Calendario de asignación de horarios -->
                        <div id="calendario-horarios-scroll" class="calendario-scroll-container">
                            <div id="calendario-horarios"></div>
                        </div>
                        <div id="rango-seleccionado" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal para asignar turno y horario a varios colaboradores -->
    <div class="modal fade" id="modalAsignarHorario" tabindex="-1" aria-labelledby="modalAsignarHorarioLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalAsignarHorarioLabel">Asignar horario a colaboradores seleccionados</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
          </div>
          <div class="modal-body">
            <form id="form-asignar-horario">
              <div class="mb-3">
                <label class="form-label">Colaboradores seleccionados:</label>
                <ul id="lista-colaboradores-seleccionados" class="mb-2"></ul>
              </div>
              <div class="mb-3 alert alert-info" id="periodo-activo-info">
                <strong>Periodo a asignar:</strong> <span id="periodo-activo-texto">Cargando...</span>
              </div>
              <div class="mb-3">
                     <button type="button" class="btn btn-primary btn-sm" id="btn-replicar-semana-1" style="display:block;width:100%;"><span style="display:none;">Replicar semana 1 en semanas 2 y 3</span></button>
              </div>
              <div class="mb-3" id="bloque-horarios-semanales">
                <!-- Aquí se renderizan las tablas de horarios por semana/quincena vía JS -->
              </div>
              <div class="mb-3" id="bloque-dias-descanso">
                <label class="form-label">Días de descanso por semana</label>
                <div class="alert alert-info" id="contador-descansos-asignar" style="display:none;">
                  <i class="fas fa-info-circle"></i> <span id="texto-contador-descansos-asignar"></span>
                </div>
                <div id="descansos-por-semana">
                  <!-- Aquí se renderizan los selects de descanso por semana vía JS -->
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" form="form-asignar-horario" class="btn btn-primary">Asignar</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Modal para editar horario de colaboradores -->
    <div class="modal fade" id="modalEditarHorario" tabindex="-1" aria-labelledby="modalEditarHorarioLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="modalEditarHorarioLabel">Editar horario de colaboradores seleccionados</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
          </div>
          <div class="modal-body">
            <form id="form-editar-horario">
              <div class="mb-3">
                <label class="form-label">Colaboradores seleccionados:</label>
                <ul id="lista-colaboradores-editar" class="mb-2"></ul>
              </div>
              <div class="mb-3 alert alert-info" id="periodo-editar-info">
                <strong>Periodo a editar:</strong> <span id="periodo-editar-texto">Cargando...</span>
              </div>
              <div class="mb-3">
                     <button type="button" class="btn btn-primary btn-sm" id="btn-replicar-semana-1-editar" style="display:block;width:100%;"><span style="display:none;">Replicar semana 1 en semanas 2 y 3</span></button>
              </div>
              <div class="mb-3" id="bloque-horarios-semanales-editar">
                <!-- Aquí se renderizan las tablas de horarios por semana/quincena vía JS -->
              </div>
              <div class="mb-3" id="bloque-dias-descanso-editar">
                <label class="form-label">Días de descanso por semana</label>
                <div id="descansos-por-semana-editar">
                  <!-- Aquí se renderizan los selects de descanso por semana vía JS -->
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            <button type="submit" form="form-editar-horario" class="btn btn-warning">Actualizar</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Modal exclusivo para editar horario de un colaborador -->
    <?php include __DIR__ . '/../horarios/editar_modal.php'; ?>

    <!-- Espaciador invisible para dejar margen inferior -->
    <div style="height:60px; width:100vw; background:transparent;"></div>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Datepicker JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/locales/bootstrap-datepicker.es.min.js"></script>
    <!-- FullCalendar JS (con cache busting) -->
    <script src="<?= asset('/frontend/assets/js/horarios/fullcalendar/core.global.min.js') ?>"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/fullcalendar/daygrid.global.min.js') ?>"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/fullcalendar/interaction.global.min.js') ?>"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/fullcalendar/locales-all.global.min.js') ?>"></script>
    <!-- moment.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <!-- Custom JS (con cache busting) -->
    <script>const pdvUsuario = <?= json_encode($_SESSION['pdv_usuario'] ?? '') ?>;</script>
    <script src="<?= asset('/frontend/assets/js/horarios/crear.js') ?>"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/asignar_horario.js') ?>" type="module"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/actualizar.js') ?>"></script>
    <script src="<?= asset('/frontend/assets/js/horarios/editar_horario.js') ?>"></script>
    <script>
    $(document).ready(function() {
        // ========== INICIO: CARGA DE COLABORADORES DE NUEVO INGRESO (ÚNICO EN GESTIONAR.PHP) ==========
        $.get('../../../backend/api/empleados_nuevo_ingreso.php', function(response) {
            let html = '';
            if (response.success && response.data && response.data.length > 0) {
                response.data.forEach(function(emp) {
                    html += `<div class="col-12 mb-2">
                        <div class="colaborador-tarjeta card card-body py-2 px-3 mb-2 shadow-sm border-primary border-2" draggable="true"
                            data-id="${emp.CURP}"
                            data-nombre="${emp.NOMBRES} ${emp['APELLIDO PATERNO']} ${emp['APELLIDO MATERNO']}"
                            data-fecha-ingreso="${emp['FECHA DE INGRESO'] || ''}"
                            style="cursor: grab;">
                            <div class="d-flex align-items-center">
                                <div class="me-3">
                                    <i class="fas fa-${emp.GENERO && emp.GENERO.toUpperCase() === 'M' ? 'venus text-pink' : 'mars text-primary'} fa-2x"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-semibold">${emp.NOMBRES} ${emp['APELLIDO PATERNO']} ${emp['APELLIDO MATERNO']}</div>
                                    <div class="text-muted small">${emp.PUESTO}</div>
                                </div>
                                <div>
                                    <input type="checkbox" class="form-check-input empleado-checkbox ms-2" value="${emp.CURP}" data-nombre="${emp.NOMBRES} ${emp['APELLIDO PATERNO']} ${emp['APELLIDO MATERNO']}" data-fecha-ingreso="${emp['FECHA DE INGRESO'] || ''}">
                                </div>
                            </div>
                        </div>
                    </div>`;
                });
            } else {
                html = '<div class="alert alert-warning">No hay colaboradores de nuevo ingreso para mostrar.</div>';
            }
            $('#empleados-nuevo-ingreso-list').html(html);
        }, 'json');
        // ========== FIN: CARGA DE COLABORADORES DE NUEVO INGRESO ==========

        // ========== INICIO: FUNCIONALIDAD IDÉNTICA A CREAR.PHP ==========
        
        // Selección visual de cards
        $(document).on('click', '.colaborador-tarjeta', function(e) {
            if ($(e.target).is('input[type="checkbox"]')) return;
            $(this).toggleClass('selected');
            var checkbox = $(this).find('.empleado-checkbox');
            checkbox.prop('checked', $(this).hasClass('selected'));
        });
        $(document).on('change', '.empleado-checkbox', function() {
            var card = $(this).closest('.colaborador-tarjeta');
            card.toggleClass('selected', this.checked);
        });

        // Inicializar FullCalendar
        var calendarEl = document.getElementById('calendario-horarios');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'es',
            selectable: true,
            selectMirror: true,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            droppable: true,
            dropAccept: '.colaborador-tarjeta',
            eventReceive: function(info) {
                info.event.remove();
                var colaboradorId = info.draggedEl.dataset.id;
                var colaboradorNombre = info.draggedEl.dataset.nombre;
                var fecha = info.dateStr || (info.event && info.event.startStr);
                $('#colaborador-id').val(colaboradorId);
                $('#fecha-asignacion').val(fecha);
                $('#modalTurnoHorario').modal('show');
            },
            eventAllow: function(dropInfo, draggedEvent) {
                return true;
            }
        });
        calendar.render();

        // Renderizar tablas de horarios según tipo de periodo
        function renderizarTablasHorarios(tipo, horariosGuardados = null, semanasValidas = null, fechasPorSemana = null) {
            const dias = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
            let html = '';
            let diasOcupados = {};
            if (horariosGuardados && horariosGuardados['dias_trabajo']) {
                horariosGuardados['dias_trabajo'].forEach(function(diaTrabajo) {
                    if (diaTrabajo.fechas && diaTrabajo.fechas.length > 0) {
                        diasOcupados[diaTrabajo.fechas[0]] = true;
                    }
                });
            }
            
            if (!window.periodoActivo || !window.periodoActivo.fecha_inicio || !window.periodoActivo.fecha_fin) {
                html += '<div class="alert alert-warning">No hay periodo activo configurado</div>';
                $('#bloque-horarios-semanales').html(html);
                return;
            }
                
            let fechaInicio = moment(window.periodoActivo.fecha_inicio);
            let fechaFin = moment(window.periodoActivo.fecha_fin);
            let semanas = [];
            let fechasPorSemanaLocal = [];
            let diasPorNumero = [];
            let actual = fechaInicio.clone();
            
            while (actual.isSameOrBefore(fechaFin)) {
                let inicioSemana = actual.clone();
                while (inicioSemana.day() !== 1) {
                    inicioSemana.subtract(1, 'day');
                }
                
                let finSemana = inicioSemana.clone().add(6, 'days');
                let diasSemana = [];
                let fechasSemana = {};
                let numerosSemana = {};
                
                let diaActual = inicioSemana.clone();
                for (let i = 0; i < 7; i++) {
                    let diaSemanaIdx = diaActual.day() === 0 ? 6 : diaActual.day() - 1;
                    let nombreDia = dias[diaSemanaIdx];
                    let fechaStr = diaActual.format('YYYY-MM-DD');
                    let numDia = diaActual.date();
                    
                    if (diaActual.isSameOrAfter(fechaInicio) && diaActual.isSameOrBefore(fechaFin)) {
                        diasSemana.push(nombreDia);
                        fechasSemana[nombreDia] = fechaStr;
                        numerosSemana[nombreDia] = numDia;
                    }
                    
                    diaActual.add(1, 'day');
                }
                
                if (diasSemana.length > 0) {
                    semanas.push(diasSemana);
                    fechasPorSemanaLocal.push(fechasSemana);
                    diasPorNumero.push(numerosSemana);
                }
                
                actual = finSemana.clone().add(1, 'day');
            }
            
            for (let s = 0; s < semanas.length; s++) {
                html += `<div class="table-responsive mb-2"><label class="form-label">Semana ${s+1}</label><table class="table table-bordered mb-0 tabla-horario-semanal" data-semana="${s+1}"><thead class="table-light"><tr><th style="width:60px;">Día #</th><th>Día</th><th>Hora de entrada</th><th>Hora de salida</th></tr></thead><tbody>`;
                
                dias.forEach(dia => {
                    let esValido = semanas[s].includes(dia);
                    if (!esValido) return;
                    
                    let numDia = diasPorNumero[s][dia] || '';
                    let fechaCelda = fechasPorSemanaLocal[s][dia] || '';
                    let disabled = '';
                    let required = 'required';
                    let entrada = '';
                    let salida = '';
                    
                    // NUEVO: Obtener horarios de tienda por día
                    let horaEntradaTienda = '09:00';
                    let horaSalidaTienda = '18:00';
                    if (window.datosTiendaActual) {
                        const diaLower = dia.toLowerCase();
                        const mapaDias = {
                            'lunes': { entrada: 'lunes', salida: 'lunesC' },
                            'martes': { entrada: 'martes', salida: 'martesC' },
                            'miércoles': { entrada: 'miercoles', salida: 'miercolesC' },
                            'jueves': { entrada: 'jueves', salida: 'juevesC' },
                            'viernes': { entrada: 'viernes', salida: 'viernesC' },
                            'sábado': { entrada: 'sabado', salida: 'sabadoC' },
                            'domingo': { entrada: 'domingo', salida: 'domingoC' }
                        };
                        if (mapaDias[diaLower]) {
                            horaEntradaTienda = window.datosTiendaActual[mapaDias[diaLower].entrada] || '09:00';
                            horaSalidaTienda = window.datosTiendaActual[mapaDias[diaLower].salida] || '18:00';
                            if (horaEntradaTienda && horaEntradaTienda.length > 5) {
                                horaEntradaTienda = horaEntradaTienda.substring(0, 5);
                            }
                            if (horaSalidaTienda && horaSalidaTienda.length > 5) {
                                horaSalidaTienda = horaSalidaTienda.substring(0, 5);
                            }
                        }
                    }
                    
                    if (diasOcupados[fechaCelda]) {
                        disabled = 'disabled';
                    }
                    
                    if (horariosGuardados && horariosGuardados['dias_trabajo']) {
                        let diaData = null;
                        for (let d of horariosGuardados['dias_trabajo']) {
                            if (d.dia_semana === dia && String(d.semana) === String(s+1)) {
                                diaData = d;
                                break;
                            }
                        }
                        if (diaData) {
                            entrada = diaData.hora_entrada !== '00:00:00' ? diaData.hora_entrada.substring(0,5) : '';
                            salida = diaData.hora_salida !== '00:00:00' ? diaData.hora_salida.substring(0,5) : '';
                            disabled = 'disabled';
                        }
                    }
                    
                    if (!entrada) entrada = horaEntradaTienda;
                    if (!salida) salida = horaSalidaTienda;
                    
                    html += `<tr data-dia="${dia}" data-fecha="${fechaCelda}" data-hora-entrada-tienda="${horaEntradaTienda}" data-hora-salida-tienda="${horaSalidaTienda}"><td class="text-center"><strong>${numDia}</strong></td><td>${dia}</td><td><input type="time" class="form-control" name="entrada_${dia}_semana${s+1}" ${required} value="${entrada}" min="${horaEntradaTienda}" max="${horaSalidaTienda}" ${disabled}></td><td><input type="time" class="form-control" name="salida_${dia}_semana${s+1}" ${required} value="${salida}" min="${horaEntradaTienda}" max="${horaSalidaTienda}" ${disabled}></td></tr>`;
                });
                html += `</tbody></table></div>`;
            }
            
            window.fechasPorSemanaCalculadas = fechasPorSemanaLocal;
            window.totalSemanasCalculadas = semanas.length;
            $('#bloque-horarios-semanales').html(html);
        }

        function calcularFechaInicioAsignacionUI() {
            if (!window.periodoActivo || !window.periodoActivo.fecha_inicio) return null;

            var fechaInicio = window.periodoActivo.fecha_inicio;
            if (!window.colaboradoresSeleccionados || window.colaboradoresSeleccionados.length === 0) {
                return fechaInicio;
            }

            var fechaIngresoMax = null;
            window.colaboradoresSeleccionados.forEach(function(colaborador) {
                if (!colaborador.fechaIngreso) return;
                var ingreso = moment(colaborador.fechaIngreso, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss'], true);
                if (!ingreso.isValid()) return;
                var fechaIngreso = ingreso.format('YYYY-MM-DD');
                if (!fechaIngresoMax || fechaIngreso > fechaIngresoMax) {
                    fechaIngresoMax = fechaIngreso;
                }
            });

            if (fechaIngresoMax && fechaIngresoMax > fechaInicio) {
                return fechaIngresoMax;
            }

            return fechaInicio;
        }

        function aplicarLimiteFechaAsignacionUI() {
            var limite = calcularFechaInicioAsignacionUI();
            if (!limite) return;

            $('.tabla-horario-semanal tbody tr').each(function() {
                var fecha = $(this).attr('data-fecha');
                if (fecha && fecha < limite) {
                    $(this).find('input[type="time"]').prop('disabled', true).val('').removeAttr('required');
                }
            });

            $('.descanso-semana-select').each(function() {
                var $select = $(this);
                $select.find('option').each(function() {
                    var valor = $(this).val();
                    if (!valor) return;
                    var partes = valor.split('|');
                    if (partes.length === 2 && partes[1] < limite) {
                        $(this).prop('disabled', true);
                    }
                });

                if ($select.val()) {
                    var partesSel = $select.val().split('|');
                    if (partesSel.length === 2 && partesSel[1] < limite) {
                        $select.val('');
                    }
                }
            });

            if (window.semanasDescansoAsignar && Array.isArray(window.semanasDescansoAsignar)) {
                window.semanasDescansoAsignar.forEach(function(semanaDias, idx) {
                    var semanaNum = idx + 1;
                    var tieneDiaValido = semanaDias.some(function(diaObj) {
                        return diaObj && diaObj.fecha && diaObj.fecha >= limite;
                    });
                    var $btnAgregar = $(`.btn-add-descanso-asignar[data-semana="${semanaNum}"]`);
                    if ($btnAgregar.length > 0) {
                        $btnAgregar.prop('disabled', !tieneDiaValido);
                    }
                });
            }
        }

        // Cargar periodo activo
        window.periodoActivo = null;
        function cargarPeriodoActivo() {
            return fetch('../../../backend/api/quincena_actual.php')
                .then(r => r.json())
                .then(data => {
                    if (data.success && data.quincena) {
                        window.periodoActivo = data.quincena;
                        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
                                    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                        const textoMes = meses[data.quincena.mes - 1];
                        $('#periodo-activo-texto').html(`<strong>${textoMes} ${data.quincena.anio}</strong> - ${data.quincena.nombre || 'Quincena'} (${data.quincena.fecha_inicio} al ${data.quincena.fecha_fin})`);
                        return data.quincena;
                    }

                    $('#periodo-activo-texto').html('<span class="text-danger">No hay quincena vigente para hoy.</span>');
                    return null;
                })
                .catch(() => {
                    $('#periodo-activo-texto').html('<span class="text-danger">Error al cargar quincena actual</span>');
                    return null;
                });
        }

        // Renderizar descansos por semana
        function renderizarDescansosPorSemana(fechaInicio, fechaFin) {
            const diasSemana = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
            let inicio = moment(fechaInicio);
            let fin = moment(fechaFin);
            let semanas = [];
            let actual = inicio.clone();
            
            while (actual.isSameOrBefore(fin)) {
                let inicioSemana = actual.clone();
                while (inicioSemana.day() !== 1) {
                    inicioSemana.subtract(1, 'day');
                }
                
                let finSemana = inicioSemana.clone().add(6, 'days');
                let diasDeLaSemana = [];
                let diaActual = inicioSemana.clone();
                
                for (let i = 0; i < 7; i++) {
                    let diaSemanaIdx = diaActual.day() === 0 ? 6 : diaActual.day() - 1;
                    let nombreDia = diasSemana[diaSemanaIdx];
                    let fechaStr = diaActual.format('YYYY-MM-DD');
                    let numDia = diaActual.date();
                    
                    if (diaActual.isSameOrAfter(inicio) && diaActual.isSameOrBefore(fin)) {
                        diasDeLaSemana.push({
                            fecha: fechaStr,
                            dia: nombreDia,
                            numDia: numDia
                        });
                    }
                    
                    diaActual.add(1, 'day');
                }
                
                if (diasDeLaSemana.length > 0) {
                    semanas.push(diasDeLaSemana);
                }
                
                actual = finSemana.clone().add(1, 'day');
            }
            
            // Guardar semanas globalmente para uso posterior
            window.semanasDescansoAsignar = semanas;
            
            let html = '';
            for (let s = 0; s < semanas.length; s++) {
                html += `<div class="mb-2" id="semana-descanso-${s+1}">`;
                html += `<label>Semana ${s+1}:</label> `;
                html += renderDescansoSelect(semanas[s], s+1, 1);
                // Botón para agregar más descansos (deshabilitar si solo hay 1 día)
                let disabledAttr = semanas[s].length <= 1 ? 'disabled' : '';
                html += ` <button type="button" class="btn btn-success btn-sm btn-add-descanso-asignar" data-semana="${s+1}" title="Agregar descanso" ${disabledAttr}><i class="fas fa-plus"></i></button>`;
                html += '</div>';
            }
            $('#descansos-por-semana').html(html);
            actualizarContadorDescansosAsignar();
        }

        function renderDescansoSelect(diasSemanaArr, semanaNum, selectNum) {
            let name = `descanso_semana_${semanaNum}_${selectNum}`;
            let html = `<select class="form-select form-select-sm descanso-semana-select mt-1" name="${name}" data-semana="${semanaNum}" data-select="${selectNum}">`;
            html += '<option value="">Sin descanso</option>';
            diasSemanaArr.forEach(function(diaObj) {
                html += `<option value="${diaObj.dia}|${diaObj.fecha}">${diaObj.dia} ${diaObj.numDia} (${diaObj.fecha})</option>`;
            });
            html += '</select>';
            return html;
        }

        // Al cambiar descanso, bloquear días en tabla
        $(document).on('change', '.descanso-semana-select', function() {
            actualizarContadorDescansosAsignar();
            validarDuplicadosEnSemana($(this));
            bloquearDiasDescansoEnTabla();
        });
        
        // Función para validar duplicados en la misma semana
        function validarDuplicadosEnSemana($select) {
            let $container = $select.closest('div[id^="semana-descanso-"]');
            let selects = $container.find('.descanso-semana-select');
            let valores = [];
            selects.each(function() {
                if ($(this).val()) valores.push($(this).val());
            });
            selects.each(function() {
                let $sel = $(this);
                $sel.find('option').each(function() {
                    if ($(this).val() !== '' && !$(this).prop('disabled') && valores.filter(v => v === $(this).val()).length > 1) {
                        $(this).prop('disabled', true);
                    } else if ($(this).val() !== '' && valores.filter(v => v === $(this).val()).length <= 1) {
                        $(this).prop('disabled', false);
                    }
                });
            });
        }
        
        // Función para actualizar el contador de descansos
        function actualizarContadorDescansosAsignar() {
            let totalDescansos = 0;
            $('.descanso-semana-select').each(function() {
                if ($(this).val() && $(this).val() !== '') {
                    totalDescansos++;
                }
            });
            
            let $contador = $('#contador-descansos-asignar');
            let $texto = $('#texto-contador-descansos-asignar');
            
            if (totalDescansos === 0) {
                $contador.hide();
            } else if (totalDescansos >= 3) {
                $contador.removeClass('alert-info alert-danger').addClass('alert-warning');
                $texto.html('<strong>Límite de 3 descansos quincenales alcanzado.</strong> Si deseas agregar otro, primero debes quitar uno existente.');
                $contador.show();
                
                // Deshabilitar todos los botones de agregar
                $('.btn-add-descanso-asignar').prop('disabled', true);
                
                // Deshabilitar los selects vacíos y ponerlos en "Sin descanso"
                $('.descanso-semana-select').each(function() {
                    if (!$(this).val() || $(this).val() === '') {
                        $(this).val('').prop('disabled', true);
                    }
                });
            } else {
                $contador.removeClass('alert-danger alert-warning').addClass('alert-info');
                $texto.html(`Has seleccionado <strong>${totalDescansos} de 3</strong> descansos permitidos en este periodo.`);
                $contador.show();
                
                // Habilitar selects deshabilitados previamente
                $('.descanso-semana-select').prop('disabled', false);
                
                // Habilitar/deshabilitar botones de agregar según días disponibles en cada semana
                $('.btn-add-descanso-asignar').each(function() {
                    let semana = $(this).data('semana');
                    let $container = $(`#semana-descanso-${semana}`);
                    let countSelects = $container.find('.descanso-semana-select').length;
                    let diasDisponibles = window.semanasDescansoAsignar ? window.semanasDescansoAsignar[semana-1].length : 7;
                    
                    // Deshabilitar si ya hay un select por cada día disponible
                    if (countSelects >= diasDisponibles) {
                        $(this).prop('disabled', true);
                    } else {
                        $(this).prop('disabled', false);
                    }
                });
            }
        }
        
        // Evento para agregar un select de descanso adicional
        $(document).on('click', '.btn-add-descanso-asignar', function() {
            let totalDescansos = 0;
            $('.descanso-semana-select').each(function() {
                if ($(this).val() && $(this).val() !== '') {
                    totalDescansos++;
                }
            });
            
            // Si ya hay 3 descansos, no hacer nada (el botón ya debería estar deshabilitado)
            if (totalDescansos >= 3) {
                return;
            }
            
            let semana = $(this).data('semana');
            let $container = $(`#semana-descanso-${semana}`);
            let count = $container.find('.descanso-semana-select').length;
            let diasSemanaArr = window.semanasDescansoAsignar[semana-1];
            
            // NUEVA VALIDACIÓN: No permitir agregar más selects que días disponibles en la semana
            if (count >= diasSemanaArr.length) {
                return; // No hacer nada, ya hay un select por cada día disponible
            }
            
            let nuevoSelect = renderDescansoSelect(diasSemanaArr, semana, count+1);
            nuevoSelect += ` <button type="button" class="btn btn-danger btn-sm btn-remove-descanso-asignar" title="Quitar descanso"><i class="fas fa-minus"></i></button>`;
            $(this).before(nuevoSelect);
            actualizarContadorDescansosAsignar();
            aplicarLimiteFechaAsignacionUI();
        });
        
        // Evento para quitar un select de descanso
        $(document).on('click', '.btn-remove-descanso-asignar', function() {
            $(this).prev('select').remove();
            $(this).remove();
            actualizarContadorDescansosAsignar();
            bloquearDiasDescansoEnTabla();
            aplicarLimiteFechaAsignacionUI();
        });
        
        function bloquearDiasDescansoEnTabla() {
            $('.tabla-horario-semanal tr').each(function() {
                if (!$(this).hasClass('dia-no-laborable')) {
                    let $entrada = $(this).find('input[type="time"][name^="entrada_"]');
                    let $salida = $(this).find('input[type="time"][name^="salida_"]');
                    
                    if ($(this).hasClass('dia-descanso')) {
                        let horaEntradaTienda = $(this).attr('data-hora-entrada-tienda') || '09:00';
                        let horaSalidaTienda = $(this).attr('data-hora-salida-tienda') || '18:00';
                        
                        $entrada.prop('disabled', false);
                        $salida.prop('disabled', false);
                        $entrada.removeAttr('placeholder');
                        $salida.removeAttr('placeholder');
                        $(this).removeClass('dia-descanso');
                        
                        // CORREGIDO: Restaurar valores de horario de tienda en lugar de genéricos
                        if (!$entrada.val() || $entrada.val() === '') $entrada.val(horaEntradaTienda);
                        if (!$salida.val() || $salida.val() === '') $salida.val(horaSalidaTienda);
                    }
                }
            });
            
            $('.descanso-semana-select').each(function() {
                let valor = $(this).val();
                if (valor && valor !== '') {
                    let [dia, fecha] = valor.split('|');
                    let semana = $(this).data('semana');
                    let $tabla = $(`.tabla-horario-semanal[data-semana="${semana}"]`);
                    let $fila = $tabla.find(`tbody tr[data-fecha="${fecha}"]`);
                    
                    if ($fila.length > 0 && !$fila.hasClass('dia-no-laborable')) {
                        $fila.find('input[type="time"]').prop('disabled', true).val('');
                        $fila.find('input[type="time"]').attr('placeholder', '------');
                        $fila.addClass('dia-descanso');
                    }
                }
            });
        }

        // Inicializar modal de asignar
        $('#modalAsignarHorario').on('show.bs.modal', function() {
            cargarPeriodoActivo().then(periodo => {
                if (periodo) {
                    renderizarTablasHorarios('semanal');
                    aplicarLimiteFechaAsignacionUI();
                    setTimeout(function() {
                        renderizarDescansosPorSemana(periodo.fecha_inicio, periodo.fecha_fin);
                        aplicarLimiteFechaAsignacionUI();
                    }, 200);
                }
            });
        });

        // Botón asignar horario
        $('#btn-asignar-horario').on('click', function() {
            var seleccionados = [];
            $('#empleados-nuevo-ingreso-list .colaborador-tarjeta').each(function() {
                if ($(this).hasClass('selected')) {
                    seleccionados.push({
                        id: $(this).data('id'),
                        nombre: $(this).data('nombre'),
                        fechaIngreso: $(this).data('fecha-ingreso')
                    });
                }
            });
            if (seleccionados.length === 0) {
                return;
            }
            window.colaboradoresSeleccionados = seleccionados;
            var listaHtml = '';
            seleccionados.forEach(function(colaborador) {
                listaHtml += '<li data-id="' + colaborador.id + '" data-fecha-ingreso="' + (colaborador.fechaIngreso || '') + '">' + colaborador.nombre + ' (ID: ' + colaborador.id + ')</li>';
            });
            $('#lista-colaboradores-seleccionados').html(listaHtml);
            $('#modalAsignarHorario').modal('show');
        });

        // Submit del formulario de asignar
        $('#form-asignar-horario').on('submit', function(e) {
            e.preventDefault();
            
            if (!window.periodoActivo) {
                Swal.fire({
                    icon: 'error',
                    title: 'Sin periodo activo',
                    text: 'No hay un periodo configurado. Contacta al administrador.'
                });
                return;
            }
            
            var id_quincena = window.periodoActivo.id_quincena;
            var tipoPeriodo = "semanal";
            var conflictivos = [];
            var asignados = [];
            var seleccionados = [];
            $('#lista-colaboradores-seleccionados li').each(function() {
                var id = $(this).data('id');
                if (id) {
                    seleccionados.push({
                        id: id,
                        fechaIngreso: $(this).data('fecha-ingreso') || null
                    });
                }
            });
            
            var descansosPorSemana = [];
            var diasDescansoConFecha = {};
            $('.descanso-semana-select').each(function() {
                var valor = $(this).val();
                if (valor && valor !== '') {
                    descansosPorSemana.push(valor);
                    var partes = valor.split('|');
                    if (partes.length === 2) {
                        var dia = partes[0];
                        var fecha = partes[1];
                        diasDescansoConFecha[fecha] = dia;
                    }
                }
            });
            
            // NUEVO: Validar horarios contra horario de tienda
            let conflictosHorario = [];
            $('.tabla-horario-semanal tbody tr').each(function() {
                if (!$(this).find('input[type="time"]').first().prop('disabled')) {
                    const dia = $(this).attr('data-dia');
                    const fecha = $(this).attr('data-fecha');
                    const horaEntradaTienda = $(this).attr('data-hora-entrada-tienda');
                    const horaSalidaTienda = $(this).attr('data-hora-salida-tienda');
                    const entradaInput = $(this).find('input[name^="entrada_"]').val();
                    const salidaInput = $(this).find('input[name^="salida_"]').val();
                    
                    if (!diasDescansoConFecha[fecha] && entradaInput && salidaInput) {
                        if (entradaInput < horaEntradaTienda || entradaInput > horaSalidaTienda) {
                            conflictosHorario.push(`${dia}: Hora de entrada ${entradaInput} fuera del horario de tienda (${horaEntradaTienda}-${horaSalidaTienda})`);
                        }
                        if (salidaInput < horaEntradaTienda || salidaInput > horaSalidaTienda) {
                            conflictosHorario.push(`${dia}: Hora de salida ${salidaInput} fuera del horario de tienda (${horaEntradaTienda}-${horaSalidaTienda})`);
                        }
                    }
                }
            });
            
            if (conflictosHorario.length > 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Horarios fuera del rango de tienda',
                    html: '<strong>No es posible asignar horarios fuera del horario de la tienda:</strong><br><br>' + conflictosHorario.join('<br>'),
                    confirmButtonText: 'Entendido'
                });
                return;
            }
            
            var horarios = {};
            const dias = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
            let fechasPorSemana = window.fechasPorSemanaCalculadas || [];
            let totalSemanas = window.totalSemanasCalculadas || 3;
                
            for (let s = 1; s <= totalSemanas; s++) {
                horarios['semana'+s] = {};
                $(`.tabla-horario-semanal[data-semana="${s}"] tbody tr`).each(function() {
                    var dia = $(this).find('td:eq(1)').text().trim();
                    var $entrada = $(this).find(`input[name^="entrada_${dia}_semana${s}"]`);
                    var $salida = $(this).find(`input[name^="salida_${dia}_semana${s}"]`);
                    var entradaDia = $entrada.val();
                    var salidaDia = $salida.val();
                    var fechaDia = (fechasPorSemana[s-1] && fechasPorSemana[s-1][dia]) || null;
                    
                    if ($entrada.prop('disabled') || (fechaDia && diasDescansoConFecha[fechaDia])) {
                        entradaDia = '00:00';
                        salidaDia = '00:00';
                    }
                    
                    horarios['semana'+s][dia] = { 
                        entrada: entradaDia, 
                        salida: salidaDia, 
                        fecha: fechaDia 
                    };
                });
            }
            
            var pendientes = seleccionados.length;
            var periodoTexto = `${window.periodoActivo.fecha_inicio} al ${window.periodoActivo.fecha_fin}`;
            seleccionados.forEach(function(colaborador) {
                var fechaInicioAsignacion = window.periodoActivo.fecha_inicio;
                if (colaborador.fechaIngreso) {
                    var ingreso = moment(colaborador.fechaIngreso, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss'], true);
                    if (ingreso.isValid() && ingreso.isAfter(moment(fechaInicioAsignacion, 'YYYY-MM-DD', true))) {
                        fechaInicioAsignacion = ingreso.format('YYYY-MM-DD');
                    }
                }

                var horariosColaborador = JSON.parse(JSON.stringify(horarios));
                Object.keys(horariosColaborador).forEach(function(semanaKey) {
                    Object.keys(horariosColaborador[semanaKey]).forEach(function(diaKey) {
                        var fechaDia = horariosColaborador[semanaKey][diaKey].fecha;
                        if (fechaDia && fechaInicioAsignacion && fechaDia < fechaInicioAsignacion) {
                            horariosColaborador[semanaKey][diaKey].entrada = '00:00';
                            horariosColaborador[semanaKey][diaKey].salida = '00:00';
                            horariosColaborador[semanaKey][diaKey].fecha = null;
                        }
                    });
                });

                var descansosFiltrados = descansosPorSemana.filter(function(descanso) {
                    var partes = descanso.split('|');
                    var fechaDescanso = partes.length === 2 ? partes[1] : null;
                    if (!fechaDescanso || !fechaInicioAsignacion) {
                        return true;
                    }
                    return fechaDescanso >= fechaInicioAsignacion;
                });

                var postData = {
                    curp: colaborador.id,
                    id_quincena: id_quincena,
                    tipo_periodo: tipoPeriodo,
                    horarios: JSON.stringify(horariosColaborador),
                    descansos: JSON.stringify(descansosFiltrados),
                    fecha_inicio_asignacion: fechaInicioAsignacion
                };
                if (tipoPeriodo === 'semanal') {
                    postData['periodo_texto'] = periodoTexto;
                }
                $.post('../../../backend/api/asignar_horario_semanal.php', postData, function(response) {
                    if (typeof response === 'string') response = JSON.parse(response);
                    if (!response.success) {
                        conflictivos.push(colaborador.id);
                    } else {
                        asignados.push(colaborador.id);
                    }
                    pendientes--;
                    if (pendientes === 0) {
                        $('#modalAsignarHorario').modal('hide');
                        asignados.forEach(function(colaboradorId) {
                            var $tarjeta = $('#empleados-nuevo-ingreso-list .colaborador-tarjeta[data-id="' + colaboradorId + '"]');
                            $tarjeta.addClass('disabled-colaborador');
                            $tarjeta.find('input[type="checkbox"]').prop('disabled', true);
                            $tarjeta.attr('title', 'Ya tiene horario asignado');
                        });
                        if (conflictivos.length > 0) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Colaboradores ya asignados',
                                html: 'Algunos colaboradores ya cuentan con horario para la quincena seleccionada.'
                            }).then(() => {
                                location.reload();
                            });
                        } else if (asignados.length > 0) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Horarios asignados',
                                text: 'Horarios asignados correctamente.'
                            }).then(() => {
                                location.reload();
                            });
                        }
                    }
                });
            });
        });

        // Cargar periodo al inicio
        cargarPeriodoActivo().then(function(periodo) {
            if (periodo) {
                renderizarTablasHorarios('semanal');
            }
        });
        
        // Cargar datos de horarios de tienda al inicio
        window.datosTiendaActual = null;
        fetch('../../../backend/api/horarios_tiendas.php')
            .then(res => res.json())
            .then(resp => {
                if (resp.success && resp.data && resp.data.length > 0) {
                    window.datosTiendaActual = resp.data[0];
                    console.log('Horarios de tienda cargados:', window.datosTiendaActual);
                }
            })
            .catch(err => console.error('Error cargando horarios de tienda:', err));
        
        // ========== FIN: FUNCIONALIDAD IDÉNTICA A CREAR.PHP ==========

        // ========== INICIO: CARGA Y EDICIÓN DE HORARIOS ASIGNADOS (ÚNICO EN EDITAR HORARIO) ==========
        
        // Cargar y renderizar horario asignado para edición
        function cargarYRenderizarHorarioAsignadoEditar(curp, id_quincena, tipo_periodo) {
            return $.get('../../../backend/api/horario_asignado.php', { curp, id_quincena, tipo_periodo })
                .done(function(response) {
                    if (response.success && response.data) {
                        // Renderizar tabla de horarios
                        renderizarTablasHorarios('semanal', response.data);
                        
                        // Mostrar información adicional si es necesario
                        let infoHtml = `Horario asignado para la quincena ${id_quincena}`;
                        $('#info-horario-asignado').html(infoHtml).show();
                    } else {
                        $('#info-horario-asignado').html('').hide();
                    }
                })
                .fail(function() {
                    $('#info-horario-asignado').html('<span class="text-danger">Error al cargar horario asignado</span>').show();
                });
        }

        // Cargar descansos existentes para el colaborador en el periodo seleccionado
        function cargarDescansosExistentesEditar(curp, id_quincena) {
            return $.get('../../../backend/api/descansos_existentes.php', { curp, id_quincena })
                .done(function(response) {
                    if (response.success && response.data) {
                        // Llenar selects de descanso
                        response.data.forEach(function(descanso, index) {
                            let select = $(`#descanso_semana_${descanso.semana}_1`);
                            if (select.length > 0) {
                                select.val(`${descanso.dia}|${descanso.fecha}`).trigger('change');
                            }
                        });
                    }
                });
        }

        // Inicializar modal de edición
        $('#modalEditarHorario').on('show.bs.modal', function() {
            // --- NUEVO: Cargar datos de la tienda si no están ya cargados ---
            fetch('../../../backend/api/horarios_tiendas.php')
                .then(res => res.json())
                .then(resp => {
                    if (resp.success && resp.data && resp.data.length > 0) {
                        window.datosTiendaActual = resp.data[0];
                    }
                });

            cargarPeriodoActivo().then(periodo => {
                if (periodo) {
                    // Obtener CURP del colaborador seleccionado
                    const curp = $('#lista-colaboradores-editar li').first().text().match(/ID: (\w+)/)?.[1];

                    if (curp) {
                        // Cargar horarios existentes del colaborador
                        cargarYRenderizarHorarioAsignadoEditar(curp, periodo.id_quincena, 'semanal');

                        // Renderizar descansos después de un delay
                        setTimeout(function() {
                            renderizarDescansosPorSemanaEditar(periodo.fecha_inicio, periodo.fecha_fin);
                            // Cargar días de descanso existentes
                            cargarDescansosExistentesEditar(curp, periodo.id_quincena);

                            // Aplicar validaciones de descansos obligatorios y bloqueo de días
                            setTimeout(function() {
                                if (typeof aplicarDescansosObligatoriosEditar === 'function') {
                                    aplicarDescansosObligatoriosEditar();
                                }
                                if (typeof bloquearDiasNoLaborablesEditar === 'function') {
                                    bloquearDiasNoLaborablesEditar();
                                }
                                // NUEVO: Aplicar bloqueo de días de descanso seleccionados
                                if (typeof bloquearDiasDescansoEnTablaEditar === 'function') {
                                    bloquearDiasDescansoEnTablaEditar();
                                }
                            }, 400);
                        }, 300);
                    }

                    // Formatear el texto del periodo para mostrar solo el rango y mes/año
                    if (periodo.fecha_inicio && periodo.fecha_fin && periodo.mes && periodo.anio) {
                        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                        const mesNombre = meses[periodo.mes - 1];
                        const diaInicio = periodo.fecha_inicio.split('-')[2];
                        const diaFin = periodo.fecha_fin.split('-')[2];
                        $('#periodo-editar-texto').html(`[${diaInicio} al ${diaFin}] ${mesNombre} de ${periodo.anio}`);
                    } else {
                        $('#periodo-editar-texto').html($('#periodo-activo-texto').html());
                    }
                }
            });
        });
        
        // ========== FIN: CARGA Y EDICIÓN DE HORARIOS ASIGNADOS (ÚNICO EN EDITAR HORARIO) ==========
    });
    </script>
</body>
</html>
