@extends('layouts.master')

@section('title')
    Asignaturas
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Control Escolar @endslot
        @slot('title') Asignaturas @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-open-line me-2"></i>Asignaturas
                    </h5>
                    <p class="text-muted mb-4">Usa el siguiente formulario para mostrar las asignaturas registradas en la aplicación.</p>
                    <form id="filtrosAsignaturasForm">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="filtroNombreClave" class="form-label">Nombre o Clave</label>
                                <input type="text" class="form-control" id="filtroNombreClave" placeholder="Nombre o clave de la asignatura">
                            </div>
                            <div class="col-md-4">
                                <label for="filtroPlanEstudio" class="form-label">Plan de estudios (referencia)</label>
                                <select class="form-select" id="filtroPlanEstudio">
                                    <option value="">-- Sin planes de estudio --</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="btnRegistrarAsignatura">
                                        <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 class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
                        <div class="d-flex align-items-center gap-2">
                            <label class="mb-0 me-2">Resultados por página:</label>
                            <select class="form-select form-select-sm" id="resultadosPorPagina" style="width: auto;">
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                        <div id="controlesExportar" class="d-none d-flex align-items-center gap-2">
                            <button type="button" class="btn btn-soft-secondary btn-sm" id="btnImprimir"><i class="ri-printer-line me-1"></i>Imprimir</button>
                            <button type="button" class="btn btn-soft-secondary btn-sm" id="btnPdf"><i class="ri-file-pdf-line me-1"></i>PDF</button>
                            <button type="button" class="btn btn-soft-secondary btn-sm" id="btnExcel"><i class="ri-file-excel-2-line me-1"></i>Excel</button>
                        </div>
                    </div>
                    <div id="estadoVacioAsignaturas" class="text-center py-5">
                        <p class="text-muted mb-0">No se encontraron resultados.</p>
                    </div>
                    <div id="resultadosContainerAsignaturas" class="d-none">
                        <div class="table-responsive" id="tablaAsignaturasParaImpresion">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Clave</th>
                                        <th>Nombre</th>
                                        <th>Tipo</th>
                                        <th>Créditos</th>
                                        <th>Plan de estudios</th>
                                        <th>Forma en que se imparte</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyAsignaturas"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

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

    function cargarPlanesSelect() {
        fetch(baseUrl + '/api/asignaturas/planes').then(function(r) { return r.json(); }).then(function(data) {
            var sel = document.getElementById('filtroPlanEstudio');
            var selModal = document.getElementById('asignaturaPlanEstudio');
            var opts = (data || []).map(function(p) {
                var nombre = p.nombre || p.clave_plan || 'Plan ' + p.id;
                return '<option value="' + p.id + '">' + nombre + '</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;
        });
    }

    function buscarAsignaturas() {
        var params = new URLSearchParams({
            nombre_clave: document.getElementById('filtroNombreClave').value.trim(),
            plan_estudio_id: document.getElementById('filtroPlanEstudio').value
        });
        fetch(baseUrl + '/api/asignaturas?' + params, { headers: { 'Accept': 'application/json' } })
            .then(function(r) { return r.json(); })
            .then(function(data) {
                asignaturasActuales = data || [];
                var tbody = document.getElementById('resultadosBodyAsignaturas');
                var container = document.getElementById('resultadosContainerAsignaturas');
                var estadoVacio = document.getElementById('estadoVacioAsignaturas');
                var controles = document.getElementById('controlesExportar');
                tbody.innerHTML = '';
                if (!asignaturasActuales.length) {
                    container.classList.add('d-none');
                    controles.classList.add('d-none');
                    estadoVacio.classList.remove('d-none');
                    estadoVacio.querySelector('.text-muted').textContent = 'No se encontraron resultados.';
                    return;
                }
                estadoVacio.classList.add('d-none');
                container.classList.remove('d-none');
                controles.classList.remove('d-none');
                asignaturasActuales.forEach(function(m) {
                    var tr = document.createElement('tr');
                    tr.innerHTML =
                        '<td>' + (m.clave || '-') + '</td>' +
                        '<td>' + (m.nombre || '-') + '</td>' +
                        '<td>' + (m.tipo || 'Obligatoria') + '</td>' +
                        '<td>' + (m.creditos ?? '-') + '</td>' +
                        '<td>' + (m.plan_estudio ? (m.plan_estudio.nombre || m.plan_estudio.clave_plan || '-') : '-') + '</td>' +
                        '<td>' + (m.forma_imparte || '-') + '</td>' +
                        '<td class="text-center">' +
                        '<button type="button" class="btn btn-sm btn-soft-info me-1 btnEditarAsignatura" data-id="' + m.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                        '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarAsignatura" data-id="' + m.id + '" data-nombre="' + (m.nombre || '').replace(/"/g, '&quot;') + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                        '</td>';
                    tbody.appendChild(tr);
                });
                document.querySelectorAll('.btnEditarAsignatura').forEach(function(btn) {
                    btn.addEventListener('click', function() { abrirModalEditar(parseInt(this.getAttribute('data-id'), 10)); });
                });
                document.querySelectorAll('.btnEliminarAsignatura').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 asignatura?',
                            text: 'Se eliminará la asignatura "' + nombre + '".',
                            icon: 'warning',
                            showCancelButton: true,
                            confirmButtonColor: '#d33',
                            cancelButtonColor: '#3085d6',
                            confirmButtonText: 'Sí, eliminar'
                        }).then(function(result) {
                            if (result.isConfirmed) {
                                fetch(baseUrl + '/api/asignaturas/' + id, {
                                    method: 'DELETE',
                                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf }
                                }).then(function(r) { return r.json(); }).then(function() { buscarAsignaturas(); Swal.fire({ icon: 'success', title: 'Eliminada' }); }).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('filtrosAsignaturasForm').addEventListener('submit', function(e) {
        e.preventDefault();
        buscarAsignaturas();
    });

    document.getElementById('btnImprimir') && document.getElementById('btnImprimir').addEventListener('click', function() { window.print(); });
    document.getElementById('btnPdf') && document.getElementById('btnPdf').addEventListener('click', function() {
        var w = window.open('', '_blank');
        w.document.write('<html><head><title>Asignaturas</title></head><body>' + document.getElementById('tablaAsignaturasParaImpresion').innerHTML + '</body></html>');
        w.document.close();
        w.print();
        w.onafterprint = function() { w.close(); };
    });
    document.getElementById('btnExcel') && document.getElementById('btnExcel').addEventListener('click', function() {
        var csv = 'Clave;Nombre;Tipo;Créditos;Plan de estudios;Forma en que se imparte\n';
        asignaturasActuales.forEach(function(m) {
            var plan = m.plan_estudio ? (m.plan_estudio.nombre || m.plan_estudio.clave_plan || '') : '';
            csv += (m.clave || '') + ';' + (m.nombre || '') + ';' + (m.tipo || '') + ';' + (m.creditos ?? '') + ';' + plan + ';' + (m.forma_imparte || '') + '\n';
        });
        var a = document.createElement('a');
        a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent('\uFEFF' + csv);
        a.download = 'asignaturas.csv';
        a.click();
    });

    document.getElementById('btnRegistrarAsignatura').addEventListener('click', function() {
        document.getElementById('asignaturaId').value = '';
        document.getElementById('asignaturaNombre').value = '';
        document.getElementById('asignaturaTipo').value = 'Obligatoria';
        document.getElementById('asignaturaPlanEstudio').value = '';
        document.getElementById('asignaturaCreditos').value = '';
        document.getElementById('asignaturaFormaImparte').value = 'Es una clase, en aula y horario definidos';
        var claveInput = document.getElementById('asignaturaClave');
        claveInput.removeAttribute('readonly');
        claveInput.value = '';
        claveInput.setAttribute('readonly', 'readonly');
        fetch(baseUrl + '/api/asignaturas/siguiente-clave').then(function(r) { return r.json(); }).then(function(data) {
            claveInput.value = (data && data.clave) ? data.clave : '';
        }).catch(function() {});
        new bootstrap.Modal(document.getElementById('modalAsignatura')).show();
    });

    function abrirModalEditar(id) {
        var m = asignaturasActuales.find(function(x) { return x.id === id; });
        if (!m) return;
        document.getElementById('asignaturaId').value = m.id;
        document.getElementById('asignaturaNombre').value = m.nombre || '';
        document.getElementById('asignaturaClave').value = m.clave || '';
        document.getElementById('asignaturaClave').setAttribute('readonly', 'readonly');
        document.getElementById('asignaturaTipo').value = m.tipo || 'Obligatoria';
        document.getElementById('asignaturaPlanEstudio').value = m.plan_estudio_id || '';
        document.getElementById('asignaturaCreditos').value = m.creditos ?? '';
        document.getElementById('asignaturaFormaImparte').value = m.forma_imparte || 'Es una clase, en aula y horario definidos';
        new bootstrap.Modal(document.getElementById('modalAsignatura')).show();
    }

    document.getElementById('btnGuardarAsignatura').addEventListener('click', function() {
        var errores = [];
        if (!document.getElementById('asignaturaNombre').value.trim()) errores.push('Nombre');
        if (!document.getElementById('asignaturaClave').value.trim()) errores.push('Clave');
        var creditos = document.getElementById('asignaturaCreditos').value;
        if (creditos === '' || creditos === null || isNaN(parseInt(creditos, 10)) || parseInt(creditos, 10) < 0) errores.push('Créditos (número mayor o igual a 0)');
        if (!document.getElementById('asignaturaTipo').value) errores.push('Tipo');
        if (!document.getElementById('asignaturaFormaImparte').value) errores.push('Forma en que se imparte');
        if (errores.length) {
            Swal.fire({ icon: 'warning', title: 'Campos requeridos', html: 'Complete correctamente: <br><strong>' + errores.join(', ') + '</strong>' });
            return;
        }
        var id = document.getElementById('asignaturaId').value;
        var payload = {
            nombre: document.getElementById('asignaturaNombre').value.trim(),
            clave: document.getElementById('asignaturaClave').value.trim(),
            tipo: document.getElementById('asignaturaTipo').value,
            plan_estudio_id: document.getElementById('asignaturaPlanEstudio').value || null,
            creditos: parseInt(document.getElementById('asignaturaCreditos').value, 10) || 0,
            forma_imparte: document.getElementById('asignaturaFormaImparte').value || null
        };
        var url = id ? baseUrl + '/api/asignaturas/' + id : baseUrl + '/api/asignaturas';
        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(data) { return { ok: r.ok, data: data }; });
        }).then(function(result) {
            if (result.ok && result.data.success) {
                bootstrap.Modal.getInstance(document.getElementById('modalAsignatura')).hide();
                buscarAsignaturas();
                Swal.fire({ icon: 'success', title: 'Guardado correctamente', text: 'La asignatura se ha guardado correctamente.' });
            } else if (result.data && result.data.errors) {
                var msg = Object.values(result.data.errors).flat().join(' ');
                Swal.fire({ icon: 'error', title: 'Error', text: msg || 'No se pudo guardar.' });
            } else {
                Swal.fire({ icon: 'error', title: 'Error', text: result.data.message || 'No se pudo guardar.' });
            }
        }).catch(function() { Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo guardar.' }); });
    });

    cargarPlanesSelect();
    </script>
@endsection