<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $receipt->voucher_no }}</title>
    <style>
        * { box-sizing: border-box; }
        body { margin: 0; color: #172b4d; font-family: Arial, sans-serif; background: #f6f8fb; }
        .toolbar { max-width: 760px; margin: 20px auto 0; text-align: right; }
        .toolbar button { border: 0; padding: 10px 18px; color: #fff; background: #00868f; cursor: pointer; }
        .voucher { width: calc(100% - 32px); max-width: 760px; margin: 12px auto 32px; padding: 32px; background: #fff; border: 1px solid #dfe4ea; }
        .header { display: flex; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 2px solid #00868f; }
        h1 { margin: 0 0 6px; font-size: 24px; letter-spacing: 0; }
        .muted { color: #718096; }
        .voucher-no { text-align: right; font-weight: 700; }
        .details { width: 100%; margin: 24px 0; border-collapse: collapse; }
        .details th, .details td { padding: 9px 0; border-bottom: 1px solid #edf0f4; text-align: left; }
        .details th { width: 42%; color: #53657d; font-weight: 600; }
        .amount { margin: 24px 0; padding: 18px; text-align: center; background: #edf9fa; }
        .amount strong { display: block; margin-top: 6px; color: #006c73; font-size: 28px; }
        .accounting { padding: 12px; border-left: 3px solid #00868f; background: #f8fafc; font-size: 13px; }
        .signatures { display: flex; justify-content: space-between; gap: 48px; margin-top: 70px; }
        .signature { width: 180px; padding-top: 8px; text-align: center; border-top: 1px solid #718096; }
        @media print { body { background: #fff; } .toolbar { display: none; } .voucher { width: 100%; margin: 0; border: 0; } }
    </style>
</head>
<body>
<div class="toolbar"><button type="button" onclick="window.print()">Print Voucher</button></div>
<main class="voucher">
    <header class="header">
        <div>
            <h1>Receipt Voucher</h1>
            <div class="muted">{{ $receipt->order?->store?->name ?? config('app.name') }}</div>
        </div>
        <div class="voucher-no">
            {{ $receipt->voucher_no }}
            <div class="muted">{{ optional($receipt->received_at)->format('d M Y, h:i A') }}</div>
        </div>
    </header>

    <table class="details">
        <tr><th>Order</th><td>#{{ $receipt->order_id }}</td></tr>
        <tr><th>Customer</th><td>{{ trim(($receipt->customer?->f_name ?? '').' '.($receipt->customer?->l_name ?? '')) ?: 'Guest customer' }}</td></tr>
        <tr><th>Payment Method</th><td>{{ ucwords(str_replace('_', ' ', $receipt->payment_method)) }}</td></tr>
        <tr><th>Account / Cashbox</th><td>{{ $receipt->account ? $receipt->account->code.' - '.$receipt->account->name : 'N/A' }}</td></tr>
        <tr><th>Transaction Reference</th><td>{{ $receipt->transaction_ref ?: 'N/A' }}</td></tr>
        <tr><th>Status</th><td>{{ ucfirst($receipt->receipt_status) }}</td></tr>
        @if ($receipt->notes)<tr><th>Notes</th><td>{{ $receipt->notes }}</td></tr>@endif
    </table>

    <div class="amount">
        Advance Received
        <strong>{{ \App\CentralLogics\Helpers::format_currency($receipt->amount) }}</strong>
    </div>

    <div class="accounting">
        Account classification: Customer Advance / Contract Liability. This receipt does not change the invoice total.
    </div>

    <div class="signatures">
        <div class="signature">Received By</div>
        <div class="signature">Customer</div>
    </div>
</main>
</body>
</html>
