@extends('layouts.master')

@section('title')
    Inscripciones Individuales
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Inscripciones @endslot
        @slot('title') Inscripciones Individuales @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-user-add-line me-2"></i>Inscripciones Individuales
                    </h5>
                    <p class="text-muted mb-4">
                        Completa de manera opcional el siguiente filtro y al finalizar haz clic en el botón BUSCAR para mostrar los expedientes de los alumnos registrados en el sistema.
                    </p>

                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-4">
                                <label for="filtroNombreMatriculaFolio" class="form-label">Nombre, matrícula o folio</label>
                                <input type="text" class="form-control" id="filtroNombreMatriculaFolio" placeholder="Buscar por nombre, matrícula o folio">
                            </div>
                            <div class="col-md-4">
                                <label for="filtroPlantel" class="form-label">Plantel</label>
                                <select class="form-select" id="filtroPlantel">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroOferta" class="form-label">Oferta educativa</label>
                                <select class="form-select" id="filtroOferta">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                        </div>
                        <div class="row g-3 align-items-end mt-2">
                            <div class="col-md-3">
                                <label for="filtroEstatus" class="form-label">Estatus</label>
                                <select class="form-select" id="filtroEstatus">
                                    <option value="">-- Todos --</option>
                                    <option value="Activo">Activo</option>
                                    <option value="Baja">Baja</option>
                                    <option value="Egresado">Egresado</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroGrado" class="form-label">Grado</label>
                                <select class="form-select" id="filtroGrado">
                                    <option value="">-- Todos --</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>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroGrupo" class="form-label">Grupo</label>
                                <select class="form-select" id="filtroGrupo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-3 text-md-end">
                                <button type="submit" class="btn btn-primary" id="btnBuscar">
                                    <i class="ri-search-line me-1"></i>Buscar
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
                        <label for="seccionConsultar" class="form-label mb-0">Sección a consultar:</label>
                        <select class="form-select form-select-sm" id="seccionConsultar" style="max-width: 280px;">
                            <option value="administrativas" selected>Inscripciones Administrativas</option>
                            <option value="academicas">Inscripciones Académicas</option>
                        </select>
                    </div>

                    <div id="estadoInicial" class="text-center py-5">
                        <div class="avatar-lg mx-auto mb-3">
                            <div class="avatar-title bg-light text-muted rounded-circle">
                                <i class="ri-information-line fs-1"></i>
                            </div>
                        </div>
                        <p class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                    </div>

                    <div id="panelResultados" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Matrícula</th>
                                        <th>Nombre</th>
                                        <th>Plantel</th>
                                        <th>Oferta educativa</th>
                                        <th>Grado</th>
                                        <th>Grupo</th>
                                        <th>Estatus</th>
                                        <th>Fecha inscripción</th>
                                        <th width="120">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaResultadosBody"></tbody>
                            </table>
                        </div>
                        <div class="mt-2 text-muted small" id="resumenResultados"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal Inscribir en grupo --}}
    <div class="modal fade" id="modalInscribirIndividual" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Inscribir alumno en grupo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3" id="modalInscribirAlumnoNombre">—</p>
                    <input type="hidden" id="modalInscribirAlumnoId" value="">
                    <div class="mb-3">
                        <label class="form-label">Plantel <span class="text-danger">*</span></label>
                        <select class="form-select" id="modalInscribirPlantel">
                            <option value="">-- Seleccione --</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Plan de estudios <span class="text-danger">*</span></label>
                        <select class="form-select" id="modalInscribirPlan">
                            <option value="">-- Seleccione --</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Periodo / Ciclo <span class="text-danger">*</span></label>
                        <select class="form-select" id="modalInscribirCiclo">
                            <option value="">-- Seleccione --</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Grupo <span class="text-danger">*</span></label>
                        <select class="form-select" id="modalInscribirGrupo">
                            <option value="">-- Seleccione plantel, plan y periodo --</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnModalInscribirGuardar">
                        <i class="ri-user-add-line me-1"></i>Inscribir
                    </button>
                </div>
            </div>
        </div>
    </div>
