@extends('layouts.master')

@section('title')
    Ofertas educativas
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Configuración @endslot
        @slot('li_2') Mi institución @endslot
        @slot('title') Ofertas educativas @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 las ofertas educativas registradas en la aplicación.
                    </p>

                    <form id="formFiltrosOfertas" class="needs-validation" novalidate>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="filtroNombreOferta" class="form-label">Nombre</label>
                                <input type="text" class="form-control" id="filtroNombreOferta" placeholder="Ingresa nombre de la oferta educativa">
                            </div>
                            <div class="col-md-4"></div>
                            <div class="col-md-4"></div>
                        </div>

                        <div class="row mt-4">
                            <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="btnRegistrarOferta">
                                        <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="seccionConsultarOfertas" class="mb-0 me-2">Sección a consultar:</label>
                            <select class="form-select form-select-sm" id="seccionConsultarOfertas" style="width: 220px;">
                                <option value="listado">Listado de ofertas educativas</option>
                            </select>
                        </div>
                    </div>

                    <!-- Estado vacío -->
                    <div id="estadoVacioOfertas" 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="estadoVacioOfertasMensaje" class="text-muted mb-0">Usa los filtros para realizar una búsqueda.</p>
                    </div>

                    <!-- Tabla de resultados -->
                    <div id="resultadosContainerOfertas" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyOfertas"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('configuracion.mi-institucion.partials.modal-oferta-educativa')
@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 buscarOfertas() {
            var params = new URLSearchParams();
            var nombre = document.getElementById('filtroNombreOferta').value.trim();
            if (nombre) params.set('nombre', nombre);

            fetch(baseUrl + '/api/ofertas-educativas/list?' + 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('resultadosBodyOfertas');
                    var container = document.getElementById('resultadosContainerOfertas');
                    var estadoVacio = document.getElementById('estadoVacioOfertas');

                    tbody.innerHTML = '';
                    if (listado.length === 0) {
                        container.classList.add('d-none');
                        estadoVacio.classList.remove('d-none');
                        var msgEl = document.getElementById('estadoVacioOfertasMensaje');
                        if (msgEl) msgEl.textContent = 'No se encontraron ofertas educativas con los filtros seleccionados.';
                        return;
                    }
                    var msgElInit = document.getElementById('estadoVacioOfertasMensaje');
                    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(o) {
                        var tr = document.createElement('tr');
                        var nombre = (o.nombre || '-').replace(/</g, '&lt;').replace(/"/g, '&quot;');
                        tr.innerHTML =
                            '<td>' + nombre + '</td>' +
                            '<td class="text-center">' +
                            '<button type="button" class="btn btn-sm btn-soft-primary me-1 btnEditarOferta" data-id="' + o.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                            '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarOferta" data-id="' + o.id + '" data-nombre="' + nombre + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                            '</td>';
                        tbody.appendChild(tr);
                    });

                    document.querySelectorAll('.btnEditarOferta').forEach(function(btn) {
                        btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                    });
                    document.querySelectorAll('.btnEliminarOferta').forEach(function(btn) {
                        btn.addEventListener('click', function() {
                            var id = parseInt(this.getAttribute('data-id'), 10);
                            var nombre = this.getAttribute('data-nombre');
                            if (typeof Swal === 'undefined') {
                                if (confirm('¿Eliminar la oferta educativa "' + nombre + '"?')) eliminarOferta(id);
                                return;
                            }
                            Swal.fire({
                                title: '¿Eliminar oferta educativa?',
                                html: 'Se eliminará la oferta <strong>' + nombre + '</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) eliminarOferta(id);
                            });
                        });
                    });
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el listado.' });
                });
        }

        function eliminarOferta(id) {
            fetch(baseUrl + '/api/ofertas-educativas/' + 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 || 'Oferta educativa eliminada correctamente.' });
                    buscarOfertas();
                } 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/ofertas-educativas/' + id, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(o) {
                    document.getElementById('ofertaId').value = o.id;
                    document.getElementById('modalOfertaTitulo').textContent = 'Editar oferta educativa';
                    document.getElementById('ofertaNombre').value = o.nombre || '';
                    var modal = new bootstrap.Modal(document.getElementById('modalOfertaEducativa'));
                    modal.show();
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar la oferta educativa.' });
                });
        }

        function limpiarModal() {
            document.getElementById('ofertaId').value = '';
            document.getElementById('modalOfertaTitulo').textContent = 'Registrar oferta educativa';
            document.getElementById('ofertaNombre').value = '';
        }

        document.getElementById('formFiltrosOfertas').addEventListener('submit', function(e) {
            e.preventDefault();
            buscarOfertas();
        });

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

        document.getElementById('btnRegistrarOferta').addEventListener('click', function() {
            limpiarModal();
            document.getElementById('modalOfertaTitulo').textContent = 'Registrar oferta educativa';
            var modal = new bootstrap.Modal(document.getElementById('modalOfertaEducativa'));
            modal.show();
        });

        document.getElementById('formModalOferta').addEventListener('submit', function(e) {
            e.preventDefault();
            var id = document.getElementById('ofertaId').value.trim();
            var nombre = document.getElementById('ofertaNombre').value.trim();
            if (!nombre) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre de la oferta educativa es obligatorio.' });
                return;
            }

            var url = baseUrl + '/api/ofertas-educativas';
            var method = 'POST';
            if (id) {
                url = baseUrl + '/api/ofertas-educativas/' + 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({ nombre: nombre })
            }).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 || 'Oferta educativa guardada correctamente.' });
                    bootstrap.Modal.getInstance(document.getElementById('modalOfertaEducativa')).hide();
                    limpiarModal();
                    if (!document.getElementById('resultadosContainerOfertas').classList.contains('d-none')) buscarOfertas();
                } 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