<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Receipt - <?= e($sale['sale_no']) ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Courier New', Courier, monospace;
            font-size: 14px;
            padding: 10px;
            background: white;
            color: black;
        }
        .receipt {
            max-width: <?= $format === 'pos50' ? '50mm' : '80mm' ?>;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            margin-bottom: 15px;
            border-bottom: 1px dashed #000;
            padding-bottom: 10px;
        }
        .business-name {
            font-size: 18px;
            font-weight: 900;
            margin-bottom: 5px;
        }
        .business-address {
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .receipt-title {
            font-size: 16px;
            font-weight: 900;
            margin: 10px 0;
            text-transform: uppercase;
        }
        .sale-info {
            margin-bottom: 10px;
            font-size: 12px;
            font-weight: 600;
        }
        .sale-info div {
            margin-bottom: 3px;
        }
        .items-table {
            width: 100%;
            margin-bottom: 10px;
            border-collapse: collapse;
            table-layout: fixed; /* Crucial for preventing columns from smashing */
        }
        .items-table th {
            text-align: left;
            border-bottom: 1px dashed #000;
            padding: 5px 2px;
            font-size: 11px;
            font-weight: 700;
        }
        .items-table td {
            padding: 5px 2px;
            font-size: 11px;
            font-weight: 600;
            word-wrap: break-word;
            vertical-align: top;
        }
        .items-table .col-item { width: 45%; }
        .items-table .col-qty  { width: 15%; text-align: center; }
        .items-table .col-price{ width: 20%; text-align: right; }
        .items-table .col-total{ width: 20%; text-align: right; }
        .totals {
            border-top: 1px dashed #000;
            padding-top: 10px;
            margin-bottom: 10px;
        }
        .totals-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 3px;
            font-size: 12px;
            font-weight: 600;
        }
        .totals-row.grand-total {
            font-size: 16px;
            font-weight: 900;
            margin-top: 5px;
            border-top: 1px dashed #000;
            padding-top: 5px;
        }
        .footer {
            text-align: center;
            margin-top: 15px;
            border-top: 1px dashed #000;
            padding-top: 10px;
            font-size: 12px;
            font-weight: 700;
        }
        @media print {
            body {
                padding: 0;
            }
        }
    </style>
</head>
<body>
    <div class="receipt">
        <div class="header">
            <div class="business-name"><?= e($tenant['business_name']) ?></div>
            <div class="business-address"><?= e($tenant['business_address'] ?? '') ?></div>
            <div class="business-address">Phone: <?= e($tenant['business_phone'] ?? '') ?></div>
        </div>

        <div class="receipt-title">SALES RECEIPT</div>

        <div class="sale-info">
            <div><strong>Receipt No:</strong> <?= e($sale['sale_no']) ?></div>
            <div><strong>Date:</strong> <?= date('Y-m-d H:i:s', strtotime($sale['created_at'])) ?></div>
            <div><strong>Cashier:</strong> <?= e(Auth::user()['name'] ?? 'N/A') ?></div>
            <?php if ($sale['customer_id']): ?>
            <div><strong>Customer:</strong> <?= e($sale['customer_name'] ?? 'N/A') ?></div>
            <?php endif; ?>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th class="col-item">Item</th>
                    <th class="col-qty">Qty</th>
                    <th class="col-price">Price</th>
                    <th class="col-total">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($sale['items'] as $item): ?>
                <tr>
                    <td class="col-item"><?= e($item['product_name']) ?></td>
                    <td class="col-qty"><?= (float)$item['quantity'] ?></td>
                    <td class="col-price"><?= number_format($item['unit_price'], 2) ?></td>
                    <td class="col-total"><?= number_format($item['quantity'] * $item['unit_price'], 2) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div class="totals">
            <div class="totals-row">
                <span>Subtotal:</span>
                <span><?= number_format($sale['subtotal'] ?? $sale['total'], 2) ?></span>
            </div>
            <?php if ($sale['tax_amount'] > 0): ?>
            <div class="totals-row">
                <span>Tax:</span>
                <span><?= number_format($sale['tax_amount'], 2) ?></span>
            </div>
            <?php endif; ?>
            <?php if ($sale['shipping_amount'] > 0): ?>
            <div class="totals-row">
                <span>Shipping:</span>
                <span><?= number_format($sale['shipping_amount'], 2) ?></span>
            </div>
            <?php endif; ?>
            <?php if ($sale['discount_amount'] > 0): ?>
            <div class="totals-row">
                <span>Discount:</span>
                <span><?= number_format($sale['discount_amount'], 2) ?></span>
            </div>
            <?php endif; ?>
            <div class="totals-row grand-total">
                <span>TOTAL:</span>
                <span><?= $currencySymbol ?><?= number_format($sale['total'], 2) ?></span>
            </div>
            <div class="totals-row">
                <span>Paid:</span>
                <span><?= $currencySymbol ?><?= number_format($sale['amount_paid'], 2) ?></span>
            </div>
            <?php if ($sale['change_due'] > 0): ?>
            <div class="totals-row">
                <span>Change:</span>
                <span><?= number_format($sale['change_due'], 2) ?></span>
            </div>
            <?php endif; ?>
        </div>

        <div class="footer">
            <div>Thank you for your business!</div>
            <div><?= e($tenant['business_name']) ?></div>
        </div>
    </div>

    <script>
        window.print();
        window.onafterprint = function() {
            window.close();
        };
    </script>
</body>
</html>
