<?php
// ver_horario_area.php - Muestra el horario del área administrativa seleccionada
require_once __DIR__ . '/../../includes/version.php';
require_once __DIR__ . '/../../includes/admin_guard.php';
$area = isset($_GET['area']) ? $_GET['area'] : '';
if (!$area) {
    echo '<div class="alert alert-danger">No se ha especificado un área.</div>';
    exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Horario de <?php echo htmlspecialchars($area); ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/dashboard/dashboard_admin.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/includes/topbar.css') ?>">
    <link rel="stylesheet" href="<?= asset('/frontend/assets/css/styles.css') ?>">
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body class="d-flex flex-column min-vh-100" style="overflow:auto !important;">
    <?php include_once __DIR__ . '/../../includes/topbar.php'; ?>
    <style>
    .topbar-navbar {
        width: 100vw !important;
        left: 0;
        position: relative;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        border-radius: 0 !important;
    }
    </style>
    <div class="container-fluid mt-4 flex-grow-1">
        <a href="ver_admin_areas.php" class="btn btn-secondary mb-3">&larr; Volver</a>
        <div class="card mb-4 shadow-sm" style="width: 100%; border-radius: 16px; background: linear-gradient(90deg, #e3f2fd 0%, #fff 100%);">
            <div class="card-body d-flex align-items-center justify-content-start" style="padding: 2rem 2.5rem;">
                <i class="fas fa-building fa-2x me-3" style="color: #1976d2;"></i>
                <h2 class="card-title mb-0" style="font-weight: 700; color: #1976d2; margin-right: 1rem;">
                    Horario de Área
                </h2>
                <span class="badge fs-5 px-4 py-2" style="border-radius: 12px; background: linear-gradient(90deg, #1976d2 60%, #64b5f6 100%); color: #fff; font-size: 1.3rem;">
                    <?php echo htmlspecialchars($area); ?>
                </span>
            </div>
        </div>
        <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 para el área
                </h5>
            </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>
    <!-- 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>
    <style>
    .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;
    }

    /* Estilo para los eventos del calendario: nombre arriba, horario abajo, responsivo */
    .fc-event-title {
        white-space: pre-line !important;
        font-size: 1rem !important;
        font-weight: 600;
        line-height: 1.2;
        word-break: break-word;
    }
    .evento-horario-pequeno .fc-event-title {
        display: block;
        text-align: left;
    }
    @media (max-width: 600px) {
        .fc-event-title {
            font-size: 0.9rem !important;
        }
    }
    </style>
    <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();

        let libresSet = new Set();
        fetch('../../../backend/api/horarios_libres_admin.php')
            .then(r => r.json())
            .then(data => {
                if (Array.isArray(data.libres)) {
                    libresSet = new Set(data.libres);
                }
            })
            .catch(() => {});

        function cargarHorariosGenerados() {
            let fechaBase = calendar.getDate();
            const year = fechaBase.getFullYear();
            const month = fechaBase.getMonth() + 1;
            calendar.getEvents().forEach(ev => ev.remove());
            fetch('../../../backend/api/get_horario_area_mes.php?year=' + year + '&month=' + month + '&area=' + encodeURIComponent(<?php echo json_encode($area); ?>))
                .then(res => res.json())
                .then(data => {
                    if (!data.success || !data.horarios) return;
                    if (data.horarios.length === 0) {
                        Swal.fire({
                            icon: 'info',
                            title: 'Sin horarios asignados',
                            text: 'No hay horarios asignados para esta área en el mes seleccionado.',
                            confirmButtonText: 'Aceptar'
                        });
                        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 esLibre = libresSet.has(horario.curp);
                                const horaEntrada = esLibre ? 'LIBRE' : (diaTrabajo.hora_entrada ? diaTrabajo.hora_entrada.substring(0,5) : '');
                                const horaSalida = esLibre ? '' : (diaTrabajo.hora_salida ? diaTrabajo.hora_salida.substring(0,5) : '');
                                (diaTrabajo.fechas || []).forEach(function(fecha) {
                                    if (!fechasDescanso.has(fecha)) {
                                        const horarioTexto = esLibre ? 'LIBRE' : `${horaEntrada} - ${horaSalida}`;
                                        calendar.addEvent({
                                            title: `${horario.NOMBRES} ${horario['APELLIDO PATERNO']}` + `\n${horarioTexto}`,
                                            start: fecha,
                                            allDay: true,
                                            backgroundColor: color,
                                            borderColor: color,
                                            textColor: '#fff',
                                            classNames: ['evento-horario-pequeno'],
                                            extendedProps: {
                                                colaboradorId: horario.curp,
                                                resumenHorario: true,
                                                horaEntrada: esLibre ? '00:00' : 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 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();
            let baseColores = [
                'FFB3BA','FFDFBA','FFFFBA','BAFFC9','BAE1FF','D5BAFF',
                'FFBAED','BAFFD9','FFDAC1','B5EAD7','C7CEEA','E2F0CB'
            ];
            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--;
            }
            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++;
                }
            });
            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 = [[],[],[],[],[],[],[]];
                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 === fechaStr);
                        let eventosTexto = [];
                        eventosDia.forEach(ev => {
                            let nombre = ev.title.split('\n')[0];
                            let horario = ev.title.split('\n')[1] || '';
                            eventosTexto.push({nombre, horario});
                        });
                        bloquesDias[d] = eventosTexto;
                        dia++;
                    }
                }
                tabla.push(filaDias);
                let maxEventos = Math.max(...bloquesDias.map(b => b.length));
                for (let i = 0; i < maxEventos; i++) {
                    let fila = [''];
                    for (let d = 0; d < 7; d++) {
                        if (bloquesDias[d][i]) {
                            fila.push(bloquesDias[d][i].nombre + '\n' + bloquesDias[d][i].horario);
                        } else {
                            fila.push('');
                        }
                    }
                    tabla.push(fila);
                }
                semana++;
            }
            return { tabla, colorMap };
        }

        $('#btn-exportar-excel').on('click', function() {
            let fechaBase = calendar.getDate();
            const year = fechaBase.getFullYear();
            const month = fechaBase.getMonth() + 1;
            let events = calendar.getEvents();
            let { tabla, colorMap } = generarCalendarioBloquesParaExcel(events, year, month);
            let ws = XLSX.utils.aoa_to_sheet(tabla);
            Object.keys(ws).forEach(cell => {
                if (!cell.startsWith('!')) {
                    let value = ws[cell].v;
                    if (typeof value === 'string') {
                        let nombre = value.split('\n')[0];
                        if (colorMap[nombre]) {
                            ws[cell].s = {
                                fill: { fgColor: { rgb: colorMap[nombre] } },
                                alignment: { wrapText: true, vertical: 'center', horizontal: 'left' }
                            };
                        }
                    }
                }
            });
            let wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, 'Horario');
            XLSX.writeFile(wb, 'Horario_Area_' + year + '_' + month + '.xlsx');
        });
    });
    </script>
</body>
</html>
