{% extends "base.html" %}
{% load static %}

{% block title %}Tarifs & Abonnements — GiniFollow{% endblock %}

{% block extra_css %}
<style>
    /* ===================================================
       DESIGN TOKENS — reprise stricte de la charte existante
       =================================================== */
    :root {
        --gf-primary: #2563eb;
        --gf-primary-dark: #1d4ed8;
        --gf-primary-tint: #eff6ff;
        --gf-primary-tint-strong: #dbeafe;
        --gf-ink: #0f172a;
        --gf-body: #334155;
        --gf-muted: #64748b;
        --gf-border: #e2e8f0;
        --gf-border-soft: #f1f5f9;
        --gf-surface: #f8fafc;
        --gf-info: #0ea5e9;
        --gf-info-tint: #e0f2fe;
        --gf-secondary: #475569;
        --gf-secondary-tint: #f1f5f9;
    }

    /* Petits utilitaires manquants utilisés dans la page (évite tout rendu imprévisible) */
    .max-w-600 {
        max-width: 600px;
    }

    .tracking-wider {
        letter-spacing: .08em;
    }

    .fw-extrabold {
        font-weight: 800;
    }

    /* ===================================================
       CARTES TARIFS — hiérarchie simplifiée, une seule
       couleur d'accent par carte, pas d'effets qui se
       chevauchent entre colonnes
       =================================================== */
    .pricing-row {
        row-gap: 2.5rem;
    }

    .pricing-card {
        background: #ffffff;
        border-radius: 1.5rem;
        border: 2px solid var(--gf-border);
        box-shadow: 0 10px 25px -10px rgba(15, 23, 42, 0.08);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                    border-color 0.3s ease,
                    background 0.35s ease;
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Animation au survol et à l'approche du curseur */
    .pricing-card:hover {
        transform: translateY(-8px) scale(1.015);
    }

    /* Pack 1 : Orientation — Fond teinté dynamique & Ombre bleue */
    .pricing-card.card-orientation {
        border-color: #7dd3fc;
        background: linear-gradient(160deg, #f0f9ff 0%, #ffffff 50%, #e0f2fe 100%);
    }

    .pricing-card.card-orientation:hover {
        border-color: #0284c7;
        box-shadow: 0 22px 42px -12px rgba(2, 132, 199, 0.22);
    }

    .pricing-card.card-orientation .pricing-header {
        background: rgba(240, 249, 255, 0.7);
    }

    /* Pack 2 : Premium (Featured) — Fond teinté royal & Ombre néon */
    .pricing-card.card-featured {
        border: 2.5px solid var(--gf-primary);
        background: linear-gradient(160deg, #eff6ff 0%, #ffffff 45%, #dbeafe 100%);
        box-shadow: 0 16px 36px -8px rgba(37, 99, 235, 0.22);
    }

    .pricing-card.card-featured:hover {
        border-color: #1d4ed8;
        transform: translateY(-10px) scale(1.025);
        box-shadow: 0 28px 50px -10px rgba(37, 99, 235, 0.35);
    }

    .pricing-card.card-featured .pricing-header {
        background: rgba(239, 246, 255, 0.75);
    }

    /* Pack 3 : Basic — Fond teinté indigo & Ombre douce */
    .pricing-card.card-basic {
        border-color: #a5b4fc;
        background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 50%, #e0e7ff 100%);
    }

    .pricing-card.card-basic:hover {
        border-color: #4f46e5;
        box-shadow: 0 22px 42px -12px rgba(79, 70, 229, 0.22);
    }

    .pricing-card.card-basic .pricing-header {
        background: rgba(245, 243, 255, 0.7);
    }

    /* Micro-animations au survol du curseur */
    .pricing-card:hover .pricing-price {
        transform: scale(1.04);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .pricing-card:hover .btn {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    }

    .pricing-features li i {
        font-size: 1.05rem;
        margin-top: 0.15rem;
        flex-shrink: 0;
        transition: transform 0.2s ease;
    }

    .pricing-card:hover .pricing-features li i {
        transform: scale(1.18);
    }

    .ribbon-recommended {
        background: linear-gradient(135deg, var(--gf-primary) 0%, var(--gf-primary-dark) 100%);
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        padding: 0.6rem 1rem;
        text-align: center;
        width: 100%;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    }

    .pricing-header {
        padding: 2rem 1.75rem 1.5rem;
        border-bottom: 1px solid var(--gf-border-soft);
    }

    .pricing-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font-size: 0.75rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        padding: 0.4rem 0.85rem;
        border-radius: 999px;
        margin-bottom: 1rem;
    }

    .eyebrow-info {
        background: #e0f2fe;
        color: #0284c7;
    }

    .eyebrow-secondary {
        background: #e0e7ff;
        color: #4338ca;
    }

    .eyebrow-primary {
        background: #dbeafe;
        color: #1e40af;
    }

    .pricing-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--gf-ink);
        margin-bottom: 0.5rem;
        letter-spacing: -0.02em;
    }

    .card-featured .pricing-title {
        color: var(--gf-primary-dark);
    }

    .pricing-desc {
        font-size: 0.9rem;
        color: var(--gf-muted);
        margin-bottom: 1.5rem;
        line-height: 1.55;
    }

    .pricing-price-row {
        display: flex;
        align-items: baseline;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }

    /* Police du prix agrandie */
    .pricing-price {
        font-size: 3.4rem;
        font-weight: 800;
        color: var(--gf-ink);
        line-height: 1;
        letter-spacing: -0.03em;
    }

    .card-featured .pricing-price {
        font-size: 3.8rem;
        font-weight: 900;
        color: var(--gf-primary-dark);
    }

    .pricing-currency {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--gf-muted);
    }

    .card-featured .pricing-currency {
        color: var(--gf-primary-dark);
    }

    /* Liste de fonctionnalités : espacement et interligne homogènes pour
       une lecture confortable, quel que soit le volet */
    .pricing-features {
        list-style: none;
        padding: 1.5rem;
        margin: 0;
        flex-grow: 1;
    }

    .pricing-features li {
        font-size: 0.89rem;
        line-height: 1.5;
        color: var(--gf-body);
        margin-bottom: 1rem;
        display: flex;
        align-items: flex-start;
        gap: 0.65rem;
    }

    .pricing-features li:last-child {
        margin-bottom: 0;
    }

    .pricing-features li i {
        font-size: 1.05rem;
        margin-top: 0.15rem;
        flex-shrink: 0;
    }

    .pricing-footer {
        padding: 1.25rem 1.5rem 1.75rem;
        background: var(--gf-surface);
        border-top: 1px solid var(--gf-border-soft);
        margin-top: auto;
    }

    .card-featured .pricing-footer {
        background: var(--gf-primary-tint);
    }

    .pricing-footer .btn {
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
        border-radius: 999px;
        font-weight: 700;
    }

    /* Séparateur vertical desktop entre les deux blocs de paiement,
       remplace la classe Bootstrap inexistante "border-end-lg" */
    @media (min-width: 992px) {
        .divider-lg-end {
            border-inline-end: 1px solid var(--gf-border);
        }
    }

    /* Sélecteur de maladie */
    .disease-selector-card {
        background: linear-gradient(135deg, var(--gf-primary-tint) 0%, var(--gf-primary-tint-strong) 100%);
        border: 1px solid #bfdbfe;
        border-radius: 1rem;
    }
