@extends('layouts.master')

@section('title')
    Planes de Estudio
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Planes de Estudio @endslot
    @endcomponent

    <div class="row">
        <div class="col-12">
            <!-- Filtros -->
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title mb-3 text-primary">
                        <i class="ri-book-2-line me-2"></i>Planes de Estudio
                    </h5>
                    <p class="text-muted mb-4">Usa el siguiente formulario para mostrar los planes de estudios registrados en la aplicación.</p>
                    <form id="filtrosPlanesForm">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="filtroNombre" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="filtroNombre" placeholder="Nombre del plan">
                            </div>
                            <div class="col-md-4">
                                <label for="filtroOferta" class="form-label">Oferta educativa</label>
                                <select class="form-select" id="filtroOferta">
                                    <option value="">-- Todas --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroPlan" class="form-label">Plan</label>
                                <select class="form-select" id="filtroPlan">
                                    <option value="">-- Todos --</option>
                                    <option value="Mensual">Mensual</option>
                                    <option value="Bimestral">Bimestral</option>
                                    <option value="Trimestral">Trimestral</option>
                                    <option value="Cuatrimestral">Cuatrimestral</option>
                                    <option value="Semestral">Semestral</option>
                                    <option value="Anual">Anual</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroCriterio" class="form-label">Criterio de evaluación</label>
                                <select class="form-select" id="filtroCriterio">
                                    <option value="">-- Todos --</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="filtroEstatus" class="form-label">Estatus</label>
                                <select class="form-select" id="filtroEstatus">
                                    <option value="">-- Todos --</option>
                                    <option value="Activos">Activos</option>
                                    <option value="Inactivos">Inactivos</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <div class="d-flex gap-2 justify-content-end">
                                    <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="btnRegistrarPlan">
                                        <i class="ri-add-line me-1"></i>Registrar
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Resultados -->
            <div class="card mt-4">
                <div class="card-body">
                    <div id="estadoVacioPlanes" 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="resultadosContainerPlanes" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Oferta educativa</th>
                                        <th>Plan</th>
                                        <th>Criterio de evaluación</th>
                                        <th>Clave plan</th>
                                        <th>Activo</th>
                                        <th class="text-center">Opciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyPlanes"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('planes-estudio.partials.modal-plan-estudios')
