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

{% block title %}Choisir votre mode de paiement - {{ site.name }}{% endblock %}

{% block body %}
<div class="payment-page">
    <div class="container py-5">
        <div class="row justify-content-center">
            <div class="col-lg-9 col-xl-8">
                <!-- Progress Steps -->
                <div class="payment-steps mb-5">
                    <div class="step completed">
                        <div class="step-number"><i class="fas fa-check"></i></div>
                        <div class="step-label">Panier</div>
                    </div>
                    <div class="step-line completed"></div>
                    <div class="step completed">
                        <div class="step-number"><i class="fas fa-check"></i></div>
                        <div class="step-label">Informations</div>
                    </div>
                    <div class="step-line active"></div>
                    <div class="step active">
                        <div class="step-number">3</div>
                        <div class="step-label">Paiement</div>
                    </div>
                </div>

                <!-- Order Summary Header -->
                <div class="order-summary-card mb-4">
                    <div class="order-header">
                        <div class="order-info">
                            <div class="order-icon">
                                <i class="fas fa-receipt"></i>
                            </div>
                            <div>
                                <h4 class="order-number">{{ order.orderNumber }}</h4>
                                <p class="order-items">{{ order.items|length }} article(s)</p>
                            </div>
                        </div>
                        <div class="order-total">
                            <div class="total-label">Total</div>
                            <div class="total-amount">{{ order.totalAmount|number_format(2, ',', ' ') }} €</div>
                        </div>
                    </div>
                </div>

                <!-- Payment Method Selection -->
                <div class="payment-card">
                    <div class="payment-header">
                        <div class="payment-title">
                            <i class="fas fa-credit-card"></i>
                            <h2>Choisissez votre mode de paiement</h2>
                        </div>
                    </div>
                    <div class="payment-body">
                    {% for message in app.flashes('error') %}
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    {% endfor %}

                    <form method="POST" action="{{ path('shop_payment_method', {siteName: site.internalName, orderId: order.id}) }}" class="payment-form">
                        <input type="hidden" name="_token" value="{{ csrf_token('payment_method') }}">
                        <div class="payment-methods-grid">
                            {% for method in availableMethods %}
                            <div class="payment-method-option">
                                <input type="radio"
                                       class="payment-radio"
                                       name="payment_method"
                                       id="payment_{{ method.code }}"
                                       value="{{ method.code }}"
                                       {{ loop.first ? 'checked' : '' }}>
                                <label class="payment-method-label" for="payment_{{ method.code }}">
                                    <div class="payment-method-content">
                                        <div class="payment-icon-wrapper">
                                            <div class="payment-icon-circle">
                                                <i class="fas {{ method.icon }}"></i>
                                            </div>
                                        </div>
                                        <div class="payment-method-info">
                                            <h3 class="payment-method-name">{{ method.name }}</h3>
                                            <p class="payment-method-desc">
                                                {% if method.code == 'stripe' %}
                                                    Paiement sécurisé par carte bancaire
                                                {% elseif method.code == 'paypal' %}
                                                    Paiement rapide avec votre compte PayPal
                                                {% elseif method.code == 'bank_transfer' %}
                                                    Virement bancaire (délai 1-3 jours)
                                                {% endif %}
                                            </p>
                                        </div>
                                        <div class="payment-check">
                                            <i class="fas fa-check-circle"></i>
                                        </div>
                                    </div>
                                </label>
                            </div>
                            {% endfor %}
                        </div>

                        <div class="payment-actions">
                            <a href="{{ path('shop_checkout', {siteName: site.internalName}) }}" class="btn-payment-back">
                                <i class="fas fa-arrow-left"></i>
                                <span>Retour</span>
                            </a>
                            <button type="submit" class="btn-payment-submit">
                                <i class="fas fa-lock"></i>
                                <span>Procéder au paiement sécurisé</span>
                            </button>
                        </div>
                    </form>

                    <!-- Security Info -->
                    <div class="security-badge">
                        <i class="fas fa-shield-alt"></i>
                        <span>Paiement 100% sécurisé - Vos données sont protégées</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Payment Page Layout */
.payment-page {
    background: #f8f9fa;
    min-height: 100vh;
    padding: 4rem 0;
}

/* Progress Steps */
.payment-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2.5rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
}

