@extends('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')

    <style>
        .page-main .bodyfull {
            padding: 20px;
        }

        .fondo_contador {
            background-color: #333333;
            color: #fff;
        }

        .cuadro {
            background-color: #ccc;
            color: #000;
            padding: 5px;
            border-radius: 10px;
            width: 80px;
        }

        /* Cuando el ancho de la pantalla sea menor a 768px (típico de móviles) */
        @media (max-width: 768px) {
            .uk-height-max-medium {
                max-height: 700px;
            }

            .imagen-movil {
                display: block;
                /* Mostrar la imagen móvil */
            }

            .imagen-desktop {
                display: none;
                /* Ocultar la imagen de escritorio */
            }

            .portadaimagen {
                padding: 0px;
            }
        }
    </style>
@endsection
@section('content')
    <main class="page-main">
        <div class="bodyfull">



            {{-- <div class="uk-text-white uk-text-center uk-padding uk-border-rounded" style="background-color: #da291c;">
                <h2 class="uk-margin-small-bottom">FORMULARIO</h2>
                <p class="uk-margin-remove">
                    Completa el formulario y asegura tu participación en el
                    concurso por una beca total para tu preparación docente.
                </p>
            </div> --}}



            <div class="uk-section uk-animation-fade">
                <div class="contenedor-formulario uk-container">
                    <div class="uk-grid-match uk-child-width-1-2@s" uk-grid>

                        <!-- FORMULARIO A LA DERECHA -->
                        <div>
                            <div class="uk-card uk-card-default uk-card-body uk-box-shadow-large loginnuevo">
                                <!-- TÍTULO -->
                                <h2 class="uk-card-title uk-text-center">
                                    🎉 <span class="highlight">¡Inscríbete Ahora!</span>
                                </h2>
                                <p class="cta-text uk-text-center">
                                    Completa el formulario y asegura tu participación en el
                                    concurso por una beca total para tu preparación docente.
                                </p>
                                <form id="registerForm">
                                    @csrf
                                    <div class="uk-margin">
                                        <label class="uk-form-label">Número de DNI</label>
                                        <input class="uk-input" id="numero_documento" type="text" name="numero_documento"
                                            required placeholder="Número de documento">
                                        <span id="numero_documento_error" class="error-message"></span>
                                    </div>
                                    <div class="uk-margin">
                                        <label class="uk-form-label">Nombre(s)</label>
                                        <input class="uk-input" id="nombre" type="text" name="nombre" required
                                            placeholder="Tu nombre(s)">
                                        <span id="nombre_error" class="error-message"></span>
                                    </div>
                                    <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                        <div>
                                            <label for="apellido_paterno" class="uk-form-label">Apellido Paterno</label>
                                            <input class="uk-input" id="apellido_paterno" type="text"
                                                name="apellido_paterno" required placeholder="Apellido paterno">
                                            <span id="apellido_paterno_error" class="error-message"></span>
                                        </div>
                                        <div>
                                            <label for="apellido_materno" class="uk-form-label">Apellido Materno</label>
                                            <input class="uk-input" id="apellido_materno" type="text"
                                                name="apellido_materno" required placeholder="Apellido materno">
                                            <span id="apellido_materno_error" class="error-message"></span>
                                        </div>
                                    </div>
                                    <div class="uk-margin">
                                        <label class="uk-form-label">Correo Electrónico</label>
                                        <input class="uk-input" id="email" type="email" name="email" required
                                            placeholder="Tu correo electrónico">
                                        <span id="email_error" class="error-message"></span>
                                    </div>
                                    <div class="uk-margin">
                                        <label class="uk-form-label">Número de Teléfono</label>
                                        <input class="uk-input" id="phone" type="tel" name="phone" required
                                            placeholder="Tu número de teléfono">
                                        <span id="phone_error" class="error-message"></span>
                                    </div>
                                    <!-- Botón CTA con urgencia -->
                                    <div class="uk-margin">
                                        <button type="button" onclick="registerCupon(event)"
                                            class="uk-button uk-button-primary uk-width-1-1">
                                            COMPLETAR INSCRIPCIÓN
                                        </button>
                                    </div>
                                    <!-- Mensaje de urgencia -->
                                    <p class="uk-text-danger uk-text-center">
                                        Recuerda entrar a tu aula virtual para rendir el examen el día domingo 30 de marzo
                                    </p>
                                </form>
                            </div>

                        </div>

                        <!-- IMAGEN LATERAL IZQUIERDA (solo en PC) -->
                        <div>
                            <div class="imagen-lateral">
                                <img src="{{ asset('assets/img/nombramiento.jpg') }}" alt="Oferta Especial" class="uk-width-1-1">
                            </div>
                            <div class="imagen-lateral uk-text-center">
                                <img src="{{ asset('assets/img/comunidad.png') }}" alt="Oferta Especial" style="max-width: 70%;">
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>





        </div>
        </div>
    </main>


@endsection

@section('script')

@endsection