<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Helvetica', 'Arial', sans-serif; color: #1f2937; font-size: 13px; line-height: 1.5; }
        .invoice-container { max-width: 800px; margin: auto; padding: 20px; }
        
        /* Ikon Logo */
        .brand-box { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
        .icon-logo { width: 50px; height: 50px; background: #1f2937; color: #60a5fa; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
        
        .header { display: flex; justify-content: space-between; margin-bottom: 30px; border-bottom: 2px solid #f3f4f6; padding-bottom: 20px; }
        .muted { color: #6b7280; font-size: 12px; }
        .customer { margin: 20px 0; background: #f9fafb; padding: 15px; border-radius: 8px; }
        
        table { width: 100%; border-collapse: collapse; margin-top: 15px; margin-bottom: 25px; }
        th, td { border: 1px solid #e5e7eb; padding: 10px; }
        th { background: #f3f4f6; text-align: left; font-size: 12px; text-transform: uppercase; }
        .right { text-align: right; }
        .total { font-size: 14px; font-weight: bold; background: #f9fafb; }
    </style>
</head>
<body>
    <div class="invoice-container">
        <!-- Logo & Header -->
        <div class="header">
            <div>
                <div class="brand-box">
                    <div class="icon-logo"><i class="bi bi-gear-wide-connected"></i></div>
                    <strong style="font-size: 18px;">CNC SYSTEM</strong>
                </div>
                <h1>INVOICE</h1>
            </div>
            <div class="right">
                <div class="muted">No. Invoice: <strong><?= esc($invoice['nomor_invoice'] ?? '-') ?></strong></div>
                <div class="muted">No. Pesanan: <strong><?= esc($order['order_number'] ?? '-') ?></strong></div>
                <div class="muted">Tanggal dibuat: <?= esc(isset($invoice['created_at']) ? date('d-m-Y H:i', strtotime($invoice['created_at'])) : date('d-m-Y')) ?></div>
                <div class="muted">Jatuh tempo: <?= esc(isset($invoice['tanggal_jatuh_tempo']) ? date('d-m-Y', strtotime($invoice['tanggal_jatuh_tempo'])) : '-') ?></div>
                <div class="muted">Status: <strong><?= esc(strtoupper($invoice['status'] ?? 'UNPAID')) ?></strong></div>
            </div>
        </div>

        <!-- Customer -->
        <div class="customer">
            <strong>Kepada:</strong><br>
            <?= esc($order['customer_name'] ?? '-') ?><br>
            <?= esc($order['customer_phone'] ?? '-') ?><br>
            <?= esc($order['customer_email'] ?? '-') ?>
        </div>

        <!-- Items Table -->
        <table>
            <thead>
                <tr><th>Item</th><th class="right">Qty</th><th class="right">Harga</th><th class="right">Subtotal</th></tr>
            </thead>
            <tbody>
                <?php foreach ($items ?? [] as $item): ?>
                <tr>
                    <td><?= esc($item['product_name'] ?? $item['nama_product'] ?? 'Produk') ?></td>
                    <td class="right"><?= esc($item['qty'] ?? 0) ?></td>
                    <td class="right">Rp <?= number_format((float) ($item['price'] ?? $item['harga'] ?? 0), 0, ',', '.') ?></td>
                    <td class="right">Rp <?= number_format((float) ($item['subtotal'] ?? 0), 0, ',', '.') ?></td>
                </tr>
                <?php endforeach; ?>
                <tr class="total">
                    <td colspan="3" class="right">Total</td>
                    <td class="right">Rp <?= number_format((float) ($order['total'] ?? 0), 0, ',', '.') ?></td>
                </tr>
                <tr>
                    <td colspan="3" class="right">Sisa tagihan</td>
                    <td class="right">Rp <?= number_format((float) ($invoice['sisa_tagihan'] ?? $order['remaining_amount'] ?? 0), 0, ',', '.') ?></td>
                </tr>
            </tbody>
        </table>

        <!-- Payment History -->
        <?php if (!empty($payments)): ?>
            <h3>Riwayat Pembayaran</h3>
            <table>
                <thead>
                    <tr><th>Tanggal</th><th>Metode</th><th class="right">Jumlah</th><th>Status</th></tr>
                </thead>
                <tbody>
                    <?php foreach ($payments as $p): ?>
                    <tr>
                        <td><?= esc($p['tanggal_bayar']) ?></td>
                        <td><?= esc($p['nama_metode'] ?? '-') ?></td>
                        <td class="right">Rp <?= number_format((float) ($p['jumlah_bayar'] ?? 0), 0, ',', '.') ?></td>
                        <td><?= esc(strtoupper($p['status'] ?? '-')) ?></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        <?php endif; ?>

        <p class="muted" style="margin-top: 40px;">Terima kasih atas pesanan Anda.</p>
    </div>
</body>
</html>