{% extends 'backoffice/base.html' %}
{% load static %}

{% block title %}Mon Compte - ECOLUX Dashboard{% endblock %}

{% block content %}
<style>
.ecolux-card {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    border: none;
    transition: all 0.3s ease;
}

.ecolux-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.ecolux-primary {
    background: linear-gradient(135deg, #1e1810 0%, #2a221a 100%);
}

.ecolux-secondary {
    background: linear-gradient(135deg, #e6c252 0%, #f0d670 100%);
}

.has-text-ecolux-primary {
    color: #1e1810 !important;
}

.has-text-ecolux-secondary {
    color: #e6c252 !important;
}

.is-ecolux-primary {
    background: linear-gradient(135deg, #1e1810 0%, #2a221a 100%);
    color: white;
    border: none;
}

.is-ecolux-secondary {
    background: linear-gradient(135deg, #e6c252 0%, #f0d670 100%);
    color: #1e1810;
    border: none;
}

.avatar-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1e1810 0%, #2a221a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2.5rem;
    font-weight: bold;
    margin: 0 auto 1rem;
}

.profile-header {
    background: linear-gradient(135deg, #f8f6f0 0%, #f5f2e8 100%);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    border: 2px solid #e6c252;
}

.simple-input {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.simple-input:focus {
    border-color: #e6c252;
    box-shadow: 0 0 0 3px rgba(230, 194, 82, 0.2);
    outline: none;
}

.simple-button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.simple-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 24, 16, 0.2);
}
</style>


<section class="section is-main-section">
    

    <div class="columns">
        <!-- Informations principales -->
        <div class="column  ">
            <div class="card ecolux-card">
                <header class="card-header ecolux-primary">
                    <p class="card-header-title has-text-white">
                        <i class="fas fa-user-edit mr-2"></i>
                        Mes Informations
                    </p>
                </header>
                
                <div class="card-content">
                    {% if messages %}
                        {% for message in messages %}
                        <div class="notification {% if message.tags == 'success' %}is-success{% elif message.tags == 'error' %}is-danger{% else %}is-info{% endif %} is-light mb-4">
                            <button class="delete" onclick="this.parentElement.remove()"></button>
                            {{ message }}
                        </div>
                        {% endfor %}
                    {% endif %}

                    <form method="POST" enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- Photo de profil -->
                        <div class="field mb-5">
                            <label class="label has-text-ecolux-primary">
                                <i class="fas fa-camera mr-2"></i>Photo de profil
                            </label>
                            <div class="file has-name is-fullwidth">
                                <label class="file-label">
                                    <input class="file-input" type="file" name="image" accept="image/*" onchange="updateFileName(this)">
                                    <span class="file-cta is-ecolux-secondary">
                                        <span class="file-icon">
                                            <i class="fas fa-upload"></i>
                                        </span>
                                        <span class="file-label">Choisir une photo</span>
                                    </span>
                                    <span class="file-name" id="fileName">
                                        {% if user_profile.image %}Photo actuelle{% else %}Aucune photo{% endif %}
                                    </span>
                                </label>
                            </div>
                        </div>

                        <!-- Nom et prénom -->
                        <div class="columns">
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Prénom</label>
                                    <input class="input simple-input" type="text" name="first_name" value="{{ user.first_name }}" placeholder="Votre prénom">
                                </div>
                            </div>
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Nom</label>
                                    <input class="input simple-input" type="text" name="last_name" value="{{ user.last_name }}" placeholder="Votre nom">
                                </div>
                            </div>
                        </div>

                        <!-- Email et téléphone -->
                        <div class="columns">
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Email</label>
                                    <input disabled class="input simple-input" type="email" name="email" value="{{ user.email }}" placeholder="votre@email.com">
                                </div>
                            </div>
                            <div class="column">
                                <div class="field">
                                    <label class="label has-text-ecolux-primary">Téléphone</label>
                                    <input class="input simple-input" type="tel" name="phone" value="{{ user_profile.phone }}" placeholder="+221 XX XXX XX XX">
                                </div>
                            </div>
                        </div>

                        <!-- Adresse -->
                        <div class="field">
                            <label class="label has-text-ecolux-primary">Adresse</label>
                            <textarea class="textarea simple-input" name="address" rows="3" placeholder="Votre adresse complète">{{ user_profile.address }}</textarea>
                        </div>

                        <!-- Boutons -->
                        <div class="field is-grouped mt-5">
                            <div class="control">
                                <button type="submit" class="button is-ecolux-primary simple-button">
                                    <i class="fas fa-save mr-2"></i>
                                    Sauvegarder
                                </button>
                            </div>
                            <div class="control">
                                <a href="{% url 'app:dashboard_home' %}" class="button is-light simple-button">
                                    <i class="fas fa-arrow-left mr-2"></i>
                                    Retour
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        
    </div>
</section>

<script>
function updateFileName(input) {
    const fileName = document.getElementById('fileName');
    if (input.files && input.files.length > 0) {
        fileName.textContent = input.files[0].name;
    } else {
        fileName.textContent = '{% if user_profile.image %}Photo actuelle{% else %}Aucune photo{% endif %}';
    }
}

function requestPasswordReset() {
    if (confirm('Un email de réinitialisation sera envoyé à {{ user.email }}. Continuer ?')) {
        // Afficher une notification de succès
        const notification = document.createElement('div');
        notification.className = 'notification is-success is-light';
        notification.innerHTML = `
            <button class="delete" onclick="this.parentElement.remove()"></button>
            <i class="fas fa-check-circle mr-2"></i>
            <strong>Email envoyé !</strong> Vérifiez votre boîte de réception.
        `;
        
        document.querySelector('.card-content').appendChild(notification);
        
        // Auto-hide après 5 secondes
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    }
}

// Auto-hide notifications
document.addEventListener('DOMContentLoaded', function() {
    const notifications = document.querySelectorAll('.notification');
    notifications.forEach(notification => {
        setTimeout(() => {
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }, 5000);
    });
});
</script>
{% endblock %}