@extends('themes.classic.layouts.app')

@section('title', 'Paiement - '.($site_name ?? 'Mon Site'))

@section('content')
<div class="max-w-xl mx-auto px-6 py-16">
    <h1 class="text-2xl font-bold text-slate-900 mb-2">Paiement sécurisé</h1>
    <p class="text-slate-600 mb-8">Commande {{ $order->number }} — {{ number_format($order->total, 2, ',', ' ') }} €</p>

    <form id="payment-form" class="space-y-6">
        <div id="payment-element" class="p-4 bg-white border border-slate-200 rounded-xl"></div>
        <div id="payment-message" class="hidden text-red-600 text-sm"></div>
        <button type="submit" id="submit-btn" class="w-full py-4 bg-primary-500 text-white rounded-xl font-semibold hover:bg-primary-600 transition disabled:opacity-50">
            Payer {{ number_format($order->total, 2, ',', ' ') }} €
        </button>
    </form>

    <p class="mt-6 text-sm text-slate-500">Paiement sécurisé par Stripe. Vos données bancaires ne transitent pas par notre serveur.</p>
</div>

<script src="https://js.stripe.com/v3/"></script>
<script>
const stripe = Stripe('{{ $publishableKey }}');
const elements = stripe.elements({ clientSecret: '{{ $clientSecret }}' });
const paymentElement = elements.create('payment');
paymentElement.mount('#payment-element');

const form = document.getElementById('payment-form');
const submitBtn = document.getElementById('submit-btn');
const messageEl = document.getElementById('payment-message');

form.addEventListener('submit', async (e) => {
    e.preventDefault();
    submitBtn.disabled = true;
    const { error } = await stripe.confirmPayment({
        elements,
        confirmParams: {
            return_url: '{{ route('ecommerce.order-confirmation', $order->id) }}',
            receipt_email: '{{ $order->customer_email }}',
        }
    });
    if (error) {
        messageEl.textContent = error.message || 'Une erreur est survenue.';
        messageEl.classList.remove('hidden');
        submitBtn.disabled = false;
    }
});
</script>
@endsection