@endsection

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

    function cargarSelects() {
        fetch(baseUrl + '/api/ofertas-educativas').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroOferta');
            var selModal = document.getElementById('planOfertaEducativa');
            var opts = (data || []).map(function(o) { return '<option value="' + o.id + '">' + (o.nombre || '') + '</option>'; }).join('');
            if (sel) sel.innerHTML = '<option value="">-- Todas --</option>' + opts;
            if (selModal) selModal.innerHTML = '<option value="">-- Seleccione --</option>' + opts;
        });
        fetch(baseUrl + '/api/planes-estudio/criterios').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroCriterio');
            var selModal = document.getElementById('planCriterioEvaluacion');
            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;
        });
    }

    function buscarPlanes() {
        var params = new URLSearchParams({
            nombre: document.getElementById('filtroNombre').value.trim(),
            oferta_educativa_id: document.getElementById('filtroOferta').value,
            tipo_periodo: document.getElementById('filtroPlan').value,
            criterio_evaluacion_id: document.getElementById('filtroCriterio').value,
            estatus: document.getElementById('filtroEstatus').value
        });
        fetch(baseUrl + '/api/planes-estudio?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                planesActuales = data || [];
                var tbody = document.getElementById('resultadosBodyPlanes');
                var container = document.getElementById('resultadosContainerPlanes');
                var estadoVacio = document.getElementById('estadoVacioPlanes');
                tbody.innerHTML = '';
                if (!planesActuales.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');
                planesActuales.forEach(function(p) {
                    var tr = document.createElement('tr');
                    tr.innerHTML =
                        '<td>' + (p.nombre || '-') + '</td>' +
                        '<td>' + (p.oferta_educativa ? p.oferta_educativa.nombre : '-') + '</td>' +
                        '<td>' + (p.tipo_periodo || '-') + '</td>' +
                        '<td>' + (p.criterio_evaluacion ? p.criterio_evaluacion.nombre : '-') + '</td>' +
                        '<td>' + (p.clave_plan || '-') + '</td>' +
                        '<td>' + (p.plan_activo ? 'Sí' : 'No') + '</td>' +
                        '<td class="text-center">' +
                        '<button type="button" class="btn btn-sm btn-soft-info me-1 btnEditarPlan" data-id="' + p.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                        '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarPlan" data-id="' + p.id + '" data-nombre="' + (p.nombre || '').replace(/"/g, '&quot;') + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                        '</td>';
                    tbody.appendChild(tr);
                });
                document.querySelectorAll('.btnEditarPlan').forEach(function(btn) {
                    btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                });
                document.querySelectorAll('.btnEliminarPlan').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 plan de estudios?',
                            text: 'Se eliminará el plan "' + nombre + '".',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Sí, eliminar'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                fetch(baseUrl + '/api/planes-estudio/' + id, {
                                    method: 'DELETE',
                                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
                                }).then(function(r) { return r.json(); }).then(function() { buscarPlanes(); 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('filtrosPlanesForm').addEventListener('submit', function(e) {
        e.preventDefault();
        buscarPlanes();
    });

    document.getElementById('btnRegistrarPlan').addEventListener('click', function() {
        document.getElementById('planId').value = '';
        document.getElementById('planNombre').value = '';
        document.getElementById('planModalidad').value = '';
        document.getElementById('planOfertaEducativa').value = '';
        document.getElementById('planDuracion').value = '';
        document.getElementById('planNumeroBloques').value = '';
        document.getElementById('planTipoPeriodo').value = 'Mensual';
        document.getElementById('planCriterioEvaluacion').value = '';
        document.getElementById('planEtiquetaBloques').value = '';
        document.getElementById('planRvoe').value = '';
        document.getElementById('planFechaRvoe').value = '';
        document.getElementById('planAutorizacion').value = '';
        document.getElementById('planClaveCentro').value = '';
        document.getElementById('planClaveProgramaDgp').value = '';
        if (document.getElementById('planClaveInstitucionDgp')) document.getElementById('planClaveInstitucionDgp').value = '';
        document.getElementById('planResponsableFirma').value = '';
        document.getElementById('planPuestoResponsable').value = '';
        document.getElementById('planResponsableExterno').value = '';
        document.getElementById('planPuestoResponsableExterno').value = '';
        document.getElementById('planIncorporada').value = '';
        document.getElementById('planPermitirInscripcionHasta').value = '1';
        document.getElementById('planPlanActivo').checked = true;
        document.getElementById('planCreditosMin').value = '';
        document.getElementById('planCreditosMax').value = '';
        document.getElementById('planTotalCreditos').value = '';
        document.getElementById('planTotalUnidadesObl').value = '';
        document.getElementById('planTotalUnidadesOpt').value = '';
        document.getElementById('planTotalUnidadesBaja').value = '';
        document.getElementById('planMaxUnidadesReprob').value = '';
        document.getElementById('planClavePlan').removeAttribute('readonly');
        document.getElementById('planClavePlan').value = '';
        fetch(baseUrl + '/api/planes-estudio/siguiente-clave').then(function(r) { return r.json(); }).then(function(data) {
            document.getElementById('planClavePlan').value = (data && data.clave) ? data.clave : '';
            document.getElementById('planClavePlan').setAttribute('readonly', 'readonly');
        }).catch(function() {
            document.getElementById('planClavePlan').setAttribute('readonly', 'readonly');
        });
        new bootstrap.Modal(document.getElementById('modalPlanEstudios')).show();
    });

    function abrirModalEditar(id) {
        var p = planesActuales.find(function(x) { return x.id === id; });
        if (!p) return;
        document.getElementById('planId').value = p.id;
        document.getElementById('planNombre').value = p.nombre || '';
        document.getElementById('planClavePlan').value = p.clave_plan || '';
        document.getElementById('planClavePlan').setAttribute('readonly', 'readonly');
        document.getElementById('planModalidad').value = p.modalidad || '';
        document.getElementById('planOfertaEducativa').value = p.oferta_educativa_id || '';
        document.getElementById('planDuracion').value = p.duracion_grados ?? '';
        document.getElementById('planNumeroBloques').value = p.numero_bloques || '';
        document.getElementById('planTipoPeriodo').value = p.tipo_periodo || 'Mensual';
        document.getElementById('planCriterioEvaluacion').value = p.criterio_evaluacion_id || '';
        document.getElementById('planClavePlan').value = p.clave_plan || '';
        document.getElementById('planEtiquetaBloques').value = p.etiqueta_bloques || '';
        document.getElementById('planRvoe').value = p.rvoe || '';
        document.getElementById('planFechaRvoe').value = p.fecha_rvoe ? p.fecha_rvoe.split('T')[0] : '';
        document.getElementById('planAutorizacion').value = p.autorizacion_reconocimiento || '';
        document.getElementById('planClaveCentro').value = p.clave_centro_trabajo || '';
        document.getElementById('planClaveProgramaDgp').value = p.clave_programa_dgp || '';
        if (document.getElementById('planClaveInstitucionDgp')) document.getElementById('planClaveInstitucionDgp').value = p.clave_institucion_dgp || '';
        document.getElementById('planResponsableFirma').value = p.responsable_firma_certificados || '';
        document.getElementById('planPuestoResponsable').value = p.puesto_responsable_firma || '';
        document.getElementById('planResponsableExterno').value = p.responsable_externo_firma || '';
        document.getElementById('planPuestoResponsableExterno').value = p.puesto_responsable_externo || '';
        document.getElementById('planIncorporada').value = p.incorporada_a || '';
        document.getElementById('planPermitirInscripcionHasta').value = p.permitir_inscripcion_hasta_grado ?? '1';
        document.getElementById('planPlanActivo').checked = !!p.plan_activo;
        document.getElementById('planCreditosMin').value = p.creditos_min_semestre ?? '';
        document.getElementById('planCreditosMax').value = p.creditos_max_semestre ?? '';
        document.getElementById('planTotalCreditos').value = p.total_creditos_carrera ?? '';
        document.getElementById('planTotalUnidadesObl').value = p.total_unidades_obligatorias ?? '';
        document.getElementById('planTotalUnidadesOpt').value = p.total_unidades_optativas ?? '';
        document.getElementById('planTotalUnidadesBaja').value = p.total_unidades_baja ?? '';
        document.getElementById('planMaxUnidadesReprob').value = p.max_unidades_reprobadas ?? '';
        new bootstrap.Modal(document.getElementById('modalPlanEstudios')).show();
    }

    function serializarPlan() {
        var id = document.getElementById('planId').value;
        var payload = {
            nombre: document.getElementById('planNombre').value.trim() || null,
            modalidad: document.getElementById('planModalidad').value.trim() || null,
            oferta_educativa_id: document.getElementById('planOfertaEducativa').value || null,
            duracion_grados: document.getElementById('planDuracion').value || null,
            numero_bloques: document.getElementById('planNumeroBloques').value.trim() || null,
            tipo_periodo: document.getElementById('planTipoPeriodo').value || null,
            criterio_evaluacion_id: document.getElementById('planCriterioEvaluacion').value || null,
            clave_plan: document.getElementById('planClavePlan').value.trim() || null,
            etiqueta_bloques: document.getElementById('planEtiquetaBloques').value.trim() || null,
            rvoe: document.getElementById('planRvoe').value.trim() || null,
            fecha_rvoe: document.getElementById('planFechaRvoe').value || null,
            autorizacion_reconocimiento: document.getElementById('planAutorizacion').value.trim() || null,
            clave_centro_trabajo: document.getElementById('planClaveCentro').value.trim() || null,
            clave_programa_dgp: document.getElementById('planClaveProgramaDgp').value.trim() || null,
            clave_institucion_dgp: (document.getElementById('planClaveInstitucionDgp') && document.getElementById('planClaveInstitucionDgp').value.trim()) || null,
            responsable_firma_certificados: document.getElementById('planResponsableFirma').value.trim() || null,
            puesto_responsable_firma: document.getElementById('planPuestoResponsable').value.trim() || null,
            responsable_externo_firma: document.getElementById('planResponsableExterno').value.trim() || null,
            puesto_responsable_externo: document.getElementById('planPuestoResponsableExterno').value.trim() || null,
            incorporada_a: document.getElementById('planIncorporada').value.trim() || null,
            permitir_inscripcion_hasta_grado: document.getElementById('planPermitirInscripcionHasta').value || null,
            plan_activo: document.getElementById('planPlanActivo').checked,
            creditos_min_semestre: document.getElementById('planCreditosMin').value || null,
            creditos_max_semestre: document.getElementById('planCreditosMax').value || null,
            total_creditos_carrera: document.getElementById('planTotalCreditos').value || null,
            total_unidades_obligatorias: document.getElementById('planTotalUnidadesObl').value || null,
            total_unidades_optativas: document.getElementById('planTotalUnidadesOpt').value || null,
            total_unidades_baja: document.getElementById('planTotalUnidadesBaja').value || null,
            max_unidades_reprobadas: document.getElementById('planMaxUnidadesReprob').value || null
        };
        return { id: id, payload: payload };
    }

    function validarModalPlan() {
        var errores = [];
        if (!document.getElementById('planNombre').value.trim()) errores.push('Nombre del plan');
        if (!document.getElementById('planModalidad').value.trim()) errores.push('Modalidad');
        if (!document.getElementById('planOfertaEducativa').value) errores.push('Oferta educativa');
        var dur = document.getElementById('planDuracion').value;
        if (dur === '' || dur === null || parseInt(dur, 10) < 0) errores.push('Duración (grados)');
        if (!document.getElementById('planNumeroBloques').value.trim()) errores.push('Número de bloques');
        if (!document.getElementById('planTipoPeriodo').value) errores.push('Tipo de periodo');
        if (!document.getElementById('planCriterioEvaluacion').value) errores.push('Criterio de evaluación');
        if (!document.getElementById('planClavePlan').value.trim()) errores.push('Clave de plan (se asigna automáticamente al registrar)');
        if (!document.getElementById('planEtiquetaBloques').value.trim()) errores.push('Etiqueta bloques');
        return errores;
    }

    document.getElementById('btnGuardarPlan').addEventListener('click', function() {
        var errores = validarModalPlan();
        if (errores.length) {
            Swal.fire({ icon: 'warning', title: 'Campos requeridos', html: 'Complete los siguientes campos: <br><strong>' + errores.join(', ') + '</strong>' });
            return;
        }
        var s = serializarPlan();
        var url = s.id ? baseUrl + '/api/planes-estudio/' + s.id : baseUrl + '/api/planes-estudio';
        var method = s.id ? 'PUT' : 'POST';
        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
            body: JSON.stringify(s.payload)
        }).then(function(r) { return r.json(); }).then(function(res) {
            if (res.success) {
                bootstrap.Modal.getInstance(document.getElementById('modalPlanEstudios')).hide();
                buscarPlanes();
                Swal.fire({ icon: 'success', title: 'Guardado correctamente', text: 'El plan de estudios se ha guardado correctamente.' });
            }
        }).catch(function() { Swal.fire({ icon: 'error', title: 'Error al guardar' }); });
    });

    cargarSelects();
    </script>
@endsection