@extends('layout.template')
@section('title', 'ICAT')
@php
    $perfilUsuarioAgenda = (int) (auth()->user()->perfil_id ?? 0);
    $puedeGestionarAgenda =
        \Illuminate\Support\Facades\Gate::allows('permiso', ['Agenda', 'alta_agenda']) || (auth()->user()->isAdministrator() || auth()->user()->hasProfile('Unidad') || auth()->user()->hasProfile('Vinculación'));
@endphp
@if ($puedeGestionarAgenda)
@section('content')
    <style>
        .agenda-select2-wrap {
            max-width: 520px;
        }

        .agenda-select2-wrap .select2-container {
            width: 100% !important;
        }

        .agenda-select2-dd {
            max-width: 520px !important;
        }

        .agenda-select2-dd .select2-results>.select2-results__options {
            max-height: 280px;
        }

        .agenda-header-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .agenda-aula-option-title {
            font-weight: 700;
            text-transform: uppercase;
            font-size: 0.85rem;
            line-height: 1.2;
        }

        .agenda-aula-option-sub {
            font-size: 0.75rem;
            color: #6c757d;
        }
    </style>
    @php
        $esEdicion = !is_null($agenda);
        $estatusAgenda = $esEdicion ? (int) ($agenda->estatus ?? 0) : 0;
        $agendaBloqueada = $esEdicion && in_array($estatusAgenda, [3, 4], true);
        $calculoAgenda = $esEdicion && $agenda->calculo ? json_decode($agenda->calculo, true) : [];
        $diasAgenda = is_array($calculoAgenda) && isset($calculoAgenda['dias']) ? $calculoAgenda['dias'] : [];
        $dias = ['lunes' => 'LUNES', 'martes' => 'MARTES', 'miercoles' => 'MIERCOLES', 'jueves' => 'JUEVES', 'viernes' => 'VIERNES', 'sabado' => 'SABADO', 'domingo' => 'DOMINGO'];
        $resumenEdicionJs = null;
        if ($esEdicion && isset($agenda)) {
            $hpm = $agenda->horas_por_mes ?? null;
            if (is_string($hpm)) {
                $hpm = json_decode($hpm, true);
            }
            $hsw = $agenda->horas_semanas ?? null;
            if (is_string($hsw)) {
                $hsw = json_decode($hsw, true);
            }
            $resInhab =
                is_array($calculoAgenda) && isset($calculoAgenda['resumen']['dias_inhabiles_en_periodo'])
                    ? (int) $calculoAgenda['resumen']['dias_inhabiles_en_periodo']
                    : 0;
            $resumenEdicionJs = [
                'fecha_inicio' => \Carbon\Carbon::parse($agenda->fecha_inicio)->format('d/m/Y'),
                'fecha_termino' => \Carbon\Carbon::parse($agenda->fecha_termino)->format('d/m/Y'),
                'horas_totales' => (int) ($agenda->horas_totales ?? 0),
                'horas_por_mes' => is_array($hpm) ? $hpm : [],
                'horas_semanas' => is_array($hsw) ? $hsw : [],
                'sesiones' => (int) ($agenda->sesiones ?? 0),
                'inhabiles_en_periodo' => $resInhab,
            ];
        }
    @endphp

    <div class="content-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-start">
                            <div>
                                <h4 class="card-title mb-1">
                                    @if ($esEdicion)
                                        Editar Agenda {{ $agenda->clave ?? '' }}
                                    @else
                                        Agendar Evaluación
                                    @endif
                                </h4>
                                @if ($esEdicion && !empty($agenda->evaluador_nombre))
                                    <small class="text-muted">
                                        Evaluador: <strong>{{ $agenda->evaluador_nombre }}</strong>
                                    </small>
                                @endif
                            </div>
                            @if ($esEdicion)
                                <div class="agenda-header-actions">
                                    <a href="{{ route('agendaPdf', $agenda->id) }}" target="_blank"
                                        class="btn btn-outline-primary btn-sm">
                                        <i class=" ri-file-pdf-2-line me-1"></i> Imprimir PDF
                                    </a>
                                </div>
                            @endif
                        </div>
                        <div class="card-body">
                            @if (session('success'))
                                <div class="alert alert-primary alert-dismissible fade show">
                                    <strong>{{ session('success') }}</strong>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show">
                                    <strong>{{ session('error') }}</strong>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                                <ol class="breadcrumb">
                                    <a href="{{ url('agenda') }}" class="btn btn-rounded btn-dark back-fixed"
                                        aria-label="Regresar">
                                        <span class="btn-icon-start text-dark"><i class=" ri-arrow-left-line"></i></span>
                                        Regresar
                                    </a>
                                </ol>
                            </div>

                           

                            <form id="formAgendaEval" method="POST"
                                action="{{ $esEdicion ? route('agendaUpdate', $agenda->id) : route('agendaStore') }}">
                                @csrf
                                @if ($esEdicion)
                                    <input type="hidden" name="age_id_edicion" value="{{ $agenda->id }}">
                                @endif
                                <input type="hidden" name="age_estatus_accion" id="age_estatus_accion" value="">
                                <input type="hidden" name="age_observacion_accion" id="age_observacion_accion" value="">
                                <div class="row align-items-end">
                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Unidad</label>
                                        <div class="agenda-select2-wrap">
                                            <select name="unidad_id" id="unidad_id"
                                                class="form-control agenda-select2 agenda-no-selectpicker" required>
                                                <option value="">Seleccione</option>
                                                @foreach ($unidades as $unidad)
                                                    <option value="{{ $unidad->id }}"
                                                        {{ old('unidad_id', $agenda->unidad_id ?? '') == $unidad->id ? 'selected' : '' }}>
                                                        {{ $unidad->nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-4 col-md-6 mb-3">
                                        <label class="form-label">Estandar</label>
                                        <div class="agenda-select2-wrap">
                                            <select name="certificacion_id" id="certificacion_id"
                                                class="form-control agenda-select2 agenda-no-selectpicker" required>
                                                <option value="">Seleccione</option>
                                                @foreach ($estandares as $estandar)
                                                    <option value="{{ $estandar->clave ?? $estandar->clave }}"
                                                        data-horas="{{ $estandar->evaluacion_horas ?? 0 }}"
                                                        {{ old('certificacion_id', $agenda->certificacion_id ?? '') == ($estandar->clave ?? $estandar->clave) ? 'selected' : '' }}>
                                                        {{ $estandar->clave }} - {{ $estandar->nombre }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-1 col-md-6 mb-3">
                                        <label class="form-label">Horas</label>
                                        <input type="number" class="form-control" name="horas_evaluacion"
                                            id="horas_evaluacion" step="0.01" min="0" readonly
                                            value="{{ old('horas_evaluacion', $agenda->horas_evaluacion ?? 0) }}">
                                    </div>

                                    <div class="col-lg-1 col-md-6 mb-3">
                                        <label class="form-label">Capacitandos</label>
                                        <input type="number" class="form-control" name="capacitandos" min="1"
                                            id="capacitandos" required
                                            value="{{ old('capacitandos', $agenda->capacitandos ?? 0) }}">
                                    </div>

                                    <div class="col-lg-2 col-md-6 mb-3">
                                        <label class="form-label">Horas Totales Evaluación</label>
                                        <input type="number" class="form-control" name="horas_totales_evaluacion"
                                            id="horas_totales_evaluacion" step="0.01" min="0" readonly
                                            value="{{ old('horas_totales_evaluacion', $agenda->horas_totales_evaluacion ?? 0) }}">
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Fecha Inicial</label>
                                        <input type="text" class="form-control" id="fecha_inicio" name="fecha_inicio"
                                            value="{{ old('fecha_inicio', $esEdicion ? \Carbon\Carbon::parse($agenda->fecha_inicio)->format('d/m/Y') : '') }}"
                                            placeholder="Seleccione fecha" required>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Fecha Final</label>
                                        <input type="text" class="form-control" id="fecha_termino" name="fecha_termino"
                                            value="{{ old('fecha_termino', $esEdicion ? \Carbon\Carbon::parse($agenda->fecha_termino)->format('d/m/Y') : '') }}"
                                            placeholder="Se calcula automaticamente" readonly required>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">Fecha de Proceso</label>
                                        <input type="text" class="form-control" id="fecha_proceso_inicio"
                                            name="fecha_proceso_inicio"
                                            value="{{ old('fecha_proceso_inicio', $esEdicion && !empty($agenda->fecha_proceso_inicio) ? \Carbon\Carbon::parse($agenda->fecha_proceso_inicio)->format('d/m/Y') : '') }}"
                                            placeholder="Seleccione fecha" required>
                                    </div>
                                </div>

                                <div class="alert alert-primary alert-dismissible fade show bg-primary">
                                    <i class=" ri-calendar-line text-white fs-3 float-start mx-1 p-0"></i>
                                    <span class="text-white">Programación de horarios</span>
                                </div>

                                @php
                                    $horariosInicio = [];
                                    $horariosFin = [];
                                    for ($h = 6; $h <= 21; $h++) {
                                        $horariosInicio[] = sprintf('%02d:00', $h);
                                    }
                                    for ($h = 6; $h <= 22; $h++) {
                                        $horariosFin[] = sprintf('%02d:00', $h);
                                    }
                                @endphp

                                <div class="row">
                                    <div class="col-lg-7 mb-3">
                                        @foreach ($dias as $diaClave => $diaNombre)
                                            @php
                                                $infoDia = old("dias.{$diaClave}") ?? ($diasAgenda[$diaNombre] ?? []);
                                                $estaActivo = isset($infoDia['activo']) || (isset($infoDia['inicio']) && isset($infoDia['fin']));
                                                $horaInicio = $infoDia['inicio'] ?? '';
                                                $horaFin = $infoDia['fin'] ?? '';
                                            @endphp
                                            <div class="row align-items-center mb-2">
                                                <div class="col-5">
                                                    <div class="form-check">
                                                        <input class="form-check-input dia-checkbox" type="checkbox"
                                                            id="dia_{{ $diaClave }}" data-dia="{{ $diaClave }}"
                                                            name="dias[{{ $diaClave }}][activo]"
                                                            {{ $estaActivo ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="dia_{{ $diaClave }}">{{ ucfirst(strtolower($diaNombre)) }}</label>
                                                    </div>
                                                </div>
                                                <div class="col-7 d-flex gap-2">
                                                    <select class="form-control horario-select"
                                                        id="inicio_{{ $diaClave }}"
                                                        name="dias[{{ $diaClave }}][inicio]"
                                                        {{ $estaActivo ? '' : 'disabled' }}>
                                                        <option value="">Inicia</option>
                                                        @foreach ($horariosInicio as $hora)
                                                            <option value="{{ $hora }}"
                                                                {{ $horaInicio === $hora ? 'selected' : '' }}>
                                                                {{ $hora }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    <select class="form-control horario-select"
                                                        id="fin_{{ $diaClave }}"
                                                        name="dias[{{ $diaClave }}][fin]"
                                                        {{ $estaActivo ? '' : 'disabled' }}>
                                                        <option value="">Termina</option>
                                                        @foreach ($horariosFin as $hora)
                                                            <option value="{{ $hora }}"
                                                                {{ $horaFin === $hora ? 'selected' : '' }}>
                                                                {{ $hora }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        @endforeach
                                        @if (!$agendaBloqueada)
                                            <div class="mt-3">
                                                <button type="button" class="btn btn-primary w-100" id="btnProgramar">
                                                    Programar Fechas y horarios
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-lg-5 mb-3">
                                        <h5 class="text-center mb-3">Cálculo de días</h5>
                                        <div id="alertEmpalmeAgenda" class="alert alert-danger d-none w-100 small mb-2"
                                            role="alert"></div>
                                        <div id="alertHorasAgenda" class="alert alert-warning d-none w-100 small mb-2"
                                            role="alert"></div>
                                        <div class="card align-items-center">
                                            <i class=" ri-calendar-schedule-line ri-size-4x mt-3"></i>
                                            <ul class="list-group list-group-flush w-100 text-center px-3 pb-3">
                                                <li class="list-group-item"><span>Hrs Totales:</span> <strong
                                                        id="resHoras">0</strong></li>
                                                <li class="list-group-item"><span>Hrs por Mes:</span> <strong
                                                        id="resHorasMes">0</strong></li>
                                                <li class="list-group-item">
                                                    <span>Hrs por semana:</span>
                                                    <strong id="resHorasSemana"></strong>
                                                </li>
                                                <li class="list-group-item"><span>Sesiones:</span> <strong
                                                        id="resSesiones">0</strong></li>
                                                {{-- <li class="list-group-item"><span>Dias Inhabiles:</span> <strong
                                                        id="resInhabiles">0</strong></li> --}}
                                                <li class="list-group-item"><span>Horario general:</span> <strong
                                                        id="resHorario">-</strong></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

                                @if ($esEdicion && $agenda->estatus != 1)
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <label class="form-label">Observación</label>
                                            <input type="text" class="form-control" name="observacion" maxlength="255"
                                                value="{{ old('observacion', $agenda->observacion ?? '') }}"
                                                onkeyup="this.value = this.value.toUpperCase()" readonly>
                                        </div>
                                    </div>
                                @endif

                                @puede('Agenda', 'evaluador_agenda')
                                    @if (!$agendaBloqueada)
                                        <div class="d-flex justify-content-end gap-2">
                                            <a href="{{ route('agenda') }}" class="btn btn-danger light">Cancelar</a>
                                            <button type="submit" class="btn btn-success">{{ $esEdicion ? 'Actualizar' : 'Guardar' }}</button>
                                        </div>
                                    @endif
                                @endpuede

                                @puede('Agenda', 'autorizar_agenda')
                                    @if ($esEdicion && $estatusAgenda === 1)
                                        <div class="row g-2 mt-4">
                                            <div class="col-md-6">
                                                <button type="button" class="btn btn-danger w-100"
                                                    data-bs-toggle="modal" data-bs-target="#modalRechazarAgenda">
                                                    Rechazar
                                                </button>
                                            </div>
                                            <div class="col-md-6">
                                                <button type="button" class="btn btn-success w-100"
                                                    data-bs-toggle="modal" data-bs-target="#modalAutorizarAgenda">
                                                    Autorizar
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                @endpuede

                                @puede('Agenda', 'vinculacion_agenda')
                                    @if ($esEdicion && $estatusAgenda === 3)
                                        <div class="row mt-4">
                                            <div class="col-12">
                                                <button type="button" class="btn btn-success w-100"
                                                    data-bs-toggle="modal" data-bs-target="#modalFinalizarAgenda">
                                                    Finalizar agenda
                                                </button>
                                            </div>
                                        </div>
                                    @endif
                                @endpuede

                                @if ($esEdicion && $estatusAgenda === 4)
                                    <div class="row mt-4">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Clave de registro</label>
                                            <input type="text" class="form-control"
                                                value="{{ $agenda->clave_registro ?? '' }}" readonly>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Nombre del curso</label>
                                            <input type="text" class="form-control"
                                                value="{{ $agenda->curso_nombre ?? '' }}" readonly>
                                        </div>
                                    </div>
                                @endif

                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($esEdicion && $estatusAgenda === 1)
        <div class="modal fade" id="modalRechazarAgenda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-danger-subtle">
                        <h5 class="modal-title">Rechazar Agenda {{ $agenda->clave ?? '' }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label for="detalleRechazoAgenda" class="form-label">Detalle</label>
                        <textarea id="detalleRechazoAgenda" class="form-control" rows="3" maxlength="255"
                            placeholder="Escriba su observacion" onkeyup="this.value = this.value.toUpperCase()"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-danger" id="btnConfirmarRechazoAgenda">Confirmar</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalAutorizarAgenda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header bg-success-subtle">
                        <h5 class="modal-title">Autorizar Agenda {{ $agenda->clave ?? '' }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <label for="detalleAutorizarAgenda" class="form-label">Detalle</label>
                        <textarea id="detalleAutorizarAgenda" class="form-control" rows="3" maxlength="255"
                            placeholder="Escriba su observacion" onkeyup="this.value = this.value.toUpperCase()"></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cerrar</button>
                        <button type="button" class="btn btn-success" id="btnConfirmarAutorizarAgenda">Confirmar</button>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @puede('Agenda', 'vinculacion_agenda')
        @if ($esEdicion && $estatusAgenda === 3)
        <div class="modal fade" id="modalFinalizarAgenda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Finalizar agenda {{ $agenda->clave ?? '' }}</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-3">Seleccione el aula que se vincular&aacute; a esta agenda.</p>
                        <label for="select_aula_finalizar" class="form-label font-weight-bold">Seleccionar Aula</label>
                        <div class="agenda-select2-wrap">
                            <select id="select_aula_finalizar" class="form-control agenda-no-selectpicker" style="width:100%">
                                <option value="">Seleccione un aula...</option>
                            </select>
                        </div>
                        <div id="errorAulaFinalizar" class="text-danger small mt-2 d-none"></div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="btn btn-primary" id="btnContinuarFinalizarAgenda" disabled>
                            Continuar
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalConfirmarFinalizarAgenda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-success-subtle">
                        <h5 class="modal-title">Confirmar finalizaci&oacute;n</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-2">&iquest;Desea vincular el siguiente aula y finalizar  agenda?</p>
                        <p class="mb-1"><strong id="confirmAulaNombre"></strong></p>
                        <p class="mb-0 text-muted small">Clave: <span id="confirmAulaClave"></span></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                        <form id="formFinalizarAgenda" method="POST"
                            action="{{ route('agendaFinalizar', $agenda->id) }}">
                            @csrf
                            <input type="hidden" name="id" id="inputAulaFinalizarId" value="">
                            <button type="submit" class="btn btn-success">Confirmar</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalAulaDuplicadaAgenda" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header bg-danger-subtle">
                        <h5 class="modal-title">Aula no disponible</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                    </div>
                    <div class="modal-body">
                        <p class="mb-0" id="mensajeAulaDuplicada"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Aceptar</button>
                    </div>
                </div>
            </div>
        </div>
        @endif
    @endpuede
@endsection
@push('scripts')
    <script>
        const agendaFechasInhabilesUrl = @json(route('agendaFechasInhabiles'));
        const agendaVerificarEmpalmeUrl = @json(route('agendaVerificarEmpalme'));
        const agendaResumenEdicion = @json($resumenEdicionJs);
        const agendaCalculoEdicion = @json($calculoAgenda ?? []);

        function ocultarAlertaEmpalme() {
            $('#alertEmpalmeAgenda').addClass('d-none').empty();
            $('#resHorario').removeClass('text-danger');
        }

        function ocultarAlertaHoras() {
            $('#alertHorasAgenda').addClass('d-none').empty();
            $('#resHoras').removeClass('text-danger');
        }

        function mostrarAlertaHoras(mensaje) {
            $('#alertHorasAgenda').removeClass('d-none').text(mensaje);
            $('#resHoras').addClass('text-danger');
        }

        function validarHorasTotalesCalculadas() {
            ocultarAlertaHoras();
            const horasCalculadas = parseFloat(String($('#resHoras').text() || '0').replace(',', '.'));
            const horasTotalesEvaluacion = parseFloat(String($('#horas_totales_evaluacion').val() || '0').replace(',', '.'));

            const calc = Number.isFinite(horasCalculadas) ? horasCalculadas : 0;
            const totalEval = Number.isFinite(horasTotalesEvaluacion) ? horasTotalesEvaluacion : 0;
            const diff = Math.round((calc - totalEval) * 100) / 100;

            if (diff > 0) {
                mostrarAlertaHoras(' horas totales calculadas no pueden ser mayores a  Horas Totales Evaluación');
                return false;
            }

            if (diff < 0) {
                mostrarAlertaHoras(' horas totales calculadas no pueden ser menores a  Horas Totales Evaluación');
                return false;
            }

            return true;
        }

        function parseDateDMY(value) {
            if (!value) return null;
            const parts = value.split('/');
            if (parts.length !== 3) return null;
            return new Date(`${parts[2]}-${parts[1]}-${parts[0]}T00:00:00`);
        }

        function formatDateDMY(dateObj) {
            const day = String(dateObj.getDate()).padStart(2, '0');
            const month = String(dateObj.getMonth() + 1).padStart(2, '0');
            const year = dateObj.getFullYear();
            return `${day}/${month}/${year}`;
        }

        function formatYMD(dateObj) {
            const y = dateObj.getFullYear();
            const m = String(dateObj.getMonth() + 1).padStart(2, '0');
            const d = String(dateObj.getDate()).padStart(2, '0');
            return `${y}-${m}-${d}`;
        }

        function isoWeekday(dateObj) {
            const dow = dateObj.getDay();
            return dow === 0 ? 7 : dow;
        }

        function toMinutes(hour) {
            const parts = hour.split(':');
            return (parseInt(parts[0], 10) * 60) + parseInt(parts[1], 10);
        }

        function formatMinutes(minutes) {
            const hh = String(Math.floor(minutes / 60)).padStart(2, '0');
            const mm = String(minutes % 60).padStart(2, '0');
            return `${hh}:${mm}`;
        }

        function opcionesTerminaDesdeInicio(inicioStr) {
            if (!inicioStr) return [];
            const ini = toMinutes(inicioStr);
            const maxMin = Math.min(22 * 60, ini + 8 * 60);
            const out = [];
            for (let m = ini + 60; m <= maxMin; m += 60) {
                out.push(formatMinutes(m));
            }
            return out;
        }

        function reconstruirSelectFin(diaClave, preserveValue) {
            const $ini = $(`#inicio_${diaClave}`);
            const $fin = $(`#fin_${diaClave}`);
            const prev = preserveValue ? $fin.val() : '';
            const inicioVal = $ini.val();
            const opts = opcionesTerminaDesdeInicio(inicioVal);
            $fin.empty().append($('<option>', {
                value: '',
                text: 'Termina'
            }));
            opts.forEach(function(h) {
                $fin.append($('<option>', {
                    value: h,
                    text: h
                }));
            });
            if (prev && opts.includes(prev)) {
                $fin.val(prev);
            } else {
                $fin.val('');
            }
            if (typeof $fin.selectpicker === 'function') {
                $fin.selectpicker('refresh');
            }
        }

        function nombreDiaDesdeIso(iso) {
            const map = {
                1: 'LUNES',
                2: 'MARTES',
                3: 'MIERCOLES',
                4: 'JUEVES',
                5: 'VIERNES',
                6: 'SABADO',
                7: 'DOMINGO'
            };
            return map[iso] || null;
        }

        function isoDesdeClave(clave) {
            const map = {
                lunes: 1,
                martes: 2,
                miercoles: 3,
                jueves: 4,
                viernes: 5,
                sabado: 6,
                domingo: 7
            };
            return map[clave] ?? null;
        }

        function primeraFechaIsoDesde(desde, iso, inhabilSet) {
            const max = 730;
            for (let i = 0; i < max; i++) {
                const c = new Date(desde.getFullYear(), desde.getMonth(), desde.getDate() + i);
                if (isoWeekday(c) !== iso) continue;
                const ymd = formatYMD(c);
                if (inhabilSet[ymd]) continue;
                return c;
            }
            return null;
        }

        function resolverFechasProgramacion(fechaUsuario, inhabilesList) {
            const inhabilSet = {};
            (inhabilesList || []).forEach(function(d) {
                inhabilSet[d] = true;
            });

            const diasActivos = [];
            $('.dia-checkbox:checked').each(function() {
                const dia = $(this).data('dia');
                const ini = $(`#inicio_${dia}`).val();
                const fin = $(`#fin_${dia}`).val();
                if (!ini || !fin) return;
                const iniM = toMinutes(ini);
                const finM = toMinutes(fin);
                if (iniM >= finM) return;
                if (finM > iniM + 8 * 60) return;
                diasActivos.push({
                    clave: dia,
                    iso: isoDesdeClave(dia),
                    ini,
                    fin,
                    durH: (finM - iniM) / 60
                });
            });

            if (!fechaUsuario || diasActivos.length === 0) return null;

            let fechaAjustada = null;
            for (let i = 0; i < 730; i++) {
                const c = new Date(fechaUsuario.getFullYear(), fechaUsuario.getMonth(), fechaUsuario.getDate() + i);
                const ymd = formatYMD(c);
                if (inhabilSet[ymd]) continue;
                const nom = nombreDiaDesdeIso(isoWeekday(c));
                const match = diasActivos.some(function(d) {
                    return nombreDiaDesdeIso(d.iso) === nom;
                });
                if (match) {
                    fechaAjustada = c;
                    break;
                }
            }
            if (!fechaAjustada) return null;

            let termino = new Date(fechaAjustada);
            for (let j = 0; j < diasActivos.length; j++) {
                const d = diasActivos[j];
                const p = primeraFechaIsoDesde(fechaAjustada, d.iso, inhabilSet);
                if (!p) return null;
                if (p > termino) termino = p;
            }

            return {
                inicio: fechaAjustada,
                termino,
                diasActivos
            };
        }

        function contarOcurrenciasPorDia(fechaIni, fechaFin) {
            const map = {
                1: 'lunes',
                2: 'martes',
                3: 'miercoles',
                4: 'jueves',
                5: 'viernes',
                6: 'sabado',
                7: 'domingo'
            };
            const counts = {
                lunes: 0,
                martes: 0,
                miercoles: 0,
                jueves: 0,
                viernes: 0,
                sabado: 0,
                domingo: 0
            };
            const c = new Date(fechaIni);
            while (c <= fechaFin) {
                counts[map[isoWeekday(c)]]++;
                c.setDate(c.getDate() + 1);
            }
            return counts;
        }

        function contarInhabilesEnRango(inhabilesList, ini, fin) {
            if (!inhabilesList || !ini || !fin) return 0;
            const a = formatYMD(ini);
            const b = formatYMD(fin);
            let n = 0;
            inhabilesList.forEach(function(d) {
                if (d >= a && d <= b) n++;
            });
            return n;
        }

        function lunesSemanaClave(d) {
            const c = new Date(d.getFullYear(), d.getMonth(), d.getDate());
            const dow = (c.getDay() + 6) % 7;
            c.setDate(c.getDate() - dow);
            return formatYMD(c);
        }

        function distribuirHorasMesSemana(fechaIni, fechaFin, diasActivos, inhabilSet) {
            const porMes = {};
            const porSemana = {};
            const c = new Date(fechaIni);
            while (c <= fechaFin) {
                const ymd = formatYMD(c);
                if (!inhabilSet[ymd]) {
                    const nom = nombreDiaDesdeIso(isoWeekday(c));
                    const found = diasActivos.find(function(d) {
                        return nombreDiaDesdeIso(d.iso) === nom;
                    });
                    if (found) {
                        const mesClave = `${String(c.getMonth() + 1).padStart(2, '0')}-${c.getFullYear()}`;
                        porMes[mesClave] = (porMes[mesClave] || 0) + found.durH;
                        const wkKey = lunesSemanaClave(c);
                        porSemana[wkKey] = (porSemana[wkKey] || 0) + found.durH;
                    }
                }
                c.setDate(c.getDate() + 1);
            }
            const meses = Object.keys(porMes).sort(function(a, b) {
                const [ma, ya] = a.split('-').map(Number);
                const [mb, yb] = b.split('-').map(Number);
                if (ya !== yb) return ya - yb;
                return ma - mb;
            }).map(function(m) {
                return {
                    mes: m,
                    horas: Math.round(porMes[m] * 10) / 10
                };
            });
            const semKeys = Object.keys(porSemana).sort();
            const semanas = semKeys.map(function(k, idx) {
                return {
                    horas: Math.round(porSemana[k] * 10) / 10,
                    semana: 'Semana ' + (idx + 1)
                };
            });
            return {
                meses,
                semanas
            };
        }

        function formatearHorasPorMesLista(arr) {
            if (!arr || !arr.length) return '0';
            if (arr.length === 1) return String(arr[0].horas);
            return arr.map(function(x) {
                return `${x.mes}: ${x.horas}`;
            }).join(' | ');
        }

        function setResumenConInhabiles(inhabilesList) {
            ocultarAlertaEmpalme();
            ocultarAlertaHoras();
            const fechaUsuario = parseDateDMY($('#fecha_inicio').val());
            const inhabilSet = {};
            (inhabilesList || []).forEach(function(d) {
                inhabilSet[d] = true;
            });

            if (!fechaUsuario) {
                limpiarResumen();
                return;
            }

            const res = resolverFechasProgramacion(fechaUsuario, inhabilesList);
            if (!res) {
                limpiarResumen();
                $('#resHorario').text('Seleccione dias y horarios completos.');
                return;
            }

            const fpEl = document.querySelector('#fecha_inicio');
            const fp = fpEl && fpEl._flatpickr;
            if (fp) {
                fp.setDate(res.inicio, false);
            } else {
                $('#fecha_inicio').val(formatDateDMY(res.inicio));
            }

            $('#fecha_termino').val(formatDateDMY(res.termino));

            const dayCount = contarOcurrenciasPorDia(res.inicio, res.termino);
            let totalHoras = 0;
            let sesiones = 0;
            let minInicio = null;
            let maxFin = null;
            let horasSemana = 0;

            res.diasActivos.forEach(function(d) {
                const oc = dayCount[d.clave] || 0;
                totalHoras += Math.round(d.durH * oc);
                sesiones += oc;
                horasSemana += d.durH;
                const iniM = toMinutes(d.ini);
                const finM = toMinutes(d.fin);
                minInicio = (minInicio === null || iniM < minInicio) ? iniM : minInicio;
                maxFin = (maxFin === null || finM > maxFin) ? finM : maxFin;
            });

            const dist = distribuirHorasMesSemana(res.inicio, res.termino, res.diasActivos, inhabilSet);
            const inhabEnRango = contarInhabilesEnRango(inhabilesList, res.inicio, res.termino);

            $('#resHoras').text(String(Math.round(totalHoras)));
            $('#resHorasMes').text(formatearHorasPorMesLista(dist.meses));
            $('#resHorasSemana').text(horasSemana > 0 ? `${horasSemana.toFixed(1)} hrs` : '-');
            $('#resSesiones').text(sesiones);
            $('#resInhabiles').text(String(inhabEnRango));
            validarHorasTotalesCalculadas();

            if (minInicio !== null && maxFin !== null) {
                $('#resHorario').text(`${formatMinutes(minInicio)} - ${formatMinutes(maxFin)}`);
            } else {
                $('#resHorario').text('-');
            }
        }

        function limpiarResumen() {
            ocultarAlertaEmpalme();
            ocultarAlertaHoras();
            $('#fecha_termino').val('');
            $('#resHoras').text('0');
            $('#resHorasMes').text('0');
            $('#resHorasSemana').text('-');
            $('#resSesiones').text('0');
            $('#resInhabiles').text('0');
            $('#resHorario').text('-');
        }

        function obtenerHorasCompetenciaSeleccionada() {
            const selected = $('#certificacion_id option:selected');
            if (!selected.length) return 0;
            const horasRaw = selected.data('horas');
            const horas = parseFloat(horasRaw);
            return Number.isFinite(horas) ? horas : 0;
        }

        function recalcularHorasEvaluacion() {
            const horasEvaluacion = obtenerHorasCompetenciaSeleccionada();
            const capacitandosRaw = $('#capacitandos').val();
            const capacitandos = parseInt(capacitandosRaw, 10);
            const cantidad = Number.isFinite(capacitandos) && capacitandos > 0 ? capacitandos : 0;
            const total = horasEvaluacion * cantidad;

            $('#horas_evaluacion').val(horasEvaluacion.toFixed(2));
            $('#horas_totales_evaluacion').val(total.toFixed(2));
        }

        function verificarEmpalmeTrasResumen() {
            const uni = $('#unidad_id').val();
            if (!uni || !$('#fecha_termino').val()) {
                return;
            }
            $.ajax({
                url: agendaVerificarEmpalmeUrl,
                method: 'POST',
                data: $('#formAgendaEval').serialize(),
                dataType: 'json',
            }).done(function(r) {
                if (r.empalme && r.mensaje) {
                    $('#alertEmpalmeAgenda').removeClass('d-none').text(r.mensaje);
                    $('#resHorario').addClass('text-danger');
                } else {
                    ocultarAlertaEmpalme();
                }
            }).fail(function(xhr) {
                let msg = 'No se pudo verificar empalmes.';
                const j = xhr.responseJSON;
                if (j) {
                    if (j.mensaje) msg = j.mensaje;
                    else if (j.message) msg = j.message;
                }
                $('#alertEmpalmeAgenda').removeClass('d-none').text(msg);
            });
        }

        function sincronizarControlesDias() {
            $('.dia-checkbox').each(function() {
                const dia = $(this).data('dia');
                const habilitar = $(this).is(':checked');
                const $inicio = $(`#inicio_${dia}`);
                const $fin = $(`#fin_${dia}`);

                $inicio.prop('disabled', !habilitar);
                $fin.prop('disabled', !habilitar);

                if (habilitar) {
                    reconstruirSelectFin(dia, true);
                }

                if (typeof $inicio.selectpicker === 'function') {
                    $inicio.selectpicker('refresh');
                }
                if (typeof $fin.selectpicker === 'function') {
                    $fin.selectpicker('refresh');
                }
            });
        }

        function plantillaHorasSemanaDesdeCalculo(calc) {
            if (!calc || !calc.dias) return '-';
            let sum = 0;
            Object.keys(calc.dias).forEach(function(k) {
                const d = calc.dias[k];
                if (d && d.inicio && d.fin) {
                    sum += (toMinutes(d.fin) - toMinutes(d.inicio)) / 60;
                }
            });
            return sum > 0 ? `${sum.toFixed(1)} hrs` : '-';
        }

        function aplicarResumenEdicionGuardado() {
            if (!agendaResumenEdicion) return;
            ocultarAlertaEmpalme();
            $('#fecha_termino').val(agendaResumenEdicion.fecha_termino);
            $('#resHoras').text(String(agendaResumenEdicion.horas_totales));
            $('#resHorasMes').text(formatearHorasPorMesLista(agendaResumenEdicion.horas_por_mes));
            $('#resHorasSemana').text(plantillaHorasSemanaDesdeCalculo(agendaCalculoEdicion));
            $('#resSesiones').text(String(agendaResumenEdicion.sesiones));
            $('#resInhabiles').text(String(agendaResumenEdicion.inhabiles_en_periodo || 0));
            if (agendaCalculoEdicion && agendaCalculoEdicion.horario_general) {
                $('#resHorario').text(`${agendaCalculoEdicion.horario_general.inicio} - ${agendaCalculoEdicion.horario_general.fin}`);
            }
        }

        $(document).ready(function() {
            if ($.fn.select2) {
                const agendaSelect2 = {
                    width: '100%',
                    allowClear: true,
                    placeholder: 'Seleccione',
                    dropdownAutoWidth: true,
                    dropdownCssClass: 'agenda-select2-dd',
                };
                $('#unidad_id').select2($.extend({}, agendaSelect2, {
                    placeholder: 'Seleccione unidad',
                }));
                $('#certificacion_id').select2($.extend({}, agendaSelect2, {
                    placeholder: 'Seleccione estandar',
                }));
            }

            flatpickr('#fecha_inicio', {
                dateFormat: 'd/m/Y',
                locale: 'es',
                allowInput: true,
                onChange: function() {
                    limpiarResumen();
                }
            });

            flatpickr('#fecha_proceso_inicio', {
                dateFormat: 'd/m/Y',
                locale: 'es',
                allowInput: true,
                onChange: function() {}
            });

            $('#certificacion_id').on('change', function() {
                recalcularHorasEvaluacion();
            });

            $('#capacitandos').on('input', function() {
                recalcularHorasEvaluacion();
                validarHorasTotalesCalculadas();
            });

            $('.dia-checkbox').on('change', function() {
                sincronizarControlesDias();
                limpiarResumen();
            });

            $(document).on('change', '.horario-select[id^="inicio_"]', function() {
                const id = $(this).attr('id') || '';
                const dia = id.replace('inicio_', '');
                if (dia) reconstruirSelectFin(dia, true);
                limpiarResumen();
            });

            $('.horario-select[id^="fin_"]').on('change', function() {
                limpiarResumen();
            });

            $('#btnProgramar').on('click', function() {
                const uni = $('#unidad_id').val();
                if (!uni) {
                    setResumenConInhabiles([]);
                    return;
                }
                $.getJSON(agendaFechasInhabilesUrl, {
                    id: uni
                }).done(function(resp) {
                    setResumenConInhabiles(resp.fechas || []);
                    verificarEmpalmeTrasResumen();
                }).fail(function() {
                    setResumenConInhabiles([]);
                    verificarEmpalmeTrasResumen();
                });
            });

            sincronizarControlesDias();
            ocultarAlertaEmpalme();
            if (agendaResumenEdicion) {
                aplicarResumenEdicionGuardado();
            } else {
                limpiarResumen();
            }

            recalcularHorasEvaluacion();

            const formAgenda = document.getElementById('formAgendaEval');
            const inputEstatusAccion = document.getElementById('age_estatus_accion');
            const inputObservacionAccion = document.getElementById('age_observacion_accion');
            const btnConfirmarRechazo = document.getElementById('btnConfirmarRechazoAgenda');
            const btnConfirmarAutorizar = document.getElementById('btnConfirmarAutorizarAgenda');
            const detalleRechazo = document.getElementById('detalleRechazoAgenda');
            const detalleAutorizar = document.getElementById('detalleAutorizarAgenda');

            function mostrarMensaje(tipo, mensaje) {
                if (typeof toastr !== 'undefined' && toastr && typeof toastr[tipo] === 'function') {
                    toastr[tipo](mensaje);
                } else {
                    alert(mensaje);
                }
            }

            function ejecutarCambioEstatus(estatus, detalle, modalId) {
                if (!formAgenda || !inputEstatusAccion || !inputObservacionAccion) {
                    return;
                }

                const observacion = (detalle || '').trim();
                if (estatus === 2 && !observacion) {
                    mostrarMensaje('error', 'Ingrese el detalle de  observacion para rechazar.');
                    return;
                }

                inputEstatusAccion.value = String(estatus);
                inputObservacionAccion.value = observacion ? observacion.toUpperCase() : '';

                const modalElement = document.getElementById(modalId);
                const modalInstance = modalElement ? bootstrap.Modal.getInstance(modalElement) : null;
                if (modalInstance) {
                    modalInstance.hide();
                }

                formAgenda.submit();
            }

            if (btnConfirmarRechazo) {
                btnConfirmarRechazo.addEventListener('click', function() {
                    ejecutarCambioEstatus(2, detalleRechazo ? detalleRechazo.value : '', 'modalRechazarAgenda');
                });
            }

            if (btnConfirmarAutorizar) {
                btnConfirmarAutorizar.addEventListener('click', function() {
                    ejecutarCambioEstatus(3, detalleAutorizar ? detalleAutorizar.value : '', 'modalAutorizarAgenda');
                });
            }

            if (formAgenda) {
                formAgenda.addEventListener('submit', function(e) {
                    const estatusAccion = inputEstatusAccion ? String(inputEstatusAccion.value || '') : '';
                    if (estatusAccion === '2' || estatusAccion === '3') {
                        return;
                    }

                    if (!validarHorasTotalesCalculadas()) {
                        e.preventDefault();
                    }
                });
            }

            @puede('Agenda', 'vinculacion_agenda')
                @if ($esEdicion && $estatusAgenda === 3)
            const agendaAulasDisponiblesUrl = @json(route('agendaAulasDisponibles'));
            const agendaVerificarAulaUrl = @json(route('agendaVerificarAula', ['id' => $agenda->id]));
            let aulasFinalizarCache = [];
            let aulaSeleccionadaFinalizar = null;

            function formatoAulaSelect2(aula) {
                if (!aula.id) {
                    return aula.text;
                }

                const $option = $(aula.element);
                const nombre = $option.data('nombre') || aula.text;
                const clave = $option.data('clave') || '';

                return $(
                    '<div class="agenda-aula-option">' +
                    '<div class="agenda-aula-option-title">' + nombre + '</div>' +
                    '<div class="agenda-aula-option-sub">Clave: ' + clave + '</div>' +
                    '</div>'
                );
            }

            function formatoAulaSeleccion(aula) {
                if (!aula.id) {
                    return aula.text;
                }
                const $option = $(aula.element);
                const nombre = $option.data('nombre') || aula.text;
                const clave = $option.data('clave') || '';
                return clave ? `${nombre} [${clave}]` : nombre;
            }

            function cargarAulasFinalizar() {
                const $select = $('#select_aula_finalizar');
                $select.empty().append(new Option('Seleccione un aula...', '', true, false));

                return $.getJSON(agendaAulasDisponiblesUrl, {
                    id: {{ $agenda->id }}
                }).done(function(resp) {
                    aulasFinalizarCache = resp.aulas || [];
                    aulasFinalizarCache.forEach(function(aula) {
                        const option = new Option(aula.nombre, aula.id, false, false);
                        $(option).attr('data-nombre', aula.nombre).attr('data-clave', aula.clave);
                        $select.append(option);
                    });
                    $select.trigger('change');
                }).fail(function() {
                    $('#errorAulaFinalizar').removeClass('d-none').text('No se pudieron cargar  aulas.');
                });
            }

            $('#modalFinalizarAgenda').on('show.bs.modal', function() {
                $('#errorAulaFinalizar').addClass('d-none').empty();
                aulaSeleccionadaFinalizar = null;
                $('#btnContinuarFinalizarAgenda').prop('disabled', true);

                if ($.fn.select2 && $('#select_aula_finalizar').hasClass('select2-hidden-accessible')) {
                    $('#select_aula_finalizar').val('').trigger('change');
                    cargarAulasFinalizar();
                    return;
                }

                if ($.fn.select2) {
                    $('#select_aula_finalizar').select2({
                        width: '100%',
                        allowClear: true,
                        placeholder: 'Seleccione un aula...',
                        dropdownParent: $('#modalFinalizarAgenda'),
                        dropdownCssClass: 'agenda-select2-dd',
                        escapeMarkup: function(markup) {
                            return markup;
                        },
                        templateResult: formatoAulaSelect2,
                        templateSelection: formatoAulaSeleccion,
                        language: {
                            noResults: function() {
                                return 'No se encontraron aulas';
                            },
                            searching: function() {
                                return 'Buscando...';
                            }
                        },
                        matcher: function(params, data) {
                            if ($.trim(params.term) === '') {
                                return data;
                            }
                            if (typeof data.text === 'undefined') {
                                return null;
                            }
                            const term = params.term.toUpperCase();
                            const nombre = String($(data.element).data('nombre') || data.text).toUpperCase();
                            const clave = String($(data.element).data('clave') || '').toUpperCase();
                            if (nombre.indexOf(term) > -1 || clave.indexOf(term) > -1) {
                                return data;
                            }
                            return null;
                        }
                    });
                }

                cargarAulasFinalizar();
            });

            $('#select_aula_finalizar').on('change', function() {
                const val = $(this).val();
                aulaSeleccionadaFinalizar = aulasFinalizarCache.find(function(a) {
                    return String(a.id) === String(val);
                }) || null;
                $('#btnContinuarFinalizarAgenda').prop('disabled', !aulaSeleccionadaFinalizar);
                $('#errorAulaFinalizar').addClass('d-none').empty();
            });

            $('#btnContinuarFinalizarAgenda').on('click', function() {
                if (!aulaSeleccionadaFinalizar) {
                    return;
                }

                $.ajax({
                    url: agendaVerificarAulaUrl,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: aulaSeleccionadaFinalizar.id
                    },
                    success: function(resp) {
                        if (!resp.ok) {
                            if (resp.duplicada) {
                                bootstrap.Modal.getInstance(document.getElementById('modalFinalizarAgenda'))?.hide();
                                $('#mensajeAulaDuplicada').text(resp.mensaje || 'El aula ya esta vinculada a otra agenda.');
                                new bootstrap.Modal(document.getElementById('modalAulaDuplicadaAgenda')).show();
                                return;
                            }
                            $('#errorAulaFinalizar').removeClass('d-none').text(resp.mensaje || 'No se pudo validar el aula.');
                            return;
                        }

                        $('#confirmAulaNombre').text(resp.nombre || aulaSeleccionadaFinalizar.nombre);
                        $('#confirmAulaClave').text(resp.clave || aulaSeleccionadaFinalizar.clave);
                        $('#inputAulaFinalizarId').val(aulaSeleccionadaFinalizar.id);

                        bootstrap.Modal.getInstance(document.getElementById('modalFinalizarAgenda'))?.hide();
                        new bootstrap.Modal(document.getElementById('modalConfirmarFinalizarAgenda')).show();
                    },
                    error: function(xhr) {
                        const mensaje = xhr.responseJSON?.mensaje || 'Error al verificar el aula seleccionada.';
                        $('#errorAulaFinalizar').removeClass('d-none').text(mensaje);
                    }
                });
            });
                @endif
            @endpuede
        });
    </script>
@endpush
@endif