@extends('layouts.master')

@section('title')
    Creación de horarios
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Horarios @endslot
        @slot('title') Creación 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-schedule-line me-2"></i>Creación de horarios
                    </h5>
                    <p class="text-muted mb-4">
                        Esta herramienta te ayudará a crear los horarios de cada ciclo/periodo escolar para los grupos configurados previamente. Para comenzar selecciona el plantel, plan de estudios y periodo/ciclo y da clic en buscar.
                    </p>

                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label for="filtroPlantel" class="form-label">Plantel</label>
                                <select class="form-select" id="filtroPlantel">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPlanEstudio" class="form-label">Plan Estudios</label>
                                <select class="form-select" id="filtroPlanEstudio">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPeriodo" class="form-label">Periodo</label>
                                <select class="form-select" id="filtroPeriodo">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary w-100" id="btnBuscar">
                                    <i class="ri-search-line me-1"></i>Buscar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-4 col-xl-3">
            <div class="card">
                <div class="card-body p-0">
                    <ul class="nav nav-tabs nav-tabs-custom card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tabGrados" role="tab">
                                <i class="ri-numbers-line me-1"></i>Grados
                                <span id="badgeGrados" class="badge bg-warning ms-1 d-none">!</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tabGrupos" role="tab">
                                <i class="ri-group-line me-1"></i>Grupos
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane active" id="tabGrados" role="tabpanel">
                            <div id="estadoVacioGrados" class="text-center py-4">
                                <p class="text-muted mb-0">Sin Grados</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar.</p>
                            </div>
                            <ul class="list-group list-group-flush" id="listaGrados"></ul>
                        </div>
                        <div class="tab-pane" id="tabGrupos" role="tabpanel">
                            <div id="estadoVacioGrupos" class="text-center py-4">
                                <p class="text-muted mb-0">Sin Grupos</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar.</p>
                            </div>
                            <ul class="list-group list-group-flush" id="listaGrupos"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8 col-xl-9">
            <div class="card h-100">
                <div class="card-body">
                    <div id="panelSeleccionGrupo" class="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">Selecciona un grupo para mostrar la información.</p>
                    </div>
                    <div id="panelHorarioGrupo" class="d-none">
                        <h6 class="mb-3">Horario del grupo: <span id="tituloGrupoClave"></span></h6>
                        <div class="table-responsive mb-4">
                            <table class="table table-bordered align-middle mb-0" id="tablaHorarioGrilla" style="min-width: 720px;">
                                <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 id="tablaHorariosBody"></tbody>
                            </table>
                        </div>
                        <div class="card bg-light border-0">
                            <div class="card-body">
                                <h6 class="card-title mb-3">Agregar clase al horario</h6>
                                <div class="row g-2 align-items-end">
                                    <div class="col-md-3">
                                        <label for="nuevaMateria" class="form-label small">Materia</label>
                                        <select class="form-select form-select-sm" id="nuevaMateria">
                                            <option value="">-- Seleccione --</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="nuevoDia" class="form-label small">Día</label>
                                        <select class="form-select form-select-sm" id="nuevoDia">
                                            <option value="Lunes">Lunes</option>
                                            <option value="Martes">Martes</option>
                                            <option value="Miércoles">Miércoles</option>
                                            <option value="Jueves">Jueves</option>
                                            <option value="Viernes">Viernes</option>
                                            <option value="Sábado">Sábado</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <label for="nuevaHoraInicio" class="form-label small">Hora inicio</label>
                                        <input type="time" class="form-control form-control-sm" id="nuevaHoraInicio" value="08:00">
                                    </div>
                                    <div class="col-md-2">
                                        <label for="nuevaHoraFin" class="form-label small">Hora fin</label>
                                        <input type="time" class="form-control form-control-sm" id="nuevaHoraFin" value="09:00">
                                    </div>
                                    <div class="col-md-2">
                                        <label for="nuevaAula" class="form-label small">Aula</label>
                                        <input type="text" class="form-control form-control-sm" id="nuevaAula" placeholder="Opcional" maxlength="20">
                                    </div>
                                    <div class="col-md-1">
                                        <button type="button" class="btn btn-primary btn-sm w-100" id="btnAgregarClase">
                                            <i class="ri-add-line"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    var baseUrl = '{{ url("") }}';
    var datosBusqueda = { grados: [], grupos: [], escuela_id: null, plan_estudio_id: null, ciclo_id: null };
    var grupoSeleccionado = null;
    var horariosGrupo = [];
    var materiasPlan = [];

    function cargarSelects() {
        fetch(baseUrl + '/api/creacion-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/creacion-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/creacion-horarios/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPeriodo');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
    }

    function buscar() {
        var escuelaId = document.getElementById('filtroPlantel').value;
        var planId = document.getElementById('filtroPlanEstudio').value;
        var cicloId = document.getElementById('filtroPeriodo').value;
        if (!cicloId || !planId) {
            datosBusqueda.grados = [];
            datosBusqueda.grupos = [];
            renderGrados();
            renderGrupos();
            return;
        }
        var params = new URLSearchParams({ escuela_id: escuelaId || '', plan_estudio_id: planId, ciclo_id: cicloId });
        fetch(baseUrl + '/api/creacion-horarios/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosBusqueda.grados = data.grados || [];
                datosBusqueda.grupos = data.grupos || [];
                datosBusqueda.escuela_id = data.escuela_id;
                datosBusqueda.plan_estudio_id = data.plan_estudio_id;
                datosBusqueda.ciclo_id = data.ciclo_id;
                renderGrados();
                renderGrupos();
            })
            .catch(function() {
                datosBusqueda.grados = [];
                datosBusqueda.grupos = [];
                renderGrados();
                renderGrupos();
            });
    }

    function renderGrados() {
        var lista = document.getElementById('listaGrados');
        var estadoVacio = document.getElementById('estadoVacioGrados');
        lista.innerHTML = '';
        if (!datosBusqueda.grados.length) {
            estadoVacio.classList.remove('d-none');
            lista.style.display = 'none';
            return;
        }
        estadoVacio.classList.add('d-none');
        lista.style.display = 'block';
        datosBusqueda.grados.forEach(function(g) {
            var li = document.createElement('li');
            li.className = 'list-group-item';
            li.textContent = g.nombre || (g.grado + '°');
            lista.appendChild(li);
        });
    }

    function renderGrupos() {
        var lista = document.getElementById('listaGrupos');
        var estadoVacio = document.getElementById('estadoVacioGrupos');
        lista.innerHTML = '';
        if (!datosBusqueda.grupos.length) {
            estadoVacio.classList.remove('d-none');
            lista.style.display = 'none';
            return;
        }
        estadoVacio.classList.add('d-none');
        lista.style.display = 'block';
        datosBusqueda.grupos.forEach(function(g) {
            var li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action';
            li.textContent = g.clave + (g.turno ? ' (' + g.turno.nombre + ')' : '');
            li.dataset.grupoId = g.id;
            li.addEventListener('click', function() {
                lista.querySelectorAll('.list-group-item').forEach(function(el) { el.classList.remove('active'); });
                li.classList.add('active');
                seleccionarGrupo(g.id);
            });
            lista.appendChild(li);
        });
    }

    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) { return (h || '').substr ? (h || '').substr(0, 5) : (h || ''); }

    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 seleccionarGrupo(id) {
        grupoSeleccionado = datosBusqueda.grupos.find(function(g) { return g.id == id; });
        if (!grupoSeleccionado) return;
        document.getElementById('panelSeleccionGrupo').classList.add('d-none');
        document.getElementById('panelHorarioGrupo').classList.remove('d-none');
        document.getElementById('tituloGrupoClave').textContent = grupoSeleccionado.clave || '';
        cargarMateriasPlan();
        cargarHorariosGrupo();
    }

    function cargarMateriasPlan() {
        var planId = grupoSeleccionado && grupoSeleccionado.plan_estudio_id ? grupoSeleccionado.plan_estudio_id : datosBusqueda.plan_estudio_id;
        if (!planId) {
            document.getElementById('nuevaMateria').innerHTML = '<option value="">-- Sin plan --</option>';
            return;
        }
        fetch(baseUrl + '/api/creacion-horarios/materias-plan?plan_estudio_id=' + planId, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                materiasPlan = data || [];
                var sel = document.getElementById('nuevaMateria');
                sel.innerHTML = '<option value="">-- Seleccione --</option>' + materiasPlan.map(function(m) {
                    return '<option value="' + m.id + '">' + (m.nombre || m.clave || '') + '</option>';
                }).join('');
            });
    }

    function cargarHorariosGrupo() {
        if (!grupoSeleccionado) return;
        fetch(baseUrl + '/api/creacion-horarios/grupos/' + grupoSeleccionado.id + '/horarios', { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                horariosGrupo = data || [];
                renderTablaHorarios();
            })
            .catch(function() {
                horariosGrupo = [];
                renderTablaHorarios();
            });
    }

    function eliminarHorarioClick(horarioId) {
        Swal.fire({
            title: '¿Eliminar esta clase del horario?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then(function(result) {
            if (!result.isConfirmed) return;
            fetch(baseUrl + '/api/creacion-horarios/horarios/' + horarioId, {
                method: 'DELETE',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            }).then(function(r) {
                if (r.status === 204) {
                    horariosGrupo = horariosGrupo.filter(function(x) { return x.id != horarioId; });
                    renderTablaHorarios();
                }
            });
        });
    }

    function renderTablaHorarios() {
        var tbody = document.getElementById('tablaHorariosBody');
        tbody.innerHTML = '';
        var res = construirGrillaHorarios(horariosGrupo);
        var grid = res.grid;
        var covered = res.covered;
        for (var p = 0; p < PERIODOS.length; p++) {
            var tr = document.createElement('tr');
            var horaTexto = PERIODOS[p].num + ' ' + PERIODOS[p].start + ' - ' + PERIODOS[p].end;
            tr.innerHTML = '<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 td = document.createElement('td');
                    td.className = 'p-2';
                    td.rowSpan = cell.span;
                    td.innerHTML = '<div class="fw-semibold small">' + (matNombre || '').replace(/</g, '&lt;') + '</div>' +
                        '<div class="text-muted" style="font-size: 0.75rem;">—</div>' +
                        '<button type="button" class="btn btn-sm btn-outline-danger mt-1 btnEliminarHorario" data-id="' + h.id + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>';
                    td.querySelector('.btnEliminarHorario').addEventListener('click', function() { eliminarHorarioClick(parseInt(this.dataset.id, 10)); });
                    tr.appendChild(td);
                } else {
                    var tdEmpty = document.createElement('td');
                    tdEmpty.className = 'p-2 bg-light';
                    tr.appendChild(tdEmpty);
                }
            }
            tbody.appendChild(tr);
        }
    }

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

    document.getElementById('btnAgregarClase').addEventListener('click', function() {
        if (!grupoSeleccionado) return;
        var materiaId = document.getElementById('nuevaMateria').value;
        var dia = document.getElementById('nuevoDia').value;
        var horaInicio = document.getElementById('nuevaHoraInicio').value;
        var horaFin = document.getElementById('nuevaHoraFin').value;
        var aula = document.getElementById('nuevaAula').value.trim();
        if (!materiaId) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona una materia.' });
            return;
        }
        if (!horaInicio || !horaFin) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Indica hora de inicio y fin.' });
            return;
        }
        var payload = {
            grupo_id: grupoSeleccionado.id,
            materia_id: materiaId,
            dia_semana: dia,
            hora_inicio: horaInicio,
            hora_fin: horaFin,
            aula: aula || null
        };
        fetch(baseUrl + '/api/creacion-horarios/horarios', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (!r.ok) return r.json().then(function(e) { throw new Error(e.message || 'Error'); });
            return r.json();
        }).then(function(h) {
            horariosGrupo.push(h);
            renderTablaHorarios();
            document.getElementById('nuevaMateria').value = '';
            document.getElementById('nuevaHoraInicio').value = '08:00';
            document.getElementById('nuevaHoraFin').value = '09:00';
            document.getElementById('nuevaAula').value = '';
        }).catch(function(err) {
            Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error al agregar. Verifica que no se solape con otro horario.' });
        });
    });

    cargarSelects();
    </script>
@endsection