@extends('layouts.master')

@section('title')
    Configuración 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-team-line me-2"></i>Configuración de grupos
                    </h5>
                    <p class="text-muted mb-2">
                        Esta herramienta te ayudará a configurar los grupos de cada ciclo/periodo escolar. Para comenzar selecciona el plantel, plan de estudios y periodo/ciclo de los cuales deseas consultar o administrar sus grupos.
                    </p>
                    <p class="text-muted mb-4">
                        O bien puedes acceder a
                        <a href="#" id="linkReutilizar" class="text-primary">reutilizar la configuración de grupos</a>,
                        a la <a href="{{ url('horarios/configuracion-rapida') }}" class="text-primary">configuración rápida de grupos</a>
                        o a la <a href="{{ url('horarios/configuracion-grupos-por-profesor') }}" class="text-warning fw-medium">configuración de grupos por profesor</a>.
                    </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 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>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-lg-4 col-xl-3">
            <div class="card">
                <div class="card-body p-0">
                    <ul class="nav nav-tabs nav-tabs-custom card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tabGrados" role="tab">
                                <i class="ri-numbers-line me-1"></i>Grados
                                <span id="badgeGrados" class="badge bg-warning ms-1 d-none">!</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tabGrupos" role="tab">
                                <i class="ri-group-line me-1"></i>Grupos
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content p-3">
                        <div class="tab-pane active" id="tabGrados" role="tabpanel">
                            <div id="estadoVacioGrados" class="text-center py-4">
                                <p class="text-muted mb-0">Sin Grados</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar.</p>
                            </div>
                            <ul class="list-group list-group-flush list-group-grados" id="listaGrados"></ul>
                        </div>
                        <div class="tab-pane" id="tabGrupos" role="tabpanel">
                            <div id="estadoVacioGrupos" class="text-center py-4">
                                <p class="text-muted mb-0">Sin Grupos</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar.</p>
                            </div>
                            <ul class="list-group list-group-flush" id="listaGrupos"></ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-12 col-lg-8 col-xl-9">
            <div class="card h-100">
                <div class="card-body position-relative">
                    <div class="d-flex justify-content-end mb-3">
                        <a href="{{ url('horarios/configuracion-rapida') }}" class="btn btn-success">
                            <i class="ri-flashlight-line me-1"></i>Configuración rápida
                        </a>
                    </div>
                    <div id="panelSeleccionGrupo" 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-2">Selecciona un grupo para mostrar la información o bien accede a la <a href="{{ url('horarios/configuracion-grupos-por-profesor') }}" class="text-warning fw-medium">configuración de grupos por profesor</a>.</p>
                    </div>
                    <div id="panelDetalleGrupo" class="d-none">
                        <h6 class="mb-3">Detalle del grupo: <span id="detalleGrupoClave"></span></h6>
                        <div class="row g-2">
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Turno</label>
                                <p id="detalleTurno" class="mb-0"></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Docente</label>
                                <p id="detalleDocente" class="mb-0"></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Cupo</label>
                                <p id="detalleCupo" class="mb-0"></p>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small">Grado</label>
                                <p id="detalleGrado" class="mb-0"></p>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="button" class="btn btn-outline-primary btn-sm" id="btnEditarGrupo">
                                <i class="ri-edit-line me-1"></i>Editar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('configuracion-grupos.partials.modal-editar-grupo')
