<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice INV-0043 - CodexCube</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        
        @media print {
            body {
                background-color: white;
            }
            .no-print {
                display: none !important;
            }
            .page-container {
                box-shadow: none !important;
                margin: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
            }
        }
    </style>
</head>
<body class="p-4 md:p-8 min-h-screen flex flex-col items-center">

    <!-- Action Bar -->
    <div class="w-full max-w-[850px] flex justify-end mb-6 no-print gap-3">
        <button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg shadow transition flex items-center gap-2 font-medium">
            <i class="fas fa-print"></i> Print Invoice
        </button>
    </div>

    <!-- Invoice Container (A4 Ratio) -->
    <div class="page-container bg-white w-full max-w-[850px] shadow-lg rounded-sm p-8 md:p-12 relative text-sm text-gray-700 flex flex-col justify-between min-h-[1100px] overflow-hidden">
        
        <!-- WATERMARK (Auto-updates based on Status) -->
        <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
            <div id="watermark-text" class="transform -rotate-45 border-[10px] text-[8rem] md:text-[10rem] font-bold opacity-[0.08] uppercase tracking-widest p-4 rounded-xl select-none leading-none">
                UNPAID
            </div>
        </div>

        <!-- CONTENT WRAPPER -->
        <div class="relative z-10">
            <!-- HEADER IMAGE SECTION -->
            <!-- Replace 'src' with your actual header image file path or URL -->
            <div class="w-full mb-8">
                <img src="https://placehold.co/800x150/f3f4f6/9ca3af?text=Header+Image+(Replace+Me)" 
                     alt="Header Banner" 
                     class="w-full h-auto object-contain max-h-40">
            </div>

            <!-- Invoice Info Grid -->
            <div class="flex flex-col md:flex-row justify-between items-start mb-10 gap-8">
                
                <!-- Bill To Section (Left) -->
                <div class="text-gray-800 flex-1">
                    <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">Invoiced To</h3>
                    <h4 class="text-lg font-bold text-blue-900 mb-1">BP HOLDING</h4>
                    <div class="grid grid-cols-1 gap-y-1 text-sm">
                        <p><span class="text-gray-500 w-24 inline-block">To:</span> Mr. Qambar Ali</p>
                        <p><span class="text-gray-500 w-24 inline-block">Tax nr:</span> BE0535944103</p>
                        <p><span class="text-gray-500 w-24 inline-block">Address:</span> Rue de la Concorde 66</p>
                        <p><span class="text-gray-500 w-24 inline-block">Postal:</span> 1050</p>
                        <p><span class="text-gray-500 w-24 inline-block">City:</span> Ixelles</p>
                        <p><span class="text-gray-500 w-24 inline-block">Email:</span> info@bpholding.be</p>
                        <p><span class="text-gray-500 w-24 inline-block">Phone:</span> 0032479112233</p>
                    </div>
                </div>

                <!-- Invoice Meta Data (Right) -->
                <div class="text-right flex-1">
                    <h2 class="text-xl font-bold text-gray-800 mb-1">INVOICE #</h2>
                    <p class="text-lg text-gray-600 mb-4">INV-0043</p>

                    <div class="space-y-2 inline-block text-left min-w-[200px]">
                        <div class="flex justify-between items-center gap-4">
                            <span class="font-medium text-gray-500">Status</span>
                            <!-- Change 'Unpaid' to 'Paid' here to test auto-watermark -->
                            <span id="invoice-status" class="px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide bg-red-100 text-red-500">Unpaid</span>
                        </div>
                        <div class="flex justify-between gap-4">
                            <span class="font-medium text-gray-500">Invoice Date</span>
                            <span class="font-semibold text-gray-800">2026-01-05</span>
                        </div>
                        <div class="flex justify-between gap-4">
                            <span class="font-medium text-gray-500">Due Date</span>
                            <span class="font-semibold text-gray-800">2026-01-10</span>
                        </div>
                        <div class="flex justify-between gap-4 mt-2 bg-gray-50 p-2 rounded">
                            <span class="font-medium text-gray-500 self-center">Amount Due</span>
                            <span class="text-xl font-bold text-gray-900">$ 950</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Table -->
            <div class="mb-8">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead>
                            <tr class="bg-gray-100 text-gray-600 text-xs uppercase tracking-wider">
                                <th class="py-3 px-4 font-bold rounded-l-md w-1/2">Description</th>
                                <th class="py-3 px-4 font-bold text-right">Price</th>
                                <th class="py-3 px-4 font-bold text-center">Qty</th>
                                <th class="py-3 px-4 font-bold text-right rounded-r-md">Total</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <!-- Item Row -->
                            <tr class="text-gray-800">
                                <td class="py-4 px-4 align-top">
                                    <p class="font-bold text-gray-900 mb-2">ZiscoERP Customization</p>
                                    <ul class="list-disc pl-4 text-gray-500 text-xs space-y-1 leading-relaxed">
                                        <li>Allow self-modification of the shared package list, prices, and information; fixed packages are unacceptable.</li>
                                        <li>Organize package options by category (e.g., restaurant, ticket event) and subcategories for client clarity.</li>
                                        <li>Every package option must include a system-generated, delayed license that can be revoked for non-payment.</li>
                                        <li>New companies/sales must have full access to manage their logo, items, stock, existing PO options, and any assigned packages.</li>
                                    </ul>
                                </td>
                                <td class="py-4 px-4 text-right align-top font-medium">$ 950</td>
                                <td class="py-4 px-4 text-center align-top font-medium">1</td>
                                <td class="py-4 px-4 text-right align-top font-bold text-gray-900">$ 950</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Totals Section -->
            <div class="flex flex-col md:flex-row justify-end mb-8">
                <div class="w-full md:w-1/3 space-y-3">
                    <div class="flex justify-between text-gray-600 border-b border-gray-100 pb-2">
                        <span>Sub Total</span>
                        <span class="font-semibold">$ 950</span>
                    </div>
                    <div class="flex justify-between text-gray-600 border-b border-gray-100 pb-2">
                        <span>Discount</span>
                        <span>$ 0</span>
                    </div>
                    <div class="flex justify-between text-gray-600 border-b border-gray-100 pb-2">
                        <span>Paid</span>
                        <span>$ 0</span>
                    </div>
                    <div class="flex justify-between text-gray-900 text-lg font-bold pt-2">
                        <span>Grand Total</span>
                        <span class="text-blue-600">$ 950</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- FOOTER IMAGE SECTION -->
        <!-- Replace 'src' with your actual footer image file path or URL -->
        <div class="w-full mt-auto relative z-10">
             <img src="https://placehold.co/800x150/f3f4f6/9ca3af?text=Footer+Image+(Replace+Me)" 
                  alt="Footer Banner" 
                  class="w-full h-auto object-contain max-h-40">
        </div>
        
    </div>

    <script>
        // Vanilla JS to sync watermark with status
        document.addEventListener('DOMContentLoaded', function() {
            const statusEl = document.getElementById('invoice-status');
            const watermarkEl = document.getElementById('watermark-text');

            function updateWatermark() {
                const statusText = statusEl.innerText.trim().toLowerCase();
                
                if (statusText === 'paid') {
                    watermarkEl.innerText = 'PAID';
                    watermarkEl.className = watermarkEl.className.replace(/border-red-500|text-red-500/g, '') + ' border-green-600 text-green-600';
                    statusEl.className = 'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide bg-green-100 text-green-600';
                } else if (statusText === 'unpaid') {
                    watermarkEl.innerText = 'UNPAID';
                    watermarkEl.className = watermarkEl.className.replace(/border-green-600|text-green-600/g, '') + ' border-red-500 text-red-500';
                    statusEl.className = 'px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide bg-red-100 text-red-500';
                } else {
                    watermarkEl.style.display = 'none';
                }
            }

            // Initial check
            updateWatermark();
        });
    </script>

</body>
</html>
