{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="container" style="margin-top: 120px;">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h3 class="mb-0"><i class="fas fa-user me-2"></i>Mi Perfil</h3>
                </div>
                <div class="card-body p-4">
                    <!-- Información actual del usuario -->
                    <div class="row mb-4">
                        <div class="col-md-3 text-center">
                            <div class="profile-image-container mb-3">
                                {% if user.profile_image %}
                                    <img src="{{ url_for('static', filename='uploads/profiles/' + user.profile_image) }}" 
                                         alt="Foto de perfil" 
                                         class="rounded-circle img-thumbnail" 
                                         style="width: 120px; height: 120px; object-fit: cover;">
                                {% else %}
                                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center" 
                                         style="width: 120px; height: 120px; margin: 0 auto;">
                                        <i class="fas fa-user fa-3x text-muted"></i>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="col-md-9">
                            <h4>{{ user.name or user.username }}</h4>
                            <p class="text-muted mb-2"><i class="fas fa-envelope me-2"></i>{{ user.email }}</p>
                            <p class="text-muted mb-2"><i class="fas fa-user me-2"></i>{{ user.username }}</p>
                            <p class="text-muted mb-2"><i class="fas fa-calendar me-2"></i>Miembro desde {{ user.created_at.strftime('%d/%m/%Y') }}</p>
                            
                            <!-- Mostrar roles -->
                            <div class="mt-3">
                                <h6>Roles asignados:</h6>
                                {% for role in user.roles %}
                                    <span class="badge bg-secondary me-1">{{ role.name }}</span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- Formulario de actualización -->
                    <form method="POST" enctype="multipart/form-data">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <div class="row">
                            <!-- Información personal -->
                            <div class="col-md-6">
                                <h5 class="mb-3"><i class="fas fa-user-edit me-2"></i>Información Personal</h5>
                                
                                <div class="mb-3">
                                    <label for="name" class="form-label">Nombre completo</label>
                                    <input type="text" class="form-control" id="name" name="name" 
                                           value="{{ user.name or '' }}" placeholder="Tu nombre completo">
                                </div>
                                
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email</label>
                                    <input type="email" class="form-control" id="email" name="email" 
                                           value="{{ user.email }}" required>
                                </div>
                                
                                <div class="mb-3">
                                    <label for="profile_image" class="form-label">Foto de perfil</label>
                                    <input type="file" class="form-control" id="profile_image" name="profile_image" 
                                           accept="image/*">
                                    <div class="form-text">Formatos permitidos: PNG, JPG, JPEG, GIF. Máximo 5MB.</div>
                                </div>
                            </div>
                            
                            <!-- Cambio de contraseña -->
                            <div class="col-md-6">
                                <h5 class="mb-3"><i class="fas fa-lock me-2"></i>Cambiar Contraseña</h5>
                                
                                <div class="mb-3">
                                    <label for="current_password" class="form-label">Contraseña actual</label>
                                    <input type="password" class="form-control" id="current_password" name="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" name="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" name="confirm_password">
                                </div>
                                
                                <div class="alert alert-info">
                                    <small><i class="fas fa-info-circle me-1"></i>
                                    Deja estos campos vacíos si no deseas cambiar tu contraseña.</small>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Botones de acción -->
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg me-3">
                                <i class="fas fa-save me-2"></i>Guardar Cambios
                            </button>
                            <a href="{{ url_for('admin.index') }}" class="btn btn-secondary btn-lg">
                                <i class="fas fa-arrow-left me-2"></i>Volver al Panel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- Información adicional -->
            <div class="card mt-4 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>Información de la Cuenta</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Usuario:</strong> {{ user.username }}</p>
                            <p><strong>Estado:</strong> 
                                {% if user.is_active %}
                                    <span class="badge bg-success">Activo</span>
                                {% else %}
                                    <span class="badge bg-danger">Inactivo</span>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Fecha de registro:</strong> {{ user.created_at.strftime('%d de %B de %Y a las %H:%M') }}</p>
                            <p><strong>Última actualización:</strong> Ahora</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Vista previa de imagen antes de subir
document.getElementById('profile_image').addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.querySelector('.profile-image-container img, .profile-image-container div');
            if (img.tagName === 'IMG') {
                img.src = e.target.result;
            } else {
                // Reemplazar el div con una imagen
                const newImg = document.createElement('img');
                newImg.src = e.target.result;
                newImg.alt = 'Vista previa';
                newImg.className = 'rounded-circle img-thumbnail';
                newImg.style.cssText = 'width: 120px; height: 120px; object-fit: cover;';
                img.parentNode.replaceChild(newImg, img);
            }
        };
        reader.readAsDataURL(file);
    }
});

// Validación de contraseñas
document.querySelector('form').addEventListener('submit', function(e) {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const currentPassword = document.getElementById('current_password').value;
    
    if (newPassword && newPassword !== confirmPassword) {
        e.preventDefault();
        alert('Las contraseñas nuevas no coinciden');
        return false;
    }
    
    if (newPassword && !currentPassword) {
        e.preventDefault();
        alert('Debe proporcionar su contraseña actual para cambiarla');
        return false;
    }
});
</script>
{% endblock %}