<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice - <?= esc($booking['invoice_ref']) ?></title>
    <link rel="stylesheet" href="<?= base_url('css/uno.css') ?>">
    <style>
        /* Ensure print-friendly layout */
        @media print {
            body { -webkit-print-color-adjust: exact; }
            .btn-print { display: none; }
        }
    </style>
</head>
<body class="font-sans bg-white p-8 md:p-12">
    <!-- Print Button (Hidden on Print) -->
    <div class="text-right mb-6 btn-print">
        <button onclick="window.print()" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark">
            Print Invoice
        </button>
    </div>

    <!-- Invoice Container -->
    <div class="max-w-4xl mx-auto">
        <!-- Header -->
        <div class="text-center mb-10">
            <h1 class="text-2xl md:text-3xl font-bold text-navy">Mount Kenya Treks & Safaris</h1>
            <p class="text-gray-600 mt-2">P.O. Box 123, Nanyuki, Kenya</p>
            <h2 class="text-xl md:text-2xl font-bold text-primary mt-4">INVOICE</h2>
            <div class="mt-3 text-gray-700 space-y-1">
                <p><strong>Invoice #:</strong> <?= esc($booking['invoice_ref']) ?></p>
                <p><strong>Date:</strong> <?= date('F j, Y') ?></p>
            </div>
        </div>

        <!-- Client & Tour Info -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
            <!-- Client -->
            <div>
                <h3 class="text-lg font-semibold text-navy mb-3">Client</h3>
                <p class="text-gray-700">
                    <?= esc($booking['client_name']) ?><br>
                    <?= esc($booking['email']) ?><br>
                    <?= esc($booking['phone']) ?>
                </p>
            </div>
            <!-- Tour Details -->
            <div>
                <h3 class="text-lg font-semibold text-navy mb-3">Tour Details</h3>
                <p class="text-gray-700">
                    <strong><?= esc($tour['title']) ?></strong><br>
                    Duration: <?= esc($tour['duration_days']) ?> days<br>
                    Travel Date: <?= esc($booking['travel_date']) ?><br>
                    Pax: <?= esc($booking['pax']) ?>
                </p>
            </div>
        </div>

        <!-- Invoice Table -->
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gray-50">
                        <th class="border border-gray-300 px-4 py-2 text-left text-gray-700 font-semibold">Description</th>
                        <th class="border border-gray-300 px-4 py-2 text-left text-gray-700 font-semibold">Qty</th>
                        <th class="border border-gray-300 px-4 py-2 text-left text-gray-700 font-semibold">Unit Price (USD)</th>
                        <th class="border border-gray-300 px-4 py-2 text-left text-gray-700 font-semibold">Total (USD)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="border border-gray-300 px-4 py-3"><?= esc($tour['title']) ?> - Full Package</td>
                        <td class="border border-gray-300 px-4 py-3"><?= esc($booking['pax']) ?></td>
                        <td class="border border-gray-300 px-4 py-3"><?= number_format($tour['price_usd'], 2) ?></td>
                        <td class="border border-gray-300 px-4 py-3"><?= number_format($booking['total_amount'], 2) ?></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="bg-gray-50 font-bold">
                        <td colspan="3" class="border border-gray-300 px-4 py-3 text-right">TOTAL DUE:</td>
                        <td class="border border-gray-300 px-4 py-3"><?= number_format($booking['total_amount'], 2) ?> USD</td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Footer Note -->
        <div class="mt-8 text-center text-gray-600">
            <p>Payment instructions will be sent separately. Thank you for choosing Mount Kenya Treks & Safaris!</p>
        </div>
    </div>
</body>
</html>