<div class="page-header no-print">
    <div>
        <a href="<?= APP_URL ?>/sales" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Sales
        </a>
        <h1>Invoice #<?= e($sale['sale_no']) ?></h1>
    </div>
    <div class="flex gap-2">
        <div style="position:relative;">
            <button type="button" class="btn btn-outline" onclick="togglePrintDropdown(event)">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg>
                Print Invoice
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-left:4px;"><polyline points="6 9 12 15 18 9"></polyline></svg>
            </button>
            <div id="printDropdown" class="print-dropdown" style="position:absolute; top:100%; right:0; background:var(--bg-raised); border:1px solid var(--border); border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.15); min-width:200px; z-index:100; display:none;">
                <a href="<?= APP_URL ?>/sales/<?= $sale['id'] ?>/print/a4" class="dropdown-item" style="display:block; padding:10px 16px; text-decoration:none; color:var(--text-primary); border-bottom:1px solid var(--border);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px; vertical-align:text-bottom;"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
                    A4 Format
                </a>
                <a href="<?= APP_URL ?>/sales/<?= $sale['id'] ?>/print/pos80" class="dropdown-item" style="display:block; padding:10px 16px; text-decoration:none; color:var(--text-primary); border-bottom:1px solid var(--border);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px; vertical-align:text-bottom;"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
                    POS 80mm
                </a>
                <a href="<?= APP_URL ?>/sales/<?= $sale['id'] ?>/print/pos50" class="dropdown-item" style="display:block; padding:10px 16px; text-decoration:none; color:var(--text-primary);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px; margin-right:8px; vertical-align:text-bottom;"><rect x="4" y="4" width="16" height="16" rx="2"></rect></svg>
                    POS 50mm
                </a>
            </div>
        </div>
        <button class="btn btn-primary">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
            Email Customer
        </button>
    </div>
</div>

<style>
.print-dropdown.show { display: block !important; }

@media print {
    .no-print { display: none !important; }
    body { background: white !important; color: black !important; padding: 0 !important; }
    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; background: transparent !important; }
    .app-wrapper { display: block !important; }
    .sidebar, .topbar { display: none !important; }
    .page-content { padding: 0 !important; }
}
</style>

<script>
function togglePrintDropdown(event) {
    event.stopPropagation();
    document.getElementById('printDropdown').classList.toggle('show');
}

document.addEventListener('click', function(event) {
    if (!event.target.closest('#printDropdown') && !event.target.closest('[onclick*="togglePrintDropdown"]')) {
        document.getElementById('printDropdown').classList.remove('show');
    }
});
</script>