</style>
{% endblock %}

{% block page_header %}
<div class="container-fluid page-header py-5 mb-4 wow fadeIn" data-wow-delay="0.1s"
    style="background-image: url('{% static 'images/ginni5.jpg' %}');">
    <div class="container py-4 text-center">
        <span class="badge bg-primary px-3 py-2 rounded-pill fw-bold text-uppercase mb-2">Transparence &
            Flexibilité</span>
        <h1 class="display-4 mb-2 text-white">Nos Tarifs & Formules d'Accompagnement</h1>
        <p class="text-white-50 mb-0 max-w-600 mx-auto">Choisissez la formule adaptée à votre situation : suivi médical
            mensuel d'orientation ou éducation thérapeutique spécialisée.</p>
        {% include "partials/gf_page_breadcrumb.html" with breadcrumb_current="Tarifs" %}
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container-xxl py-4">
    <div class="container">

        <!-- En-tête explicatif -->
        <div class="text-center mx-auto mb-4" style="max-width: 760px;">
            <p class="text-primary fw-bold text-uppercase tracking-wider mb-1" style="font-size: 0.85rem;">Grille
                tarifaire claire en Dollars USD ($)</p>
            <h2 class="display-6 mb-3">Deux volets d'accompagnement médical sur-mesure</h2>
            <p class="text-muted small">
                Paiement manuel simple via Mobile Money (M-Pesa, Airtel, Orange) ou virement bancaire.
                Une fois votre preuve soumise, votre accès est validé sous 24h ouvrées par notre équipe.
            </p>
        </div>

        <!-- Formulaire Global pour la Sélection de la Maladie Chronique (Volet 1) -->
        <form method="get" id="form-tarifs-volet" class="mb-5">
            <div class="disease-selector-card p-3 p-md-4 shadow-sm">
                <div class="row align-items-center g-3">
                    <div class="col-lg-5">
                        <div class="d-flex align-items-center gap-3">
                            <div class="bg-primary text-white rounded-circle p-3 flex-shrink-0 d-flex align-items-center justify-content-center"
                                style="width: 48px; height: 48px;">
                                <i class="bi bi-heart-pulse-fill fs-4"></i>
                            </div>
                            <div>
                                <h6 class="fw-bold mb-1 text-dark">Sélectionnez votre pathologie concernée</h6>
                                <span class="small text-muted">Requis pour les forfaits Éducation Thérapeutique (Basic &
                                    Premium)</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-7">
                        {% if user.is_authenticated %}
                        <select id="maladie-edu" name="maladie"
                            class="form-select form-select-lg border-primary rounded-3 shadow-sm" required>
                            <option value="" disabled selected>-- Choisissez une maladie chronique dans la liste --
                            </option>
                            {% for code, label in maladies %}
                            <option value="{{ code }}">{{ label }}</option>
                            {% endfor %}
                        </select>
                        {% else %}
                        <div
                            class="p-2 bg-white rounded-3 border d-flex align-items-center justify-content-between gap-3">
                            <span class="small text-muted ps-2"><i class="bi bi-info-circle me-1 text-primary"></i>
                                Connectez-vous pour choisir votre maladie et valider votre forfait.</span>
                            <a href="{% url 'connexion' %}?next={{ request.path|urlencode }}"
                                class="btn btn-primary btn-sm rounded-pill px-3 flex-shrink-0">Se connecter</a>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </form>

        <!-- =================================================== -->
        <!-- ALIGNEMENT DES 3 PACKS SUR UNE MÊME LIGNE (3 COLONNES) -->
        <!-- =================================================== -->
        <div class="row pricing-row g-4 g-lg-5 mb-5 align-items-stretch">

            <!-- PACK 1 : SUIVI & ORIENTATION (10$ / mois) -->
            <div class="col-lg-4">
                <div class="pricing-card card-orientation shadow-sm">
                    <div class="pricing-header">
                        <span class="pricing-eyebrow eyebrow-info">Volet 2 — Orientation</span>
                        <h3 class="pricing-title">Suivi & Orientation</h3>
                        <p class="pricing-desc">
                            Idéal pour les personnes sans maladie chronique ciblée ayant des symptômes ou des questions
                            d'orientation médicale.
                        </p>
                        <div class="pricing-price-row">
                            <span class="pricing-price">10</span>
                            <span class="pricing-currency">USD / mois</span>
                        </div>
                    </div>

                    <ul class="pricing-features">
                        <li>
                            <i class="bi bi-check-circle-fill text-info"></i>
                            <span><strong>Support & Orientation WhatsApp</strong> / Messagerie interne</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-info"></i>
                            <span>Évaluation guidée des <strong>signes d'alerte</strong> & symptômes</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-info"></i>
                            <span>Orientation vers médecins <strong>spécialistes & hôpitaux</strong></span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-info"></i>
                            <span>Accès illimité à l'agenda des créneaux d'accompagnement</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-info"></i>
                            <span>Rappels automatiques e-mail (30 min et 5 min avant le RDV)</span>
                        </li>
                    </ul>

                    <div class="pricing-footer">
                        {% if orientation_forfait %}
                        {% if user.is_authenticated %}
                        {% if orientation_forfait.id in demande_validee_ids %}
                        <button class="btn btn-success w-100 shadow-sm fw-bold" type="button" data-bs-toggle="modal" data-bs-target="#modalAbonnementActif{{ orientation_forfait.id }}">
                            <i class="bi bi-check-circle-fill me-1"></i> Votre abonnement est actif
                        </button>
                        {% elif orientation_forfait.id in demande_en_attente_ids %}
                        <button class="btn btn-outline-secondary w-100" type="button" disabled>
                            <i class="bi bi-clock-history me-1"></i> Demande en attente
                        </button>
                        {% else %}
                        <a href="{% url 'choisir_forfait' orientation_forfait.id %}"
                            class="btn btn-outline-info text-dark w-100 shadow-sm">
                            <i class="bi bi-arrow-right-circle me-1"></i> Choisir ce volet (10$)
                        </a>
                        {% endif %}
                        {% else %}
                        <a href="{% url 'connexion' %}?next={% url 'choisir_forfait' orientation_forfait.id %}"
                            class="btn btn-outline-info text-dark w-100">
                            Se connecter pour choisir
                        </a>
                        {% endif %}
                        {% else %}
                        <div class="alert alert-warning small mb-0 py-2">Forfait orientation non configuré.</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- PACK 2 : ÉDUCATION PREMIUM (20$) — ★ RECOMMANDÉ PAR NOS EXPERTS ★ -->
            <div class="col-lg-4">
                <div class="pricing-card card-featured">

                    <div class="ribbon-recommended">
                        <i class="bi bi-star-fill text-warning me-1"></i> Recommandé par nos experts
                    </div>

                    <div class="pricing-header">
                        <span class="pricing-eyebrow eyebrow-primary">Volet 1 — Pack Thérapeutique</span>
                        <h3 class="pricing-title">Pack Premium</h3>
                        <p class="pricing-desc">
                            Accompagnement intensif et complet pour maîtriser votre maladie chronique avec votre
                            spécialiste dédié.
                        </p>
                        <div class="pricing-price-row">
                            <span class="pricing-price">20</span>
                            <span class="pricing-currency">USD / programme</span>
                        </div>
                    </div>

                    <ul class="pricing-features">
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span><strong class="text-primary">Programme 100% complet</strong> (intégralité des séances
                                d'éducation)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span><strong>Choix de la pathologie</strong> (HTA, Diabète, Asthme, Drépanocytose,
                                etc.)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span>Visioconférences <strong>Google Meet</strong> & <strong>WhatsApp</strong></span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span>Tableau de bord interactif & <strong>Système d'Étoiles de Santé</strong></span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span>Rappels automatiques e-mail (J-1, H-3, H-1, 30 min et 5 min)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span>Suivi d'ordonnances & rappels de prises médicamenteuses</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-primary"></i>
                            <span><strong>Assistance prioritaire 7j/7</strong> avec votre accompagnateur</span>
                        </li>
                    </ul>

                    <div class="pricing-footer">
                        {% if edu_premium %}
                        {% if user.is_authenticated %}
                        {% if edu_premium.id in demande_validee_ids %}
                        <button class="btn btn-success w-100 shadow-lg fw-bold" type="button" data-bs-toggle="modal" data-bs-target="#modalAbonnementActif{{ edu_premium.id }}">
                            <i class="bi bi-check-circle-fill me-1"></i> Votre abonnement est actif
                        </button>
                        {% elif edu_premium.id in demande_en_attente_ids %}
                        <button class="btn btn-outline-secondary w-100" type="button" disabled>
                            <i class="bi bi-clock-history me-1"></i> Demande en attente
                        </button>
                        {% else %}
                        <button type="submit" form="form-tarifs-volet"
                            formaction="{% url 'choisir_forfait' edu_premium.id %}"
                            class="btn btn-primary w-100 shadow-lg">
                            <i class="bi bi-star-fill text-warning me-1"></i> Choisir le Pack Premium (20$)
                        </button>
                        {% endif %}
                        {% else %}
                        <a href="{% url 'connexion' %}?next={{ request.path|urlencode }}"
                            class="btn btn-primary w-100 shadow">
                            Se connecter & Choisir Premium
                        </a>
                        {% endif %}
                        {% else %}
                        <div class="alert alert-warning small mb-0 py-2">Forfait Premium non configuré.</div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- PACK 3 : ÉDUCATION BASIC (15$) -->
            <div class="col-lg-4">
                <div class="pricing-card card-basic shadow-sm">
                    <div class="pricing-header">
                        <span class="pricing-eyebrow eyebrow-secondary">Volet 1 — Pack Thérapeutique</span>
                        <h3 class="pricing-title">Pack Basic</h3>
                        <p class="pricing-desc">
                            Formule essentielle pour débuter l'éducation thérapeutique et apprendre les bons réflexes de
                            santé.
                        </p>
                        <div class="pricing-price-row">
                            <span class="pricing-price">15</span>
                            <span class="pricing-currency">USD / 1/2 programme</span>
                        </div>
                    </div>

                    <ul class="pricing-features">
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span><strong>Moitié du programme</strong> d'éducation thérapeutique (50% des
                                séances)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span><strong>Choix de la pathologie</strong> parmi les 8 maladies ciblées</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span>Échanges par <strong>Messagerie WhatsApp</strong> et Visioconférence</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span>Journal quotidien de suivi médical (tension, glycémie)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span>Rappels automatiques e-mail (30 min et 5 min avant RDV)</span>
                        </li>
                        <li>
                            <i class="bi bi-check-circle-fill text-secondary"></i>
                            <span>Téléchargement des fiches pratiques et ressources d'information</span>
                        </li>
                    </ul>

                    <div class="pricing-footer">
                        {% if edu_basic %}
                        {% if user.is_authenticated %}
                        {% if edu_basic.id in demande_validee_ids %}
                        <button class="btn btn-success w-100 shadow-sm fw-bold" type="button" data-bs-toggle="modal" data-bs-target="#modalAbonnementActif{{ edu_basic.id }}">
                            <i class="bi bi-check-circle-fill me-1"></i> Votre abonnement est actif
                        </button>
                        {% elif edu_basic.id in demande_en_attente_ids %}
                        <button class="btn btn-outline-secondary w-100" type="button" disabled>
                            <i class="bi bi-clock-history me-1"></i> Demande en attente
                        </button>
                        {% else %}
                        <button type="submit" form="form-tarifs-volet"
                            formaction="{% url 'choisir_forfait' edu_basic.id %}"
                            class="btn btn-outline-primary w-100 shadow-sm">
                            <i class="bi bi-check2-circle me-1"></i> Choisir le Pack Basic (15$)
                        </button>
                        {% endif %}
                        {% else %}
                        <a href="{% url 'connexion' %}?next={{ request.path|urlencode }}"
                            class="btn btn-outline-primary w-100">
                            Se connecter pour choisir
                        </a>
                        {% endif %}
                        {% else %}
                        <div class="alert alert-warning small mb-0 py-2">Forfait Basic non configuré.</div>
                        {% endif %}
                    </div>
                </div>
            </div>

        </div>

        <!-- Modales d'Orientation Professionnelle pour Abonnement Actif -->
        {% if user.is_authenticated %}
            {% for f in payment_accounts_forfaits|default:'' %}
            {% endfor %}
            {% if orientation_forfait and orientation_forfait.id in demande_validee_ids %}
            <div class="modal fade" id="modalAbonnementActif{{ orientation_forfait.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-0 bg-success text-white rounded-top-4 p-4">
                            <h5 class="modal-title fw-bold text-white">
                                <i class="bi bi-shield-check me-2"></i>Abonnement actuellement actif
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
                        </div>
                        <div class="modal-body p-4 text-start">
                            <div class="alert alert-success border-0 mb-3">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                <strong>Votre forfait « {{ orientation_forfait.nom }} » est actuellement valide.</strong>
                            </div>
                            <p class="text-muted small mb-3 leading-relaxed">
                                Cher(e) patient(e), vous disposez actuellement d'un abonnement actif pour ce forfait sur la plateforme GiniFollow, couvrant l'ensemble de votre suivi et d'orientation en cours.
                            </p>
                            <p class="text-dark small fw-semibold mb-4">
                                Souhaitez-vous anticiper le renouvellement de votre forfait pour le mois prochain ? En poursuivant, vous pourrez transmettre une nouvelle preuve de paiement qui sera examinée et validée par notre équipe.
                            </p>
                            <div class="d-grid gap-2">
                                <a href="{% url 'choisir_forfait' orientation_forfait.id %}" class="btn btn-primary rounded-pill fw-bold py-2 shadow-sm">
                                    <i class="bi bi-arrow-repeat me-1"></i> Poursuivre le renouvellement pour le mois prochain
                                </a>
                                <button type="button" class="btn btn-outline-secondary rounded-pill py-2" data-bs-dismiss="modal">
                                    Conserver mon abonnement actuel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if edu_premium and edu_premium.id in demande_validee_ids %}
            <div class="modal fade" id="modalAbonnementActif{{ edu_premium.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-0 bg-success text-white rounded-top-4 p-4">
                            <h5 class="modal-title fw-bold text-white">
                                <i class="bi bi-shield-check me-2"></i>Abonnement actuellement actif
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
                        </div>
                        <div class="modal-body p-4 text-start">
                            <div class="alert alert-success border-0 mb-3">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                <strong>Votre forfait « {{ edu_premium.nom }} » est actuellement valide.</strong>
                            </div>
                            <p class="text-muted small mb-3 leading-relaxed">
                                Cher(e) patient(e), vous disposez actuellement d'un abonnement actif pour ce forfait sur la plateforme GiniFollow, couvrant l'ensemble de votre programme d'éducation thérapeutique.
                            </p>
                            <p class="text-dark small fw-semibold mb-4">
                                Souhaitez-vous anticiper le renouvellement de votre forfait pour la suite de votre accompagnement ? En poursuivant, vous pourrez transmettre une nouvelle preuve de paiement qui sera validée par notre équipe.
                            </p>
                            <div class="d-grid gap-2">
                                <button type="submit" form="form-tarifs-volet" formaction="{% url 'choisir_forfait' edu_premium.id %}" class="btn btn-primary rounded-pill fw-bold py-2 shadow-sm">
                                    <i class="bi bi-arrow-repeat me-1"></i> Poursuivre le renouvellement pour le mois prochain
                                </button>
                                <button type="button" class="btn btn-outline-secondary rounded-pill py-2" data-bs-dismiss="modal">
                                    Conserver mon abonnement actuel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if edu_basic and edu_basic.id in demande_validee_ids %}
            <div class="modal fade" id="modalAbonnementActif{{ edu_basic.id }}" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content border-0 shadow-lg rounded-4">
                        <div class="modal-header border-0 bg-success text-white rounded-top-4 p-4">
                            <h5 class="modal-title fw-bold text-white">
                                <i class="bi bi-shield-check me-2"></i>Abonnement actuellement actif
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
                        </div>
                        <div class="modal-body p-4 text-start">
                            <div class="alert alert-success border-0 mb-3">
                                <i class="bi bi-check-circle-fill me-2"></i>
                                <strong>Votre forfait « {{ edu_basic.nom }} » est actuellement valide.</strong>
                            </div>
                            <p class="text-muted small mb-3 leading-relaxed">
                                Cher(e) patient(e), vous disposez actuellement d'un abonnement actif pour ce forfait sur la plateforme GiniFollow, couvrant votre suivi d'éducation thérapeutique.
                            </p>
                            <p class="text-dark small fw-semibold mb-4">
                                Souhaitez-vous anticiper le renouvellement de votre forfait pour le mois prochain ? En poursuivant, vous pourrez transmettre une nouvelle preuve de paiement qui sera examinée et validée par notre équipe.
                            </p>
                            <div class="d-grid gap-2">
                                <button type="submit" form="form-tarifs-volet" formaction="{% url 'choisir_forfait' edu_basic.id %}" class="btn btn-primary rounded-pill fw-bold py-2 shadow-sm">
                                    <i class="bi bi-arrow-repeat me-1"></i> Poursuivre le renouvellement pour le mois prochain
                                </button>
                                <button type="button" class="btn btn-outline-secondary rounded-pill py-2" data-bs-dismiss="modal">
                                    Conserver mon abonnement actuel
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endif %}

        <!-- =================================================== -->
        <!-- SECTION PAIEMENT MANUEL & INSTRUCTIONS -->
        <!-- =================================================== -->
        <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
            <div class="card-header bg-dark text-white p-4">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div>
                        <h5 class="fw-bold mb-1 text-white"><i class="bi bi-wallet2 me-2 text-primary"></i>Procédure de
                            Paiement Manuel & Validation</h5>
                        <p class="small text-white-50 mb-0">Découvrez comment régler votre forfait facilement par Mobile
                            Money ou Virement.</p>
                    </div>
                    <span class="badge bg-success px-3 py-2 rounded-pill"><i class="bi bi-shield-check me-1"></i>
                        Paiement Sécurisé</span>
                </div>
            </div>
            <div class="card-body p-4 p-lg-5">
                <div class="row g-4">
                    <div class="col-lg-6 divider-lg-end">
                        <h6 class="fw-bold mb-3 text-primary"><i class="bi bi-wallet-fill me-1"></i>Comptes de paiement disponibles :</h6>
                        <div class="d-flex flex-column gap-2 mb-4">
                            {% for acc in payment_accounts %}
                            <div class="p-3 rounded-3 bg-light border d-flex align-items-center justify-content-between flex-wrap gap-2">
                                <div class="d-flex align-items-center gap-2">
                                    {% if 'M-Pesa' in acc.label %}
                                        <span class="badge bg-success rounded-pill px-3 py-2 fw-bold fs-6"><i class="bi bi-phone me-1"></i>M-Pesa</span>
                                    {% elif 'Orange' in acc.label %}
                                        <span class="badge bg-warning text-dark rounded-pill px-3 py-2 fw-bold fs-6"><i class="bi bi-phone me-1"></i>Orange Money</span>
                                    {% elif 'Illico' in acc.label %}
                                        <span class="badge bg-primary rounded-pill px-3 py-2 fw-bold fs-6"><i class="bi bi-credit-card me-1"></i>Illico Cash</span>
                                    {% else %}
                                        <span class="badge bg-secondary rounded-pill px-3 py-2 fw-bold fs-6">{{ acc.label }}</span>
                                    {% endif %}
                                </div>
                                <span class="text-dark fw-bold">{{ acc.detail }}</span>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="d-flex align-items-center gap-2 flex-wrap">
                            <a class="btn btn-success btn-sm rounded-pill px-3"
                                href="https://wa.me/{{ support_whatsapp_intl }}" target="_blank" rel="noopener">
                                <i class="fab fa-whatsapp me-1"></i> WhatsApp : {{ support_phone }}
                            </a>
                            <a class="btn btn-outline-secondary btn-sm rounded-pill px-3"
                                href="tel:+{{ support_whatsapp_intl }}">
                                <i class="bi bi-telephone me-1"></i> Assistance Directe
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-6 ps-lg-4">
                        <h6 class="fw-bold mb-3 text-primary">Comment ça marche en 4 étapes simples :</h6>
                        <ol class="small text-muted ps-3 mb-0">
                            <li class="mb-2"><strong>Choisissez votre forfait</strong> ci-dessus (et votre maladie si
                                volet éducation).</li>
                            <li class="mb-2"><strong>Effectuez votre transfert</strong> sur l'un de nos numéros ou
                                comptes ci-contre.</li>
                            <li class="mb-2"><strong>Soumettez la photo/capture</strong> de votre preuve de paiement sur
                                la page suivante.</li>
                            <li><strong>Activation rapide sous 24h ouvrées</strong> : votre tableau de bord et vos
                                réservations de créneaux seront immédiatement débloqués.</li>
                        </ol>
                    </div>
                </div>
            </div>
        </div>

        <div class="p-3 bg-light rounded-3 text-center border">
            <p class="small text-muted mb-0">
                <i class="bi bi-info-circle me-1 text-primary"></i> <strong>Avertissement médical :</strong> Ce service
                ne remplace en aucun cas une consultation médicale directe, ne pose pas de diagnostic et ne prescrit
                aucun traitement médicamenteux.
            </p>
        </div>

    </div>
</div>
{% endblock %}