@extends('layouts.master')

@section('title')
    Configuración rápida de grupos
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Horarios @endslot
        @slot('title') Configuración de grupos @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-flashlight-line me-2"></i>Configuración de grupos
                    </h5>
                    <p class="text-muted mb-4">
                        Esta herramienta te ayudará a configurar de manera rápida los grupos para el plantel, plan de estudios y periodo seleccionados.
                    </p>

                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label for="filtroPlantel" class="form-label">Plantel</label>
                                <select class="form-select" id="filtroPlantel">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPlanEstudio" class="form-label">Plan de estudios</label>
                                <select class="form-select" id="filtroPlanEstudio">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPeriodo" class="form-label">Periodo</label>
                                <select class="form-select" id="filtroPeriodo">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary w-100" id="btnBuscar">
                                    <i class="ri-search-line me-1"></i>Buscar
                                </button>
                            </div>
                        </div>
                    </form>

                    <div id="panelInicial" class="text-center py-5 mt-4">
                        <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">Selecciona un plantel, plan de estudios y periodo para empezar a configurar grupos.</p>
                    </div>

                    <div id="panelConfiguracion" class="d-none mt-4">
                        <hr>
                        <h6 class="mb-3">Grupos por grado</h6>
                        <p class="text-muted small mb-3">Indica cuántos grupos deseas crear por cada grado (ej. 2 para 1A y 1B).</p>
                        <div class="row mb-3">
                            <div class="col-md-4">
                                <label for="configTurno" class="form-label">Turno</label>
                                <select class="form-select" id="configTurno">
                                    <option value="">-- Seleccione --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="configCupo" class="form-label">Cupo por grupo</label>
                                <input type="number" class="form-control" id="configCupo" min="1" max="999" value="30">
                            </div>
                        </div>
                        <div id="listaGradosConfig" class="mb-4"></div>
                        <button type="button" class="btn btn-success" id="btnGuardarConfiguracion">
                            <i class="ri-save-line me-1"></i>Guardar configuración
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
    var baseUrl = '{{ url("") }}';
    var datosFiltro = { escuela_id: null, plan_estudio_id: null, ciclo_id: null, grados: [], duracion_grados: 0 };

    function cargarSelects() {
        fetch(baseUrl + '/api/configuracion-grupos/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantel');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(p) {
                return '<option value="' + p.id + '">' + (p.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/configuracion-grupos/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlanEstudio');
            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/configuracion-grupos/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPeriodo');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/configuracion-grupos/turnos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('configTurno');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(t) {
                return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>';
            }).join('');
        });
    }

    document.getElementById('filtrosForm').addEventListener('submit', function(e) {
        e.preventDefault();
        var escuelaId = document.getElementById('filtroPlantel').value;
        var planId = document.getElementById('filtroPlanEstudio').value;
        var cicloId = document.getElementById('filtroPeriodo').value;
        if (!escuelaId || !planId || !cicloId) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona plantel, plan de estudios y periodo.' });
            return;
        }
        fetch(baseUrl + '/api/configuracion-grupos/buscar?' + new URLSearchParams({
            escuela_id: escuelaId || '',
            plan_estudio_id: planId,
            ciclo_id: cicloId
        }), { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosFiltro.escuela_id = escuelaId || null;
                datosFiltro.plan_estudio_id = planId;
                datosFiltro.ciclo_id = cicloId;
                datosFiltro.grados = data.grados || [];
                var plan = (data.grados || []).length;
                datosFiltro.duracion_grados = plan;
                document.getElementById('panelInicial').classList.add('d-none');
                document.getElementById('panelConfiguracion').classList.remove('d-none');
                var cont = document.getElementById('listaGradosConfig');
                cont.innerHTML = '';
                (data.grados || []).forEach(function(g) {
                    var div = document.createElement('div');
                    div.className = 'row align-items-center mb-2';
                            div.innerHTML = '<div class="col-auto"><label class="form-label mb-0">' + (g.nombre || g.grado + '°') + '</label></div>' +
                                '<div class="col-md-2"><input type="number" class="form-control form-control-sm cantidad-grupos" data-grado="' + g.grado + '" min="1" max="20" value="1" placeholder="Cantidad"></div>' +
                                '<div class="col"><span class="text-muted small">grupos (ej. 2 = 1A, 1B)</span></div>';
                            cont.appendChild(div);
                });
            })
            .catch(function() {
                document.getElementById('panelInicial').classList.remove('d-none');
                document.getElementById('panelConfiguracion').classList.add('d-none');
            });
    });

    document.getElementById('btnGuardarConfiguracion').addEventListener('click', function() {
        var turnoId = document.getElementById('configTurno').value;
        if (!turnoId) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona un turno.' });
            return;
        }
        if (!datosFiltro.escuela_id || !datosFiltro.plan_estudio_id || !datosFiltro.ciclo_id) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona plantel, plan de estudios y periodo y presiona Buscar.' });
            return;
        }
        if (!datosFiltro.grados || datosFiltro.grados.length === 0) {
            Swal.fire({ icon: 'warning', title: 'Aviso', text: 'No hay grados para configurar. Verifica el plan de estudios.' });
            return;
        }
        var gruposPorGrado = [];
        document.querySelectorAll('.cantidad-grupos').forEach(function(inp) {
            var grado = parseInt(inp.dataset.grado, 10);
            var cantidad = parseInt(inp.value, 10) || 1;
            gruposPorGrado.push({ grado: grado, cantidad: Math.min(20, Math.max(1, cantidad)) });
        });
        var cupo = parseInt(document.getElementById('configCupo').value, 10) || 30;
        var payload = {
            escuela_id: parseInt(datosFiltro.escuela_id, 10),
            plan_estudio_id: parseInt(datosFiltro.plan_estudio_id, 10),
            ciclo_id: parseInt(datosFiltro.ciclo_id, 10),
            turno_id: parseInt(turnoId, 10),
            grupos_por_grado: gruposPorGrado,
            cupo_default: cupo
        };
        fetch(baseUrl + '/api/configuracion-grupos/configuracion-rapida', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (!r.ok) return r.json().then(function(e) { throw new Error(e.message || 'Error'); });
            return r.json();
        }).then(function(data) {
            Swal.fire({ icon: 'success', title: 'Éxito', text: 'Se crearon ' + (data.creados || 0) + ' grupo(s) correctamente.' });
            document.getElementById('panelInicial').classList.remove('d-none');
            document.getElementById('panelConfiguracion').classList.add('d-none');
        }).catch(function(err) {
            Swal.fire({ icon: 'error', title: 'Error', text: err.message || 'Error al guardar la configuración.' });
        });
    });

    cargarSelects();
    </script>
@endsection