@extends('layouts.master')

@section('title')
    Inscripciones masivas a optativas
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Inscripciones @endslot
        @slot('title') Inscripciones masivas a optativas @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">Inscripciones masivas a optativas</h4>
                            <p class="text-muted mb-0 small">Seleccione plantel, plan de estudios y periodo; luego presione Buscar. Use las pestañas Grados o Grupos para elegir un grupo y, en el detalle, inscriba a todos los alumnos del grupo en una asignatura optativa.</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-3">
                            <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-4">
                            <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-3">
                            <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 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>

            {{-- Contenido: pestañas Grados / Grupos + panel detalle --}}
            <div class="card border-0 shadow-sm">
                <div class="card-body p-0">
                    <div class="row g-0">
                        <div class="col-md-4 border-end">
                            <ul class="nav nav-tabs nav-tabs-custom nav-primary nav-justified px-3 pt-3" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active py-2" data-bs-toggle="tab" href="#tabGrados" role="tab" id="linkTabGrados">
                                        <i class="ri-number-1 me-1 align-middle"></i>Grados
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link py-2" data-bs-toggle="tab" href="#tabGrupos" role="tab" id="linkTabGrupos">
                                        <i class="ri-group-line me-1 align-middle"></i>Grupos
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content p-3 border-top-0">
                                <div class="tab-pane fade show active" id="tabGrados" role="tabpanel">
                                    <div id="listaGradosVacia" class="text-muted small text-center py-4">
                                        Seleccione Plantel, Plan y Periodo y presione Buscar.
                                    </div>
                                    <ul id="listaGrados" class="list-group list-group-flush d-none"></ul>
                                </div>
                                <div class="tab-pane fade" id="tabGrupos" role="tabpanel">
                                    <div id="listaGruposVacia" class="text-muted small text-center py-4">
                                        Seleccione Plantel, Plan y Periodo y presione Buscar.
                                    </div>
                                    <ul id="listaGrupos" class="list-group list-group-flush d-none"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">
                            <div id="panelDetalleVacio" class="text-center py-5 px-4 text-muted">
                                <div class="avatar-lg mx-auto mb-3 bg-light text-muted rounded-circle d-flex align-items-center justify-content-center">
                                    <i class="ri-information-line fs-1"></i>
                                </div>
                                <h6 class="mb-1">Sin detalle</h6>
                                <p class="small mb-0">Selecciona un grupo para mostrar la información</p>
                            </div>
                            <div id="panelDetalleContenido" class="p-4 d-none">
                                <div id="detalleGrupoHeader" class="border rounded-3 p-3 bg-light bg-opacity-50 mb-3"></div>
                                <div class="table-responsive rounded border mb-3">
                                    <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">Estatus</th>
                                            </tr>
                                        </thead>
                                        <tbody id="detalleGrupoBody"></tbody>
                                    </table>
                                </div>
                                <p class="text-muted small mt-2 mb-3" id="detalleGrupoResumen"></p>
                                {{-- Inscribir a optativa --}}
                                <div class="card border shadow-sm">
                                    <div class="card-header bg-light py-2">
                                        <h6 class="mb-0 fw-semibold text-primary"><i class="ri-book-mark-line me-2"></i>Inscribir a optativa</h6>
                                    </div>
                                    <div class="card-body py-3">
                                        <p class="small text-muted mb-2">Inscriba a todos los alumnos activos del grupo en una asignatura optativa del plan.</p>
                                        <div class="row align-items-end g-2">
                                            <div class="col-md-8">
                                                <label class="form-label small mb-1">Asignatura optativa</label>
                                                <select class="form-select form-select-sm" id="selectOptativa">
                                                    <option value="">-- Seleccione optativa --</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-primary btn-sm w-100" id="btnInscribirOptativa">
                                                    <i class="ri-user-add-line me-1"></i>Inscribir a todos
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="panelGruposPorGrado" class="p-4 d-none">
                                <h6 class="text-primary fw-semibold mb-3 d-flex align-items-center" id="tituloGruposPorGrado">
                                    <i class="ri-group-line me-2"></i>Grupos del grado
                                </h6>
                                <ul id="listaGruposPorGrado" class="list-group list-group-flush"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    (function() {
        var baseUrl = '{{ url("") }}';
        var api = baseUrl + '/api/inscripciones-optativas-masivas/';
        var datosBusqueda = { grados: [], grupos: [] };
        var filtrosActuales = { plantel_id: '', plan_estudio_id: '', ciclo_id: '' };
        var grupoActualId = null;

        function cargarFiltros() {
            fetch(api + 'planteles').then(function(r) { return r.json(); }).then(function(data) {
                var sel = document.getElementById('filtroPlantel');
                if (sel) sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                    return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
                }).join('');
            });
            fetch(api + 'planes').then(function(r) { return r.json(); }).then(function(data) {
                var sel = document.getElementById('filtroPlanEstudios');
                if (sel) sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                    var label = (p.nombre || p.clave_plan || '') + (p.clave_plan && p.nombre ? ' (' + p.clave_plan + ')' : '');
                    return '<option value="' + p.id + '">' + label + '</option>';
                }).join('');
            });
            fetch(api + 'periodos').then(function(r) { return r.json(); }).then(function(data) {
                var sel = document.getElementById('filtroPeriodo');
                if (sel) sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                    return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
                }).join('');
            });
        }

        function validarFiltros() {
            var plantel = document.getElementById('filtroPlantel').value;
            var plan = document.getElementById('filtroPlanEstudios').value;
            var periodo = document.getElementById('filtroPeriodo').value;
            if (!plantel) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plantel.' }); return false; }
            if (!plan) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Plan de estudios.' }); return false; }
            if (!periodo) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un Periodo.' }); return false; }
            filtrosActuales = { plantel_id: plantel, plan_estudio_id: plan, ciclo_id: periodo };
            return true;
        }

        function mostrarPanelVacio() {
            document.getElementById('panelDetalleVacio').classList.remove('d-none');
            document.getElementById('panelDetalleContenido').classList.add('d-none');
            document.getElementById('panelGruposPorGrado').classList.add('d-none');
            grupoActualId = null;
        }

        function renderListaGrados() {
            var lista = document.getElementById('listaGrados');
            var vacia = document.getElementById('listaGradosVacia');
            if (!datosBusqueda.grados || datosBusqueda.grados.length === 0) {
                lista.classList.add('d-none');
                vacia.classList.remove('d-none');
                vacia.textContent = 'No hay grados para los filtros seleccionados.';
                return;
            }
            vacia.classList.add('d-none');
            lista.classList.remove('d-none');
            lista.innerHTML = datosBusqueda.grados.map(function(g) {
                return '<li class="list-group-item list-group-item-action cursor-pointer" data-grado="' + g + '" role="button">' + g + '°</li>';
            }).join('');
            lista.querySelectorAll('[data-grado]').forEach(function(el) {
                el.addEventListener('click', function() {
                    var grado = this.getAttribute('data-grado');
                    cargarGruposPorGrado(grado);
                });
            });
        }

        function renderListaGrupos() {
            var lista = document.getElementById('listaGrupos');
            var vacia = document.getElementById('listaGruposVacia');
            if (!datosBusqueda.grupos || datosBusqueda.grupos.length === 0) {
                lista.classList.add('d-none');
                vacia.classList.remove('d-none');
                vacia.textContent = 'No hay grupos para los filtros seleccionados.';
                return;
            }
            vacia.classList.add('d-none');
            lista.classList.remove('d-none');
            lista.innerHTML = datosBusqueda.grupos.map(function(g) {
                return '<li class="list-group-item list-group-item-action cursor-pointer" data-grupo-id="' + g.id + '" role="button">' + (g.clave || g.id) + ' (Grado ' + (g.grado || '—') + ')</li>';
            }).join('');
            lista.querySelectorAll('[data-grupo-id]').forEach(function(el) {
                el.addEventListener('click', function() {
                    var id = this.getAttribute('data-grupo-id');
                    cargarDetalleGrupo(id);
                });
            });
        }

        function cargarGruposPorGrado(grado) {
            document.getElementById('panelDetalleVacio').classList.add('d-none');
            document.getElementById('panelDetalleContenido').classList.add('d-none');
            var panel = document.getElementById('panelGruposPorGrado');
            panel.classList.remove('d-none');
            document.getElementById('tituloGruposPorGrado').innerHTML = '<i class="ri-group-line me-2"></i>Grupos del grado ' + grado + '°';
            var ul = document.getElementById('listaGruposPorGrado');
            ul.innerHTML = '<li class="list-group-item text-muted">Cargando…</li>';
            var params = new URLSearchParams({
                plantel_id: filtrosActuales.plantel_id,
                plan_estudio_id: filtrosActuales.plan_estudio_id,
                ciclo_id: filtrosActuales.ciclo_id,
                grado: grado
            });
            fetch(api + 'grupos-por-grado?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var grupos = data.grupos || [];
                    if (grupos.length === 0) {
                        ul.innerHTML = '<li class="list-group-item text-muted">No hay grupos en este grado.</li>';
                        return;
                    }
                    ul.innerHTML = grupos.map(function(g) {
                        return '<li class="list-group-item list-group-item-action cursor-pointer" data-grupo-id="' + g.id + '" role="button">' + (g.clave || '') + '</li>';
                    }).join('');
                    ul.querySelectorAll('[data-grupo-id]').forEach(function(el) {
                        el.addEventListener('click', function() {
                            cargarDetalleGrupo(this.getAttribute('data-grupo-id'));
                        });
                    });
                })
                .catch(function() {
                    ul.innerHTML = '<li class="list-group-item text-danger">Error al cargar.</li>';
                });
        }

        function cargarOptativas() {
            var sel = document.getElementById('selectOptativa');
            if (!filtrosActuales.plan_estudio_id) {
                sel.innerHTML = '<option value="">-- Seleccione optativa --</option>';
                return;
            }
            sel.innerHTML = '<option value="">-- Cargando… --</option>';
            fetch(api + 'optativas-por-plan?plan_estudio_id=' + encodeURIComponent(filtrosActuales.plan_estudio_id), { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var opts = (data || []).map(function(o) {
                        return '<option value="' + o.id + '">' + (o.nombre || o.clave || o.id) + '</option>';
                    });
                    sel.innerHTML = '<option value="">-- Seleccione optativa --</option>' + opts.join('');
                })
                .catch(function() {
                    sel.innerHTML = '<option value="">-- Error al cargar --</option>';
                });
        }

        function cargarDetalleGrupo(grupoId) {
            grupoActualId = grupoId;
            document.getElementById('panelDetalleVacio').classList.add('d-none');
            document.getElementById('panelGruposPorGrado').classList.add('d-none');
            var panel = document.getElementById('panelDetalleContenido');
            panel.classList.remove('d-none');
            document.getElementById('detalleGrupoBody').innerHTML = '<tr><td colspan="3" class="text-muted">Cargando…</td></tr>';
            document.getElementById('detalleGrupoHeader').innerHTML = '';
            document.getElementById('detalleGrupoResumen').textContent = '';
            cargarOptativas();
            fetch(api + 'detalle-grupo/' + grupoId, { headers: { 'Accept': 'application/json' } })
                .then(function(r) {
                    if (!r.ok) throw new Error('No encontrado');
                    return r.json();
                })
                .then(function(data) {
                    var g = data.grupo || {};
                    document.getElementById('detalleGrupoHeader').innerHTML =
                        '<h6 class="text-primary mb-1 fw-semibold">' + (g.clave || '—') + '</h6>' +
                        '<p class="small text-muted mb-0">Plantel: ' + (g.plantel || '—') + ' | Plan: ' + (g.plan || '—') + ' | Periodo: ' + (g.periodo || '—') + ' | Grado: ' + (g.grado || '—') + '</p>';
                    var insc = data.inscripciones || [];
                    var tbody = document.getElementById('detalleGrupoBody');
                    if (insc.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="3" class="text-muted">Sin alumnos inscritos.</td></tr>';
                    } else {
                        tbody.innerHTML = insc.map(function(i) {
                            var badge = i.estatus === 'Activo' ? 'success' : (i.estatus === 'Baja' ? 'danger' : 'secondary');
                            return '<tr><td>' + (i.matricula || '—') + '</td><td>' + (i.nombre_completo || '—') + '</td><td><span class="badge bg-' + badge + '">' + (i.estatus || '—') + '</span></td></tr>';
                        }).join('');
                    }
                    document.getElementById('detalleGrupoResumen').textContent = 'Total: ' + (data.total || 0) + ' alumno(s).';
                })
                .catch(function() {
                    document.getElementById('detalleGrupoBody').innerHTML = '<tr><td colspan="3" class="text-danger">Error al cargar el grupo.</td></tr>';
                });
        }

        document.getElementById('btnBuscar').addEventListener('click', function() {
            if (!validarFiltros()) return;
            var params = new URLSearchParams({
                plantel_id: filtrosActuales.plantel_id,
                plan_estudio_id: filtrosActuales.plan_estudio_id,
                ciclo_id: filtrosActuales.ciclo_id
            });
            fetch(api + 'buscar?' + params, { headers: { 'Accept': 'application/json' } })
                .then(function(r) {
                    return r.json().then(function(data) {
                        if (!r.ok) {
                            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 data;
                    });
                })
                .then(function(data) {
                    datosBusqueda = { grados: data.grados || [], grupos: data.grupos || [] };
                    renderListaGrados();
                    renderListaGrupos();
                    mostrarPanelVacio();
                })
                .catch(function(err) {
                    datosBusqueda = { grados: [], grupos: [] };
                    renderListaGrados();
                    renderListaGrupos();
                    mostrarPanelVacio();
                    Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'No se pudieron cargar los datos. Verifique los filtros e intente de nuevo.' });
                });
        });

        document.getElementById('btnInscribirOptativa').addEventListener('click', function() {
            if (!grupoActualId) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione un grupo primero.' });
                return;
            }
            var materiaId = document.getElementById('selectOptativa').value;
            if (!materiaId) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Seleccione una asignatura optativa.' });
                return;
            }
            if (!filtrosActuales.ciclo_id) {
                Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Falta el periodo. Realice una búsqueda con filtros válidos.' });
                return;
            }
            var btn = this;
            btn.disabled = true;
            var payload = {
                grupo_id: grupoActualId,
                materia_id: materiaId,
                ciclo_id: filtrosActuales.ciclo_id
            };
            fetch(api + 'inscribir', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify(payload)
            })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    btn.disabled = false;
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Listo',
                            text: data.message || 'Inscripción masiva realizada correctamente.'
                        });
                        document.getElementById('selectOptativa').value = '';
                    } else {
                        Swal.fire({ icon: 'error', title: 'Error', text: data.message || 'No se pudo completar la inscripción.' });
                    }
                })
                .catch(function(err) {
                    btn.disabled = false;
                    Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo conectar con el servidor. Intente de nuevo.' });
                });
        });

        cargarFiltros();
        mostrarPanelVacio();
    })();
    </script>
@endsection