@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>
                        <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>

                    <!-- Información adicional -->
                    <div class="mt-4">
                        <h5>Información de contacto</h5>
                        <p>Teléfono: {{ Auth::user()->phone ?? 'No disponible' }}</p>
                        <p>Dirección: {{ Auth::user()->address ?? 'No disponible' }}</p>
                    </div>
                </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>
                        <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>

            <!-- Sección de Preguntas de Seguridad -->
            <div class="card">
                <div class="card-header">Preguntas de Seguridad</div>
                <div class="card-body">
                    <form>
                        <div class="mb-3">
                            <label for="security_question_1" class="form-label">Pregunta de seguridad 1</label>
                            <select class="form-select" id="security_question_1">
                                <option value="">Selecciona una pregunta</option>
                                <option value="1">¿Cuál es el nombre de tu mascota?</option>
                                <option value="2">¿Cuál es tu comida favorita?</option>
                                <option value="3">¿Cuál es el nombre de tu primera escuela?</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="security_answer_1" class="form-label">Respuesta</label>
                            <input type="text" class="form-control" id="security_answer_1">
                        </div>
                        <div class="mb-3">
                            <label for="security_question_2" class="form-label">Pregunta de seguridad 2</label>
                            <select class="form-select" id="security_question_2">
                                <option value="">Selecciona una pregunta</option>
                                <option value="4">¿Cuál es el nombre de tu ciudad natal?</option>
                                <option value="5">¿Cuál es tu color favorito?</option>
                                <option value="6">¿Cuál es tu libro favorito?</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="security_answer_2" class="form-label">Respuesta</label>
                            <input type="text" class="form-control" id="security_answer_2">
                        </div>
                        <button type="button" class="btn btn-primary" disabled>Actualizar preguntas de seguridad</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection