<x-filament::page>
    <div class="mx-auto max-w-3xl space-y-6">
    <script src="https://cdn.tailwindcss.com"></script>
        {{-- Header Card --}}
        <x-filament::section>
            <div class="flex items-start gap-4">
                <div class="mt-1">
                    <x-filament::icon
                        icon="heroicon-o-check-circle"
                        class="h-10 w-10 text-success-600"
                    />
                </div>

                <div class="flex-1">
                    <h2 class="text-xl font-semibold">
                        Payment Successful
                    </h2>
                    <p class="mt-1 text-sm text-gray-600">
                        Your transaction has been completed successfully.
                    </p>
                </div>

                <x-filament::badge color="success">
                    {{ strtoupper($session['payment_status'] ?? 'PAID') }}
                </x-filament::badge>
            </div>
        </x-filament::section>

        {{-- Amount Card --}}
        <x-filament::section>
            <div class="text-center space-y-2">
                <div class="text-sm text-gray-600">Amount Paid</div>

                <div class="text-4xl font-bold">
                    {{ number_format(($session['amount_total'] ?? 0) / 100, 2) }}
                    <span class="text-base font-medium text-gray-500">
                        {{ strtoupper($session['currency'] ?? 'USD') }}
                    </span>
                </div>

                <div class="text-xs text-gray-500">
                    Session: <span class="font-mono break-all">{{ $session['id'] ?? '-' }}</span>
                </div>
            </div>
        </x-filament::section>

        {{-- Details --}}
        <x-filament::section heading="Details">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="rounded-xl border border-gray-200 p-4">
                    <div class="text-xs text-gray-500">Customer Email</div>
                    <div class="mt-1 text-sm font-medium break-all">
                        {{ $session['customer_details']['email'] ?? '—' }}
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 p-4">
                    <div class="text-xs text-gray-500">Mode</div>
                    <div class="mt-1 text-sm font-medium">
                        {{ strtoupper($session['mode'] ?? 'PAYMENT') }}
                    </div>
                </div>

                <div class="rounded-xl border border-gray-200 p-4 sm:col-span-2">
                    <div class="text-xs text-gray-500">Payment Intent</div>
                    <div class="mt-1 text-sm font-medium font-mono break-all">
                        {{ $session['payment_intent'] ?? '—' }}
                    </div>
                </div>
            </div>
        </x-filament::section>

        {{-- Actions --}}
        <div class="flex flex-col gap-3 sm:flex-row sm:justify-end">
            <x-filament::button
                tag="a"
                color="gray"
                href="{{ url()->previous() }}"
                icon="heroicon-o-arrow-left"
            >
                Back
            </x-filament::button>

            <x-filament::button
                tag="a"
                color="primary"
                href="{{ route('filament.admin.pages.dashboard') }}"
                icon="heroicon-o-squares-2x2"
            >
                Dashboard
            </x-filament::button>
        </div>

    </div>
</x-filament::page>
