@extends('layouts.app')

@section('title', 'Dashboard - Reserva de Salas')

@push('styles')
<style>
    .tabla-piso-container { width: 100%; overflow-x: auto; }
    .tabla-piso { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
    .tabla-piso th, .tabla-piso td { border: 1px solid #dcdcdc; padding: 6px 10px; text-align: center; }
    .tabla-piso thead th.col-hora { background-color: #dbe9f6; color: #555; font-weight: 600; width: 120px; }
    .tabla-piso thead th.col-sala { background-color: #dbe9f6; color: #555; text-align: left; padding: 10px 14px; }
    .sala-titulo { font-size: 0.95rem; font-weight: 700; color: #444; }
    .sala-subdetalles { font-size: 0.78rem; color: #666; font-weight: normal; margin-top: 2px; }
    .td-hora { background-color: #e9f0f8; color: #333; font-weight: 500; white-space: nowrap; }
    .bloque-no-disponible { background-color: #fde8e8 !important; color: #cc0000; font-size: 0.8rem; cursor: not-allowed; }
    .bloque-disponible { background-color: #ffffff; cursor: pointer; }
    .bloque-disponible:hover { background-color: #f0f7ff; }

    .leyenda-box { padding: 8px 12px; border-radius: 4px; font-weight: 600; font-size: 0.82rem; text-align: center; }
    .leyenda-pregrado { background-color: #F5E5C9; color: #7A5B27; }
    .leyenda-postgrado { background-color: #C3E6CB; color: #155724; }
    .leyenda-extension { background-color: #F0F3B2; color: #6C7019; }
    .leyenda-actividades { background-color: #E2D9F3; color: #533F83; }
    .leyenda-pendiente { background-color: #A3E4FF; color: #176585; }

    @media print {
        @page { size: landscape; margin: 0.8cm; }
        body * { visibility: hidden !important; }
        #areaImpresion, #areaImpresion * { visibility: visible !important; }
        #areaImpresion { position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
        .no-print { display: none !important; }
    }

    #formSimularUsuario .selectize-control {
        width: 280px !important;
        display: inline-block !important;
    }

    #formSimularUsuario .selectize-input {
        background-color: #ffffff !important;
        border-radius: 6px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        color: #333333 !important;
        box-shadow: none !important;
        border: 1px solid #ced4da !important;
    }

    #formSimularUsuario .selectize-dropdown {
        width: 320px !important;
        font-size: 0.85rem !important;
        border-radius: 6px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        z-index: 1050 !important;
    }

    #formSimularUsuario .selectize-dropdown .option {
        padding: 8px 12px !important;
        line-height: 1.3 !important;
    }
</style>
@endpush

@section('content')
    @php
        $userActivo = \App\Models\User::obtenerUsuarioActivo();
        $rolUser = strtoupper(trim($userActivo->rol ?? 'ESTUDIANTE'));
        $esEstudiante = str_contains($rolUser, 'ESTUDIANTE');
        $nombreComp = $userActivo ? ($userActivo->nombre_completo ?? $userActivo->nombres ?? '') : '';
        $correoComp = $userActivo ? ($userActivo->correo_electronico ?? $userActivo->email ?? '') : '';
    @endphp

    <div class="row align-items-center mb-4 no-print">
        <div class="col-md-7">
            <h3 class="fw-bold text-dark mb-1">Reserva de Salas</h3>
            <p class="text-muted mb-0">Selecciona un rango de horas en la agenda o usa el botón para solicitar una reserva.</p>
        </div>
        <div class="col-md-5 text-md-end mt-3 mt-md-0">
            {{-- <button id="btnNuevaReserva" class="btn btn-primary px-4 py-2 rounded-pill shadow-sm" style="background-color: #435EBE;">
                <i class="bi bi-plus-lg me-1"></i> Nueva Reserva
            </button> --}}
        </div>
    </div>

    <div class="row g-3 mb-4 no-print">
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card card-custom border-0 bg-white p-3 d-flex flex-row align-items-center shadow-sm">
                <div class="rounded-circle bg-primary bg-opacity-10 p-3 text-primary me-3"><i class="bi bi-calendar-check fs-4"></i></div>
                <div>
                    <span class="text-muted small">Mis Reservas Activas</span>
                    <h4 class="fw-bold mb-0" id="stat-mis-reservas">--</h4>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card card-custom border-0 bg-white p-3 d-flex flex-row align-items-center shadow-sm">
                <div class="rounded-circle bg-success bg-opacity-10 p-3 text-success me-3"><i class="bi bi-door-open fs-4"></i></div>
                <div>
                    <span class="text-muted small">Salas Disponibles</span>
                    <h4 class="fw-bold mb-0" id="stat-salas">--</h4>
                </div>
            </div>
        </div>
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card card-custom border-0 bg-white p-3 d-flex flex-row align-items-center shadow-sm" 
                onclick="window.location.href='{{ route('reservas.solicitudes', ['estado' => 'PENDIENTE']) }}'" 
                style="cursor: pointer; transition: transform 0.15s ease-in-out;"
                onmouseover="this.style.transform='scale(1.02)'" 
                onmouseout="this.style.transform='scale(1)'">
                <div class="rounded-circle bg-warning bg-opacity-10 p-3 text-warning me-3">
                    <i class="bi bi-hourglass-split fs-4"></i>
                </div>
                <div>
                    <span class="text-muted small">Pendientes Aprobación</span>
                    <h4 class="fw-bold mb-0" id="stat-pendientes">--</h4>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-sm-6 col-xl-3">
            <div class="card card-custom border-0 bg-white p-3 d-flex flex-row align-items-center shadow-sm">
                <div class="rounded-circle bg-info bg-opacity-10 p-3 text-info me-3"><i class="bi bi-person-badge fs-4"></i></div>
                <div>
                    <span class="text-muted small">Mi Rol Institucional</span>
                    <h6 class="fw-bold text-capitalize mb-0 text-truncate" style="max-width: 130px;">
                        {{ ucfirst(mb_strtolower($userActivo->rol ?? 'Estudiante')) }}
                    </h6>
                </div>
            </div>
        </div>
    </div>

    <div class="card card-custom border-0 bg-white p-4 mb-4 no-print shadow-sm">
        <div class="row g-3 align-items-start">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-text bg-primary text-white fw-semibold border-0">Seleccione una fecha</span>
                    <input type="date" id="filtroFecha" class="form-control" value="{{ date('Y-m-d') }}">
                </div>
            </div>

            <div class="col-md-4">
                <select id="filtroEspacio" class="form-select border-secondary-subtle">
                    <option value="">Seleccione una sala o espacio...</option>
                    @foreach(\App\Models\Espacio::with('piso.edificio')->where('estado', 'DISPONIBLE')->get() as $esp)
                        <option value="{{ $esp->id }}">{{ $esp->nombre }} ({{ $esp->piso->edificio->nombre ?? 'Sin Edificio' }})</option>
                    @endforeach
                </select>
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Use este buscador si conoce el nombre de la sala o espacio.</small>
            </div>

            <div class="col-md-4">
                <select id="filtroPiso" class="form-select border-secondary-subtle">
                    <option value="">Seleccione un piso...</option>
                    @foreach(\App\Models\Edificio::with(['pisos' => function($q) { $q->withCount('espacios')->orderBy('numero', 'asc'); }])->get() as $edificio)
                        @if($edificio->pisos->isNotEmpty())
                            <optgroup label="🏢 {{ $edificio->nombre }}">
                                @foreach($edificio->pisos as $piso)
                                    <option value="{{ $piso->id }}">
                                        {{ $piso->nombre }} ({{ $piso->espacios_count }} {{ $piso->espacios_count == 1 ? 'sala' : 'salas' }})
                                    </option>
                                @endforeach
                            </optgroup>
                        @endif
                    @endforeach
                </select>
                <small class="text-muted d-block mt-1" style="font-size: 0.75rem;">Filtra y visualiza la agenda completa de un piso por edificio.</small>
            </div>
        </div>
    </div>

    <div id="seccionLeyenda" class="row g-2 mb-4 align-items-center no-print d-none">
        <div class="col-6 col-md-2"><div class="leyenda-box leyenda-pregrado">Escuela de Pregrado</div></div>
        <div class="col-6 col-md-2"><div class="leyenda-box leyenda-postgrado">Escuela de Postgrado</div></div>
        <div class="col-6 col-md-2"><div class="leyenda-box leyenda-extension">Dirección de Extensión</div></div>
        <div class="col-6 col-md-2"><div class="leyenda-box leyenda-actividades">Actividades/otros</div></div>
        <div class="col-6 col-md-2"><div class="leyenda-box leyenda-pendiente">Estado Pendiente</div></div>
        <div class="col-12 col-md-2 text-end">
            <button class="btn text-white w-100 fw-bold" style="background-color: #001F35;" onclick="window.print()">
                <i class="bi bi-printer-fill me-1"></i> Imprimir
            </button>
        </div>
    </div>

    <div id="areaImpresion" class="card card-custom border-0 bg-white p-4 d-none shadow-sm">
        <div class="text-center mb-3">
            <h3 id="tituloSeleccionVista" class="fw-bold text-dark mb-1"></h3>
            <p id="subtituloFechaVista" class="text-muted small mb-0"></p>
        </div>

        <div id="contenedorTablaPiso" class="tabla-piso-container">
            <table class="tabla-piso" id="tablaPisoMatriz">
                <thead>
                    <tr id="headersSalasPiso">
                        <th class="col-hora">Hora</th>
                    </tr>
                </thead>
                <tbody id="bodyMatrizPiso"></tbody>
            </table>
        </div>
    </div>
@endsection

@push('scripts')
<script>
    // =================================================------------
    // 0. VARIABLES GLOBALES DE SESIÓN
    // =================================================------------
    window.esEstudiante = {{ $esEstudiante ? 'true' : 'false' }};
    window.usuarioNombre = {!! json_encode($nombreComp) !!};
    window.usuarioCorreo = {!! json_encode($correoComp) !!};

    window.espaciosDisponiblesList = {!! json_encode(\App\Models\Espacio::where('estado', 'DISPONIBLE')->select('id', 'nombre')->get()) !!};

    window.obtenerOpcionesEspaciosHtml = function() {
        let html = '<option value="">-- Seleccionar Sala / Espacio --</option>';
        if (Array.isArray(window.espaciosDisponiblesList)) {
            window.espaciosDisponiblesList.forEach(function(esp) {
                html += '<option value="' + esp.id + '">' + esp.nombre + '</option>';
            });
        }
        return html;
    };

    // =================================================------------
    // 1. FUNCIONES PRINCIPALES DE RESERVA VÍA AJAX
    // =================================================------------

    window.guardarReserva = function(datos) {
        let formData = new FormData();

        for (let key in datos) {
            if (datos[key] !== null && datos[key] !== undefined) {
                if (Array.isArray(datos[key])) {
                    datos[key].forEach(val => formData.append(key + '[]', val));
                } else {
                    formData.append(key, datos[key]);
                }
            }
        }

        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));

        $.ajax({
            url: '{{ route("reservas.store") }}',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                Swal.fire({
                    title: '¡Solicitud Registrada!',
                    text: response.message || 'Tu reserva ha sido ingresada correctamente.',
                    icon: 'success',
                    timer: 2000,
                    showConfirmButton: false
                });

                if (typeof window.cargarMetricasIniciales === 'function') {
                    window.cargarMetricasIniciales();
                }

                if (typeof window.actualizarVistaSegunFiltro === 'function') {
                    window.actualizarVistaSegunFiltro();
                }
            },
            error: function(xhr) {
                let msj = xhr.responseJSON?.message || 'No se pudo registrar la reserva.';
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    msj = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                }
                Swal.fire({
                    title: 'Error al reservar',
                    html: msj,
                    icon: 'error'
                });
            }
        });
    };

    window.abrirModalReserva = function(fechaInicio = '', fechaFin = '', nombreSala = '', espacioId = '') {
        window.tempFechaInicio = fechaInicio;
        window.tempFechaFin = fechaFin;
        window.tempNombreSala = nombreSala;
        window.tempEspacioId = espacioId;

        if (window.esEstudiante) {
            window.abrirFormularioActividad();
            return;
        }

        Swal.fire({
            title: 'Reserva de horas',
            width: '650px',
            showConfirmButton: false,
            showCloseButton: true,
            html: '<div class="alert alert-success border-0 bg-success-subtle text-success d-flex align-items-center p-3 mb-4 rounded text-start" style="font-size: 0.9rem;">' +
                    '<i class="bi bi-info-circle-fill me-2 fs-5"></i>' +
                    '<div><b>Atención:</b> seleccione cursos desde U-campus o cree una nueva actividad.</div>' +
                '</div>' +
                '<div class="row g-3 mb-4">' +
                    '<div class="col-6">' +
                        '<button type="button" class="btn text-white w-100 py-3 fw-bold rounded-2 shadow-sm" style="background-color: #001F35;" onclick="window.abrirFormularioCurso()">' +
                            '<i class="bi bi-journal-bookmark me-2"></i> Cursos (Clase)' +
                        '</button>' +
                    '</div>' +
                    '<div class="col-6">' +
                        '<button type="button" class="btn btn-primary w-100 py-3 fw-bold rounded-2 shadow-sm" style="background-color: #435EBE;" onclick="window.abrirFormularioActividad()">' +
                            '<i class="bi bi-star-fill me-2"></i> Actividad / Evento' +
                        '</button>' +
                    '</div>' +
                '</div>' +
                '<div class="d-flex justify-content-end border-top pt-3">' +
                    '<button type="button" class="btn btn-dark fw-semibold px-4" onclick="Swal.close()"><i class="bi bi-x-circle me-1"></i> Cerrar</button>' +
                '</div>'
        });
    };

    // =================================================------------
    // 2. MODAL DE CURSOS
    // =================================================------------

    window.abrirFormularioCurso = function() {
        let fInicio = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
        let hInicio = window.tempFechaInicio && window.tempFechaInicio.length > 10 ? window.tempFechaInicio.substring(11, 16) : '08:30';
        let hFin    = window.tempFechaFin && window.tempFechaFin.length > 10 ? window.tempFechaFin.substring(11, 16) : '10:00';

        let espacioSelId    = window.tempEspacioId || $('#filtroEspacio').val();
        let espacioSelTexto = window.tempNombreSala || $('#filtroEspacio option:selected').text();

        let campoSalaHtml = '';
        if (espacioSelId && espacioSelTexto && !espacioSelTexto.includes('--')) {
            campoSalaHtml = '<label class="form-label small fw-bold text-muted mb-1">Nombre sala</label>' +
                '<input type="text" class="form-control bg-light" value="' + espacioSelTexto + '" readonly style="cursor: not-allowed; font-weight: 600;">' +
                '<input type="hidden" id="cur_espacio_id" value="' + espacioSelId + '">';
        } else {
            campoSalaHtml = '<label class="form-label small fw-bold text-muted mb-1">Nombre sala <span class="text-danger">*</span></label>' +
                '<select id="cur_espacio_id" class="form-select border-primary" onchange="window.resetearValidacionDisponibilidad()" required>' + window.obtenerOpcionesEspaciosHtml() + '</select>';
        }

        let [hIniNum, mIniNum] = hInicio.split(':').map(Number);
        let minutosInicio = (hIniNum * 60) + mIniNum;
        let opcionesHoraFinHtml = '';

        for (let min = minutosInicio + 15; min <= 1260; min += 15) {
            let h = Math.floor(min / 60);
            let m = min % 60;
            let timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
            let selected = (timeStr === hFin) ? 'selected' : '';
            opcionesHoraFinHtml += '<option value="' + timeStr + '" ' + selected + '>' + timeStr + ' hrs</option>';
        }

        Swal.fire({
            title: 'Reserva de horas',
            width: '800px',
            showConfirmButton: false,
            showCloseButton: true,
            html: '<div class="alert alert-success border-0 bg-success-subtle text-success d-flex align-items-center p-3 mb-3 rounded text-start" style="font-size: 0.88rem;">' +
                    '<i class="bi bi-info-circle-fill me-2 fs-5"></i>' +
                    '<div>Seleccione carrera/institución, luego el curso y por último continuar.</div>' +
                '</div>' +
                '<form id="formCursoModal" class="text-start">' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Institución <span class="text-danger">*</span></label>' +
                        '<select id="cur_institucion" class="form-select border-primary" onchange="window.cargarCursosUCampus(); window.resetearValidacionDisponibilidad();">' +
                            '<option value="">-- Seleccione una carrera/institución --</option>' +
                        '</select>' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Periodo</label>' +
                        '<select id="cur_periodo" class="form-select" onchange="window.cargarCursosUCampus(); window.resetearValidacionDisponibilidad();">' +
                            '<option value="">-- Seleccione un periodo --</option>' +
                            '<option value="2026.1">2026 Primer Semestre</option>' +
                            '<option value="2026.2" selected>2026 Segundo Semestre</option>' +
                            '<option value="2026.0">2026 Anual</option>' +
                        '</select>' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Curso <span class="text-danger">*</span></label>' +
                        '<select id="cur_curso_select" class="form-select border-primary" onchange="window.cargarSeccionesUCampus(this.value); window.resetearValidacionDisponibilidad();">' +
                            '<option value="">-- Primero seleccione carrera y periodo --</option>' +
                        '</select>' +
                    '</div>' +
                    '<div class="row">' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Sección <span class="text-danger">*</span></label>' +
                            '<select id="cur_seccion_select" class="form-select border-primary" onchange="window.cargarProfesoresUCampus(); window.resetearValidacionDisponibilidad();">' +
                                '<option value="">Seleccione una sección...</option>' +
                            '</select>' +
                        '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Escuela <span class="text-danger">*</span></label>' +
                            '<select id="cur_escuela_select" class="form-select border-primary" onchange="window.resetearValidacionDisponibilidad()">' +
                                '<option value="Pregrado" selected>Pregrado</option>' +
                                '<option value="Postgrado">Postgrado (Magíster / Doctorado)</option>' +
                            '</select>' +
                        '</div>' +
                    '</div>' +
                    '<div id="contenedorEncargadosUCampus">' +
                        '<div class="text-muted small py-2"><i class="bi bi-info-circle me-1"></i> Seleccione una sección para cargar los encargados</div>' +
                    '</div>' +
                    '<div class="row mt-2">' +
                        '<div class="col-md-6 mb-3">' + campoSalaHtml + '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Link de acceso a clase virtual</label>' +
                            '<input type="url" id="cur_link" class="form-control" placeholder="https://zoom.us/j/...">' +
                        '</div>' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Nombre reserva <span class="text-danger">*</span></label>' +
                        '<input type="text" id="cur_nombre_reserva" class="form-control" placeholder="Nombre de la reserva...">' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Descripción reserva <span class="text-danger">*</span></label>' +
                        '<textarea id="cur_descripcion" class="form-control" rows="2" placeholder="Describe brevemente la actividad..."></textarea>' +
                    '</div>' +
                    '<div class="card p-3 mb-3 bg-light border-secondary-subtle">' +
                        '<div class="row">' +
                            '<div class="col-md-6 mb-2">' +
                                '<label class="form-label small fw-bold text-muted mb-1">Frecuencia de Reserva</label>' +
                                '<select id="cur_repeticion" class="form-select border-primary" onchange="window.toggleSeccionDias(this.value); window.resetearValidacionDisponibilidad();">' +
                                    '<option value="UNICA" selected>Reserva Fecha Única</option>' +
                                    '<option value="SEMANAL">Reserva Recurrente (semanal)</option>' +
                                '</select>' +
                            '</div>' +
                            '<div class="col-md-6 mb-2">' +
                                '<label id="lblFechaFinRep" class="form-label small fw-bold text-muted mb-1">Fecha reserva</label>' +
                                '<input type="date" id="cur_fecha_fin" class="form-control" value="' + fInicio + '" disabled onchange="window.resetearValidacionDisponibilidad()">' +
                            '</div>' +
                        '</div>' +
                        '<div id="boxDiasSemana" class="mt-2 d-none">' +
                            '<label class="form-label small fw-bold text-muted mb-1 d-block">Selecciona los días de la semana:</label>' +
                            '<div class="d-flex flex-wrap gap-2">' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="1" id="d1" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d1">Lun</label></div>' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="2" id="d2" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d2">Mar</label></div>' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="3" id="d3" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d3">Mié</label></div>' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="4" id="d4" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d4">Jue</label></div>' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="5" id="d5" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d5">Vie</label></div>' +
                                '<div class="form-check form-check-inline"><input class="form-check-input chk-dia" type="checkbox" value="6" id="d6" onchange="window.resetearValidacionDisponibilidad()"><label class="form-check-label small" for="d6">Sáb</label></div>' +
                            '</div>' +
                        '</div>' +
                    '</div>' +
                    '<div class="row">' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Hora de reserva</label>' +
                            '<input type="text" id="cur_hora_inicio" class="form-control bg-light" value="' + hInicio + '" readonly style="cursor: not-allowed;">' +
                        '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Hora de término</label>' +
                            '<select id="cur_hora_fin" class="form-select border-primary" onchange="window.resetearValidacionDisponibilidad()" required>' + opcionesHoraFinHtml + '</select>' +
                        '</div>' +
                    '</div>' +
                    '<div id="msgDisponibilidadCurso" class="mt-2"></div>' +
                '</form>' +
                '<div class="d-flex justify-content-between align-items-center mt-4 pt-2 border-top">' +
                    '<div>' +
                        '<button type="button" class="btn btn-outline-info fw-bold me-2" onclick="window.revisarDisponibilidadCurso()">' +
                            '<i class="bi bi-search me-1"></i> Revisar Disponibilidad' +
                        '</button>' +
                        '<button type="button" id="btnConfirmarReservaCurso" class="btn text-white fw-bold px-4 d-none" style="background-color: #001F35;" onclick="window.enviarReservaCurso()">' +
                            'Reservar Clase <i class="bi bi-check-circle-fill ms-1"></i>' +
                        '</button>' +
                    '</div>' +
                    '<button type="button" class="btn btn-dark fw-semibold px-4" onclick="Swal.close()"><i class="bi bi-x-circle me-1"></i> Cerrar</button>' +
                '</div>',
            didOpen: function() {
                window.cargarInstitucionesUCampus();
            }
        });
    };

    window.resetearValidacionDisponibilidad = function() {
        $('#btnConfirmarReservaCurso').addClass('d-none');
        $('#msgDisponibilidadCurso').empty();
    };

    window.revisarDisponibilidadCurso = function() {
        let espacioId  = $('#cur_espacio_id').val() || $('#filtroEspacio').val();
        let fIni       = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
        let hIni       = $('#cur_hora_inicio').val();
        let fFin       = $('#cur_fecha_fin').val();
        let hFin       = $('#cur_hora_fin').val();
        let repeticion = $('#cur_repeticion').val();
        let $msgContainer = $('#msgDisponibilidadCurso');
        let $btnReservar  = $('#btnConfirmarReservaCurso');

        if (!espacioId) {
            $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Debe seleccionar una sala o espacio primero.</div>');
            $btnReservar.addClass('d-none');
            return;
        }

        let diasSemana = [];
        if (repeticion === 'SEMANAL') {
            $('.chk-dia:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });

            if (diasSemana.length === 0) {
                $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Selecciona al menos un día de la semana para la repetición.</div>');
                $btnReservar.addClass('d-none');
                return;
            }
        }

        $msgContainer.html('<div class="alert alert-info p-2 small"><i class="bi bi-hourglass-split me-1"></i> Comprobando disponibilidad del espacio...</div>');
        $btnReservar.addClass('d-none');

        $.ajax({
            url: '/api/reservas/check-disponibilidad',
            type: 'GET',
            data: {
                espacio_id: espacioId,
                fecha_inicio: fIni + ' ' + hIni,
                fecha_fin: fFin + ' ' + hFin,
                repeticion: repeticion,
                dias_semana: diasSemana
            },
            success: function(res) {
                if (res.disponible) {
                    $msgContainer.html('<div class="alert alert-success p-2 small"><i class="bi bi-check-circle-fill me-1"></i> <b>¡Horario Disponible!</b> La sala está libre para todas las fechas solicitadas.</div>');
                    $btnReservar.removeClass('d-none');
                } else {
                    let detalles = '';
                    if (res.conflictos && res.conflictos.length > 0) {
                        detalles = '<ul class="mb-0 ps-3 mt-1 small">' + 
                            res.conflictos.map(function(c) {
                                return '<li><b>' + c.fecha + '</b> (' + c.hora_inicio + ' - ' + c.hora_fin + '): ' + c.titulo + '</li>';
                            }).join('') + 
                            '</ul>';
                    }

                    $msgContainer.html('<div class="alert alert-danger p-2 text-start small">' +
                        '<i class="bi bi-x-circle-fill me-1"></i> <b>Conflicto de Horario:</b>' +
                        '<div>' + (res.message || 'La sala se encuentra ocupada.') + '</div>' +
                        detalles +
                    '</div>');

                    $btnReservar.addClass('d-none');
                }
            },
            error: function() {
                $msgContainer.html('<div class="alert alert-danger p-2 small"><i class="bi bi-exclamation-triangle-fill me-1"></i> No se pudo verificar la disponibilidad en este momento.</div>');
                $btnReservar.addClass('d-none');
            }
        });
    };

    window.toggleSeccionDias = function(val) {
        let $box = $('#boxDiasSemana');
        let $lbl = $('#lblFechaFinRep');
        let $inputFecha = $('#cur_fecha_fin');

        if (val === 'SEMANAL') {
            $lbl.text('Fecha límite de repetición');
            $inputFecha.prop('disabled', false);
            $box.removeClass('d-none').hide().slideDown(200);

            let fIniStr = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val();
            if (fIniStr) {
                let fechaObj = new Date(fIniStr + 'T00:00:00');
                let diaSemanaIso = fechaObj.getDay() === 0 ? 7 : fechaObj.getDay();
                
                if ($('.chk-dia:checked').length === 0 && diaSemanaIso <= 6) {
                    $('#d' + diaSemanaIso).prop('checked', true);
                }
            }
        } else {
            let fIniBase = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
            
            $lbl.text('Fecha reserva');
            $inputFecha.val(fIniBase).prop('disabled', true);

            $box.slideUp(200, function() {
                $(this).addClass('d-none');
            });
        }
    };

    // =================================================------------
    // 3. INTEGRACIÓN CON API U-CAMPUS
    // =================================================------------

    window.cargarInstitucionesUCampus = function() {
        let $select = $('#cur_institucion');
        $select.html('<option value="">⏳ Cargando instituciones desde U-Campus...</option>');

        $.ajax({
            url: '/api/ucampus/instituciones',
            type: 'GET',
            success: function(response) {
                let lista = (response && response.success && response.data) ? response.data : (Array.isArray(response) ? response : []);
                if (lista.length > 0) {
                    let html = '<option value="">-- Seleccione una carrera/institución --</option>';
                    lista.forEach(function(inst) {
                        let id = inst.id_institucion || inst.id;
                        let nombre = inst.nombre || inst.sigla || ('Institución ' + id);
                        html += '<option value="' + id + '">' + nombre + '</option>';
                    });
                    $select.html(html);
                } else {
                    window.cargarInstitucionesFallback();
                }
            },
            error: function() {
                window.cargarInstitucionesFallback();
            }
        });
    };

    window.cargarInstitucionesFallback = function() {
        let $select = $('#cur_institucion');
        $select.html(
            '<option value="">-- Seleccione una carrera/institución --</option>' +
            '<option value="Antropología">Antropología</option>' +
            '<option value="Psicología">Psicología</option>' +
            '<option value="Sociología">Sociología</option>' +
            '<option value="Trabajo Social">Trabajo Social</option>' +
            '<option value="Educación Parvularia">Educación Parvularia</option>' +
            '<option value="Escuela de Pregrado">Escuela de Pregrado</option>' +
            '<option value="Escuela de Postgrado">Escuela de Postgrado</option>'
        );
    };

    window.cargarCursosUCampus = function() {
        let idInst = $('#cur_institucion').val();
        let instTexto = $('#cur_institucion option:selected').text().toLowerCase();
        let per = $('#cur_periodo').val();
        let $select = $('#cur_curso_select');

        if (instTexto.includes('magíster') || instTexto.includes('magister') || instTexto.includes('doctorado') || instTexto.includes('postgrado') || instTexto.includes('diplomado')) {
            $('#cur_escuela_select').val('Postgrado');
        } else if (idInst) {
            $('#cur_escuela_select').val('Pregrado');
        }

        if (!idInst || !per) {
            $select.html('<option value="">-- Primero seleccione carrera y periodo --</option>');
            $('#cur_seccion_select').html('<option value="">Seleccione una sección...</option>');
            $('#contenedorEncargadosUCampus').html('<div class="text-muted small py-2"><i class="bi bi-info-circle me-1"></i> Seleccione una sección para cargar los encargados</div>');
            return;
        }

        $select.html('<option value="">⏳ Carga de catálogo U-Campus...</option>');
        $('#cur_seccion_select').html('<option value="">Seleccione una sección...</option>');
        $('#contenedorEncargadosUCampus').html('<div class="text-muted small py-2"><i class="bi bi-info-circle me-1"></i> Seleccione una sección para cargar los encargados</div>');

        $.ajax({
            url: '/api/ucampus/cursos',
            type: 'GET',
            data: { id_institucion: idInst, id_periodo: per },
            success: function(response) {
                let lista = (response && response.success && response.data) ? response.data : [];

                if (lista.length > 0) {
                    let html = '<option value="">Seleccione un curso...</option>';
                    lista.forEach(function(c) {
                        let idCurso = c.id_curso;
                        let idRamo = c.id_ramo || '';
                        let cod = c.codigo ? c.codigo + ' - ' : '';
                        let nom = c.nombre || 'Curso';
                        html += '<option value="' + idCurso + '" data-ramo="' + idRamo + '">' + cod + nom + '</option>';
                    });
                    $select.html(html);
                } else {
                    $select.html('<option value="">No hay cursos registrados para esta selección</option>');
                }
            },
            error: function() {
                $select.html('<option value="">Error al cargar cursos de U-Campus</option>');
            }
        });
    };

    window.cargarSeccionesUCampus = function(idCurso) {
        let $secSelect = $('#cur_seccion_select');
        let $optSel = $('#cur_curso_select option:selected');
        let idRamo = $optSel.attr('data-ramo') || '';
        let per = $('#cur_periodo').val();

        if (!idCurso) {
            $secSelect.html('<option value="">Seleccione una sección...</option>');
            $('#contenedorEncargadosUCampus').html('<div class="text-muted small py-2"><i class="bi bi-info-circle me-1"></i> Seleccione una sección para cargar los encargados</div>');
            return;
        }

        let textoCurso = $optSel.text();
        if (textoCurso && !textoCurso.includes('--') && !textoCurso.includes('Seleccione')) {
            $('#cur_nombre_reserva').val(textoCurso);
        }

        $secSelect.html('<option value="">⏳ Cargando secciones...</option>');
        $('#contenedorEncargadosUCampus').html('<div class="text-center py-2 text-muted"><small>⏳ Buscando profesores y ayudantes en U-Campus...</small></div>');

        $.ajax({
            url: '/api/ucampus/secciones',
            type: 'GET',
            data: { id_curso: idCurso, id_ramo: idRamo, id_periodo: per },
            success: function(response) {
                let lista = (response && response.success && response.data) ? response.data : [];

                if (lista.length > 0) {
                    let html = '';
                    lista.forEach(function(s, index) {
                        let idCursoSec = s.id_curso || idCurso;
                        let secNum = s.seccion || (index + 1);
                        let nomSec = 'Sección ' + secNum;
                        let selected = (index === 0) ? 'selected' : '';
                        html += '<option value="' + idCursoSec + '" data-seccion="' + secNum + '" ' + selected + '>' + nomSec + '</option>';
                    });
                    $secSelect.html(html);

                    window.cargarProfesoresUCampus();
                } else {
                    $secSelect.html('<option value="' + idCurso + '" data-seccion="1" selected>Sección 1</option>');
                    window.cargarProfesoresUCampus();
                }
            },
            error: function() {
                $secSelect.html('<option value="' + idCurso + '" data-seccion="1" selected>Sección 1</option>');
                window.cargarProfesoresUCampus();
            }
        });
    };

    window.cargarProfesoresUCampus = function() {
        let $optSec = $('#cur_seccion_select option:selected');
        let idCursoReal = $optSec.val();

        if (!idCursoReal) return;

        let $contenedor = $('#contenedorEncargadosUCampus');
        $contenedor.html('<div class="text-center py-2 text-muted"><small>⏳ Buscando profesores y ayudantes en U-Campus...</small></div>');

        $.ajax({
            url: '/api/ucampus/profesores',
            type: 'GET',
            data: { id_curso: idCursoReal },
            success: function(response) {
                let lista = (response && response.success && response.data) ? response.data : [];
                $contenedor.empty();

                if (lista.length > 0) {
                    lista.forEach(function(p, i) {
                        let num = i + 1;
                        let req = (num === 1) ? ' <span class="text-danger">*</span>' : '';
                        let cargo = p.cargo_texto || 'Docente';
                        let row = '<div class="row">' +
                            '<div class="col-md-6 mb-2">' +
                                '<label class="form-label small fw-bold text-muted mb-1">Encargado(a) (' + num + ') - ' + cargo + '</label>' +
                                '<input type="text" class="form-control bg-light" value="' + (p.nombre || '') + '" readonly style="cursor: not-allowed;">' +
                            '</div>' +
                            '<div class="col-md-6 mb-2">' +
                                '<label class="form-label small fw-bold text-muted mb-1">Correo encargado(a) (' + num + ')' + req + '</label>' +
                                '<input type="email" class="form-control bg-light" value="' + (p.email || '') + '" readonly style="cursor: not-allowed;">' +
                            '</div>' +
                        '</div>';
                        $contenedor.append(row);
                    });
                } else {
                    $contenedor.html('<div class="alert alert-warning border-0 p-2 small mb-0">No se encontraron docentes registrados en U-Campus para esta sección.</div>');
                }
            },
            error: function() {
                $contenedor.html('<div class="alert alert-danger border-0 p-2 small mb-0">Error al obtener profesores desde U-Campus.</div>');
            }
        });
    };

    window.enviarReservaCurso = function() {
        let espacioId  = $('#cur_espacio_id').val() || $('#filtroEspacio').val();
        let instTexto  = $('#cur_institucion option:selected').text() || '';
        let escuelaSel = $('#cur_escuela_select').val() || 'Pregrado';
        let titulo     = $('#cur_nombre_reserva').val();
        let desc       = $('#cur_descripcion').val();
        
        let fIniBase   = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
        let hInicio    = $('#cur_hora_inicio').val();
        let fFin       = $('#cur_fecha_fin').val();
        let hFin       = $('#cur_hora_fin').val();

        let repeticion = $('#cur_repeticion').val();
        let diasSemana = [];

        let $msgContainer = $('#msgDisponibilidadCurso');

        if (repeticion === 'SEMANAL') {
            $('.chk-dia:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });

            if (diasSemana.length === 0) {
                $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Selecciona al menos un día de la semana.</div>');
                return;
            }

            if (fFin <= fIniBase) {
                $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> La fecha límite debe ser posterior a la fecha de inicio.</div>');
                return;
            }
        }

        if (!espacioId) {
            $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Debes seleccionar una sala / espacio.</div>');
            return;
        }

        if (!titulo || !desc) {
            $msgContainer.html('<div class="alert alert-danger p-2 small"><i class="bi bi-exclamation-circle-fill me-1"></i> Por favor ingresa el nombre de la reserva y la descripción.</div>');
            return;
        }

        let descripcionFinal = '[' + escuelaSel + ' - ' + instTexto + '] ' + desc;

        window.guardarReserva({
            espacio_id: espacioId,
            titulo: titulo.substring(0, 145),
            tipo_actividad: 'CLASE',
            descripcion: descripcionFinal,
            fecha_inicio: fIniBase + ' ' + hInicio,
            fecha_fin: fFin + ' ' + hFin,
            repeticion: repeticion,
            dias_semana: diasSemana
        });
    };

    // =================================================------------
    // 4. MODAL ACTIVIDADES
    // =================================================------------

    window.abrirFormularioActividad = function() {
        let fInicio = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
        let hInicio = window.tempFechaInicio && window.tempFechaInicio.length > 10 ? window.tempFechaInicio.substring(11, 16) : '08:00';
        let hFin = window.tempFechaFin && window.tempFechaFin.length > 10 ? window.tempFechaFin.substring(11, 16) : '09:00';

        let espacioSelId = window.tempEspacioId || $('#filtroEspacio').val();
        let espacioSelTexto = window.tempNombreSala || $('#filtroEspacio option:selected').text();

        let esAuditorio = espacioSelTexto ? espacioSelTexto.toLowerCase().includes('auditorio') : false;

        let campoSalaHtml = '';
        if (espacioSelId && espacioSelTexto && !espacioSelTexto.includes('--')) {
            campoSalaHtml = '<label class="form-label small fw-bold text-muted mb-1">Nombre sala <span class="text-danger">*</span></label>' +
                '<input type="text" class="form-control bg-light" value="' + espacioSelTexto + '" readonly style="cursor: not-allowed; font-weight: 600;">' +
                '<input type="hidden" id="act_espacio_id" value="' + espacioSelId + '">';
        } else {
            campoSalaHtml = '<label class="form-label small fw-bold text-muted mb-1">Nombre sala <span class="text-danger">*</span></label>' +
                '<select id="act_espacio_id" class="form-select border-primary" onchange="window.evaluarAvisoAuditorio(this); window.resetearValidacionActividad();" required>' + window.obtenerOpcionesEspaciosHtml() + '</select>';
        }

        let [hIniNum, mIniNum] = hInicio.split(':').map(Number);
        let minutosInicio = (hIniNum * 60) + mIniNum;
        let opcionesHoraFinHtml = '';

        for (let min = minutosInicio + 15; min <= 1260; min += 15) {
            let h = Math.floor(min / 60);
            let m = min % 60;
            let timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
            let selected = (timeStr === hFin) ? 'selected' : '';
            opcionesHoraFinHtml += '<option value="' + timeStr + '" ' + selected + '>' + timeStr + ' hrs</option>';
        }

        let bloqueAvisoAuditorio = '<div id="seccionAvisoAuditorio" class="alert alert-warning border-warning shadow-sm my-3 text-start" style="display: ' + (esAuditorio ? 'block' : 'none') + ';">' +
            '<h6 class="fw-bold text-dark mb-2"><i class="bi bi-exclamation-triangle-fill text-warning me-1"></i> Importante: Reserva de Auditorio</h6>' +
            '<p class="small text-secondary mb-1"><strong>Exclusivamente</strong> para el uso de espacios en Auditorios debes descargar esta ficha y obtener la firma de la Dirección correspondiente.</p>' +
            '<p class="small text-secondary mb-1">En caso de tratarse de una actividad estudiantil, la ficha debe estar firmada por la Dirección de Asuntos Estudiantiles de FACSO.</p>' +
            '<p class="small text-secondary mb-3">Una vez firmada enviar a: <a href="mailto:reservasextension@facso.cl" class="fw-bold text-primary">reservasextension@facso.cl</a></p>' +
            '<a href="/archivos/ficha_solicitud_auditorio.doc" target="_blank" download class="btn btn-sm btn-success fw-semibold"><i class="bi bi-download me-1"></i> Descargar Ficha de Solicitud de Auditorio</a>' +
        '</div>';

        let bloqueFrecuenciaHtml = '';
        if (window.esEstudiante) {
            bloqueFrecuenciaHtml = '<input type="hidden" id="act_repeticion" value="UNICA">' +
                '<div class="row">' +
                    '<div class="col-md-6 mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Fecha de inicio</label>' +
                        '<input type="text" id="act_fecha_inicio" class="form-control bg-light" value="' + fInicio + '" readonly style="cursor: not-allowed;">' +
                    '</div>' +
                    '<div class="col-md-6 mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Fecha de término</label>' +
                        '<input type="text" id="act_fecha_fin" class="form-control bg-light" value="' + fInicio + '" readonly style="cursor: not-allowed;">' +
                    '</div>' +
                '</div>';
        } else {
            bloqueFrecuenciaHtml = '<div class="card p-3 mb-3 bg-light border-secondary-subtle">' +
                '<div class="row">' +
                    '<div class="col-md-6 mb-2">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Frecuencia de Reserva</label>' +
                        '<select id="act_repeticion" class="form-select border-primary" onchange="window.toggleSeccionDiasActividad(this.value); window.resetearValidacionActividad();">' +
                            '<option value="UNICA" selected>Reserva Fecha Única</option>' +
                            '<option value="SEMANAL">Reserva Recurrente (semanal)</option>' +
                        '</select>' +
                    '</div>' +
                    '<div class="col-md-6 mb-2">' +
                        '<label id="act_lblFechaFinRep" class="form-label small fw-bold text-muted mb-1">Fecha reserva</label>' +
                        '<input type="date" id="act_fecha_fin" class="form-control" value="' + fInicio + '" disabled onchange="window.resetearValidacionActividad()">' +
                    '</div>' +
                '</div>' +
                '<div id="act_boxDiasSemana" class="mt-2 d-none">' +
                    '<label class="form-label small fw-bold text-muted mb-1 d-block">Selecciona los días de la semana:</label>' +
                    '<div class="d-flex flex-wrap gap-2">' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="1" id="ad1" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad1">Lun</label></div>' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="2" id="ad2" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad2">Mar</label></div>' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="3" id="ad3" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad3">Mié</label></div>' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="4" id="ad4" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad4">Jue</label></div>' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="5" id="ad5" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad5">Vie</label></div>' +
                        '<div class="form-check form-check-inline"><input class="form-check-input chk-dia-act" type="checkbox" value="6" id="ad6" onchange="window.resetearValidacionActividad()"><label class="form-check-label small" for="ad6">Sáb</label></div>' +
                    '</div>' +
                '</div>' +
            '</div>';
        }

        Swal.fire({
            title: 'Reserva de Actividad / Evento',
            width: '750px',
            showConfirmButton: false,
            showCloseButton: true,
            html: '<form id="formActividadModal" class="text-start">' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Tipo de solicitud</label>' +
                        '<input type="text" class="form-control bg-light" value="Actividad / Evento Extensión" readonly style="cursor: not-allowed;">' +
                    '</div>' +
                    bloqueAvisoAuditorio +
                    '<div class="row">' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Nombre encargado(a) <span class="text-danger">*</span></label>' +
                            '<input type="text" id="act_encargado" class="form-control" value="' + window.usuarioNombre + '">' +
                        '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Correo encargado(a) <span class="text-danger">*</span></label>' +
                            '<input type="email" id="act_correo" class="form-control" value="' + window.usuarioCorreo + '">' +
                        '</div>' +
                    '</div>' +
                    '<div class="row">' +
                        '<div class="col-md-6 mb-3">' + campoSalaHtml + '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Link de acceso virtual (Opcional)</label>' +
                            '<input type="url" id="act_link" class="form-control" placeholder="https://zoom.us/j/...">' +
                        '</div>' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Nombre reserva / evento <span class="text-danger">*</span></label>' +
                        '<input type="text" id="act_nombre" class="form-control" placeholder="Ingrese el título o motivo de la reserva">' +
                    '</div>' +
                    '<div class="mb-3">' +
                        '<label class="form-label small fw-bold text-muted mb-1">Descripción de la actividad <span class="text-danger">*</span></label>' +
                        '<textarea id="act_descripcion" class="form-control" rows="2" placeholder="Detalle la actividad..."></textarea>' +
                    '</div>' +
                    bloqueFrecuenciaHtml +
                    '<div class="row">' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Hora de reserva</label>' +
                            '<input type="text" id="act_hora_inicio" class="form-control bg-light" value="' + hInicio + '" readonly style="cursor: not-allowed;">' +
                            '<input type="hidden" id="act_fecha_inicio" value="' + fInicio + '">' +
                        '</div>' +
                        '<div class="col-md-6 mb-3">' +
                            '<label class="form-label small fw-bold text-muted mb-1">Hora de término <span class="text-danger">*</span></label>' +
                            '<select id="act_hora_fin" class="form-select border-primary" onchange="window.resetearValidacionActividad()" required>' + opcionesHoraFinHtml + '</select>' +
                        '</div>' +
                    '</div>' +
                    '<div id="msgDisponibilidadActividad" class="mt-2"></div>' +
                '</form>' +
                '<div class="d-flex justify-content-between align-items-center mt-4 pt-2 border-top">' +
                    '<div>' +
                        '<button type="button" class="btn btn-outline-info fw-bold me-2" onclick="window.revisarDisponibilidadActividad()">' +
                            '<i class="bi bi-search me-1"></i> Revisar Disponibilidad' +
                        '</button>' +
                        '<button type="button" id="btnConfirmarReservaActividad" class="btn btn-primary fw-bold px-4 d-none" style="background-color: #435EBE;" onclick="window.enviarReservaActividad()">' +
                            'Reservar <i class="bi bi-check-circle-fill ms-1"></i>' +
                        '</button>' +
                    '</div>' +
                    '<button type="button" class="btn btn-dark fw-semibold px-4" onclick="Swal.close()"><i class="bi bi-x-circle me-1"></i> Cerrar</button>' +
                '</div>'
        });
    };

    window.resetearValidacionActividad = function() {
        $('#btnConfirmarReservaActividad').addClass('d-none');
        $('#msgDisponibilidadActividad').empty();
    };

    window.toggleSeccionDiasActividad = function(val) {
        let $box = $('#act_boxDiasSemana');
        let $lbl = $('#act_lblFechaFinRep');
        let $inputFecha = $('#act_fecha_fin');

        if (val === 'SEMANAL') {
            $lbl.text('Fecha límite de repetición');
            $inputFecha.prop('disabled', false);
            $box.removeClass('d-none').hide().slideDown(200);

            let fIniStr = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val();
            if (fIniStr) {
                let fechaObj = new Date(fIniStr + 'T00:00:00');
                let diaSemanaIso = fechaObj.getDay() === 0 ? 7 : fechaObj.getDay();
                if ($('.chk-dia-act:checked').length === 0 && diaSemanaIso <= 6) {
                    $('#ad' + diaSemanaIso).prop('checked', true);
                }
            }
        } else {
            let fIniBase = window.tempFechaInicio ? window.tempFechaInicio.substring(0, 10) : $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);
            $lbl.text('Fecha reserva');
            $inputFecha.val(fIniBase).prop('disabled', true);
            $box.slideUp(200, function() {
                $(this).addClass('d-none');
            });
        }
    };

    window.revisarDisponibilidadActividad = function() {
        let espacioId  = $('#act_espacio_id').val() || $('#filtroEspacio').val();
        let fIni       = $('#act_fecha_inicio').val();
        let hIni       = $('#act_hora_inicio').val();
        let fFin       = $('#act_fecha_fin').val() || fIni;
        let hFin       = $('#act_hora_fin').val();
        let repeticion = $('#act_repeticion').val() || 'UNICA';

        let $msgContainer = $('#msgDisponibilidadActividad');
        let $btnReservar  = $('#btnConfirmarReservaActividad');

        if (!espacioId) {
            $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Debe seleccionar una sala o espacio primero.</div>');
            $btnReservar.addClass('d-none');
            return;
        }

        let diasSemana = [];
        if (repeticion === 'SEMANAL') {
            $('.chk-dia-act:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });

            if (diasSemana.length === 0) {
                $msgContainer.html('<div class="alert alert-warning p-2 small"><i class="bi bi-exclamation-triangle me-1"></i> Selecciona al menos un día de la semana para la repetición.</div>');
                $btnReservar.addClass('d-none');
                return;
            }
        }

        $msgContainer.html('<div class="alert alert-info p-2 small"><i class="bi bi-hourglass-split me-1"></i> Comprobando disponibilidad del espacio...</div>');
        $btnReservar.addClass('d-none');

        $.ajax({
            url: '/api/reservas/check-disponibilidad',
            type: 'GET',
            data: {
                espacio_id: espacioId,
                fecha_inicio: fIni + ' ' + hIni,
                fecha_fin: fFin + ' ' + hFin,
                repeticion: repeticion,
                dias_semana: diasSemana
            },
            success: function(res) {
                if (res.disponible) {
                    $msgContainer.html('<div class="alert alert-success p-2 small"><i class="bi bi-check-circle-fill me-1"></i> <b>¡Horario Disponible!</b> La sala está libre para la fecha/solicitud ingresada.</div>');
                    $btnReservar.removeClass('d-none');
                } else {
                    let detalles = '';
                    if (res.conflictos && res.conflictos.length > 0) {
                        detalles = '<ul class="mb-0 ps-3 mt-1 small">' + 
                            res.conflictos.map(function(c) {
                                return '<li><b>' + c.fecha + '</b> (' + c.hora_inicio + ' - ' + c.hora_fin + '): ' + c.titulo + '</li>';
                            }).join('') + 
                            '</ul>';
                    }

                    $msgContainer.html('<div class="alert alert-danger p-2 text-start small">' +
                        '<i class="bi bi-x-circle-fill me-1"></i> <b>Conflicto de Horario:</b>' +
                        '<div>' + (res.message || 'La sala se encuentra ocupada.') + '</div>' +
                        detalles +
                    '</div>');

                    $btnReservar.addClass('d-none');
                }
            },
            error: function() {
                $msgContainer.html('<div class="alert alert-danger p-2 small"><i class="bi bi-exclamation-triangle-fill me-1"></i> No se pudo verificar la disponibilidad en este momento.</div>');
                $btnReservar.addClass('d-none');
            }
        });
    };

    window.evaluarAvisoAuditorio = function(selectEl) {
        let texto = $(selectEl).find('option:selected').text().toLowerCase();
        if (texto.includes('auditorio')) {
            $('#seccionAvisoAuditorio').slideDown();
        } else {
            $('#seccionAvisoAuditorio').slideUp();
        }
    };

    window.enviarReservaActividad = function() {
        let espacioId  = $('#act_espacio_id').val() || $('#filtroEspacio').val();
        let titulo     = $('#act_nombre').val();
        let desc       = $('#act_descripcion').val();
        let fIni       = $('#act_fecha_inicio').val();
        let hIni       = $('#act_hora_inicio').val();
        let fFin       = $('#act_fecha_fin').val() || fIni;
        let hFin       = $('#act_hora_fin').val();
        let repeticion = $('#act_repeticion').val() || 'UNICA';

        let diasSemana = [];
        if (repeticion === 'SEMANAL') {
            $('.chk-dia-act:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });
        }

        if (!espacioId) {
            Swal.showValidationMessage('Debes seleccionar una sala / espacio.');
            return;
        }

        if (!titulo || !desc) {
            Swal.showValidationMessage('Por favor completa el nombre y la descripción.');
            return;
        }

        window.guardarReserva({
            espacio_id: espacioId,
            titulo: titulo.substring(0, 145),
            tipo_actividad: 'ACTIVIDAD',
            descripcion: desc,
            fecha_inicio: fIni + ' ' + hIni,
            fecha_fin: fFin + ' ' + hFin,
            repeticion: repeticion,
            dias_semana: diasSemana
        });
    };

    // =================================================------------
    // 5. CONTROLADOR DE VISTA DE TABLA, FILTROS Y MATRIZ
    // =================================================------------

    window.dibujarTablaBloques = function(espacios, listaEventos, mapaBloqueosEspacios = []) {
        let tbody = $('#bodyMatrizPiso');
        tbody.empty();

        let fechaVal = $('#filtroFecha').val();
        let fechaObj = new Date(fechaVal + 'T00:00:00');
        let diaSemanaIso = fechaObj.getDay() === 0 ? 7 : fechaObj.getDay(); 

        let eventosProcesados = (listaEventos || []).map(ev => {
            let evStartStr = String(ev.start || '');
            let evEndStr = String(ev.end || '');

            let parseMinutes = (str) => {
                if (!str) return 0;
                let timePart = str.includes('T') ? str.split('T')[1] : (str.includes(' ') ? str.split(' ')[1] : str);
                if (!timePart) return 0;
                let parts = timePart.split(':');
                return (parseInt(parts[0], 10) * 60) + parseInt(parts[1], 10);
            };

            return {
                ...ev,
                minutosInicio: parseMinutes(evStartStr),
                minutosFin: parseMinutes(evEndStr)
            };
        });

        for (let h = 8; h < 21; h++) {
            for (let m = 0; m < 60; m += 15) {
                if (h === 8 && m < 30) continue;

                let minutoActual = (h * 60) + m;
                let horaInicioStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
                let mFin = m + 15;
                let hFin = h;
                if (mFin === 60) { mFin = 0; hFin++; }
                let horaFinStr = String(hFin).padStart(2, '0') + ':' + String(mFin).padStart(2, '0');

                let tr = $(`<tr><td class="td-hora">${horaInicioStr} - ${horaFinStr}</td></tr>`);

                espacios.forEach(sala => {
                    let ap = (sala.hora_apertura || '08:30').substring(0, 5);
                    let ci = (sala.hora_cierre || '21:00').substring(0, 5);
                    let configSala = (mapaBloqueosEspacios || []).find(b => String(b.id) === String(sala.id));

                    let esHorarioBloqueado = false;
                    let motivoBloqueo = 'Bloqueado';

                    if (configSala) {
                        if (diaSemanaIso === 6 && !configSala.permite_fines_semana) {
                            esHorarioBloqueado = true;
                            motivoBloqueo = 'No atiende Sábados';
                        } else if (diaSemanaIso === 7) {
                            esHorarioBloqueado = true;
                            motivoBloqueo = 'Domingo no disponible';
                        }

                        if (!esHorarioBloqueado && configSala.bloqueos) {
                            let bloqueoCoincidente = configSala.bloqueos.find(bloq => {
                                if (parseInt(bloq.dia_semana) !== diaSemanaIso) return false;
                                return (horaInicioStr >= bloq.hora_inicio && horaInicioStr < bloq.hora_fin);
                            });

                            if (bloqueoCoincidente) {
                                esHorarioBloqueado = true;
                                motivoBloqueo = bloqueoCoincidente.motivo || 'Receso / Bloqueo';
                            }
                        }
                    }

                    let reservaOcupada = eventosProcesados.find(ev => {
                        let evEspacio = ev.espacio_id || (ev.extendedProps ? ev.extendedProps.espacio_id : null);
                        if (String(evEspacio) !== String(sala.id)) return false;
                        return (minutoActual >= ev.minutosInicio && minutoActual < ev.minutosFin);
                    });

                    if (reservaOcupada) {
                        let props = reservaOcupada.extendedProps || {};
                        let estadoEv = reservaOcupada.estado || props.estado;
                        let resId = reservaOcupada.id || props.id || '';

                        let descTxt = (reservaOcupada.descripcion || props.descripcion || '').toLowerCase();
                        let tituloTxt = (reservaOcupada.title || '').toLowerCase();
                        let tipoTxt = (props.tipo || reservaOcupada.tipo_actividad || '').toLowerCase();

                        let txt = tituloTxt + ' ' + descTxt + ' ' + tipoTxt;

                        let colorClase = 'leyenda-pregrado';

                        if (estadoEv === 'PENDIENTE') {
                            colorClase = 'leyenda-pendiente';
                        } else if (
                            txt.includes('postgrado') || txt.includes('magíster') || txt.includes('magister') ||
                            txt.includes('doctorado') || txt.includes('diplomado') || tipoTxt === 'postgrado'
                        ) {
                            colorClase = 'leyenda-postgrado';
                        } else if (txt.includes('pregrado') || tipoTxt === 'clase') {
                            colorClase = 'leyenda-pregrado';
                        } else if (tipoTxt === 'extension' || txt.includes('extensión') || txt.includes('extension')) {
                            colorClase = 'leyenda-extension';
                        } else if (tipoTxt === 'actividad' || txt.includes('actividad') || txt.includes('evento')) {
                            colorClase = 'leyenda-actividades';
                        }

                        tr.append(`
                            <td class="${colorClase} fw-semibold text-truncate" 
                                style="max-width: 150px; cursor: pointer;" 
                                title="Ver detalle / Editar reserva" 
                                onclick="window.verDetalleReserva('${resId}')">
                                ${reservaOcupada.title}
                            </td>
                        `);
                    } else if (esHorarioBloqueado || horaInicioStr < ap || horaInicioStr >= ci) {
                        tr.append(`<td class="bloque-no-disponible" title="${motivoBloqueo}">${motivoBloqueo}</td>`);
                    } else {
                        tr.append(`<td class="bloque-disponible" onclick="window.abrirModalReserva('${fechaVal} ${horaInicioStr}', '${fechaVal} ${horaFinStr}', '${sala.nombre}', '${sala.id}')"></td>`);
                    }
                });

                tbody.append(tr);
            }
        }
    };

    window.cargarMatrizSalas = function(tipo, id) {
        let fecha = $('#filtroFecha').val();
        let urlApiEspacios = (tipo === 'piso') ? `/api/pisos/${id}/espacios` : `/api/espacios/${id}`;

        $.get(urlApiEspacios, function(dataEspacios) {
            let espacios = Array.isArray(dataEspacios) ? dataEspacios : [dataEspacios];
            let trHeaders = $('#headersSalasPiso');

            trHeaders.html('<th class="col-hora">Hora</th>');

            if (!espacios || espacios.length === 0) {
                $('#bodyMatrizPiso').html('<tr><td colspan="10" class="py-4 text-muted">No existen salas disponibles.</td></tr>');
                return;
            }

            espacios.forEach(sala => {
                let ap = (sala.hora_apertura || '08:30:00').substring(0, 5);
                let ci = (sala.hora_cierre || '21:00:00').substring(0, 5);
                trHeaders.append(`
                    <th class="col-sala">
                        <div class="sala-titulo">${sala.nombre}</div>
                        <div class="sala-subdetalles">
                            Apertura : ${ap} - Cierre : ${ci}<br>
                            Capacidad : ${sala.capacidad || 0} personas
                        </div>
                    </th>
                `);
            });

            let paramsReserva = { start: fecha, end: fecha };
            if (tipo === 'piso') { paramsReserva.piso_id = id; } else { paramsReserva.espacio_id = id; }

            $.get('/api/reservas', paramsReserva, function(resReservas) {
                let listaEventos = [];
                let mapaBloqueos = [];

                if (Array.isArray(resReservas)) {
                    listaEventos = resReservas;
                } else if (resReservas) {
                    if (Array.isArray(resReservas.events)) { listaEventos = resReservas.events; }
                    if (Array.isArray(resReservas.bloqueos)) { mapaBloqueos = resReservas.bloqueos; }
                }

                if (resReservas && resReservas.stats) {
                    $('#stat-mis-reservas').text(resReservas.stats.mis_reservas ?? 0);
                    $('#stat-salas').text(resReservas.stats.salas ?? 0);
                    $('#stat-pendientes').text(resReservas.stats.pendientes ?? 0);
                }

                window.dibujarTablaBloques(espacios, listaEventos, mapaBloqueos);
            }).fail(function() {
                window.dibujarTablaBloques(espacios, [], []);
            });

        }).fail(function() {
            console.error('Error al cargar la lista de espacios/salas.');
        });
    };

    window.cargarMetricasIniciales = function() {
        let fechaSel = $('#filtroFecha').val() || new Date().toISOString().substring(0, 10);

        $.get('/api/reservas', { start: fechaSel, end: fechaSel }, function(res) {
            if (res && res.stats) {
                $('#stat-mis-reservas').text(res.stats.mis_reservas ?? 0);
                $('#stat-salas').text(res.stats.salas ?? 0);
                $('#stat-pendientes').text(res.stats.pendientes ?? 0);
            }
        });
    };

    window.actualizarVistaSegunFiltro = function() {
        let salaSel = $('#filtroEspacio option:selected').text();
        let pisoSel = $('#filtroPiso option:selected').text();
        let pisoVal = $('#filtroEspacio').val() ? '' : $('#filtroPiso').val();
        let salaVal = $('#filtroEspacio').val();
        let fechaVal = $('#filtroFecha').val();

        if (!pisoVal && !salaVal) {
            $('#areaImpresion').addClass('d-none');
            $('#seccionLeyenda').addClass('d-none');
            return;
        }

        let fechaObj = new Date(fechaVal + 'T00:00:00');
        let fechaFormateada = fechaObj.toLocaleDateString('es-CL', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' });
        let fechaTextoFinal = fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1);

        $('#areaImpresion').removeClass('d-none');
        $('#seccionLeyenda').removeClass('d-none');

        if (salaVal) {
            $('#tituloSeleccionVista').text(salaSel.split('(')[0]);
            $('#subtituloFechaVista').text(fechaTextoFinal);
            window.cargarMatrizSalas('sala', salaVal);
        } else if (pisoVal) {
            $('#tituloSeleccionVista').text(pisoSel.split('(')[0]);
            $('#subtituloFechaVista').text(fechaTextoFinal);
            window.cargarMatrizSalas('piso', pisoVal);
        }
    };

    document.addEventListener('DOMContentLoaded', function() {
        // Cargar métricas al iniciar
        window.cargarMetricasIniciales();

        const urlParams = new URLSearchParams(window.location.search);
        const fechaParam = urlParams.get('fecha');
        const espacioIdParam = urlParams.get('espacio_id');

        if (fechaParam) {
            $('#filtroFecha').val(fechaParam);
        }

        if ($.fn.selectize) {
            let $selectEspacio =$('#filtroEspacio').selectize({
                create: false,
                sortField: 'text',
                onChange: function(val) {
                    if (val && $('#filtroPiso')[0]?.selectize) {
                        $('#filtroPiso')[0].selectize.clear(true);
                    }
                    window.actualizarVistaSegunFiltro();
                }
            });

            $('#filtroPiso').selectize({ 
                create: false,
                optgroupField: 'optgroup',
                optgroupLabelField: 'label',
                optgroupValueField: 'value',
                lockOptgroupOrder: true,
                dropdownParent: 'body',
                onChange: function(val) {
                    if (val && $('#filtroEspacio')[0]?.selectize) {
                        $('#filtroEspacio')[0].selectize.clear(true);
                    }
                    window.actualizarVistaSegunFiltro();
                }
            });

            if (espacioIdParam && $selectEspacio[0]?.selectize) {$selectEspacio[0].selectize.setValue(espacioIdParam, false);
            }

        } else {
            if (espacioIdParam) {
                $('#filtroEspacio').val(espacioIdParam);
            }

            $('#filtroEspacio, #filtroPiso').on('change', function() {
                window.actualizarVistaSegunFiltro();
            });
        }

        $('#filtroFecha').on('change', function() {
            window.cargarMetricasIniciales();
            window.actualizarVistaSegunFiltro();
        });

        document.getElementById('btnNuevaReserva')?.addEventListener('click', function() { 
            window.abrirModalReserva(); 
        });

        window.actualizarVistaSegunFiltro();
    });

    // =================================================------------
    // 6. DETALLE Y EDICIÓN DE RESERVAS
    // =================================================------------

    window.verDetalleReserva = function(reservaId) {
        if (!reservaId) return;

        Swal.fire({
            title: 'Cargando información...',
            didOpen: () => { Swal.showLoading(); }
        });

        $.get(`/api/reservas/${reservaId}`, function(response) {
            if (!response.success) {
                Swal.fire('Error', 'No se pudo obtener el detalle de la reserva.', 'error');
                return;
            }

            let res = response.data;
            window.reservaEditarActual = res;

            let badgeEstado = res.estado === 'APROBADA' 
                ? '<span class="badge bg-success px-3 py-2">Aprobada</span>' 
                : (res.estado === 'PENDIENTE' ? '<span class="badge bg-warning text-dark px-3 py-2">Pendiente de Aprobación</span>' : '<span class="badge bg-danger px-3 py-2">Rechazada</span>');

            let htmlContent = `
                <div class="text-start fs-6 p-2">
                    <div class="mb-3 d-flex justify-content-between align-items-center border-bottom pb-2">
                        <span class="fw-bold text-secondary">Estado Actual:</span> ${badgeEstado}
                    </div>
                    <div class="mb-2"><strong>Solicitante:</strong> ${res.usuario_nombre} <small class="text-muted">(${res.usuario_correo})</small></div>
                    <div class="mb-2"><strong>Espacio / Sala:</strong> <span class="badge bg-light text-dark border">${res.espacio_nombre}</span></div>
                    <div class="mb-2"><strong>Título / Curso:</strong> ${res.titulo}</div>
                    <div class="mb-2"><strong>Detalle / Descripción:</strong> ${res.descripcion || 'Sin descripción'}</div>
                    <div class="mb-2"><strong>Fecha y Horario:</strong> ${res.fecha_texto} (${res.hora_inicio} - ${res.hora_fin} hrs)</div>
                </div>
            `;

            let btnAprobarHtml = (res.estado === 'PENDIENTE' && res.puede_aprobar) 
                ? `<button type="button" class="btn btn-success fw-bold px-3 shadow-sm" onclick="window.aprobarReservaModal(${res.id})">
                    <i class="bi bi-check-circle me-1"></i> Aprobar
                   </button>` 
                : '';

            let btnEditarHtml = res.puede_editar 
                ? `<button type="button" class="btn btn-warning fw-bold px-3 shadow-sm" onclick="window.abrirEditarReserva()">
                    <i class="bi bi-pencil-square me-1"></i> Editar
                   </button>` 
                : '';

            let btnCancelarHtml = res.puede_cancelar 
                ? `<button type="button" class="btn btn-danger fw-bold px-3 shadow-sm" onclick="window.cancelarReservaModal(${res.id}, ${res.es_recurrente})">
                    <i class="bi bi-trash me-1"></i> ${res.es_recurrente ? 'Cancelar Serie' : 'Cancelar'}
                   </button>` 
                : '';

            let botonesFooter = `
                <div class="d-flex justify-content-between align-items-center w-100 mt-3 pt-3 border-top gap-2 flex-wrap">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        ${btnAprobarHtml}
                        ${btnEditarHtml}
                        ${btnCancelarHtml}
                    </div>
                    <button type="button" class="btn btn-dark fw-semibold px-4 ms-auto" onclick="Swal.close()">
                        <i class="bi bi-x-circle me-1"></i> Cerrar
                    </button>
                </div>
            `;

            Swal.fire({
                title: 'Detalle de la Reserva',
                width: '750px',
                html: htmlContent + botonesFooter,
                showConfirmButton: false,
                showCloseButton: true
            });
        }).fail(function() {
            Swal.fire('Error', 'No se pudo obtener la información de la reserva.', 'error');
        });
    };

    window.aprobarReservaModal = function(id) {
        Swal.fire({
            title: '¿Aprobar esta Reserva?',
            text: 'La reserva cambiará a estado APROBADA y se actualizará en la agenda.',
            icon: 'question',
            showCancelButton: true,
            confirmButtonColor: '#198754',
            confirmButtonText: 'Sí, aprobar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/reservas/${id}/cambiar-estado`,
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        _method: 'PATCH',
                        estado: 'APROBADA'
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: '¡Reserva Aprobada!',
                            text: response.message || 'La reserva ha sido aprobada correctamente.',
                            timer: 1800,
                            showConfirmButton: false
                        });

                        if (typeof window.actualizarVistaSegunFiltro === 'function') {
                            window.actualizarVistaSegunFiltro();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error', xhr.responseJSON?.message || 'No se pudo aprobar la solicitud.', 'error');
                    }
                });
            }
        });
    };

    window.cancelarReservaModal = function(id, esSerie = false) {
        let msgText = esSerie 
            ? "Esta acción eliminará todas las repeticiones pertenecientes a esta serie de reservas." 
            : "Esta acción eliminará tu reserva del sistema.";

        Swal.fire({
            title: esSerie ? '¿Cancelar Serie Completa?' : '¿Cancelar Reserva?',
            text: msgText,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'No, conservar'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: `/reservas/${id}`,
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Eliminada',
                            text: response.message || 'La reserva ha sido cancelada correctamente.',
                            timer: 1800,
                            showConfirmButton: false
                        });

                        if (typeof window.actualizarVistaSegunFiltro === 'function') {
                            window.actualizarVistaSegunFiltro();
                        }
                    },
                    error: function(xhr) {
                        Swal.fire('Error', xhr.responseJSON?.message || 'No se pudo cancelar la solicitud.', 'error');
                    }
                });
            }
        });
    };

    window.obtenerOpcionesEspaciosEditarHtml = function(espacioIdActual) {
        let html = '<option value="">-- Seleccione una Sala / Espacio --</option>';
        let lista = [];

        $('#filtroEspacio option').each(function() {
            let val = $(this).val();
            let txt = $(this).text();
            if (val) {
                lista.push({ id: val, nombre: txt });
            }
        });

        lista.forEach(e => {
            let selected = (String(e.id) === String(espacioIdActual)) ? 'selected' : '';
            html += `<option value="${e.id}" ${selected}>${e.nombre}</option>`;
        });

        return html;
    };

    // -------------------------------------------------------------
    // EDICIÓN FLUÍDA E INTERACTIVA DE RESERVA
    // -------------------------------------------------------------

    window.abrirEditarReserva = function() {
        let res = window.reservaEditarActual;
        if (!res) return;

        let esActividad = (res.tipo_actividad === 'ACTIVIDAD' || res.tipo_actividad === 'EXTENSION');
        let esSemanal   = (res.es_recurrente || res.parent_id || res.repeticion === 'SEMANAL');

        // Construcción de la lista compacta en cuadrícula (Chips / Badges)
        let listaFechasHtml = '';
        if (esSemanal && Array.isArray(res.fechas_serie) && res.fechas_serie.length > 0) {
            listaFechasHtml = `
                <div class="card border-0 bg-light mt-3 p-3 text-start">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="fw-bold text-dark small">
                            <i class="bi bi-calendar-week text-primary me-1"></i> Días agendados en esta serie (${res.fechas_serie.length}):
                        </span>
                        <small class="text-muted" style="font-size:0.75rem;">Clic en una fecha para editar o en la <i class="bi bi-x-circle text-danger"></i> para quitar</small>
                    </div>
                    
                    <!-- Contenedor en cuadrícula compacta con scroll pequeño -->
                    <div class="d-flex flex-wrap gap-2 p-2 bg-white rounded-3 border overflow-auto" style="max-height: 130px;">
            `;

            res.fechas_serie.forEach(f => {
                let esEstaFecha = (String(f.id) === String(res.id));
                let hIniF = f.hora_inicio || res.hora_inicio;
                let hFinF = f.hora_fin || res.hora_fin;

                listaFechasHtml += `
                    <div class="item-fecha-serie badge p-2 d-inline-flex align-items-center gap-2 border text-start ${esEstaFecha ? 'bg-primary text-white border-primary shadow-sm' : 'bg-light text-dark border-secondary-subtle'}" 
                        id="badge-fecha-${f.id}" 
                        style="cursor: pointer; transition: all 0.15s ease-in-out; font-size: 0.8rem; font-weight: 500;"
                        onclick="window.seleccionarFechaParaEditar(${f.id})">
                        <i class="bi ${esEstaFecha ? 'bi-calendar-check-fill text-white' : 'bi-calendar-event text-primary'}"></i>
                        <div>
                            <div class="fw-bold fecha-titulo-text">
                                ${f.dia_nombre} ${f.fecha_formato}
                            </div>
                            <small class="${esEstaFecha ? 'text-white-50' : 'text-muted'}" style="font-size: 0.7rem;">
                                ${hIniF} - ${hFinF} hrs
                            </small>
                        </div>
                        ${res.fechas_serie.length > 1 ? `
                            <button type="button" class="btn-close ${esEstaFecha ? 'btn-close-white' : ''} ms-1" 
                                style="font-size: 0.65rem;" 
                                title="Eliminar este día" 
                                onclick="event.stopPropagation(); window.eliminarFechaPuntualSerie(${f.id}, '${f.fecha_formato}')">
                            </button>
                        ` : ''}
                    </div>
                `;
            });

            listaFechasHtml += `</div></div>`;
        }
        let [hIniNum, mIniNum] = res.hora_inicio.split(':').map(Number);
        let minutosInicio = (hIniNum * 60) + mIniNum;
        let opcionesHoraFinHtml = '';

        for (let min = minutosInicio + 15; min <= 1260; min += 15) {
            let h = Math.floor(min / 60);
            let m = min % 60;
            let timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
            let selected = (timeStr === res.hora_fin) ? 'selected' : '';
            opcionesHoraFinHtml += `<option value="${timeStr}" ${selected}>${timeStr} hrs</option>`;
        }

        Swal.fire({
            title: esActividad ? 'Editar Reserva de Actividad / Evento' : 'Editar Reserva de Clase / Curso',
            width: '750px',
            showConfirmButton: false,
            showCloseButton: true,
            html: `
                <div class="card bg-white border shadow-sm mb-3 text-start p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge ${esActividad ? 'bg-purple text-white' : 'bg-primary'}" style="${esActividad ? 'background-color: #6f42c1;' : ''}">
                            <i class="bi ${esActividad ? 'bi-star-fill' : 'bi-book'} me-1"></i> ${esActividad ? 'Actividad / Evento' : 'Clase / Curso'}
                        </span>
                        <small class="text-muted">Solicitante: <strong>${res.usuario_nombre}</strong></small>
                    </div>

                    ${esSemanal ? `
                    <div class="p-2 bg-light rounded-3 border mt-2">
                        <label class="form-label small fw-bold text-secondary mb-1">¿A cuáles días aplicar los cambios?</label>
                        <div class="btn-group w-100" role="group">
                            <input type="radio" class="btn-check" name="edit_alcance" id="alcance_solo_este" value="INDIVIDUAL" checked onchange="window.resetearValidacionEdit();">
                            <label class="btn btn-outline-primary btn-sm fw-semibold" for="alcance_solo_este" id="lbl_alcance_solo_este">
                                <i class="bi bi-calendar-event me-1"></i> Solo a esta fecha (${res.fecha_texto})
                            </label>

                            <input type="radio" class="btn-check" name="edit_alcance" id="alcance_toda_serie" value="GRUPAL" onchange="window.resetearValidacionEdit();">
                            <label class="btn btn-outline-primary btn-sm fw-semibold" for="alcance_toda_serie">
                                <i class="bi bi-arrow-repeat me-1"></i> A todos los días de la serie (${res.fechas_serie ? res.fechas_serie.length : ''})
                            </label>
                        </div>
                    </div>
                    ` : ''}
                </div>

                <form id="formEditModal" class="text-start">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1">Sala / Espacio Asignado <span class="text-danger">*</span></label>
                            <select id="edit_cur_espacio_id" class="form-select border-primary fw-bold" onchange="window.resetearValidacionEdit();">
                                ${window.obtenerOpcionesEspaciosEditarHtml(res.espacio_id)}
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1">Tipo de Actividad</label>
                            <input type="text" class="form-control bg-light" value="${esActividad ? 'Actividad / Evento Extensión' : 'Clase Curricular'}" readonly style="cursor: not-allowed;">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted mb-1">Nombre reserva / Asignatura <span class="text-danger">*</span></label>
                        <input type="text" id="edit_cur_nombre_reserva" class="form-control fw-bold" value="${res.titulo}" oninput="window.resetearValidacionEdit();">
                    </div>

                    <div class="mb-3">
                        <label class="form-label small fw-bold text-muted mb-1">Descripción / Detalle <span class="text-danger">*</span></label>
                        <textarea id="edit_cur_descripcion" class="form-control" rows="2" oninput="window.resetearValidacionEdit();">${res.descripcion || ''}</textarea>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1">Hora de reserva</label>
                            <input type="text" id="edit_cur_hora_inicio" class="form-control bg-light" value="${res.hora_inicio}" readonly style="cursor: not-allowed;">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold text-muted mb-1">Hora de término</label>
                            <select id="edit_cur_hora_fin" class="form-select border-primary" onchange="window.resetearValidacionEdit();">${opcionesHoraFinHtml}</select>
                        </div>
                    </div>

                    ${listaFechasHtml}

                    <div id="msgDisponibilidadEdit" class="mt-3"></div>
                </form>

                <div class="modal-footer bg-light border-0 d-flex justify-content-between align-items-center w-100 mt-3 pt-3">
                    <button type="button" class="btn btn-outline-secondary" onclick="Swal.close()">
                        <i class="bi bi-arrow-left me-1"></i> Volver
                    </button>
                    
                    <div>
                        <button type="button" id="btnRevisarDisponibilidadEdit" class="btn btn-info text-white fw-bold px-3 me-2" onclick="window.revisarDisponibilidadEdit()">
                            <i class="bi bi-search me-1"></i> Revisar Disponibilidad
                        </button>

                        <button type="button" id="btnGuardarEdicion" class="btn btn-primary fw-bold px-4 d-none" onclick="window.guardarEdicionReserva()">
                            <i class="bi bi-floppy me-1"></i> Guardar Cambios
                        </button>
                    </div>
                </div>
            `
        });
    };
    
    window.seleccionarFechaParaEditar = function(reservaId) {
        let resActual = window.reservaEditarActual;
        if (!resActual || !resActual.fechas_serie) return;

        let fechaTarget = resActual.fechas_serie.find(f => String(f.id) === String(reservaId));
        if (!fechaTarget) return;

        // 1. Actualizar memoria
        window.reservaEditarActual.id = fechaTarget.id;
        window.reservaEditarActual.fecha_base = fechaTarget.fecha_iso;
        window.reservaEditarActual.fecha_texto = fechaTarget.fecha_formato;
        window.reservaEditarActual.hora_inicio = fechaTarget.hora_inicio || resActual.hora_inicio;
        window.reservaEditarActual.hora_fin = fechaTarget.hora_fin || resActual.hora_fin;

        // 2. Actualizar horarios en el formulario principal
        let hInicioPuntual = fechaTarget.hora_inicio || resActual.hora_inicio;
        let hFinPuntual = fechaTarget.hora_fin || resActual.hora_fin;

        $('#edit_cur_hora_inicio').val(hInicioPuntual);

        let [hIniNum, mIniNum] = hInicioPuntual.split(':').map(Number);
        let minutosInicio = (hIniNum * 60) + mIniNum;
        let opcionesHoraFinHtml = '';

        for (let min = minutosInicio + 15; min <= 1260; min += 15) {
            let h = Math.floor(min / 60);
            let m = min % 60;
            let timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
            let selected = (timeStr === hFinPuntual) ? 'selected' : '';
            opcionesHoraFinHtml += `<option value="${timeStr}" ${selected}>${timeStr} hrs</option>`;
        }
        $('#edit_cur_hora_fin').html(opcionesHoraFinHtml);

        // 3. Resaltar la cápsula/chip seleccionada en la cuadrícula
        $('.item-fecha-serie')
            .removeClass('bg-primary text-white border-primary shadow-sm')
            .addClass('bg-light text-dark border-secondary-subtle');
        
        $('.item-fecha-serie i.bi').removeClass('bi-calendar-check-fill text-white').addClass('bi-calendar-event text-primary');
        $('.item-fecha-serie small').removeClass('text-white-50').addClass('text-muted');$('.item-fecha-serie .btn-close').removeClass('btn-close-white');

        let $itemActivo =$(`#badge-fecha-${reservaId}`);
        $itemActivo
            .removeClass('bg-light text-dark border-secondary-subtle')
            .addClass('bg-primary text-white border-primary shadow-sm');

        $itemActivo.find('i.bi').removeClass('bi-calendar-event text-primary').addClass('bi-calendar-check-fill text-white');
        $itemActivo.find('small').removeClass('text-muted').addClass('text-white-50');$itemActivo.find('.btn-close').addClass('btn-close-white');

        // 4. Actualizar la etiqueta del botón de alcance
        $('#lbl_alcance_solo_este').html(`<i class="bi bi-calendar-event me-1"></i> Solo a esta fecha (${fechaTarget.fecha_formato})`);

        window.resetearValidacionEdit();
    };

    window.resetearValidacionEdit = function() {
        $('#btnGuardarEdicion').addClass('d-none');
        $('#msgDisponibilidadEdit').empty();
    };

    window.revisarDisponibilidadEdit = function() {
        let res = window.reservaEditarActual;
        if (!res) return;

        let espacioId  = $('#edit_cur_espacio_id').val();
        let fIni       = res.fecha_base;
        let hIni       = $('#edit_cur_hora_inicio').val();
        let fFin       = $('#edit_cur_fecha_fin').val() || fIni;
        let hFin       = $('#edit_cur_hora_fin').val();
        let repeticion = $('#edit_cur_repeticion').val();

        let $msgContainer =$('#msgDisponibilidadEdit');
        let $btnGuardar   =$('#btnGuardarEdicion');

        if (!espacioId) {
            $msgContainer.html('<div class="alert alert-warning p-2 small mb-0"><i class="bi bi-exclamation-triangle me-1"></i> Seleccione un espacio/sala.</div>');
            $btnGuardar.addClass('d-none');
            return;
        }

        let diasSemana = [];
        if (repeticion === 'SEMANAL') {
            $('.chk-dia-edit:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });

            if (diasSemana.length === 0) {
                $msgContainer.html('<div class="alert alert-warning p-2 small mb-0"><i class="bi bi-exclamation-triangle me-1"></i> Selecciona al menos un día de la semana para la repetición.</div>');
                $btnGuardar.addClass('d-none');
                return;
            }
        }

        $msgContainer.html('<div class="alert alert-info p-2 small mb-0"><i class="bi bi-hourglass-split me-1"></i> Comprobando disponibilidad del horario...</div>');
        $btnGuardar.addClass('d-none');

        $.ajax({
            url: '/api/reservas/check-disponibilidad',
            type: 'GET',
            data: {
                espacio_id: espacioId,
                fecha_inicio: fIni + ' ' + hIni,
                fecha_fin: fFin + ' ' + hFin,
                repeticion: repeticion,
                dias_semana: diasSemana,
                reserva_id: res.id
            },
            success: function(resDisponibilidad) {
                if (resDisponibilidad.disponible) {
                    $msgContainer.html('<div class="alert alert-success p-2 small mb-0"><i class="bi bi-check-circle-fill me-1"></i> <b>¡Horario Disponible!</b> Puedes guardar los cambios.</div>');
                    $btnGuardar.removeClass('d-none');
                } else {
                    let detalles = '';
                    if (resDisponibilidad.conflictos && resDisponibilidad.conflictos.length > 0) {
                        detalles = '<ul class="mb-0 ps-3 mt-1 small">' + 
                            resDisponibilidad.conflictos.map(function(c) {
                                return '<li><b>' + c.fecha + '</b> (' + c.hora_inicio + ' - ' + c.hora_fin + '): ' + c.titulo + '</li>';
                            }).join('') + 
                            '</ul>';
                    }

                    $msgContainer.html('<div class="alert alert-danger p-2 text-start small mb-0">' +
                        '<i class="bi bi-x-circle-fill me-1"></i> <b>Conflicto de Horario:</b>' +
                        '<div>' + (resDisponibilidad.message || 'La sala se encuentra ocupada.') + '</div>' +
                        detalles +
                    '</div>');
                    $btnGuardar.addClass('d-none');
                }
            },
            error: function() {
                $msgContainer.html('<div class="alert alert-danger p-2 small mb-0"><i class="bi bi-exclamation-triangle-fill me-1"></i> No se pudo verificar la disponibilidad en este momento.</div>');
                $btnGuardar.addClass('d-none');
            }
        });
    };

    window.guardarEdicionReserva = function() {
        let resActual = window.reservaEditarActual;
        if (!resActual) return;

        let idReservaAEditar = resActual.id;
        let espacioId   = $('#edit_cur_espacio_id').val();
        let titulo      = $('#edit_cur_nombre_reserva').val();
        let desc        = $('#edit_cur_descripcion').val();
        let hIni        = $('#edit_cur_hora_inicio').val();
        let hFin        = $('#edit_cur_hora_fin').val();
        let repeticion  = $('#edit_cur_repeticion').val();
        let fechaFin    = $('#edit_cur_fecha_fin').val();
        let tipoEdicion = $('input[name="edit_alcance"]:checked').val() || 'INDIVIDUAL';

        let diasSemana = [];
        if (repeticion === 'SEMANAL') {
            $('.chk-dia-edit:checked').each(function() {
                diasSemana.push(parseInt($(this).val(), 10));
            });
        }

        $.ajax({
            url: `/api/reservas/${idReservaAEditar}`,
            type: 'PUT',
            data: {
                _token: $('meta[name="csrf-token"]').attr('content'),
                espacio_id: espacioId,
                titulo: titulo.substring(0, 145),
                descripcion: desc,
                tipo_actividad: resActual.tipo_actividad || 'CLASE',
                hora_inicio: hIni,
                hora_fin: hFin,
                repeticion: repeticion,
                fecha_fin: fechaFin,
                dias_semana: diasSemana,
                tipo_edicion: tipoEdicion
            },
            success: function(response) {
                Swal.fire({
                    icon: 'success',
                    title: '¡Reserva Actualizada!',
                    text: response.message || 'Los cambios han sido guardados correctamente.',
                    timer: 1800,
                    showConfirmButton: false
                });

                if (typeof window.actualizarVistaSegunFiltro === 'function') {
                    window.actualizarVistaSegunFiltro();
                }
            },
            error: function(xhr) {
                let msj = xhr.responseJSON?.message || 'No se pudieron guardar los cambios.';
                Swal.fire('Error al actualizar', msj, 'error');
            }
        });
    };

    window.eliminarFechaPuntualSerie = function(reservaId, fechaTexto) {
        Swal.fire({
            title: `¿Eliminar ${fechaTexto}?`,
            text: "Esta fecha específica se quitará de la serie.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                let $itemBadge =$(`#badge-fecha-${reservaId}`);
                
                if ($itemBadge.length) {$itemBadge.css('opacity', '0.4').addClass('pe-none');
                }

                $.ajax({
                    url: `/reservas/${reservaId}`,
                    type: 'POST',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content'),
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        // 1. Quitar la fila de la lista en la modal sin cerrarla
                        if ($itemBadge.length) {
                            $itemBadge.slideUp(200, function() {$(this).remove();
                            });
                        }

                        // 2. Actualizar el arreglo de fechas en la estructura global
                        if (window.reservaEditarActual && Array.isArray(window.reservaEditarActual.fechas_serie)) {
                            window.reservaEditarActual.fechas_serie = window.reservaEditarActual.fechas_serie.filter(f => String(f.id) !== String(reservaId));
                            
                            let nuevoTotal = window.reservaEditarActual.fechas_serie.length;
                            $('#cntFechasSerieModal').text(nuevoTotal);

                            // Si la fecha eliminada era la que se estaba editando en ese momento, pasar a la siguiente disponible
                            if (String(window.reservaEditarActual.id) === String(reservaId) && nuevoTotal > 0) {
                                let siguienteFecha = window.reservaEditarActual.fechas_serie[0];
                                window.seleccionarFechaParaEditar(siguienteFecha.id);
                            }
                        }

                        // 3. Notificación flotante pequeña (Toast)
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });

                        Toast.fire({
                            icon: 'success',
                            title: `Día ${fechaTexto} eliminado`
                        });

                        // 4. Refrescar la matriz/tabla de fondo sin alterar la modal
                        if (typeof window.actualizarVistaSegunFiltro === 'function') {
                            window.actualizarVistaSegunFiltro();
                        }
                    },
                    error: function(xhr) {
                        if ($itemBadge.length) {$itemBadge.css('opacity', '1').removeClass('pe-none');
                        }
                        Swal.fire('Error', xhr.responseJSON?.message || 'No se pudo eliminar la fecha.', 'error');
                    }
                });
            }
        });
    };

    window.cancelarBorradoBadge = function(reservaId, fechaTexto) {
        let $badge =$(`#badge-fecha-${reservaId}`);
        if ($badge.length) {
            $badge.removeClass('confirmando bg-danger text-white border-danger pe-none').addClass('bg-secondary-subtle text-dark').css('opacity', '1');$badge.html(`
                <i class="bi bi-calendar-check text-primary"></i> ${fechaTexto}
                <button type="button" class="btn-close ms-1" style="font-size: 0.65rem;" 
                    title="Eliminar este día" onclick="window.eliminarFechaPuntualSerie(${reservaId}, '${fechaTexto}')">
                </button>
            `);
        }
    };
</script>
@endpush