@extends('layouts.master')

@section('title')
    Consulta de Horarios
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Horarios @endslot
        @slot('title') Consulta de Horarios @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-2 text-primary">
                        <i class="ri-calendar-check-line me-2"></i>Consulta de Horarios
                    </h5>
                    <p class="text-muted mb-4">
                        Completa el siguiente filtro para consultar los diferentes horarios configurados para cada grupo.
                    </p>

                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-4">
                                <label for="filtroPlantel" class="form-label">Plantel</label>
                                <select class="form-select" id="filtroPlantel">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroPlanEstudio" class="form-label">Planes de estudios</label>
                                <select class="form-select" id="filtroPlanEstudio">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroCiclo" class="form-label">Ciclo/periodo escolar</label>
                                <select class="form-select" id="filtroCiclo">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-items-end mt-2">
                            <div class="col-md-4">
                                <label for="filtroTurno" class="form-label">Tipo de Horario</label>
                                <select class="form-select" id="filtroTurno">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroGrado" class="form-label">Grado</label>
                                <select class="form-select" id="filtroGrado">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscar">
                                    <i class="ri-search-line me-1"></i>Buscar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div id="estadoInicial" class="card mt-4">
                <div class="card-body text-center py-5">
                    <div class="avatar-lg mx-auto mb-3">
                        <div class="avatar-title bg-light text-muted rounded-circle">
                            <i class="ri-information-line fs-1"></i>
                        </div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                </div>
            </div>

            <div id="panelResultados" class="d-none mt-4">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title mb-0">Horarios configurados</h6>
                    </div>
                    <div class="card-body" id="resultadosContenido"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    var baseUrl = '{{ url("") }}';
    var gruposResultado = [];

    function cargarSelects() {
        fetch(baseUrl + '/api/consulta-horarios/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantel');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/consulta-horarios/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlanEstudio');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                return '<option value="' + (p.id) + '">' + (p.nombre || p.clave_plan || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/consulta-horarios/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroCiclo');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/consulta-horarios/turnos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroTurno');
            sel.innerHTML = '<option value="">-- Todos --</option>' + (data || []).map(function(t) {
                return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>';
            }).join('');
        });
    }

    function cargarGrados() {
        var planId = document.getElementById('filtroPlanEstudio').value;
        var sel = document.getElementById('filtroGrado');
        sel.innerHTML = '<option value="">-- Todos --</option>';
        if (!planId) return;
        fetch(baseUrl + '/api/consulta-horarios/grados?plan_estudio_id=' + planId, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                (data || []).forEach(function(g) {
                    sel.innerHTML += '<option value="' + g.grado + '">' + (g.nombre || g.grado + '°') + '</option>';
                });
            });
    }

    document.getElementById('filtroPlanEstudio').addEventListener('change', cargarGrados);

    var DIAS_SEMANA = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'];
    var PERIODOS = [
        { num: 1, start: '08:00', end: '08:50' },
        { num: 2, start: '09:00', end: '09:50' },
        { num: 3, start: '10:00', end: '10:50' },
        { num: 4, start: '11:00', end: '11:50' },
        { num: 5, start: '12:00', end: '12:50' },
        { num: 6, start: '13:00', end: '13:50' },
        { num: 7, start: '14:00', end: '14:50' },
        { num: 8, start: '15:00', end: '15:50' },
        { num: 9, start: '16:00', end: '16:45' }
    ];

    function fmtHora(h) {
        if (!h) return '—';
        var s = String(h);
        return s.length >= 5 ? s.substr(0, 5) : s;
    }

    function horaToMin(str) {
        if (!str || str.length < 5) return 0;
        var p = String(str).substr(0, 5).split(':');
        return parseInt(p[0], 10) * 60 + parseInt(p[1], 10);
    }

    function horarioAPeriodoYSpan(hi, hf) {
        var minIni = horaToMin(hi);
        var minFin = horaToMin(hf);
        var periodIndex = -1;
        var span = 0;
        for (var i = 0; i < PERIODOS.length; i++) {
            var pStart = horaToMin(PERIODOS[i].start);
            var pEnd = horaToMin(PERIODOS[i].end);
            if (minIni < pEnd && minFin > pStart) {
                if (periodIndex === -1) periodIndex = i;
                span++;
            }
        }
        return { periodIndex: periodIndex, span: span || 1 };
    }

    function construirGrillaHorarios(horarios) {
        var grid = [];
        var covered = [];
        for (var d = 0; d < 6; d++) {
            grid[d] = [];
            covered[d] = [];
            for (var p = 0; p < PERIODOS.length; p++) { grid[d][p] = null; covered[d][p] = false; }
        }
        (horarios || []).forEach(function(h) {
            var hi = fmtHora(h.hora_inicio);
            var hf = fmtHora(h.hora_fin);
            var r = horarioAPeriodoYSpan(hi, hf);
            if (r.periodIndex < 0) return;
            var diaIdx = DIAS_SEMANA.indexOf(h.dia_semana);
            if (diaIdx < 0) return;
            if (grid[diaIdx][r.periodIndex] === null) {
                grid[diaIdx][r.periodIndex] = { horario: h, span: Math.min(r.span, 9 - r.periodIndex) };
                for (var s = 1; s < grid[diaIdx][r.periodIndex].span; s++)
                    covered[diaIdx][r.periodIndex + s] = true;
            }
        });
        return { grid: grid, covered: covered };
    }

    function buscar() {
        var escuelaId = document.getElementById('filtroPlantel').value;
        var planId = document.getElementById('filtroPlanEstudio').value;
        var cicloId = document.getElementById('filtroCiclo').value;
        var turnoId = document.getElementById('filtroTurno').value;
        var grado = document.getElementById('filtroGrado').value;
        if (!planId || !cicloId) {
            document.getElementById('estadoInicial').classList.remove('d-none');
            document.getElementById('panelResultados').classList.add('d-none');
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona al menos Plan de estudios y Ciclo/periodo escolar.' });
            return;
        }
        var params = new URLSearchParams({
            escuela_id: escuelaId || '',
            plan_estudio_id: planId,
            ciclo_id: cicloId
        });
        if (turnoId) params.set('turno_id', turnoId);
        if (grado) params.set('grado', grado);
        fetch(baseUrl + '/api/consulta-horarios/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                gruposResultado = data.grupos || [];
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados();
            })
            .catch(function() {
                gruposResultado = [];
                document.getElementById('estadoInicial').classList.remove('d-none');
                document.getElementById('panelResultados').classList.add('d-none');
            });
    }

    function renderResultados() {
        var cont = document.getElementById('resultadosContenido');
        if (!gruposResultado.length) {
            cont.innerHTML = '<div class="text-center py-4"><p class="text-muted mb-0">No se encontraron grupos con los filtros seleccionados.</p></div>';
            return;
        }
        var html = '';
        gruposResultado.forEach(function(grupo) {
            var turnoNombre = grupo.turno ? grupo.turno.nombre : '';
            var docenteNombre = (grupo.docente && (grupo.docente.nombre + ' ' + (grupo.docente.apellido_paterno || '') + ' ' + (grupo.docente.apellido_materno || '')).trim()) ? (grupo.docente.nombre + ' ' + (grupo.docente.apellido_paterno || '') + ' ' + (grupo.docente.apellido_materno || '')).trim() : '—';
            var horarios = grupo.horarios || [];
            html += '<div class="card border shadow-none mb-4">';
            html += '<div class="card-header bg-light py-2">';
            html += '<h6 class="mb-0">Grupo ' + (grupo.clave || '') + (turnoNombre ? ' <span class="badge bg-secondary">' + turnoNombre + '</span>' : '') + (grupo.grado ? ' <span class="badge bg-info">' + grupo.grado + '°</span>' : '') + '</h6>';
            html += '</div>';
            html += '<div class="card-body p-0">';
            if (!horarios.length) {
                html += '<div class="p-3 text-muted small">Sin clases asignadas en el horario.</div>';
            } else {
                var res = construirGrillaHorarios(horarios);
                var grid = res.grid;
                var covered = res.covered;
                html += '<div class="table-responsive"><table class="table table-bordered align-middle mb-0" style="min-width: 720px;">';
                html += '<thead class="table-light"><tr><th class="text-center" style="width: 80px;">Hora</th><th class="text-center">Lunes</th><th class="text-center">Martes</th><th class="text-center">Miércoles</th><th class="text-center">Jueves</th><th class="text-center">Viernes</th><th class="text-center">Sábado</th></tr></thead><tbody>';
                for (var p = 0; p < PERIODOS.length; p++) {
                    var horaTexto = PERIODOS[p].num + ' ' + PERIODOS[p].start + ' - ' + PERIODOS[p].end;
                    html += '<tr><td class="text-center text-muted small">' + horaTexto + '</td>';
                    for (var d = 0; d < 6; d++) {
                        if (covered[d] && covered[d][p]) continue;
                        var cell = grid[d][p];
                        if (cell && cell.horario) {
                            var h = cell.horario;
                            var matNombre = (h.materia && (h.materia.nombre || h.materia.clave)) || '—';
                            var rowspan = cell.span > 1 ? ' rowspan="' + cell.span + '"' : '';
                            html += '<td class="p-2"' + rowspan + '><div class="fw-semibold small">' + (matNombre || '').replace(/</g, '&lt;') + '</div><div class="text-muted" style="font-size: 0.75rem;">' + (docenteNombre || '—').replace(/</g, '&lt;') + '</div></td>';
                        } else {
                            html += '<td class="p-2 bg-light"></td>';
                        }
                    }
                    html += '</tr>';
                }
                html += '</tbody></table></div>';
            }
            html += '</div></div>';
        });
        cont.innerHTML = html;
    }

    document.getElementById('filtrosForm').addEventListener('submit', function(e) {
        e.preventDefault();
        buscar();
    });

    cargarSelects();
    </script>
@endsection