@extends('layouts.master')

@section('title')
    Inscripciones administrativas masivas
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Inscripciones @endslot
        @slot('title') Inscripciones administrativas masivas @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-file-list-3-line me-2"></i>Inscripciones administrativas masivas
                    </h5>
                    <p class="text-muted mb-4" id="textoInstruccionConfigurable">
                        Indica los datos de origen (plantel, oferta, ciclo, turno, grado, etc.) de los alumnos que deseas incluir y los datos de destino; luego presiona Buscar para validar y mostrar los candidatos.
                    </p>
                    <p class="text-muted mb-4 d-none" id="textoInstruccionSiguienteGrado">
                        Usando las siguientes opciones, indica el plantel, oferta educativa, el tipo de horario, el ciclo escolar de los alumnos que deseas promover, y presiona el botón Buscar para realizar una validación y mostrar a los estudiantes candidatos para ser promovidos.
                    </p>

                    <ul class="nav nav-tabs nav-tabs-custom mb-4" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tabConfigurable" role="tab" id="linkTabConfigurable">
                                <i class="ri-settings-3-line me-1"></i>Inscripción configurable
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tabSiguienteGrado" role="tab" id="linkTabSiguienteGrado">
                                <i class="ri-arrow-right-circle-line me-1"></i>Inscripción al siguiente grado
                            </a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <!-- Pestaña Inscripción configurable -->
                        <div class="tab-pane active" id="tabConfigurable" role="tabpanel">
                            <div class="mb-3"><h6 class="text-primary mb-2">Datos de origen</h6></div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">*Plantel</label>
                                    <select class="form-select" id="cfgOrigenPlantel">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Oferta educativa</label>
                                    <select class="form-select" id="cfgOrigenOferta">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Ciclo/Periodo</label>
                                    <select class="form-select" id="cfgOrigenCicloSelect">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                    <small class="text-muted" id="cfgOrigenCicloHelp">No hay periodos definidos</small>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">*Turno</label>
                                    <select class="form-select" id="cfgOrigenTurno">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Grado</label>
                                    <select class="form-select" id="cfgOrigenGrado">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Plan de estudios</label>
                                    <select class="form-select" id="cfgOrigenPlan">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">Grupo</label>
                                    <select class="form-select" id="cfgOrigenGrupo">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Estatus de cobranza</label>
                                    <select class="form-select" id="cfgOrigenEstatusCobranza">
                                        <option value="todos" selected>Todos</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3"><h6 class="text-primary mb-2">Datos de destino</h6></div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">*Plantel</label>
                                    <select class="form-select" id="cfgDestinoPlantel"></select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Oferta educativa</label>
                                    <select class="form-select" id="cfgDestinoOferta"></select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Ciclo/Periodo</label>
                                    <select class="form-select" id="cfgDestinoCiclo"></select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-4">
                                    <label class="form-label">*Turno</label>
                                    <select class="form-select" id="cfgDestinoTurno"></select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Grados</label>
                                    <select class="form-select" id="cfgDestinoGrados">
                                        <option value="auto">Selección automática</option>
                                        <option value="1">1°</option>
                                        <option value="2">2°</option>
                                        <option value="3">3°</option>
                                        <option value="4">4°</option>
                                        <option value="5">5°</option>
                                        <option value="6">6°</option>
                                        <option value="7">7°</option>
                                        <option value="8">8°</option>
                                        <option value="9">9°</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">*Estatus destino</label>
                                    <select class="form-select" id="cfgDestinoEstatus">
                                        <option value="Activo">Activo</option>
                                        <option value="Baja">Baja</option>
                                        <option value="Egresado">Egresado</option>
                                        <option value="Graduado" selected>Graduado</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">*Plan de estudios actual</label>
                                    <select class="form-select" id="cfgDestinoPlan"></select>
                                </div>
                            </div>
                            <div class="text-end">
                                <button type="button" class="btn btn-primary" id="btnBuscarConfigurable"><i class="ri-search-line me-1"></i>Buscar</button>
                            </div>
                        </div>

                        <!-- Pestaña Inscripción al siguiente grado -->
                        <div class="tab-pane" id="tabSiguienteGrado" role="tabpanel">
                            <div class="mb-3"><h6 class="text-primary mb-2">Datos de origen</h6></div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">*Plantel</label>
                                    <select class="form-select" id="sgOrigenPlantel">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">*Oferta educativa</label>
                                    <select class="form-select" id="sgOrigenOferta">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">*Grado</label>
                                    <select class="form-select" id="sgOrigenGrado">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">*Estatus</label>
                                    <select class="form-select" id="sgOrigenEstatus">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">*Turno</label>
                                    <select class="form-select" id="sgOrigenTurno">
                                        <option value="">-- Seleccione --</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Periodos que terminaron durante</label>
                                    <select class="form-select" id="sgPeriodosTerminaron">
                                        <option value="vigentes" selected>Vigentes</option>
                                        <option value="todos">Todos</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">Estatus de cobranza</label>
                                    <select class="form-select" id="sgEstatusCobranza">
                                        <option value="todos" selected>Todos</option>
                                    </select>
                                </div>
                            </div>
                            <div class="text-end">
                                <button type="button" class="btn btn-primary" id="btnBuscarSiguienteGrado"><i class="ri-search-line me-1"></i>Buscar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Resultados (común para ambas pestañas) -->
            <div id="estadoInicial" class="card mt-4">
                <div class="card-body text-center py-5">
                    <div class="avatar-lg mx-auto mb-3">
                        <div class="avatar-title bg-light text-muted rounded-circle"><i class="ri-information-line fs-1"></i></div>
                    </div>
                    <p class="text-muted mb-0">Usa los filtros y presiona Buscar para realizar una búsqueda.</p>
                </div>
            </div>
            <div id="panelResultados" class="card mt-4 d-none">
                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                    <h6 class="card-title mb-0">Estudiantes candidatos</h6>
                    <div id="accionesDestinoConfigurable" class="d-none">
                        <button type="button" class="btn btn-success btn-sm" id="btnAplicarDestino">
                            <i class="ri-check-double-line me-1"></i>Aplicar en destino
                        </button>
                    </div>
                    <div id="accionesSiguienteGrado" class="d-none">
                        <label class="me-2 small">Ciclo destino:</label>
                        <select class="form-select form-select-sm d-inline-block me-2" id="sgDestinoCiclo" style="width: auto;">
                            <option value="">-- Seleccione --</option>
                        </select>
                        <button type="button" class="btn btn-primary btn-sm" id="btnPromoverSiguienteGrado">
                            <i class="ri-arrow-right-circle-line me-1"></i>Promover al siguiente grado
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-3" id="resumenResultados"></p>
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th width="40"><input type="checkbox" id="checkTodosResultados" title="Marcar todos"></th>
                                    <th>Matrícula</th>
                                    <th>Nombre</th>
                                    <th>Plantel</th>
                                    <th>Oferta</th>
                                    <th>Grado</th>
                                    <th>Grupo</th>
                                    <th>Estatus</th>
                                </tr>
                            </thead>
                            <tbody id="tablaResultadosBody"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

    function marcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel || !sel.multiple) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = true;
    }
    function desmarcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = false;
    }
    function getSelectedIds(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel) return [];
        if (sel.multiple) return Array.from(sel.selectedOptions).map(function(o) { return o.value; });
        return sel.value ? [sel.value] : [];
    }

    document.querySelectorAll('.marcar-todos').forEach(function(a) {
        a.addEventListener('click', function(e) { e.preventDefault(); marcarTodos(this.dataset.target); });
    });
    document.querySelectorAll('.desmarcar-todos').forEach(function(a) {
        a.addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos(this.dataset.target); });
    });

    function cargarSelectsConfigurable() {
        var api = baseUrl + '/api/inscripciones-admin-masivas/';
        var optVacio = '<option value="">-- Seleccione --</option>';
        fetch(api + 'planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenPlantel');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>'; }).join('');
            var dest = document.getElementById('cfgDestinoPlantel');
            dest.innerHTML = optVacio + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>'; }).join('');
        });
        fetch(api + 'ofertas').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenOferta');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(o) { return '<option value="' + o.id + '">' + (o.nombre || '') + '</option>'; }).join('');
            var dest = document.getElementById('cfgDestinoOferta');
            dest.innerHTML = optVacio + (data || []).map(function(o) { return '<option value="' + o.id + '">' + (o.nombre || '') + '</option>'; }).join('');
        });
        fetch(api + 'ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenCicloSelect');
            var help = document.getElementById('cfgOrigenCicloHelp');
            if (sel) {
                sel.innerHTML = optVacio + (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
                if (data && data.length) help.textContent = 'Seleccione una opción.';
            }
            var dest = document.getElementById('cfgDestinoCiclo');
            dest.innerHTML = optVacio + (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
        });
        fetch(api + 'turnos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenTurno');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(t) { return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>'; }).join('');
            var dest = document.getElementById('cfgDestinoTurno');
            dest.innerHTML = optVacio + (data || []).map(function(t) { return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>'; }).join('');
        });
        var grados = [1,2,3,4,5,6,7,8,9];
        var selG = document.getElementById('cfgOrigenGrado');
        if (selG) selG.innerHTML = optVacio + grados.map(function(g) { return '<option value="' + g + '">' + g + '°</option>'; }).join('');
        fetch(api + 'planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenPlan');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || p.clave_plan || '') + '</option>'; }).join('');
            var dest = document.getElementById('cfgDestinoPlan');
            dest.innerHTML = optVacio + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || p.clave_plan || '') + '</option>'; }).join('');
        });
        fetch(api + 'grupos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenGrupo');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(g) { return '<option value="' + g.id + '">' + (g.clave || '') + '</option>'; }).join('');
        });
        fetch(api + 'estatus-cobranza').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('cfgOrigenEstatusCobranza');
            if (sel) sel.innerHTML = '<option value="todos" selected>Todos</option>' + (data || []).map(function(e) { return '<option value="' + (e.id || e.nombre) + '">' + (e.nombre || e.id) + '</option>'; }).join('');
        });
    }

    function cargarSelectsSiguienteGrado() {
        var api = baseUrl + '/api/inscripciones-admin-masivas/';
        var optVacio = '<option value="">-- Seleccione --</option>';
        fetch(api + 'planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('sgOrigenPlantel');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>'; }).join('');
        });
        fetch(api + 'ofertas').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('sgOrigenOferta');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(o) { return '<option value="' + o.id + '">' + (o.nombre || '') + '</option>'; }).join('');
        });
        var grados = [1,2,3,4,5,6,7,8,9];
        var selG = document.getElementById('sgOrigenGrado');
        if (selG) selG.innerHTML = optVacio + grados.map(function(g) { return '<option value="' + g + '">' + g + '°</option>'; }).join('');
        var estatus = ['Activo','Baja','Egresado'];
        var selE = document.getElementById('sgOrigenEstatus');
        if (selE) selE.innerHTML = optVacio + estatus.map(function(e) { return '<option value="' + e + '">' + e + '</option>'; }).join('');
        fetch(api + 'turnos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('sgOrigenTurno');
            if (sel) sel.innerHTML = optVacio + (data || []).map(function(t) { return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>'; }).join('');
        });
        fetch(api + 'estatus-cobranza').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('sgEstatusCobranza');
            if (sel) sel.innerHTML = '<option value="todos" selected>Todos</option>' + (data || []).map(function(e) { return '<option value="' + (e.id || e.nombre) + '">' + (e.nombre || e.id) + '</option>'; }).join('');
        });
    }

    function buildParamsConfigurable() {
        var params = new URLSearchParams();
        getSelectedIds('cfgOrigenPlantel').forEach(function(v) { params.append('plantel_id[]', v); });
        getSelectedIds('cfgOrigenOferta').forEach(function(v) { params.append('oferta_educativa_id[]', v); });
        var ciclo = document.getElementById('cfgOrigenCicloSelect').value;
        if (ciclo) params.append('ciclo_id[]', ciclo);
        getSelectedIds('cfgOrigenTurno').forEach(function(v) { params.append('turno_id[]', v); });
        getSelectedIds('cfgOrigenGrado').forEach(function(v) { params.append('grado[]', v); });
        getSelectedIds('cfgOrigenPlan').forEach(function(v) { params.append('plan_estudio_id[]', v); });
        getSelectedIds('cfgOrigenGrupo').forEach(function(v) { params.append('grupo_id[]', v); });
        var estCob = document.getElementById('cfgOrigenEstatusCobranza');
        if (estCob && estCob.value) params.set('estatus_cobranza', estCob.value);
        var d = document.getElementById('cfgDestinoPlantel');
        if (d && d.value) params.set('destino_plantel_id', d.value);
        d = document.getElementById('cfgDestinoOferta');
        if (d && d.value) params.set('destino_oferta_id', d.value);
        d = document.getElementById('cfgDestinoCiclo');
        if (d && d.value) params.set('destino_ciclo_id', d.value);
        d = document.getElementById('cfgDestinoTurno');
        if (d && d.value) params.set('destino_turno_id', d.value);
        d = document.getElementById('cfgDestinoGrados');
        if (d && d.value) params.set('destino_grado', d.value);
        d = document.getElementById('cfgDestinoEstatus');
        if (d && d.value) params.set('destino_estatus', d.value);
        d = document.getElementById('cfgDestinoPlan');
        if (d && d.value) params.set('destino_plan_id', d.value);
        return params;
    }

    function buildParamsSiguienteGrado() {
        var params = new URLSearchParams();
        getSelectedIds('sgOrigenPlantel').forEach(function(v) { params.append('plantel_id[]', v); });
        getSelectedIds('sgOrigenOferta').forEach(function(v) { params.append('oferta_educativa_id[]', v); });
        getSelectedIds('sgOrigenGrado').forEach(function(v) { params.append('grado[]', v); });
        getSelectedIds('sgOrigenEstatus').forEach(function(v) { params.append('estatus[]', v); });
        getSelectedIds('sgOrigenTurno').forEach(function(v) { params.append('turno_id[]', v); });
        var pt = document.getElementById('sgPeriodosTerminaron').value;
        if (pt) params.set('periodos_terminaron', pt);
        var estCob = document.getElementById('sgEstatusCobranza');
        if (estCob && estCob.value) params.set('estatus_cobranza', estCob.value);
        return params;
    }

    function validarOrigenConfigurable() {
        var plantel = document.getElementById('cfgOrigenPlantel').value;
        var oferta = document.getElementById('cfgOrigenOferta').value;
        var ciclo = document.getElementById('cfgOrigenCicloSelect').value;
        var turno = document.getElementById('cfgOrigenTurno').value;
        var grado = document.getElementById('cfgOrigenGrado').value;
        if (!plantel) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plantel de origen.' }); return false; }
        if (!oferta) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione una Oferta educativa de origen.' }); return false; }
        if (!ciclo) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Ciclo/Periodo de origen.' }); return false; }
        if (!turno) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Turno de origen.' }); return false; }
        if (!grado) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Grado de origen.' }); return false; }
        return true;
    }

    function validarOrigenSiguienteGrado() {
        var plantel = document.getElementById('sgOrigenPlantel').value;
        var oferta = document.getElementById('sgOrigenOferta').value;
        var grado = document.getElementById('sgOrigenGrado').value;
        var estatus = document.getElementById('sgOrigenEstatus').value;
        var turno = document.getElementById('sgOrigenTurno').value;
        if (!plantel) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plantel de origen.' }); return false; }
        if (!oferta) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione una Oferta educativa de origen.' }); return false; }
        if (!grado) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Grado de origen.' }); return false; }
        if (!estatus) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Estatus de origen.' }); return false; }
        if (!turno) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Turno de origen.' }); return false; }
        return true;
    }

    var inscripcionesActuales = [];
    var tabActual = 'configurable';

    function renderResultados(inscripciones, desdeTab) {
        inscripcionesActuales = inscripciones || [];
        tabActual = desdeTab || 'configurable';
        var tbody = document.getElementById('tablaResultadosBody');
        var resumen = document.getElementById('resumenResultados');
        tbody.innerHTML = '';
        document.getElementById('accionesDestinoConfigurable').classList.add('d-none');
        document.getElementById('accionesSiguienteGrado').classList.add('d-none');
        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 los que desee y use el botón de acción.';
        if (tabActual === 'configurable') {
            document.getElementById('accionesDestinoConfigurable').classList.remove('d-none');
        } else {
            document.getElementById('accionesSiguienteGrado').classList.remove('d-none');
            var selCiclo = document.getElementById('sgDestinoCiclo');
            if (selCiclo.options.length <= 1) {
                fetch(baseUrl + '/api/inscripciones-admin-masivas/ciclos').then(function(r) { return r.json(); }).then(function(data) {
                    selCiclo.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                        return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
                    }).join('');
                });
            }
        }
        inscripciones.forEach(function(i) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td><input type="checkbox" class="form-check-input check-inscripcion" value="' + (i.id || '') + '"></td><td>' + (i.matricula || '—') + '</td><td>' + (i.nombre_completo || '—') + '</td><td>' + (i.plantel || '—') + '</td><td>' + (i.oferta_educativa || '—') + '</td><td>' + (i.grado || '—') + '</td><td>' + (i.grupo_clave || '—') + '</td><td><span class="badge bg-' + (i.estatus === 'Activo' ? 'success' : (i.estatus === 'Baja' ? 'danger' : 'secondary')) + '">' + (i.estatus || '—') + '</span></td>';
            tbody.appendChild(tr);
        });
    }
    document.getElementById('checkTodosResultados').addEventListener('change', function() {
        document.querySelectorAll('#tablaResultadosBody .check-inscripcion').forEach(function(cb) { cb.checked = this.checked; }.bind(this));
    });

    document.getElementById('btnBuscarConfigurable').addEventListener('click', function() {
        if (!validarOrigenConfigurable()) return;
        var params = buildParamsConfigurable();
        var url = baseUrl + '/api/inscripciones-admin-masivas/buscar-configurable?' + params;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function(r) {
                if (!r.ok) throw new Error('Error en el servidor (' + r.status + '). Intente de nuevo.');
                return r.json();
            })
            .then(function(data) {
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados(data.inscripciones || [], 'configurable');
            })
            .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.' });
            });
    });

    document.getElementById('btnBuscarSiguienteGrado').addEventListener('click', function() {
        if (!validarOrigenSiguienteGrado()) return;
        var params = buildParamsSiguienteGrado();
        var url = baseUrl + '/api/inscripciones-admin-masivas/buscar-siguiente-grado?' + params;
        fetch(url, { headers: { 'Accept': 'application/json' } })
            .then(function(r) {
                if (!r.ok) throw new Error('Error en el servidor (' + r.status + '). Intente de nuevo.');
                return r.json();
            })
            .then(function(data) {
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados(data.inscripciones || [], 'siguiente_grado');
            })
            .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.' });
            });
    });

    function getInscripcionIdsSeleccionados() {
        return Array.from(document.querySelectorAll('#tablaResultadosBody .check-inscripcion:checked')).map(function(cb) { return cb.value; }).filter(Boolean);
    }
    document.getElementById('btnAplicarDestino').addEventListener('click', function() {
        var ids = getInscripcionIdsSeleccionados();
        if (!ids.length) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione al menos un estudiante.' }); return; }
        var destinoPlantel = document.getElementById('cfgDestinoPlantel').value;
        var destinoCiclo = document.getElementById('cfgDestinoCiclo').value;
        var destinoPlan = document.getElementById('cfgDestinoPlan').value;
        var destinoTurno = document.getElementById('cfgDestinoTurno').value;
        var destinoGrado = document.getElementById('cfgDestinoGrados').value;
        var destinoEstatus = document.getElementById('cfgDestinoEstatus').value;
        if (!destinoPlantel || !destinoCiclo || !destinoPlan || !destinoTurno || !destinoGrado || !destinoEstatus) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Complete todos los datos de destino (plantel, ciclo, plan, turno, grado y estatus).' });
            return;
        }
        var btn = this;
        btn.disabled = true;
        fetch(baseUrl + '/api/inscripciones-admin-masivas/aplicar-destino', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ inscripcion_ids: ids, destino_plantel_id: destinoPlantel, destino_ciclo_id: destinoCiclo, destino_plan_id: destinoPlan, destino_turno_id: destinoTurno, destino_grado: destinoGrado, destino_estatus: destinoEstatus })
        }).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('btnBuscarConfigurable').click(); }
            else { Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudo aplicar.' }); }
        }).catch(function() { btn.disabled = false; Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' }); });
    });
    document.getElementById('btnPromoverSiguienteGrado').addEventListener('click', function() {
        var ids = getInscripcionIdsSeleccionados();
        if (!ids.length) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione al menos un estudiante.' }); return; }
        var cicloDestino = document.getElementById('sgDestinoCiclo').value;
        if (!cicloDestino) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione el Ciclo/Periodo destino.' }); return; }
        var btn = this;
        btn.disabled = true;
        fetch(baseUrl + '/api/inscripciones-admin-masivas/promover-siguiente-grado', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ inscripcion_ids: ids, destino_ciclo_id: cicloDestino })
        }).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('btnBuscarSiguienteGrado').click(); }
            else { Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudo promover.' }); }
        }).catch(function() { btn.disabled = false; Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' }); });
    });

    document.getElementById('linkTabConfigurable').addEventListener('click', function() {
        document.getElementById('textoInstruccionConfigurable').classList.remove('d-none');
        document.getElementById('textoInstruccionSiguienteGrado').classList.add('d-none');
    });
    document.getElementById('linkTabSiguienteGrado').addEventListener('click', function() {
        document.getElementById('textoInstruccionConfigurable').classList.add('d-none');
        document.getElementById('textoInstruccionSiguienteGrado').classList.remove('d-none');
    });

    cargarSelectsConfigurable();
    cargarSelectsSiguienteGrado();
    </script>
@endsection