{% extends 'sites/template-default/base.html.twig' %}

{% block title %}Instructions de virement - {{ site.name }}{% endblock %}

{% block body %}
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Success Header -->
            <div class="text-center mb-5">
                <div class="success-icon mb-3">
                    <i class="fas fa-check-circle text-success" style="font-size: 4rem;"></i>
                </div>
                <h2>Commande confirmée !</h2>
                <p class="text-muted">Commande N° <strong>{{ order.orderNumber }}</strong></p>
            </div>

            <!-- Bank Transfer Instructions -->
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0"><i class="fas fa-university"></i> Instructions de virement bancaire</h5>
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Important :</strong> Effectuez votre virement en utilisant les informations ci-dessous. Votre commande sera traitée dès réception du paiement (délai bancaire : 1 à 3 jours ouvrés).
                    </div>

                    <!-- Amount -->
                    <div class="info-block mb-4">
                        <h6 class="text-muted mb-2"><i class="fas fa-euro-sign"></i> Montant à virer</h6>
                        <div class="value-box">
                            <h3 class="mb-0 text-primary">{{ order.totalAmount|number_format(2, ',', ' ') }} {{ order.currency }}</h3>
                        </div>
                    </div>

                    <!-- Reference -->
                    <div class="info-block mb-4">
                        <h6 class="text-muted mb-2"><i class="fas fa-hashtag"></i> Référence de paiement</h6>
                        <div class="value-box">
                            <h4 class="mb-0 font-monospace">{{ order.paymentTransactionId }}</h4>
                            <button class="btn btn-sm btn-outline-primary mt-2" onclick="copyReference()">
                                <i class="fas fa-copy"></i> Copier la référence
                            </button>
                        </div>
                        <div class="alert alert-warning mt-3 py-2 px-3">
                            <small><i class="fas fa-exclamation-triangle"></i> <strong>N'oubliez pas d'indiquer cette référence lors de votre virement</strong></small>
                        </div>
                    </div>

                    <hr>

                    <!-- Bank Details -->
                    <h6 class="text-muted mb-3"><i class="fas fa-bank"></i> Coordonnées bancaires</h6>

                    {% if shopSettings.bankName %}
                    <div class="info-row mb-2">
                        <strong>Banque :</strong>
                        <span>{{ shopSettings.bankName }}</span>
                    </div>
                    {% endif %}

                    {% if shopSettings.bankAccountOwner %}
                    <div class="info-row mb-2">
                        <strong>Titulaire du compte :</strong>
                        <span>{{ shopSettings.bankAccountOwner }}</span>
                    </div>
                    {% endif %}

                    {% if shopSettings.iban %}
                    <div class="info-row mb-2">
                        <strong>IBAN :</strong>
                        <span class="font-monospace">{{ shopSettings.iban }}</span>
                        <button class="btn btn-sm btn-link" onclick="copyIban()">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    {% endif %}

                    {% if shopSettings.bic %}
                    <div class="info-row mb-2">
                        <strong>BIC / SWIFT :</strong>
                        <span class="font-monospace">{{ shopSettings.bic }}</span>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- Order Summary -->
            <div class="card shadow-sm mb-4">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-shopping-cart"></i> Récapitulatif de la commande</h6>
                </div>
                <div class="card-body">
                    <table class="table table-sm mb-0">
                        <tbody>
                            {% for item in order.items %}
                            <tr>
                                <td>{{ item.productName }} <small class="text-muted">x{{ item.quantity }}</small></td>
                                <td class="text-end">{{ (item.quantity * item.unitPrice)|number_format(2, ',', ' ') }} €</td>
                            </tr>
                            {% endfor %}
                            <tr class="table-active fw-bold">
                                <td>Total</td>
                                <td class="text-end">{{ order.totalAmount|number_format(2, ',', ' ') }} €</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Email Confirmation -->
            <div class="alert alert-success">
                <i class="fas fa-envelope-check"></i>
                <strong>Email de confirmation envoyé</strong><br>
                <small>Vous allez recevoir un email à <strong>{{ order.customerEmail }}</strong> avec toutes ces informations.</small>
            </div>

            <!-- Next Steps -->
            <div class="card shadow-sm mb-4 border-info">
                <div class="card-header bg-info text-white">
                    <h6 class="mb-0"><i class="fas fa-list-check"></i> Prochaines étapes</h6>
                </div>
                <div class="card-body">
                    <ol class="mb-0">
                        <li class="mb-2">Effectuez le virement bancaire avec les coordonnées ci-dessus</li>
                        <li class="mb-2">Indiquez la référence <strong>{{ order.paymentTransactionId }}</strong> dans le libellé</li>
                        <li class="mb-2">Attendez la confirmation de réception du paiement (1-3 jours)</li>
                        <li class="mb-0">Nous préparons votre commande dès réception du virement</li>
                    </ol>
                </div>
            </div>

            <!-- Actions -->
            <div class="text-center">
                <a href="{{ path('my_account_orders', {siteName: site.internalName}) }}" class="btn btn-primary me-2">
                    <i class="fas fa-box"></i> Voir mes commandes
                </a>
                <a href="{{ path('shop_cart', {siteName: site.internalName}) }}" class="btn btn-outline-secondary">
                    <i class="fas fa-home"></i> Retour à la boutique
                </a>
            </div>
        </div>
    </div>
</div>

<style>
.value-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 2px dashed #667eea;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f8f9fa;
    border-radius: 6px;
}

.info-row strong,
.info-row span {
    color: #1e293b !important;
}

.info-block h6 {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.card {
    border: none;
    border-radius: 12px;
}

.card-body {
    color: #1e293b;
}

.card-body strong,
.card-body span,
.card-body td,
.card-body li {
    color: #1e293b !important;
}

.table {
    color: #1e293b !important;
}
</style>

<script>
function copyReference() {
    const reference = '{{ order.paymentTransactionId }}';
    navigator.clipboard.writeText(reference).then(function() {
        alert('Référence copiée : ' + reference);
    });
}

function copyIban() {
    const iban = '{{ shopSettings.iban }}';
    navigator.clipboard.writeText(iban).then(function() {
        alert('IBAN copié : ' + iban);
    });
}
</script>
{% endblock %}