app/templates/dashboard.html

{% extends "base.html" %} {% block title %}Tableau de Bord{% endblock %} {%
block content %}
<div id="view-home" class="px-5 pt-4">
    <!-- CARTE PRINCIPALE (SOLDE + ACTIONS) -->
    <div
        class="bg-card rounded-3xl p-6 shadow-float border border-gray-800 mb-8 relative overflow-hidden"
    >
        <!-- Effet de fond -->
        <div
            class="absolute top-0 right-0 w-32 h-32 bg-primary/5 rounded-full blur-3xl -mr-10 -mt-10 pointer-events-none"
        ></div>

        <div class="text-center mb-8 relative z-10">
            <p class="text-gray-400 text-sm font-medium mb-1">
                Solde Disponible
            </p>
            <h1 class="text-4xl font-bold text-white tracking-tighter mb-2">
                <span id="main-balance"
                    >{{ "{:,.0f}".format(current_user.balance) }}</span
                >
                <span class="text-xl text-gray-500 font-normal">F</span>
            </h1>

            <!-- Badge Gain Journalier -->
            <div
                class="inline-flex items-center gap-1.5 bg-gray-800/80 px-3 py-1 rounded-full border border-gray-700 backdrop-blur-sm"
            >
                <div
                    class="w-2 h-2 rounded-full bg-primary animate-pulse"
                ></div>
                <span class="text-xs font-medium text-primary"
                    >Gain: +{{ "{:,.0f}".format(total_daily_gains) }} F/j</span
                >
            </div>

            {% if current_user.locked_bonus > 0 %}
            <div
                class="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-2xl"
            >
                <p
                    class="text-[10px] text-accent font-bold uppercase tracking-wider mb-1"
                >
                    Bonus Bloqué
                </p>
                <p class="text-lg font-bold text-white">
                    {{ "{:,.0f}".format(current_user.locked_bonus) }} F
                </p>
                <p class="text-[9px] text-gray-400 mt-1">
                    Investissez pour débloquer ce bonus
                </p>
            </div>
            {% endif %}
        </div>

        <!-- LES GROS BOUTONS D'ACTION -->
        <div class="grid grid-cols-2 gap-4 relative z-10">
            <!-- Dépôt -->
            <button
                onclick="openModal('deposit-modal')"
                class="btn-press bg-primary hover:bg-primaryDark text-white rounded-2xl p-4 flex flex-col items-center justify-center gap-2 transition shadow-glow group"
            >
                <div
                    class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center group-hover:scale-110 transition"
                >
                    <i class="fa-solid fa-plus text-lg"></i>
                </div>
                <span class="font-bold text-sm">Dépôt</span>
            </button>

            <!-- Retrait -->
            <button
                onclick="openModal('withdraw-modal')"
                class="btn-press bg-cardLight hover:bg-gray-600 text-white rounded-2xl p-4 flex flex-col items-center justify-center gap-2 transition border border-gray-600"
            >
                <div
                    class="w-10 h-10 bg-black/20 rounded-full flex items-center justify-center"
                >
                    <i
                        class="fa-solid fa-arrow-right text-lg text-gray-300"
                    ></i>
                </div>
                <span class="font-medium text-sm text-gray-300">Retrait</span>
            </button>
        </div>
    </div>

    <!-- BANNIÈRE INVESTISSEMENT -->
    <div class="mb-8">
        <div class="flex justify-between items-center mb-3">
            <h2 class="text-lg font-bold">Opportunités</h2>
        </div>
        <a
            href="{{ url_for('main.market') }}"
            class="block w-full btn-press bg-gradient-to-r from-yellow-600 to-amber-500 rounded-2xl p-1 relative overflow-hidden text-left group"
        >
            <div
                class="bg-gray-900/10 absolute inset-0 group-hover:bg-transparent transition"
            ></div>
            <div class="flex items-center justify-between p-4 relative z-10">
                <div class="flex items-center gap-4">
                    <div
                        class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center text-white"
                    >
                        <i class="fa-solid fa-gem text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-white text-lg">
                            Investir maintenant
                        </h3>
                        <p class="text-yellow-100 text-xs">
                            Explorez les plans de métaux précieux
                        </p>
                    </div>
                </div>
                <div
                    class="w-8 h-8 bg-white text-amber-600 rounded-full flex items-center justify-center"
                >
                    <i class="fa-solid fa-chevron-right text-sm"></i>
                </div>
            </div>
        </a>
    </div>

    <!-- BANNIÈRE PARRAINAGE -->
    <div class="mb-8">
        <a
            href="{{ url_for('main.referral') }}"
            class="block w-full btn-press bg-gradient-to-r from-green-600 to-emerald-500 rounded-2xl p-1 relative overflow-hidden text-left group"
        >
            <div
                class="bg-gray-900/10 absolute inset-0 group-hover:bg-transparent transition"
            ></div>
            <div class="flex items-center justify-between p-4 relative z-10">
                <div class="flex items-center gap-4">
                    <div
                        class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center text-white"
                    >
                        <i class="fa-solid fa-users text-xl"></i>
                    </div>
                    <div>
                        <h3 class="font-bold text-white text-lg">
                            Parrainez & Gagnez
                        </h3>
                        <p class="text-green-100 text-xs">
                            {{ purchase_commission_rate }}% sur achats + {{
                            daily_gain_commission_rate }}% sur gains quotidiens
                        </p>
                    </div>
                </div>
                <div
                    class="w-8 h-8 bg-white text-green-600 rounded-full flex items-center justify-center"
                >
                    <i class="fa-solid fa-chevron-right text-sm"></i>
                </div>
            </div>
        </a>
    </div>

    <!-- LISTE DES PLANS ACTIFS -->
    <div>
        <div class="flex justify-between items-end mb-4">
            <h2 class="text-lg font-bold">Mes Plans Actifs</h2>
            <span class="text-xs text-textMuted" id="plans-count"
                >{{ active_metals|length }} actif(s)</span
            >
        </div>

        <div id="active-plans-list" class="space-y-3">
            {% for user_metal in active_metals %}
            <div
                class="bg-card rounded-2xl p-4 border border-gray-800 flex justify-between items-center shadow-sm"
            >
                <div class="flex gap-4 items-center">
                    <div
                        class="w-1 h-10 bg-gray-700 rounded-full overflow-hidden"
                    >
                        <!-- Simulation de progression basée sur la date -->
                        <div
                            class="w-full bg-accent rounded-full"
                            style="height: 100%"
                        ></div>
                    </div>
                    <div>
                        <h4 class="font-bold text-white">
                            {{ user_metal.metal.name }}
                        </h4>
                        <p class="text-xs text-gray-400">
                            Expire le {{
                            user_metal.expiry_date.strftime('%d/%m/%Y') }}
                        </p>
                    </div>
                </div>
                <div class="text-right">
                    <span class="block font-bold text-primary"
                        >+{{ "{:,.0f}".format(user_metal.metal.daily_gain) }}
                        F</span
                    >
                    <span class="text-[10px] text-gray-500 uppercase"
                        >Par jour</span
                    >
                </div>
            </div>
            {% else %}
            <div
                class="text-center py-8 text-gray-600 bg-card/50 rounded-2xl border border-gray-800 border-dashed"
            >
                <p class="text-sm">Aucun plan actif.</p>
                <a
                    href="{{ url_for('main.market') }}"
                    class="text-accent text-sm font-medium mt-2 inline-block"
                    >Voir le marché</a
                >
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- ==================== MODALS ==================== -->

