38471-vm/pages/sales_purchases_print_view.php

    <style>
        @media print {
            .no-print, .sidebar, .topbar, .btn, .modal-header, .modal-footer, .d-print-none, 
            .modal-backdrop { display: none !important; }
            body { background: white !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; }
            .main-content { margin: 0 !important; padding: 0 !important; background: white !important; }
            
            /* Hide all modals by default */
            .modal { display: none !important; }
            
            /* Show ONLY the active modal */
            .modal.show { 
                position: absolute !important; 
                left: 0 !important; 
                top: 0 !important; 
                margin: 0 !important; 
                padding: 0 !important; 
                overflow: visible !important; 
                display: block !important; 
                visibility: visible !important; 
                background: white !important;
                width: 100% !important;
            }
            
            .modal.show .modal-dialog { max-width: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
            .modal.show .modal-content { border: none !important; box-shadow: none !important; background: white !important; }
            .modal.show .modal-body { padding: 0 !important; margin: 0 !important; background: white !important; }
            
            @page {
                size: A4 portrait;
                margin: 5mm;
            }
            
            .invoice-printable-container {
                padding: 10px !important;
            }
            
            .mt-4 { margin-top: 1rem !important; }
            .mt-5 { margin-top: 1.5rem !important; }
            .mb-4 { margin-bottom: 1rem !important; }
            .p-5 { padding: 1.5rem !important; }
            
            .table-bordered th, .table-bordered td { border: 1px solid #dee2e6 !important; }
            .bg-light { background-color: #f8f9fa !important; -webkit-print-color-adjust: exact; }
            .text-primary { color: #0d6efd !important; -webkit-print-color-adjust: exact; }
            .badge { border: 1px solid #000; color: #000 !important; }
            
            /* Ensure the modal is the only thing visible ONLY when a modal is open */
            body.modal-open:not(.printing-receipt) { visibility: hidden !important; }
            body.modal-open:not(.printing-receipt) .modal.show { 
                visibility: visible !important; 
                display: block !important;
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 100% !important;
            }
            body.modal-open:not(.printing-receipt) .modal.show * { visibility: visible !important; }
            
            /* Old rules that caused blank pages for nested modals */
            /* body.modal-open:not(.printing-receipt) > *:not(.modal):not(.swal2-container) { display: none !important; } */
            /* body.modal-open:not(.printing-receipt) .main-content { display: none !important; } */
            
            /* POS Receipt printing specific */
            body.printing-receipt .modal { display: none !important; }
            body.printing-receipt .modal-backdrop { display: none !important; }
            body.printing-receipt #posPrintArea { 
                display: block !important; 
                visibility: visible !important;
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 100% !important;
                z-index: 9999 !important;
                background: white !important;
            }
            body.printing-receipt #posPrintArea * {
                visibility: visible !important;
            }
        }
        .invoice-logo { max-height: 80px; width: auto; }
        .invoice-header { border-bottom: 2px solid #333; padding-bottom: 20px; }
        .invoice-title { font-size: 2.5rem; color: #333; letter-spacing: 2px; }
        .invoice-info-card { background: #f8f9fa; border-radius: 8px; padding: 15px; height: 100%; }
        .table-formal thead th { background: #333; color: #fff; border: none; text-transform: uppercase; font-size: 0.85rem; }
    </style>

    <div class="modal fade" id="viewInvoiceModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content border-0 shadow">
                <div class="modal-header d-print-none">
                    <h5 class="modal-title" data-en="View Invoice" data-ar="عرض الفاتورة">View Invoice</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0" id="invoicePrintableArea">
                    <div class="p-4 invoice-printable-container">
                        <div class="invoice-header mb-4">
                            <div class="row align-items-center">
                                <div class="col-6">
                                    <?php 
                                        $logo = $data['settings']['company_logo'] ?? $_SERVER['PROJECT_IMAGE_URL'] ?? '';
                                        if ($logo): 
                                    ?>
                                        <img src="<?= htmlspecialchars($logo) ?>" alt="Logo" class="invoice-logo mb-3">
                                    <?php endif; ?>
                                    <h3 class="mb-1 fw-bold"><?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></h3>
                                    <p class="text-muted small mb-0"><?= nl2br(htmlspecialchars($data['settings']['company_address'] ?? '')) ?></p>
                                    <p class="text-muted small mb-0 fw-bold text-primary" id="invOutletName" style="display:none;"></p>
                                    <p class="text-muted small mb-0">VAT: <?= htmlspecialchars($data['settings']['vat_number'] ?? '') ?></p>
                                    <?php if (!empty($data['settings']['company_phone'])): ?>
                                        <p class="text-muted small mb-0">Tel: <?= htmlspecialchars($data['settings']['company_phone']) ?></p>
                                    <?php endif; ?>
                                </div>
                                <div class="col-6 text-end">
                                    <h1 class="invoice-title fw-bold mb-0 text-uppercase">Tax Invoice / فاتورة ضريبية</h1>
                                    <div class="mt-2"><span id="invoiceTypeLabel" class="badge"></span></div>
                                    <div class="mt-3">
                                        <p class="mb-0 fs-5">Invoice No / رقم الفاتورة: <strong id="invNumber" class="text-primary"></strong></p>
                                        <p class="mb-0">Date / التاريخ: <span id="invDate" class="fw-bold"></span></p>
                                        <p class="mb-0 small">Status / الحالة: <span id="invoiceStatusLabel"></span></p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4 g-3">
                            <div class="col-6">
                                <div class="invoice-info-card">
                                    <p class="text-muted small text-uppercase fw-bold mb-2 border-bottom pb-1" id="invPartyLabel">Bill To / فاتورة إلى</p>
                                    <h5 class="mb-1 fw-bold"><span id="invCustomerName"></span></h5>
                                    <p class="small text-muted mb-0" id="invCustomerTaxIdContainer">VAT / الضريبة: <span id="invCustomerTaxId"></span></p>
                                    <p class="small text-muted mb-0" id="invCustomerPhoneContainer">Phone / الهاتف: <span id="invCustomerPhone"></span></p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="invoice-info-card text-end">
                                    <p class="text-muted small text-uppercase fw-bold mb-2 border-bottom pb-1">Payment Details / تفاصيل الدفع</p>
                                    <p class="mb-1">Method / الطريقة: <strong id="invPaymentType"></strong></p>
                                    <p class="mb-0 small text-muted">Currency / العملة: <strong>OMR / ريال عماني</strong></p>
                                </div>
                            </div>
                        </div>

                        <table class="table table-bordered table-formal">
                            <thead>
                                <tr>
                                    <th>Item Description / وصف الصنف</th>
                                    <th class="text-center" style="width: 80px;">Qty / الكمية</th>
                                    <th class="text-end" style="width: 120px;">Unit Price / سعر الوحدة</th>
                                    <th class="text-end" style="width: 100px;">VAT % / الضريبة %</th>
                                    <th class="text-end" style="width: 150px;">Total / الإجمالي</th>
                                </tr>
                            </thead>
                            <tbody id="invItemsBody"></tbody>
                        </table>

                        <div class="row mt-4">
                            <div class="col-6">
                                <div class="p-3 bg-light rounded" style="min-height: 80px;">
                                    <p class="text-muted small text-uppercase fw-bold mb-1">Amount in Words / المبلغ بالحروف</p>
                                    <p id="invAmountInWords" class="small fw-bold mb-0"></p>
                                </div>
                                <div class="mt-3">
                                    <p class="text-muted small text-uppercase fw-bold mb-1">Terms & Conditions / الشروط والأحكام</p>
                                    <ul class="small text-muted ps-3 mb-0">
                                        <li>Goods once sold will not be taken back or exchanged.</li>
                                        <li>Payment is due within the agreed credit period.</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Subtotal (Excl. VAT) / المجموع الفرعي (دون الضريبة)</span>
                                    <span id="invSubtotal" class="fw-bold text-nowrap"></span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">VAT Amount / مبلغ الضريبة</span>
                                    <span id="invVatAmount" class="fw-bold text-nowrap"></span>
                                </div>
                                <div class="d-flex justify-content-between mb-3 border-top pt-2">
                                    <span class="h4 fw-bold">Grand Total / المجموع الكلي</span>
                                    <span id="invGrandTotal" class="h4 fw-bold text-primary text-nowrap"></span>
                                </div>
                                
                                 <div id="invPaymentsSection" class="mt-4 border-top pt-3">
                                    <p class="text-muted small text-uppercase fw-bold mb-2">Payment Tracking / تتبع الدفع</p>
                                    <table class="table table-sm table-bordered small mb-3">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Date / التاريخ</th>
                                                <th>Method / الطريقة</th>
                                                <th class="text-end">Amount / المبلغ</th>
                                            </tr>
                                        </thead>
                                        <tbody id="invPaymentsBody"></tbody>
                                    </table>
                                    <div class="bg-light p-3 rounded">
                                        <div class="d-flex justify-content-between small mb-1">
                                            <span>Paid Amount / المبلغ المدفوع</span>
                                            <span id="invPaidInfo" class="text-success fw-bold"></span>
                                        </div>
                                        <div class="d-flex justify-content-between small fw-bold">
                                            <span>Balance Due / الرصيد المتبقي</span>
                                            <span id="invBalanceInfo" class="text-danger"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top text-center">
                            <div class="row">
                                <div class="col-4">
                                    <div class="border-top pt-2 mx-auto" style="width: 150px;">
                                        <p class="small text-muted mb-0">Customer Signature / توقيع العميل</p>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div id="invQrCode" class="d-flex justify-content-center"></div>
                                </div>
                                <div class="col-4">
                                    <div class="border-top pt-2 mx-auto" style="width: 150px;">
                                        <p class="small text-muted mb-0">Authorized Signatory / التوقيع المعتمد</p>
                                    </div>
                                </div>
                            </div>
                            <p class="text-muted x-small mt-3 mb-0">Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?> | Visit us at <?= $_SERVER['HTTP_HOST'] ?></p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer d-print-none">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" data-en="Close" data-ar="إغلاق">Close</button>
                    <button type="button" class="btn btn-primary" onclick="window.print()"><i class="bi bi-printer me-2"></i>Print Invoice</button>
                </div>
            </div>
        </div>
    </div>