@extends('layouts.master')

@section('title')
    Ciclos/periodos
@endsection

@section('content')
    @component('components.breadcrumb')
        @slot('li_1') Configuración @endslot
        @slot('li_2') Mi institución @endslot
        @slot('title') Ciclos/periodos @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 los periodos registrados en la aplicación.
                    </p>

                    <form id="formFiltrosCiclos" class="needs-validation" novalidate>
                        <div class="row g-3">
                            <div class="col-md-2">
                                <label for="filtroAnoInicio" class="form-label">* Año de inicio</label>
                                <input type="number" class="form-control" id="filtroAnoInicio" placeholder="Ej: 2026" min="2000" max="2100" step="1">
                            </div>
                            <div class="col-md-2">
                                <label for="filtroAnoFin" class="form-label">* Año de fin</label>
                                <input type="number" class="form-control" id="filtroAnoFin" placeholder="Ej: 2026" min="2000" max="2100" step="1">
                            </div>
                            <div class="col-md-3">
                                <label for="filtroFechaInicio" class="form-label">Fecha administrativa de inicio</label>
                                <input type="date" class="form-control" id="filtroFechaInicio">
                            </div>
                            <div class="col-md-3">
                                <label for="filtroFechaFin" class="form-label">Fecha administrativa de fin</label>
                                <input type="date" class="form-control" id="filtroFechaFin">
                            </div>
                            <div class="col-md-2">
                                <label for="filtroPlanCiclo" class="form-label">Plan</label>
                                <select class="form-select" id="filtroPlanCiclo">
                                    <option value="">-- Todos --</option>
                                    <option value="Trimestral">Trimestral</option>
                                    <option value="Cuatrimestral">Cuatrimestral</option>
                                    <option value="Semestral">Semestral</option>
                                    <option value="Anual">Anual</option>
                                    <option value="Mensual">Mensual</option>
                                    <option value="Bimestral">Bimestral</option>
                                </select>
                            </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="btnRegistrarCiclo">
                                        <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="seccionConsultarCiclos" class="mb-0 me-2">Sección a consultar:</label>
                            <select class="form-select form-select-sm" id="seccionConsultarCiclos" style="width: 220px;">
                                <option value="listado">Listado de ciclos/periodos</option>
                            </select>
                        </div>
                    </div>

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

                    <!-- Tabla de resultados -->
                    <div id="resultadosContainerCiclos" class="d-none">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th>Nombre</th>
                                        <th>Plan</th>
                                        <th>Fecha inicio</th>
                                        <th>Fecha fin</th>
                                        <th>Estatus</th>
                                        <th class="text-center">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="resultadosBodyCiclos"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('configuracion.mi-institucion.partials.modal-ciclo-periodo')