<!-- MODAL POPUP DE BIENVENUE (WhatsApp Share) -->
{% if show_welcome_popup %}
<div
    id="welcome-popup-modal"
    class="fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-center justify-center transition-all duration-300 p-4"
>
    <div
        class="bg-card w-full max-w-md rounded-3xl p-6 animate-slide-up border border-gray-700 relative overflow-hidden"
    >
        <!-- Effet de fond -->
        <div
            class="absolute top-0 right-0 w-40 h-40 bg-green-500/10 rounded-full blur-3xl -mr-20 -mt-20"
        ></div>
        <div
            class="absolute bottom-0 left-0 w-40 h-40 bg-yellow-500/10 rounded-full blur-3xl -ml-20 -mb-20"
        ></div>

        <div class="relative z-10 text-center space-y-6">
            <!-- Close Button -->
            <button
                onclick="dismissWelcomePopup()"
                class="absolute top-0 right-0 w-8 h-8 bg-gray-800 hover:bg-gray-700 rounded-full flex items-center justify-center text-gray-400 hover:text-white transition"
            >
                <i class="fa-solid fa-times"></i>
            </button>

            <!-- Icon -->
            <div
                class="w-20 h-20 bg-gradient-to-br from-green-500 to-emerald-600 rounded-full flex items-center justify-center mx-auto animate-bounce"
            >
                <i class="fa-brands fa-whatsapp text-white text-4xl"></i>
            </div>

            <!-- Title -->
            <div>
                <h3 class="text-2xl font-bold text-white mb-2">
                    🎉 Gagnez encore plus !
                </h3>
                <p class="text-gray-400 text-sm leading-relaxed">
                    Partagez votre lien de parrainage sur WhatsApp et gagnez
                    <span class="text-yellow-400 font-bold"
                        >{{ purchase_commission_rate }}%</span
                    >
                    sur chaque achat de vos filleuls +
                    <span class="text-green-400 font-bold"
                        >{{ daily_gain_commission_rate }}%</span
                    >
                    sur leurs gains quotidiens !
                </p>
            </div>

            <!-- Referral Code Display -->
            <div class="bg-gray-800/80 rounded-2xl p-4 border border-gray-700">
                <p
                    class="text-[10px] text-gray-400 uppercase tracking-wider mb-2"
                >
                    Votre code de parrainage
                </p>
                <p class="text-2xl font-bold text-yellow-400 tracking-widest">
                    {{ current_user.referral_code }}
                </p>
            </div>

            <!-- WhatsApp Share Button -->
            <a
                href="https://wa.me/?text=J'ai%20d%C3%A9j%C3%A0%20gagn%C3%A9%201000f%20en%20suivant%20ce%20lien.%20Gagnez%20de%20l'argent%20chaque%20jour%20gr%C3%A2ce%20aux%20m%C3%A9taux%20rares.%20%F0%9F%92%B0%0A%0AInscrivez-vous%20ici%20%3A%20{{ request.url_root }}auth/register?ref={{ current_user.referral_code }}"
                target="_blank"
                class="w-full btn-press bg-green-500 hover:bg-green-600 text-white font-bold py-4 rounded-xl shadow-lg flex items-center justify-center gap-3 transition"
            >
                <i class="fa-brands fa-whatsapp text-2xl"></i>
                <span>Partager sur WhatsApp</span>
            </a>

            <!-- Skip Button -->
            <button
                onclick="dismissWelcomePopup()"
                class="text-gray-500 hover:text-gray-400 text-sm transition"
            >
                Peut-être plus tard
            </button>

            <!-- Info Text -->
            <div
                class="flex items-start gap-3 bg-yellow-500/10 p-3 rounded-xl border border-yellow-500/20 text-left"
            >
                <i class="fa-solid fa-lightbulb text-yellow-400 mt-0.5"></i>
                <p class="text-[11px] text-gray-400 leading-relaxed">
                    <strong class="text-yellow-400">Astuce :</strong> Plus vous
                    parrainez, plus vous gagnez ! Les commissions sont
                    cumulables sans limite.
                </p>
            </div>
        </div>
    </div>
