<?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>Crear Horario - 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); /* Ajusta 220px según header, margen y footer */
        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">
    <!-- Topbar se incluye aquí -->
    <?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 activos</h6>
                    </div>
                    <div class="card-body p-2 empleados-list-scroll" id="empleados-list">
                        <div class="text-center text-muted">Cargando colaboradores...</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-calendar-plus me-2"></i>Crear Nuevo Horario
                        </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>
                        <form id="form-crear-horario" action="<?php echo dirname(dirname(__DIR__)) . '/controllers/horarios/procesar_crear.php'; ?>" method="POST" style="display:none;">
                            <!-- Aquí se generará dinámicamente la tabla de asignación de horarios por colaborador y día -->
                        </form>

                        <!-- 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:none;width:100%;">Replicar semana 1 en semanas 2 y 3</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:none;width:100%;">Replicar semana 1 en semanas 2 y 3</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 class="alert alert-info" id="contador-descansos-editar" style="display:none;">
              <i class="fas fa-info-circle"></i> <span id="texto-contador-descansos-editar"></span>
            </div>
            <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__ . '/editar_modal.php'; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 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() {
        // Inicializar datepicker para la semana (si se usa en otro lado)
        $('.datepicker').datepicker({
            language: 'es',
            autoclose: true,
            weekStart: 1,
            todayHighlight: true
        });

        // Drag & drop para colaboradores activos
        $(document).on('mousedown', '#empleados-list .colaborador-tarjeta', function(e) {
            $(this).attr('draggable', 'true');
        });
        $(document).on('dragstart', '#empleados-list .colaborador-tarjeta', function(e) {
            e.originalEvent.dataTransfer.setData('colaborador-id', $(this).data('id'));
            e.originalEvent.dataTransfer.setData('colaborador-nombre', $(this).data('nombre'));
        });

        // Inicializar FullCalendar (versión global, sin plugins)
        var calendarEl = document.getElementById('calendario-horarios');
        
        // Cargar periodo activo primero para establecer la fecha inicial del calendario
        cargarPeriodoActivo().then(function(periodo) {
            var initialDate = new Date(); // Por defecto, hoy
            
            if (periodo && periodo.fecha_inicio) {
                // Si hay periodo activo, usar la fecha de inicio del periodo
                initialDate = periodo.fecha_inicio;
            }
            
            window.calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                initialDate: initialDate, // <-- NUEVO: Usar fecha del periodo activo
                locale: 'es',
                selectable: true,
                selectMirror: true,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: ''
                },
                droppable: true,
                dropAccept: '.colaborador-tarjeta',
                eventReceive: function(info) {
                    // Eliminar el evento temporal que se crea al dropear
                    info.event.remove();
                    // Obtener datos del colaborador
                    var colaboradorId = info.draggedEl.dataset.id;
                    var colaboradorNombre = info.draggedEl.dataset.nombre;
                    var fecha = info.dateStr || (info.event && info.event.startStr);
                    // Guardar datos en el modal
                    $('#colaborador-id').val(colaboradorId);
                    $('#fecha-asignacion').val(fecha);
                    $('#modalTurnoHorario').modal('show');
                },
                // Permitir drop en cualquier día del calendario
                eventAllow: function(dropInfo, draggedEvent) {
                    return true;
                }
            });
            window.calendar.render();
            
            // Agregar evento datesSet después de renderizar
            window.calendar.on('datesSet', function() {
                // Esta función se ejecutará cada vez que cambie el mes en el calendario
                if (typeof cargarHorariosAsignadosEnCalendario === 'function') {
                    cargarHorariosAsignadosEnCalendario();
                }
            });
        });

        // Lógica para limitar horas según turno
        $('#turno').on('change', function() {
            if ($(this).val() === 'matutino') {
                $('#hora-entrada').attr({ min: '08:40', max: '12:00', value: '08:40' });
                $('#hora-salida').attr({ min: '12:00', max: '20:00', value: '16:00' });
            } else {
                $('#hora-entrada').attr({ min: '12:00', max: '20:00', value: '12:00' });
                $('#hora-salida').attr({ min: '12:00', max: '20:00', value: '20:00' });
            }
        }).trigger('change');

        // Guardar asignación de turno y horario
        $('#form-turno-horario').on('submit', function(e) {
            e.preventDefault();
            var colaboradorId = $('#colaborador-id').val();
            var fecha = $('#fecha-asignacion').val();
            var turno = $('#turno').val();
            var entrada = $('#hora-entrada').val();
            var salida = $('#hora-salida').val();
            entrada = entrada ? entrada.substring(0,5) : '';
            salida = salida ? salida.substring(0,5) : '';
            // Enviar AJAX al backend para asignar el horario y mostrar SweetAlert según respuesta
            $.post('../../backend/api/asignar_horario_semanal.php', {
                curp: colaboradorId,
                id_quincena: $('#periodo-asignacion').val(),
                horarios: JSON.stringify(window.obtenerHorarioSemanalDelModal())
            }, function(response) {
                if (typeof response === 'string') response = JSON.parse(response);
                if (!response.success) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'No se pudo asignar el horario.'
                    });
                    return;
                }
                $('#modalTurnoHorario').modal('hide');
                calendar.addEvent({
                    title: turno.charAt(0).toUpperCase() + turno.slice(1) + ' (' + entrada + '-' + salida + ')',
                    start: fecha,
                    allDay: true,
                    extendedProps: { colaboradorId: colaboradorId, turno: turno, entrada: entrada, salida: salida }
                });
                var $tarjeta = $('#empleados-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');
                Swal.fire({
                    icon: 'success',
                    title: 'Horario asignado',
                    text: 'Horario semanal asignado correctamente.'
                });
            });
        });

        // Selector de modo de asignación (día/quincena)
        $('#modo-asignacion').on('change', function() {
            var modo = $(this).val();
            var fecha = calendar.getDate();
            var year = fecha.getFullYear();
            var month = (fecha.getMonth() + 1).toString().padStart(2, '0');
            if (modo === 'quincena1') {
                calendar.select(year + '-' + month + '-01', year + '-' + month + '-15');
            } else if (modo === 'quincena2') {
                var lastDay = new Date(year, fecha.getMonth() + 1, 0).getDate();
                calendar.select(year + '-' + month + '-16', year + '-' + month + '-' + lastDay);
            } else {
                calendar.unselect();
            }
        });

        // Asignar horario a colaboradores seleccionados
        $('#btn-asignar-horario').on('click', function() {
            // Obtener colaboradores seleccionados
            var seleccionados = [];
            $('#empleados-list .colaborador-tarjeta').each(function() {
                if ($(this).hasClass('selected')) {
                    seleccionados.push({
                        id: $(this).data('id'),
                        nombre: $(this).data('nombre')
                    });
                }
            });
            if (seleccionados.length === 0) {
                // Eliminar mensaje plano de error en el modal de asignación múltiple
                // $('#lista-colaboradores-seleccionados').html('<li class="text-danger">Seleccione al menos un colaborador.</li>');
                return;
            }
            // Mostrar lista de colaboradores en el modal
            var listaHtml = '';
            seleccionados.forEach(function(colaborador) {
                listaHtml += '<li>' + colaborador.nombre + ' (ID: ' + colaborador.id + ')</li>';
            });
            $('#lista-colaboradores-seleccionados').html(listaHtml);
            // Mostrar modal
            $('#modalAsignarHorario').modal('show');
        });

        // Cambiar vista de calendario
        $('#calendario-horarios').on('click', '.fc-day', function() {
            var fecha = $(this).data('date');
            var modo = $('#modo-asignacion').val();
            if (modo === 'dia') {
                // Seleccionar/deseleccionar día
                $(this).toggleClass('fc-selected');
            } else {
                // Seleccionar rango de fechas según quincena
                var start, end;
                if (modo === 'quincena1') {
                    start = moment(fecha).date(1).startOf('day');
                    end = moment(fecha).date(15).endOf('day');
                } else {
                    start = moment(fecha).date(16).startOf('day');
                    end = moment(fecha).endOf('month').endOf('day');
                }
                calendar.select(start, end);
            }
        });

        // Actualizar formulario según periodo seleccionado
        $('#periodo-asignacion').on('change', function() {
            var periodo = $(this).val();
            if (periodo === 'dia') {
                $('#selector-dia').show();
            } else {
                $('#selector-dia').hide();
            }
        }).trigger('change');

        // 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 = '';
            // --- Obtener días ya ocupados (no modificables) ---
            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;
                    }
                });
            }
            // SIEMPRE renderizar en modo semanal
            // --- NUEVO: Generar semanas NATURALES (Lun-Dom) dentro de la quincena ---
            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);
                
                // Calcular semanas naturales: cada semana va de Lunes a Domingo
                let semanas = [];
                let fechasPorSemanaLocal = [];
                let diasPorNumero = [];
                
                let actual = fechaInicio.clone();
                
                // Encontrar todas las semanas que contienen días de la quincena
                while (actual.isSameOrBefore(fechaFin)) {
                    // Encontrar el inicio de la semana (Lunes)
                    let inicioSemana = actual.clone();
                    while (inicioSemana.day() !== 1) { // 1 = Lunes
                        inicioSemana.subtract(1, 'day');
                    }
                    
                    // Encontrar el fin de la semana (Domingo)
                    let finSemana = inicioSemana.clone().add(6, 'days'); // Domingo
                    
                    // Crear objeto para esta semana
                    let diasSemana = [];
                    let fechasSemana = {};
                    let numerosSemana = {};
                    
                    // Recorrer los 7 días de la semana
                    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();
                        
                        // Verificar si este día está dentro de la quincena
                        if (diaActual.isSameOrAfter(fechaInicio) && diaActual.isSameOrBefore(fechaFin)) {
                            diasSemana.push(nombreDia);
                            fechasSemana[nombreDia] = fechaStr;
                            numerosSemana[nombreDia] = numDia;
                        }
                        
                        diaActual.add(1, 'day');
                    }
                    
                    // Solo agregar si hay días en esta semana
                    if (diasSemana.length > 0) {
                        semanas.push(diasSemana);
                        fechasPorSemanaLocal.push(fechasSemana);
                        diasPorNumero.push(numerosSemana);
                    }
                    
                    // Mover al inicio de la siguiente semana
                    actual = finSemana.clone().add(1, 'day');
                }
                
                // Renderizar las semanas (pueden ser 2 o 3 dependiendo de cómo caiga la quincena)
                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>`;
                    
                    // Recorrer TODOS los días de la semana (Lun-Dom) pero SOLO renderizar los que están en la quincena
                    dias.forEach(dia => {
                        let esValido = semanas[s].includes(dia);
                        
                        // NUEVO: Solo renderizar si el día está en la quincena
                        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';
                                // Formatear a HH:MM si vienen como HH:MM:SS
                                if (horaEntradaTienda && horaEntradaTienda.length > 5) {
                                    horaEntradaTienda = horaEntradaTienda.substring(0, 5);
                                }
                                if (horaSalidaTienda && horaSalidaTienda.length > 5) {
                                    horaSalidaTienda = horaSalidaTienda.substring(0, 5);
                                }
                            }
                        }
                        
                        // Si el día ya está ocupado, deshabilitar
                        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>`;
                }
                
                // Guardar las fechas calculadas para uso posterior
                window.fechasPorSemanaCalculadas = fechasPorSemanaLocal;
                window.totalSemanasCalculadas = semanas.length;
            $('#bloque-horarios-semanales').html(html);
        }

        // --- NUEVO: Cargar y renderizar horarios asignados al seleccionar colaborador y periodo ---
        // NUEVO: calcular fechas exactas por semana/día para mapear con el backend
        function calcularFechasPorSemana(fechaInicio, fechaFin, dias) {
            let semanas = [[],[],[]];
            let fechasPorSemana = [ {}, {}, {} ];
            if (fechaInicio && fechaFin) {
                let actual = fechaInicio.clone();
                let semanaIdx = 0;
                for (let i = 0; i < 7 && actual.isSameOrBefore(fechaFin); i++) {
                    let diaIdx = actual.day() === 0 ? 6 : actual.day() - 1;
                    semanas[semanaIdx].push(dias[diaIdx]);
                    fechasPorSemana[semanaIdx][dias[diaIdx]] = actual.format('YYYY-MM-DD');
                    if (actual.day() === 0) break;
                    actual.add(1, 'days');
                }
                semanaIdx++;
                if (actual.isSameOrBefore(fechaFin)) {
                    if (actual.day() !== 1) {
                        while (actual.day() !== 1 && actual.isSameOrBefore(fechaFin)) {
                            actual.add(1, 'days');
                        }
                    }
                    for (let i = 0; i < 7 && actual.isSameOrBefore(fechaFin); i++) {
                        let diaIdx = actual.day() === 0 ? 6 : actual.day() - 1;
                        semanas[semanaIdx].push(dias[diaIdx]);
                        fechasPorSemana[semanaIdx][dias[diaIdx]] = actual.format('YYYY-MM-DD');
                        actual.add(1, 'days');
                    }
                    if (semanas[semanaIdx].length > 0) semanaIdx++;
                }
                if (actual.isSameOrBefore(fechaFin)) {
                    if (actual.day() !== 1) {
                        while (actual.day() !== 1 && actual.isSameOrBefore(fechaFin)) {
                            actual.add(1, 'days');
                        }
                    }
                    while (actual.isSameOrBefore(fechaFin)) {
                        let diaIdx = actual.day() === 0 ? 6 : actual.day() - 1;
                        semanas[semanaIdx].push(dias[diaIdx]);
                        fechasPorSemana[semanaIdx][dias[diaIdx]] = actual.format('YYYY-MM-DD');
                        actual.add(1, 'days');
                    }
                }
            } else {
                semanas = [dias.slice(), dias.slice(), dias.slice()];
            }
            return { semanas, fechasPorSemana };
        }

        async function cargarYRenderizarHorarioAsignado(curp, id_quincena, tipoPeriodo) {
            // Obtener año y mes del periodo activo
            if (!window.periodoActivo) return renderizarTablasHorarios(tipoPeriodo);
            
            let year = window.periodoActivo.anio;
            let month = window.periodoActivo.mes;
            let fechaInicio = window.periodoActivo.fecha_inicio;
            let fechaFin = window.periodoActivo.fecha_fin;
            
            // Petición AJAX al backend
            let horariosGuardados = null;
            let semanasValidas = null;
            let fechasPorSemana = null;
            try {
                let resp = await fetch(`../../../backend/api/horarios_asignados_mes.php?year=${year}&month=${month}`);
                let data = await resp.json();
                if (data.success && Array.isArray(data.horarios)) {
                    // Buscar el horario de este colaborador y quincena
                    let horario = data.horarios.find(h => h.curp === curp && h.fecha_inicio === fechaInicio && h.fecha_fin === fechaFin);
                    if (horario) {
                        // Calcular semanas y fechas exactas por semana/día
                        let dias = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
                        let fechaInicioMoment = moment(horario.fecha_inicio);
                        let fechaFinMoment = moment(horario.fecha_fin);
                        let calculo = calcularFechasPorSemana(fechaInicioMoment, fechaFinMoment, dias);
                        semanasValidas = calculo.semanas;
                        fechasPorSemana = calculo.fechasPorSemana;
                        horariosGuardados = horario;
                    }
                }
            } catch (e) { /* ignorar */ }
            renderizarTablasHorarios(tipoPeriodo, horariosGuardados, semanasValidas, fechasPorSemana);
            // --- NUEVO: Filtrar eventos para el calendario por semana ---
            if (horariosGuardados && horariosGuardados['dias_trabajo']) {
                // Limpiar eventos previos del calendario
                if (window.calendar && typeof window.calendar.getEvents === 'function') {
                    window.calendar.getEvents().forEach(ev => {
                        if (ev.extendedProps && ev.extendedProps.resumenHorario) ev.remove();
                    });
                }
                // Obtener semana actual seleccionada (por defecto mostrar todas, pero solo un evento por semana/día)
                let semanasMostradas = [1,2,3];
                // Si quieres mostrar solo la semana actual, puedes ajustar aquí
                horariosGuardados['dias_trabajo'].forEach(function(diaTrabajo) {
                    // Solo agregar si la semana está en las mostradas
                    if (semanasMostradas.includes(Number(diaTrabajo.semana))) {
                        (diaTrabajo.fechas || []).forEach(function(fecha) {
                            // Solo agregar el evento si corresponde a la semana
                            let semanaFecha = semanasValidas ? semanasValidas[Number(diaTrabajo.semana)-1] : null;
                            if (semanaFecha && semanaFecha.includes(diaTrabajo.dia_semana)) {
                                // Evitar duplicados: solo agregar si no existe ya un evento para ese colaborador/día/semana
                                if (window.calendar) {
                                    let existe = window.calendar.getEvents().some(ev => ev.startStr === fecha && ev.title.includes(horariosGuardados.NOMBRES));
                                    if (!existe) {
                                        window.calendar.addEvent({
                                            title: `${horariosGuardados.NOMBRES} (${diaTrabajo.hora_entrada.substring(0,5)}-${diaTrabajo.hora_salida.substring(0,5)})`,
                                            start: fecha,
                                            allDay: true,
                                            extendedProps: { resumenHorario: true, colaboradorId: horariosGuardados.curp, semana: diaTrabajo.semana }
                                        });
                                    }
                                }
                            }
                        });
                    }
                });
            }
        }

        // Cargar periodo activo al inicio
        cargarPeriodoActivo().then(function(periodo) {
            if (periodo) {
                // Renderizar tablas después de cargar el 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));

        // Asignar horario a varios colaboradores
        $('#form-asignar-horario').on('submit', function(e) {
            e.preventDefault();
            
            // Validar que haya periodo activo
            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"; // SIEMPRE semanal
            var conflictivos = [];
            var asignados = [];
            var seleccionados = [];
            $('#lista-colaboradores-seleccionados li').each(function() {
                var txt = $(this).text();
                var id = txt.match(/ID: (\w+)/);
                if (id && id[1]) seleccionados.push(id[1]);
            });
            
            // Obtener los días de descanso seleccionados por semana (con formato "Dia|Fecha")
            var descansosPorSemana = [];
            var diasDescansoConFecha = {}; // Ahora guardaremos por fecha específica
            $('.descanso-semana-select').each(function() {
                var valor = $(this).val();
                // SOLO agregar si el valor NO es vacío (no es "Sin descanso")
                if (valor && valor !== '') {
                    descansosPorSemana.push(valor);
                    // Extraer el día y fecha del valor "Dia|Fecha"
                    var partes = valor.split('|');
                    if (partes.length === 2) {
                        var dia = partes[0]; // Ej: "Sábado"
                        var fecha = partes[1]; // Ej: "2025-01-11"
                        diasDescansoConFecha[fecha] = dia; // Guardamos por fecha específica
                    }
                }
            });
            
            // 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();
                    
                    // Solo validar si no es día de descanso
                    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 = {};
            // SIEMPRE modo semanal
            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(); // Segunda columna ahora (después de Día #)
                    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;
                    
                    // CORRECCIÓN: Verificar si ESTA FECHA ESPECÍFICA está en descanso
                    // NO verificar solo por nombre de día
                    if ($entrada.prop('disabled') || (fechaDia && diasDescansoConFecha[fechaDia])) {
                        entradaDia = '00:00';
                        salidaDia = '00:00';
                    }
                    
                    horarios['semana'+s][dia] = { 
                        entrada: entradaDia, 
                        salida: salidaDia, 
                        fecha: fechaDia 
                    };
                });
            }
            
            // Log de depuración para revisar qué se envía al backend
            console.log('DEBUG horarios:', JSON.stringify(horarios, null, 2));
            console.log('DEBUG descansos:', JSON.stringify(descansosPorSemana, null, 2));
            // Enviar AJAX por cada colaborador seleccionado
            var pendientes = seleccionados.length;
            var periodoTexto = `${window.periodoActivo.fecha_inicio} al ${window.periodoActivo.fecha_fin}`;
            seleccionados.forEach(function(colaboradorId) {
                var postData = {
                    curp: colaboradorId,
                    id_quincena: id_quincena,
                    tipo_periodo: tipoPeriodo,
                    horarios: JSON.stringify(horarios),
                    descansos: JSON.stringify(descansosPorSemana)
                };
                if (tipoPeriodo === 'semanal') {
                    postData['periodo_texto'] = periodoTexto;
                }
                // Log de depuración para validar datos enviados
                console.log('POST DATA para colaborador:', colaboradorId, postData);
                $.post('../../../backend/api/asignar_horario_semanal.php', postData, function(response) {
                    if (typeof response === 'string') response = JSON.parse(response);
                    // Log de depuración para validar respuesta
                    console.log('RESPUESTA backend para colaborador:', colaboradorId, response);
                    if (!response.success) {
                        conflictivos.push(colaboradorId);
                    } else {
                        asignados.push(colaboradorId);
                    }
                    pendientes--;
                    if (pendientes === 0) {
                        $('#modalAsignarHorario').modal('hide');
                        asignados.forEach(function(colaboradorId) {
                            var $tarjeta = $('#empleados-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();
                            });
                        }
                    }
                });
            });
        });

        // Variable global para almacenar el periodo activo
        window.periodoActivo = null;

        // Cargar periodo activo desde el backend
        function cargarPeriodoActivo() {
            return fetch('../../../backend/api/horario_edicion_flag.php')
                .then(r => r.json())
                .then(data => {
                    if (data.activar_crear_horario && data.periodo) {
                        window.periodoActivo = data.periodo;
                        const meses = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 
                                    'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];
                        const textoMes = meses[data.periodo.mes - 1];
                        $('#periodo-activo-texto').html(`<strong>${textoMes} ${data.periodo.anio}</strong> - ${data.periodo.nombre || 'Quincena'} (${data.periodo.fecha_inicio} al ${data.periodo.fecha_fin})`);
                        return data.periodo;
                    } else {
                        $('#periodo-activo-texto').html('<span class="text-danger">No hay periodo activo. Contacta al administrador.</span>');
                        return null;
                    }
                })
                .catch(() => {
                    $('#periodo-activo-texto').html('<span class="text-danger">Error al cargar periodo</span>');
                    return null;
                });
        }

        // Inicializar periodo al abrir modal
        $('#modalAsignarHorario').on('show.bs.modal', function() {
            cargarPeriodoActivo().then(periodo => {
                if (periodo) {
                    // Renderizar las tablas de horarios
                    renderizarTablasHorarios('semanal');
                    // Renderizar descansos con las fechas del periodo
                    setTimeout(function() {
                        renderizarDescansosPorSemana(periodo.fecha_inicio, periodo.fecha_fin);
                    }, 200);

                    // 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-activo-texto').html(`[${diaInicio} al ${diaFin}] ${mesNombre} de ${periodo.anio}`);
                    } else {
                        // Fallback al texto original
                        $('#periodo-activo-texto').html(`<strong>${periodo.mes ? meses[periodo.mes - 1] : ''} ${periodo.anio || ''}</strong> - ${periodo.nombre || 'Quincena'} (${periodo.fecha_inicio} al ${periodo.fecha_fin})`);
                    }
                }
            });
        });

        // Inicializar periodo al abrir modal de EDITAR
        $('#modalEditarHorario').on('show.bs.modal', function() {
            console.log('[MODAL-EDITAR] Modal abierto, iniciando carga...');
            
            // --- 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];
                        console.log('[MODAL-EDITAR] Datos de tienda cargados:', window.datosTiendaActual);
                    }
                });
            
            cargarPeriodoActivo().then(periodo => {
                console.log('[MODAL-EDITAR] Periodo activo cargado:', periodo);
                
                if (periodo) {
                    // Obtener CURP del colaborador seleccionado
                    const listaTexto = $('#lista-colaboradores-editar li').first().text();
                    console.log('[MODAL-EDITAR] Texto de lista:', listaTexto);
                    
                    const curp = listaTexto.match(/ID: (\w+)/)?.[1];
                    console.log('[MODAL-EDITAR] CURP extraído:', curp);

                    if (curp) {
                        console.log('[MODAL-EDITAR] Cargando horarios para CURP:', curp, 'Quincena:', periodo.id_quincena);
                        
                        // Cargar horarios existentes del colaborador
                        cargarYRenderizarHorarioAsignadoEditar(curp, periodo.id_quincena, 'semanal');

                        // Renderizar descansos después de un delay
                        setTimeout(function() {
                            console.log('[MODAL-EDITAR] Renderizando descansos...');
                            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() {
                                console.log('[MODAL-EDITAR] Aplicando validaciones...');
                                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);
                    } else {
                        console.error('[MODAL-EDITAR] No se pudo obtener CURP de la lista');
                    }

                    // 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());
                    }
                }
            });
        });

        // Renderizar selects de días de descanso por semana según la quincena seleccionada
        function renderizarDescansosPorSemana(fechaInicio, fechaFin) {
            // NUEVO: Usar semanas NATURALES del calendario (Lunes a Domingo)
            const diasSemana = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
            let inicio = moment(fechaInicio);
            let fin = moment(fechaFin);
            
            // Calcular semanas naturales: cada semana va de Lunes a Domingo
            let semanas = [];
            let actual = inicio.clone();
            
            // Encontrar todas las semanas que contienen días de la quincena
            while (actual.isSameOrBefore(fin)) {
                // Encontrar el inicio de la semana (Lunes)
                let inicioSemana = actual.clone();
                while (inicioSemana.day() !== 1) { // 1 = Lunes
                    inicioSemana.subtract(1, 'day');
                }
                
                // Encontrar el fin de la semana (Domingo)
                let finSemana = inicioSemana.clone().add(6, 'days'); // Domingo
                
                // Crear array para esta semana
                let diasDeLaSemana = [];
                
                // Recorrer los 7 días de la semana
                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();
                    
                    // Solo agregar si está dentro de la quincena
                    if (diaActual.isSameOrAfter(inicio) && diaActual.isSameOrBefore(fin)) {
                        diasDeLaSemana.push({
                            fecha: fechaStr,
                            dia: nombreDia,
                            numDia: numDia
                        });
                    }
                    
                    diaActual.add(1, 'day');
                }
                
                // Solo agregar si hay días en esta semana
                if (diasDeLaSemana.length > 0) {
                    semanas.push(diasDeLaSemana);
                }
                
                // Mover al inicio de la siguiente semana
                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> `;
                // Primer select por defecto
                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();
        }

        // Función auxiliar para renderizar un select de descanso
        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}">`;
            // Opción por defecto: Sin descanso
            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 un select, evitar duplicados en la misma semana
        $(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() {
            // Contar total de descansos en el periodo
            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;
            
            // Obtener los días de esa semana del array global
            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
            }
            
            // Agregar un nuevo select antes del botón
            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();
        });
        
        // Evento para quitar un select de descanso
        $(document).on('click', '.btn-remove-descanso-asignar', function() {
            $(this).prev('select').remove();
            $(this).remove();
            actualizarContadorDescansosAsignar();
            bloquearDiasDescansoEnTabla();
        });
        
        // Función para bloquear días de descanso en tabla de horarios (MODAL ASIGNAR)
        function bloquearDiasDescansoEnTabla() {
            // Primero, desbloquear TODOS los inputs que no son días no laborables
            $('.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_"]');
                    
                    // Solo desbloquear si actualmente está bloqueado como día de descanso
                    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);
                    }
                }
            });
            
            // Ahora, bloquear SOLO los días actualmente seleccionados en los selects
            $('.descanso-semana-select').each(function() {
                let valor = $(this).val();
                if (valor && valor !== '') {
                    let [dia, fecha] = valor.split('|');
                    let semana = $(this).data('semana');
                    
                    // Buscar la fila correspondiente usando FECHA (más preciso que nombre de día)
                    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')) {
                        // Deshabilitar inputs y poner "------"
                        $fila.find('input[type="time"]').prop('disabled', true).val('');
                        $fila.find('input[type="time"]').attr('placeholder', '------');
                        $fila.addClass('dia-descanso');
                    }
                }
            });
        }

        // ========== FUNCIONES PARA MODAL DE EDITAR ==========
        
        // Renderizar tablas de horarios para el modal de editar (copia de renderizarTablasHorarios)
        function renderizarTablasHorariosEditar(tipo, horariosGuardados = null) {
            console.log('EJECUTANDO renderizarTablasHorariosEditar:', { tipo, horariosGuardados });
            const dias = ['Lunes','Martes','Miércoles','Jueves','Viernes','Sábado','Domingo'];
            let html = '';
            
            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-editar').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-editar" 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 entrada = '';
                    let salida = '';
                    let disabled = '';
                    let required = 'required';
                    let idDetalle = ''; // NUEVO: para almacenar id_detalle

                    // 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';
                            // Formatear a HH:MM si vienen como HH:MM:SS
                            if (horaEntradaTienda && horaEntradaTienda.length > 5) {
                                horaEntradaTienda = horaEntradaTienda.substring(0, 5);
                            }
                            if (horaSalidaTienda && horaSalidaTienda.length > 5) {
                                horaSalidaTienda = horaSalidaTienda.substring(0, 5);
                            }
                        }
                    }

                    // Log de depuración para ver cómo se busca el día y semana
                    if (horariosGuardados && horariosGuardados['dias_trabajo']) {
                        console.log('Buscando diaData:', {
                            dia,
                            semana: String(s+1),
                            dias_trabajo: horariosGuardados['dias_trabajo']
                        });
                        let diaData = horariosGuardados['dias_trabajo'].find(d =>
                            d.dia_semana === dia && String(d.semana) === String(s+1)
                        );
                        console.log('Resultado diaData:', diaData);
                        if (diaData) {
                            // NUEVO: Capturar id_detalle
                            idDetalle = diaData.id_detalle || '';
                            
                            // Usar las horas reales de la base de datos
                            entrada = diaData.hora_entrada !== '00:00:00' ? diaData.hora_entrada.substring(0,5) : '00:00';
                            salida = diaData.hora_salida !== '00:00:00' ? diaData.hora_salida.substring(0,5) : '00:00';

                            // Si tiene 00:00, probablemente es día de descanso, deshabilitar
                            if (entrada === '00:00' && salida === '00:00') {
                                disabled = 'disabled';
                                required = '';
                            }
                        }
                    }
                    
                    if (!entrada || entrada === '00:00') entrada = horaEntradaTienda;
                    if (!salida || salida === '00:00') salida = horaSalidaTienda;

                    // NUEVO: Agregar data-id-detalle, data-fecha y límites de horario de tienda
                    html += `<tr data-id-detalle="${idDetalle}" 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 input-entrada-editar" name="entrada_${dia}_semana${s+1}_editar" ${required} value="${entrada}" min="${horaEntradaTienda}" max="${horaSalidaTienda}" ${disabled}></td><td><input type="time" class="form-control input-salida-editar" name="salida_${dia}_semana${s+1}_editar" ${required} value="${salida}" min="${horaEntradaTienda}" max="${horaSalidaTienda}" ${disabled}></td></tr>`;
                });
                html += `</tbody></table></div>`;
            }
            
            window.fechasPorSemanaCalculadasEditar = fechasPorSemanaLocal;
            window.totalSemanasCalculadasEditar = semanas.length;
            $('#bloque-horarios-semanales-editar').html(html);
            
            // NUEVO: Aplicar bloqueo de días no laborables después de renderizar
            setTimeout(function() {
                if (typeof bloquearDiasNoLaborablesEditar === 'function') {
                    bloquearDiasNoLaborablesEditar();
                }
            }, 100);
        }
        
        // Renderizar descansos para el modal de editar
        function renderizarDescansosPorSemanaEditar(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.semanasDescansoEditar = semanas;
            
            let html = '';
            for (let s = 0; s < semanas.length; s++) {
                html += `<div class="mb-2" id="semana-descanso-editar-${s+1}">`;
                html += `<label>Semana ${s+1}:</label> `;
                html += renderDescansoSelectEditar(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-editar" data-semana="${s+1}" title="Agregar descanso" ${disabledAttr}><i class="fas fa-plus"></i></button>`;
                html += '</div>';
            }
            $('#descansos-por-semana-editar').html(html);
            actualizarContadorDescansosEditar();
        }
        
        function renderDescansoSelectEditar(diasSemanaArr, semanaNum, selectNum) {
            let name = `descanso_semana_${semanaNum}_${selectNum}_editar`;
            let html = `<select class="form-select form-select-sm descanso-semana-select-editar mt-1" name="${name}" data-semana="${semanaNum}" data-select="${selectNum}">`;
            // Opción por defecto: Sin descanso
            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;
        }
        
        async function cargarYRenderizarHorarioAsignadoEditar(curp, id_quincena, tipoPeriodo) {
            console.log('[CARGAR-HORARIO-EDITAR] Iniciando con:', { curp, id_quincena, tipoPeriodo });
            
            if (!window.periodoActivo) {
                console.warn('[CARGAR-HORARIO-EDITAR] No hay periodo activo');
                return renderizarTablasHorariosEditar(tipoPeriodo);
            }
            
            let year = window.periodoActivo.anio;
            let month = window.periodoActivo.mes;
            let fechaInicio = window.periodoActivo.fecha_inicio;
            let fechaFin = window.periodoActivo.fecha_fin;
            
            console.log('[CARGAR-HORARIO-EDITAR] Buscando horario con criterios:', { 
                year, 
                month, 
                fechaInicio, 
                fechaFin, 
                curp 
            });
            
            let horariosGuardados = null;
            try {
                let url = `../../../backend/api/horarios_asignados_mes.php?year=${year}&month=${month}`;
                console.log('[CARGAR-HORARIO-EDITAR] Llamando URL:', url);
                
                let resp = await fetch(url);
                let data = await resp.json();
                
                console.log('[CARGAR-HORARIO-EDITAR] RESPUESTA completa:', data);
                console.log('[CARGAR-HORARIO-EDITAR] Total horarios recibidos:', data.horarios?.length || 0);
                
                if (data.success && Array.isArray(data.horarios)) {
                    console.log('[CARGAR-HORARIO-EDITAR] ========== HORARIOS RECIBIDOS ==========');
                    // Mostrar todos los horarios para debugging
                    data.horarios.forEach((h, idx) => {
                        console.log(`[CARGAR-HORARIO-EDITAR] Horario ${idx}:`, {
                            curp: h.curp,
                            nombre: h.NOMBRES,
                            fecha_inicio: h.fecha_inicio,
                            fecha_fin: h.fecha_fin,
                            dias_trabajo: h.dias_trabajo?.length || 0,
                            descansos: h.descansos?.length || 0
                        });
                    });
                    console.log('[CARGAR-HORARIO-EDITAR] ========== CRITERIOS DE BÚSQUEDA ==========');
                    console.log('[CARGAR-HORARIO-EDITAR] CURP buscado:', curp, 'tipo:', typeof curp);
                    console.log('[CARGAR-HORARIO-EDITAR] fecha_inicio buscada:', fechaInicio, 'tipo:', typeof fechaInicio);
                    console.log('[CARGAR-HORARIO-EDITAR] fecha_fin buscada:', fechaFin, 'tipo:', typeof fechaFin);
                    
                    // Buscar el horario del colaborador con comparación detallada
                    let horario = null;
                    for (let h of data.horarios) {
                        let curpMatch = h.curp === curp;
                        let fechaInicioMatch = h.fecha_inicio === fechaInicio;
                        let fechaFinMatch = h.fecha_fin === fechaFin;
                        
                        console.log(`[CARGAR-HORARIO-EDITAR] Comparando con ${h.curp}:`, {
                            curpMatch: curpMatch,
                            fechaInicioMatch: fechaInicioMatch,
                            fechaFinMatch: fechaFinMatch,
                            'h.curp vs curp': `"${h.curp}" === "${curp}"`,
                            'h.fecha_inicio vs fechaInicio': `"${h.fecha_inicio}" === "${fechaInicio}"`,
                            'h.fecha_fin vs fechaFin': `"${h.fecha_fin}" === "${fechaFin}"`
                        });
                        
                        if (curpMatch && fechaInicioMatch && fechaFinMatch) {
                            horario = h;
                            console.log('[CARGAR-HORARIO-EDITAR] ✓ COINCIDENCIA ENCONTRADA!');
                            break;
                        }
                    }
                    
                    console.log('[CARGAR-HORARIO-EDITAR] Horario encontrado:', horario);
                    
                    if (horario) {
                        horariosGuardados = horario;
                        console.log('[CARGAR-HORARIO-EDITAR] Horario asignado:', {
                            dias_trabajo: horariosGuardados.dias_trabajo?.length || 0,
                            descansos: horariosGuardados.descansos?.length || 0
                        });
                    } else {
                        console.warn('[CARGAR-HORARIO-EDITAR] ✗ No se encontró horario con los criterios especificados');
                    }
                } else {
                    console.error('[CARGAR-HORARIO-EDITAR] Respuesta inválida o sin horarios');
                }
            } catch (e) { 
                console.error('[CARGAR-HORARIO-EDITAR] Error en la llamada:', e); 
            }
            
            console.log('[CARGAR-HORARIO-EDITAR] Renderizando con horariosGuardados:', horariosGuardados);
            renderizarTablasHorariosEditar(tipoPeriodo, horariosGuardados);
        }
        
        // Función para cargar días de descanso existentes del colaborador
        async function cargarDescansosExistentesEditar(curp, id_quincena) {
            try {
                let resp = await fetch(`../../../backend/api/horarios_asignados_mes.php?year=${window.periodoActivo.anio}&month=${window.periodoActivo.mes}`);
                let data = await resp.json();
                if (data.success && Array.isArray(data.horarios)) {
                    let horario = data.horarios.find(h => 
                        h.curp === curp && 
                        h.fecha_inicio === window.periodoActivo.fecha_inicio && 
                        h.fecha_fin === window.periodoActivo.fecha_fin
                    );
                    
                    if (horario && horario.descansos && Array.isArray(horario.descansos)) {
                        // Agrupar descansos por semana
                        const descansosPorSemana = {};
                        horario.descansos.forEach(descanso => {
                            const semana = descanso.semana || 1;
                            if (!descansosPorSemana[semana]) {
                                descansosPorSemana[semana] = [];
                            }
                            descansosPorSemana[semana].push({
                                dia: descanso.dia_semana,
                                fecha: descanso.fecha_descanso,
                                id_descanso: descanso.id_descanso
                            });
                        });
                        
                        console.log('[DEBUG] cargarDescansosExistentesEditar - descansosPorSemana:', descansosPorSemana);
                        
                        // Para cada semana, agregar los selects necesarios
                        Object.keys(descansosPorSemana).forEach(semana => {
                            const descansos = descansosPorSemana[semana];
                            const $container = $(`#semana-descanso-editar-${semana}`);
                            console.log(`[DEBUG] Semana ${semana} - $container found:`, $container.length);
                            
                            // Si hay más de 1 descanso, agregar selects adicionales
                            for (let i = 1; i < descansos.length; i++) {
                                // Agregar select adicional
                                let diasSemanaArr = window.semanasDescansoEditar[semana-1];
                                let nuevoSelect = renderDescansoSelectEditar(diasSemanaArr, semana, i+1);
                                nuevoSelect += ` <button type="button" class="btn btn-danger btn-sm btn-remove-descanso-editar" title="Quitar descanso"><i class="fas fa-minus"></i></button>`;
                                $container.find('.btn-add-descanso-editar').before(nuevoSelect);
                            }
                            
                            // Ahora asignar valores a todos los selects
                            descansos.forEach((descanso, idx) => {
                                const $select = $container.find('.descanso-semana-select-editar').eq(idx);
                                const valor = `${descanso.dia}|${descanso.fecha}`;
                                console.log(`[DEBUG] Semana ${semana} - Set value:`, valor);
                                $select.val(valor);
                                
                                // Almacenar id_descanso en data attribute
                                if (descanso.id_descanso) {
                                    $select.data('id-descanso', descanso.id_descanso);
                                }
                            });
                        });
                        
                        // NUEVO: Después de cargar valores, ejecutar bloqueo y actualizar contador
                        setTimeout(function() {
                            console.log('[DEBUG] Ejecutando bloquearDiasDescansoEnTablaEditar después de cargar valores');
                            bloquearDiasDescansoEnTablaEditar();
                            actualizarContadorDescansosEditar();
                        }, 200);
                    }
                }
            } catch (e) {
                console.error('Error cargando descansos:', e);
            }
        }

        // Al cambiar un select del modal editar, evitar duplicados en la misma semana
        $(document).on('change', '.descanso-semana-select-editar', function() {
            actualizarContadorDescansosEditar();
            validarDuplicadosEnSemanaEditar($(this));
            bloquearDiasDescansoEnTablaEditar();
            
            // Mantener bloqueo de días no laborables
            setTimeout(function() {
                if (typeof bloquearDiasNoLaborablesEditar === 'function') {
                    bloquearDiasNoLaborablesEditar();
                }
            }, 100);
        });
        
        // Función para validar duplicados en la misma semana (MODAL EDITAR)
        function validarDuplicadosEnSemanaEditar($select) {
            let $container = $select.closest('div[id^="semana-descanso-editar-"]');
            let selects = $container.find('.descanso-semana-select-editar');
            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 (MODAL EDITAR)
        function actualizarContadorDescansosEditar() {
            let totalDescansos = 0;
            $('.descanso-semana-select-editar').each(function() {
                if ($(this).val() && $(this).val() !== '') {
                    totalDescansos++;
                }
            });
            
            let $contador = $('#contador-descansos-editar');
            let $texto = $('#texto-contador-descansos-editar');
            
            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-editar').prop('disabled', true);
                
                // Deshabilitar los selects vacíos y ponerlos en "Sin descanso"
                $('.descanso-semana-select-editar').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-editar').prop('disabled', false);
                
                // Habilitar/deshabilitar botones de agregar según días disponibles en cada semana
                $('.btn-add-descanso-editar').each(function() {
                    let semana = $(this).data('semana');
                    let $container = $(`#semana-descanso-editar-${semana}`);
                    let countSelects = $container.find('.descanso-semana-select-editar').length;
                    let diasDisponibles = window.semanasDescansoEditar ? window.semanasDescansoEditar[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 (MODAL EDITAR)
        $(document).on('click', '.btn-add-descanso-editar', function() {
            let totalDescansos = 0;
            $('.descanso-semana-select-editar').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-editar-${semana}`);
            let count = $container.find('.descanso-semana-select-editar').length;
            let diasSemanaArr = window.semanasDescansoEditar[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 = renderDescansoSelectEditar(diasSemanaArr, semana, count+1);
            nuevoSelect += ` <button type="button" class="btn btn-danger btn-sm btn-remove-descanso-editar" title="Quitar descanso"><i class="fas fa-minus"></i></button>`;
            $(this).before(nuevoSelect);
            actualizarContadorDescansosEditar();
        });
        
        // Evento para quitar un select de descanso (MODAL EDITAR)
        $(document).on('click', '.btn-remove-descanso-editar', function() {
            $(this).prev('select').remove();
            $(this).remove();
            actualizarContadorDescansosEditar();
            bloquearDiasDescansoEnTablaEditar();
        });
        
        // Función para bloquear días de descanso en tabla de horarios (MODAL EDITAR)
        function bloquearDiasDescansoEnTablaEditar() {
            console.log('[EDITAR-BLOQUEO] ==================== INICIO ====================');
            
            // PASO 1: DESBLOQUEAR TODO primero (excepto días no laborables)
            let desbloqueados = 0;
            $('.tabla-horario-semanal-editar 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_"]');
                    
                    // Solo desbloquear si actualmente está bloqueado como día de descanso
                    if ($(this).hasClass('dia-descanso')) {
                        let fecha = $(this).data('fecha');
                        let horaEntradaTienda = $(this).attr('data-hora-entrada-tienda') || '09:00';
                        let horaSalidaTienda = $(this).attr('data-hora-salida-tienda') || '18:00';
                        console.log('[EDITAR-BLOQUEO] DESBLOQUEANDO:', fecha);
                        
                        $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);
                        
                        desbloqueados++;
                    }
                }
            });
            console.log('[EDITAR-BLOQUEO] Total desbloqueados:', desbloqueados);
            
            // PASO 2: BLOQUEAR SOLO los días actualmente seleccionados en los selects
            let bloqueados = 0;
            let selectsEncontrados = $('.descanso-semana-select-editar');
            console.log('[EDITAR-BLOQUEO] Selects encontrados:', selectsEncontrados.length);
            
            selectsEncontrados.each(function(idx) {
                let valor = $(this).val();
                let semana = $(this).data('semana');
                console.log(`[EDITAR-BLOQUEO] Select ${idx}: semana=${semana}, valor="${valor}"`);
                
                if (valor && valor !== '') {
                    let [dia, fecha] = valor.split('|');
                    console.log(`[EDITAR-BLOQUEO] Parseado: dia="${dia}", fecha="${fecha}"`);
                    
                    // Buscar la fila correspondiente usando FECHA (más preciso que nombre de día)
                    let $tabla = $(`.tabla-horario-semanal-editar[data-semana="${semana}"]`);
                    console.log(`[EDITAR-BLOQUEO] Tabla encontrada: ${$tabla.length} para semana ${semana}`);
                    
                    let $fila = $tabla.find(`tbody tr[data-fecha="${fecha}"]`);
                    console.log(`[EDITAR-BLOQUEO] Fila encontrada: ${$fila.length} para fecha ${fecha}`);
                    
                    // NUEVO: Ver TODAS las filas y sus fechas
                    if ($fila.length === 0) {
                        console.log(`[EDITAR-BLOQUEO] NO SE ENCONTRÓ FILA. Mostrando todas las filas de la tabla:`);
                        $tabla.find('tbody tr').each(function(i) {
                            console.log(`  Fila ${i}: data-fecha="${$(this).attr('data-fecha')}", data-dia="${$(this).attr('data-dia')}"`);
                        });
                    }
                    
                    if ($fila.length > 0 && !$fila.hasClass('dia-no-laborable')) {
                        console.log(`[EDITAR-BLOQUEO] BLOQUEANDO: ${fecha}`);
                        
                        // Deshabilitar inputs y poner "------"
                        $fila.find('input[type="time"]').prop('disabled', true).val('');
                        $fila.find('input[type="time"]').attr('placeholder', '------');
                        $fila.addClass('dia-descanso');
                        
                        bloqueados++;
                    } else {
                        console.log(`[EDITAR-BLOQUEO] NO SE BLOQUEÓ: fila.length=${$fila.length}, es-no-laborable=${$fila.hasClass('dia-no-laborable')}`);
                    }
                }
            });
            
            console.log('[EDITAR-BLOQUEO] Total bloqueados:', bloqueados);
            console.log('[EDITAR-BLOQUEO] ==================== FIN ====================');
        }

        // Al cambiar el tipo de carga, renderizar descansos con el periodo activo
        $('#tipo-carga-horario').on('change', function() {
            if (window.periodoActivo) {
                renderizarDescansosPorSemana(window.periodoActivo.fecha_inicio, window.periodoActivo.fecha_fin);
                // Aplicar descansos obligatorios después de regenerar los selects
                if (typeof aplicarDescansosObligatorios === 'function') {
                    aplicarDescansosObligatorios();
                }
                // Bloquear días no laborables después de regenerar las tablas
                if (typeof bloquearDiasNoLaborables === 'function') {
                    bloquearDiasNoLaborables();
                }
            }
        });

        // Permitir que actualizar.js escuche este evento
    });
    </script>
</body>
</html>

<!-- Cuando se rendericen las tarjetas de colaboradores vía JS, agregar también un botón:
<button class="btn btn-sm btn-warning btn-editar-horario" data-id="{curp}" data-nombre="{nombre}"><i class="fas fa-edit"></i> Editar</button>
-->