app/templates/referral.html

{% extends "base.html" %} {% block title %}Parrainage{% endblock %} {% block
content %}
<div id="view-profile" class="px-5 pt-4">
    <!-- Header -->
    <div class="flex items-center gap-3 mb-6">
        <a
            href="{{ url_for('main.dashboard') }}"
            class="w-10 h-10 bg-card rounded-full flex items-center justify-center border border-gray-800 text-gray-400 btn-press"
        >
            <i class="fa-solid fa-arrow-left"></i>
        </a>
        <h2 class="text-2xl font-bold text-white">Parrainage</h2>
    </div>

    <!-- Bannière Commission -->
    <div
        class="bg-gradient-to-br from-green-600/20 to-emerald-600/20 rounded-3xl p-5 border border-green-500/30 mb-6 relative overflow-hidden"
    >
        <div
            class="absolute top-0 right-0 w-32 h-32 bg-green-500/10 rounded-full blur-3xl -mr-16 -mt-16"
        ></div>
        <div class="relative z-10">
            <div class="flex items-center gap-3 mb-4">
                <div
                    class="w-12 h-12 bg-green-500/20 rounded-xl flex items-center justify-center"
                >
                    <i
                        class="fa-solid fa-hand-holding-dollar text-green-400 text-xl"
                    ></i>
                </div>
                <div>
                    <h3 class="font-bold text-white text-lg">
                        Gagnez plus ensemble !
                    </h3>
                    <p class="text-green-300 text-xs">
                        Commissions cumulables sans limite
                    </p>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-3">
                <div
                    class="bg-black/30 rounded-xl p-3 border border-green-500/20"
                >
                    <p
                        class="text-[10px] text-gray-400 uppercase tracking-wider mb-1"
                    >
                        Sur chaque achat
                    </p>
                    <p class="text-2xl font-bold text-yellow-400">
                        {{ purchase_commission_rate }}%
                    </p>
                    <p class="text-[10px] text-gray-500">de commission</p>
                </div>
                <div
                    class="bg-black/30 rounded-xl p-3 border border-green-500/20"
                >
                    <p
                        class="text-[10px] text-gray-400 uppercase tracking-wider mb-1"
                    >
                        Gains quotidiens
                    </p>
                    <p class="text-2xl font-bold text-green-400">
                        {{ daily_gain_commission_rate }}%
                    </p>
                    <p class="text-[10px] text-gray-500">chaque jour</p>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-4">
        <!-- Statistiques Gains Parrainage -->
        <div class="bg-card rounded-2xl p-4 border border-gray-800">
            <h3
                class="text-sm font-bold text-white mb-4 flex items-center gap-2"
            >
                <i class="fa-solid fa-chart-pie text-primary"></i>
                Mes Gains de Parrainage
            </h3>
            <div class="grid grid-cols-3 gap-3">
                <div
                    class="text-center p-3 bg-gray-900/50 rounded-xl border border-gray-800"
                >
                    <p
                        class="text-[9px] text-gray-500 uppercase tracking-wider mb-1"
                    >
                        Total Gagné
                    </p>
                    <p class="text-lg font-bold text-primary">
                        {{ "{:,.0f}".format(total_referral_earnings) }}
                    </p>
                    <p class="text-[10px] text-gray-500">FCFA</p>
                </div>
                <div
                    class="text-center p-3 bg-gray-900/50 rounded-xl border border-gray-800"
                >
                    <p
                        class="text-[9px] text-gray-500 uppercase tracking-wider mb-1"
                    >
                        Sur Achats
                    </p>
                    <p class="text-lg font-bold text-yellow-400">
                        {{ "{:,.0f}".format(total_purchase_commissions) }}
                    </p>
                    <p class="text-[10px] text-gray-500">FCFA</p>
                </div>
                <div
                    class="text-center p-3 bg-gray-900/50 rounded-xl border border-gray-800"
                >
                    <p
                        class="text-[9px] text-gray-500 uppercase tracking-wider mb-1"
                    >
                        Sur Gains
                    </p>
                    <p class="text-lg font-bold text-green-400">
                        {{ "{:,.0f}".format(total_daily_commissions) }}
                    </p>
                    <p class="text-[10px] text-gray-500">FCFA</p>
                </div>
            </div>
        </div>

        <!-- Code Parrainage -->
        <div class="bg-card rounded-2xl p-4 border border-gray-800">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm text-gray-400">Code Parrainage</span>
                <span
                    class="font-mono text-accent bg-accent/10 px-3 py-1 rounded-lg font-bold select-all"
                >
                    {{ referral_code }}
                </span>
            </div>
            <p class="text-[10px] text-gray-500 leading-relaxed mb-3">
                Partagez votre code unique et gagnez
                <strong class="text-yellow-400"
                    >{{ purchase_commission_rate }}%</strong
                >
                sur chaque achat de plan +
                <strong class="text-green-400"
                    >{{ daily_gain_commission_rate }}%</strong
                >
                sur les gains quotidiens de vos filleuls !
            </p>

            <!-- Lien de parrainage complet -->
            <div
                class="bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-4 mb-3 border-2 border-accent/30 shadow-lg"
            >
                <div class="flex items-center gap-2 mb-2">
                    <i class="fa-solid fa-link text-accent text-sm"></i>
                    <p
                        class="text-xs text-accent font-semibold uppercase tracking-wide"
                    >
                        Votre lien de parrainage
                    </p>
                </div>
                <p
                    id="referral-link"
                    class="text-xs text-gray-300 font-mono break-all bg-black/30 p-2 rounded-lg border border-gray-700 select-all"
                >
                    {{ request.url_root }}auth/register?ref={{ referral_code }}
                </p>
            </div>

            <!-- Boutons d'action -->
            <div class="space-y-3">
                <button
                    onclick="copyReferralLink()"
                    class="w-full bg-gradient-to-r from-accent to-yellow-500 hover:from-accent/90 hover:to-yellow-500/90 text-gray-900 font-bold py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-accent/50 active:scale-95"
                >
                    <i class="fa-solid fa-copy text-lg"></i>
                    <span id="copy-text">Copier le lien</span>
                </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={{ referral_code }}"
                    target="_blank"
                    class="w-full bg-gradient-to-r from-green-600 to-green-500 hover:from-green-700 hover:to-green-600 text-white font-bold py-3.5 px-4 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 shadow-lg hover:shadow-green-500/50 active:scale-95"
                >
                    <i class="fa-brands fa-whatsapp text-xl"></i>
                    <span>Partager sur WhatsApp</span>
                </a>
            </div>
        </div>

        <!-- Statistiques Filleuls -->
        <div class="grid grid-cols-2 gap-4">
            <div class="bg-card rounded-2xl p-4 border border-gray-800">
                <p class="text-[10px] text-textMuted uppercase font-bold mb-1">
                    <i class="fa-solid fa-users text-blue-400 mr-1"></i>
                    Filleuls
                </p>
                <p class="text-xl font-bold text-white">
                    {{ referred_users|length }}
                </p>
            </div>
            <div class="bg-card rounded-2xl p-4 border border-gray-800">
                <p class="text-[10px] text-textMuted uppercase font-bold mb-1">
                    <i class="fa-solid fa-user-check text-green-400 mr-1"></i>
                    Actifs
                </p>
                <p class="text-xl font-bold text-green-400">
                    {{
                    referred_users|selectattr('has_active_subscription')|list|length
                    }}
                </p>
            </div>
        </div>

        <!-- Comment ça marche -->
        <div class="bg-card rounded-2xl p-4 border border-gray-800">
            <h3
                class="text-sm font-bold text-white mb-3 flex items-center gap-2"
            >
                <i class="fa-solid fa-circle-question text-blue-400"></i>
                Comment ça marche ?
            </h3>
            <div class="space-y-3">
                <div class="flex items-start gap-3">
                    <div
                        class="w-6 h-6 bg-yellow-500/20 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                    >
                        <span class="text-yellow-400 text-[10px] font-bold"
                            >1</span
                        >
                    </div>
                    <div>
                        <p class="text-xs text-white font-medium">
                            Partagez votre lien
                        </p>
                        <p class="text-[10px] text-gray-500">
                            Envoyez votre lien à vos amis via WhatsApp ou autre
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div
                        class="w-6 h-6 bg-blue-500/20 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                    >
                        <span class="text-blue-400 text-[10px] font-bold"
                            >2</span
                        >
                    </div>
                    <div>
                        <p class="text-xs text-white font-medium">
                            Ils s'inscrivent et achètent
                        </p>
                        <p class="text-[10px] text-gray-500">
                            Vos filleuls créent un compte et souscrivent à un
                            plan
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <div
                        class="w-6 h-6 bg-green-500/20 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"
                    >
                        <span class="text-green-400 text-[10px] font-bold"
                            >3</span
                        >
                    </div>
                    <div>
                        <p class="text-xs text-white font-medium">
                            Vous gagnez automatiquement
                        </p>
                        <p class="text-[10px] text-gray-500">
                            <strong class="text-yellow-400"
                                >{{ purchase_commission_rate }}%</strong
                            >
                            sur leurs achats +
                            <strong class="text-green-400"
                                >{{ daily_gain_commission_rate }}%</strong
                            >
                            sur leurs gains quotidiens
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Liste des Filleuls -->
        {% if referred_users %}
        <div class="bg-card rounded-2xl p-4 border border-gray-800">
            <h3
                class="text-sm font-bold text-white mb-3 flex items-center gap-2"
            >
                <i class="fa-solid fa-user-group text-purple-400"></i>
                Mes Filleuls ({{ referred_users|length }})
            </h3>
            <div class="space-y-3 max-h-60 overflow-y-auto no-scrollbar">
                {% for referred in referred_users %}
                <div
                    class="flex items-center justify-between py-2 border-b border-gray-800 last:border-0"
                >
                    <div class="flex items-center gap-3">
                        <div
                            class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center text-[10px] font-bold text-gray-400 border border-gray-700"
                        >
                            {{ referred.name[:2].upper() }}
                        </div>
                        <div>
                            <p class="text-xs font-bold text-white">
                                {{ referred.name }}
                            </p>
                            <p class="text-[10px] text-gray-500">
                                Inscrit le {{
                                referred.created_at.strftime('%d/%m/%Y') }}
                            </p>
                        </div>
                    </div>
                    <span
                        class="text-[10px] px-2 py-0.5 rounded-full {% if referred.has_active_subscription %}bg-green-500/20 text-green-400{% else %}bg-gray-700 text-gray-400{% endif %}"
                    >
                        {% if referred.has_active_subscription %}
                        <i class="fa-solid fa-check-circle mr-1"></i>Actif {%
                        else %} <i class="fa-solid fa-clock mr-1"></i>Inactif {%
                        endif %}
                    </span>
                </div>
                {% endfor %}
            </div>
        </div>
        {% else %}
        <div
            class="bg-card/50 rounded-2xl p-6 border border-gray-800 border-dashed text-center"
        >
            <div
                class="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4"
            >
                <i class="fa-solid fa-user-plus text-gray-600 text-2xl"></i>
            </div>
            <h4 class="text-white font-bold mb-2">Pas encore de filleuls</h4>
            <p class="text-xs text-gray-500 mb-4">
                Partagez votre lien pour commencer à gagner des commissions !
            </p>
            <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={{ referral_code }}"
                target="_blank"
                class="inline-flex items-center gap-2 bg-green-500 text-white font-bold px-6 py-3 rounded-xl text-sm"
            >
                <i class="fa-brands fa-whatsapp text-lg"></i>
                Inviter mes amis
            </a>
        </div>
        {% endif %}
    </div>
</div>

<script>
    function copyReferralLink() {
        const referralLink = document
            .getElementById("referral-link")
            .textContent.trim();
        const copyText = document.getElementById("copy-text");

        navigator.clipboard
            .writeText(referralLink)
            .then(function () {
                // Animation de succès
                copyText.innerHTML =
                    '<i class="fa-solid fa-check text-lg"></i> Copié !';

                // Retour au texte original après 2 secondes
                setTimeout(function () {
                    copyText.textContent = "Copier le lien";
                }, 2000);
            })
            .catch(function (err) {
                console.error("Erreur lors de la copie:", err);
                alert("Impossible de copier le lien");
            });
    }
</script>

{% endblock %}