@extends('layout.master')

@section('title', 'Educa Auge | Obtén tu Cupón de Descuento')

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css">
<style>
    /* Contenedor principal con imágenes laterales en PC */
    .contenedor-formulario {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    .width3{
            width: 38%; /* Se hace más ancho el formulario */
        }

    .imagen-lateral {
        width: 368px;
        max-width: 30%;
    }

    .imagen-lateral img {
        width: 100%;
        height: 770px;
        display: block;
    }

    /* Ocultar imágenes en dispositivos móviles */
    @media (max-width:1023px) {
        .imagen-lateral {
            display: none;
        }
    }

    /* Mostrar imágenes laterales en pantallas entre 425px y 768px */
    @media (min-width: 425px) and (max-width: 1023px) {
        /* .imagen-lateral {
            width: 180px; 
            height: 900px;
        } */

        .width3{
            width: 95%; /* Se hace más ancho el formulario */
        }
    }

    @media (max-width: 425px) {
        /* .imagen-lateral {
            width: 180px; 
            height: 900px;
        } */

        .width3{
            width: 100%; /* Se hace más ancho el formulario */
        }
    }
   
    .page-main .bodyfull {
      padding: 45px 30px !important;
    }
    /* Colores principales */
    :root {
        --color-primario: #360070; /* Azul oscuro */
        --color-secundario: #c98f3d; /* Dorado */
        --color-fondo: #f8f8f8;
    }

    /* Diseño general */
    .uk-card {
        background: var(--color-fondo);
        border-radius: 10px;
        padding: 30px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    /* Títulos con más impacto */
    .uk-card-title {
        font-size: 1.8rem;
        font-weight: bold;
        color: var(--color-primario);
    }

    .cta-text {
        font-size: 1.1rem;
        font-weight: bold;
        color: var(--color-primario);
        margin-bottom: 15px;
    }

    .highlight {
        color: var(--color-secundario);
        font-weight: bold;
    }

    /* Inputs mejorados */
    .uk-input {
        border: 2px solid var(--color-secundario);
        border-radius: 8px;
        padding: 12px;
        transition: 0.3s;
    }

    .uk-input:focus {
        border-color: var(--color-primario);
        box-shadow: 0px 0px 8px rgba(0, 34, 80, 0.3);
    }

    /* Botón CTA mejorado */
    .uk-button-primary {
        background: var(--color-secundario);
        border: none;
        font-size: 1.2rem;
        font-weight: bold;
        text-transform: uppercase;
        transition: 0.3s;
        padding: 14px;
        border-radius: 8px;
    }

    .uk-button-primary:hover {
        background: #b77c30;
        transform: scale(1.05);
    }

    /* Mensaje de urgencia */
    .uk-text-danger {
        font-weight: bold;
        color: red;
        margin-top: 10px;
    }
</style>
@endsection

@section('content')
<main class="page-main">
    <div class="bodyfull">
        <div class="uk-section uk-flex uk-flex-middle uk-animation-fade">
            <div class="contenedor-formulario">
                
                <!-- IMAGEN LATERAL IZQUIERDA (solo en PC) -->
                <div class="imagen-lateral">
                    <img src="https://educaauge.com/assets/img/blog/18.png" alt="Oferta Especial">
                </div>

                <!-- FORMULARIO -->
                <div class="uk-width-1-3@s width3">
                    <div class="uk-card uk-card-default uk-card-body uk-box-shadow-large loginnuevo">

                        <!-- TÍTULO -->
                        <h2 class="uk-card-title">🎉 <span class="highlight">¡Regístrate y Obtén tu Cupón Exclusivo!</span></h2>
                        <p class="cta-text">Solo por tiempo limitado, accede a <span class="highlight">S/100 de descuento</span> en tu próxima inscripción.</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">
                                    🚀 ¡OBTENER MI DESCUENTO AHORA!
                                </button>
                            </div>

                            <!-- Mensaje de urgencia -->
                            <p class="uk-text-danger">⚠️ Solo disponible por pocas horas. ¡Aprovecha antes de que termine! ⏳</p>
                        </form>
                    </div>
                </div>

                <!-- IMAGEN LATERAL DERECHA (solo en PC) -->
                <div class="imagen-lateral">
                    <img src="https://educaauge.com/assets/img/blog/augito.png" alt="Oferta Especial">
                </div>

            </div>
        </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>
    let phoneInput;

    document.addEventListener('DOMContentLoaded', function() {
        initializePhoneInput();
    });

    // Inicializa el input del teléfono con Perú como país por defecto
    function initializePhoneInput() {
        const phoneInputField = document.querySelector("#phone");
        phoneInput = window.intlTelInput(phoneInputField, {
            initialCountry: "PE",
            separateDialCode: true,
            formatOnDisplay: true,
            autoPlaceholder: "off",
            allowDropdown: true,
            preferredCountries: ["PE"],
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
        });
    }

    // Validación de los campos
    function validateForm() {
        let isValid = true;
        clearErrors();

        const dni = document.getElementById("numero_documento").value.trim();
        const nombre = document.getElementById("nombre").value.trim();
        const apellidoPaterno = document.getElementById("apellido_paterno").value.trim();
        const apellidoMaterno = document.getElementById("apellido_materno").value.trim();
        const email = document.getElementById("email").value.trim();

        // Validación de DNI (8 dígitos)
        if (dni === "" || dni.length !== 8 || isNaN(dni)) {
            showError("numero_documento", "El DNI debe tener exactamente 8 dígitos numéricos.");
            isValid = false;
        }

        // Validación de nombre
        if (nombre === "" || nombre.length < 3) {
            showError("nombre", "El nombre debe tener al menos 3 caracteres.");
            isValid = false;
        }

        // Validación de apellidos
        if (apellidoPaterno === "") {
            showError("apellido_paterno", "El apellido paterno es obligatorio.");
            isValid = false;
        }
        if (apellidoMaterno === "") {
            showError("apellido_materno", "El apellido materno es obligatorio.");
            isValid = false;
        }

        // Validación de correo electrónico
        const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailPattern.test(email)) {
            showError("email", "El correo electrónico no es válido.");
            isValid = false;
        }

        // Validación de teléfono con intl-tel-input
        if (!phoneInput.isValidNumber()) {
            showError("phone", "El número de teléfono no es válido.");
            isValid = false;
        }

        return isValid;
    }

    // Muestra los errores en pantalla
    function showError(inputId, message) {
        document.getElementById(inputId).classList.add('error');
        document.getElementById(inputId + "_error").innerText = message;
    }

    // Limpia los errores anteriores
    function clearErrors() {
        document.querySelectorAll(".error-message").forEach(e => e.innerText = "");
        document.querySelectorAll(".uk-input").forEach(e => e.classList.remove("error"));
    }

    // Envía el formulario si es válido
    function registerCupon(event) {
        event.preventDefault();

        if (!validateForm()) return;

        let formData = new FormData(document.getElementById("registerForm"));
        const countryData = phoneInput.getSelectedCountryData();
        formData.append("celular", phoneInput.getNumber().replace('+' + countryData.dialCode, ''));
        formData.append("celularprefijo", countryData.dialCode);

        Swal.fire({
            title: 'Procesando...',
            text: 'Por favor, espera mientras se registra la información.',
            allowOutsideClick: false,
            didOpen: () => Swal.showLoading()
        });

        $.ajax({
            type: 'POST',
            url: '/copnm',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                // Swal.fire({ icon: 'success', title: '¡Registro exitoso!', text: response.message, timer: 2000 });
                // window.location.href='/';
                Swal.fire({
                    icon: 'success',
                    title: '¡Registro exitoso! 🎉',
                    text: response.message,
                    timer: 2000,
                    timerProgressBar: true,
                    background: '#002250', // Azul oscuro
                    color: '#ffffff', // Texto blanco
                    iconColor: '#c98f3d', // Icono dorado
                    confirmButtonColor: '#c98f3d', // Botón dorado
                    confirmButtonText: '¡Genial!',
                    showClass: {
                        popup: 'animate__animated animate__fadeInDown'
                    },
                    hideClass: {
                        popup: 'animate__animated animate__fadeOutUp'
                    }
                }).then(() => {
                    window.location.href = '/';
                });

            },
            error: function() {
                Swal.fire({ icon: 'error', title: 'Error en el registro', text: 'Revisa los campos e intenta nuevamente.' });
            }
        });
    }
</script>
@endsection