@extends('layouts.master')

@section('title')
    Grupos
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Configuración @endslot
        @slot('li_2') Mi institución @endslot
        @slot('title') Grupos @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <!-- Filtros de búsqueda -->
            <div class="card">
                <div class="card-body">
                    <p class="text-muted mb-4">
                        Usa el siguiente formulario para mostrar los grupos registrados en la aplicación.
                    </p>

                    <form id="formFiltrosGrupos" class="needs-validation" novalidate>
                        <div class="row g-3">
                            <div class="col-md-3">
                                <label for="filtroNombreGrupo" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="filtroNombreGrupo" placeholder="Nombre del grupo">
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPlantelGrupo" class="form-label">Plantel</label>
                                <select class="form-select" id="filtroPlantelGrupo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPlanGrupo" class="form-label">Plan de Estudios</label>
                                <select class="form-select" id="filtroPlanGrupo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="filtroTurnoGrupo" class="form-label">Turno</label>
                                <select class="form-select" id="filtroTurnoGrupo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="filtroGradoGrupo" class="form-label">Grado</label>
                                <select class="form-select" id="filtroGradoGrupo">
                                    <option value="">-- Todos --</option>
                                    @for ($g = 1; $g <= 9; $g++)
                                        <option value="{{ $g }}">{{ $g }}°</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-2">
                                <label for="filtroCicloGrupo" class="form-label">Ciclo</label>
                                <select class="form-select" id="filtroCicloGrupo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <button type="button" class="btn btn-light" id="btnSeriacionGrupos">
                                        <i class="ri-link me-1"></i>Seriación de grupos anteriores
                                    </button>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="ri-search-line me-1"></i>Buscar
                                    </button>
                                    <button type="button" class="btn btn-warning" id="btnRegistrarGrupo">
                                        <i class="ri-user-add-line me-1"></i>Registrar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Sección de resultados -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="card-title mb-0">
                            <i class="ri-file-list-3-line me-2"></i>Resultados de búsqueda
                        </h5>
                        <div class="d-flex align-items-center gap-2">
                            <label for="seccionConsultarGrupos" class="mb-0 me-2">Sección a consultar:</label>
                            <select class="form-select form-select-sm" id="seccionConsultarGrupos" style="width: 220px;">
                                <option value="listado">Listado de grupos</option>
                            </select>
                        </div>
                    </div>

                    <!-- Estado vacío -->
                    <div id="estadoVacioGrupos" class="text-center py-5">
                        <div class="avatar-lg mx-auto mb-4">
                            <div class="avatar-title bg-light text-muted rounded-circle">
                                <i class="ri-information-line fs-1"></i>
                            </div>
                        </div>
                        <h5 class="text-muted mb-2">Sin resultados</h5>
                        <p id="estadoVacioGruposMensaje" class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                    </div>

                    <!-- Tabla de resultados -->
                    <div id="resultadosContainerGrupos" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Plantel</th>
                                        <th>Plan de estudios</th>
                                        <th>Grado</th>
                                        <th>Turno</th>
                                        <th>Ciclo</th>
                                        <th>Capacidad</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyGrupos"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('configuracion.mi-institucion.partials.modal-grupo')
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var baseUrl = '{{ url("") }}';
        var csrf = '{{ csrf_token() }}';

        function cargarSelectsFiltro() {
            fetch(baseUrl + '/api/configuracion-grupos/planteles', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroPlantelGrupo');
                    var opts = (Array.isArray(data) ? data : []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + opts;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/planes', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroPlanGrupo');
                    var opts = (Array.isArray(data) ? data : []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + opts;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/turnos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroTurnoGrupo');
                    var opts = (Array.isArray(data) ? data : []).map(function(t) { return '<option value="' + t.id + '">' + (t.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + opts;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/ciclos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('filtroCicloGrupo');
                    var opts = (Array.isArray(data) ? data : []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Todos --</option>' + opts;
                }).catch(function() {});
        }
        cargarSelectsFiltro();

        function buscarGrupos() {
            var params = new URLSearchParams();
            var nombre = document.getElementById('filtroNombreGrupo').value.trim();
            var plantel = document.getElementById('filtroPlantelGrupo').value;
            var plan = document.getElementById('filtroPlanGrupo').value;
            var turno = document.getElementById('filtroTurnoGrupo').value;
            var grado = document.getElementById('filtroGradoGrupo').value;
            var ciclo = document.getElementById('filtroCicloGrupo').value;
            if (nombre) params.set('nombre', nombre);
            if (plantel) params.set('plantel_id', plantel);
            if (plan) params.set('plan_estudio_id', plan);
            if (turno) params.set('turno_id', turno);
            if (grado) params.set('grado', grado);
            if (ciclo) params.set('ciclo_id', ciclo);

            fetch(baseUrl + '/api/configuracion-grupos/list-grupos?' + params.toString(), { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var listado = Array.isArray(data) ? data : [];
                    var tbody = document.getElementById('resultadosBodyGrupos');
                    var container = document.getElementById('resultadosContainerGrupos');
                    var estadoVacio = document.getElementById('estadoVacioGrupos');

                    tbody.innerHTML = '';
                    if (listado.length === 0) {
                        container.classList.add('d-none');
                        estadoVacio.classList.remove('d-none');
                        var msgEl = document.getElementById('estadoVacioGruposMensaje');
                        if (msgEl) msgEl.textContent = 'No se encontraron grupos con los filtros seleccionados.';
                        return;
                    }
                    var msgElInit = document.getElementById('estadoVacioGruposMensaje');
                    if (msgElInit) msgElInit.textContent = 'Usa los filtros para realizar una búsqueda.';

                    estadoVacio.classList.add('d-none');
                    container.classList.remove('d-none');
                    listado.forEach(function(g) {
                        var tr = document.createElement('tr');
                        var clave = (g.clave || '-').replace(/</g, '&lt;').replace(/"/g, '&quot;');
                        var plantelNom = (g.escuela_nombre || '-').replace(/</g, '&lt;');
                        var planNom = (g.plan_estudio_nombre || '-').replace(/</g, '&lt;');
                        var turnoNom = (g.turno_nombre || '-').replace(/</g, '&lt;');
                        var cicloNom = (g.ciclo_nombre || '-').replace(/</g, '&lt;');
                        var gradoTxt = g.grado != null ? g.grado + '°' : '-';
                        var cap = (g.capacidad_maxima != null ? g.capacidad_maxima : g.cupo) || '-';
                        tr.innerHTML =
                            '<td>' + clave + '</td>' +
                            '<td>' + plantelNom + '</td>' +
                            '<td>' + planNom + '</td>' +
                            '<td>' + gradoTxt + '</td>' +
                            '<td>' + turnoNom + '</td>' +
                            '<td>' + cicloNom + '</td>' +
                            '<td>' + cap + '</td>' +
                            '<td class="text-center">' +
                            '<button type="button" class="btn btn-sm btn-soft-primary me-1 btnEditarGrupo" data-id="' + g.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                            '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarGrupo" data-id="' + g.id + '" data-clave="' + clave + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                            '</td>';
                        tbody.appendChild(tr);
                    });

                    document.querySelectorAll('.btnEditarGrupo').forEach(function(btn) {
                        btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                    });
                    document.querySelectorAll('.btnEliminarGrupo').forEach(function(btn) {
                        btn.addEventListener('click', function() {
                            var id = parseInt(this.getAttribute('data-id'), 10);
                            var clave = this.getAttribute('data-clave');
                            if (typeof Swal === 'undefined') {
                                if (confirm('¿Eliminar el grupo "' + clave + '"?')) eliminarGrupo(id);
                                return;
                            }
                            Swal.fire({
                                title: '¿Eliminar grupo?',
                                html: 'Se eliminará el grupo <strong>' + clave + '</strong>. Esta acción no se puede deshacer.',
                                icon: 'warning',
                                showCancelButton: true,
                                confirmButtonColor: '#d33',
                                cancelButtonColor: '#3085d6',
                                confirmButtonText: 'Sí, eliminar'
                            }).then(function(result) {
                                if (result.isConfirmed) eliminarGrupo(id);
                            });
                        });
                    });
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el listado.' });
                });
        }

        function eliminarGrupo(id) {
            fetch(baseUrl + '/api/configuracion-grupos/grupos/' + id, {
                method: 'DELETE',
                headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' }
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Eliminado', text: res.message || 'Grupo eliminado correctamente.' });
                    buscarGrupos();
                } else {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: res.message || 'No se pudo eliminar.' });
                }
            }).catch(function() {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
            });
        }

        function abrirModalEditar(id) {
            fetch(baseUrl + '/api/configuracion-grupos/grupos/' + id, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(g) {
                    document.getElementById('grupoId').value = g.id;
                    document.getElementById('modalGrupoTitulo').textContent = 'Editar grupo';
                    document.getElementById('grupoClave').value = g.clave || '';
                    document.getElementById('grupoPlantel').value = g.escuela_id || '';
                    document.getElementById('grupoPlanEstudio').value = g.plan_estudio_id || '';
                    document.getElementById('grupoGrado').value = g.grado != null ? g.grado : '';
                    document.getElementById('grupoTurno').value = g.turno_id || '';
                    document.getElementById('grupoCiclo').value = g.ciclo_id || '';
                    document.getElementById('grupoCapacidadMinima').value = g.capacidad_minima != null ? g.capacidad_minima : '';
                    document.getElementById('grupoCapacidadMaxima').value = g.capacidad_maxima != null ? g.capacidad_maxima : (g.cupo != null ? g.cupo : '');
                    var modal = new bootstrap.Modal(document.getElementById('modalGrupo'));
                    modal.show();
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el grupo.' });
                });
        }

        function limpiarModal() {
            document.getElementById('grupoId').value = '';
            document.getElementById('modalGrupoTitulo').textContent = 'Grupos';
            document.getElementById('grupoClave').value = '';
            document.getElementById('grupoPlantel').value = '';
            document.getElementById('grupoPlanEstudio').value = '';
            document.getElementById('grupoGrado').value = '';
            document.getElementById('grupoTurno').value = '';
            document.getElementById('grupoCiclo').value = '';
            document.getElementById('grupoCapacidadMinima').value = '';
            document.getElementById('grupoCapacidadMaxima').value = '';
        }

        function cargarSelectsModal() {
            fetch(baseUrl + '/api/configuracion-grupos/planteles', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('grupoPlantel');
                    var v = sel.value;
                    var opts = (Array.isArray(data) ? data : []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
                    if (v) sel.value = v;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/planes', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('grupoPlanEstudio');
                    var v = sel.value;
                    var opts = (Array.isArray(data) ? data : []).map(function(p) { return '<option value="' + p.id + '">' + (p.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
                    if (v) sel.value = v;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/turnos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('grupoTurno');
                    var v = sel.value;
                    var opts = (Array.isArray(data) ? data : []).map(function(t) { return '<option value="' + t.id + '">' + (t.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
                    if (v) sel.value = v;
                }).catch(function() {});

            fetch(baseUrl + '/api/configuracion-grupos/ciclos', { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    var sel = document.getElementById('grupoCiclo');
                    var v = sel.value;
                    var opts = (Array.isArray(data) ? data : []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '').replace(/</g, '&lt;') + '</option>'; }).join('');
                    sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
                    if (v) sel.value = v;
                }).catch(function() {});
        }

        document.getElementById('formFiltrosGrupos').addEventListener('submit', function(e) {
            e.preventDefault();
            buscarGrupos();
        });

        document.getElementById('formFiltrosGrupos').addEventListener('reset', function() {
            var estadoVacio = document.getElementById('estadoVacioGrupos');
            var container = document.getElementById('resultadosContainerGrupos');
            var msgEl = document.getElementById('estadoVacioGruposMensaje');
            estadoVacio.classList.remove('d-none');
            container.classList.add('d-none');
            if (msgEl) msgEl.textContent = 'Usa los filtros para realizar una búsqueda.';
        });

        document.getElementById('btnSeriacionGrupos').addEventListener('click', function() {
            window.location.href = baseUrl + '/horarios/configuracion-rapida';
        });

        document.getElementById('btnRegistrarGrupo').addEventListener('click', function() {
            limpiarModal();
            cargarSelectsModal();
            document.getElementById('modalGrupoTitulo').textContent = 'Grupos';
            var modal = new bootstrap.Modal(document.getElementById('modalGrupo'));
            modal.show();
        });

        document.getElementById('modalGrupo').addEventListener('show.bs.modal', function() {
            if (document.getElementById('grupoId').value === '') cargarSelectsModal();
        });

        document.getElementById('formModalGrupo').addEventListener('submit', function(e) {
            e.preventDefault();
            var id = document.getElementById('grupoId').value.trim();
            var clave = document.getElementById('grupoClave').value.trim();
            var plantel = document.getElementById('grupoPlantel').value.trim();
            var planEstudio = document.getElementById('grupoPlanEstudio').value.trim();
            var grado = document.getElementById('grupoGrado').value.trim();
            var turno = document.getElementById('grupoTurno').value.trim();
            var ciclo = document.getElementById('grupoCiclo').value.trim();
            var capMin = document.getElementById('grupoCapacidadMinima').value.trim();
            var capMax = document.getElementById('grupoCapacidadMaxima').value.trim();

            if (!clave) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre del grupo es obligatorio.' });
                return;
            }
            if (!plantel) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El plantel es obligatorio.' });
                return;
            }
            if (!planEstudio) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El plan de estudios es obligatorio.' });
                return;
            }
            if (!grado) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El grado es obligatorio.' });
                return;
            }
            if (!turno) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El turno es obligatorio.' });
                return;
            }
            if (!ciclo) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El ciclo es obligatorio.' });
                return;
            }
            if (!capMax) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La capacidad máxima es obligatoria.' });
                return;
            }

            var payload = {
                clave: clave,
                escuela_id: plantel || null,
                plan_estudio_id: planEstudio || null,
                grado: parseInt(grado, 10),
                turno_id: parseInt(turno, 10),
                ciclo_id: parseInt(ciclo, 10),
                capacidad_minima: capMin ? parseInt(capMin, 10) : null,
                capacidad_maxima: capMax ? parseInt(capMax, 10) : null,
            };

            var url = baseUrl + '/api/configuracion-grupos/grupos';
            var method = 'POST';
            if (id) {
                url = baseUrl + '/api/configuracion-grupos/grupos/' + id;
                method = 'PUT';
            }

            fetch(url, {
                method: method,
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
                body: JSON.stringify(payload)
            }).then(function(r) { return r.json(); }).then(function(res) {
                if (res.success) {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'success', title: 'Guardado', text: res.message || 'Grupo guardado correctamente.' });
                    bootstrap.Modal.getInstance(document.getElementById('modalGrupo')).hide();
                    limpiarModal();
                    if (!document.getElementById('resultadosContainerGrupos').classList.contains('d-none')) buscarGrupos();
                } else {
                    var msg = res.message || (res.errors ? Object.values(res.errors).flat().join(' ') : 'No se pudo guardar.');
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: msg });
                }
            }).catch(function() {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'Error de conexión.' });
            });
        });
    });
    </script>
@endsection