{% extends "base.html" %}

{% block title %}Paiement manuel — GiniFollow{% endblock %}

{% block page_header %}
<div class="container-fluid page-header py-5 mb-5">
    <div class="container py-5">
        {% include "partials/gf_page_breadcrumb.html" with breadcrumb_current="Paiement" breadcrumb_parent_label="Tarifs" breadcrumb_parent_url=tarifs_parent_url %}
        <h1 class="display-5 mb-3 text-white mt-3">Soumettre votre preuve de paiement</h1>
        <p class="mb-0 text-white-50">Forfait : {{ forfait.nom }}</p>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-4 justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4 p-lg-5">
                        <h2 class="h4 mb-3">Récapitulatif</h2>
                        <p class="mb-1"><strong>Forfait :</strong> {{ forfait.nom }}</p>
                        <p class="mb-1"><strong>Montant :</strong> {{ forfait.prix }} {{ forfait.devise|default:"USD" }}</p>
                        {% if maladie_sollicitee_label %}
                        <p class="mb-4"><strong>Maladie sollicitée :</strong> {{ maladie_sollicitee_label }}</p>
                        {% else %}
                        <p class="mb-4 text-muted">Volet orientation / symptômes (abonnement mensuel).</p>
                        {% endif %}

                        <div class="alert alert-light border mb-4">
                            <p class="mb-2 fw-bold">Comptes de paiement</p>
                            <ul class="mb-3 small">
                                {% for acc in payment_accounts %}
                                <li><strong>{{ acc.label }} :</strong> {{ acc.detail }}</li>
                                {% endfor %}
                            </ul>
                            <p class="small text-muted mb-2">D’autres comptes seront communiqués ultérieurement.</p>
                            <p class="mb-0 small">
                                <strong>Assistance :</strong>
                                <a href="https://wa.me/{{ support_whatsapp_intl }}" class="text-success text-decoration-none" target="_blank" rel="noopener">WhatsApp {{ support_phone }}</a>
                                — <a href="tel:+{{ support_whatsapp_intl }}">Appeler</a>
                            </p>
                        </div>

                        <div class="alert alert-light border mb-4">
                            <p class="mb-2"><strong>Instructions :</strong></p>
                            <ul class="mb-0 small">
                                <li>Effectuez le paiement sur l’un des comptes ci-dessus.</li>
                                <li>Conservez une capture nette de la preuve.</li>
                                <li>Téléversez une image jpg, jpeg ou png (max 5 Mo).</li>
                            </ul>
                        </div>

                        <form method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="mb-3">
                                <label for="{{ form.preuve_paiement.id_for_label }}" class="form-label">{{ form.preuve_paiement.label }}</label>
                                {{ form.preuve_paiement }}
                                {% if form.preuve_paiement.errors %}
                                <div class="text-danger small mt-1">{{ form.preuve_paiement.errors|join:", " }}</div>
                                {% endif %}
                            </div>
                            <button class="btn btn-primary" type="submit">Confirmer ma demande</button>
                            <a href="{% url 'tarifs' %}" class="btn btn-outline-secondary ms-2">Retour aux tarifs</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}