@extends('layouts.master')

@section('title')
    Esquemas de evaluación
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Esquemas de evaluación @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-file-list-3-line me-2"></i>Esquemas de evaluación
                    </h5>
                    <p class="text-muted mb-4">Completa de manera opcional el siguiente filtro y al finalizar haz clic en el botón BUSCAR para mostrar los diferentes esquemas escolares registrados en el sistema.</p>
                    <form id="filtrosEsquemasForm">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-3">
                                <label for="filtroEsquema" class="form-label">Esquema</label>
                                <input type="text" class="form-control" id="filtroEsquema" placeholder="Nombre del esquema">
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPlanEstudio" class="form-label">Plan Estudios</label>
                                <select class="form-select" id="filtroPlanEstudio">
                                    <option value="">-- Sin planes de estudio --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label for="filtroPeriodo" class="form-label">Periodo</label>
                                <select class="form-select" id="filtroPeriodo">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <button type="submit" class="btn btn-primary me-2"><i class="ri-search-line me-1"></i>Buscar</button>
                                <button type="button" class="btn btn-warning" id="btnRegistrarEsquema"><i class="ri-add-line me-1"></i>Registrar</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-body">
                    <div id="estadoVacioEsquemas" 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-search-line fs-1"></i>
                            </div>
                        </div>
                        <p class="text-muted mb-0">No se encontraron resultados con los filtros seleccionados.</p>
                    </div>
                    <div id="resultadosContainerEsquemas" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Esquema</th>
                                        <th>Plan de estudios</th>
                                        <th>Periodo</th>
                                        <th>Criterio de evaluación</th>
                                        <th>Activo</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyEsquemas"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('planes-estudio.partials.modal-esquema-evaluacion')
