@extends('layouts.master')

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

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Registro de evaluaciones @endslot
        @slot('title') Captura de calificaciones @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-file-list-3-line fs-2"></i>
                        </div>
                        <div class="flex-grow-1">
                            <h4 class="card-title mb-1 text-dark fw-semibold">Captura de calificaciones</h4>
                            <p class="text-muted mb-2 small">Usa el siguiente filtro para mostrar las asignaturas y sus evaluaciones disponibles para captura de calificaciones.</p>
                            <p class="text-muted mb-0 small fst-italic">Nota. Solo se mostrarán los planes, periodos/ciclos, grados y grupos que cuenten con grupos configurados y con alumnos inscritos a ellos.</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>

            {{-- Tres paneles: Asignaturas | Evaluaciones | Calificaciones --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="row g-0">
                        {{-- Asignaturas --}}
                        <div class="col-md-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>
                        {{-- Evaluaciones --}}
                        <div class="col-md-4 border-end">
                            <div class="p-3 border-bottom bg-light">
                                <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>
                        {{-- Calificaciones --}}
                        <div class="col-md-4">
                            <div class="p-3 border-bottom bg-light">
                                <h6 class="mb-0 text-primary fw-semibold"><i class="ri-mark-pen-line me-2"></i>Calificaciones</h6>
                            </div>
                            <div id="panelCalificacionesVacio" class="text-center py-5 px-3 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 asignatura y una evaluación para capturar calificaciones.</p>
                            </div>
                            <div id="panelCalificacionesContenido" class="p-0 d-none">
                                <p class="small text-muted px-3 pt-2 mb-0" id="panelCalificacionesSubtitulo"></p>
                                <p class="small px-3 mb-0" id="panelCalificacionesConfig"></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:100px;">Calificación</th>
                                            </tr>
                                        </thead>
                                        <tbody id="panelCalificacionesBody"></tbody>
                                    </table>
                                </div>
                                <div class="p-3 border-top">
                                    <button type="button" class="btn btn-primary btn-sm" id="btnGuardarCalificaciones">
                                        <i class="ri-save-line me-1"></i>Guardar calificaciones
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    (function() {
        var baseUrl = '{{ url("") }}';
        var api = baseUrl + '/api/captura-calificaciones/';
        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 configCalificacion = { calificacion_minima: 0, calificacion_maxima: 10, calificacion_aprobatoria: 6 };

        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 sel = document.getElementById('filtroPlantel');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                        return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
                    }).join('');
                });
        }

        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>';
                return;
            }
            var params = new URLSearchParams({ plantel_id: plantelId });
            fetch(api + 'planes?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroPlanEstudios');
                    if (!data || data.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + data.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.plantel_id || !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({ plantel_id: f.plantel_id, 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 sel = document.getElementById('filtroPeriodo');
                    if (!data || data.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + data.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 sel = document.getElementById('filtroGradoGrupo');
                    if (!data || data.length === 0) {
                        sel.innerHTML = '<option value="">No se encontró información</option>';
                    } else {
                        sel.innerHTML = '<option value="">-- Seleccione --</option>' + data.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 sel = document.getElementById('filtroProfesor');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + (data || []).map(function(d) {
                        return '<option value="' + d.id + '">' + (d.nombre || '') + '</option>';
                    }).join('');
                });
        }

        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('panelCalificacionesVacio').classList.remove('d-none');
                    document.getElementById('panelCalificacionesContenido').classList.add('d-none');
                })
                .catch(function(err) {
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'No se pudieron cargar los datos.' });
                });
        }

        function cargarAlumnosParaCalificaciones() {
            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) {
                    var alumnos = data.alumnos || [];
                    var config = data.config || {};
                    configCalificacion = {
                        calificacion_minima: config.calificacion_minima !== undefined ? config.calificacion_minima : 0,
                        calificacion_maxima: config.calificacion_maxima !== undefined ? config.calificacion_maxima : 10,
                        calificacion_aprobatoria: config.calificacion_aprobatoria !== undefined ? config.calificacion_aprobatoria : 6
                    };
                    var min = configCalificacion.calificacion_minima;
                    var max = configCalificacion.calificacion_maxima;
                    var aprob = configCalificacion.calificacion_aprobatoria;
                    var step = (max <= 10 && min >= 0) ? '0.01' : '1';
                    var tbody = document.getElementById('panelCalificacionesBody');
                    if (alumnos.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-muted">No hay alumnos inscritos en este grupo.</td></tr>';
                    } else {
                        tbody.innerHTML = alumnos.map(function(a) {
                            var cal = (a.calificacion !== undefined && a.calificacion !== null && a.calificacion !== '') ? a.calificacion : '';
                            var esReprobado = cal !== '' && parseFloat(cal) < aprob;
                            var cls = 'form-control form-control-sm input-calificacion' + (esReprobado ? ' border-danger' : '');
                            return '<tr><td>' + (a.matricula || '—') + '</td><td>' + (a.nombre_completo || '—') + '</td>' +
                                '<td><input type="number" min="' + min + '" max="' + max + '" step="' + step + '" class="' + cls + '" data-alumno-id="' + a.alumno_id + '" value="' + cal + '" placeholder="—" /></td></tr>';
                        }).join('');
                        document.getElementById('panelCalificacionesBody').querySelectorAll('.input-calificacion').forEach(function(inp) {
                            inp.addEventListener('input', function() {
                                var v = parseFloat(this.value);
                                if (!isNaN(v) && v < configCalificacion.calificacion_aprobatoria) {
                                    this.classList.add('border-danger');
                                } else {
                                    this.classList.remove('border-danger');
                                }
                            });
                        });
                    }
                    document.getElementById('panelCalificacionesSubtitulo').textContent = 'Asignatura: ' + (seleccionActual.materia_nombre || '—') + ' | Evaluación: ' + (seleccionActual.evaluacion_nombre || '—');
                    document.getElementById('panelCalificacionesConfig').innerHTML = '<span class="text-muted">Rango válido: ' + min + ' a ' + max + '. Calificación aprobatoria: ' + aprob + '.</span>';
                    document.getElementById('panelCalificacionesVacio').classList.add('d-none');
                    document.getElementById('panelCalificacionesContenido').classList.remove('d-none');
                })
                .catch(function() {
                    Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudieron cargar los alumnos.' });
                });
        }

        function guardarCalificaciones() {
            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 min = configCalificacion.calificacion_minima;
            var max = configCalificacion.calificacion_maxima;
            var inputs = document.querySelectorAll('#panelCalificacionesBody .input-calificacion');
            var alumnos = [];
            var invalidos = [];
            inputs.forEach(function(inp, idx) {
                var val = inp.value.trim();
                alumnos.push({
                    alumno_id: inp.getAttribute('data-alumno-id'),
                    calificacion: val === '' ? null : val
                });
                if (val !== '' && isNaN(parseFloat(val))) invalidos.push('Fila ' + (idx + 1) + ': valor no numérico.');
                else if (val !== '' && (parseFloat(val) < min || parseFloat(val) > max)) invalidos.push('Fila ' + (idx + 1) + ': debe estar entre ' + min + ' y ' + max + '.');
            });
            if (invalidos.length > 0) {
                Swal.fire({ icon: 'warning', title: 'Validación', text: invalidos.slice(0, 3).join(' ') + (invalidos.length > 3 ? '…' : '') });
                return;
            }
            var btn = document.getElementById('btnGuardarCalificaciones');
            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 || 'Calificaciones guardadas correctamente.' });
                    } else {
                        var msg = data.message || 'No se pudieron guardar.';
                        if (data.errores && data.errores.length) msg += ' ' + data.errores.slice(0, 3).join(' ');
                        Swal.fire({ icon: 'error', title: 'Error', text: msg });
                    }
                })
                .catch(function(err) {
                    btn.disabled = false;
                    Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión. Intente de nuevo.' });
                });
        }

        document.getElementById('filtroPlantel').addEventListener('change', cargarPlanes);
        document.getElementById('filtroPlanEstudios').addEventListener('change', cargarPeriodos);
        document.getElementById('filtroPeriodo').addEventListener('change', function() {
            cargarGradoGrupo();
            cargarProfesores();
        });
        document.getElementById('filtroProfesor').addEventListener('change', cargarGradoGrupo);
        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');
            if (seleccionActual.evaluacion_criterio_id) cargarAlumnosParaCalificaciones();
        });

        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');
            if (seleccionActual.materia_id) cargarAlumnosParaCalificaciones();
        });

        document.getElementById('btnGuardarCalificaciones').addEventListener('click', guardarCalificaciones);

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