<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Invoice #<?= e($sale['sale_no']) ?></title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Arial', sans-serif; font-size: 16px; line-height: 1.5; color: #333; }
        .invoice-container { max-width: 210mm; margin: 0 auto; padding: 20mm; background: white; }
        .header { display: flex; justify-content: space-between; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 20px; }
        .company-info h1 { font-size: 32px; font-weight: bold; margin-bottom: 5px; }
        .company-info p { margin-bottom: 3px; }
        .invoice-info { text-align: right; }
        .invoice-info h2 { font-size: 28px; margin-bottom: 10px; }
        .invoice-info p { margin-bottom: 3px; }
        .customer-info { margin-bottom: 20px; }
        .customer-info h3 { font-size: 18px; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
        .customer-info p { margin-bottom: 3px; }
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .items-table th { background: #f5f5f5; padding: 10px; text-align: left; border-bottom: 2px solid #333; font-weight: bold; font-size: 16px; }
        .items-table td { padding: 10px; border-bottom: 1px solid #ddd; font-size: 16px; }
        .items-table small { font-size: 14px; }
        .items-table .text-right { text-align: right; }
        .items-table .text-center { text-align: center; }
        .totals { margin-left: auto; width: 340px; }
        .totals-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #ddd; }
        .totals-row.grand-total { font-weight: bold; font-size: 20px; border-top: 2px solid #333; border-bottom: none; margin-top: 10px; padding-top: 15px; }
        .footer { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd; text-align: center; color: #666; font-size: 15px; }
        .status { display: inline-block; padding: 4px 12px; border-radius: 4px; font-size: 13px; font-weight: bold; }
        .status.paid { background: #d4edda; color: #155724; }
        .status.partial { background: #cce5ff; color: #004085; }
        .status.pending { background: #f8d7da; color: #721c24; }
        @media print {
            body { background: white; }
            .invoice-container { margin: 0; padding: 0; max-width: none; }
        }
    </style>
</head>
<body>
    <div class="invoice-container">
        <div class="header">
            <div class="company-info">
                <h1><?= e($tenant['business_name'] ?? 'Your Company') ?></h1>
                <p><?= e($tenant['business_address'] ?? '') ?></p>
                <p><?= e($tenant['business_phone'] ?? '') ?></p>
                <p><?= e($tenant['business_email'] ?? '') ?></p>
            </div>
            <div class="invoice-info">
                <h2>INVOICE</h2>
                <p><strong>Invoice #:</strong> <?= e($sale['sale_no']) ?></p>
                <p><strong>Date:</strong> <?= date('F j, Y', strtotime($sale['created_at'])) ?></p>
                <p><strong>Location:</strong> <?= e($location['name'] ?? 'N/A') ?></p>
                <p><strong>Status:</strong> 
                    <span class="status <?= $sale['payment_status'] ?>">
                        <?= strtoupper($sale['payment_status']) ?>
                    </span>
                </p>
            </div>
        </div>
        
        <?php if ($customer): ?>
        <div class="customer-info">
            <h3>Bill To:</h3>
            <p><strong><?= e($customer['name']) ?></strong></p>
            <p><?= e($customer['address'] ?? '') ?></p>
            <p><?= e($customer['phone'] ?? '') ?></p>
            <p><?= e($customer['email'] ?? '') ?></p>
        </div>
        <?php else: ?>
        <div class="customer-info">
            <h3>Bill To:</h3>
            <p><strong>Walk-in Customer</strong></p>
        </div>
        <?php endif; ?>
        
        <table class="items-table">
            <thead>
                <tr>
                    <th style="width: 50px;">#</th>
                    <th>Product</th>
                    <th style="width: 80px;">Quantity</th>
                    <th style="width: 100px;">Unit Price</th>
                    <th style="width: 100px;">Discount</th>
                    <th style="width: 100px;" class="text-right">Total</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($sale['items'] as $index => $item): ?>
                <tr>
                    <td><?= $index + 1 ?></td>
                    <td>
                        <strong><?= e($item['product_name']) ?></strong>
                        <?php if (!empty($item['sku'])): ?>
                        <br><small><?= e($item['sku']) ?></small>
                        <?php endif; ?>
                    </td>
                    <td><?= number_format($item['quantity'], 2) ?> <?= e($item['unit'] ?? '') ?></td>
                    <td><?= number_format($item['unit_price'], 2) ?></td>
                    <td><?= number_format($item['discount'] ?? 0, 2) ?></td>
                    <td class="text-right"><?= number_format($item['quantity'] * $item['unit_price'] - ($item['discount'] ?? 0), 2) ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
        
        <div class="totals">
            <div class="totals-row">
                <span>Subtotal:</span>
                <span><?= number_format($sale['subtotal'], 2) ?></span>
            </div>
            <?php if ($sale['discount_amount'] > 0): ?>
            <div class="totals-row">
                <span>Discount:</span>
                <span>-<?= number_format($sale['discount_amount'], 2) ?></span>
            </div>
            <?php endif; ?>
            <?php if ($sale['tax_amount'] > 0): ?>
            <div class="totals-row">
                <span>Tax:</span>
                <span><?= number_format($sale['tax_amount'], 2) ?></span>
            </div>
            <?php endif; ?>
            <div class="totals-row grand-total">
                <span>Total:</span>
                <span><?= number_format($sale['total'], 2) ?></span>
            </div>
            <?php $paidAmount = $sale['paid_amount'] ?? $sale['amount_paid'] ?? 0; ?>
            <?php if ($paidAmount > 0): ?>
            <div class="totals-row">
                <span>Paid:</span>
                <span><?= number_format($paidAmount, 2) ?></span>
            </div>
            <?php endif; ?>
            <?php $dueAmount = $sale['total'] - $paidAmount; ?>
            <?php if ($dueAmount > 0): ?>
            <div class="totals-row" style="font-weight: bold; color: #dc3545;">
                <span>Balance Due:</span>
                <span><?= number_format($dueAmount, 2) ?></span>
            </div>
            <?php endif; ?>
        </div>
        
        <?php if (!empty($sale['notes'])): ?>
        <div style="margin-top: 20px; padding: 15px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 4px;">
            <strong>Notes:</strong>
            <p style="margin-top: 5px;"><?= e($sale['notes']) ?></p>
        </div>
        <?php endif; ?>
        
        <div class="footer">
            <p>Thank you for your business!</p>
            <p>Generated on <?= date('F j, Y g:i A') ?></p>
        </div>
    </div>
    
    <script>
        window.onload = function() {
            window.print();
        };
    </script>
</body>
</html>
