@extends('layouts.app')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <div class="bg-white rounded-lg shadow-lg p-8">
            <h1 class="text-3xl font-bold text-gray-900 mb-2">Paiement du panier</h1>
            <p class="text-gray-600 mb-8">Panier #{{ $cart->id }}</p>

            <div class="bg-blue-50 border border-blue-200 rounded-lg p-6 mb-8">
                <div class="flex justify-between items-center mb-3">
                    <span class="text-gray-700">Total acompte (mode 2)</span>
                    <span class="font-semibold text-blue-800" id="depositAmount" data-raw="{{ (float) $totals['deposit'] }}">{{ number_format($totals['deposit'], 2) }} €</span>
                </div>
                <div class="flex justify-between items-center mb-3">
                    <span class="text-gray-700">Total paiement complet</span>
                    <span class="font-semibold text-gray-900" id="fullAmount" data-raw="{{ (float) $totals['full'] }}">{{ number_format($totals['full'], 2) }} €</span>
                </div>
                <div class="border-t border-blue-300 pt-4 flex justify-between items-center">
                    <span class="text-lg font-bold text-gray-900">Total à payer</span>
                    <span class="text-2xl font-bold text-blue-600" id="displayAmount">{{ number_format($totals['deposit'], 2) }} €</span>
                </div>
            </div>

            <div class="mb-8">
                <label class="block text-sm font-semibold text-gray-900 mb-2">Option de paiement</label>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('deposit')">
                        <div class="flex items-center h-5">
                            <input id="option_deposit" name="payment_option" type="radio" value="deposit" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300" checked>
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_deposit" class="font-medium text-gray-700">Payer l'acompte</label>
                            <p class="text-gray-500">{{ number_format($totals['deposit'], 2) }} € maintenant</p>
                        </div>
                    </div>
                    <div class="relative flex items-start p-4 border rounded-lg cursor-pointer hover:bg-gray-50 transition-colors" onclick="selectPaymentOption('full')">
                        <div class="flex items-center h-5">
                            <input id="option_full" name="payment_option" type="radio" value="full" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300">
                        </div>
                        <div class="ml-3 text-sm">
                            <label for="option_full" class="font-medium text-gray-700">Payer la totalité</label>
                            <p class="text-gray-500">{{ number_format($totals['full'], 2) }} € maintenant</p>
                        </div>
                    </div>
                </div>
            </div>

            <form id="payment-form" class="space-y-6">
                @csrf
                <input type="hidden" id="payment_type" name="payment_type" value="deposit">

                <div id="payment-element"></div>
                <div id="error-message" class="text-red-600 text-sm hidden"></div>

                <button id="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-colors flex justify-center items-center">
                    <div class="spinner hidden mr-2 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    <span id="button-text">Payer <span id="payAmount">{{ number_format($totals['deposit'], 2) }}</span> €</span>
                </button>

                <p class="text-center text-xs text-gray-600 mt-4">
                    <i class="fas fa-lock mr-1"></i> Paiement sécurisé par Stripe.
                </p>
            </form>

            <div class="mt-6 text-center">
                <a href="{{ route('client.cart.index') }}" class="text-sm text-gray-600 hover:text-gray-900">Retour au panier</a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe("{{ config('services.stripe.key') }}");
    let elements = null;
    let stripeInitialized = false;
    let currentClientSecret = null;

    const depositAmount = parseFloat(document.getElementById('depositAmount')?.dataset?.raw || '0');
    const fullAmount = parseFloat(document.getElementById('fullAmount')?.dataset?.raw || '0');

    const urlParams = new URLSearchParams(window.location.search);
    const redirectedClientSecret = urlParams.get('payment_intent_client_secret');

    if (redirectedClientSecret) {
        finalizePaymentIntent(redirectedClientSecret).catch(() => {
            // stay on page and let the user retry
        });
    } else {
        initializeStripe();
    }

    async function initializeStripe() {
        if (stripeInitialized) return;

        const paymentType = document.getElementById('payment_type').value;

        try {
            const response = await fetch("{{ route('client.payments.cart.intent') }}", {
                method: "POST",
                headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
                body: JSON.stringify({ payment_type: paymentType }),
            });

            const data = await response.json();
            if (!response.ok) {
                throw new Error(data.error || 'Erreur lors de la création du paiement');
            }

            currentClientSecret = data.clientSecret;
            const appearance = { theme: 'stripe' };
            elements = stripe.elements({ appearance, clientSecret: currentClientSecret });

            const paymentElement = elements.create("payment");
            paymentElement.mount("#payment-element");
            stripeInitialized = true;
        } catch (error) {
            showMessage(error.message);
        }
    }

    async function handleSubmit(e) {
        e.preventDefault();
        setLoading(true);

        try {
            const { error } = await stripe.confirmPayment({
                elements,
                confirmParams: {
                    return_url: window.location.href,
                },
                redirect: 'if_required'
            });

            if (error) {
                throw error;
            }

            if (!currentClientSecret) {
                throw new Error('Client secret manquant');
            }

            await finalizePaymentIntent(currentClientSecret, document.getElementById('payment_type').value);
        } catch (error) {
            showMessage(error.message || String(error));
            setLoading(false);
            return;
        }

        setLoading(false);
    }

    document.getElementById("payment-form").addEventListener("submit", handleSubmit);

    async function finalizePaymentIntent(clientSecret, fallbackPaymentType = null) {
        const { paymentIntent } = await stripe.retrievePaymentIntent(clientSecret);
        if (!paymentIntent?.id) {
            throw new Error('Paiement introuvable');
        }

        const paymentType = paymentIntent?.metadata?.payment_type || fallbackPaymentType || document.getElementById('payment_type').value;

        const response = await fetch("{{ route('client.payments.cart.confirm') }}", {
            method: "POST",
            headers: { "Content-Type": "application/json", "X-CSRF-TOKEN": "{{ csrf_token() }}" },
            body: JSON.stringify({
                payment_type: paymentType,
                payment_intent_id: paymentIntent.id,
            }),
        });

        const data = await response.json();
        if (!response.ok || !data.success) {
            throw new Error(data.error || data.message || 'Erreur lors de la confirmation du paiement');
        }

        window.location.href = "{{ route('client.cart.index') }}?payment_success=true";
    }

    function selectPaymentOption(type) {
        document.getElementById('payment_type').value = type;
        const amount = type === 'deposit' ? depositAmount : fullAmount;
        document.getElementById('payAmount').innerText = amount.toFixed(2);
        document.getElementById('displayAmount').innerText = amount.toFixed(2) + ' €';

        stripeInitialized = false;
        currentClientSecret = null;
        document.getElementById('payment-element').innerHTML = '';
        initializeStripe();
    }

    function showMessage(messageText) {
        const messageContainer = document.querySelector("#error-message");
        messageContainer.classList.remove("hidden");
        messageContainer.textContent = messageText;
    }

    function setLoading(isLoading) {
        if (isLoading) {
            document.querySelector("#submit").disabled = true;
            document.querySelector(".spinner").classList.remove("hidden");
            document.querySelector("#button-text").classList.add("hidden");
        } else {
            document.querySelector("#submit").disabled = false;
            document.querySelector(".spinner").classList.add("hidden");
            document.querySelector("#button-text").classList.remove("hidden");
        }
    }
</script>
@endpush
@endsection