<x-layouts.app :title="'Receipt #' . $transaction->reference . ' - ' . config('app.name')" activePage="accounts">
<div class="max-w-2xl mx-auto">
    <!-- Receipt Card -->
    <div class="bg-surface-container-lowest shadow-sm" id="receipt-card">
        <!-- Header -->
        <div class="bg-primary px-8 py-6 text-center">
            <span class="material-symbols-outlined text-on-primary text-4xl mb-2">receipt_long</span>
            <h2 class="font-serif text-2xl text-on-primary">Transaction Receipt</h2>
            <p class="text-on-primary/70 text-xs font-label uppercase tracking-widest mt-1">{{ config('app.name') }}</p>
        </div>

        <!-- Status Banner -->
        <div class="px-8 py-4 text-center
            @if($transaction->status === \App\Enums\TransactionStatus::Completed) bg-green-50
            @elseif($transaction->status === \App\Enums\TransactionStatus::Pending) bg-yellow-50
            @elseif($transaction->status === \App\Enums\TransactionStatus::Failed) bg-red-50
            @else bg-gray-50
            @endif
        ">
            <span class="inline-flex items-center gap-2 text-sm font-semibold
                @if($transaction->status === \App\Enums\TransactionStatus::Completed) text-green-700
                @elseif($transaction->status === \App\Enums\TransactionStatus::Pending) text-yellow-700
                @elseif($transaction->status === \App\Enums\TransactionStatus::Failed) text-red-700
                @else text-gray-700
                @endif
            ">
                <span class="material-symbols-outlined text-lg">
                    @if($transaction->status === \App\Enums\TransactionStatus::Completed) check_circle
                    @elseif($transaction->status === \App\Enums\TransactionStatus::Pending) schedule
                    @elseif($transaction->status === \App\Enums\TransactionStatus::Failed) cancel
                    @else undo
                    @endif
                </span>
                {{ ucfirst($transaction->status->value) }}
            </span>
        </div>

        <!-- Amount -->
        <div class="px-8 py-8 text-center border-b border-surface-container">
            <p class="text-xs text-on-surface-variant uppercase tracking-widest font-label mb-2">{{ $transaction->type->value === 'credit' ? 'Amount Received' : 'Amount Sent' }}</p>
            <p class="font-serif text-4xl font-bold {{ $transaction->type->value === 'credit' ? 'text-green-700' : 'text-on-surface' }}">
                {{ $transaction->type->value === 'credit' ? '+' : '-' }}{{ $transaction->account->currency->symbol() }}{{ number_format($transaction->amount, 2) }}
            </p>
        </div>

        <!-- Details -->
        <div class="px-8 py-6 space-y-4">
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Reference</span>
                <span class="text-sm font-mono font-semibold text-on-surface">{{ $transaction->reference }}</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Date & Time</span>
                <span class="text-sm text-on-surface">{{ $transaction->created_at->format('M d, Y \a\t h:i A') }}</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Type</span>
                <span class="text-sm text-on-surface capitalize">{{ $transaction->type->value }}</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Category</span>
                <span class="text-sm text-on-surface capitalize">{{ $transaction->category->value }}</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Source</span>
                <span class="text-sm text-on-surface capitalize">{{ str_replace('_', ' ', $transaction->source->value) }}</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Account</span>
                <span class="text-sm text-on-surface">{{ $transaction->account->account_number }} ({{ ucfirst($transaction->account->account_type->value) }})</span>
            </div>
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Balance After</span>
                <span class="text-sm font-semibold text-on-surface">{{ $transaction->account->currency->symbol() }}{{ number_format($transaction->balance_after, 2) }}</span>
            </div>
            @if($transaction->description)
            <div class="flex justify-between py-3 border-b border-surface-container">
                <span class="text-xs text-on-surface-variant uppercase tracking-wider font-label">Description</span>
                <span class="text-sm text-on-surface text-right max-w-[60%]">{{ $transaction->description }}</span>
            </div>
            @endif
        </div>

        <!-- Footer -->
        <div class="px-8 py-6 bg-surface-container-low text-center">
            <p class="text-[10px] text-on-surface-variant uppercase tracking-widest font-label">{{ config('app.name') }} &bull; Secure Banking</p>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex justify-center gap-4 mt-6">
        <button onclick="window.print()" class="flex items-center gap-2 px-6 py-3 bg-surface-container-high text-on-surface text-sm font-label font-medium rounded hover:bg-surface-container-highest transition-colors">
            <span class="material-symbols-outlined text-lg">print</span>
            Print Receipt
        </button>
        <a href="{{ route('transactions') }}" class="flex items-center gap-2 px-6 py-3 bg-primary text-on-primary text-sm font-label font-medium rounded hover:opacity-90 transition-colors">
            <span class="material-symbols-outlined text-lg">history</span>
            Transaction History
        </a>
    </div>
</div>

@push('styles')
<style>
@media print {
    body * { visibility: hidden; }
    #receipt-card, #receipt-card * { visibility: visible; }
    #receipt-card { position: absolute; left: 0; top: 0; width: 100%; }
}
</style>
@endpush
</x-layouts.app>
