@extends('layouts.app')

@section('title', 'Receipt')

@section('content')
<div class="mx-auto max-w-lg">
    <div class="rounded-xl bg-white p-8 shadow-sm border border-gray-100 text-center">
        <div class="mb-6">
            <div class="h-12 w-12 rounded-lg bg-green-950 flex items-center justify-center mx-auto">
                <span class="text-white font-bold">Tk</span>
            </div>
            <h1 class="text-xl font-bold text-gray-900 mt-3">Clikzpay Receipt</h1>
        </div>

        <div class="border-t border-b border-gray-100 py-4 space-y-2">
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Receipt No</span>
                <span class="font-medium text-gray-900">{{ $receipt->receipt_number }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Date</span>
                <span class="text-gray-900">{{ $transaction->created_at->format('M d, Y H:i') }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Service</span>
                <span class="text-gray-900">{{ $transaction->service_name }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Customer</span>
                <span class="text-gray-900">{{ $transaction->customer_number }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Amount</span>
                <span class="text-gray-900">₦{{ number_format($transaction->amount, 2) }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Fee</span>
                <span class="text-gray-900">₦{{ number_format($transaction->fee, 2) }}</span>
            </div>
            <div class="flex justify-between text-sm font-bold">
                <span class="text-gray-900">Total</span>
                <span class="text-gray-900">₦{{ number_format($transaction->total_amount, 2) }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Status</span>
                <span class="font-medium {{ $transaction->status === 'successful' ? 'text-green-950' : 'text-red-600' }}">{{ ucfirst($transaction->status) }}</span>
            </div>
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Reference</span>
                <span class="font-mono text-gray-900">{{ $transaction->reference }}</span>
            </div>
        </div>

        @if($transaction->token_data)
        <div class="mt-4 p-3 bg-green-50 rounded-lg border border-green-200">
            <p class="text-xs text-green-700 font-medium mb-1">Token</p>
            <p class="text-sm font-mono font-bold text-green-800 break-all">{{ $transaction->token_data }}</p>
        </div>
        @endif

        <div class="mt-6 flex gap-3">
            <a href="{{ route('transactions.index') }}" class="flex-1 rounded-lg bg-gray-100 px-4 py-2.5 text-sm font-semibold text-gray-700 hover:bg-gray-200 text-center">Back</a>
            <a href="{{ route('transactions.receipt.pdf', $transaction->reference) }}" class="flex-1 rounded-lg bg-green-950 px-4 py-2.5 text-sm font-semibold text-white hover:bg-green-700 text-center">Download PDF</a>
        </div>
    </div>
</div>
@endsection