<style>
.inv-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #f97316; }
.inv-logo   { font-size:22px;font-weight:800;color:#f97316; }
.inv-title  { text-align:right; }
.inv-title h2 { font-size:24px;font-weight:800;color:#222;letter-spacing:1px; }
.inv-title .inv-num { color:#888;font-size:12px; }
.inv-meta   { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px; }
.meta-box   { padding:12px 16px;border:1px solid #eee;border-radius:8px; }
.meta-box label { font-size:10px;text-transform:uppercase;color:#888;font-weight:700;letter-spacing:.5px; }
.meta-box p { margin:2px 0 0;font-weight:600;font-size:13px; }
.inv-table  { width:100%;border-collapse:collapse;margin-bottom:16px; }
.inv-table th { background:#f8f9fa;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#666;padding:8px 10px;text-align:left;border-bottom:2px solid #dee2e6; }
.inv-table td { padding:8px 10px;border-bottom:1px solid #f0f0f0;font-size:13px; }
.inv-table tfoot td { font-weight:700;border-bottom:none;padding:6px 10px; }
.inv-table .tr-total td { border-top:2px solid #dee2e6;font-size:15px;color:#f97316; }
.inv-footer { margin-top:24px;padding-top:16px;border-top:1px solid #eee;text-align:center;font-size:11px;color:#aaa; }
</style>

<!-- Invoice Header -->
<div class="inv-header">
    <div style="display:flex;align-items:center;gap:10px;">
        <?php if (!empty($settings['restaurant_logo'])): ?>
        <img src="<?= e(upload_url($settings['restaurant_logo'])) ?>" alt="Logo"
             style="width:52px;height:52px;border-radius:50%;object-fit:cover;flex-shrink:0;">
        <?php endif; ?>
        <div>
        <div class="inv-logo"><?= e($settings['restaurant_name'] ?? APP_NAME) ?></div>
        <?php if (!empty($settings['address'])): ?>
        <div style="font-size:11px;color:#888;margin-top:4px;"><?= e($settings['address']) ?></div>
        <?php endif; ?>
        <?php if (!empty($settings['phone'])): ?>
        <div style="font-size:11px;color:#888;"><?= e($settings['phone']) ?></div>
        <?php endif; ?>
        </div><!-- /text -->
    </div>
    <div class="inv-title">
        <h2>INVOICE</h2>
        <div class="inv-num"># <?= e($invoiceNumber) ?></div>
    </div>
</div>

<!-- Order + Customer meta -->
<div class="inv-meta">
    <div class="meta-box">
        <label>Bill To</label>
        <p><?= e($order['customer_name']) ?></p>
        <?php if ($order['customer_phone']): ?><p style="font-weight:400;font-size:12px;"><?= e($order['customer_phone']) ?></p><?php endif; ?>
        <?php if ($order['delivery_address']): ?><p style="font-weight:400;font-size:11px;color:#888;"><?= e($order['delivery_address']) ?></p><?php endif; ?>
    </div>
    <div class="meta-box">
        <label>Order Details</label>
        <p><?= e($order['order_number']) ?></p>
        <p style="font-weight:400;font-size:12px;">Date: <?= date('d M Y, h:i A', strtotime($order['placed_at'])) ?></p>
        <p style="font-weight:400;font-size:12px;">Type: <?= ucfirst($order['order_type'] ?? 'delivery') ?></p>
        <p style="font-weight:400;font-size:12px;">Payment: <?= ucfirst($order['payment_method'] ?? 'COD') ?></p>
    </div>
</div>

<!-- Items table -->
<table class="inv-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Item</th>
            <th>Choices</th>
            <th style="text-align:center;">Qty</th>
            <th style="text-align:right;">Unit Price</th>
            <th style="text-align:right;">Total</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($items as $i => $item): ?>
        <tr>
            <td><?= $i + 1 ?></td>
            <td><?= e($item['item_name']) ?></td>
            <td style="font-size:11px;color:#888;"><?= e($item['choices_detail'] ?? '') ?></td>
            <td style="text-align:center;"><?= $item['quantity'] ?></td>
            <td style="text-align:right;"><?= money((float)$item['unit_price']) ?></td>
            <td style="text-align:right;"><?= money((float)$item['subtotal']) ?></td>
        </tr>
        <?php endforeach; ?>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="5" style="text-align:right;">Subtotal</td>
            <td style="text-align:right;"><?= money((float)$order['subtotal']) ?></td>
        </tr>
        <?php if ($order['discount_amount'] > 0): ?>
        <tr>
            <td colspan="5" style="text-align:right;color:#28a745;">Discount <?= $order['voucher_code'] ? '('.$order['voucher_code'].')':'' ?></td>
            <td style="text-align:right;color:#28a745;">-<?= money((float)$order['discount_amount']) ?></td>
        </tr>
        <?php endif; ?>
        <?php if ($order['delivery_fee'] > 0): ?>
        <tr>
            <td colspan="5" style="text-align:right;">Delivery Fee</td>
            <td style="text-align:right;"><?= money((float)$order['delivery_fee']) ?></td>
        </tr>
        <?php endif; ?>
        <?php if ($order['tax_amount'] > 0): ?>
        <tr>
            <td colspan="5" style="text-align:right;">Tax</td>
            <td style="text-align:right;"><?= money((float)$order['tax_amount']) ?></td>
        </tr>
        <?php endif; ?>
        <tr class="tr-total">
            <td colspan="5" style="text-align:right;">TOTAL</td>
            <td style="text-align:right;"><?= money((float)$order['total_amount']) ?></td>
        </tr>
    </tfoot>
</table>

<?php if ($order['special_instructions']): ?>
<div style="padding:10px 14px;background:#fff8e1;border-radius:6px;font-size:12px;margin-bottom:12px;">
    <strong>Special Instructions:</strong> <?= e($order['special_instructions']) ?>
</div>
<?php endif; ?>

<div class="inv-footer">
    <p>Thank you for your order! We hope to serve you again.</p>
    <?php if (!empty($settings['website'])): ?><p><?= e($settings['website']) ?></p><?php endif; ?>
    <p style="margin-top:4px;">Generated on <?= date('d M Y H:i') ?></p>
</div>