</div>
{% endif %}

<!-- MODAL DÉPÔT -->
<div
    id="deposit-modal"
    class="hidden fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center transition-all duration-300"
    onclick="if (event.target === this) closeModal('deposit-modal');"
>
    <div
        class="bg-card w-full sm:w-96 rounded-t-3xl sm:rounded-2xl p-6 animate-slide-up border-t border-gray-700"
    >
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>

        <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
            <span
                class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary text-sm"
                ><i class="fa-solid fa-arrow-down"></i
            ></span>
            Effectuer un Dépôt
        </h3>

        <div class="space-y-4">
            <p class="text-sm text-gray-400">
                Sélectionnez une option de dépôt pour continuer.
            </p>

            <a
                href="{{ url_for('main.deposit') }}"
                class="w-full btn-press bg-primary hover:bg-primaryDark text-white font-bold py-4 rounded-xl shadow-lg flex items-center justify-center gap-2"
            >
                <i class="fa-solid fa-money-bill-transfer"></i>
                Dépôt Manuel
            </a>

            <div class="flex items-start gap-3 bg-gray-800/50 p-3 rounded-lg">
                <i class="fa-solid fa-shield-halved text-primary mt-1"></i>
                <p class="text-xs text-gray-400 leading-relaxed">
                    Paiement sécurisé. Votre solde sera mis à jour après
                    validation par l'administration.
                </p>
            </div>
        </div>
    </div>
