<?php
$invoice_id = isset($_GET['invoice_id']) ? htmlspecialchars($_GET['invoice_id'], ENT_QUOTES) : '';
if (empty($invoice_id)) {
    die("<div style='text-align:center; padding:50px; font-family:sans-serif;'><h2>Invalid Request</h2><p>No Invoice ID provided.</p></div>");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Receipt - <?php echo $invoice_id; ?></title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    
    <style>
        :root { --theme-color: #000; }
        
        /* Universal Fluid Design for Cross-Hardware Compatibility */
        body { background-color: #f1f5f9; font-family: 'Inter', sans-serif; color: #000; margin: 0; padding: 0; font-size: 14px; }
        
        .receipt-container { width: 100%; max-width: 800px; margin: 20px auto; background: #fff; padding: 30px; box-sizing: border-box; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); position: relative; }
        
        .hospital-header { text-align: center; margin-bottom: 20px; border-bottom: 1px dashed #000; padding-bottom: 15px;}
        .hospital-name { font-weight: 800; font-size: 1.6em; margin-bottom: 5px; color: var(--theme-color); text-transform: uppercase; }
        .hospital-details { font-size: 0.85em; font-weight: 500; line-height: 1.4; }
        
        .receipt-title { text-align: center; font-weight: 800; font-size: 1.2em; letter-spacing: 1px; margin-bottom: 20px; text-transform: uppercase; }
        
        .meta-box { display: flex; flex-wrap: wrap; gap: 10px; border-bottom: 1px dashed #000; padding-bottom: 15px; margin-bottom: 15px; }
        .meta-item { flex: 1 1 45%; min-width: 140px; }
        .meta-label { font-size: 0.75em; font-weight: 800; text-transform: uppercase; margin-bottom: 2px; display: block; color: #64748b;}
        .meta-value { font-size: 0.95em; font-weight: 700; }
        
        .table-receipt { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
        .table-receipt th { text-align: left; font-weight: 800; font-size: 0.75em; text-transform: uppercase; padding: 8px 5px; border-bottom: 1px solid #000; }
        .table-receipt td { padding: 8px 5px; font-size: 0.9em; font-weight: 600; border-bottom: 1px dashed #ccc; vertical-align: top; }
        .text-right { text-align: right !important; }
        .text-center { text-align: center !important; }
        
        .totals-box { border-top: 1px solid #000; padding-top: 10px; margin-left: auto; width: 100%; max-width: 300px; }
        .totals-row { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 0.95em; font-weight: 700; }
        .totals-row.grand-total { font-size: 1.2em; font-weight: 800; margin-top: 5px; border-top: 1px dashed #000; padding-top: 5px; }
        
        .footer-note { text-align: center; margin-top: 30px; font-size: 0.8em; font-weight: 600; font-style: italic; }

        #loader_overlay { position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); z-index: 100; display:flex; flex-direction:column; align-items:center; justify-content:center; }
        .btn-print { background: #0284c7; color: #fff; padding: 10px 20px; font-weight: bold; border-radius: 5px; border: none; cursor: pointer; display: inline-block; }

        /* =========================================================
           UNIVERSAL PRINT STYLES (Triggers automatically via OS)
           Detects Thermal 58mm, 80mm, and Standard A4 dynamically
           ========================================================= */
        @page { size: auto; margin: 3mm; }
        
        @media print {
            body { background: #fff; font-size: 12px; }
            .receipt-container { margin: 0; padding: 0; box-shadow: none; border: none; width: 100%; max-width: 100%; }
            .no-print { display: none !important; }
            .meta-label { color: #000 !important; }
            * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; color: #000 !important; }
            
            /* If OS detects thermal paper (width less than 100mm) */
            @media (max-width: 100mm) {
                body { font-size: 11px; }
                .hide-thermal { display: none !important; }
                .totals-box { max-width: 100%; }
                .hospital-name { font-size: 1.4em; }
                .meta-item { flex: 1 1 100%; margin-bottom: 5px; }
                .meta-box { flex-direction: column; gap: 5px; }
            }
        }
    </style>
</head>
<body>

<div class="receipt-container" id="printable_area">
    <!-- Loading Overlay -->
    <div id="loader_overlay">
        <h3 style="margin-bottom:10px;">Loading Receipt Data...</h3>
        <p>Connecting to database engine</p>
    </div>

    <!-- Print Actions -->
    <div class="no-print" style="text-align: right; margin-bottom: 20px; border-bottom: 1px dashed #ccc; padding-bottom: 15px;">
        <button class="btn-print" onclick="window.print()"><i class="fa-solid fa-print"></i> Print Receipt</button>
    </div>

    <!-- Dynamic Hospital Header -->
    <div class="hospital-header">
        <div class="hospital-name" id="ui_hosp_name">Loading...</div>
        <div class="hospital-details">
            <span id="ui_hosp_address"></span><br>
            <span id="ui_hosp_email"></span> | <span id="ui_hosp_phone"></span>
        </div>
    </div>

    <div class="receipt-title">Official Receipt</div>

    <!-- Dynamic Meta Data -->
    <div class="meta-box">
        <div class="meta-item">
            <span class="meta-label">Invoice Ref</span>
            <span class="meta-value" id="ui_inv_no">---</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Date & Time</span>
            <span class="meta-value" id="ui_inv_date">---</span>
        </div>
        <div class="meta-item">
            <span class="meta-label">Patient Name</span>
            <span class="meta-value" id="ui_pat_name">---</span>
        </div>
        <div class="meta-item hide-thermal">
            <span class="meta-label">Patient ID</span>
            <span class="meta-value" id="ui_pat_id">---</span>
        </div>
        <div class="meta-item hide-thermal">
            <span class="meta-label">Department</span>
            <span class="meta-value" id="ui_inv_dept">---</span>
        </div>
    </div>

    <!-- Dynamic Line Items -->
    <table class="table-receipt">
        <thead>
            <tr>
                <th width="50%">Description</th>
                <th width="15%" class="text-center hide-thermal">Qty</th>
                <th width="15%" class="text-right hide-thermal">Price</th>
                <th width="20%" class="text-right">Total</th>
            </tr>
        </thead>
        <tbody id="ui_items_tbody">
            <!-- Items injected by JS -->
        </tbody>
    </table>

    <!-- Financial Totals -->
    <div class="totals-box">
        <div class="totals-row">
            <span>Subtotal:</span>
            <span id="ui_tot_billed">---</span>
        </div>
        <div class="totals-row">
            <span>Amount Paid:</span>
            <span id="ui_tot_paid">---</span>
        </div>
        <div class="totals-row grand-total">
            <span>Balance Due:</span>
            <span id="ui_tot_bal">---</span>
        </div>
    </div>

    <!-- Dynamic Payments Ledger -->
    <div id="payment_history_section" style="display:none; margin-top: 20px;">
        <div style="font-weight:800; font-size:0.8em; margin-bottom:5px; text-transform:uppercase;">Payment History</div>
        <table class="table-receipt" style="font-size:0.85em;">
            <tbody id="ui_payments_tbody"></tbody>
        </table>
    </div>

    <div class="footer-note">
        <p style="margin-bottom:2px;">Served by: <span id="ui_served_by">System</span></p>
        <p style="margin:0;">Thank you for trusting <span id="ui_footer_hosp">us</span> with your health.</p>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    const TARGET_INVOICE_ID = "<?php echo $invoice_id; ?>";
</script>
<script src="/rimax/application/assets/js/printPayment.js?v=<?php echo time(); ?>"></script>

</body>
</html>