<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Invoice - <?php echo sanitize($order['order_number']); ?></title>
    <style>
        @page { margin: 10mm; }
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #333; background: #fff; }
        .invoice-container { max-width: 80mm; margin: 0 auto; padding: 10px; }
        .thermal-container { max-width: 80mm; font-family: 'Courier New', monospace; font-size: 11px; }
        .a4-container { max-width: 210mm; padding: 20mm; }
        .header { text-align: center; margin-bottom: 15px; border-bottom: 2px dashed #ccc; padding-bottom: 10px; }
        .header .logo { max-height: 60px; margin-bottom: 5px; }
        .header .restaurant-name { font-size: 18px; font-weight: 700; color: #222; }
        .header .restaurant-info { font-size: 10px; color: #666; margin-top: 3px; }
        .order-info { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 11px; }
        .order-info .order-label { color: #666; }
        .order-info .order-value { font-weight: 600; }
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
        .items-table th { text-align: left; font-size: 10px; color: #666; border-bottom: 1px solid #ddd; padding: 4px 0; text-transform: uppercase; }
        .items-table td { padding: 4px 0; font-size: 11px; border-bottom: 1px dotted #eee; vertical-align: top; }
        .items-table .item-name { font-weight: 500; }
        .items-table .item-variation { font-size: 10px; color: #888; }
        .items-table .item-addons { font-size: 9px; color: #888; font-style: italic; }
        .items-table .item-note { font-size: 9px; color: #e74c3c; font-style: italic; }
        .items-table .qty { text-align: center; width: 30px; }
        .items-table .price { text-align: right; width: 60px; }
        .items-table .total { text-align: right; width: 70px; }
        .summary { margin-top: 10px; border-top: 2px dashed #ccc; padding-top: 10px; }
        .summary .row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 11px; }
        .summary .row.total-row { border-top: 1px solid #333; margin-top: 5px; padding-top: 6px; font-weight: 700; font-size: 14px; }
        .payment-info { margin-top: 10px; padding: 8px; background: #f9f9f9; border-radius: 4px; font-size: 11px; }
        .payment-info .pay-label { color: #666; }
        .footer { margin-top: 15px; text-align: center; font-size: 10px; color: #888; border-top: 1px dashed #ccc; padding-top: 10px; }
        .footer .thank-you { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 4px; }
        .qr-code { text-align: center; margin-top: 10px; }
        .qr-code img { max-width: 80px; }
        @media print {
            body { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            .no-print { display: none !important; }
            .invoice-container { padding: 0; max-width: none; }
        }
    </style>
</head>
<body>
    <div class="invoice-container">
        <div class="header">
            <?php if (!empty($restaurant['logo'])): ?>
                <img src="<?php echo getBaseUrl(); ?>/uploads/<?php echo sanitize($restaurant['logo']); ?>" alt="Logo" class="logo">
            <?php endif; ?>
            <div class="restaurant-name"><?php echo sanitize($restaurant['name'] ?? APP_NAME); ?></div>
            <div class="restaurant-info">
                <?php if (!empty($restaurant['phone'])): ?>
                    <div>Tel: <?php echo sanitize($restaurant['phone']); ?></div>
                <?php endif; ?>
                <?php if (!empty($restaurant['email'])): ?>
                    <div>Email: <?php echo sanitize($restaurant['email']); ?></div>
                <?php endif; ?>
                <?php if (!empty($restaurant['address'])): ?>
                    <div><?php echo sanitize($restaurant['address']); ?></div>
                <?php endif; ?>
            </div>
        </div>

        <div class="order-info">
            <div>
                <div><span class="order-label">Order: </span><span class="order-value">#<?php echo sanitize($order['order_number']); ?></span></div>
                <div><span class="order-label">Type: </span><span class="order-value"><?php echo ucfirst(str_replace('_', ' ', $order['order_type'])); ?></span></div>
                <?php if (!empty($order['table_number'])): ?>
                    <div><span class="order-label">Table: </span><span class="order-value"><?php echo sanitize($order['table_number']); ?></span></div>
                <?php endif; ?>
            </div>
            <div style="text-align:right;">
                <div><span class="order-label">Date: </span><span class="order-value"><?php echo date('Y-m-d', strtotime($order['created_at'])); ?></span></div>
                <div><span class="order-label">Time: </span><span class="order-value"><?php echo date('H:i', strtotime($order['created_at'])); ?></span></div>
                <?php if (!empty($order['customer_name'])): ?>
                    <div><span class="order-label">Customer: </span><span class="order-value"><?php echo sanitize($order['customer_name']); ?></span></div>
                <?php endif; ?>
            </div>
        </div>

        <table class="items-table">
            <thead>
                <tr>
                    <th>Item</th>
                    <th class="qty">Qty</th>
                    <th class="price">Price</th>
                    <th class="total">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($order['items'] as $item): ?>
                    <tr>
                        <td>
                            <div class="item-name"><?php echo sanitize($item['item_name']); ?></div>
                            <?php if (!empty($item['variation_name'])): ?>
                                <div class="item-variation"><?php echo sanitize($item['variation_name']); ?></div>
                            <?php endif; ?>
                            <?php if (!empty($item['addons'])): ?>
                                <?php foreach ($item['addons'] as $addon): ?>
                                    <div class="item-addons">+ <?php echo sanitize($addon['addon_name']); ?></div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                            <?php if (!empty($item['item_notes'])): ?>
                                <div class="item-note"><?php echo sanitize($item['item_notes']); ?></div>
                            <?php endif; ?>
                        </td>
                        <td class="qty"><?php echo (int) $item['quantity']; ?></td>
                        <td class="price"><?php echo $currencySymbol . number_format((float) $item['unit_price'] + (float) $item['variation_price'], 2); ?></td>
                        <td class="total"><?php echo $currencySymbol . number_format((float) $item['item_total'], 2); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div class="summary">
            <div class="row">
                <span>Subtotal</span>
                <span><?php echo $currencySymbol . number_format((float) $order['subtotal'], 2); ?></span>
            </div>
            <?php if ((float) $order['discount'] > 0): ?>
                <div class="row" style="color:#27ae60;">
                    <span>Discount</span>
                    <span>-<?php echo $currencySymbol . number_format((float) $order['discount'], 2); ?></span>
                </div>
            <?php endif; ?>
            <?php if ((float) $order['tax'] > 0): ?>
                <div class="row">
                    <span>Tax</span>
                    <span><?php echo $currencySymbol . number_format((float) $order['tax'], 2); ?></span>
                </div>
            <?php endif; ?>
            <?php if ((float) $order['service_charge'] > 0): ?>
                <div class="row">
                    <span>Service Charge</span>
                    <span><?php echo $currencySymbol . number_format((float) $order['service_charge'], 2); ?></span>
                </div>
            <?php endif; ?>
            <?php if ((float) $order['delivery_charge'] > 0): ?>
                <div class="row">
                    <span>Delivery Charge</span>
                    <span><?php echo $currencySymbol . number_format((float) $order['delivery_charge'], 2); ?></span>
                </div>
            <?php endif; ?>
            <div class="row total-row">
                <span>Grand Total</span>
                <span><?php echo $currencySymbol . number_format((float) $order['grand_total'], 2); ?></span>
            </div>
        </div>

        <div class="payment-info">
            <div>
                <span class="pay-label">Payment Method: </span>
                <strong><?php echo ucfirst(str_replace('_', ' ', $order['payment_method'] ?? 'N/A')); ?></strong>
            </div>
            <div>
                <span class="pay-label">Payment Status: </span>
                <strong style="color:<?php echo $order['payment_status'] === 'paid' ? '#27ae60' : '#e74c3c'; ?>">
                    <?php echo ucfirst($order['payment_status']); ?>
                </strong>
            </div>
        </div>

        <?php if (!empty($order['order_notes'])): ?>
            <div style="margin-top:10px; padding:8px; background:#fff3cd; border-radius:4px; font-size:10px;">
                <strong>Note:</strong> <?php echo sanitize($order['order_notes']); ?>
            </div>
        <?php endif; ?>

        <div class="footer">
            <div class="thank-you">Thank you for dining with us!</div>
            <div>Order #<?php echo sanitize($order['order_number']); ?></div>
            <div><?php echo date('Y-m-d H:i', strtotime($order['created_at'])); ?></div>
            <div style="margin-top:8px; font-size:9px;">
                Powered by <?php echo sanitize(APP_NAME); ?>
            </div>
        </div>
    </div>
</body>
</html>
