{% extends 'base.html.twig' %}

{% block body %}
    <div class="cart-layout container mx-auto py-10 px-4">
        <div class="account-profil__header mb-2">
            <div class="account-profil__title-group">
                <h2 class="account-profil__title">Paiement partiel</h2>
                <p class="account-profil__subtitle">
                    Paiement partiel configuré par l'administrateur.
                </p>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <div class="lg:col-span-2">
                <div class="account-box">
                    <div class="mb-4 p-4 bg-blue-50 rounded-lg border border-blue-200">
                        <h3 class="text-lg font-semibold text-blue-800 mb-2">📋 Configuration du paiement partiel</h3>
                        <div class="space-y-2 text-sm">
                            <p><strong>Total de la commande :</strong> {{ order.total|number_format(2, ',', ' ') }} €</p>
                            <p><strong>Montant à payer maintenant :</strong> <span class="text-green-600 font-bold">{{ partialAmount|number_format(2, ',', ' ') }} €</span></p>
                            <p><strong>Reste à régler :</strong> <span class="text-orange-600 font-bold">{{ (order.total - partialAmount)|number_format(2, ',', ' ') }} €</span></p>
                            <p><strong>Méthode de paiement :</strong> {{ order.partialPaymentMethod }}</p>
                            {% if order.partialPaymentNote %}
                                <p><strong>Note :</strong> <em>{{ order.partialPaymentNote }}</em></p>
                            {% endif %}
                        </div>
                    </div>

                    <div class="p-4 bg-yellow-50 rounded-lg border border-yellow-200">
                        <h4 class="text-md font-semibold text-yellow-800 mb-2">⚠️ Important</h4>
                        <p class="text-sm text-yellow-700">
                            Ce paiement partiel a été configuré par l'administrateur. 
                            Vous devez régler le montant indiqué pour valider cette étape. 
                            Le reste sera réglé ultérieurement selon les modalités définies.
                        </p>
                    </div>
                </div>
            </div>

            <div>
                <div class="account-box">
                    <h3 class="text-lg font-semibold mb-4">Paiement de {{ partialAmount|number_format(2, ',', ' ') }} €</h3>
                    {{ order|makePaymentForm(partialAmount)|raw }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}