@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row justify-content-center">
            <!-- Columna de Información Personal (más grande) -->
            <div class="col-md-6 mb-4">
                <div class="card">
                    <div class="card-header">Información Personal</div>
                    <div class="card-body">
                        <div class="text-center mb-4">
                            <img src="{{ Auth::user()->photo_url ?? asset('images/default-avatar.png') }}"
                                alt="Foto de perfil" class="rounded-circle"
                                style="width: 200px; height: 200px; object-fit: cover;">
                            <h4 class="mt-3">{{ Auth::user()->name }}</h4>
                            <p class="text-muted">{{ Auth::user()->email }}</p>
                        </div>

                        <!-- Formulario para cambiar foto -->
                        <form id="form-foto">
                            @csrf
                            <div class="mb-3">
                                <label for="photo" class="form-label">Cambiar foto</label>
                                <input type="file" class="form-control" id="photo" accept="image/*">
                            </div>
                            <button type="button" class="btn btn-primary" disabled>Actualizar foto</button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Columna de Cambio de Contraseña y Preguntas de Seguridad -->
            <div class="col-md-6">
                <!-- Sección de Cambio de Contraseña -->
                <div class="card mb-4">
                    <div class="card-header">Cambiar Contraseña</div>
                    <div class="card-body">
                        <form id="form-clave">
                            @csrf
                            <div class="mb-3">
                                <label for="current_password" class="form-label">Contraseña actual</label>
                                <input type="password" class="form-control" id="current_password">
                            </div>
                            <div class="mb-3">
                                <label for="new_password" class="form-label">Nueva contraseña</label>
                                <input type="password" class="form-control" id="new_password">
                            </div>
                            <div class="mb-3">
                                <label for="confirm_password" class="form-label">Confirmar nueva contraseña</label>
                                <input type="password" class="form-control" id="confirm_password">
                            </div>
                            <button type="button" class="btn btn-primary" disabled>Actualizar contraseña</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <!-- Sección de Preguntas de Seguridad -->
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">Preguntas de Seguridad</div>
                    <div class="card-body">
                        <form id="form-preguntas">
                            @csrf
                            <div class="mb-3">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>Pregunta</th>
                                            <th>Respuesta</th>
                                        </tr>
                                    </thead>
                                    <tbody id="preguntas-tbody">
                                        <!-- Las filas se llenarán dinámicamente con JavaScript -->
                                    </tbody>
                                </table>
                            </div>
                            <button type="submit" class="btn btn-primary" id="btn-respuestas">Actualizar preguntas de
                                seguridad</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')

    <script>
        $(document).ready(function () {
            Preguntas();
            function Preguntas() {
                fetch('/api/preguntas', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la consulta...');
                        }
                        return response.json();
                    })
                    .then(data => {
                        var template = '';
                        data.data.forEach(e => {
                            template += `
                                                            <tr>
                                                                <td>${e.descripcion}</td>
                                                                <td><input type="text" class="form-control respuesta-input" data-id="${e.id}" name="respuesta[${e.id}]" required></td>
                                                            </tr>
                                                        `;
                        });

                        $("#preguntas-tbody").html(template);
                    })
                    .catch(error => console.error('Error:', error));
            }
            // Enviar formulario
            $(document).on('submit', '#form-preguntas', function (e) {
                e.preventDefault(); // Evitar el envío del formulario por defecto

                // Recolectar todas las respuestas
                let respuestas = [];
                $('.respuesta-input').each(function () {
                    let id = $(this).data('id');
                    let respuesta = $(this).val();
                    if (respuesta) { // Solo incluir respuestas no vacías
                        respuestas.push({
                            pregunta_id: id,
                            respuesta: respuesta
                        });
                    }
                });

                // Obtener el usuario_id del formulario (o de otra fuente si no está en el formulario)
                let user_id = {{ Auth::id() }};

                // Enviar las respuestas y el usuario_id mediante fetch
                let form = new FormData(this);
                form.append('_method', 'PUT');
                form.append('respuestas', respuestas);

                fetch('/api/preguntas/' + user_id, {
                    method: 'POST',
                    body: JSON.stringify({
                        _method: 'PUT', // Simular PUT si es necesario
                        respuestas: respuestas,
                    }),
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                    .then(response => {

                        if (!response.ok) {
                            throw new Error('Error al guardar las respuestas...');
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log(data);
                        $('.respuesta-input').val(''); // Limpiar los campos
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('Hubo un error al guardar las respuestas');
                    });
            });
        });
    </script>

@endsection