@endsection

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

    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('');
        });
    }

    function buscar() {
        var escuelaId = document.getElementById('filtroPlantel').value;
        var planId = document.getElementById('filtroPlanEstudio').value;
        var cicloId = document.getElementById('filtroPeriodo').value;
        if (!planId || !cicloId) {
            if (typeof Swal !== 'undefined') {
                Swal.fire({ icon: 'warning', title: 'Faltan datos', text: 'Seleccione Plan de estudios y Periodo para buscar los grupos.' });
            }
            datosBusqueda.grados = [];
            datosBusqueda.grupos = [];
            renderGrados();
            renderGrupos();
            return;
        }
        var params = new URLSearchParams({ escuela_id: escuelaId || '', plan_estudio_id: planId, ciclo_id: cicloId });
        fetch(baseUrl + '/api/configuracion-grupos/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosBusqueda.grados = data.grados || [];
                datosBusqueda.grupos = data.grupos || [];
                datosBusqueda.escuela_id = data.escuela_id;
                datosBusqueda.plan_estudio_id = data.plan_estudio_id;
                datosBusqueda.ciclo_id = data.ciclo_id;
                renderGrados();
                renderGrupos();
            })
            .catch(function() {
                datosBusqueda.grados = [];
                datosBusqueda.grupos = [];
                renderGrados();
                renderGrupos();
            });
    }

    function renderGrados() {
        var lista = document.getElementById('listaGrados');
        var estadoVacio = document.getElementById('estadoVacioGrados');
        lista.innerHTML = '';
        if (!datosBusqueda.grados.length) {
            estadoVacio.classList.remove('d-none');
            lista.style.display = 'none';
            return;
        }
        estadoVacio.classList.add('d-none');
        lista.style.display = 'block';
        datosBusqueda.grados.forEach(function(g) {
            var li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action';
            li.textContent = g.nombre || (g.grado + '°');
            li.dataset.grado = g.grado;
            lista.appendChild(li);
        });
    }

    function renderGrupos() {
        var lista = document.getElementById('listaGrupos');
        var estadoVacio = document.getElementById('estadoVacioGrupos');
        lista.innerHTML = '';
        if (!datosBusqueda.grupos.length) {
            estadoVacio.classList.remove('d-none');
            lista.style.display = 'none';
            return;
        }
        estadoVacio.classList.add('d-none');
        lista.style.display = 'block';
        datosBusqueda.grupos.forEach(function(g) {
            var li = document.createElement('li');
            li.className = 'list-group-item list-group-item-action';
            li.textContent = g.clave + (g.turno ? ' (' + g.turno.nombre + ')' : '');
            li.dataset.grupoId = g.id;
            li.addEventListener('click', function() { seleccionarGrupo(g.id); });
            lista.appendChild(li);
        });
    }

    function seleccionarGrupo(id) {
        fetch(baseUrl + '/api/configuracion-grupos/grupos/' + id, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(g) {
                grupoSeleccionado = g;
                document.getElementById('panelSeleccionGrupo').classList.add('d-none');
                document.getElementById('panelDetalleGrupo').classList.remove('d-none');
                document.getElementById('detalleGrupoClave').textContent = g.clave || '';
                document.getElementById('detalleTurno').textContent = (g.turno && g.turno.nombre) || '—';
                document.getElementById('detalleDocente').textContent = (g.docente && (g.docente.nombre_completo || g.docente.nombre)) || 'Sin asignar';
                document.getElementById('detalleCupo').textContent = g.cupo != null ? g.cupo : '—';
                document.getElementById('detalleGrado').textContent = g.grado != null ? (g.grado + '°') : '—';
            });
    }

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

    function cargarTurnosYDocentesEnModal() {
        return Promise.all([
            fetch(baseUrl + '/api/configuracion-grupos/turnos').then(function(r) { return r.json(); }).then(function(data) {
                var sel = document.getElementById('modalEditarTurno');
                sel.innerHTML = '<option value="">-- Seleccione --</option>' + (data || []).map(function(t) {
                    return '<option value="' + t.id + '">' + (t.nombre || '') + '</option>';
                }).join('');
            }),
            fetch(baseUrl + '/api/configuracion-grupos/docentes').then(function(r) { return r.json(); }).then(function(data) {
                var sel = document.getElementById('modalEditarDocente');
                sel.innerHTML = '<option value="">Sin asignar</option>' + (data || []).map(function(d) {
                    return '<option value="' + d.id + '">' + (d.nombre_completo || d.numero_empleado || '') + '</option>';
                }).join('');
            })
        ]);
    }

    document.getElementById('btnEditarGrupo').addEventListener('click', function() {
        if (!grupoSeleccionado) return;
        var modal = document.getElementById('modalEditarGrupo');
        cargarTurnosYDocentesEnModal().then(function() {
            document.getElementById('modalEditarGrupoId').value = grupoSeleccionado.id;
            document.getElementById('modalEditarClave').value = grupoSeleccionado.clave || '';
            document.getElementById('modalEditarCupo').value = grupoSeleccionado.cupo || 30;
            document.getElementById('modalEditarTurno').value = grupoSeleccionado.turno_id || '';
            document.getElementById('modalEditarDocente').value = grupoSeleccionado.docente_id || '';
            new bootstrap.Modal(modal).show();
        });
    });

    document.getElementById('btnGuardarEdicionGrupo').addEventListener('click', function() {
        var id = document.getElementById('modalEditarGrupoId').value;
        if (!id) return;
        var clave = (document.getElementById('modalEditarClave').value || '').trim();
        var turnoId = document.getElementById('modalEditarTurno').value || '';
        var cupoVal = document.getElementById('modalEditarCupo').value;
        var cupo = parseInt(cupoVal, 10);
        if (!clave) {
            if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La clave del grupo es obligatoria.' });
            return;
        }
        if (turnoId === '' || turnoId === null) {
            if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'Seleccione un turno para el grupo.' });
            return;
        }
        if (isNaN(cupo) || cupo < 1 || cupo > 999) {
            if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Cupo inválido', text: 'El cupo debe ser un número entre 1 y 999.' });
            return;
        }
        var payload = {
            clave: clave,
            cupo: cupo,
            turno_id: turnoId || null,
            docente_id: document.getElementById('modalEditarDocente').value || null
        };
        fetch(baseUrl + '/api/configuracion-grupos/grupos/' + id, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify(payload)
        }).then(function(r) {
            if (!r.ok) throw new Error();
            return r.json();
        }).then(function(g) {
            bootstrap.Modal.getInstance(document.getElementById('modalEditarGrupo')).hide();
            if (grupoSeleccionado && grupoSeleccionado.id == g.id) {
                grupoSeleccionado = g;
                document.getElementById('detalleGrupoClave').textContent = g.clave || '';
                document.getElementById('detalleTurno').textContent = (g.turno && g.turno.nombre) || '—';
                document.getElementById('detalleDocente').textContent = (g.docente && (g.docente.nombre_completo || g.docente.nombre)) || 'Sin asignar';
                document.getElementById('detalleCupo').textContent = g.cupo != null ? g.cupo : '—';
            }
            buscar();
        }).catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'Error al guardar.' }); });
    });

    cargarSelects();
    </script>
@endsection