<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ $sale->sale_number }}</title>
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            color: #111827;
            font-family: Arial, sans-serif;
            font-size: 12px;
            margin: 0;
            padding: 12px;
        }

        .receipt {
            margin: 0 auto;
            max-width: 302px;
        }

        .center {
            text-align: center;
        }

        h1,
        h2,
        p {
            margin: 0 0 6px;
        }

        h1 {
            font-size: 18px;
        }

        .muted {
            color: #4b5563;
        }

        .divider {
            border-top: 1px dashed #9ca3af;
            margin: 10px 0;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            padding: 4px 0;
            vertical-align: top;
        }

        th {
            border-bottom: 1px dashed #9ca3af;
            color: #4b5563;
            font-size: 11px;
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .row {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            padding: 3px 0;
        }

        .strong {
            font-weight: 700;
        }

        @media print {
            @page {
                margin: 4mm;
                size: 80mm auto;
            }

            body {
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <main class="receipt">
        <section class="center">
            <h1>{{ $company->name }}</h1>
            <p>{{ $company->address ?: 'Business address' }}</p>
            <p>{{ $company->phone }}</p>
        </section>

        <div class="divider"></div>

        <section>
            <div class="row"><span>Receipt</span><span>{{ $sale->sale_number }}</span></div>
            <div class="row"><span>Date</span><span>{{ optional($sale->sale_date)->format('Y-m-d') }}</span></div>
            <div class="row"><span>Payment</span><span>{{ str_replace('_', ' ', ucfirst($sale->payment_method)) }}</span></div>
            <div class="row"><span>Status</span><span>{{ ucfirst($sale->payment_status) }}</span></div>
        </section>

        <div class="divider"></div>

        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th class="right">Qty</th>
                    <th class="right">Total</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($sale->items as $item)
                    <tr>
                        <td>
                            <span class="strong">{{ $item->description }}</span><br>
                            <span class="muted">{{ $item->sku ?: 'No SKU' }} @ BDT {{ number_format((float) $item->unit_price, 2) }}</span>
                        </td>
                        <td class="right">{{ number_format((float) $item->quantity, 2) }}</td>
                        <td class="right">BDT {{ number_format((float) $item->line_total, 2) }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        <div class="divider"></div>

        <section>
            <div class="row"><span>Subtotal</span><span>BDT {{ number_format((float) $sale->subtotal, 2) }}</span></div>
            <div class="row"><span>Discount</span><span>BDT {{ number_format((float) $sale->discount_total, 2) }}</span></div>
            <div class="row"><span>Tax</span><span>BDT {{ number_format((float) $sale->tax_total, 2) }}</span></div>
            <div class="row strong"><span>Total</span><span>BDT {{ number_format((float) $sale->total, 2) }}</span></div>
            <div class="row"><span>Paid</span><span>BDT {{ number_format((float) $sale->paid_total, 2) }}</span></div>
            <div class="row"><span>Change</span><span>BDT {{ number_format((float) $sale->change_total, 2) }}</span></div>
        </section>

        <div class="divider"></div>

        <p class="center strong">Thank you for your purchase.</p>
    </main>
</body>
</html>