.step.completed .step-number {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.step.active .step-number {
    background: var(--site-primary-color, #10b981);
    color: white;
}

.step-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.step.active .step-label {
    color: #1e293b;
    font-weight: 600;
}

.step-line {
    width: 80px;
    height: 2px;
    background: #e2e8f0;
    margin: 0 10px;
    margin-bottom: 28px;
}

.step-line.completed,
.step-line.active {
    background: var(--site-primary-color, #10b981);
}

/* Order Summary Card */
.order-summary-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto 1.5rem auto;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    gap: 1.5rem;
}

.order-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.order-icon {
    width: 50px;
    height: 50px;
    background: var(--site-primary-color, #10b981);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
}

.order-number {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.order-items {
    font-size: 0.875rem;
    color: #64748b;
    margin: 4px 0 0 0;
}

.order-total {
    text-align: right;
}

.total-label {
    font-size: 0.75rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    font-weight: 600;
}

.total-amount {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--site-primary-color, #10b981);
}

/* Payment Card */
.payment-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 1200px;
    margin: 0 auto;
}

.payment-header {
    background: var(--site-primary-color, #10b981);
    padding: 1.5rem 2rem;
}

.payment-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.payment-title i {
    font-size: 1.5rem;
    color: white;
}

.payment-title h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: white;
}

.payment-body {
    padding: 2rem;
}

/* Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.payment-method-option {
    position: relative;
}

.payment-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.payment-method-label {
    display: block;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-method-content {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #f8f9fa;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment-method-label:hover .payment-method-content {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    border-color: var(--site-primary-color, #10b981);
}

.payment-radio:checked + .payment-method-label .payment-method-content {
    background: white;
    border-color: var(--site-primary-color, #10b981);
    border-width: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.payment-icon-wrapper {
    flex-shrink: 0;
}

.payment-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--site-primary-color, #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    transition: all 0.3s ease;
}

.payment-radio:checked + .payment-method-label .payment-icon-circle {
    transform: scale(1.05);
}

.payment-method-info {
    flex: 1;
}

.payment-method-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px 0;
}

.payment-method-desc {
    font-size: 0.875rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

.payment-check {
    flex-shrink: 0;
    color: #cbd5e0;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.payment-radio:checked + .payment-method-label .payment-check {
    color: var(--site-primary-color, #10b981);
    transform: scale(1.05);
}

/* Payment Actions */
.payment-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-payment-submit {
    flex: 1;
    padding: 1rem 1.5rem;
    background: var(--site-primary-color, #10b981);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-payment-submit:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-payment-submit:active {
    transform: translateY(0);
}

.btn-payment-back {
    flex: 1;
    padding: 1rem 1.5rem;
    background: #e2e8f0;
    color: #1e293b;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-payment-back:hover {
    background: #cbd5e1;
    color: #1e293b;
    text-decoration: none;
}

/* Security Badge */
.security-badge {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 0.875rem;
}

.security-badge i {
    color: var(--site-primary-color, #10b981);
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .payment-page {
        padding: 2rem 0;
    }

    .payment-steps {
        transform: scale(0.85);
    }

    .step-line {
        width: 60px;
    }

    .order-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem;
    }

    .order-total {
        width: 100%;
        text-align: left;
    }

    .payment-header,
    .payment-body {
        padding: 1.5rem;
    }

    .payment-method-content {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .payment-actions {
        flex-direction: column;
    }

    .btn-payment-submit,
    .btn-payment-back {
        width: 100%;
    }
}
</style>

<script>
// Add smooth animations on page load
document.addEventListener('DOMContentLoaded', function() {
    // Animate payment methods
    const methods = document.querySelectorAll('.payment-method-option');
    methods.forEach((method, index) => {
        setTimeout(() => {
            method.style.opacity = '0';
            method.style.transform = 'translateY(20px)';
            method.style.transition = 'all 0.4s ease';
            setTimeout(() => {
                method.style.opacity = '1';
                method.style.transform = 'translateY(0)';
            }, 50);
        }, index * 100);
    });

    // Debug form submission
    const form = document.querySelector('.payment-form');
    form.addEventListener('submit', function(e) {
        console.log('Form submitting with method:', this.method);
        console.log('Form action:', this.action);
        console.log('Selected payment method:', document.querySelector('input[name="payment_method"]:checked')?.value);
    });

    // Add ripple effect on button click (but don't prevent form submission)
    const submitBtn = document.querySelector('.btn-payment-submit');
    submitBtn.addEventListener('click', function(e) {
        const ripple = document.createElement('span');
        const rect = this.getBoundingClientRect();
        const size = Math.max(rect.width, rect.height);
        const x = e.clientX - rect.left - size / 2;
        const y = e.clientY - rect.top - size / 2;

        ripple.style.width = ripple.style.height = size + 'px';
        ripple.style.left = x + 'px';
        ripple.style.top = y + 'px';
        ripple.style.position = 'absolute';
        ripple.style.borderRadius = '50%';
        ripple.style.background = 'rgba(255, 255, 255, 0.5)';
        ripple.style.transform = 'scale(0)';
        ripple.style.animation = 'ripple 0.6s ease-out';
        ripple.style.pointerEvents = 'none';

        this.style.position = 'relative';
        this.style.overflow = 'hidden';
        this.appendChild(ripple);

        setTimeout(() => ripple.remove(), 600);
    });
});

// Add CSS animation for ripple
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);
</script>
{% endblock %}