{% extends 'base.html' %}
{% block content %}
    <!-- Checkout Section -->
    <section id="checkout" class="auth-section">
        <div class="auth-container">
            <div class="auth-card checkout-card">
                <div class="auth-header">
                    <h2>Checkout<span>Complete Your Order</span></h2>
                </div>

                <!-- Order Summary -->
                <div class="order-summary">
                    <h3>Order Summary</h3>
                    <div class="order-items">
                        {% for item in cart_items %}
                        <div class="order-item">
                            <span class="item-name">{{ item.product.name }} x {{ item.quantity }}</span>
                            <span class="item-price">N {{ "%.2f"|format(item.quantity * item.product.price) }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    <div class="order-total">
                        <span>Total Amount:</span>
                        <span class="total-amount">N {{ "%.2f"|format(total_price) }}</span>
                    </div>
                </div>

                <!-- Payment Instructions -->
                <div class="payment-instructions">
                    <h3><i class="bi bi-credit-card"></i> Payment Details</h3>
                    <div class="account-info">
                        <div class="account-row">
                            <span class="label">Bank Name:</span>
                            <span class="value">First Bank of Nigeria</span>
                        </div>
                        <div class="account-row">
                            <span class="label">Account Name:</span>
                            <span class="value">Pro-choice & venchoice</span>
                        </div>
                        <div class="account-row">
                            <span class="label">Account Number:</span>
                            <span class="value account-number">3085748291</span>
                        </div>
                        <div class="account-row highlight">
                            <span class="label">Amount to Pay:</span>
                            <span class="value">N {{ "%.2f"|format(total_price) }}</span>
                        </div>
                    </div>
                    <div class="payment-note">
                        <i class="bi bi-info-circle"></i>
                        <p>Please make payment and kindly send your proof of payment (screenshot or transaction ID) to <strong>prochoiceandvenchoice@yahoo.com</strong> or <strong>+234 813 268 8235</strong> via WhatsApp.</p>
                    </div>
                </div>

                <!-- Order Actions -->
                <div class="checkout-notification">
                    <i class="bi bi-exclamation-circle"></i>
                    <p><strong>Important:</strong> After sending your proof of payment via WhatsApp, please click <strong>"Done"</strong> to complete your order.</p>
                </div>
                <div class="checkout-actions">
                    <a href="{{ url_for('main.view_cart') }}" class="btn btn-secondary">
                        <i class="bi bi-arrow-left"></i> Back to Cart
                    </a>
                    <a href="https://wa.me/23481326882235?text=Hello%2C%20I%20just%20made%20a%20payment%20of%20N%20{{ '%.2f'|format(total_price) }}%20for%20my%20order.%20Here%20is%20my%20proof%20of%20payment." target="_blank" class="btn btn-whatsapp">
                        <i class="bi bi-whatsapp"></i> Send via WhatsApp
                    </a>
                    <a href="{{ url_for('main.complete_order') }}" class="btn">
                        <i class="bi bi-check-circle"></i> Done
                    </a>
                </div>
            </div>
        </div>
    </section>

    <link rel="stylesheet" href="{{ url_for('static', filename='css/checkout.css') }}">
{% endblock %}