@extends('aulavirtual.layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')
{{-- @section('meta')
    <meta property="og:title" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:description" content="Bienvenido a EDUCA AUGE" />
    <meta property="og:image" content="https://educaauge.com/assets/XMEB40.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content="{{ url()->current() }}" />
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Educa Auge" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:description" content="Bienvenido a EDUCA AUGE" />
    <meta name="twitter:image" content="https://educaauge.com/assets/XMEB40.jpg" />
@endsection --}}
@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/index.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/aulavirtual/modal.css') }}" />
@endsection
@section('content')
    <main class="page-main">

        <div class="uk-container">
            <!-- Welcome -->
            <div class="video-block uk-text-center">
                <h2 class="welcome-title ">✨ Te damos la bienvenida a Gupo Auge ✨</h2>
                <div class="para-video">
                    <div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;">
                        <div class="wistia_responsive_wrapper"
                            style="height:100%;left:0;position:absolute;top:0;width:100%;"><iframe
                                src="https://fast.wistia.net/embed/iframe/2pg8863f8h?web_component=true&seo=false"
                                title="TUTO BÁSICO NUEVA PORTADA Video" allow="autoplay; fullscreen"
                                allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed"
                                name="wistia_embed" width="100%" height="100%"></iframe></div>
                    </div>
                    <script src="https://fast.wistia.net/player.js" async></script>
                </div>

            </div>
            <div>
                <p class="uk-text-center welcome-text">
                    Has dado un paso importante hacia tu <b>crecimiento profesional</b> y estamos emocionados de acompañarte
                    en este
                    camino de <b>transformación educativa.</b>
                </p>
                <p class="uk-text-center welcome-text">
                    En <b>Grupo AUGE</b> no solo accedes a capacitaciones, sino a un ecosistema completo diseñado para que
                    <b>aprendas, apliques y logres resultados reales</b> en tu labor como docente.
                </p>
            </div>

            <hr class="custom-divider">

            <!-- Getting Started -->
            <div class="uk-grid uk-grid-large uk-flex-middle" uk-grid>
                <div class="uk-width-2-3@m">
                    <div class="uk-flex uk-flex-middle uk-margin-small-bottom">
                        <img src="{{ asset('assets/img/aulavirtual/imagen.png') }}" alt="" class="section-icon">
                        <h3 class="section-title">¿Por dónde empezar?</h3>
                    </div>
                    <p>En Grupo AUGE podrás acceder a tus formaciones de manera rápida y sencilla.</p>
                    <ul class="info-list">
                        <li><strong>Comunidad</strong> → Conecta con otros docentes y comparte experiencias.</li>
                        <li><strong>Preguntas Frecuentes</strong> → Resuelve tus dudas de forma inmediata.</li>
                        <li><strong>Cursos</strong> → Consulta todo el catálogo disponible para ti.</li>
                        <li><strong>Mi perfil</strong> → Actualiza tu información y revisa tu progreso.</li>
                    </ul>
                    <p>📌 Accede a tu primera formación desde el menú lateral en la sección <strong>"Mis cursos".</strong>
                    </p>
                </div>
                <div class="uk-width-1-3@m uk-text-center">
                    <img src="{{ asset('assets/img/aulavirtual/grafico.png') }}" alt="Menú lateral" class="image-box">
                </div>
            </div>

            <hr class="custom-divider">

            <!-- Support -->
            <div class="uk-grid uk-grid-large uk-flex-middle soporte-div" uk-grid>
                <div class="uk-width-1-2@m uk-text-center">
                    <img src="{{ asset('assets/img/aulavirtual/computer.png') }}" alt="Soporte" class="image-box">
                </div>
                <div class="uk-width-1-2@m">
                    <div class="uk-flex uk-flex-middle uk-margin-small-bottom titulo-soporte">
                        <i class="fas fa-phone-alt" style="margin-right: 10px"></i>
                        <h3 class="section-title">Soporte</h3>
                    </div>
                    <p>En <strong>Grupo AUGE</strong> creemos que una buena formación debe ir acompañada de un soporte
                        rápido, claro y constante.</p>
                    <p>Nuestro equipo académico revisará tus consultas y <strong>te responderá en un máximo de 48
                            horas.</strong></p>
                    <p>💡 <strong>Recuerda:</strong> El área de soporte está pensada para que nunca te quedes con dudas y
                        puedas avanzar con seguridad en tu proceso de aprendizaje.</p>
                </div>
            </div>

            <hr class="custom-divider">

            <!-- Final Call-to-Action -->
            <div class="uk-text-center final-block">
                <h3 class="section-title">🎉 ¡Ahora es tu turno!</h3>
                <p>Ya tienes todo lo que necesitas para comenzar.</p>
                <p>Ingresa a la plataforma, ve a la sección <strong>"Mis Cursos"</strong> y explora el contenido que hemos
                    preparado especialmente para ti.</p>
                <p>📚 Empieza hoy mismo y da el siguiente paso hacia tu crecimiento profesional.</p>
                <p>En <strong>Grupo AUGE</strong> estamos listos para acompañarte en cada lección, en cada reto y en cada
                    logro.<br> 🚀 ¡Nos vemos en clase!</p>
            </div>

            <div class="uk-text-center final-block">
                <a href="{{ url('/aulavirtual/miscursos') }}" class="final-btn">
                    Ir a mis cursos
                </a>
            </div>



        </div>


    </main>

    <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() {
            // Mostrar modal automáticamente
            const modal = UIkit.modal('#modal-actualizar-perfil');
            if (modal) setTimeout(() => modal.show(), 500);

            // 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
            $('#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", // Ruta a tu controlador
                    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(() => {
                            const modal = UIkit.modal('#modal-actualizar-perfil');
                            modal.hide(); // ✅ Oculta el modal
                        }, 1500);

                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error al actualizar',
                            text: xhr.responseJSON?.message ||
                                'Ocurrió un error. Intenta nuevamente.',
                        });
                    }
                });
            });
        });
    </script>
@endsection