@extends('layouts.master')

@section('title')
    Configuración de grupos por profesor
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('li_2') Horarios @endslot
        @slot('title') Configuración de grupos por profesor @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-star-line me-2"></i>Configuración de grupos por profesor
                    </h5>
                    <p class="text-muted mb-4">
                        Asigna un docente a cada grupo. Selecciona plantel, plan de estudios y periodo para listar los grupos y luego elige el profesor responsable de cada uno.
                    </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="estadoVacio" class="text-center py-5 mt-4">
                        <p class="text-muted mb-0">Selecciona plantel, plan y periodo y presiona Buscar para ver los grupos.</p>
                    </div>

                    <div id="tablaGruposWrap" class="d-none mt-4">
                        <div class="table-responsive">
                            <table class="table table-bordered table-hover mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Clave</th>
                                        <th>Grado</th>
                                        <th>Turno</th>
                                        <th>Docente</th>
                                        <th>Cupo</th>
                                        <th width="120">Acción</th>
                                    </tr>
                                </thead>
                                <tbody id="tablaGruposBody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

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

    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/docentes').then(function(r) { return r.json(); }).then(function(data) {
            listaDocentes = data || [];
        });
    }

    function asignarDocente(grupoId, docenteId) {
        fetch(baseUrl + '/api/configuracion-grupos/grupos/' + grupoId + '/asignar-docente', {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ docente_id: parseInt(docenteId, 10) })
        }).then(function(r) {
            if (!r.ok) throw new Error();
            return r.json();
        }).then(function(g) {
            var row = listaGrupos.find(function(x) { return x.id == grupoId; });
            if (row) {
                row.docente_id = g.docente_id;
                row.docente = g.docente;
            }
            renderTabla();
        }).catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'Error al asignar docente.' }); });
    }

    function renderTabla() {
        var tbody = document.getElementById('tablaGruposBody');
        tbody.innerHTML = '';
        var opts = '<option value="">Sin asignar</option>' + listaDocentes.map(function(d) {
            return '<option value="' + d.id + '">' + (d.nombre_completo || d.numero_empleado || '') + '</option>';
        }).join('');
        listaGrupos.forEach(function(g) {
            var tr = document.createElement('tr');
            var sel = '<select class="form-select form-select-sm select-docente" data-grupo-id="' + g.id + '">' + opts + '</select>';
            var docVal = (g.docente_id || '').toString();
            tr.innerHTML = '<td>' + (g.clave || '') + '</td>' +
                '<td>' + (g.grado != null ? g.grado + '°' : '—') + '</td>' +
                '<td>' + (g.turno && g.turno.nombre ? g.turno.nombre : '—') + '</td>' +
                '<td>' + sel + '</td>' +
                '<td>' + (g.cupo != null ? g.cupo : '—') + '</td>' +
                '<td><button type="button" class="btn btn-sm btn-primary btnGuardarDocente" data-grupo-id="' + g.id + '">Guardar</button></td>';
            tbody.appendChild(tr);
            var selectEl = tr.querySelector('.select-docente');
            selectEl.value = docVal;
            tr.querySelector('.btnGuardarDocente').addEventListener('click', function() {
                var gid = this.dataset.grupoId;
                var did = tr.querySelector('.select-docente').value;
                if (!did) { Swal.fire({ icon: 'warning', title: 'Aviso', text: 'Selecciona un docente.' }); return; }
                asignarDocente(gid, did);
            });
        });
    }

    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 (!planId || !cicloId) {
            document.getElementById('estadoVacio').classList.remove('d-none');
            document.getElementById('tablaGruposWrap').classList.add('d-none');
            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) {
                listaGrupos = data.grupos || [];
                document.getElementById('estadoVacio').classList.add('d-none');
                document.getElementById('tablaGruposWrap').classList.remove('d-none');
                renderTabla();
            })
            .catch(function() {
                listaGrupos = [];
                document.getElementById('estadoVacio').classList.remove('d-none');
                document.getElementById('tablaGruposWrap').classList.add('d-none');
            });
    });

    cargarSelects();
    </script>
@endsection