<!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;
            }
        }

        .status-badge {
            background-color: #fee2e2;
            color: #ef4444;
        }
    </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">
        
        <!-- Header Section -->
        <div class="flex flex-col md:flex-row justify-between items-start mb-12">
            <!-- Company Info -->
            <div>
                <h1 class="text-2xl font-bold text-gray-900 uppercase tracking-tight mb-1">CODEXCUBE.COM</h1>
                <p class="text-gray-500 text-xs mb-4">a complete software company</p>
                
                <div class="space-y-1 text-gray-600">
                    <p>PC Culture Housing Society Ltd. House # 10</p>
                    <p>Block #Ka, Shamoly, Dhaka-1207</p>
                    <div class="mt-3 space-y-1">
                        <p class="flex items-center gap-2"><i class="fas fa-phone-alt text-gray-400 w-4"></i> +88 01723 611125</p>
                        <p class="flex items-center gap-2"><i class="fas fa-envelope text-gray-400 w-4"></i> codexcube.com@gmail.com</p>
                        <p class="flex items-center gap-2"><i class="fab fa-facebook text-gray-400 w-4"></i> coderitems</p>
                    </div>
                </div>
            </div>

            <!-- Invoice Meta Data -->
            <div class="mt-8 md:mt-0 text-right">
                <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">
                    <div class="flex justify-between md:justify-end gap-8 items-center">
                        <span class="font-medium text-gray-500">Status</span>
                        <span class="status-badge px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wide">Unpaid</span>
                    </div>
                    <div class="flex justify-between md:justify-end gap-8">
                        <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 md:justify-end gap-8">
                        <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 md:justify-end gap-8 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>

        <hr class="border-gray-200 mb-8">

        <!-- Bill To Section -->
        <div class="mb-10">
            <h3 class="text-xs font-bold text-gray-400 uppercase tracking-wider mb-3">Invoiced To</h3>
            <div class="text-gray-800">
                <h4 class="text-lg font-bold text-blue-900 mb-1">BP HOLDING</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1">
                    <p><span class="text-gray-500 w-20 inline-block">To:</span> Mr. Qambar Ali</p>
                    <p><span class="text-gray-500 w-20 inline-block">Tax nr:</span> BE0535944103</p>
                    <p><span class="text-gray-500 w-20 inline-block">Address:</span> Rue de la Concorde 66</p>
                    <p><span class="text-gray-500 w-20 inline-block">Postal:</span> 1050</p>
                    <p><span class="text-gray-500 w-20 inline-block">City:</span> Ixelles</p>
                    <p><span class="text-gray-500 w-20 inline-block">Phone:</span> 0032479112233</p>
                    <p class="md:col-span-2"><span class="text-gray-500 w-20 inline-block">Email:</span> info@bpholding.be</p>
                </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-12">
            <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>

        <!-- Terms Footer -->
        <div class="bg-gray-50 rounded-lg p-6 border-l-4 border-blue-500">
            <h5 class="font-bold text-gray-800 mb-2 text-sm uppercase">Terms & Conditions</h5>
            <p class="text-xs text-gray-500 leading-relaxed text-justify">
                Full payment is required upfront before the project begins. Work will commence only after payment has been received and confirmed. The project timeline is 18 calendar days and will be calculated from the payment date. If the project is not completed within the agreed 18-day period, a full refund will be issued.
            </p>
        </div>
        
    </div>

</body>
</html>
