@extends('layouts.master')

@section('title')
    Configuración de criterios por periodo
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Configuración de criterios por periodo @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3 text-primary">
                        <i class="ri-settings-3-line me-2"></i>Configuración de criterios por periodo
                    </h5>
                    <p class="text-muted mb-4">Selecciona el mecanismo que deseas utilizar para la asignación de fechas a los diferentes grados o etapas de evaluación.</p>
                    <form id="filtrosForm">
                        <div class="row g-3 align-items-end mb-3">
                            <div class="col-md-3">
                                <label for="filtroTipoInformacion" class="form-label">Tipos de información</label>
                                <select class="form-select" id="filtroTipoInformacion">
                                    <option value="Por grado">Por grado</option>
                                    <option value="Por criterio">Por criterio</option>
                                </select>
                            </div>
                            <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="">No se encontró información</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPeriodo" class="form-label">Periodo</label>
                                <select class="form-select" id="filtroPeriodo">
                                    <option value="">No se encontraron ciclos</option>
                                </select>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex flex-wrap gap-2 justify-content-end">
                                    <button type="button" class="btn btn-warning" id="btnInforme"><i class="ri-file-text-line me-1"></i>Informe</button>
                                    <button type="button" class="btn btn-warning" id="btnConfigMasiva"><i class="ri-settings-4-line me-1"></i>Configuración masiva</button>
                                    <button type="submit" class="btn btn-primary" id="btnBuscar"><i class="ri-search-line me-1"></i>Buscar</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body">
                    <ul class="nav nav-tabs nav-tabs-custom mb-3" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#tabGrados" role="tab">Grados</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#tabCriterios" role="tab">Criterios de evaluación</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane active" id="tabGrados" role="tabpanel">
                            <div id="estadoVacioGrados" 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>
                                <p class="text-muted mb-0">Sin Grados</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar para cargar los grados del plan.</p>
                            </div>
                            <div id="resultadosGrados" class="d-none">
                                <ul class="list-group list-group-flush" id="listaGrados"></ul>
                            </div>
                        </div>
                        <div class="tab-pane" id="tabCriterios" role="tabpanel">
                            <div id="estadoVacioCriterios" 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>
                                <p class="text-muted mb-0">Sin Criterios</p>
                                <p class="text-muted small">Selecciona filtros y presiona Buscar para cargar los criterios.</p>
                            </div>
                            <div id="resultadosCriterios" class="d-none">
                                <ul class="list-group list-group-flush" id="listaCriterios"></ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('planes-estudio.partials.modal-informe-criterios')
    @include('planes-estudio.partials.modal-configuracion-masiva')
@endsection

