<?php
// Replica de la vista de gestionar equipo, adaptada para ver horarios generados por el gerente de tienda
// 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>Ver Horarios Generados - 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">
    <!-- 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">
    <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;
    }
    .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;
    }
    </style>
</head>
<body class="d-flex flex-column min-vh-100">
    <?php include_once __DIR__ . '/../../includes/topbar.php'; ?>
    <div class="container-fluid mt-4 flex-grow-1">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <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-alt me-2"></i>Horarios generados por el gerente
                        </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">
                        <div class="d-flex justify-content-end mb-2">
                            <button id="btn-exportar-excel" class="btn btn-success">
                                <i class="fas fa-file-excel me-1"></i> Exportar a Excel
                            </button>
                        </div>
                        <div id="calendario-horarios-scroll" class="calendario-scroll-container">
                            <div id="calendario-horarios"></div>
                        </div>
                        <div id="rango-seleccionado" class="mt-3"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 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>
    <!-- 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>
    <!-- SheetJS (XLSX) desde CDN oficial -->
    <script src="https://cdn.sheetjs.com/xlsx-latest/package/dist/xlsx.full.min.js"></script>
    <script>
    $(document).ready(function() {
        var calendarEl = document.getElementById('calendario-horarios');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            locale: 'es',
            selectable: false,
            selectMirror: false,
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            eventOrder: function(a, b) {
                const hA = a.extendedProps.horaEntrada || '23:59';
                const hB = b.extendedProps.horaEntrada || '23:59';
                if (hA < hB) return -1;
                if (hA > hB) return 1;
                return 0;
            }
        });
        calendar.render();
        function cargarHorariosGenerados() {
            let fechaBase = calendar.getDate();
            const year = fechaBase.getFullYear();
            const month = fechaBase.getMonth() + 1;
            calendar.getEvents().forEach(ev => ev.remove());
            fetch('../../../backend/api/horarios_asignados_mes.php?year=' + year + '&month=' + month)
                .then(res => res.json())
                .then(data => {
                    if (!data.success || !data.horarios) return;
                    const colores = ['#e57373', '#64b5f6', '#81c784', '#ffd54f', '#ba68c8', '#4db6ac', '#ffb74d', '#a1887f', '#90a4ae', '#f06292'];
                    let colaboradorColorMap = {};
                    let colorIndex = 0;
                    data.horarios.forEach(function(horario) {
                        let colaboradorKey = horario.curp || (horario.NOMBRES + horario['APELLIDO PATERNO']);
                        if (!colaboradorColorMap[colaboradorKey]) {
                            colaboradorColorMap[colaboradorKey] = colores[colorIndex % colores.length];
                            colorIndex++;
                        }
                        const color = colaboradorColorMap[colaboradorKey];
                        let fechasDescanso = new Set();
                        if (horario.descansos && Array.isArray(horario.descansos)) {
                            horario.descansos.forEach(function(desc) {
                                if (desc.fecha_descanso) fechasDescanso.add(desc.fecha_descanso);
                            });
                        }
                        if (horario.dias_trabajo && Array.isArray(horario.dias_trabajo)) {
                            horario.dias_trabajo.forEach(function(diaTrabajo) {
                                const horaEntrada = diaTrabajo.hora_entrada ? diaTrabajo.hora_entrada.substring(0,5) : '';
                                const horaSalida = diaTrabajo.hora_salida ? diaTrabajo.hora_salida.substring(0,5) : '';
                                (diaTrabajo.fechas || []).forEach(function(fecha) {
                                    if (!fechasDescanso.has(fecha)) {
                                        calendar.addEvent({
                                            title: `${horario.NOMBRES} ${horario['APELLIDO PATERNO']} (${horaEntrada}-${horaSalida})`,
                                            start: fecha,
                                            allDay: true,
                                            backgroundColor: color,
                                            borderColor: color,
                                            textColor: '#fff',
                                            classNames: ['evento-horario-pequeno'],
                                            extendedProps: {
                                                colaboradorId: horario.curp,
                                                resumenHorario: true,
                                                horaEntrada: horaEntrada
                                            }
                                        });
                                    }
                                });
                            });
                        }
                        if (horario.descansos && Array.isArray(horario.descansos)) {
                            horario.descansos.forEach(function(desc) {
                                if (desc.fecha_descanso) {
                                    calendar.addEvent({
                                        title: `${horario.NOMBRES} ${horario['APELLIDO PATERNO']} (Descanso)` ,
                                        start: desc.fecha_descanso,
                                        allDay: true,
                                        backgroundColor: '#bdbdbd',
                                        borderColor: '#bdbdbd',
                                        textColor: '#fff',
                                        classNames: ['evento-descanso'],
                                        extendedProps: {
                                            colaboradorId: horario.curp,
                                            descanso: true
                                        }
                                    });
                                }
                            });
                        }
                    });
                });
        }
        setTimeout(cargarHorariosGenerados, 800);
        calendar.on('datesSet', cargarHorariosGenerados);
        function generarTablaCalendarioParaExcel(events, year, month) {
            // Crear matriz de días del mes
            const diasSemana = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'];
            const fecha = new Date(year, month-1, 1);
            const diasEnMes = new Date(year, month, 0).getDate();
            let tabla = [];
            // Encabezado: días de la semana
            tabla.push(['Semana', ...Array.from({length:7}, (_,i)=>diasSemana[i])]);
            let semana = 1;
            let fila = [semana];
            let diaSemana = fecha.getDay();
            // Rellenar días vacíos al inicio
            for(let i=0;i<diaSemana;i++) fila.push('');
            for(let dia=1;dia<=diasEnMes;dia++){
                let fechaStr = year+'-'+String(month).padStart(2,'0')+'-'+String(dia).padStart(2,'0');
                let eventosDia = events.filter(ev=>ev.startStr.startsWith(fechaStr));
                let texto = eventosDia.map(ev=>ev.title).join('\n');
                fila.push(texto);
                diaSemana++;
                if(diaSemana===7||dia===diasEnMes){
                    // Completar fila si termina el mes
                    while(fila.length<8) fila.push('');
                    tabla.push(fila);
                    semana++;
                    fila=[semana];
                    diaSemana=0;
                }
            }
            return tabla;
        }
        function generarCalendarioVisualParaExcel(events, year, month) {
            const diasSemana = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'];
            const fecha = new Date(year, month-1, 1);
            const diasEnMes = new Date(year, month, 0).getDate();
            let tabla = [];
            // Encabezado: días de la semana
            tabla.push(['', ...diasSemana]);
            let fila = [];
            let diaSemana = fecha.getDay();
            let dia = 1;
            let semana = 1;
            while (dia <= diasEnMes) {
                fila = ["Semana " + semana];
                for (let d = 0; d < 7; d++) {
                    if ((semana === 1 && d < diaSemana) || dia > diasEnMes) {
                        fila.push('');
                    } else {
                        let fechaStr = year+'-'+String(month).padStart(2,'0')+'-'+String(dia).padStart(2,'0');
                        let eventosDia = events.filter(ev=>ev.startStr.startsWith(fechaStr));
                        let texto = dia + (eventosDia.length > 0 ? ('\n' + eventosDia.map(ev=>ev.title).join('\n')) : '');
                        fila.push(texto);
                        dia++;
                    }
                }
                tabla.push(fila);
                semana++;
            }
            return tabla;
        }
        function generarCalendarioColaboradoresParaExcel(events, year, month) {
            const diasSemana = ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'];
            // Obtener lista única de colaboradores
            let colaboradores = {};
            events.forEach(ev => {
                let nombre = ev.title.split(' (')[0];
                if (!colaboradores[nombre]) colaboradores[nombre] = ev.extendedProps.colaboradorId || nombre;
            });
            let colaboradoresArr = Object.keys(colaboradores);
            // Paleta de hasta 14 colores pastel
            const colores = [
                'FFB3BA','FFDFBA','FFFFBA','BAFFC9','BAE1FF','D5BAFF','FFBAED','BAFFD9',
                'FFDAC1','B5EAD7','C7CEEA','E2F0CB','FFB7B2','B5B2FF'
            ];
            // Crear matriz: encabezado
            let tabla = [['Colaborador', ...diasSemana]];
            // Para cada colaborador, fila con sus eventos por día de la semana
            colaboradoresArr.forEach((nombre, idx) => {
                let fila = [nombre];
                for (let d = 1; d <= 7; d++) {
                    let eventosDia = events.filter(ev => {
                        let evNombre = ev.title.split(' (')[0];
                        let fecha = new Date(ev.startStr);
                        return evNombre === nombre && fecha.getMonth()+1 === month && fecha.getDay() === (d%7);
                    });
                    let texto = eventosDia.map(ev => {
                        let fecha = new Date(ev.startStr);
                        return fecha.getDate() + (ev.title.includes('Descanso') ? ' (Descanso)' : (ev.title.match(/\(.*\)/) ? ' ' + ev.title.match(/\(.*\)/)[0] : ''));
                    }).join('\n');
                    fila.push(texto);
                }
                tabla.push(fila);
            });
            return tabla;
        }
        function generarCalendarioVisualColoreadoParaExcel(events, year, month) {
            const diasSemana = ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'];
            const fecha = new Date(year, month-1, 1);
            const diasEnMes = new Date(year, month, 0).getDate();
            // Obtener lista única de colaboradores
            let colaboradores = {};
            events.forEach(ev => {
                let nombre = ev.title.split(' (')[0];
                if (!colaboradores[nombre]) colaboradores[nombre] = ev.extendedProps.colaboradorId || nombre;
            });
            let colaboradoresArr = Object.keys(colaboradores);
            // Paleta de hasta 14 colores pastel
            const colores = [
                'FFB3BA','FFDFBA','FFFFBA','BAFFC9','BAE1FF','D5BAFF','FFBAED','BAFFD9',
                'FFDAC1','B5EAD7','C7CEEA','E2F0CB','FFB7B2','B5B2FF'
            ];
            // Mapa colaborador->color
            let colorMap = {};
            colaboradoresArr.forEach((nombre, idx) => {
                colorMap[nombre] = colores[idx % colores.length];
            });
            // Encabezado
            let tabla = [['', ...diasSemana]];
            let dia = 1;
            let primerDiaSemana = fecha.getDay() === 0 ? 6 : fecha.getDay() - 1; // Lunes=0
            let semana = 1;
            while (dia <= diasEnMes) {
                let fila = ["Semana " + semana];
                for (let d = 0; d < 7; d++) {
                    if ((semana === 1 && d < primerDiaSemana) || dia > diasEnMes) {
                        fila.push('');
                    } else {
                        let fechaStr = year+'-'+String(month).padStart(2,'0')+'-'+String(dia).padStart(2,'0');
                        let eventosDia = events.filter(ev=>ev.startStr.startsWith(fechaStr));
                        // Agrupar por colaborador
                        let colabsEnDia = {};
                        eventosDia.forEach(ev => {
                            let nombre = ev.title.split(' (')[0];
                            let info = ev.title.match(/\(.*\)/);
                            let detalle = info ? info[0] : '';
                            if (!colabsEnDia[nombre]) colabsEnDia[nombre] = [];
                            colabsEnDia[nombre].push(detalle);
                        });
                        let texto = dia + '';
                        let sublines = [];
                        Object.keys(colabsEnDia).forEach(nombre => {
                            let detalles = colabsEnDia[nombre].join(', ');
                            sublines.push(nombre + (detalles ? ' ' + detalles : ''));
                        });
                        texto += (sublines.length > 0 ? ('\n' + sublines.join('\n')) : '');
                        fila.push(texto);
                        dia++;
                    }
                }
                tabla.push(fila);
                semana++;
            }
            return {tabla, colorMap, colaboradoresArr};
        }
        function generarCalendarioBloquesParaExcel(events, year, month) {
            const diasSemana = ['Lun','Mar','Mié','Jue','Vie','Sáb','Dom'];
            const fecha = new Date(year, month-1, 1);
            const diasEnMes = new Date(year, month, 0).getDate();
            // Paleta de 12 colores pastel contrastantes
            let baseColores = [
                'FFB3BA','FFDFBA','FFFFBA','BAFFC9','BAE1FF','D5BAFF',
                'FFBAED','BAFFD9','FFDAC1','B5EAD7','C7CEEA','E2F0CB'
            ];
            // Reordenar para alternar extremos del espectro
            let colores = [];
            let left = 0, right = baseColores.length - 1;
            while (left <= right) {
                if (left === right) {
                    colores.push(baseColores[left]);
                } else {
                    colores.push(baseColores[left]);
                    colores.push(baseColores[right]);
                }
                left++;
                right--;
            }
            // Mapear colaborador a color
            let colaboradores = {};
            let colorMap = {};
            let colorIndex = 0;
            events.forEach(ev => {
                let nombre = ev.title.split(' (')[0];
                if (!colaboradores[nombre]) {
                    colaboradores[nombre] = true;
                    colorMap[nombre] = colores[colorIndex % colores.length];
                    colorIndex++;
                }
            });
            // Encabezado
            let tabla = [['', ...diasSemana]];
            let dia = 1;
            let primerDiaSemana = fecha.getDay() === 0 ? 6 : fecha.getDay() - 1; // Lunes=0
            let semana = 1;
            while (dia <= diasEnMes) {
                let filaDias = ["Semana " + semana];
                let bloquesDias = [[],[],[],[],[],[],[]]; // Para cada día de la semana
                for (let d = 0; d < 7; d++) {
                    if ((semana === 1 && d < primerDiaSemana) || dia > diasEnMes) {
                        filaDias.push('');
                        bloquesDias[d] = [];
                    } else {
                        filaDias.push(dia);
                        let fechaStr = year+'-'+String(month).padStart(2,'0')+'-'+String(dia).padStart(2,'0');
                        let eventosDia = events.filter(ev=>ev.startStr.startsWith(fechaStr));
                        // Agrupar por colaborador
                        let bloques = eventosDia.map(ev => {
                            let nombre = ev.title.split(' (')[0];
                            let info = ev.title.match(/\(.*\)/);
                            let detalle = info ? info[0] : '';
                            return {nombre, detalle};
                        });
                        bloquesDias[d] = bloques;
                        dia++;
                    }
                }
                tabla.push(filaDias);
                // Agregar filas de bloques debajo de los días
                let maxBloques = Math.max(...bloquesDias.map(b=>b.length));
                for(let i=0;i<maxBloques;i++){
                    let filaBloque = [''];
                    for(let d=0;d<7;d++){
                        let bloque = bloquesDias[d][i];
                        if(bloque){
                            filaBloque.push(bloque.nombre + (bloque.detalle ? ' ' + bloque.detalle : ''));
                        } else {
                            filaBloque.push('');
                        }
                    }
                    tabla.push(filaBloque);
                }
                semana++;
            }
            return {tabla, colorMap};
        }
        $('#btn-exportar-excel').off('click').on('click', function() {
            const year = calendar.getDate().getFullYear();
            const month = calendar.getDate().getMonth()+1;
            const events = calendar.getEvents();
            const {tabla, colorMap} = generarCalendarioBloquesParaExcel(events, year, month);
            // Enviar tabla y colorMap al backend para exportar con PHPSpreadsheet
            fetch('../../../backend/api/exportar_calendario_coloreado.php', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({tabla, colorMap})
            })
            .then(response => response.blob())
            .then(blob => {
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = `calendario_coloreado_${year}_${month}.xlsx`;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            });
        });
    });
    </script>
</body>
</html>
<?php
// ...aquí irá el contenido adaptado...
?>
