@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/perfil.css') }}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css" />
    <style>
        .uk-margin img {
            width: 150px;
            height: 150px;
        }

        .fotoperfil {
            margin: 0 !important;
        }

        .info-body .uk-grid>div:first-child {
            border-right: none !important;
        }

        /* Media query para pantallas menores a 768px */
        @media (max-width: 768px) {
            .uk-margin img {
                width: 100px;
                height: 100px;
            }
        }
    </style>

@endsection
@section('content')
    <main class="page-main">

        <div class="uk-container">



            <div class="info-header1 margin-div">
                <h3 class="">Editar Perfil</h3>
                <a href="{{url('/aulavirtual/perfil')}}" class="btn-editar">Ver perfil</a>

            </div>

            <!-- Contenido -->
            <div class="info-card">
                <div class="info-body padding-card " style="margin-bottom: 20px">
                    <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">

                            <!-- 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 btn-guardar 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>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 class="margen">
                                        <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 class="margen">
                                        <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>

                                <div class="uk-margin uk-grid-small uk-child-width-1-2@s" uk-grid>
                                    <!-- Apellido Paterno -->
                                    <div class="margen">
                                        <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="margen">
                                        <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>

                                <!-- 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 uk-grid-small uk-child-width-1-2@s" uk-grid>
                                    <div class="margen">
                                        <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="margen">
                                        <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>

                                </div>
                            </fieldset>

                            <!-- Sección para Cambiar la Contraseña -->
                            <fieldset class="uk-fieldset">
                                <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 uk-grid-small uk-child-width-1-2@s" uk-grid>

                                    <div class="margen">
                                        <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 ">
                                            <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="margen">
                                        <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>
                                </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 >
                                <button type="button" class="uk-button btn-guardar 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>

            <br>
            <br><br><br>


        </div>
    </main>
@endsection