@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 cargarPlanSelect() {}
        cargarPlanSelect();

        function buscarCiclos() {
            var params = new URLSearchParams();
            var anoInicio = document.getElementById('filtroAnoInicio').value.trim();
            var anoFin = document.getElementById('filtroAnoFin').value.trim();
            var fechaInicio = document.getElementById('filtroFechaInicio').value;
            var fechaFin = document.getElementById('filtroFechaFin').value;
            var plan = document.getElementById('filtroPlanCiclo').value;
            if (anoInicio) params.set('ano_inicio', anoInicio);
            if (anoFin) params.set('ano_fin', anoFin);
            if (fechaInicio) params.set('fecha_inicio', fechaInicio);
            if (fechaFin) params.set('fecha_fin', fechaFin);
            if (plan) params.set('plan', plan);

            fetch(baseUrl + '/api/ciclos/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('resultadosBodyCiclos');
                    var container = document.getElementById('resultadosContainerCiclos');
                    var estadoVacio = document.getElementById('estadoVacioCiclos');

                    tbody.innerHTML = '';
                    if (listado.length === 0) {
                        container.classList.add('d-none');
                        estadoVacio.classList.remove('d-none');
                        var msgEl = document.getElementById('estadoVacioCiclosMensaje');
                        if (msgEl) msgEl.textContent = 'No se encontraron ciclos/periodos con los filtros seleccionados.';
                        return;
                    }
                    var msgElInit = document.getElementById('estadoVacioCiclosMensaje');
                    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(c) {
                        var tr = document.createElement('tr');
                        var nombre = (c.nombre || '-').replace(/</g, '&lt;').replace(/"/g, '&quot;');
                        var plan = (c.plan || '-').replace(/</g, '&lt;');
                        var fi = c.fecha_inicio ? (typeof c.fecha_inicio === 'string' ? c.fecha_inicio.substring(0, 10) : c.fecha_inicio) : '-';
                        var ff = c.fecha_fin ? (typeof c.fecha_fin === 'string' ? c.fecha_fin.substring(0, 10) : c.fecha_fin) : '-';
                        var estatus = c.activo !== false ? '<span class="badge bg-success">Activo</span>' : '<span class="badge bg-secondary">Inactivo</span>';
                        tr.innerHTML =
                            '<td>' + nombre + '</td>' +
                            '<td>' + plan + '</td>' +
                            '<td>' + fi + '</td>' +
                            '<td>' + ff + '</td>' +
                            '<td>' + estatus + '</td>' +
                            '<td class="text-center">' +
                            '<button type="button" class="btn btn-sm btn-soft-primary me-1 btnEditarCiclo" data-id="' + c.id + '" title="Editar"><i class="ri-pencil-line"></i></button>' +
                            '<button type="button" class="btn btn-sm btn-soft-danger btnEliminarCiclo" data-id="' + c.id + '" data-nombre="' + nombre + '" title="Eliminar"><i class="ri-delete-bin-line"></i></button>' +
                            '</td>';
                        tbody.appendChild(tr);
                    });

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

        function eliminarCiclo(id) {
            fetch(baseUrl + '/api/ciclos/' + 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 || 'Ciclo/periodo eliminado correctamente.' });
                    buscarCiclos();
                } 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/ciclos/' + id, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(c) {
                    document.getElementById('cicloId').value = c.id;
                    document.getElementById('modalCicloTitulo').textContent = 'Editar periodo';
                    document.getElementById('cicloNombre').value = c.nombre || '';
                    document.getElementById('cicloPlan').value = c.plan || '';
                    document.getElementById('cicloAbreviatura').value = c.abreviatura || '';
                    document.getElementById('cicloNumeroCiclo').value = c.numero_ciclo_escolar || '';
                    document.getElementById('cicloFechaOficialInicio').value = c.fecha_oficial_inicio ? (typeof c.fecha_oficial_inicio === 'string' ? c.fecha_oficial_inicio.substring(0, 10) : c.fecha_oficial_inicio) : '';
                    document.getElementById('cicloFechaOficialFin').value = c.fecha_oficial_fin ? (typeof c.fecha_oficial_fin === 'string' ? c.fecha_oficial_fin.substring(0, 10) : c.fecha_oficial_fin) : '';
                    document.getElementById('cicloFechaInicio').value = c.fecha_inicio ? (typeof c.fecha_inicio === 'string' ? c.fecha_inicio.substring(0, 10) : c.fecha_inicio) : '';
                    document.getElementById('cicloFechaFin').value = c.fecha_fin ? (typeof c.fecha_fin === 'string' ? c.fecha_fin.substring(0, 10) : c.fecha_fin) : '';
                    document.getElementById('cicloFechaLimiteReinscripciones').value = c.fecha_limite_reinscripciones ? (typeof c.fecha_limite_reinscripciones === 'string' ? c.fecha_limite_reinscripciones.substring(0, 10) : c.fecha_limite_reinscripciones) : '';
                    document.getElementById('cicloFechaLimiteBajaAlumno').value = c.fecha_limite_baja_alumno ? (typeof c.fecha_limite_baja_alumno === 'string' ? c.fecha_limite_baja_alumno.substring(0, 10) : c.fecha_limite_baja_alumno) : '';
                    document.getElementById('cicloFechaLimiteBajaAsignatura').value = c.fecha_limite_baja_asignatura ? (typeof c.fecha_limite_baja_asignatura === 'string' ? c.fecha_limite_baja_asignatura.substring(0, 10) : c.fecha_limite_baja_asignatura) : '';
                    document.getElementById('cicloActivo').checked = c.activo !== false;
                    var modal = new bootstrap.Modal(document.getElementById('modalCicloPeriodo'));
                    modal.show();
                })
                .catch(function() {
                    if (typeof Swal !== 'undefined') Swal.fire({ icon: 'error', title: 'Error', text: 'No se pudo cargar el ciclo/periodo.' });
                });
        }

        function limpiarModal() {
            document.getElementById('cicloId').value = '';
            document.getElementById('modalCicloTitulo').textContent = 'Agregar periodo';
            document.getElementById('cicloNombre').value = '';
            document.getElementById('cicloPlan').value = '';
            document.getElementById('cicloAbreviatura').value = '';
            document.getElementById('cicloNumeroCiclo').value = '';
            document.getElementById('cicloFechaOficialInicio').value = '';
            document.getElementById('cicloFechaOficialFin').value = '';
            document.getElementById('cicloFechaInicio').value = '';
            document.getElementById('cicloFechaFin').value = '';
            document.getElementById('cicloFechaLimiteReinscripciones').value = '';
            document.getElementById('cicloFechaLimiteBajaAlumno').value = '';
            document.getElementById('cicloFechaLimiteBajaAsignatura').value = '';
            document.getElementById('cicloActivo').checked = true;
        }

        document.getElementById('formFiltrosCiclos').addEventListener('submit', function(e) {
            e.preventDefault();
            buscarCiclos();
        });

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

        document.getElementById('btnRegistrarCiclo').addEventListener('click', function() {
            limpiarModal();
            document.getElementById('modalCicloTitulo').textContent = 'Agregar periodo';
            var modal = new bootstrap.Modal(document.getElementById('modalCicloPeriodo'));
            modal.show();
        });

        document.getElementById('formModalCiclo').addEventListener('submit', function(e) {
            e.preventDefault();
            var id = document.getElementById('cicloId').value.trim();
            var nombre = document.getElementById('cicloNombre').value.trim();
            var plan = document.getElementById('cicloPlan').value.trim();
            var abreviatura = document.getElementById('cicloAbreviatura').value.trim();
            var numeroCiclo = document.getElementById('cicloNumeroCiclo').value.trim();
            var fechaOficialInicio = document.getElementById('cicloFechaOficialInicio').value;
            var fechaOficialFin = document.getElementById('cicloFechaOficialFin').value;
            var fechaInicio = document.getElementById('cicloFechaInicio').value;
            var fechaFin = document.getElementById('cicloFechaFin').value;
            var fechaLimiteReinsc = document.getElementById('cicloFechaLimiteReinscripciones').value;
            var fechaLimiteBajaAlumno = document.getElementById('cicloFechaLimiteBajaAlumno').value;
            var fechaLimiteBajaAsig = document.getElementById('cicloFechaLimiteBajaAsignatura').value;
            if (!nombre) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El nombre oficial es obligatorio.' });
                return;
            }
            if (!plan) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El Plan es obligatorio.' });
                return;
            }
            if (!abreviatura) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La abreviatura es obligatoria.' });
                return;
            }
            if (!numeroCiclo) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'El No. de ciclo escolar es obligatorio.' });
                return;
            }
            if (!fechaInicio) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La fecha administrativa de inicio es obligatoria.' });
                return;
            }
            if (!fechaFin) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La fecha administrativa de fin es obligatoria.' });
                return;
            }
            if (!fechaOficialInicio) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La fecha oficial de inicio es obligatoria.' });
                return;
            }
            if (!fechaOficialFin) {
                if (typeof Swal !== 'undefined') Swal.fire({ icon: 'warning', title: 'Campo requerido', text: 'La fecha oficial de término es obligatoria.' });
                return;
            }

            var payload = {
                nombre: nombre,
                plan: plan || null,
                abreviatura: abreviatura || null,
                numero_ciclo_escolar: numeroCiclo || null,
                fecha_oficial_inicio: fechaOficialInicio || null,
                fecha_oficial_fin: fechaOficialFin || null,
                fecha_inicio: fechaInicio,
                fecha_fin: fechaFin,
                fecha_limite_reinscripciones: fechaLimiteReinsc || null,
                fecha_limite_baja_alumno: fechaLimiteBajaAlumno || null,
                fecha_limite_baja_asignatura: fechaLimiteBajaAsig || null,
                activo: document.getElementById('cicloActivo').checked
            };

            var url = baseUrl + '/api/ciclos';
            var method = 'POST';
            if (id) {
                url = baseUrl + '/api/ciclos/' + 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(payload)
            }).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 || 'Ciclo/periodo guardado correctamente.' });
                    bootstrap.Modal.getInstance(document.getElementById('modalCicloPeriodo')).hide();
                    limpiarModal();
                    if (!document.getElementById('resultadosContainerCiclos').classList.contains('d-none')) buscarCiclos();
                } 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