@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 de la location</h1>
            <p class="text-gray-600 mb-8">Demande #{{ $rentalRequest->request_number ?? $rentalRequest->id }} - {{ $rentalRequest->equipment->name ?? 'Équipement' }}</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">Montant total</span>
                    <span class="font-semibold text-gray-900">{{ number_format($totalAmount, 2) }} €</span>
                </div>

                @if($depositAmount > 0)
                    <div class="flex justify-between items-center mb-3 text-blue-800">
                        <span class="text-gray-700">Acompte (caution) </span>
                        <span class="font-semibold">{{ number_format($depositAmount, 2) }} €</span>
                    </div>
                    <div class="flex justify-between items-center mb-3">
                        <span class="text-gray-700">Reste à payer</span>
                        <span class="font-semibold text-gray-900">{{ number_format($balanceAmount, 2) }} €</span>
                    </div>
                @endif

                <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 maintenant</span>
                    <span class="text-2xl font-bold text-blue-600" id="displayAmount">
                        {{ number_format($defaultPaymentType === 'deposit' ? $depositAmount : ($defaultPaymentType === 'balance' ? $balanceAmount : $totalAmount), 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-3 gap-4">
                    <button type="button"
                            class="relative flex items-start p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                            onclick="selectPaymentOption('deposit')"
                            @if(!($depositAmount > 0 && $paymentStatus === 'pending')) disabled @endif>
                        <div class="ml-0 text-sm text-left">
                            <div class="font-medium text-gray-700">Acompte</div>
                            <div class="text-gray-500">{{ number_format($depositAmount, 2) }} €</div>
                            @if(!($depositAmount > 0 && $paymentStatus === 'pending'))
                                <div class="text-xs text-gray-400 mt-1">Indisponible</div>
                            @endif
                        </div>
                    </button>

                    <button type="button"
                            class="relative flex items-start p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                            onclick="selectPaymentOption('balance')"
                            @if(!($balanceAmount > 0 && $paymentStatus === 'partial')) disabled @endif>
                        <div class="ml-0 text-sm text-left">
                            <div class="font-medium text-gray-700">Solde</div>
                            <div class="text-gray-500">{{ number_format($balanceAmount, 2) }} €</div>
                            @if(!($balanceAmount > 0 && $paymentStatus === 'partial'))
                                <div class="text-xs text-gray-400 mt-1">Indisponible</div>
                            @endif
                        </div>
                    </button>

                    <button type="button"
                            class="relative flex items-start p-4 border rounded-lg hover:bg-gray-50 transition-colors"
                            onclick="selectPaymentOption('full')"
                            @if($paymentStatus !== 'pending') disabled @endif>
                        <div class="ml-0 text-sm text-left">
                            <div class="font-medium text-gray-700">Total</div>
                            <div class="text-gray-500">{{ number_format($totalAmount, 2) }} €</div>
                            @if($paymentStatus !== 'pending')
                                <div class="text-xs text-gray-400 mt-1">Indisponible</div>
                            @endif
                        </div>
                    </button>
                </div>
            </div>

            <div class="bg-gray-50 rounded-lg p-6 mb-8">
                <h3 class="font-semibold text-gray-900 mb-4">Détails</h3>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <p class="text-gray-600">Début</p>
                        <p class="font-semibold text-gray-900">{{ optional($rentalRequest->start_date)->format('d/m/Y') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Fin</p>
                        <p class="font-semibold text-gray-900">{{ optional($rentalRequest->end_date)->format('d/m/Y') }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Prestataire</p>
                        <p class="font-semibold text-gray-900">{{ $rentalRequest->prestataire->user->name ?? 'N/A' }}</p>
                    </div>
                    <div>
                        <p class="text-gray-600">Paiement</p>
                        <p class="font-semibold text-green-600">
                            @if($paymentStatus === 'paid') Payé
                            @elseif($paymentStatus === 'partial') Acompte payé
                            @else En attente
                            @endif
                        </p>
                    </div>
                </div>
            </div>

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

                <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">0.00</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>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe("{{ config('services.stripe.key') }}");
    const rentalRequestId = "{{ $rentalRequest->id }}";

    const depositAmount = Number("{{ number_format($depositAmount, 2, '.', '') }}");
    const totalAmount = Number("{{ number_format($totalAmount, 2, '.', '') }}");
    const balanceAmount = Number("{{ number_format($balanceAmount, 2, '.', '') }}");

    let elements;
    let stripeInitialized = false;

    function amountForType(type) {
        if (type === 'deposit') return depositAmount;
        if (type === 'balance') return balanceAmount;
        return totalAmount;
    }

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

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

        try {
            const response = await fetch("{{ route('client.payments.rental.intent', $rentalRequest) }}", {
                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 || data.error) {
                throw new Error(data.error || 'Erreur lors de la création du paiement');
            }

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

            const paymentElement = elements.create("payment");
            paymentElement.mount("#payment-element");

            stripeInitialized = true;
            updateDisplayedAmount();
        } catch (error) {
            console.error(error);
            showMessage(error.message);
        }
    }

    function updateDisplayedAmount() {
        const type = document.getElementById('payment_type').value;
        const amount = amountForType(type);
        document.getElementById('payAmount').innerText = amount.toFixed(2);
        document.getElementById('displayAmount').innerText = amount.toFixed(2) + ' €';
    }

    function selectPaymentOption(type) {
        document.getElementById('payment_type').value = type;
        stripeInitialized = false;
        document.getElementById('payment-element').innerHTML = '';
        updateDisplayedAmount();
        initializeStripe();
    }

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

        const { error, paymentIntent } = await stripe.confirmPayment({
            elements,
            redirect: 'if_required'
        });

        if (error) {
            showMessage(error.message);
            setLoading(false);
            return;
        }

        if (!paymentIntent || !paymentIntent.id) {
            showMessage('Paiement non confirmé.');
            setLoading(false);
            return;
        }

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

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

            window.location.href = "{{ route('client.equipment-rental-requests.show', $rentalRequest) }}?payment_success=1";
        } catch (err) {
            showMessage(err.message);
        }

        setLoading(false);
    }

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

    function setLoading(isLoading) {
        const btn = document.querySelector("#submit");
        if (isLoading) {
            btn.disabled = true;
            document.querySelector(".spinner").classList.remove("hidden");
            document.querySelector("#button-text").classList.add("hidden");
        } else {
            btn.disabled = false;
            document.querySelector(".spinner").classList.add("hidden");
            document.querySelector("#button-text").classList.remove("hidden");
        }
    }

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

    // Init default
    updateDisplayedAmount();
    initializeStripe();
</script>
@endpush
@endsection