@extends('layouts.master')

@section('title')
    Captura de inasistencias
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Registro de evaluaciones @endslot
        @slot('title') Captura de inasistencias @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            {{-- Encabezado --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body py-4">
                    <div class="d-flex align-items-start gap-3">
                        <div class="avatar-md flex-shrink-0 rounded bg-primary bg-opacity-10 text-primary d-flex align-items-center justify-content-center">
                            <i class="ri-calendar-event-line fs-2"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h4 class="card-title mb-1 text-dark fw-semibold">Captura de inasistencias</h4>
                            <p class="text-muted mb-2 small">Usa el siguiente filtro para mostrar las asignaturas y sus evaluaciones disponibles para captura de inasistencias.</p>
                            <p class="text-muted mb-0 small fst-italic">Nota. En los filtros se cargan todos los planteles activos, planes y periodos. Grado y Grupo y Profesor se muestran según el plantel, plan y periodo elegidos. Al buscar, solo aparecen asignaturas con horarios configurados y alumnos inscritos en el grupo.</p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filtros --}}
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body py-3">
                    <div class="row align-items-end g-3">
                        <div class="col-md-2">
                            <label class="form-label small fw-medium text-body mb-1">Profesor</label>
                            <select class="form-select form-select-sm" id="filtroProfesor">
                                <option value="">-- Todos --</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-medium text-body mb-1">Plantel <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm" id="filtroPlantel">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-medium text-body mb-1">Plan Estudios <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm" id="filtroPlanEstudios">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-medium text-body mb-1">Periodo <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm" id="filtroPeriodo">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="form-label small fw-medium text-body mb-1">Grado y Grupo <span class="text-danger">*</span></label>
                            <select class="form-select form-select-sm" id="filtroGradoGrupo">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-2 text-md-end">
                            <button type="button" class="btn btn-primary btn-sm px-3" id="btnBuscar">
                                <i class="ri-search-line me-1"></i>Buscar
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Asignaturas y Evaluaciones (izq) + Registrar inasistencias (der) --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="row g-0">
                        {{-- Columna izquierda: Asignaturas y Evaluaciones --}}
                        <div class="col-md-4 col-lg-4 border-end">
                            <div class="p-3 border-bottom bg-light">
                                <h6 class="mb-0 text-primary fw-semibold"><i class="ri-book-2-line me-2"></i>Asignaturas</h6>
                            </div>
                            <div id="asignaturasVacio" class="text-muted small text-center py-4 px-3">
                                Use el filtro y presione Buscar para mostrar las asignaturas.
                            </div>
                            <ul id="listaAsignaturas" class="list-group list-group-flush d-none"></ul>
                            <div class="p-3 border-top border-bottom bg-light mt-2">
                                <h6 class="mb-0 text-primary fw-semibold"><i class="ri-file-list-3-line me-2"></i>Evaluaciones</h6>
                            </div>
                            <div id="evaluacionesVacio" class="text-muted small text-center py-4 px-3">
                                Elige una evaluación de la lista.
                            </div>
                            <ul id="listaEvaluaciones" class="list-group list-group-flush d-none"></ul>
                        </div>
                        {{-- Columna derecha: Registrar inasistencias --}}
                        <div class="col-md-8 col-lg-8">
                            <div class="p-3 border-bottom bg-light">
                                <h6 class="mb-0 fw-semibold text-primary"><i class="ri-user-unfollow-line me-2"></i>Registrar inasistencias</h6>
                            </div>
                            <div id="panelRegistroVacio" class="text-center py-5 px-4 text-muted">
                                <div class="avatar-lg mx-auto mb-3 bg-light text-muted rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-information-line fs-1"></i>
                                </div>
                                <p class="small mb-0">Selecciona una evaluación para registrar sus inasistencias.</p>
                            </div>
                            <div id="panelRegistroContenido" class="p-0 d-none">
                                <p class="small text-muted px-3 pt-2 mb-0" id="panelCapturaSubtitulo"></p>
                                <div class="table-responsive">
                                    <table class="table table-hover table-sm mb-0">
                                        <thead class="table-light">
                                            <tr>
                                                <th class="text-nowrap">Matrícula</th>
                                                <th class="text-nowrap">Nombre</th>
                                                <th class="text-nowrap" style="width:120px;">Inasistencias</th>
                                            </tr>
                                        </thead>
                                        <tbody id="panelCapturaBody"></tbody>
                                    </table>
                                </div>
                                <div class="p-3 border-top">
                                    <button type="button" class="btn btn-primary btn-sm" id="btnGuardarInasistencias">
                                        <i class="ri-save-line me-1"></i>Guardar inasistencias
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    (function() {
        var baseUrl = '{{ url("") }}';
        var api = baseUrl + '/api/captura-inasistencias/';
        var datosBusqueda = { asignaturas: [], evaluaciones: [] };
        var seleccionActual = {
            plantel_id: '', plan_estudio_id: '', ciclo_id: '', grupo_id: '',
            materia_id: '', materia_nombre: '', evaluacion_criterio_id: '', evaluacion_nombre: ''
        };
        var alumnosCaptura = [];

        function getFiltros() {
            return {
                plantel_id: document.getElementById('filtroPlantel').value,
                plan_estudio_id: document.getElementById('filtroPlanEstudios').value,
                ciclo_id: document.getElementById('filtroPeriodo').value,
                grupo_id: document.getElementById('filtroGradoGrupo').value,
                docente_id: document.getElementById('filtroProfesor').value || ''
            };
        }

        function cargarPlanteles() {
            fetch(api + 'planteles', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var lista = Array.isArray(data) ? data : [];
                    var sel = document.getElementById('filtroPlantel');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + lista.map(function(p) {
                        return '<option value="' + (p.id || '') + '">' + (p.nombre || '') + '</option>';
                    }).join('');
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los planteles.' });
                });
        }

        function cargarPlanes() {
            var plantelId = document.getElementById('filtroPlantel').value;
            if (!plantelId) {
                document.getElementById('filtroPlanEstudios').innerHTML = '<option value="">-- Seleccione --</option>';
                document.getElementById('filtroPeriodo').innerHTML = '<option value="">-- Seleccione --</option>';
                document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Seleccione --</option>';
                document.getElementById('filtroProfesor').innerHTML = '<option value="">-- Todos --</option>';
            }
            var params = new URLSearchParams();
            if (plantelId) params.set('plantel_id', plantelId);
            fetch(api + 'planes' + (params.toString() ? '?' + params : ''), { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var lista = Array.isArray(data) ? data : [];
                    var sel = document.getElementById('filtroPlanEstudios');
                    if (lista.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + lista.map(function(p) {
                            return '<option value="' + (p.id || '') + '">' + (p.nombre || '') + '</option>';
                        }).join('');
                    }
                    document.getElementById('filtroPeriodo').innerHTML = '<option value="">-- Seleccione --</option>';
                    document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Seleccione --</option>';
                    cargarProfesores();
                })
                .catch(function() {
                    document.getElementById('filtroPlanEstudios').innerHTML = '<option value="">-- Error al cargar --</option>';
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los planes.' });
                });
        }

        function cargarPeriodos() {
            var f = getFiltros();
            if (!f.plan_estudio_id) {
                document.getElementById('filtroPeriodo').innerHTML = '<option value="">-- Seleccione --</option>';
                document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Seleccione --</option>';
                return;
            }
            var params = new URLSearchParams();
            if (f.plantel_id) params.set('plantel_id', f.plantel_id);
            params.set('plan_estudio_id', f.plan_estudio_id);
            fetch(api + 'periodos?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var lista = Array.isArray(data) ? data : [];
                    var sel = document.getElementById('filtroPeriodo');
                    if (lista.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + lista.map(function(c) {
                            return '<option value="' + (c.id || '') + '">' + (c.nombre || '') + '</option>';
                        }).join('');
                    }
                    document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Seleccione --</option>';
                    cargarProfesores();
                })
                .catch(function() {
                    document.getElementById('filtroPeriodo').innerHTML = '<option value="">-- Error al cargar --</option>';
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los periodos.' });
                });
        }

        function cargarGradoGrupo() {
            var f = getFiltros();
            if (!f.plantel_id || !f.plan_estudio_id || !f.ciclo_id) {
                document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Seleccione --</option>';
                return;
            }
            var params = new URLSearchParams({
                plantel_id: f.plantel_id,
                plan_estudio_id: f.plan_estudio_id,
                ciclo_id: f.ciclo_id
            });
            if (f.docente_id) params.set('docente_id', f.docente_id);
            fetch(api + 'grado-grupo?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var lista = Array.isArray(data) ? data : [];
                    var sel = document.getElementById('filtroGradoGrupo');
                    if (lista.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + lista.map(function(g) {
                            return '<option value="' + (g.id || '') + '">' + (g.label || g.id || '') + '</option>';
                        }).join('');
                    }
                })
                .catch(function() {
                    document.getElementById('filtroGradoGrupo').innerHTML = '<option value="">-- Error al cargar --</option>';
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los grupos.' });
                });
        }

        function cargarProfesores() {
            var f = getFiltros();
            if (!f.plantel_id || !f.plan_estudio_id || !f.ciclo_id) {
                document.getElementById('filtroProfesor').innerHTML = '<option value="">-- Todos --</option>';
                return;
            }
            var params = new URLSearchParams({
                plantel_id: f.plantel_id,
                plan_estudio_id: f.plan_estudio_id,
                ciclo_id: f.ciclo_id
            });
            fetch(api + 'profesores?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var lista = Array.isArray(data) ? data : [];
                    var sel = document.getElementById('filtroProfesor');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + lista.map(function(d) {
                        return '<option value="' + (d.id || '') + '">' + (d.nombre || '') + '</option>';
                    }).join('');
                })
                .catch(function() {
                    document.getElementById('filtroProfesor').innerHTML = '<option value="">-- Todos --</option>';
                });
        }

        function validarFiltros() {
            var f = getFiltros();
            if (!f.plantel_id) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plantel.' }); return false; }
            if (!f.plan_estudio_id) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plan de estudios.' }); return false; }
            if (!f.ciclo_id) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Periodo.' }); return false; }
            if (!f.grupo_id) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Grado y Grupo.' }); return false; }
            return true;
        }

        function renderAsignaturas() {
            var lista = document.getElementById('listaAsignaturas');
            var vacio = document.getElementById('asignaturasVacio');
            if (!datosBusqueda.asignaturas || datosBusqueda.asignaturas.length === 0) {
                lista.classList.add('d-none');
                vacio.classList.remove('d-none');
                vacio.textContent = 'No hay asignaturas para los filtros seleccionados.';
                return;
            }
            vacio.classList.add('d-none');
            lista.classList.remove('d-none');
            lista.innerHTML = datosBusqueda.asignaturas.map(function(a) {
                return '<li class="list-group-item list-group-item-action" data-materia-id="' + a.id + '" data-materia-nombre="' + (a.nombre || '').replace(/"/g, '&quot;') + '" role="button">' + (a.nombre || a.clave || a.id) + '</li>';
            }).join('');
        }

        function renderEvaluaciones() {
            var lista = document.getElementById('listaEvaluaciones');
            var vacio = document.getElementById('evaluacionesVacio');
            if (!datosBusqueda.evaluaciones || datosBusqueda.evaluaciones.length === 0) {
                lista.classList.add('d-none');
                vacio.classList.remove('d-none');
                vacio.textContent = 'No hay evaluaciones configuradas para este plan.';
                return;
            }
            vacio.classList.add('d-none');
            lista.classList.remove('d-none');
            lista.innerHTML = datosBusqueda.evaluaciones.map(function(e) {
                return '<li class="list-group-item list-group-item-action" data-eval-id="' + e.id + '" data-eval-nombre="' + (e.nombre || '').replace(/"/g, '&quot;') + '" role="button">' + (e.nombre || e.abreviatura || e.id) + '</li>';
            }).join('');
        }

        function ejecutarBuscar() {
            if (!validarFiltros()) return;
            var f = getFiltros();
            var params = new URLSearchParams({
                plantel_id: f.plantel_id,
                plan_estudio_id: f.plan_estudio_id,
                ciclo_id: f.ciclo_id,
                grupo_id: f.grupo_id
            });
            fetch(api + 'buscar?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) {
                    return r.json().then(function(data) {
                        if (!r.ok) throw new Error((data && data.message) || 'Error en la búsqueda.');
                        return data;
                    });
                })
                .then(function(data) {
                    datosBusqueda = {
                        asignaturas: data.asignaturas || [],
                        evaluaciones: data.evaluaciones || []
                    };
                    seleccionActual.grupo_id = f.grupo_id;
                    seleccionActual.plantel_id = f.plantel_id;
                    seleccionActual.plan_estudio_id = f.plan_estudio_id;
                    seleccionActual.ciclo_id = f.ciclo_id;
                    seleccionActual.materia_id = '';
                    seleccionActual.evaluacion_criterio_id = '';
                    renderAsignaturas();
                    renderEvaluaciones();
                    document.getElementById('panelRegistroVacio').classList.remove('d-none');
                    document.getElementById('panelRegistroContenido').classList.add('d-none');
                })
                .catch(function(err) {
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'No se pudieron cargar los datos.' });
                });
        }

        function cargarAlumnosParaCaptura() {
            if (!seleccionActual.grupo_id || !seleccionActual.materia_id || !seleccionActual.evaluacion_criterio_id) return;
            var params = new URLSearchParams({
                grupo_id: seleccionActual.grupo_id,
                materia_id: seleccionActual.materia_id,
                evaluacion_criterio_id: seleccionActual.evaluacion_criterio_id
            });
            fetch(api + 'alumnos?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    alumnosCaptura = data.alumnos || [];
                    var tbody = document.getElementById('panelCapturaBody');
                    if (alumnosCaptura.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-muted">No hay alumnos inscritos en este grupo.</td></tr>';
                    } else {
                        tbody.innerHTML = alumnosCaptura.map(function(a, idx) {
                            return '<tr data-idx="' + idx + '">' +
                                '<td>' + (a.matricula || '—') + '</td>' +
                                '<td>' + (a.nombre_completo || '—') + '</td>' +
                                '<td><input type="number" min="0" class="form-control form-control-sm input-cantidad" data-alumno-id="' + a.alumno_id + '" value="' + (a.cantidad || 0) + '" /></td></tr>';
                        }).join('');
                    }
                    document.getElementById('panelCapturaSubtitulo').textContent = 'Asignatura: ' + (seleccionActual.materia_nombre || '—') + ' | Evaluación: ' + (seleccionActual.evaluacion_nombre || '—');
                    document.getElementById('panelRegistroVacio').classList.add('d-none');
                    document.getElementById('panelRegistroContenido').classList.remove('d-none');
                })
                .catch(function() {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los alumnos.' });
                });
        }

        function guardarInasistencias() {
            if (!seleccionActual.grupo_id || !seleccionActual.materia_id || !seleccionActual.evaluacion_criterio_id) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione una asignatura y una evaluación.' });
                return;
            }
            var inputs = document.querySelectorAll('#panelCapturaBody .input-cantidad');
            var alumnos = [];
            inputs.forEach(function(inp) {
                alumnos.push({
                    alumno_id: inp.getAttribute('data-alumno-id'),
                    cantidad: parseInt(inp.value, 10) || 0
                });
            });
            var btn = document.getElementById('btnGuardarInasistencias');
            btn.disabled = true;
            fetch(api + 'guardar', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    grupo_id: seleccionActual.grupo_id,
                    materia_id: seleccionActual.materia_id,
                    evaluacion_criterio_id: seleccionActual.evaluacion_criterio_id,
                    alumnos: alumnos
                })
            })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    btn.disabled = false;
                    if (data.success) {
                        Swal.fire({ icon: 'success', title: 'Listo', text: data.message || 'Inasistencias guardadas correctamente.' });
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudieron guardar.' });
                    }
                })
                .catch(function() {
                    btn.disabled = false;
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión. Intente de nuevo.' });
                });
        }

        document.getElementById('filtroPlantel').addEventListener('change', function() {
            cargarPlanes();
        });
        document.getElementById('filtroPlanEstudios').addEventListener('change', function() {
            cargarPeriodos();
        });
        document.getElementById('filtroPeriodo').addEventListener('change', function() {
            cargarGradoGrupo();
            cargarProfesores();
        });
        document.getElementById('filtroProfesor').addEventListener('change', function() {
            cargarGradoGrupo();
        });
        document.getElementById('filtroGradoGrupo').addEventListener('change', function() { });

        document.getElementById('btnBuscar').addEventListener('click', ejecutarBuscar);

        document.getElementById('listaAsignaturas').addEventListener('click', function(ev) {
            var li = ev.target.closest('[data-materia-id]');
            if (!li) return;
            seleccionActual.materia_id = li.getAttribute('data-materia-id');
            seleccionActual.materia_nombre = li.getAttribute('data-materia-nombre') || '';
            document.querySelectorAll('#listaAsignaturas .list-group-item').forEach(function(el) { el.classList.remove('active'); });
            li.classList.add('active');
        });

        document.getElementById('listaEvaluaciones').addEventListener('click', function(ev) {
            var li = ev.target.closest('[data-eval-id]');
            if (!li) return;
            seleccionActual.evaluacion_criterio_id = li.getAttribute('data-eval-id');
            seleccionActual.evaluacion_nombre = li.getAttribute('data-eval-nombre') || '';
            document.querySelectorAll('#listaEvaluaciones .list-group-item').forEach(function(el) { el.classList.remove('active'); });
            li.classList.add('active');
            cargarAlumnosParaCaptura();
        });

        document.getElementById('btnGuardarInasistencias').addEventListener('click', guardarInasistencias);

        cargarPlanteles();
        cargarPlanes();
    })();
    </script>
@endsection