@extends('layout.master')

@section('title', 'Educa Auge - Accede a los mejores cursos online para docentes')

@section('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/login.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/css/soporte.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css" />
@endsection

@section('content')
    <main class="page-main">
        <!-- <div class="fl-subnav">
                <ul class="uk-subnav uk-subnav-pill">
                    <li><a href="{{ url('/categoria') }}">Todo</a></li>
                    <li><a href="{{ url('/categoria') }}">Premiunm</a></li>
                    <li><a href="{{ url('/categoria') }}">Gratuito</a></li>
                    <li><a href="{{ url('/categoria') }}">Gratuito con registro</a></li>
                    <li><a href="{{ url('/categoria') }}">Recientes</a></li>
                    <li><a href="{{ url('/categoria') }}">Programados</a></li>
                </ul>
            </div> -->

        <div class="bodyfull">
            <div class="uk-section uk-container">
                <h4 class="uk-heading-line uk-text-center"><span>Mi Cuenta</span></h4>

                <div class="uk-grid-divider uk-grid-large" uk-grid>
                    <!-- Columna de la Foto de Perfil -->
                    <div class="uk-width-1-3@m uk-text-center uk-flex-first@s">
                        <style>
                            .uk-margin img {
                                width: 150px;
                                height: 150px;
                            }

                            .fotoperfil {
                                margin: 0 !important;
                            }

                            /* Media query para pantallas menores a 768px */
                            @media (max-width: 768px) {
                                .uk-margin img {
                                    width: 100px;
                                    height: 100px;
                                }
                            }
                        </style>
                        <!-- Foto de Perfil -->
                        <div class="uk-margin fotoperfil">
                            <img class="uk-border-circle"
                                src="{{ asset(session('suscrito')['user']->imagen ? 'imagenes_usuarios/' . session('suscrito')['user']->imagen : 'https://www.gravatar.com/avatar/' . md5(strtolower(trim(session('suscrito')['user']->email))) . '?s=256&d=mp') }}"
                                alt="Foto de Perfil" width="150" height="150">
                        </div>
                        <button class="uk-button uk-button-default uk-margin-top" type="button"
                            onclick="document.getElementById('profile_picture').click();">Cambiar Foto</button>
                        <input type="file" id="profile_picture" name="profile_picture" style="display:none;"
                            onchange="uploadProfilePicture(event)">
                    </div>
                    <!-- Columna del Formulario -->
                    <div class="uk-width-expand@m formsoporte">
                        <!-- Información del Usuario (ID y Tipo) -->
                        <input type="hidden" id="user_id" value="{{ session('suscrito')['user']->id_suscrito }}">

                        <!-- Información Personal -->
                        <fieldset class="uk-fieldset">
                            <legend class="uk-legend">Información Personal</legend>
                            <!-- Nombre -->
                            <div class="uk-margin">
                                <label for="coreo" class="uk-form-label">Email</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" required
                                        placeholder="Tu correo" value="{{ session('suscrito')['user']->email }}">

                                </div>
                            </div>
                            <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                <div>
                                    <label for="tipo_documento" class="uk-form-label">Tipo de Documento</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <select class="uk-input" id="tipo_documento" name="tipo_documento" disabled>
                                            <option value="">Selecciona el tipo de documento</option>
                                            <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>
                                        <span id="tipo_documento_error" class="error-message"></span>
                                    </div>
                                </div>
                                <div>
                                    <label for="numero_documento" class="uk-form-label">Número de Documento</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <input class="uk-input" id="numero_documento" type="text" disabled
                                            name="numero_documento" required placeholder="Número de documento"
                                            value="{{ session('suscrito')['user']->dni }}">
                                        <span id="numero_documento_error" class="error-message"></span>
                                    </div>
                                </div>
                            </div>

                            <!-- Nombre -->
                            <div class="uk-margin">
                                <label for="nombre" class="uk-form-label">Nombre(s)</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    <input class="uk-input" id="nombre" type="text" name="nombre" required
                                        placeholder="Tu nombre" value="{{ session('suscrito')['user']->nombre }}">
                                    <span id="nombre-error" class="error-text" style="color: red; display:none;">Este campo
                                        es
                                        obligatorio.</span>
                                </div>
                            </div>

                            <!-- Apellido Paterno -->
                            <div class="uk-margin">
                                <label for="apellido_paterno" class="uk-form-label">Apellido Paterno</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    <input class="uk-input" id="apellido_paterno" type="text" name="apellido_paterno"
                                        required placeholder="Apellido paterno"
                                        value="{{ session('suscrito')['user']->ap_pa }}">
                                    <span id="apellido_paterno-error" class="error-text"
                                        style="color: red; display:none;">Este
                                        campo es obligatorio.</span>
                                </div>
                            </div>

                            <!-- Apellido Materno -->
                            <div class="uk-margin">
                                <label for="apellido_materno" class="uk-form-label">Apellido Materno</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    <input class="uk-input" id="apellido_materno" type="text" name="apellido_materno"
                                        required placeholder="Apellido materno"
                                        value="{{ session('suscrito')['user']->ap_ma }}">
                                    <span id="apellido_materno-error" class="error-text"
                                        style="color: red; display:none;">Este
                                        campo es obligatorio.</span>
                                </div>
                            </div>
                            <!-- <div class="uk-margin">
                                    <label for="fecha_nacimiento" class="uk-form-label">Fecha de Nacimiento</label>
                                    <div class="uk-inline uk-width-1-1">
                                        <span class="uk-form-icon"><i class="fas fa-calendar-alt"></i></span>
                                        <input class="uk-input" id="fecha_nacimiento" type="date" name="fecha_nacimiento" required
                                            value="{{ session('suscrito')['user']->fecha_nacimiento }}">
                                        <span id="fecha_nacimiento-error" class="error-text" style="color: red; display:none;">Este
                                            campo es obligatorio.</span>
                                    </div>
                                </div> -->

                            <!-- Teléfono con intl-tel-input -->
                            <div class="uk-margin">
                                <label for="phone" class="uk-form-label">Celular</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-phone"></i></span>
                                    <input class="uk-input" id="phone" type="tel" name="celular" required>
                                    <span id="phone-error" class="error-text" style="color: red; display:none;">El número
                                        de teléfono no
                                        es válido.</span>
                                </div>
                            </div>
                            <div class="uk-margin">
                                <label for="especialidad" class="uk-form-label">Especialidad</label>
                                <select class="uk-input" id="especialidad" name="especialidad" required>
                                    <option value="">Selecciona una especialidad</option>
                                    @foreach ($especialidades as $especialidad)
                                        <option value="{{ $especialidad->id_especialidad }}"
                                            {{ session('suscrito')['user']->id_especialidad == $especialidad->id_especialidad ? 'selected' : '' }}>
                                            {{ $especialidad->titulo }}</option>
                                    @endforeach
                                </select>
                                <span id="especialidad_error" class="error-message"></span>
                            </div>
                            <div class="uk-margin">
                                <label for="especialidad" class="uk-form-label">Eres Nombrado</label>
                                <select class="uk-input" id="tipo_cliente" name="tipo_cliente" required>
                                    <option value="">Selecciona una opcion</option>
                                    <option value="1"
                                        {{ session('suscrito')['user']->id_tipo_cliente == 1 ? 'selected' : '' }}>SI
                                    </option>
                                    <option value="2"
                                        {{ session('suscrito')['user']->id_tipo_cliente == 2 ? 'selected' : '' }}>NO
                                    </option>
                                </select>
                                <span id="tipo_cliente_error" class="error-message"></span>
                            </div>



                        </fieldset>

                        <!-- Sección para Cambiar la Contraseña -->
                        <fieldset class="uk-fieldset uk-margin-top">
                            <legend class="uk-legend">Cambiar Contraseña (Opcional)</legend>

                            <!-- Contraseña Actual -->
                            <div class="uk-margin">
                                <label for="current_password" class="uk-form-label">Contraseña Actual</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    <input class="uk-input" id="current_password" type="password"
                                        name="current_password" placeholder="Ingresa tu contraseña actual">
                                    <span class="toggle-password"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
                                        <i class="fa fa-eye"></i>
                                    </span>
                                    <span id="current_password-error" class="error-text"
                                        style="color: red; display:none;">Si
                                        cambias la contraseña, ingresa la actual.</span>
                                </div>
                            </div>

                            <!-- Nueva Contraseña -->
                            <div class="uk-margin">
                                <label for="new_password" class="uk-form-label">Nueva Contraseña</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    <input class="uk-input" id="new_password" type="password" name="new_password"
                                        placeholder="Crea una nueva contraseña (mín. 8 caracteres)">
                                    <span class="toggle-password"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
                                        <i class="fa fa-eye"></i>
                                    </span>
                                    <span id="new_password-error" class="error-text" style="color: red; display:none;">La
                                        contraseña debe tener al menos 8 caracteres.</span>
                                </div>
                            </div>

                            <!-- Confirmar Nueva Contraseña -->
                            <div class="uk-margin">
                                <label for="confirm_new_password" class="uk-form-label">Confirmar Nueva Contraseña</label>
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    <input class="uk-input" id="confirm_new_password" type="password"
                                        name="confirm_new_password" placeholder="Confirma tu nueva contraseña">
                                    <span class="toggle-password"
                                        style="position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer;">
                                        <i class="fa fa-eye"></i>
                                    </span>
                                    <span id="confirm_new_password-error" class="error-text"
                                        style="color: red; display:none;">Las
                                        contraseñas no coinciden.</span>
                                </div>
                            </div>
                            <script>
                                document.querySelectorAll('.toggle-password').forEach(item => {
                                    item.addEventListener('click', function() {
                                        let input = this.previousElementSibling; // El campo de contraseña anterior al ícono
                                        let icon = this.querySelector('i'); // El ícono del ojo

                                        if (input.type === "password") {
                                            input.type = "text";
                                            icon.classList.remove('fa-eye');
                                            icon.classList.add('fa-eye-slash');
                                        } else {
                                            input.type = "password";
                                            icon.classList.remove('fa-eye-slash');
                                            icon.classList.add('fa-eye');
                                        }
                                    });
                                });
                            </script>

                        </fieldset>

                        <!-- Botón de Guardar Cambios -->
                        <div class="uk-margin-top">
                            <button type="button" class="uk-button uk-button-primary uk-width-1-1"
                                onclick="validateAndSubmit12()">Guardar Cambios</button>
                        </div>
                    </div>
                    <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 phoneInput1;

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


                        function initializePhoneInput() {
                            const phoneInputField = document.querySelector("#phone");

                            // Datos guardados del usuario (Prefijo y Número)
                            const numeroGuardado = "{{ session('suscrito')['user']->telefono ?? '' }}"; // Por ejemplo, '987654321'

                            // Combinar prefijo y número para setear en intl-tel-input
                            const numeroCompleto = `${numeroGuardado}`;

                            phoneInput1 = window.intlTelInput(phoneInputField, {
                                initialCountry: "auto", // Automático pero usaremos el número completo
                                separateDialCode: true, // Mostrar el prefijo separado
                                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"
                            });

                            // Configurar el número completo en el campo
                            if (numeroGuardado) {
                                phoneInput1.setNumber(numeroCompleto); // Setear el número en el formato internacional
                            }
                        }

                        function validateAndSubmit12() {
                            // Limpiar mensajes de error previos
                            document.querySelectorAll('.error-text').forEach(function(element) {
                                element.style.display = 'none';
                            });

                            // Validar los campos
                            let valid = true;
                            const nombre = document.getElementById('nombre').value.trim();
                            const apellido_paterno = document.getElementById('apellido_paterno').value.trim();
                            const apellido_materno = document.getElementById('apellido_materno').value.trim();
                            // const fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
                            const tipoCliente = document.getElementById('tipo_cliente').value.trim();
                            const especialidad = document.getElementById('especialidad').value.trim();
                            const celular = phoneInput1.getNumber();

                            const new_password = document.getElementById('new_password').value;
                            const confirm_new_password = document.getElementById('confirm_new_password').value;

                            if (!nombre) {
                                document.getElementById('nombre-error').style.display = 'block';
                                valid = false;
                            }

                            if (!apellido_paterno) {
                                document.getElementById('apellido_paterno-error').style.display = 'block';
                                valid = false;
                            }

                            if (!apellido_materno) {
                                document.getElementById('apellido_materno-error').style.display = 'block';
                                valid = false;
                            }
                            if (especialidad === "") {
                                showError('especialidad', 'La especialidad es obligatoria.');
                                isValid = false;
                            }
                            if (tipoCliente === "") {
                                showError('tipo_cliente', 'Esta opcion es obligatoria.');
                                isValid = false;
                            }

                            // if (!fecha_nacimiento) {
                            //     document.getElementById('fecha_nacimiento-error').style.display = 'block';
                            //     valid = false;
                            // }

                            if (!phoneInput1.isValidNumber()) {
                                document.getElementById('phone-error').style.display = 'block';
                                valid = false;
                            }

                            if (new_password || confirm_new_password) {
                                if (new_password.length < 8) {
                                    document.getElementById('new_password-error').style.display = 'block';
                                    valid = false;
                                }

                                if (new_password !== confirm_new_password) {
                                    document.getElementById('confirm_new_password-error').style.display = 'block';
                                    valid = false;
                                }
                            }

                            if (valid) {
                                updateUserProfile(); // Llamar a la función para enviar el formulario si es válido
                            }
                        }

                        function updateUserProfile() {
                            const user_id = document.getElementById('user_id').value;
                            const nombre = document.getElementById('nombre').value;
                            const apellido_paterno = document.getElementById('apellido_paterno').value;
                            const apellido_materno = document.getElementById('apellido_materno').value;
                            // const fecha_nacimiento = document.getElementById('fecha_nacimiento').value;
                            const nacionalidad = phoneInput1.getSelectedCountryData().iso2;
                            const pais_codigo = phoneInput1.getSelectedCountryData().iso2;
                            const pais_nombre = phoneInput1.getSelectedCountryData().name;
                            const prefijo = phoneInput1.getSelectedCountryData().dialCode;
                            const celular = phoneInput1.getNumber().replace('+' + prefijo, '');
                            const tipo_cliente = document.getElementById('tipo_cliente').value;
                            const especialidad = document.getElementById('especialidad').value;


                            const current_password = document.getElementById('current_password').value;
                            const new_password = document.getElementById('new_password').value;
                            const _token = '{{ csrf_token() }}';

                            const formData = {
                                user_id,
                                nombre,
                                apellido_paterno,
                                apellido_materno,
                                // fecha_nacimiento,
                                nacionalidad,
                                celular,
                                prefijo,
                                current_password,
                                new_password,
                                pais_codigo,
                                pais_nombre,
                                _token,
                                tipo_cliente,
                                especialidad
                            };
                            Swal.fire({
                                title: 'Actulizando Datos...',
                                text: 'Por favor, espere...',
                                allowOutsideClick: false, // Evitar que el usuario cierre la alerta
                                showConfirmButton: false, // Ocultar botón de confirmación
                                willOpen: () => {
                                    Swal.showLoading(); // Mostrar indicador de carga
                                }
                            });

                            // Enviar los datos mediante AJAX
                            $.ajax({
                                url: '/update-profile', // Ruta para actualizar el perfil
                                type: 'POST',
                                data: formData,
                                success: function(response) {
                                    Swal.fire('Éxito', 'Tu perfil ha sido actualizado.', 'success').then(() => {
                                        location.reload();
                                    });
                                },
                                error: function(response) {
                                    // Verifica si el response contiene responseJSON y un mensaje
                                    let errorMessage = response.responseJSON && response.responseJSON.message ? response
                                        .responseJSON.message : 'Ocurrió un error inesperado.';
                                    Swal.fire('Error', errorMessage, 'error');
                                }

                            });
                        }

                        function uploadProfilePicture(e) {
                            e.preventDefault();
                            const fileInput = document.getElementById('profile_picture');
                            const formData = new FormData();
                            formData.append('profile_picture', fileInput.files[0]);
                            formData.append('_token', '{{ csrf_token() }}');

                            // Mostrar alerta de carga
                            Swal.fire({
                                title: 'Cargando imagen...',
                                text: 'Por favor, espere mientras se sube la imagen.',
                                allowOutsideClick: false, // Evitar que el usuario cierre la alerta
                                showConfirmButton: false, // Ocultar botón de confirmación
                                willOpen: () => {
                                    Swal.showLoading(); // Mostrar indicador de carga
                                }
                            });

                            $.ajax({
                                url: '/update-profile-picture',
                                type: 'POST',
                                data: formData,
                                contentType: false,
                                processData: false,
                                success: function(response) {
                                    Swal.fire('Éxito', 'La imagen de perfil ha sido actualizada.', 'success').then(() => {
                                        location.reload();
                                    });
                                },
                                error: function(response) {
                                    Swal.fire('Error', 'Hubo un problema al actualizar la imagen.', 'error');
                                }
                            });
                        }
                    </script>
                </div>
            </div>
        </div>
    </main>
@endsection