@endsection

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

    function cargarSelects() {
        fetch(baseUrl + '/api/inscripciones-individuales/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantel');
            sel.innerHTML = '<option value="">-- Todos --</option>' + (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/inscripciones-individuales/ofertas').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroOferta');
            sel.innerHTML = '<option value="">-- Todos --</option>' + (data || []).map(function(o) {
                return '<option value="' + o.id + '">' + (o.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/inscripciones-individuales/grupos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroGrupo');
            sel.innerHTML = '<option value="">-- Todos --</option>' + (data || []).map(function(g) {
                return '<option value="' + g.id + '">' + (g.clave || '') + '</option>';
            }).join('');
        });
    }

    function buscar() {
        var params = new URLSearchParams();
        var nombre = document.getElementById('filtroNombreMatriculaFolio').value.trim();
        if (nombre) params.set('nombre_matricula_folio', nombre);
        var plantel = document.getElementById('filtroPlantel').value;
        if (plantel) params.set('plantel', plantel);
        var oferta = document.getElementById('filtroOferta').value;
        if (oferta) params.set('oferta_educativa', oferta);
        var estatus = document.getElementById('filtroEstatus').value;
        if (estatus) params.set('estatus', estatus);
        var grado = document.getElementById('filtroGrado').value;
        if (grado) params.set('grado', grado);
        var grupoId = document.getElementById('filtroGrupo').value;
        if (grupoId) params.set('grupo_id', grupoId);

        fetch(baseUrl + '/api/inscripciones-individuales/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                alumnosResultado = data.alumnos || [];
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados();
            })
            .catch(function() {
                alumnosResultado = [];
                document.getElementById('estadoInicial').classList.add('d-none');
                document.getElementById('panelResultados').classList.remove('d-none');
                renderResultados();
            });
    }

    function renderResultados() {
        var tbody = document.getElementById('tablaResultadosBody');
        var resumen = document.getElementById('resumenResultados');
        tbody.innerHTML = '';
        if (!alumnosResultado.length) {
            resumen.textContent = 'No se encontraron expedientes con los filtros seleccionados.';
            return;
        }
        resumen.textContent = 'Se encontraron ' + alumnosResultado.length + ' expediente(s).';
        alumnosResultado.forEach(function(a) {
            var tr = document.createElement('tr');
            tr.innerHTML = '<td>' + (a.matricula || '—') + '</td>' +
                '<td>' + (a.nombre_completo || '—') + '</td>' +
                '<td>' + (a.plantel || '—') + '</td>' +
                '<td>' + (a.oferta_educativa || '—') + '</td>' +
                '<td>' + (a.grado || '—') + '</td>' +
                '<td>' + (a.grupo_clave || '—') + '</td>' +
                '<td><span class="badge bg-' + (a.estatus === 'Activo' ? 'success' : (a.estatus === 'Baja' ? 'danger' : 'secondary')) + '">' + (a.estatus || '—') + '</span></td>' +
                '<td>' + (a.fecha_inscripcion || '—') + '</td>' +
                '<td><a href="' + baseUrl + '/alumnos/' + a.id + '" class="btn btn-sm btn-outline-primary me-1" title="Ver expediente"><i class="ri-eye-line"></i></a>' +
                '<button type="button" class="btn btn-sm btn-primary btnInscribirIndividual" data-id="' + a.id + '" data-nombre="' + (a.nombre_completo || '').replace(/"/g, '&quot;') + '" title="Inscribir en grupo"><i class="ri-user-add-line"></i></button></td>';
            tbody.appendChild(tr);
        });
        tbody.querySelectorAll('.btnInscribirIndividual').forEach(function(btn) {
            btn.addEventListener('click', function() {
                document.getElementById('modalInscribirAlumnoId').value = this.getAttribute('data-id');
                document.getElementById('modalInscribirAlumnoNombre').textContent = 'Alumno: ' + (this.getAttribute('data-nombre') || '—');
                document.getElementById('modalInscribirGrupo').innerHTML = '<option value="">-- Seleccione plantel, plan y periodo --</option>';
                new bootstrap.Modal(document.getElementById('modalInscribirIndividual')).show();
            });
        });
    }

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

    document.getElementById('seccionConsultar').addEventListener('change', function() {
        if (alumnosResultado.length) renderResultados();
    });

    function cargarModalInscribirSelects() {
        fetch(baseUrl + '/api/inscripciones-individuales/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('modalInscribirPlantel');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/inscripciones-individuales/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('modalInscribirPlan');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || p.clave_plan || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/inscripciones-individuales/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('modalInscribirCiclo');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
    }
    document.getElementById('modalInscribirIndividual').addEventListener('show.bs.modal', cargarModalInscribirSelects);

    function cargarGruposDestino() {
        var plantel = document.getElementById('modalInscribirPlantel').value;
        var plan = document.getElementById('modalInscribirPlan').value;
        var ciclo = document.getElementById('modalInscribirCiclo').value;
        var sel = document.getElementById('modalInscribirGrupo');
        if (!plantel || !plan || !ciclo) {
            sel.innerHTML = '<option value="">-- Seleccione plantel, plan y periodo --</option>';
            return;
        }
        sel.innerHTML = '<option value="">-- Cargando... --</option>';
        var params = new URLSearchParams({ plantel_id: plantel, plan_estudio_id: plan, ciclo_id: ciclo });
        fetch(baseUrl + '/api/inscripciones-individuales/grupos-destino?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                if (!data || data.length === 0) {
                    sel.innerHTML = '<option value="">No hay grupos en ese contexto</option>';
                } else {
                    sel.innerHTML = '<option value="">-- Seleccione grupo --</option>' + data.map(function(g) {
                        return '<option value="' + g.id + '">' + (g.label || g.clave || g.id) + '</option>';
                    }).join('');
                }
            })
            .catch(function() {
                sel.innerHTML = '<option value="">Error al cargar</option>';
            });
    }
    document.getElementById('modalInscribirPlantel').addEventListener('change', cargarGruposDestino);
    document.getElementById('modalInscribirPlan').addEventListener('change', cargarGruposDestino);
    document.getElementById('modalInscribirCiclo').addEventListener('change', cargarGruposDestino);

    document.getElementById('btnModalInscribirGuardar').addEventListener('click', function() {
        var alumnoId = document.getElementById('modalInscribirAlumnoId').value;
        var grupoId = document.getElementById('modalInscribirGrupo').value;
        if (!alumnoId) { if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un alumno.' }); return; }
        if (!grupoId) { if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un grupo de destino.' }); return; }
        var btn = this;
        btn.disabled = true;
        fetch(baseUrl + '/api/inscripciones-individuales/inscribir', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ alumno_id: alumnoId, grupo_id: grupoId })
        })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                btn.disabled = false;
                if (data.success) {
                    bootstrap.Modal.getInstance(document.getElementById('modalInscribirIndividual')).hide();
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Listo', text: data.message });
                    buscar();
                } else {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudo inscribir.' });
                }
            })
            .catch(function() {
                btn.disabled = false;
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión. Intente de nuevo.' });
            });
    });

    cargarSelects();
    </script>
@endsection