<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($pageTitle) ?></title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js"></script>
<style>
* { box-sizing: border-box; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    margin: 0; padding: 30px 16px; background: #EEF0F5; color: #1E2430;
    -webkit-font-smoothing: antialiased;
}
.label-card {
    max-width: 380px; margin: 0 auto; background: #fff; border-radius: 14px;
    padding: 0; text-align: center; box-shadow: 0 8px 28px rgba(20,25,40,0.12); overflow: hidden;
}
.label-brand {
    background: linear-gradient(120deg, #16305C, #0E1F42); color: #fff; padding: 18px 20px 16px;
}
.label-brand h2 { font-size: 16px; margin: 0 0 2px; font-weight: 700; }
.label-brand .sub { font-size: 10.5px; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }

.label-body { padding: 22px 22px 20px; }

.qr-box { background: #F9FAFC; border: 1px solid #EDEFF3; border-radius: 10px; padding: 16px; margin-bottom: 4px; display: flex; justify-content: center; }
.qr-inner { background: #fff; padding: 10px; border-radius: 8px; }
.label-order-num { font-size: 19px; font-weight: 700; letter-spacing: 0.04em; margin: 10px 0 2px; color: #16305C; }
.label-order-tag { font-size: 10px; color: #A7ADBC; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 16px; }

.label-details { text-align: left; margin-top: 16px; }
.label-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid #F0F1F5; }
.label-row:last-child { border-bottom: none; }
.label-row span:first-child { color: #7A8194; font-weight: 500; }
.label-row strong { text-align: right; color: #1E2430; }

.label-section-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #A7ADBC; font-weight: 700; margin: 16px 0 8px; text-align: left; }
.items-list { text-align: left; }
.items-list .il-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #F0F1F5; font-size: 12px; }
.items-list .il-row:last-child { border-bottom: none; }
.items-list .il-name { flex: 1; }
.items-list .il-qty { color: #7A8194; font-weight: 700; margin-right: 5px; }
.items-list .il-price { white-space: nowrap; font-weight: 600; }

.price-breakdown { text-align: left; margin-top: 8px; padding-top: 8px; border-top: 1px solid #E7E9F0; }
.price-breakdown .pb-row { display: flex; justify-content: space-between; font-size: 12px; color: #7A8194; padding: 3px 0; }
.price-breakdown .pb-total { font-size: 14px; font-weight: 700; color: #16305C; border-top: 1px dashed #E7E9F0; margin-top: 4px; padding-top: 6px; }

.label-deliver-to {
    text-align: left; font-size: 12px; margin-top: 14px; padding: 12px 14px;
    background: #FDF3E4; border-radius: 8px; color: #4B3A1E; border-left: 3px solid #C1872E;
}
.label-deliver-to strong { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #8A611F; margin-bottom: 3px; }

.print-btn {
    display: inline-flex; align-items: center; gap: 7px; margin: 20px 0 22px; padding: 12px 26px;
    background: #1D7A8C; color: #fff; border: none; border-radius: 8px; font-weight: 700; font-size: 13.5px; cursor: pointer;
    box-shadow: 0 4px 12px rgba(29,122,140,0.25);
}
.print-btn:hover { background: #175F6E; }

@media print {
    body { background: #fff; padding: 0; margin: 0; width: 80mm; }
    .label-card { box-shadow: none; border-radius: 0; max-width: 100%; width: 100%; }
    .label-body { padding: 10px 8px 8px; }
    .label-brand { padding: 10px 8px 9px; }
    .qr-box { padding: 10px; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .label-deliver-to { background: #fff !important; border: 1px solid #ccc; border-left: 3px solid #C1872E; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .label-brand { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .no-print { display: none !important; }
    @page { size: 80mm auto; margin: 3mm; }
}
</style>
</head>
<body>

<div class="label-card">
    <div class="label-brand">
        <h2><?= e(setting('company_name', 'Rice & Curry')) ?></h2>
        <div class="sub">Order Package Label</div>
    </div>

    <div class="label-body">
        <div class="qr-box">
            <div class="qr-inner" id="rmsQrCode"></div>
        </div>
        <div class="label-order-num"><?= e($order['order_number']) ?></div>
        <div class="label-order-tag">Scan to track this order's status</div>

        <div class="label-details">
            <div class="label-row"><span>Customer</span><strong><?= e($order['customer_name'] ?? 'Walk-in') ?></strong></div>
            <?php if ($order['customer_phone']): ?>
            <div class="label-row"><span>Phone</span><strong><?= e($order['customer_phone']) ?></strong></div>
            <?php endif; ?>
            <?php if ($order['zone_name']): ?>
            <div class="label-row"><span>Zone</span><strong><?= e($order['zone_name']) ?></strong></div>
            <?php endif; ?>
            <div class="label-row"><span>Placed</span><strong><?= date('d M Y, h:i A', strtotime($order['created_at'])) ?></strong></div>
        </div>

        <?php if (!empty($order['items'])): ?>
        <div class="label-section-title">Items Ordered (<?= count($order['items']) ?>)</div>
        <div class="items-list">
            <?php foreach ($order['items'] as $it): ?>
            <div class="il-row">
                <span class="il-name"><span class="il-qty">×<?= (int) $it['quantity'] ?></span><?= e($it['item_name_snapshot']) ?></span>
                <span class="il-price"><?= formatMoney((float) $it['line_total']) ?></span>
            </div>
            <?php endforeach; ?>
        </div>

        <div class="price-breakdown">
            <div class="pb-row"><span>Subtotal</span><span><?= formatMoney((float) $order['subtotal']) ?></span></div>
            <?php if ((float) $order['delivery_fee'] > 0): ?>
            <div class="pb-row"><span>Delivery Fee</span><span><?= formatMoney((float) $order['delivery_fee']) ?></span></div>
            <?php else: ?>
            <div class="pb-row"><span>Delivery Fee</span><span>FREE</span></div>
            <?php endif; ?>
            <?php if ((float) $order['discount'] > 0): ?>
            <div class="pb-row"><span>Discount</span><span>-<?= formatMoney((float) $order['discount']) ?></span></div>
            <?php endif; ?>
            <div class="pb-row pb-total"><span>Total</span><span><?= formatMoney((float) $order['total_amount']) ?></span></div>
        </div>
        <?php endif; ?>

        <?php if ($order['delivery_address']): ?>
        <div class="label-deliver-to">
            <strong><i class="fa-solid fa-location-dot"></i> Deliver To</strong>
            <?= nl2br(e($order['delivery_address'])) ?>
        </div>
        <?php endif; ?>

        <button class="print-btn no-print" onclick="window.print()"><i class="fa-solid fa-print"></i> Print Label</button>
    </div>
</div>

<script>
try {
    if (typeof QRCode === 'function') {
        new QRCode(document.getElementById("rmsQrCode"), {
            text: "<?= e(setting('public_base_url') ?: BASE_URL) ?>/track?order=<?= e($order['order_number']) ?>",
            width: 140,
            height: 140,
            correctLevel: QRCode.CorrectLevel.H
        });
    } else {
        console.error('QRCode library failed to load');
        document.getElementById('rmsQrCode').innerHTML = '<div style="font-size:11px;color:#B23A3A;padding:10px;">QR code unavailable (library failed to load)</div>';
    }
} catch (e) {
    console.error('QR render error:', e);
}

<?php if (($_GET['autoprint'] ?? '') === '1'): ?>
// Opened right after the order became READY — auto-trigger print once the QR has rendered.
setTimeout(function () { window.print(); }, 500);
<?php endif; ?>
</script>

</body>
</html>
