<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Receipt {{ $receipt->receipt_number }}</title>
    <style>
        body { font-family: Helvetica, Arial, sans-serif; color: #1a1a1a; margin: 0; padding: 40px; }
        .header { text-align: center; margin-bottom: 30px; border-bottom: 2px solid #22c55e; padding-bottom: 20px; }
        .logo { font-size: 28px; font-weight: bold; color: #22c55e; }
        .subtitle { font-size: 12px; color: #666; margin-top: 4px; }
        .section { margin-bottom: 20px; }
        .section-title { font-size: 11px; font-weight: bold; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
        .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
        .row-label { font-size: 13px; color: #666; }
        .row-value { font-size: 13px; font-weight: 600; color: #1a1a1a; }
        .total-row { border-top: 2px solid #22c55e; padding-top: 10px; margin-top: 10px; }
        .total-row .row-value { font-size: 16px; color: #22c55e; }
        .status { display: inline-block; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: bold; }
        .status-successful { background: #dcfce7; color: #166534; }
        .status-pending { background: #fef9c3; color: #854d0e; }
        .status-failed { background: #fee2e2; color: #991b1b; }
        .token-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; padding: 12px; margin-top: 15px; }
        .token-label { font-size: 11px; color: #166534; font-weight: bold; margin-bottom: 4px; }
        .token-value { font-size: 14px; font-family: monospace; font-weight: bold; color: #14532d; word-break: break-all; }
        .footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb; font-size: 11px; color: #999; }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">Clikzpay</div>
        <div class="subtitle">Digital Bills Payment Receipt</div>
    </div>

    <div class="section">
        <div class="section-title">Receipt Information</div>
        <div class="row">
            <span class="row-label">Receipt Number</span>
            <span class="row-value">{{ $receipt->receipt_number }}</span>
        </div>
        <div class="row">
            <span class="row-label">Date</span>
            <span class="row-value">{{ $transaction->created_at->format('M d, Y \a\t h:i A') }}</span>
        </div>
        <div class="row">
            <span class="row-label">Status</span>
            <span class="row-value">
                <span class="status status-{{ $transaction->status }}">{{ ucfirst($transaction->status) }}</span>
            </span>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Service Details</div>
        <div class="row">
            <span class="row-label">Service</span>
            <span class="row-value">{{ $transaction->service_name }}</span>
        </div>
        <div class="row">
            <span class="row-label">Customer Number</span>
            <span class="row-value">{{ $transaction->customer_number }}</span>
        </div>
        @if($transaction->customer_name)
        <div class="row">
            <span class="row-label">Customer Name</span>
            <span class="row-value">{{ $transaction->customer_name }}</span>
        </div>
        @endif
    </div>

    <div class="section">
        <div class="section-title">Payment Summary</div>
        <div class="row">
            <span class="row-label">Amount</span>
            <span class="row-value">&#8358;{{ number_format($transaction->amount, 2) }}</span>
        </div>
        <div class="row">
            <span class="row-label">Service Charge</span>
            <span class="row-value">&#8358;{{ number_format($transaction->fee, 2) }}</span>
        </div>
        <div class="row total-row">
            <span class="row-label">Total Paid</span>
            <span class="row-value">&#8358;{{ number_format($transaction->total_amount, 2) }}</span>
        </div>
    </div>

    <div class="section">
        <div class="section-title">Transaction Reference</div>
        <div class="row">
            <span class="row-label">Reference</span>
            <span class="row-value" style="font-family: monospace;">{{ $transaction->reference }}</span>
        </div>
        @if($transaction->provider_reference)
        <div class="row">
            <span class="row-label">Provider Reference</span>
            <span class="row-value" style="font-family: monospace;">{{ $transaction->provider_reference }}</span>
        </div>
        @endif
    </div>

    @if($transaction->token_data && is_array($transaction->token_data))
    <div class="token-box">
        @if(!empty($transaction->token_data['cards']) && is_array($transaction->token_data['cards']))
            @foreach($transaction->token_data['cards'] as $card)
                @if($card['Serial'] ?? null)
                <div class="token-label">Serial No</div>
                <div class="token-value">{{ $card['Serial'] }}</div>
                @endif
                @if($card['Pin'] ?? null)
                <div class="token-label">PIN</div>
                <div class="token-value">{{ $card['Pin'] }}</div>
                @endif
            @endforeach
        @elseif(!empty($transaction->token_data['pin']))
            <div class="token-label">PIN</div>
            <div class="token-value">{{ $transaction->token_data['pin'] }}</div>
        @elseif(!empty($transaction->token_data['tokens']) && is_array($transaction->token_data['tokens']))
            @foreach($transaction->token_data['tokens'] as $token)
            <div class="token-label">PIN / Token</div>
            <div class="token-value">{{ $token }}</div>
            @endforeach
        @elseif($transaction->token_data['token'] ?? null)
            <div class="token-label">Electricity Token</div>
            <div class="token-value">{{ $transaction->token_data['token'] }}</div>
        @endif
    </div>
    @endif

    <div class="footer">
        <p>This is a computer-generated receipt. No signature required.</p>
        <p>Clikzpay &mdash; Digital Bills Payment Platform</p>
    </div>
</body>
</html>