@endsection

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

    function cargarSelects() {
        fetch(baseUrl + '/api/esquemas-evaluacion/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlanEstudio');
            var selModal = document.getElementById('registroPlanEstudio');
            var opts = (data || []).map(function(p) {
                var n = p.nombre || p.clave_plan || 'Plan ' + p.id;
                return '<option value="' + p.id + '">' + n + '</option>';
            }).join('');
            if (sel) sel.innerHTML = '<option value="">-- Sin planes de estudio --</option>' + opts;
            if (selModal) selModal.innerHTML = '<option value="">-- Sin planes de estudio --</option>' + opts;
        });
        fetch(baseUrl + '/api/esquemas-evaluacion/ciclos').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPeriodo');
            var selModal = document.getElementById('registroPeriodo');
            var opts = (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
            if (sel) sel.innerHTML = '<option value="">-- Todos --</option>' + opts;
            if (selModal) selModal.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/esquemas-evaluacion/criterios').then(function(r) { return r.json(); }).then(function(data) {
            var selModal = document.getElementById('registroCriterio');
            if (!selModal) return;
            var opts = (data || []).map(function(c) {
                return '<option value="' + c.id + '">' + (c.nombre || '') + '</option>';
            }).join('');
            selModal.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
    }

    function buscarEsquemas() {
        var params = new URLSearchParams({
            esquema: document.getElementById('filtroEsquema').value.trim(),
            plan_estudio_id: document.getElementById('filtroPlanEstudio').value,
            ciclo_id: document.getElementById('filtroPeriodo').value
        });
        fetch(baseUrl + '/api/esquemas-evaluacion?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                esquemasActuales = data || [];
                var tbody = document.getElementById('resultadosBodyEsquemas');
                var container = document.getElementById('resultadosContainerEsquemas');
                var estadoVacio = document.getElementById('estadoVacioEsquemas');
                tbody.innerHTML = '';
                if (!esquemasActuales.length) {
                    container.classList.add('d-none');
                    estadoVacio.classList.remove('d-none');
                    estadoVacio.querySelector('.text-muted').textContent = 'No se encontraron resultados con los filtros seleccionados.';
                    return;
                }
                estadoVacio.classList.add('d-none');
                container.classList.remove('d-none');
                esquemasActuales.forEach(function(e) {
                    var tr = document.createElement('tr');
                    tr.innerHTML =
                        '<td>' + (e.nombre || '-') + '</td>' +
                        '<td>' + (e.plan_estudio ? (e.plan_estudio.nombre || e.plan_estudio.clave_plan || '-') : '-') + '</td>' +
                        '<td>' + (e.ciclo ? (e.ciclo.nombre || '-') : '-') + '</td>' +
                        '<td>' + (e.criterio_evaluacion ? e.criterio_evaluacion.nombre : '-') + '</td>' +
                        '<td>' + (e.activo ? 'Sí' : 'No') + '</td>' +
                        '<td class="text-center">' +
                        '<button type="button" class="btn btn-sm btn-soft-info me-1 btnEditarEsquema" data-id="' + e.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                        '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarEsquema" data-id="' + e.id + '" data-nombre="' + (e.nombre || '').replace(/"/g, '&quot;') + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                        '</td>';
                    tbody.appendChild(tr);
                });
                document.querySelectorAll('.btnEditarEsquema').forEach(function(btn) {
                    btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                });
                document.querySelectorAll('.btnEliminarEsquema').forEach(function(btn) {
                    btn.addEventListener('click', function() {
                        var id = parseInt(this.getAttribute('data-id'), 10);
                        var nombre = this.getAttribute('data-nombre');
                        Swal.fire({
                            title: '¿Eliminar esquema?',
                            text: 'Se eliminará el esquema "' + nombre + '".',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Sí, eliminar'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                fetch(baseUrl + '/api/esquemas-evaluacion/' + id, {
                                    method: 'DELETE',
                                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
                                }).then(function(r) { return r.json(); }).then(function() { buscarEsquemas(); Swal.fire({ icon: 'success', title: 'Eliminado' }); }).catch(function() { Swal.fire({ icon: 'error', title: 'Error' }); });
                            }
                        });
                    });
                });
            })
            .catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar la búsqueda.' }); });
    }

    document.getElementById('filtrosEsquemasForm').addEventListener('submit', function(e) {
        e.preventDefault();
        buscarEsquemas();
    });

    document.getElementById('btnRegistrarEsquema').addEventListener('click', function() {
        document.getElementById('esquemaId').value = '';
        document.getElementById('registroNombreEsquema').value = '';
        document.getElementById('registroPlanEstudio').value = '';
        document.getElementById('registroPeriodo').value = '';
        document.getElementById('registroCriterio').value = '';
        document.getElementById('registroActivo').checked = true;
        new bootstrap.Modal(document.getElementById('modalEsquemaEvaluacion')).show();
    });

    function abrirModalEditar(id) {
        var e = esquemasActuales.find(function(x) { return x.id === id; });
        if (!e) return;
        document.getElementById('esquemaId').value = e.id;
        document.getElementById('registroNombreEsquema').value = e.nombre || '';
        document.getElementById('registroPlanEstudio').value = e.plan_estudio_id || '';
        document.getElementById('registroPeriodo').value = e.ciclo_id || '';
        document.getElementById('registroCriterio').value = e.criterio_evaluacion_id || '';
        document.getElementById('registroActivo').checked = !!e.activo;
        new bootstrap.Modal(document.getElementById('modalEsquemaEvaluacion')).show();
    }

    document.getElementById('btnGuardarEsquema').addEventListener('click', function() {
        var id = document.getElementById('esquemaId').value;
        var nombre = document.getElementById('registroNombreEsquema').value.trim();
        if (!nombre) { Swal.fire({ icon: 'warning', title: 'El nombre del esquema es obligatorio' }); return; }
        var payload = {
            nombre: nombre,
            plan_estudio_id: document.getElementById('registroPlanEstudio').value || null,
            ciclo_id: document.getElementById('registroPeriodo').value || null,
            criterio_evaluacion_id: document.getElementById('registroCriterio').value || null,
            activo: document.getElementById('registroActivo').checked
        };
        var url = id ? baseUrl + '/api/esquemas-evaluacion/' + id : baseUrl + '/api/esquemas-evaluacion';
        var method = id ? 'PUT' : 'POST';
        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
            body: JSON.stringify(payload)
        }).then(function(r) { return r.json(); }).then(function(res) {
            if (res.success) {
                bootstrap.Modal.getInstance(document.getElementById('modalEsquemaEvaluacion')).hide();
                buscarEsquemas();
                Swal.fire({ icon: 'success', title: 'Guardado correctamente', text: 'El esquema de evaluación se ha guardado correctamente.' });
            }
        }).catch(function() { Swal.fire({ icon: 'error', title: 'Error al guardar' }); });
    });

    cargarSelects();
    </script>
@endsection