</div>

<!-- MODAL RETRAIT -->
<div
    id="withdraw-modal"
    class="hidden fixed inset-0 bg-black/90 backdrop-blur-sm z-50 flex items-end sm:items-center justify-center transition-all duration-300"
    onclick="if (event.target === this) closeModal('withdraw-modal');"
>
    <div
        class="bg-card w-full sm:w-96 rounded-t-3xl sm:rounded-2xl p-6 animate-slide-up border-t border-gray-700"
    >
        <div class="w-12 h-1 bg-gray-600 rounded-full mx-auto mb-6"></div>

        <h3 class="text-xl font-bold text-white mb-6 flex items-center gap-2">
            <span
                class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center text-white text-sm"
                ><i class="fa-solid fa-arrow-up"></i
            ></span>
            Demander un Retrait
        </h3>

        <div class="space-y-4">
            <!-- Info Solde -->
            <div class="bg-bg rounded-xl p-4 border border-gray-700">
                <p class="text-xs text-textMuted mb-1">
                    Disponible pour retrait
                </p>
                <p class="text-2xl font-bold text-white">
                    {{ "{:,.0f}".format(current_user.balance) }} F
                </p>
            </div>

            <!-- Info frais -->
            <div
                class="bg-yellow-500/10 rounded-xl p-3 border border-yellow-500/20"
            >
                <div class="flex items-center gap-2 text-yellow-400">
                    <i class="fa-solid fa-info-circle"></i>
                    <span class="text-xs font-medium"
                        >Frais de retrait : {{ withdrawal_fee_rate }}%</span
                    >
                </div>
            </div>

            <a
                href="{{ url_for('main.withdraw') }}"
                class="w-full btn-press bg-white text-black font-bold py-4 rounded-xl flex items-center justify-center gap-2 hover:bg-gray-200"
            >
                <i class="fa-solid fa-mobile-screen"></i>
                Retirer vers Mobile Money
            </a>

            <div class="flex items-start gap-3 bg-gray-800/50 p-3 rounded-lg">
                <i class="fa-solid fa-clock text-accent mt-1"></i>
                <p class="text-xs text-gray-400 leading-relaxed">
                    Les retraits sont mis en attente pendant 24h puis traités
                    les jours ouvrables (lundi au vendredi).
                </p>
            </div>
        </div>
    </div>
</div>

{% endblock %} {% block extra_js %}
<script>
    function openModal(id) {
        document.getElementById(id).classList.remove("hidden");
    }
    function closeModal(id) {
        document.getElementById(id).classList.add("hidden");
    }

    // Dismiss welcome popup and mark as seen
    function dismissWelcomePopup() {
        const popup = document.getElementById("welcome-popup-modal");
        if (popup) {
            popup.style.opacity = "0";
            setTimeout(() => {
                popup.remove();
            }, 300);

            // Call API to mark popup as seen
            fetch('{{ url_for("main.dismiss_welcome_popup") }}')
                .then((response) => response.json())
                .catch((error) =>
                    console.log("Error dismissing popup:", error),
                );
        }
    }
</script>
{% endblock %}