app/templates/admin/user_detail.html

{% extends "admin/base.html" %}

{% block title %}Détails de {{ user.name }}{% endblock %}
{% block page_title %}Profil Utilisateur{% endblock %}

{% block content %}
<!-- Back Button -->
<a href="{{ url_for('admin_panel.users') }}" class="inline-flex items-center text-gray-400 hover:text-yellow-400 transition-colors mb-6">
    <i class="fas fa-arrow-left mr-2"></i>
    Retour à la liste des utilisateurs
</a>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- User Profile Card -->
    <div class="lg:col-span-1">
        <div class="bg-gray-800 rounded-xl border border-gray-700 p-6">
            <!-- Avatar and Name -->
            <div class="text-center mb-6">
                <div class="w-24 h-24 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span class="text-white font-bold text-4xl">{{ user.name[0].upper() if user.name else '?' }}</span>
                </div>
                <h2 class="text-2xl font-bold text-white">{{ user.name }}</h2>
                <p class="text-gray-400">{{ user.country_code }}{{ user.phone }}</p>

                <!-- Status Badges -->
                <div class="flex items-center justify-center space-x-2 mt-3">
                    {% if user.account_active %}
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30">
                        <i class="fas fa-check-circle mr-1"></i> Actif
                    </span>
                    {% else %}
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30">
                        <i class="fas fa-times-circle mr-1"></i> Inactif
                    </span>
                    {% endif %}

                    {% if user.is_admin %}
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30">
                        <i class="fas fa-crown mr-1"></i> Admin
                    </span>
                    {% endif %}
                </div>
            </div>

            <!-- Balance Info -->
            <div class="space-y-4 mb-6">
                <div class="bg-gray-700/50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm text-gray-400">Solde Principal</span>
                        <i class="fas fa-wallet text-green-400"></i>
                    </div>
                    <p class="text-2xl font-bold text-green-400">{{ "{:,.0f}".format(user.balance) }} <span class="text-sm font-normal text-gray-400">FCFA</span></p>
                </div>

                {% if user.locked_bonus > 0 %}
                <div class="bg-yellow-900/30 rounded-lg p-4 border border-yellow-600/30">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm text-yellow-400">Bonus Bloqué</span>
                        <i class="fas fa-lock text-yellow-400"></i>
                    </div>
                    <p class="text-2xl font-bold text-yellow-400">{{ "{:,.0f}".format(user.locked_bonus) }} <span class="text-sm font-normal text-gray-400">FCFA</span></p>
                    <a href="{{ url_for('admin_panel.unlock_bonus', user_id=user.id) }}"
                       onclick="return confirm('Êtes-vous sûr de vouloir débloquer le bonus de cet utilisateur ?')"
                       class="mt-2 inline-flex items-center text-xs text-yellow-400 hover:text-yellow-300">
                        <i class="fas fa-unlock mr-1"></i> Débloquer manuellement
                    </a>
                </div>
                {% endif %}

                <div class="bg-gray-700/50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm text-gray-400">Solde Total Affiché</span>
                        <i class="fas fa-eye text-blue-400"></i>
                    </div>
                    <p class="text-2xl font-bold text-white">{{ "{:,.0f}".format(user.display_balance) }} <span class="text-sm font-normal text-gray-400">FCFA</span></p>
                </div>

                <div class="bg-gray-700/50 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-1">
                        <span class="text-sm text-gray-400">Gains Totaux</span>
                        <i class="fas fa-chart-line text-purple-400"></i>
                    </div>
                    <p class="text-2xl font-bold text-purple-400">{{ "{:,.0f}".format(user.total_gains) }} <span class="text-sm font-normal text-gray-400">FCFA</span></p>
                </div>
            </div>

            <!-- User Details -->
            <div class="border-t border-gray-700 pt-4 space-y-3">
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-400">Code Parrainage</span>
                    <code class="bg-gray-700 px-2 py-1 rounded text-yellow-400 text-sm">{{ user.referral_code }}</code>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-400">Parrainé par</span>
                    <span class="text-white text-sm">{{ user.referred_by_code or '-' }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-400">Inscrit le</span>
                    <span class="text-white text-sm">{{ user.created_at.strftime('%d/%m/%Y') }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-400">Dernière connexion</span>
                    <span class="text-white text-sm">{{ user.last_login.strftime('%d/%m/%Y %H:%M') if user.last_login else 'Jamais' }}</span>
                </div>
                <div class="flex items-center justify-between">
                    <span class="text-sm text-gray-400">A souscrit un plan</span>
                    {% if user.has_active_subscription %}
                    <span class="text-green-400 text-sm"><i class="fas fa-check mr-1"></i> Oui</span>
                    {% else %}
                    <span class="text-red-400 text-sm"><i class="fas fa-times mr-1"></i> Non</span>
                    {% endif %}
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="mt-6 space-y-2">
                <a href="{{ url_for('admin_panel.adjust_balance', user_id=user.id) }}"
                   class="w-full inline-flex items-center justify-center px-4 py-2 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30 border border-yellow-500/30 rounded-lg transition-colors">
                    <i class="fas fa-coins mr-2"></i> Ajuster le Solde
                </a>
                <a href="{{ url_for('admin_panel.toggle_user', user_id=user.id) }}"
                   onclick="return confirm('Êtes-vous sûr de vouloir {{ 'désactiver' if user.account_active else 'activer' }} ce compte ?')"
                   class="w-full inline-flex items-center justify-center px-4 py-2 rounded-lg transition-colors
                   {% if user.account_active %}bg-red-500/20 text-red-400 hover:bg-red-500/30 border border-red-500/30{% else %}bg-green-500/20 text-green-400 hover:bg-green-500/30 border border-green-500/30{% endif %}">
                    {% if user.account_active %}
                    <i class="fas fa-user-slash mr-2"></i> Désactiver le Compte
                    {% else %}
                    <i class="fas fa-user-check mr-2"></i> Activer le Compte
                    {% endif %}
                </a>
            </div>
        </div>
    </div>

    <!-- Right Column -->
    <div class="lg:col-span-2 space-y-6">
        <!-- Active Investments -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-700">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-gem mr-2 text-yellow-400"></i>
                    Investissements Actifs ({{ investments|length }})
                </h3>
            </div>

            {% if investments %}
            <div class="divide-y divide-gray-700">
                {% for investment in investments %}
                <div class="p-4 hover:bg-gray-700/50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-12 h-12 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-gem text-white"></i>
                            </div>
                            <div>
                                <p class="font-medium text-white">{{ investment.metal.name if investment.metal else 'Plan Inconnu' }}</p>
                                <p class="text-sm text-gray-400">Acheté le {{ investment.purchase_date.strftime('%d/%m/%Y') }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-yellow-400">{{ "{:,.0f}".format(investment.purchase_price) }} FCFA</p>
                            <p class="text-sm text-gray-400">
                                Expire le {{ investment.expiry_date.strftime('%d/%m/%Y') }}
                            </p>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="p-8 text-center text-gray-500">
                <i class="fas fa-gem text-4xl mb-3 opacity-50"></i>
                <p>Aucun investissement actif</p>
            </div>
            {% endif %}
        </div>

        <!-- Referrals -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-700">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-users mr-2 text-blue-400"></i>
                    Filleuls ({{ referrals|length }})
                </h3>
            </div>

            {% if referrals %}
            <div class="divide-y divide-gray-700">
                {% for referral in referrals[:10] %}
                <div class="p-4 hover:bg-gray-700/50 transition-colors">
                    <div class="flex items-center justify-between">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-full flex items-center justify-center mr-3">
                                <span class="text-white font-bold text-sm">{{ referral.name[0].upper() if referral.name else '?' }}</span>
                            </div>
                            <div>
                                <p class="font-medium text-white">{{ referral.name }}</p>
                                <p class="text-sm text-gray-400">{{ referral.phone }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-400">Inscrit le {{ referral.created_at.strftime('%d/%m/%Y') }}</p>
                            <a href="{{ url_for('admin_panel.user_detail', user_id=referral.id) }}" class="text-xs text-yellow-400 hover:text-yellow-300">
                                Voir le profil <i class="fas fa-arrow-right ml-1"></i>
                            </a>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% if referrals|length > 10 %}
            <div class="px-6 py-3 bg-gray-700/50 text-center">
                <span class="text-sm text-gray-400">Et {{ referrals|length - 10 }} autre(s) filleul(s)...</span>
            </div>
            {% endif %}
            {% else %}
            <div class="p-8 text-center text-gray-500">
                <i class="fas fa-users text-4xl mb-3 opacity-50"></i>
                <p>Aucun filleul</p>
            </div>
            {% endif %}
        </div>

        <!-- Recent Transactions -->
        <div class="bg-gray-800 rounded-xl border border-gray-700 overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-700 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-white">
                    <i class="fas fa-history mr-2 text-green-400"></i>
                    Transactions Récentes
                </h3>
            </div>

            {% if transactions %}
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-900/50">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Type</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Montant</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Description</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Statut</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-700">
                        {% for transaction in transactions %}
                        <tr class="hover:bg-gray-700/50">
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                    {% if transaction.type == 'deposit' %}bg-green-500/20 text-green-400
                                    {% elif transaction.type == 'withdrawal' %}bg-red-500/20 text-red-400
                                    {% elif transaction.type == 'purchase' %}bg-blue-500/20 text-blue-400
                                    {% elif transaction.type == 'bonus' %}bg-purple-500/20 text-purple-400
                                    {% else %}bg-gray-500/20 text-gray-400{% endif %}">
                                    {{ transaction.type }}
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="font-medium {% if transaction.type == 'withdrawal' %}text-red-400{% else %}text-green-400{% endif %}">
                                    {% if transaction.type == 'withdrawal' %}-{% else %}+{% endif %}{{ "{:,.0f}".format(transaction.amount) }} FCFA
                                </span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="text-sm text-gray-300 truncate max-w-xs block">{{ transaction.description or '-' }}</span>
                            </td>
                            <td class="px-4 py-3">
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                    {% if transaction.status == 'completed' %}bg-green-500/20 text-green-400
                                    {% elif transaction.status == 'pending' %}bg-yellow-500/20 text-yellow-400
                                    {% elif transaction.status == 'rejected' %}bg-red-500/20 text-red-400
                                    {% else %}bg-gray-500/20 text-gray-400{% endif %}">
                                    {{ transaction.status }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-sm text-gray-400">
                                {{ transaction.created_at.strftime('%d/%m/%Y %H:%M') }}
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="p-8 text-center text-gray-500">
                <i class="fas fa-receipt text-4xl mb-3 opacity-50"></i>
                <p>Aucune transaction</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}