<div class="card" id="printable-area">
    <div style="display:flex; justify-content:space-between; margin-bottom:40px;">
        <div>
            <div style="font-size:2rem; font-weight:900; background:linear-gradient(135deg,var(--primary),var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:10px;">TellerPro</div>
            <div style="font-size:1.1rem; font-weight:700;"><?= e(Auth::tenant()['business_name']) ?></div>
            <div style="color:var(--text-muted); font-size:0.85rem; max-width:260px;">
                <?= nl2br(e(Auth::tenant()['business_address'] ?? 'No address specified')) ?><br>
                Phone: <?= e(Auth::tenant()['business_phone'] ?? 'N/A') ?>
            </div>
        </div>
        <div style="text-align:right;">
            <div style="font-size:1.4rem; font-weight:800; color:var(--text-primary);">INVOICE</div>
            <div style="margin-top:5px; font-weight:600;"><?= e($sale['sale_no']) ?></div>
            <div style="color:var(--text-muted); font-size:0.85rem; margin-top:5px;">Date: <?= date('M j, Y H:i', strtotime($sale['created_at'])) ?></div>
        </div>
    </div>

    <div style="display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:40px;">
        <div>
            <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px;">Bill To:</div>
            <div style="font-size:1.1rem; font-weight:700;"><?= e($sale['customer_name'] ?? 'Walk-in Customer') ?></div>
            <div style="color:var(--text-muted); font-size:0.85rem; margin-top:5px;">
                <?= e($sale['customer_id'] ? 'Contact ID: ' . $sale['customer_id'] : '') ?>
            </div>
        </div>
        <div style="text-align:right;">
            <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px;">Sold By:</div>
            <div style="font-size:1rem; font-weight:600;"><?= e($sale['user']['name'] ?? 'System') ?></div>
            <div style="font-size:0.75rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; margin-bottom:10px; margin-top:20px;">Payment Status:</div>
            <span class="badge <?= $sale['payment_status'] == 'paid' ? 'badge-success' : 'badge-danger' ?>" style="font-size:1rem; padding:6px 16px;">
                <?= strtoupper($sale['payment_status']) ?>
            </span>
            <div style="margin-top:10px; font-size:0.85rem; color:var(--text-muted);">Method: <?= ucfirst(e($sale['payment_method'])) ?></div>
        </div>
    </div>

    <div class="table-wrapper mb-6" style="border-radius:0; border-left:none; border-right:none;">
        <table style="width:100%;">
            <thead style="background:var(--bg-raised)">
                <tr>
                    <th style="padding:15px;">#</th>
                    <th>Product</th>
                    <th class="text-right">Unit Price</th>
                    <th class="text-center">Qty</th>
                    <th class="text-right" style="padding-right:15px;">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($sale['items'] as $idx => $item): ?>
                <tr style="border-bottom:1px solid var(--border-soft)">
                    <td style="padding:15px;"><?= $idx + 1 ?></td>
                    <td>
                        <div style="font-weight:600;"><?= e($item['product_name']) ?></div>
                        <div style="font-size:0.75rem; color:var(--text-muted)">SKU: <?= e($item['sku']) ?></div>
                    </td>
                    <td class="text-right"><?= money($item['unit_price']) ?></td>
                    <td class="text-center"><?= (float)$item['quantity'] ?> <?= e($item['unit']) ?></td>
                    <td class="text-right" style="padding-right:15px; font-weight:600;"><?= money($item['unit_price'] * $item['quantity']) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>

    <div style="display:flex; justify-content:flex-end;">
        <div style="width:300px;">
            <div class="flex justify-between py-2 items-center">
                <span class="text-muted">Subtotal</span>
                <span style="font-weight:600;"><?= money($sale['subtotal']) ?></span>
            </div>
            <div class="flex justify-between py-2 items-center">
                <span class="text-muted">Tax (<?= e(setting('tax_rate', '0%')) ?>)</span>
                <span style="font-weight:600;"><?= money($sale['tax_amount']) ?></span>
            </div>
            <div class="flex justify-between py-2 items-center">
                <span class="text-muted">Discount</span>
                <span style="font-weight:600; color:var(--danger)">-<?= money($sale['discount_amount']) ?></span>
            </div>
            <div class="flex justify-between py-4 items-center mt-2" style="border-top:2px solid var(--border); font-size:1.4rem;">
                <span style="font-weight:800;">Grand Total</span>
                <strong style="color:var(--primary-light);"><?= money($sale['total']) ?></strong>
            </div>
            <div class="flex justify-between py-2 items-center mt-2" style="font-size:1.1rem; border-top:1px dashed var(--border);">
                <span class="text-muted">Paid Amount</span>
                <span style="font-weight:700; color:var(--success);"><?= money($sale['amount_paid'] ?? $sale['paid_amount'] ?? 0) ?></span>
            </div>
            <?php if ($sale['total'] > ($sale['amount_paid'] ?? $sale['paid_amount'] ?? 0)): ?>
            <div class="flex justify-between py-2 items-center">
                <span style="color:var(--danger); font-weight:700;">Balance Due</span>
                <strong style="color:var(--danger);"><?= money($sale['total'] - ($sale['amount_paid'] ?? $sale['paid_amount'] ?? 0)) ?></strong>
            </div>
            <?php endif; ?>
        </div>
    </div>

    <div style="margin-top:60px; text-align:center; padding-top:20px; border-top:1px solid var(--border); font-size:0.85rem; color:var(--text-muted);">
        Thank you for your business! If you have any questions about this invoice, please contact us.
    </div>
</div>
