@extends('layouts.master')

@section('title')
    Inscripciones académicas y administrativas múltiples
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Inscripciones @endslot
        @slot('title') Inscripciones académicas y administrativas múltiples @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body py-4">
                    <h4 class="card-title mb-2 text-primary">
                        <i class="ri-file-list-3-line me-2"></i>Inscripciones académicas y administrativas múltiples
                    </h4>
                    <p class="text-muted mb-0">
                        Usando las siguientes opciones, indica el plantel, oferta educativa, el tipo de horario, el ciclo escolar de los <strong>alumnos que deseas promover</strong>, y presiona el botón Buscar para realizar una validación y mostrar a los estudiantes candidatos para ser promovidos:
                    </p>
                </div>
            </div>

            <div class="card border-0 shadow-sm mb-4">
                <div class="card-body">
                    <h6 class="text-primary mb-3">Filtros de búsqueda</h6>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">* Plantel</label>
                            <select class="form-select" id="filtroPlantel">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">* Oferta educativa</label>
                            <select class="form-select" id="filtroOferta">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">* Turno</label>
                            <select class="form-select" id="filtroTurno">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">* Ciclo escolar</label>
                            <select class="form-select" id="filtroCiclo">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">* Grado</label>
                            <select class="form-select" id="filtroGrado">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">* Estatus</label>
                            <select class="form-select" id="filtroEstatus">
                                <option value="">-- Seleccione --</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Estatus de cobranza</label>
                            <select class="form-select" id="filtroEstatusCobranza">
                                <option value="todos" selected>Todos</option>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Periodos que terminaron durante</label>
                            <select class="form-select" id="filtroPeriodosTerminaron">
                                <option value="todos" selected>Todos</option>
                                <option value="vigentes">Vigentes</option>
                            </select>
                        </div>
                        <div class="col-md-4 d-flex align-items-end">
                            <button type="button" class="btn btn-primary" id="btnBuscar">
                                <i class="ri-search-line me-1"></i>Buscar
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <div id="estadoInicial" class="text-center py-5 text-muted">
                        <div class="avatar-lg mx-auto mb-3 bg-light rounded-circle d-flex align-items-center justify-content-center">
                            <i class="ri-information-line fs-1 text-secondary"></i>
                        </div>
                        <p class="mb-0">Usa los filtros para realizar una búsqueda.</p>
                    </div>
                    <div id="panelResultados" class="d-none">
                        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                            <h6 class="text-primary mb-0" id="resumenResultados">Total: 0 estudiante(s) candidato(s).</h6>
                            <div class="d-flex align-items-center gap-2">
                                <label class="small mb-0">Cambiar estatus a:</label>
                                <select class="form-select form-select-sm" id="selectNuevoEstatus" style="width: auto;">
                                    <option value="">-- Seleccione --</option>
                                    <option value="Activo">Activo</option>
                                    <option value="Baja">Baja</option>
                                    <option value="Egresado">Egresado</option>
                                    <option value="Graduado">Graduado</option>
                                </select>
                                <button type="button" class="btn btn-primary btn-sm" id="btnCambiarEstatusMasivo">
                                    <i class="ri-edit-line me-1"></i>Aplicar estatus
                                </button>
                            </div>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th width="40"><input type="checkbox" id="checkTodosMultiples" title="Marcar todos"></th>
                                        <th>Matrícula</th>
                                        <th>Nombre completo</th>
                                        <th>Plantel</th>
                                        <th>Oferta educativa</th>
                                        <th>Turno</th>
                                        <th>Grado</th>
                                        <th>Grupo</th>
                                        <th>Estatus</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaResultadosBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
    (function() {
        var baseUrl = '{{ url('') }}';
        var api = baseUrl + '/api/inscripciones-acad-admin-multiples/';

        function getValue(selectId) {
            var sel = document.getElementById(selectId);
            return sel && sel.value ? sel.value.trim() : '';
        }

        function cargarSelects() {
            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 || []).forEach(function(p) {
                        var opt = document.createElement('option');
                        opt.value = p.id;
                        opt.textContent = p.nombre || '';
                        sel.appendChild(opt);
                    });
                });
            fetch(api + 'ofertas', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroOferta');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>';
                    (data || []).forEach(function(o) {
                        var opt = document.createElement('option');
                        opt.value = o.id;
                        opt.textContent = o.nombre || '';
                        sel.appendChild(opt);
                    });
                });
            fetch(api + 'turnos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroTurno');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>';
                    (data || []).forEach(function(t) {
                        var opt = document.createElement('option');
                        opt.value = t.id;
                        opt.textContent = t.nombre || '';
                        sel.appendChild(opt);
                    });
                });
            fetch(api + 'ciclos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroCiclo');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>';
                    (data || []).forEach(function(c) {
                        var opt = document.createElement('option');
                        opt.value = c.id;
                        opt.textContent = c.nombre || '';
                        sel.appendChild(opt);
                    });
                });
            var selGrado = document.getElementById('filtroGrado');
            selGrado.innerHTML = '<option value="">-- Seleccione --</option>';
            ['1', '2', '3', '4', '5', '6', '7', '8', '9'].forEach(function(g) {
                var opt = document.createElement('option');
                opt.value = g;
                opt.textContent = g + '°';
                selGrado.appendChild(opt);
            });
            fetch(api + 'estatus', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroEstatus');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>';
                    (data || []).forEach(function(e) {
                        var opt = document.createElement('option');
                        opt.value = e.id || e.nombre;
                        opt.textContent = e.nombre || e.id || '';
                        sel.appendChild(opt);
                    });
                });
            fetch(api + 'estatus-cobranza', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroEstatusCobranza');
                    var current = sel.value;
                    sel.innerHTML = '<option value="todos">Todos</option>';
                    (data || []).forEach(function(e) {
                        var opt = document.createElement('option');
                        opt.value = e.id || e.nombre;
                        opt.textContent = e.nombre || e.id || '';
                        sel.appendChild(opt);
                    });
                    if (current) sel.value = current;
                });
        }

        function validarFiltros() {
            if (!getValue('filtroPlantel')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plantel.' });
                return false;
            }
            if (!getValue('filtroOferta')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione una Oferta educativa.' });
                return false;
            }
            if (!getValue('filtroTurno')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Turno.' });
                return false;
            }
            if (!getValue('filtroCiclo')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Ciclo escolar.' });
                return false;
            }
            if (!getValue('filtroGrado')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Grado.' });
                return false;
            }
            if (!getValue('filtroEstatus')) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Estatus.' });
                return false;
            }
            return true;
        }

        function buildParams() {
            var params = new URLSearchParams();
            params.append('plantel_id[]', getValue('filtroPlantel'));
            params.append('oferta_educativa_id[]', getValue('filtroOferta'));
            params.append('turno_id[]', getValue('filtroTurno'));
            params.append('ciclo_id[]', getValue('filtroCiclo'));
            params.append('grado[]', getValue('filtroGrado'));
            params.append('estatus[]', getValue('filtroEstatus'));
            params.set('estatus_cobranza', document.getElementById('filtroEstatusCobranza').value || 'todos');
            params.set('periodos_terminaron', document.getElementById('filtroPeriodosTerminaron').value || 'todos');
            return params;
        }

        function renderResultados(inscripciones) {
            var tbody = document.getElementById('tablaResultadosBody');
            var resumen = document.getElementById('resumenResultados');
            tbody.innerHTML = '';
            if (!inscripciones || !inscripciones.length) {
                resumen.textContent = 'No se encontraron candidatos con los filtros seleccionados.';
                return;
            }
            resumen.textContent = 'Total: ' + inscripciones.length + ' estudiante(s) candidato(s). Seleccione y use "Aplicar estatus" para cambiar.';
            inscripciones.forEach(function(i) {
                var tr = document.createElement('tr');
                var badge = (i.estatus === 'Activo') ? 'success' : ((i.estatus === 'Baja') ? 'danger' : 'secondary');
                tr.innerHTML = '<td><input type="checkbox" class="form-check-input check-inscripcion-multiples" value="' + (i.id || '') + '"></td><td>' + (i.matricula || '—') + '</td><td>' + (i.nombre_completo || '—') + '</td><td>' + (i.plantel || '—') + '</td><td>' + (i.oferta_educativa || '—') + '</td><td>' + (i.turno || '—') + '</td><td>' + (i.grado || '—') + '</td><td>' + (i.grupo_clave || '—') + '</td><td><span class="badge bg-' + badge + '">' + (i.estatus || '—') + '</span></td>';
                tbody.appendChild(tr);
            });
        }
        document.getElementById('checkTodosMultiples').addEventListener('change', function() {
            document.querySelectorAll('#tablaResultadosBody .check-inscripcion-multiples').forEach(function(cb) { cb.checked = this.checked; }.bind(this));
        });
        document.getElementById('btnCambiarEstatusMasivo').addEventListener('click', function() {
            var ids = Array.from(document.querySelectorAll('#tablaResultadosBody .check-inscripcion-multiples:checked')).map(function(cb) { return cb.value; }).filter(Boolean);
            if (!ids.length) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione al menos una inscripción.' }); return; }
            var nuevoEstatus = document.getElementById('selectNuevoEstatus').value;
            if (!nuevoEstatus) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione el nuevo estatus.' }); return; }
            var btn = this;
            btn.disabled = true;
            fetch(api + 'cambiar-estatus', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                body: JSON.stringify({ inscripcion_ids: ids, nuevo_estatus: nuevoEstatus })
            }).then(function(r) { return r.json(); }).then(function(data) {
                btn.disabled = false;
                if (data.success) { Swal.fire({ icon: 'success', title: 'Listo', text: data.message }); document.getElementById('btnBuscar').click(); }
                else { Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudo actualizar.' }); }
            }).catch(function() { btn.disabled = false; Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' }); });
        });

        document.getElementById('btnBuscar').addEventListener('click', function() {
            if (!validarFiltros()) return;
            var params = buildParams();
            fetch(api + 'buscar?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) {
                    if (!r.ok) {
                        return r.json().then(function(data) {
                            var msg = (data && data.message) || 'Error en la búsqueda.';
                            if (data && data.errors) {
                                var first = Object.values(data.errors)[0];
                                if (Array.isArray(first)) msg = first[0];
                            }
                            throw new Error(msg);
                        });
                    }
                    return r.json();
                })
                .then(function(data) {
                    document.getElementById('estadoInicial').classList.add('d-none');
                    document.getElementById('panelResultados').classList.remove('d-none');
                    renderResultados(data.inscripciones || []);
                })
                .catch(function(err) {
                    document.getElementById('estadoInicial').classList.add('d-none');
                    document.getElementById('panelResultados').classList.remove('d-none');
                    renderResultados([]);
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'No se pudo conectar con el servidor. Verifique su conexión e intente de nuevo.' });
                });
        });

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