829 lines
30 KiB
PHP
829 lines
30 KiB
PHP
|
|
<style>
|
|
@media print {
|
|
.no-print,
|
|
.sidebar,
|
|
.topbar,
|
|
.btn,
|
|
.modal-header,
|
|
.modal-footer,
|
|
.d-print-none,
|
|
.modal-backdrop {
|
|
display: none !important;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background: white !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
width: auto !important;
|
|
min-height: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
body.modal-open:not(.printing-receipt) {
|
|
visibility: hidden !important;
|
|
overflow: visible !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
body.printing-invoice {
|
|
visibility: visible !important;
|
|
overflow: visible !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
body.printing-invoice > :not(#viewInvoiceModal):not(script):not(style) {
|
|
display: none !important;
|
|
}
|
|
|
|
.main-content {
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.modal {
|
|
display: none !important;
|
|
}
|
|
|
|
.modal.show,
|
|
body.printing-invoice #viewInvoiceModal.modal.show {
|
|
position: static !important;
|
|
inset: auto !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
background: white !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.modal.show .modal-dialog {
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.modal.show .modal-content,
|
|
.modal.show .modal-body {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
background: white !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.modal.show * {
|
|
visibility: visible !important;
|
|
}
|
|
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 5mm;
|
|
}
|
|
|
|
.invoice-print-shell {
|
|
padding: 0 !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.invoice-paper,
|
|
.invoice-paper * {
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
|
|
.invoice-paper {
|
|
border: none !important;
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
background: white !important;
|
|
}
|
|
|
|
.invoice-paper-body {
|
|
padding: 10px 11px 8px !important;
|
|
}
|
|
|
|
.invoice-header {
|
|
margin-bottom: 8px !important;
|
|
padding-bottom: 8px !important;
|
|
}
|
|
|
|
.invoice-title {
|
|
font-size: 1.34rem !important;
|
|
}
|
|
|
|
.invoice-compact-grid {
|
|
gap: 6px !important;
|
|
}
|
|
|
|
.invoice-mini-card {
|
|
border-radius: 10px !important;
|
|
padding: 7px 8px !important;
|
|
}
|
|
|
|
.invoice-section-title {
|
|
margin-bottom: 0.32rem !important;
|
|
}
|
|
|
|
.invoice-party-name {
|
|
margin-bottom: 0.28rem !important;
|
|
font-size: 0.94rem !important;
|
|
}
|
|
|
|
.invoice-meta-list {
|
|
gap: 0.22rem !important;
|
|
}
|
|
|
|
.invoice-meta-line,
|
|
.invoice-note-value,
|
|
.invoice-note-text,
|
|
.invoice-summary-row {
|
|
font-size: 0.72rem !important;
|
|
line-height: 1.25 !important;
|
|
}
|
|
|
|
.invoice-mini-label {
|
|
font-size: 0.62rem !important;
|
|
margin-bottom: 0.12rem !important;
|
|
}
|
|
|
|
.invoice-note-stack {
|
|
gap: 0.42rem !important;
|
|
}
|
|
|
|
.invoice-table-wrap {
|
|
margin-top: 8px !important;
|
|
border-radius: 10px !important;
|
|
}
|
|
|
|
.table-responsive {
|
|
overflow: visible !important;
|
|
}
|
|
|
|
.table-formal thead th {
|
|
padding: 0.42rem 0.36rem !important;
|
|
font-size: 0.56rem !important;
|
|
}
|
|
|
|
.table-formal tbody td {
|
|
padding: 0.4rem 0.36rem !important;
|
|
font-size: 0.76rem !important;
|
|
}
|
|
|
|
.invoice-item-secondary {
|
|
font-size: 0.66rem !important;
|
|
margin-top: 0.05rem !important;
|
|
}
|
|
|
|
.invoice-payment-compact {
|
|
margin-top: 0.42rem !important;
|
|
padding-top: 0.42rem !important;
|
|
}
|
|
|
|
.invoice-payment-list {
|
|
gap: 0.28rem !important;
|
|
}
|
|
|
|
.invoice-payment-pill {
|
|
padding: 0.2rem 0.38rem !important;
|
|
font-size: 0.62rem !important;
|
|
}
|
|
|
|
.invoice-footer {
|
|
margin-top: 7px !important;
|
|
padding-top: 5px !important;
|
|
}
|
|
|
|
.invoice-footer-note {
|
|
font-size: 0.62rem !important;
|
|
}
|
|
}
|
|
|
|
#viewInvoiceModal .modal-dialog.invoice-print-dialog {
|
|
max-width: 920px;
|
|
margin: 1rem auto;
|
|
}
|
|
|
|
#viewInvoiceModal .modal-content {
|
|
background: transparent;
|
|
}
|
|
|
|
.invoice-print-shell {
|
|
background: linear-gradient(180deg, #eef4ff 0%, #f8fafc 100%);
|
|
padding: 1rem;
|
|
}
|
|
|
|
.invoice-paper {
|
|
background: #ffffff;
|
|
border: 1px solid #dbe5f0;
|
|
border-radius: 20px;
|
|
box-shadow: 0 28px 70px rgba(15, 23, 42, 0.08);
|
|
overflow: hidden;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-top-accent {
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #0f172a 0%, #2563eb 100%);
|
|
}
|
|
|
|
.invoice-paper-body {
|
|
padding: 1rem 1.05rem 0.95rem;
|
|
}
|
|
|
|
.invoice-header {
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding-bottom: 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.invoice-header-top {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.invoice-company {
|
|
min-width: 0;
|
|
max-width: 62%;
|
|
}
|
|
|
|
.invoice-document {
|
|
min-width: 220px;
|
|
text-align: right;
|
|
}
|
|
|
|
.invoice-logo {
|
|
display: block;
|
|
max-height: 46px;
|
|
max-width: 190px;
|
|
object-fit: contain;
|
|
margin-bottom: 0.45rem;
|
|
}
|
|
|
|
.invoice-brand-name {
|
|
font-size: 1.15rem;
|
|
font-weight: 800;
|
|
line-height: 1.2;
|
|
margin-bottom: 0.28rem;
|
|
}
|
|
|
|
.invoice-contact-line {
|
|
margin: 0;
|
|
font-size: 0.78rem;
|
|
line-height: 1.35;
|
|
color: #475569;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-contact-line + .invoice-contact-line {
|
|
margin-top: 0.16rem;
|
|
}
|
|
|
|
.invoice-contact-line--compact {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.2rem 0.65rem;
|
|
}
|
|
|
|
.invoice-eyebrow {
|
|
margin: 0 0 0.15rem;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-title {
|
|
margin: 0;
|
|
font-size: 1.7rem;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
line-height: 1.1;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-pill-group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.invoice-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 0.26rem 0.55rem;
|
|
border-radius: 999px;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.invoice-pill--sale {
|
|
background: #dbeafe;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.invoice-pill--purchase {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.invoice-pill--neutral {
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
}
|
|
|
|
.invoice-pill--paid {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.invoice-pill--unpaid {
|
|
background: #fee2e2;
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.invoice-pill--partial {
|
|
background: #fef3c7;
|
|
color: #b45309;
|
|
}
|
|
|
|
.invoice-compact-grid {
|
|
display: grid;
|
|
gap: 0.65rem;
|
|
}
|
|
|
|
.invoice-compact-grid--top {
|
|
grid-template-columns: 1.25fr 1fr 0.92fr;
|
|
}
|
|
|
|
.invoice-compact-grid--bottom {
|
|
grid-template-columns: 1.2fr 0.95fr 1fr;
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.invoice-mini-card {
|
|
min-width: 0;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
padding: 0.72rem 0.82rem;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.invoice-mini-card--summary {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.invoice-section-title {
|
|
margin: 0 0 0.45rem;
|
|
font-size: 0.6rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-party-name {
|
|
margin: 0 0 0.35rem;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
line-height: 1.25;
|
|
color: #0f172a;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-meta-list {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.invoice-meta-line {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0.65rem;
|
|
font-size: 0.82rem;
|
|
line-height: 1.3;
|
|
color: #475569;
|
|
min-width: 0;
|
|
}
|
|
|
|
.invoice-meta-line span:first-child {
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-meta-line strong {
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
text-align: right;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-status-stack {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.invoice-table-wrap {
|
|
margin-top: 0.75rem;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.table-formal {
|
|
margin: 0;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.table-formal thead th {
|
|
background: #0f172a;
|
|
color: #ffffff;
|
|
border-color: #0f172a;
|
|
padding: 0.56rem 0.5rem;
|
|
font-size: 0.62rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.table-formal tbody td {
|
|
padding: 0.58rem 0.5rem;
|
|
border-color: #e2e8f0;
|
|
vertical-align: top;
|
|
font-size: 0.83rem;
|
|
color: #1e293b;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.table-formal tbody tr:nth-child(even) {
|
|
background: #fafcff;
|
|
}
|
|
|
|
.invoice-line-no {
|
|
width: 40px;
|
|
font-weight: 700;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-item-name {
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
line-height: 1.25;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-item-secondary {
|
|
margin-top: 0.1rem;
|
|
font-size: 0.72rem;
|
|
color: #64748b;
|
|
line-height: 1.2;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-amount {
|
|
white-space: nowrap;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-note-stack {
|
|
display: grid;
|
|
gap: 0.55rem;
|
|
}
|
|
|
|
.invoice-mini-label {
|
|
margin: 0 0 0.18rem;
|
|
font-size: 0.68rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.invoice-note-value {
|
|
margin: 0;
|
|
font-size: 0.8rem;
|
|
line-height: 1.35;
|
|
color: #0f172a;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.invoice-note-text {
|
|
margin: 0;
|
|
font-size: 0.76rem;
|
|
line-height: 1.35;
|
|
color: #64748b;
|
|
}
|
|
|
|
.invoice-payment-compact {
|
|
margin-top: 0.55rem;
|
|
padding-top: 0.55rem;
|
|
border-top: 1px dashed #dbe5f0;
|
|
}
|
|
|
|
.invoice-payment-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem;
|
|
}
|
|
|
|
.invoice-payment-pill {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.28rem;
|
|
padding: 0.28rem 0.48rem;
|
|
border-radius: 999px;
|
|
background: #eff6ff;
|
|
color: #1e3a8a;
|
|
font-size: 0.68rem;
|
|
font-weight: 600;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.invoice-payment-pill--more {
|
|
background: #e2e8f0;
|
|
color: #334155;
|
|
}
|
|
|
|
.invoice-payment-sep {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.invoice-summary-list {
|
|
display: grid;
|
|
gap: 0;
|
|
}
|
|
|
|
.invoice-summary-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
padding: 0.36rem 0;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
font-size: 0.8rem;
|
|
line-height: 1.25;
|
|
color: #334155;
|
|
}
|
|
|
|
.invoice-summary-row:last-child {
|
|
border-bottom: none;
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.invoice-summary-row strong {
|
|
white-space: nowrap;
|
|
color: #0f172a;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.invoice-summary-row--strong {
|
|
color: #0f172a;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.invoice-summary-row--strong strong {
|
|
font-size: 0.95rem;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.invoice-summary-row--due strong {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.invoice-footer {
|
|
margin-top: 0.7rem;
|
|
padding-top: 0.55rem;
|
|
border-top: 1px solid #e2e8f0;
|
|
text-align: center;
|
|
}
|
|
|
|
.invoice-footer-note {
|
|
margin: 0;
|
|
font-size: 0.68rem;
|
|
color: #64748b;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.invoice-currency {
|
|
margin-inline-end: 0.18rem;
|
|
font-weight: 700;
|
|
color: #475569;
|
|
}
|
|
|
|
@media (max-width: 991.98px) {
|
|
.invoice-header-top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.invoice-company,
|
|
.invoice-document {
|
|
max-width: none;
|
|
min-width: 0;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.invoice-compact-grid--top,
|
|
.invoice-compact-grid--bottom {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="modal fade" id="viewInvoiceModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-xl invoice-print-dialog">
|
|
<div class="modal-content shadow-none border-0">
|
|
<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="invoice-print-shell">
|
|
<article class="invoice-paper invoice-printable-container">
|
|
<div class="invoice-top-accent"></div>
|
|
<div class="invoice-paper-body">
|
|
<?php
|
|
$compactCompanyAddress = trim((string) preg_replace('/\s+/', ' ', (string) ($data['settings']['company_address'] ?? '')));
|
|
$companyPhone = trim((string) ($data['settings']['company_phone'] ?? ''));
|
|
$companyEmail = trim((string) ($data['settings']['company_email'] ?? ''));
|
|
$companyVat = trim((string) ($data['settings']['vat_number'] ?? ''));
|
|
?>
|
|
<header class="invoice-header">
|
|
<div class="invoice-header-top">
|
|
<div class="invoice-company">
|
|
<?php
|
|
$logo = $data['settings']['company_logo'] ?? $_SERVER['PROJECT_IMAGE_URL'] ?? '';
|
|
if ($logo):
|
|
?>
|
|
<img src="<?= htmlspecialchars($logo) ?>" alt="<?= htmlspecialchars($data['settings']['company_name'] ?? 'Company Logo') ?>" class="invoice-logo">
|
|
<?php endif; ?>
|
|
<div class="invoice-brand-name"><?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?></div>
|
|
<?php if ($compactCompanyAddress !== ''): ?>
|
|
<p class="invoice-contact-line"><?= htmlspecialchars($compactCompanyAddress) ?></p>
|
|
<?php endif; ?>
|
|
<?php if ($companyPhone !== '' || $companyEmail !== '' || $companyVat !== ''): ?>
|
|
<p class="invoice-contact-line invoice-contact-line--compact">
|
|
<?php if ($companyPhone !== ''): ?><span>Tel: <?= htmlspecialchars($companyPhone) ?></span><?php endif; ?>
|
|
<?php if ($companyEmail !== ''): ?><span>Email: <?= htmlspecialchars($companyEmail) ?></span><?php endif; ?>
|
|
<?php if ($companyVat !== ''): ?><span>VAT: <?= htmlspecialchars($companyVat) ?></span><?php endif; ?>
|
|
</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="invoice-document">
|
|
<p id="invDocumentSubtitle" class="invoice-eyebrow">Official tax document / مستند ضريبي رسمي</p>
|
|
<h1 id="invDocumentTitle" class="invoice-title">Tax Invoice / فاتورة ضريبية</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="invoice-compact-grid invoice-compact-grid--top">
|
|
<div class="invoice-mini-card">
|
|
<p id="invPartyLabel" class="invoice-section-title">Bill To / بيانات العميل</p>
|
|
<div id="invCustomerName" class="invoice-party-name">---</div>
|
|
<div class="invoice-meta-list">
|
|
<div class="invoice-meta-line" id="invCustomerPhoneContainer" style="display: none;">
|
|
<span>Phone / الهاتف</span>
|
|
<strong id="invCustomerPhone"></strong>
|
|
</div>
|
|
<div class="invoice-meta-line" id="invCustomerTaxIdContainer" style="display: none;">
|
|
<span>VAT / الضريبة</span>
|
|
<strong id="invCustomerTaxId"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="invoice-mini-card">
|
|
<p class="invoice-section-title">Invoice Details / تفاصيل الفاتورة</p>
|
|
<div class="invoice-meta-list">
|
|
<div class="invoice-meta-line">
|
|
<span>Invoice No / رقم الفاتورة</span>
|
|
<strong id="invNumber"></strong>
|
|
</div>
|
|
<div class="invoice-meta-line">
|
|
<span>Issue Date / تاريخ الإصدار</span>
|
|
<strong id="invDate"></strong>
|
|
</div>
|
|
<div class="invoice-meta-line">
|
|
<span>Payment Method / طريقة الدفع</span>
|
|
<strong id="invPaymentTypeSummary"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="invoice-mini-card">
|
|
<p class="invoice-section-title">Status / الحالة</p>
|
|
<div class="invoice-status-stack mb-2">
|
|
<span id="invoiceTypeLabel" class="invoice-pill invoice-pill--sale">Sales Invoice</span>
|
|
<span id="invoiceStatusLabel" class="invoice-pill invoice-pill--neutral">Status</span>
|
|
</div>
|
|
<div class="invoice-meta-list">
|
|
<div class="invoice-meta-line" id="invOutletRow" style="display: none;">
|
|
<span>Outlet / الفرع</span>
|
|
<strong id="invOutletName"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="invoice-table-wrap">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-formal align-middle">
|
|
<thead>
|
|
<tr>
|
|
<th class="text-center" style="width: 42px;">#</th>
|
|
<th>Item Description / وصف الصنف</th>
|
|
<th class="text-center" style="width: 78px;">Qty / الكمية</th>
|
|
<th class="text-end" style="width: 118px;">Unit Price / سعر الوحدة</th>
|
|
<th class="text-end" style="width: 126px;">Line Total / الإجمالي</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="invItemsBody"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="invoice-compact-grid invoice-compact-grid--bottom">
|
|
<div class="invoice-mini-card">
|
|
<p class="invoice-section-title">Notes / ملاحظات</p>
|
|
<div class="invoice-note-stack">
|
|
<div>
|
|
<p class="invoice-mini-label">Amount in Words / المبلغ كتابة</p>
|
|
<p id="invAmountInWords" class="invoice-note-value">---</p>
|
|
</div>
|
|
<div>
|
|
<p class="invoice-mini-label">Terms / الشروط</p>
|
|
<p class="invoice-note-text">Goods once sold are not returnable. Please verify invoice details upon receipt.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="invoice-mini-card">
|
|
<p class="invoice-section-title">Payment / الدفع</p>
|
|
<div class="invoice-meta-list">
|
|
<div class="invoice-meta-line">
|
|
<span>Method / الطريقة</span>
|
|
<strong id="invPaymentType"></strong>
|
|
</div>
|
|
</div>
|
|
<div id="invPaymentsSection" class="invoice-payment-compact" style="display: none;">
|
|
<div id="invPaymentsBody" class="invoice-payment-list"></div>
|
|
</div>
|
|
</div>
|
|
<div class="invoice-mini-card invoice-mini-card--summary">
|
|
<p class="invoice-section-title">Summary / الملخص</p>
|
|
<div class="invoice-summary-list">
|
|
<div class="invoice-summary-row">
|
|
<span>Subtotal / المجموع</span>
|
|
<strong id="invSubtotal"></strong>
|
|
</div>
|
|
<div class="invoice-summary-row">
|
|
<span>VAT / الضريبة</span>
|
|
<strong id="invVatAmount"></strong>
|
|
</div>
|
|
<div id="invDiscountRow" class="invoice-summary-row" style="display: none;">
|
|
<span>Discount / الخصم</span>
|
|
<strong id="invDiscountAmount"></strong>
|
|
</div>
|
|
<div class="invoice-summary-row invoice-summary-row--strong">
|
|
<span>Grand Total / الإجمالي</span>
|
|
<strong id="invGrandTotal"></strong>
|
|
</div>
|
|
<div class="invoice-summary-row">
|
|
<span>Paid / المدفوع</span>
|
|
<strong id="invPaidInfo"></strong>
|
|
</div>
|
|
<div class="invoice-summary-row invoice-summary-row--due">
|
|
<span>Due / المتبقي</span>
|
|
<strong id="invBalanceInfo"></strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="invoice-footer">
|
|
<p class="invoice-footer-note">Thank you for your business · Generated by <?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?> · <?= htmlspecialchars($_SERVER['HTTP_HOST'] ?? '') ?></p>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
</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.printInvoiceDocument()"><i class="bi bi-printer me-2"></i>Print Invoice</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|