@extends('aulavirtual.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/miscursos.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/examenes.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/emergente.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/modal.css') }}" />
@endsection
@section('content')
    <main class="page-main">

        <!-- NAV PESTAÑAS (tipo ventana) -->
        <div class="uk-container header-ventana">
            <ul class="uk-subnav uk-subnav-pill subventana"
                uk-switcher="connect: #tabs-content; animation: uk-animation-fade">
                <li class="{{ $activeTab === 'cursos' ? 'uk-active' : '' }}">
                    <a href="{{ route('aulavirtual.miscursos') }}">
                        Mis cursos comprados
                        <span class="uk-badge rounded pill-count">{{ $miscursos->count() }}</span>
                    </a>
                </li>
                <li class="{{ $activeTab === 'examenes' ? 'uk-active' : '' }}">
                    <a href="{{ route('aulavirtual.misexamenes') }}">
                        Mis exámenes
                        <span class="uk-badge rounded pill-count uk-background-secondary">{{ $examenes->count() }}</span>
                    </a>
                </li>
            </ul>
        </div>


        <!-- CONTENIDO DE LAS PESTAÑAS -->
        <div class="uk-container uk-margin">
            <ul id="tabs-content" class="uk-switcher">

                <!-- TAB: Cursos -->
                <li>
                    <div class="uk-grid-small uk-child-width-1-1 uk-child-width-1-2@m uk-child-width-1-3@l" uk-grid>
                        @foreach ($miscursos as $curso)
                            <!-- Tarjeta de curso -->
                            <div>
                                <div class="card-curso">
                                    <div class="uk-card-media-top">
                                        <a href="{{ url('detallecurso/' . $curso->titulo_rewrite) }}">

                                            @if ($curso->imagen)
                                                <img src="{{ env('URL_ARCHIVOS') . '/images/capa/' . $curso->imagen }}"
                                                    alt="{{ $curso->nombre }}" class="uk-border-rounded">
                                            @else
                                                <img src="{{ asset('assets/img/aulavirtual/ejemplo1.png') }}"
                                                    alt="Curso" class="uk-border-rounded">
                                            @endif
                                        </a>
                                    </div>

                                    <div class="card-body">
                                        <a href="{{ url('detallecurso/' . $curso->titulo_rewrite) }}" class="titulo-curso">
                                            {{ $curso->titulo }}
                                        </a>

                                        <!-- Botón Live -->

                                        @if ($curso->modalidad == 2)
                                            @php
                                                $info = $curso->live ?? [];
                                            @endphp
                                            {{-- Botón EN VIVO (múltiples: general / especialidad / hijo) --}}
                                            @php
                                                $lives = $curso->all_lives ?? collect();
                                            @endphp

                                            @php
                                                // Detectar si existe al menos UNA clase para HOY (en vivo ahora o próxima hoy)
                                                $hasToday = false;
                                                foreach($lives as $lv) {
                                                    $inf = data_get($lv, 'live') ?? [];
                                                    if (data_get($inf, 'en_vivo_ahora') || data_get($inf, 'proximo_hoy')) { $hasToday = true; break; }
                                                }
                                            @endphp

                                            @foreach($lives as $live)
                                                @php $infoLive = data_get($live, 'live') ?? []; @endphp

                                                @if ($hasToday)
                                                    {{-- Si hay clases hoy en alguno de los lives, sólo mostrar las entradas de HOY (en_vivo_ahora o proximo_hoy) --}}
                                                    @if (data_get($infoLive, 'en_vivo_ahora') || data_get($infoLive, 'proximo_hoy'))
                                                        @if (!empty($live['link_vivo']) && data_get($infoLive, 'en_vivo_ahora'))
                                                            <div class="uk-margin-small">
                                                                <a class="uk-button uk-button-success uk-width-1-1 btn-live"
                                                                    href="{{ $live['link_vivo'] }}" target="_blank" rel="noopener"
                                                                    data-curso-general="{{ $curso->id_curso }}"
                                                                    data-curso-link="{{ $live['id'] ?? $curso->id_curso }}">
                                                                    <span class="tag-live">
                                                                        {{ in_array($live['tipo'], ['especialidad','especialidad_hijo']) ? 'Transmisión de ESPECIALIDAD' : 'Transmisión EN VIVO' }}
                                                                    </span>
                                                                    <img src="{{ asset('assets/img/aulavirtual/image41.png') }}"
                                                                        alt="" class="live-icon" aria-hidden="true">
                                                                </a>
                                                            </div>
                                                        @else
                                                            @if (data_get($infoLive, 'proximo_hoy'))
                                                                <div class="uk-margin-small uk-text-center notice notice--today"
                                                                    role="status" aria-live="polite">
                                                                    <small class="notice__text">
                                                                        <i class="fas fa-clock"></i>
                                                                        Próxima sesión:
                                                                        <strong>{{ data_get($infoLive, 'proximo_hoy') }}</strong>
                                                                        <span class="notice__meta">({{ data_get($infoLive, 'hoy_nombre') }})</span>
                                                                    </small>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endif
                                                @else
                                                    {{-- No hay clases hoy en ninguno: mostrar próximos por live --}}
                                                    @if (!empty($live['link_vivo']) && data_get($infoLive, 'en_vivo_ahora'))
                                                        <div class="uk-margin-small">
                                                            <a class="uk-button uk-button-success uk-width-1-1 btn-live"
                                                                href="{{ $live['link_vivo'] }}" target="_blank" rel="noopener"
                                                                data-curso-general="{{ $curso->id_curso }}"
                                                                data-curso-link="{{ $live['id'] ?? $curso->id_curso }}">
                                                                <span class="tag-live">
                                                                    {{ in_array($live['tipo'], ['especialidad','especialidad_hijo']) ? 'Transmisión de ESPECIALIDAD' : 'Transmisión EN VIVO' }}
                                                                </span>
                                                                <img src="{{ asset('assets/img/aulavirtual/image41.png') }}"
                                                                    alt="" class="live-icon" aria-hidden="true">
                                                            </a>
                                                        </div>
                                                    @endif

                                                    @if (!empty($infoLive) && !data_get($infoLive, 'en_vivo_ahora'))
                                                        @if (data_get($infoLive, 'proximo_hoy'))
                                                            <div class="uk-margin-small uk-text-center notice notice--today"
                                                                role="status" aria-live="polite">
                                                                <small class="notice__text">
                                                                    <i class="fas fa-clock"></i>
                                                                    Próxima sesión:
                                                                    <strong>{{ data_get($infoLive, 'proximo_hoy') }}</strong>
                                                                    <span class="notice__meta">({{ data_get($infoLive, 'hoy_nombre') }})</span>
                                                                </small>
                                                            </div>
                                                        @elseif (data_get($infoLive, 'siguiente_dia') && data_get($infoLive, 'siguiente_hora'))
                                                            <div class="uk-margin-small uk-text-center notice notice--next"
                                                                role="status" aria-live="polite">
                                                                <small class="notice__text">
                                                                    <span class="notice__badge">No hay clases en vivo hoy</span>
                                                                    Siguiente clase:
                                                                    <strong>{{ data_get($infoLive, 'siguiente_dia') }} {{ data_get($infoLive, 'siguiente_hora') }}</strong>
                                                                </small>
                                                            </div>
                                                        @else
                                                            <div class="uk-margin-small uk-text-center notice notice--muted">
                                                                <small class="notice__text">No hay clases en vivo programadas.</small>
                                                            </div>
                                                        @endif
                                                    @endif
                                                @endif
                                            @endforeach
                                        @endif

                                        <!-- Botón ingresar -->
                                        <div class="uk-margin-small">
                                            <a class="uk-button uk-button-danger uk-width-1-1"
                                                href="{{ url('detallecurso/' . $curso->titulo_rewrite) }}">
                                                <span class="tag-live">Ingresar al curso</span>
                                                <img src="{{ asset('assets/img/aulavirtual/image42.png') }}" alt=""
                                                    class="live-icon" aria-hidden="true">
                                            </a>
                                        </div>

                                        <!-- Progreso -->
                                        <div class="uk-margin-small">
                                            <div class="uk-grid-small uk-flex-middle" uk-grid>
                                                <div class="uk-width-expand">
                                                    <progress class="uk-progress uk-margin-remove progress-red"
                                                        value="{{ $curso->porcentaje }}" max="100"></progress>


                                                </div>
                                                <div class="uk-width-auto">
                                                    <span class="progress-label">{{ $curso->porcentaje }}%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
                        @endforeach



                    </div>
                </li>

                <!-- TAB: Exámenes -->
                <li>
                    <div class="encabezado-tab">
                        <a href="{{ url('/examenesdesarrollados') }}" class="uk-button uk-button-primary">
                            EXÁMENES RESUELTOS
                        </a>
                    </div>
                    <table class="uk-table uk-table-divider uk-table-middle uk-table-hover uk-table-responsive exam-table">
                        <thead>
                            <tr>
                                <th># EXAMEN</th>
                                <th>PRIVACIDAD</th>
                                <th>FECHA ACTIVA</th>
                                <th>HORA ACTIVA</th>
                                <th>CANT. INTENTOS / EFECTUADOS</th>
                                <th>ESTADO</th>
                                <th>ACCIÓN</th>
                            </tr>
                        </thead>
                        <tbody>

                            @forelse ($examenes as $index => $examen)
                                <tr class="fila-table">
                                    <td>
                                        <div class="exam-title">
                                            <span class="exam-num">{{ $index + 1 }}</span>
                                            <div
                                                class="border {{ $examen->intentos_realizados >= $examen->intentos_totales ? 'border-red' : 'border-green' }} titulo-exam">
                                                {{ $examen->titulo }}
                                            </div>
                                        </div>
                                    </td>

                                    <td data-label="PRIVACIDAD: ">
                                        @switch($examen->privacidad)
                                            @case(1)
                                                Por curso
                                            @break

                                            @case(2)
                                                Gratuito
                                            @break

                                            @case(3)
                                                Pagado
                                            @break

                                            @case(4)
                                                Beca
                                            @break

                                            @default
                                                ---
                                        @endswitch
                                    </td>

                                    <td data-label="FECHA ACTIVA: ">{{ $examen->fecha_compra ?? '---' }}</td>
                                    <td data-label="HORA ACTIVA: ">{{ $examen->hora_apertura ?? 'Sin datos' }}</td>
                                    <td data-label="CANT. INTENTOS / EFECTUADOS: ">
                                        {{ $examen->intentos_realizados }} / {{ $examen->intentos_totales }}
                                    </td>

                                    <td data-label="ESTADO: ">
                                        @if ($examen->intentos_realizados >= $examen->intentos_totales)
                                            <span class="estado_exam btn-rendido">Rendido</span>
                                        @else
                                            <span class="estado_exam btn-activo">Activo</span>
                                        @endif
                                    </td>

                                    <td>
                                        @if ($examen->intentos_realizados < $examen->intentos_totales)
                                            @if (!$examen->bloqueado)
                                                <a href="{{ url('examen/' . $examen->titulo_rewrite) }}"
                                                    class="btn-resolver btn-estilo">
                                                    <img src="{{ asset('assets/img/aulavirtual/play.png') }}"
                                                        alt="" />RESOLVER
                                                </a>
                                                @if ($examen->mensaje_bloqueo)
                                                    <div class="descrip-exam uk-text-meta uk-margin-small-top">
                                                        {{ $examen->mensaje_bloqueo }}
                                                    </div>
                                                @endif
                                            @else
                                                <button class="btn-nodisponible" disabled>
                                                    <span uk-icon="icon: lock"></span> {{ $examen->mensaje_bloqueo }}
                                                </button>
                                            @endif
                                        @else
                                            <button class="btn-nodisponible btn-estilo"
                                                uk-toggle="target: #modal-intentos-{{ $examen->id_examen }}">
                                                NO DISPONIBLE
                                            </button>

                                            <!-- Modal intentos agotados -->
                                            <div id="modal-intentos-{{ $examen->id_examen }}" uk-modal>
                                                <div class="uk-modal-dialog uk-modal-body uk-text-center">
                                                    <h2 class="uk-modal-title">Intentos agotados</h2>
                                                    <p>
                                                        Has realizado <strong>{{ $examen->intentos_realizados }}</strong>
                                                        de
                                                        <strong>{{ $examen->intentos_totales }}</strong> intentos
                                                        permitidos.
                                                    </p>
                                                    <div class="para-botones">
                                                        <a href="https://api.whatsapp.com/send/?phone=51957668571&text=Hola%2C+necesito+m%C3%A1s+informaci%C3%B3n+sobre+{{ urlencode($examen->titulo) }}"
                                                            target="_blank"
                                                            class="uk-button uk-button-primary uk-button-small">
                                                            <span uk-icon="icon: whatsapp"></span> Contactar por WhatsApp
                                                        </a>
                                                        <button class="uk-button uk-button-default uk-modal-close"
                                                            type="button">
                                                            Cerrar
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="uk-text-center uk-text-warning">
                                            No tienes exámenes disponibles.
                                        </td>
                                    </tr>
                                @endforelse

                            </tbody>
                        </table>


                    </li>

                </ul>
            </div>


            <style>
                html blockquote {
                    background-color: transparent !important;
                    padding: 0 !important;
                    border: 0 !important;
                    font-style: normal;
                    border-left: 0 !important;
                }
            </style>

            <!-- mostrar si est aespcilidad en  0 si est alogeado  nomas  y  mostrar si  la especilidad el  logedo esta  igual al del flotante si  -->
            @if (session()->has('suscrito') && $flotante)
                <div id="ventana-emergente-1" class="uk-flex-top uk-modal uk-flex uk-open" uk-modal="bg-close: true" uk-modal
                    tabindex="-1">
                    <div class="uk-modal-dialog uk-margin-auto-vertical uk-fondo ">
                        <div class="modal-background">
                            <button class="uk-modal-close-default" type="button" uk-close></button>
                            <!-- Imagen de fondo -->
                            <img src="{{ asset('ind/comunicado.png') }}" alt="Imagen de fondo" class="img-fondo-pc">
                            <img src="{{ asset('ind/comunicado_fv.png') }}" alt="Imagen de fondo" class="img-fondo-movil">
                            <!-- Contenido del modal -->
                            <div class="modal-content">
                                <h3 class="poppi-sb">{{ $flotante['titulo'] }}</h3>

                                @if (!empty($flotante['link']))
                                    <div class="rel lleva_vimeo">
                                        <iframe src="{{ $flotante['link'] }}" frameborder="0" allow="autoplay; fullscreen"
                                            allowfullscreen></iframe>
                                    </div>
                                @elseif (!empty($flotante['imagen']))
                                    <figure class="lleva_img_flota">
                                        <img src="{{ env('URL_ARCHIVOS') . '/images/flotantes/' . $flotante['imagen'] }}"
                                            alt="Imagen flotante">
                                    </figure>
                                @endif

                                <div class="des_emegente">
                                    {!! $flotante['descripcion'] !!}
                                </div>

                                <style>
                                    .uk-button-comunicado {
                                        background: #fcc40d;
                                        border-color: #fcc40d;
                                        color: #000;
                                        font-weight: 700;
                                        padding: 10px;
                                        font-size: 14px;
                                    }

                                    .uk-button-comunicado:hover {
                                        color: #000;

                                    }

                                    @media (max-width: 768px) {

                                        .uk-button-comunicado {
                                            padding: 5px;
                                        }
                                    }
                                </style>

                                @if (!empty($flotante['enlace']))
                                    <a href="{{ $flotante['enlace'] }}" target="_blank"
                                        class="uk-button uk-button-comunicado">Click aquí</a>
                                @endif


                            </div>
                        </div>
                    </div>
                </div>
            @endif

            {{-- @if (session()->has('suscrito'))
                <div id="modal-actualizar-perfil" class="uk-flex-top uk-open uk-modal" uk-modal>
                    <div class="uk-modal-dialog uk-margin-auto-vertical uk-modal-body uk-padding-large uk-border-rounded">

                        <button class="uk-modal-close-default" type="button" uk-close
                            style="color: black; top:15px !important; right:15px !important;"></button>

                        <h3 class="uk-text-center uk-text-bold">Actualiza tus datos</h3>
                        <p class="uk-text-center uk-text-muted">
                            Verifica y actualiza tus datos para que podamos brindarte una mejor comunicación y una experiencia
                            personalizada.
                        </p>

                        <form id="form-actualizar-perfil" enctype="multipart/form-data" method="POST">
                            @csrf

                            <div class="uk-grid-small" uk-grid>
                                <!-- Foto -->
                                <!-- Email (solo lectura) -->
                                <div class="uk-width-1-1">
                                    <label class="uk-form-label">Correo electrónico</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <span class="uk-form-icon"><i class="fas fa-envelope"></i></span>
                                        <input disabled class="uk-input" id="correo" type="text" name="correo"
                                            value="{{ session('suscrito')['user']->email }}">
                                    </div>
                                </div>

                                <!-- Nombre y Apellidos -->
                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Nombre(s)</label>
                                    <input class="uk-input" id="nombre" name="nombre" required
                                        value="{{ session('suscrito')['user']->nombre }}">
                                </div>

                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Apellido Paterno</label>
                                    <input class="uk-input" id="ap_pa" name="ap_pa" required
                                        value="{{ session('suscrito')['user']->ap_pa }}">
                                </div>

                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Apellido Materno</label>
                                    <input class="uk-input" id="ap_ma" name="ap_ma"
                                        value="{{ session('suscrito')['user']->ap_ma }}">
                                </div>

                                <!-- Teléfono -->
                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Celular</label>
                                    <input class="uk-input" id="phone" type="tel" name="telefono"
                                        value="{{ session('suscrito')['user']->telefono }}" required>
                                    <span id="phone-error" class="error-text" style="color: red; display:none;">Número
                                        inválido.</span>
                                </div>

                                <!-- Tipo Documento y Número -->
                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Tipo de Documento</label>
                                    <select class="uk-select" id="tipo_doc" name="tipo_doc" disabled>
                                        <option value="1"
                                            {{ session('suscrito')['user']->id_tipo_doc == 1 ? 'selected' : '' }}>DNI</option>
                                        <option value="2"
                                            {{ session('suscrito')['user']->id_tipo_doc == 2 ? 'selected' : '' }}>Cédula
                                        </option>
                                    </select>
                                </div>

                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Número de Documento</label>
                                    <input class="uk-input" id="dni" name="dni" disabled
                                        value="{{ session('suscrito')['user']->dni }}">
                                </div>

                                <!-- Especialidad -->
                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Especialidad</label>
                                    <select class="uk-select" id="id_especialidad" name="id_especialidad" required>
                                        <option value="">Selecciona tu especialidad</option>
                                        @foreach ($especialidades as $esp)
                                            <option value="{{ $esp->id_especialidad }}"
                                                {{ session('suscrito')['user']->id_especialidad == $esp->id_especialidad ? 'selected' : '' }}>
                                                {{ $esp->titulo }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <!-- Situación Profesional -->
                                <div class="uk-width-1-2@s">
                                    <label class="uk-form-label">Situación Profesional</label>
                                    <select class="uk-select" id="id_tipo_cliente" name="id_tipo_cliente" required>
                                        <option value="">Selecciona...</option>
                                        <option value="1"
                                            {{ session('suscrito')['user']->id_tipo_cliente == 1 ? 'selected' : '' }}>Nombrado
                                        </option>
                                        <option value="2"
                                            {{ session('suscrito')['user']->id_tipo_cliente == 2 ? 'selected' : '' }}>
                                            Contratado</option>
                                    </select>
                                </div>

                                <!-- Escala (solo si nombrado) -->
                                <div class="uk-width-1-2@s" id="campo-escala" style="display:none;">
                                    <label class="uk-form-label">Escala Magisterial</label>
                                    <select class="uk-select" id="id_escala_mag" name="id_escala_mag">
                                        <option value="">Selecciona tu escala</option>
                                        @foreach ($escalas as $escala)
                                            <option value="{{ $escala->id_escala_mag }}"
                                                {{ session('suscrito')['user']->id_escala_mag == $escala->id_escala_mag ? 'selected' : '' }}>
                                                {{ $escala->titulo }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="uk-text-center uk-margin-top">
                                <button type="submit" class="uk-button uk-button-primary uk-border-rounded">
                                    Guardar Cambios
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif --}}


        </main>

        <script>
            document.addEventListener("DOMContentLoaded", function() {
                document.querySelectorAll(".btn-live").forEach(btn => {
                    btn.addEventListener("click", function() {
                        let idCursoGeneral = this.dataset.cursoGeneral;
                        let idModulo = this.dataset
                            .cursoLink; // origen del link (general/especialidad/hijo)

                        fetch("{{ route('registrar.asistencia') }}", {
                                method: "POST",
                                headers: {
                                    "Content-Type": "application/json",
                                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                                },
                                body: JSON.stringify({
                                    id_curso: idCursoGeneral,
                                    id_modulo: idModulo
                                })
                            })
                            .then(res => res.json())
                            .then(data => {
                                console.log("Asistencia:", data);
                            })
                            .catch(err => console.error("Error registrando asistencia:", err));
                    });
                });
            });
        </script>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script>
            document.addEventListener("DOMContentLoaded", function() {
                const modalActualizar = UIkit.modal('#modal-actualizar-perfil');
                const modalFlotante = document.querySelector('#ventana-emergente-1'); // flotante si existe

                // Mostrar solo si el usuario está logueado
                @if (session()->has('suscrito'))
                    // Si existe flotante y está activo, no mostrar el modal de perfil
                    if (!modalFlotante) {
                        // ✅ No hay modal flotante -> mostramos modal de actualización
                        setTimeout(() => {
                            modalActualizar.show();
                        }, 600);
                    } else {
                        // ✅ Hay modal flotante -> escuchamos cuando se cierre para mostrar el otro
                        const ukModal = UIkit.modal('#ventana-emergente-1');
                        const modalEl = document.getElementById('ventana-emergente-1');

                        // Cuando se cierre el flotante, mostramos el de perfil
                        modalEl.addEventListener('hidden', function() {
                            setTimeout(() => {
                                modalActualizar.show();
                            }, 500);
                        });
                    }
                @endif

                // ----------------------------
                // Inicializar intl-tel-input
                // ----------------------------
                const input = document.querySelector("#phone");
                const iti = window.intlTelInput(input, {
                    initialCountry: "auto",
                    separateDialCode: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js",
                });

                // ----------------------------
                // Mostrar/ocultar Escala Magisterial
                // ----------------------------
                const tipoSelect = document.getElementById('id_tipo_cliente');
                const campoEscala = document.getElementById('campo-escala');
                const toggleEscala = () => {
                    campoEscala.style.display = tipoSelect.value == '1' ? 'block' : 'none';
                };
                toggleEscala();
                tipoSelect.addEventListener('change', toggleEscala);

                // ----------------------------
                // Envío del formulario AJAX
                // ----------------------------
                $('#form-actualizar-perfil').on('submit', function(e) {
                    e.preventDefault();

                    if (!iti.isValidNumber()) {
                        $('#phone-error').show();
                        return;
                    }

                    const formData = new FormData(this);
                    formData.append('telefono', iti.getNumber());

                    Swal.fire({
                        title: 'Actualizando...',
                        text: 'Por favor espera un momento.',
                        allowOutsideClick: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: "/update-profile-modal",
                        method: "POST",
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Datos actualizados correctamente',
                                text: 'Gracias por mantener tu información al día.',
                                timer: 1800,
                                showConfirmButton: false
                            });

                            setTimeout(() => {
                                modalActualizar.hide(); // ✅ Cierra el modal sin recargar
                            }, 1500);
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error al actualizar',
                                text: xhr.responseJSON?.message ||
                                    'Ocurrió un error. Intenta nuevamente.',
                            });
                        }
                    });
                });
            });
        </script>


    @endsection