@section('script')
    <script src="{{ URL::asset('build/libs/sweetalert2/sweetalert2.min.js') }}"></script>
    <script>
    var baseUrl = '{{ url("") }}';
    var datosBusqueda = { grados: [], criterios: [] };

    function cargarSelects() {
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlantel');
            var opts = (data || []).map(function(p) { return '<option value="' + (p.id || p.nombre || '') + '">' + (p.nombre || p.id || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlanEstudio');
            var opts = (data || []).map(function(p) {
                var n = p.nombre || p.clave_plan || 'Plan ' + p.id;
                return '<option value="' + p.id + '">' + n + '</option>';
            }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPeriodo');
            var opts = (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
    }

    function buscar() {
        var params = new URLSearchParams({
            plantel: document.getElementById('filtroPlantel').value,
            plan_estudio_id: document.getElementById('filtroPlanEstudio').value,
            ciclo_id: document.getElementById('filtroPeriodo').value
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/buscar?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                datosBusqueda.grados = data.grados || [];
                datosBusqueda.criterios = data.criterios || [];
                renderGrados();
                renderCriterios();
            })
            .catch(function() {
                datosBusqueda.grados = [];
                datosBusqueda.criterios = [];
                renderGrados();
                renderCriterios();
            });
    }

    function renderGrados() {
        var lista = document.getElementById('listaGrados');
        var container = document.getElementById('resultadosGrados');
        var estadoVacio = document.getElementById('estadoVacioGrados');
        lista.innerHTML = '';
        if (!datosBusqueda.grados.length) {
            container.classList.add('d-none');
            estadoVacio.classList.remove('d-none');
            estadoVacio.querySelector('.text-muted.mb-0').textContent = 'Sin Grados';
            return;
        }
        estadoVacio.classList.add('d-none');
        container.classList.remove('d-none');
        datosBusqueda.grados.forEach(function(g) {
            var li = document.createElement('li');
            li.className = 'list-group-item d-flex justify-content-between align-items-center';
            li.innerHTML = '<span>' + (g.nombre || g.grado + '°') + '</span>';
            lista.appendChild(li);
        });
    }

    function renderCriterios() {
        var lista = document.getElementById('listaCriterios');
        var container = document.getElementById('resultadosCriterios');
        var estadoVacio = document.getElementById('estadoVacioCriterios');
        lista.innerHTML = '';
        if (!datosBusqueda.criterios.length) {
            container.classList.add('d-none');
            estadoVacio.classList.remove('d-none');
            estadoVacio.querySelector('.text-muted.mb-0').textContent = 'Sin Criterios';
            return;
        }
        estadoVacio.classList.add('d-none');
        container.classList.remove('d-none');
        datosBusqueda.criterios.forEach(function(c) {
            var li = document.createElement('li');
            li.className = 'list-group-item';
            li.textContent = c.nombre || '-';
            lista.appendChild(li);
        });
    }

    document.getElementById('filtrosForm').addEventListener('submit', function(e) {
        e.preventDefault();
        var plantel = document.getElementById('filtroPlantel').value;
        var plan = document.getElementById('filtroPlanEstudio').value;
        var periodo = document.getElementById('filtroPeriodo').value;
        var errores = [];
        if (!plantel) errores.push('Plantel');
        if (!plan) errores.push('Plan de estudios');
        if (!periodo) errores.push('Periodo');
        if (errores.length) {
            Swal.fire({ icon: 'warning', title: 'Campos requeridos', html: 'Seleccione: <br><strong>' + errores.join(', ') + '</strong>' });
            return;
        }
        buscar();
    });

    document.getElementById('btnInforme').addEventListener('click', function() {
        cargarSelectsInforme();
        new bootstrap.Modal(document.getElementById('modalInforme')).show();
    });

    function cargarSelectsInforme() {
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('informePlantel');
            if (!sel) return;
            var opts = (data || []).map(function(p) { return '<option value="' + (p.id || p.nombre || '') + '">' + (p.nombre || p.id || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('informePlanEstudio');
            if (!sel) return;
            var opts = (data || []).map(function(p) {
                var n = p.nombre || p.clave_plan || 'Plan ' + p.id;
                return '<option value="' + p.id + '">' + n + '</option>';
            }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('informePeriodo');
            if (!sel) return;
            var opts = (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
    }

    document.getElementById('btnInformeBuscar').addEventListener('click', function() {
        var plantel = document.getElementById('informePlantel').value;
        var plan = document.getElementById('informePlanEstudio').value;
        var periodo = document.getElementById('informePeriodo').value;
        var errores = [];
        if (!plantel) errores.push('Plantel');
        if (!plan) errores.push('Plan de estudios');
        if (!periodo) errores.push('Periodo');
        if (errores.length) {
            Swal.fire({ icon: 'warning', title: 'Campos requeridos', html: 'Seleccione: <br><strong>' + errores.join(', ') + '</strong>' });
            return;
        }
        var params = new URLSearchParams({
            plantel: plantel,
            plan_estudio_id: plan,
            ciclo_id: periodo
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/informe?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var g = (data.grados || []).length;
                var c = (data.criterios || []).length;
                Swal.fire({
                    icon: 'success',
                    title: 'Informe',
                    html: 'Grados encontrados: <strong>' + g + '</strong>. Criterios: <strong>' + c + '</strong>.'
                });
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo generar el informe.' }); });
    });

    document.getElementById('btnConfigMasiva').addEventListener('click', function() {
        cargarSelectsConfigMasiva();
        new bootstrap.Modal(document.getElementById('modalConfigMasiva')).show();
    });

    function cargarSelectsConfigMasiva() {
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planteles').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('configMasivaPlantel');
            if (!sel) return;
            var opts = (data || []).map(function(p) {
                var v = p.id || p.nombre || '';
                return '<option value="' + v + '">' + (p.nombre || p.id || '') + '</option>';
            }).join('');
            sel.innerHTML = opts;
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('configMasivaPlan');
            if (!sel) return;
            sel.innerHTML = (data || []).map(function(p) {
                var n = p.nombre || p.clave_plan || 'Plan ' + p.id;
                return '<option value="' + p.id + '">' + n + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('configMasivaPeriodo');
            if (!sel) return;
            sel.innerHTML = (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
        });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/criterios').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('configMasivaCriterio');
            if (!sel) return;
            var opts = (data || []).map(function(c) { return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>'; }).join('');
            sel.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
    }

    function marcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel || !sel.multiple) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = true;
    }
    function desmarcarTodos(selectId) {
        var sel = document.getElementById(selectId);
        if (!sel) return;
        for (var i = 0; i < sel.options.length; i++) sel.options[i].selected = false;
    }

    document.getElementById('configMasivaMarcarPlantel').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('configMasivaPlantel'); });
    document.getElementById('configMasivaDesmarcarPlantel').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('configMasivaPlantel'); });
    document.getElementById('configMasivaMarcarPeriodo').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('configMasivaPeriodo'); });
    document.getElementById('configMasivaDesmarcarPeriodo').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('configMasivaPeriodo'); });
    document.getElementById('configMasivaMarcarPlan').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('configMasivaPlan'); });
    document.getElementById('configMasivaDesmarcarPlan').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('configMasivaPlan'); });
    document.getElementById('configMasivaMarcarGrado').addEventListener('click', function(e) { e.preventDefault(); marcarTodos('configMasivaGrado'); });
    document.getElementById('configMasivaDesmarcarGrado').addEventListener('click', function(e) { e.preventDefault(); desmarcarTodos('configMasivaGrado'); });

    document.getElementById('btnConfigMasivaBuscar').addEventListener('click', function() {
        var planIds = Array.from(document.getElementById('configMasivaPlan').selectedOptions).map(function(o) { return o.value; });
        var periodoIds = Array.from(document.getElementById('configMasivaPeriodo').selectedOptions).map(function(o) { return o.value; });
        var gradoVals = Array.from(document.getElementById('configMasivaGrado').selectedOptions).map(function(o) { return o.value; });
        var errores = [];
        if (!planIds.length) errores.push('al menos un Plan de estudios');
        if (!periodoIds.length) errores.push('al menos un Periodo');
        if (errores.length) {
            Swal.fire({ icon: 'warning', title: 'Campos requeridos', html: 'Seleccione: <br><strong>' + errores.join(', ') + '</strong>' });
            return;
        }
        var params = new URLSearchParams();
        planIds.forEach(function(id) { params.append('plan_estudio_id[]', id); });
        periodoIds.forEach(function(id) { params.append('ciclo_id[]', id); });
        gradoVals.forEach(function(g) { params.append('grado[]', g); });
        fetch(baseUrl + '/api/configuracion-criterios-periodo/configuracion-masiva?' + params.toString(), { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                var items = data.items || [];
                Swal.fire({
                    icon: 'success',
                    title: 'Configuración masiva',
                    html: 'Se encontraron <strong>' + items.length + '</strong> combinaciones (plan/grado) para configurar.'
                });
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo realizar la búsqueda.' }); });
    });

    cargarSelects();
    </script>
@endsection