1022 lines
41 KiB
PHP
1022 lines
41 KiB
PHP
function escapeBarcodeLabelHtml(value) {
|
|
return String(value || '')
|
|
.replace(/&/g, '&')
|
|
.replace(/</g, '<')
|
|
.replace(/>/g, '>')
|
|
.replace(/"/g, '"')
|
|
.replace(/'/g, ''');
|
|
}
|
|
|
|
function getSingleBarcodeLabelData() {
|
|
return window.currentSingleBarcodeLabel || null;
|
|
}
|
|
|
|
function getSingleBarcodePrintDimensions() {
|
|
return {
|
|
width: Math.max(parseInt(document.getElementById('barcodeWidth').value, 10) || 50, 10),
|
|
height: Math.max(parseInt(document.getElementById('barcodeHeight').value, 10) || 30, 10)
|
|
};
|
|
}
|
|
|
|
function getSingleBarcodeScale(labelWidthMm, labelHeightMm) {
|
|
if (labelWidthMm <= 32 || labelHeightMm <= 20) {
|
|
return 0.96;
|
|
}
|
|
if (labelWidthMm <= 40 || labelHeightMm <= 25) {
|
|
return 0.92;
|
|
}
|
|
if (labelWidthMm <= 50 || labelHeightMm <= 30) {
|
|
return 0.88;
|
|
}
|
|
return 0.84;
|
|
}
|
|
|
|
function getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm) {
|
|
const skuText = String(sku || '');
|
|
const skuLength = skuText.length;
|
|
const compact = labelWidthMm <= 40 || labelHeightMm <= 25;
|
|
const extraCompact = labelWidthMm <= 32 || labelHeightMm <= 20;
|
|
const showValue = !extraCompact && labelHeightMm >= 24 && skuLength <= 18;
|
|
|
|
let moduleWidth = 1.8;
|
|
if (skuLength >= 18 || labelWidthMm <= 35) {
|
|
moduleWidth = 1.1;
|
|
} else if (skuLength >= 14 || labelWidthMm <= 40) {
|
|
moduleWidth = 1.3;
|
|
} else if (labelWidthMm <= 50) {
|
|
moduleWidth = 1.6;
|
|
}
|
|
|
|
let barcodeHeight = 56;
|
|
if (labelHeightMm <= 20) {
|
|
barcodeHeight = 30;
|
|
} else if (labelHeightMm <= 25) {
|
|
barcodeHeight = 38;
|
|
} else if (labelHeightMm <= 30) {
|
|
barcodeHeight = 46;
|
|
} else if (labelHeightMm <= 35) {
|
|
barcodeHeight = 56;
|
|
} else {
|
|
barcodeHeight = 64;
|
|
}
|
|
|
|
const quietZone = extraCompact ? 4 : compact ? 6 : 10;
|
|
|
|
return {
|
|
format: "CODE128",
|
|
lineColor: "#000",
|
|
width: moduleWidth,
|
|
height: barcodeHeight,
|
|
displayValue: showValue,
|
|
fontSize: compact ? 10 : 12,
|
|
textMargin: compact ? 2 : 4,
|
|
margin: quietZone,
|
|
marginTop: 0,
|
|
marginBottom: showValue ? 2 : 0,
|
|
fontOptions: "bold"
|
|
};
|
|
}
|
|
|
|
function buildSingleBarcodeNameHtml(nameAr, nameEn) {
|
|
const lines = [];
|
|
if (nameAr) {
|
|
lines.push('<div class="label-name-ar">' + escapeBarcodeLabelHtml(nameAr) + '</div>');
|
|
}
|
|
if (nameEn) {
|
|
lines.push('<div class="label-name-en">' + escapeBarcodeLabelHtml(nameEn) + '</div>');
|
|
}
|
|
return lines.join('');
|
|
}
|
|
|
|
function applyBarcodePreviewNameStyles(container, compact) {
|
|
if (!container) {
|
|
return;
|
|
}
|
|
|
|
const arabicLine = container.querySelector('.label-name-ar');
|
|
const englishLine = container.querySelector('.label-name-en');
|
|
|
|
container.style.width = '100%';
|
|
container.style.maxWidth = '100%';
|
|
container.style.lineHeight = '1';
|
|
container.style.marginBottom = '0';
|
|
|
|
if (arabicLine) {
|
|
arabicLine.style.display = 'block';
|
|
arabicLine.style.fontWeight = '700';
|
|
arabicLine.style.fontSize = compact ? '1.04rem' : '1.16rem';
|
|
arabicLine.style.direction = 'rtl';
|
|
arabicLine.style.whiteSpace = 'nowrap';
|
|
arabicLine.style.overflow = 'hidden';
|
|
arabicLine.style.textOverflow = 'ellipsis';
|
|
}
|
|
|
|
if (englishLine) {
|
|
englishLine.style.display = 'block';
|
|
englishLine.style.fontWeight = '600';
|
|
englishLine.style.fontSize = compact ? '0.90rem' : '0.99rem';
|
|
englishLine.style.whiteSpace = 'nowrap';
|
|
englishLine.style.overflow = 'hidden';
|
|
englishLine.style.textOverflow = 'ellipsis';
|
|
}
|
|
}
|
|
|
|
function applyBarcodePreviewDateStyles(container, compact) {
|
|
if (!container) {
|
|
return;
|
|
}
|
|
|
|
container.style.width = '100%';
|
|
container.style.maxWidth = '260px';
|
|
container.style.direction = 'ltr';
|
|
container.style.textAlign = 'center';
|
|
container.style.lineHeight = '1';
|
|
container.style.fontWeight = '600';
|
|
container.style.fontSize = compact ? '0.88rem' : '0.98rem';
|
|
container.style.marginTop = '0';
|
|
|
|
const row = container.querySelector('.label-date-row');
|
|
if (row) {
|
|
row.style.gap = compact ? '8px' : '12px';
|
|
}
|
|
|
|
container.querySelectorAll('.label-date-item').forEach((item) => {
|
|
item.style.gap = compact ? '3px' : '5px';
|
|
});
|
|
}
|
|
|
|
function buildSingleBarcodeSvgMarkup(sku, labelWidthMm, labelHeightMm) {
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
const scale = getSingleBarcodeScale(labelWidthMm, labelHeightMm);
|
|
JsBarcode(svg, sku, getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm));
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
|
svg.setAttribute('shape-rendering', 'crispEdges');
|
|
svg.style.width = Math.round(scale * 100) + '%';
|
|
svg.style.maxWidth = '100%';
|
|
svg.style.height = 'auto';
|
|
svg.style.display = 'block';
|
|
svg.style.margin = '0 auto';
|
|
svg.style.shapeRendering = 'crispEdges';
|
|
return svg.outerHTML;
|
|
}
|
|
|
|
function renderSingleBarcodePreview() {
|
|
const label = getSingleBarcodeLabelData();
|
|
if (!label) {
|
|
return;
|
|
}
|
|
|
|
const dimensions = getSingleBarcodePrintDimensions();
|
|
const width = dimensions.width;
|
|
const height = dimensions.height;
|
|
const scale = getSingleBarcodeScale(width, height);
|
|
const compact = width <= 40 || height <= 25;
|
|
const nameContainer = document.getElementById('barcodeLabelName');
|
|
const priceContainer = document.getElementById('barcodeLabelPrice');
|
|
const previewContainer = document.getElementById('barcodeContainer');
|
|
const svg = document.getElementById('barcodeSvg');
|
|
|
|
if (!nameContainer || !priceContainer || !previewContainer || !svg) {
|
|
return;
|
|
}
|
|
|
|
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
|
|
applyBarcodePreviewNameStyles(nameContainer, compact);
|
|
|
|
priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
|
|
priceContainer.style.display = label.price ? 'block' : 'none';
|
|
priceContainer.style.fontWeight = '700';
|
|
priceContainer.style.fontSize = compact ? '1.04rem' : '1.14rem';
|
|
priceContainer.style.lineHeight = '1';
|
|
priceContainer.style.marginTop = '0';
|
|
|
|
previewContainer.style.display = 'flex';
|
|
previewContainer.style.flexDirection = 'column';
|
|
previewContainer.style.alignItems = 'center';
|
|
previewContainer.style.justifyContent = 'center';
|
|
previewContainer.style.gap = compact ? '3px' : '4px';
|
|
previewContainer.style.width = Math.min(Math.max(width * 3.8, 185), 310) + 'px';
|
|
previewContainer.style.maxWidth = '100%';
|
|
previewContainer.style.padding = height <= 25 ? '9px 11px' : '11px 13px';
|
|
|
|
svg.innerHTML = '';
|
|
JsBarcode(svg, label.sku, getSingleBarcodeOptions(label.sku, width, height));
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
|
svg.setAttribute('shape-rendering', 'crispEdges');
|
|
svg.style.width = Math.round(scale * 100) + '%';
|
|
svg.style.maxWidth = '100%';
|
|
svg.style.height = 'auto';
|
|
svg.style.display = 'block';
|
|
svg.style.margin = '0 auto';
|
|
svg.style.shapeRendering = 'crispEdges';
|
|
}
|
|
|
|
function initSingleBarcodePreviewControls() {
|
|
['barcodeWidth', 'barcodeHeight'].forEach((id) => {
|
|
const input = document.getElementById(id);
|
|
if (!input || input.dataset.barcodePreviewBound === '1') {
|
|
return;
|
|
}
|
|
|
|
input.dataset.barcodePreviewBound = '1';
|
|
input.addEventListener('input', renderSingleBarcodePreview);
|
|
input.addEventListener('change', renderSingleBarcodePreview);
|
|
});
|
|
}
|
|
|
|
initSingleBarcodePreviewControls();
|
|
|
|
window.printItemBarcode = function(sku, nameAr, nameEn, price) {
|
|
if (!sku) {
|
|
Swal.fire('Error', 'This item has no SKU/Barcode assigned.', 'error');
|
|
return;
|
|
}
|
|
|
|
window.currentSingleBarcodeLabel = {
|
|
sku: String(sku),
|
|
nameAr: nameAr || '',
|
|
nameEn: nameEn || '',
|
|
price: price || ''
|
|
};
|
|
|
|
renderSingleBarcodePreview();
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('barcodePrintModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.executeBarcodePrint = function() {
|
|
const qty = Math.max(parseInt(document.getElementById('barcodeQty').value, 10) || 1, 1);
|
|
const dimensions = getSingleBarcodePrintDimensions();
|
|
const width = dimensions.width;
|
|
const height = dimensions.height;
|
|
const label = getSingleBarcodeLabelData();
|
|
|
|
if (!label) {
|
|
return;
|
|
}
|
|
|
|
const nameHtml = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
|
|
const price = label.price ? 'OMR ' + escapeBarcodeLabelHtml(label.price) : '';
|
|
const svg = buildSingleBarcodeSvgMarkup(label.sku, width, height);
|
|
const compactClass = width <= 40 || height <= 25 ? 'label-compact' : '';
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.position = 'absolute';
|
|
iframe.style.width = '0px';
|
|
iframe.style.height = '0px';
|
|
iframe.style.border = 'none';
|
|
document.body.appendChild(iframe);
|
|
|
|
const doc = iframe.contentWindow.document;
|
|
|
|
let labelsHtml = '';
|
|
for (let i = 0; i < qty; i++) {
|
|
labelsHtml += `
|
|
<div class="label-container ${compactClass}">
|
|
${nameHtml ? `<div class="label-name">${nameHtml}</div>` : ''}
|
|
<div class="barcode-wrap">${svg}</div>
|
|
${price ? `<div class="label-price">${price}</div>` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
doc.open();
|
|
doc.write(`
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@page { size: ${width}mm ${height}mm; margin: 0; }
|
|
body { margin: 0; padding: 0; font-family: sans-serif; }
|
|
.label-container {
|
|
width: ${width}mm;
|
|
height: ${height}mm;
|
|
page-break-after: always;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
padding: 0.9mm 1.55mm 1mm;
|
|
gap: 0.25mm;
|
|
}
|
|
.label-container:last-child { page-break-after: avoid; }
|
|
.label-name {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
line-height: 1;
|
|
}
|
|
.label-name-ar,
|
|
.label-name-en {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.label-name-ar {
|
|
font-weight: 700;
|
|
font-size: 13.4px;
|
|
direction: rtl;
|
|
}
|
|
.label-name-en {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
.label-price {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.label-compact {
|
|
padding: 0.7mm 1.15mm 0.75mm;
|
|
gap: 0.2mm;
|
|
}
|
|
.label-compact .label-name-ar { font-size: 11.6px; }
|
|
.label-compact .label-name-en { font-size: 9.6px; }
|
|
.label-compact .label-price { font-size: 11.5px; }
|
|
.barcode-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.8mm;
|
|
margin: 0.1mm 0;
|
|
overflow: visible;
|
|
}
|
|
.barcode-wrap svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
overflow: visible;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${labelsHtml}
|
|
</body>
|
|
</html>
|
|
`);
|
|
doc.close();
|
|
|
|
iframe.contentWindow.focus();
|
|
setTimeout(() => {
|
|
iframe.contentWindow.print();
|
|
setTimeout(() => {
|
|
document.body.removeChild(iframe);
|
|
}, 2000);
|
|
}, 500);
|
|
};
|
|
|
|
function formatBarcodeLabelDate(value) {
|
|
const dateText = String(value || '').trim();
|
|
const match = dateText.match(/^(\d{4})-(\d{2})-(\d{2})$/);
|
|
if (match) {
|
|
return `${match[3]}/${match[2]}/${match[1]}`;
|
|
}
|
|
return '';
|
|
}
|
|
|
|
function buildDatedBarcodeDateRowsHtml(productionDate, expiryDate) {
|
|
const productionText = formatBarcodeLabelDate(productionDate) || '--/--/----';
|
|
const expiryText = formatBarcodeLabelDate(expiryDate) || '--/--/----';
|
|
|
|
return `
|
|
<div class="label-date-row" style="display:flex;align-items:center;justify-content:center;gap:var(--label-date-row-gap,8px);direction:ltr;text-align:center;white-space:nowrap;">
|
|
<span class="label-date-item" style="display:inline-flex;align-items:center;gap:var(--label-date-item-gap,4px);white-space:nowrap;"><span class="label-date-key">P:</span><span class="label-date-value">${escapeBarcodeLabelHtml(productionText)}</span></span>
|
|
<span class="label-date-item" style="display:inline-flex;align-items:center;gap:var(--label-date-item-gap,4px);white-space:nowrap;"><span class="label-date-key">E:</span><span class="label-date-value">${escapeBarcodeLabelHtml(expiryText)}</span></span>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function getDatedBarcodeLabelData() {
|
|
return window.currentDatedBarcodeLabel || null;
|
|
}
|
|
|
|
function getDatedBarcodePrintDimensions() {
|
|
return {
|
|
width: Math.max(parseInt(document.getElementById('datedBarcodeWidth').value, 10) || 50, 10),
|
|
height: Math.max(parseInt(document.getElementById('datedBarcodeHeight').value, 10) || 35, 10)
|
|
};
|
|
}
|
|
|
|
function getDatedBarcodeScale(labelWidthMm, labelHeightMm) {
|
|
if (labelWidthMm <= 32 || labelHeightMm <= 24) {
|
|
return 0.96;
|
|
}
|
|
if (labelWidthMm <= 40 || labelHeightMm <= 30) {
|
|
return 0.95;
|
|
}
|
|
if (labelWidthMm <= 50 || labelHeightMm <= 35) {
|
|
return 0.94;
|
|
}
|
|
return 0.90;
|
|
}
|
|
|
|
function getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm) {
|
|
const baseOptions = getSingleBarcodeOptions(sku, labelWidthMm, labelHeightMm);
|
|
const skuLength = String(sku || '').length;
|
|
const showValue = labelHeightMm >= 46 && labelWidthMm >= 50 && skuLength <= 16;
|
|
|
|
return {
|
|
...baseOptions,
|
|
displayValue: showValue,
|
|
fontSize: showValue ? 10 : 8,
|
|
textMargin: showValue ? 2 : 0,
|
|
height: Math.max(Math.round(baseOptions.height * (showValue ? 0.88 : 0.96)), 28),
|
|
margin: Math.max(baseOptions.margin, 6),
|
|
marginBottom: showValue ? 1 : 0
|
|
};
|
|
}
|
|
|
|
function buildDatedBarcodeSvgMarkup(sku, labelWidthMm, labelHeightMm) {
|
|
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
const scale = getDatedBarcodeScale(labelWidthMm, labelHeightMm);
|
|
JsBarcode(svg, sku, getDatedBarcodeOptions(sku, labelWidthMm, labelHeightMm));
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
|
svg.setAttribute('shape-rendering', 'crispEdges');
|
|
svg.style.width = Math.round(scale * 100) + '%';
|
|
svg.style.maxWidth = '100%';
|
|
svg.style.height = 'auto';
|
|
svg.style.display = 'block';
|
|
svg.style.margin = '0 auto';
|
|
svg.style.shapeRendering = 'crispEdges';
|
|
return svg.outerHTML;
|
|
}
|
|
|
|
function renderDatedBarcodePreview() {
|
|
const label = getDatedBarcodeLabelData();
|
|
if (!label) {
|
|
return;
|
|
}
|
|
|
|
const dimensions = getDatedBarcodePrintDimensions();
|
|
const width = dimensions.width;
|
|
const height = dimensions.height;
|
|
const scale = getDatedBarcodeScale(width, height);
|
|
const compact = width <= 40 || height <= 30;
|
|
const nameContainer = document.getElementById('datedBarcodeLabelName');
|
|
const datesContainer = document.getElementById('datedBarcodeLabelDates');
|
|
const priceContainer = document.getElementById('datedBarcodeLabelPrice');
|
|
const previewContainer = document.getElementById('datedBarcodeContainer');
|
|
const svg = document.getElementById('datedBarcodeSvg');
|
|
const productionInput = document.getElementById('datedBarcodeProductionDate');
|
|
const expiryInput = document.getElementById('datedBarcodeExpiryDate');
|
|
|
|
if (!nameContainer || !datesContainer || !previewContainer || !svg) {
|
|
return;
|
|
}
|
|
|
|
nameContainer.innerHTML = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
|
|
applyBarcodePreviewNameStyles(nameContainer, compact);
|
|
|
|
datesContainer.innerHTML = buildDatedBarcodeDateRowsHtml(
|
|
productionInput ? productionInput.value : '',
|
|
expiryInput ? expiryInput.value : ''
|
|
);
|
|
applyBarcodePreviewDateStyles(datesContainer, compact);
|
|
|
|
if (priceContainer) {
|
|
priceContainer.textContent = label.price ? 'OMR ' + label.price : '';
|
|
priceContainer.style.display = label.price ? 'block' : 'none';
|
|
priceContainer.style.fontWeight = '700';
|
|
priceContainer.style.fontSize = compact ? '0.98rem' : '1.08rem';
|
|
priceContainer.style.lineHeight = '1';
|
|
priceContainer.style.marginTop = '0';
|
|
}
|
|
|
|
previewContainer.style.display = 'flex';
|
|
previewContainer.style.flexDirection = 'column';
|
|
previewContainer.style.alignItems = 'center';
|
|
previewContainer.style.justifyContent = 'center';
|
|
previewContainer.style.gap = compact ? '3px' : '4px';
|
|
previewContainer.style.width = Math.min(Math.max(width * 4.0, 190), 320) + 'px';
|
|
previewContainer.style.maxWidth = '100%';
|
|
previewContainer.style.padding = height <= 30 ? '9px 10px' : '10px 12px';
|
|
|
|
svg.innerHTML = '';
|
|
JsBarcode(svg, label.sku, getDatedBarcodeOptions(label.sku, width, height));
|
|
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
|
|
svg.setAttribute('shape-rendering', 'crispEdges');
|
|
svg.style.width = Math.round(scale * 100) + '%';
|
|
svg.style.maxWidth = '100%';
|
|
svg.style.height = 'auto';
|
|
svg.style.display = 'block';
|
|
svg.style.margin = '0 auto';
|
|
svg.style.shapeRendering = 'crispEdges';
|
|
}
|
|
|
|
function initDatedBarcodePreviewControls() {
|
|
['datedBarcodeWidth', 'datedBarcodeHeight', 'datedBarcodeProductionDate', 'datedBarcodeExpiryDate'].forEach((id) => {
|
|
const input = document.getElementById(id);
|
|
if (!input || input.dataset.barcodePreviewBound === '1') {
|
|
return;
|
|
}
|
|
|
|
input.dataset.barcodePreviewBound = '1';
|
|
input.addEventListener('input', renderDatedBarcodePreview);
|
|
input.addEventListener('change', renderDatedBarcodePreview);
|
|
});
|
|
}
|
|
|
|
initDatedBarcodePreviewControls();
|
|
|
|
window.printItemBarcodeWithDates = function(sku, nameAr, nameEn, price, defaultExpiryDate) {
|
|
if (!sku) {
|
|
Swal.fire('Error', 'This item has no SKU/Barcode assigned.', 'error');
|
|
return;
|
|
}
|
|
|
|
window.currentDatedBarcodeLabel = {
|
|
sku: String(sku),
|
|
nameAr: nameAr || '',
|
|
nameEn: nameEn || '',
|
|
price: price || ''
|
|
};
|
|
|
|
const productionInput = document.getElementById('datedBarcodeProductionDate');
|
|
const expiryInput = document.getElementById('datedBarcodeExpiryDate');
|
|
if (productionInput) {
|
|
productionInput.value = '';
|
|
}
|
|
if (expiryInput) {
|
|
expiryInput.value = defaultExpiryDate || '';
|
|
}
|
|
|
|
renderDatedBarcodePreview();
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('datedBarcodePrintModal'));
|
|
modal.show();
|
|
};
|
|
|
|
window.executeDatedBarcodePrint = function() {
|
|
const qty = Math.max(parseInt(document.getElementById('datedBarcodeQty').value, 10) || 1, 1);
|
|
const dimensions = getDatedBarcodePrintDimensions();
|
|
const width = dimensions.width;
|
|
const height = dimensions.height;
|
|
const label = getDatedBarcodeLabelData();
|
|
const productionDate = document.getElementById('datedBarcodeProductionDate').value || '';
|
|
const expiryDate = document.getElementById('datedBarcodeExpiryDate').value || '';
|
|
|
|
if (!label) {
|
|
return;
|
|
}
|
|
|
|
if (!productionDate || !expiryDate) {
|
|
Swal.fire('Missing dates', 'Please select both production and expiry dates before printing.', 'warning');
|
|
return;
|
|
}
|
|
|
|
if (expiryDate < productionDate) {
|
|
Swal.fire('Invalid dates', 'Expiry date must be the same as or later than the production date.', 'warning');
|
|
return;
|
|
}
|
|
|
|
const nameHtml = buildSingleBarcodeNameHtml(label.nameAr, label.nameEn);
|
|
const dateHtml = buildDatedBarcodeDateRowsHtml(productionDate, expiryDate);
|
|
const priceHtml = label.price ? `<div class="label-price">OMR ${escapeBarcodeLabelHtml(label.price)}</div>` : '';
|
|
const svg = buildDatedBarcodeSvgMarkup(label.sku, width, height);
|
|
const compactClass = width <= 40 || height <= 30 ? 'label-compact' : '';
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.position = 'absolute';
|
|
iframe.style.width = '0px';
|
|
iframe.style.height = '0px';
|
|
iframe.style.border = 'none';
|
|
document.body.appendChild(iframe);
|
|
|
|
const doc = iframe.contentWindow.document;
|
|
|
|
let labelsHtml = '';
|
|
for (let i = 0; i < qty; i++) {
|
|
labelsHtml += `
|
|
<div class="label-container dated-label ${compactClass}">
|
|
${nameHtml ? `<div class="label-name">${nameHtml}</div>` : ''}
|
|
<div class="barcode-wrap">${svg}</div>
|
|
<div class="label-meta">
|
|
<div class="label-dates">${dateHtml}</div>
|
|
${priceHtml}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
doc.open();
|
|
doc.write(`
|
|
<html>
|
|
<head>
|
|
<style>
|
|
@page { size: ${width}mm ${height}mm; margin: 0; }
|
|
body { margin: 0; padding: 0; font-family: sans-serif; }
|
|
.label-container {
|
|
width: ${width}mm;
|
|
height: ${height}mm;
|
|
page-break-after: always;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
.label-container:last-child { page-break-after: avoid; }
|
|
.dated-label {
|
|
padding: 0.78mm 1.25mm 0.8mm;
|
|
gap: 0.2mm;
|
|
}
|
|
.label-name {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
line-height: 1;
|
|
}
|
|
.label-name-ar,
|
|
.label-name-en {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.label-name-ar {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
direction: rtl;
|
|
}
|
|
.label-name-en {
|
|
font-size: 10.6px;
|
|
font-weight: 600;
|
|
}
|
|
.label-meta {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.15mm;
|
|
margin-top: 0;
|
|
}
|
|
.label-dates {
|
|
--label-date-row-gap: 1.2mm;
|
|
--label-date-item-gap: 0.55mm;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
direction: ltr;
|
|
font-size: 10.1px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
.label-date-row {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
}
|
|
.label-date-item {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
.label-date-key {
|
|
font-weight: 700;
|
|
}
|
|
.label-price {
|
|
font-size: 11.2px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
}
|
|
.label-compact {
|
|
padding: 0.58mm 0.95mm 0.6mm;
|
|
gap: 0.15mm;
|
|
}
|
|
.label-compact .label-name-ar { font-size: 11.1px; }
|
|
.label-compact .label-name-en { font-size: 9.1px; }
|
|
.label-compact .label-meta { gap: 0.12mm; }
|
|
.label-compact .label-dates {
|
|
--label-date-row-gap: 0.85mm;
|
|
--label-date-item-gap: 0.35mm;
|
|
font-size: 8.7px;
|
|
}
|
|
.label-compact .label-price { font-size: 9.7px; }
|
|
.barcode-wrap {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.55mm;
|
|
margin: 0.08mm 0;
|
|
overflow: visible;
|
|
}
|
|
.barcode-wrap svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
overflow: visible;
|
|
shape-rendering: crispEdges;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
${labelsHtml}
|
|
</body>
|
|
</html>
|
|
`);
|
|
doc.close();
|
|
|
|
iframe.contentWindow.focus();
|
|
setTimeout(() => {
|
|
iframe.contentWindow.print();
|
|
setTimeout(() => {
|
|
document.body.removeChild(iframe);
|
|
}, 2000);
|
|
}, 500);
|
|
};
|
|
|
|
<?php require 'pages/sales_purchases_print_script.php'; ?>
|
|
|
|
window.printPosReceiptFromInvoice = function(inv) {
|
|
const container = document.getElementById('posReceiptContent');
|
|
const itemsHtml = inv.items.map(item => {
|
|
const itemTotal = Number.isFinite(parseFloat(item.total_price)) ? parseFloat(item.total_price) : (parseFloat(item.unit_price || 0) * normalizeQuantity(item.quantity || 0));
|
|
const vatRate = parseFloat(item.vat_rate !== undefined && item.vat_rate !== null ? item.vat_rate : 0);
|
|
const vatAmount = Number.isFinite(parseFloat(item.vat_amount)) ? parseFloat(item.vat_amount) : (itemTotal * (vatRate / (100 + vatRate)));
|
|
return `
|
|
<tr>
|
|
<td>${item.name_en} / ${item.name_ar}<br><small>${formatQuantity(item.quantity)} x ${parseFloat(item.unit_price).toFixed(3)}</small></td>
|
|
<td style="text-align: right; vertical-align: bottom;">${vatAmount.toFixed(2)}</td>
|
|
<td style="text-align: right; vertical-align: bottom;">${itemTotal.toFixed(3)}</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
|
|
const totalVat = Number.isFinite(parseFloat(inv.vat_amount))
|
|
? parseFloat(inv.vat_amount)
|
|
: inv.items.reduce((sum, item) => sum + (Number.isFinite(parseFloat(item.vat_amount)) ? parseFloat(item.vat_amount) : 0), 0);
|
|
const totalAmount = Number.isFinite(parseFloat(inv.total_amount)) ? parseFloat(inv.total_amount) : 0;
|
|
const discountAmount = Math.max(0, Number.isFinite(parseFloat(inv.discount_amount)) ? parseFloat(inv.discount_amount) : 0);
|
|
const loyaltyRedeemed = Math.max(0, Number.isFinite(parseFloat(inv.loyalty_points_redeemed)) ? parseFloat(inv.loyalty_points_redeemed) : 0);
|
|
const isPosInvoice = String(inv.is_pos || '0') === '1';
|
|
const grossBeforeDiscount = isPosInvoice ? totalAmount : (totalAmount + totalVat);
|
|
const subtotalExVat = isPosInvoice ? Math.max(0, grossBeforeDiscount - totalVat) : totalAmount;
|
|
const grandTotalValue = Number.isFinite(parseFloat(inv.total_with_vat)) ? parseFloat(inv.total_with_vat) : Math.max(0, grossBeforeDiscount - discountAmount - loyaltyRedeemed);
|
|
const paidAmount = Number.isFinite(parseFloat(inv.paid_amount)) ? parseFloat(inv.paid_amount) : 0;
|
|
const balanceAmount = Math.max(0, grandTotalValue - paidAmount);
|
|
|
|
const companyName = "<?= htmlspecialchars($data['settings']['company_name'] ?? 'Accounting System') ?>";
|
|
const outletName = "<?= htmlspecialchars($data['settings']['current_outlet_name'] ?? '') ?>";
|
|
const companyPhone = "<?= htmlspecialchars($data['settings']['company_phone'] ?? '') ?>";
|
|
const companyVat = "<?= htmlspecialchars($data['settings']['vat_number'] ?? '') ?>";
|
|
const companyLogo = "<?= htmlspecialchars($data['settings']['company_logo'] ?? '') ?>";
|
|
const receiptNumber = inv.document_no || inv.transaction_no || ('INV-' + inv.id.toString().padStart(5, '0'));
|
|
const receiptCustomer = inv.customer_name || inv.party_name || 'Walk-in / عميل عابر';
|
|
const receiptOutlet = inv.outlet_name || outletName || '';
|
|
|
|
container.innerHTML = `
|
|
<div class="thermal-receipt">
|
|
<div class="center">
|
|
${companyLogo ? `<img src="${companyLogo}" alt="Logo" style="max-height: 60px; width: auto; margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto;">` : ''}
|
|
<h5 class="mb-0 fw-bold">${companyName}</h5>
|
|
${receiptOutlet ? `<div class="fw-bold text-uppercase">${receiptOutlet}</div>` : ''}
|
|
${companyPhone ? `<div>Tel: ${companyPhone}</div>` : ''}
|
|
${companyVat ? `<div>VAT: ${companyVat}</div>` : ''}
|
|
<div class="separator"></div>
|
|
<h6 class="fw-bold">TAX INVOICE / فاتورة ضريبية</h6>
|
|
<div>Inv / رقم: ${receiptNumber}</div>
|
|
<div>Date / التاريخ: ${inv.invoice_date}</div>
|
|
<div class="separator"></div>
|
|
</div>
|
|
<div>
|
|
<strong>Customer / العميل:</strong> ${receiptCustomer}
|
|
</div>
|
|
<div class="separator"></div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ITEM / الصنف</th>
|
|
<th style="text-align: right;">VAT / الضريبة</th>
|
|
<th style="text-align: right;">TOTAL / الإجمالي</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${itemsHtml}
|
|
</tbody>
|
|
</table>
|
|
<div class="separator"></div>
|
|
<div class="d-flex justify-content-between small">
|
|
<span>Subtotal (Excl. VAT) / المجموع الفرعي (دون الضريبة)</span>
|
|
<span><?= __('currency') ?> ${subtotalExVat.toFixed(3)}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between small">
|
|
<span>VAT / الضريبة</span>
|
|
<span><?= __('currency') ?> ${totalVat.toFixed(2)}</span>
|
|
</div>
|
|
<div class="total-row d-flex justify-content-between">
|
|
<span>TOTAL (Incl. VAT) / الإجمالي (شامل الضريبة)</span>
|
|
<span><?= __('currency') ?> ${(grossBeforeDiscount).toFixed(3)}</span>
|
|
</div>
|
|
${discountAmount > 0 ? `<div class="d-flex justify-content-between small text-danger"><span>DISCOUNT / الخصم</span><span>- <?= __('currency') ?> ${discountAmount.toFixed(3)}</span></div>` : ''}
|
|
${loyaltyRedeemed > 0 ? `<div class="d-flex justify-content-between small text-success"><span>LOYALTY / الولاء</span><span>- <?= __('currency') ?> ${loyaltyRedeemed.toFixed(3)}</span></div>` : ''}
|
|
<div class="d-flex justify-content-between total-row">
|
|
<span>NET TOTAL / الإجمالي النهائي</span>
|
|
<span><?= __('currency') ?> ${grandTotalValue.toFixed(3)}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between small">
|
|
<span>PAID / المدفوع</span>
|
|
<span><?= __('currency') ?> ${paidAmount.toFixed(3)}</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between small fw-bold">
|
|
<span>BALANCE / الرصيد</span>
|
|
<span><?= __('currency') ?> ${balanceAmount.toFixed(3)}</span>
|
|
</div>
|
|
<div class="separator"></div>
|
|
<div class="center small">
|
|
<p>Thank You for your business! / شكراً لتعاملكم معنا!</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const posModal = new bootstrap.Modal(document.getElementById('posReceiptModal'));
|
|
posModal.show();
|
|
};
|
|
|
|
window.prepareReceiptPrintArea = function(sourceHtml, printArea) {
|
|
if (!printArea) {
|
|
return;
|
|
}
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = (sourceHtml || '').trim();
|
|
|
|
const receipt = wrapper.querySelector('.thermal-receipt');
|
|
if (receipt) {
|
|
receipt.classList.add('thermal-receipt-print');
|
|
printArea.innerHTML = wrapper.innerHTML;
|
|
return;
|
|
}
|
|
|
|
printArea.innerHTML = `<div class="thermal-receipt thermal-receipt-print">${sourceHtml || ''}</div>`;
|
|
};
|
|
|
|
window.printReceiptHtml = function(sourceHtml, options = {}) {
|
|
const rawHtml = (sourceHtml || '').trim();
|
|
if (!rawHtml) {
|
|
return;
|
|
}
|
|
|
|
const wrapper = document.createElement('div');
|
|
wrapper.innerHTML = rawHtml;
|
|
|
|
const receipt = wrapper.querySelector('.thermal-receipt');
|
|
const receiptHtml = receipt ? receipt.outerHTML : `<div class="thermal-receipt">${rawHtml}</div>`;
|
|
const docTitle = String(options.title || 'Receipt').replace(/[<>"']/g, '');
|
|
const pageLang = document.documentElement.getAttribute('lang') || 'en';
|
|
const pageDir = document.documentElement.getAttribute('dir') || (receipt && receipt.classList.contains('rtl') ? 'rtl' : 'ltr');
|
|
|
|
const iframe = document.createElement('iframe');
|
|
iframe.setAttribute('aria-hidden', 'true');
|
|
iframe.style.position = 'fixed';
|
|
iframe.style.right = '0';
|
|
iframe.style.bottom = '0';
|
|
iframe.style.width = '0';
|
|
iframe.style.height = '0';
|
|
iframe.style.border = '0';
|
|
document.body.appendChild(iframe);
|
|
|
|
const frameDoc = iframe.contentWindow.document;
|
|
frameDoc.open();
|
|
frameDoc.write(`<!doctype html>
|
|
<html lang="${pageLang}" dir="${pageDir}">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>${docTitle}</title>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
@page { size: 80mm auto; margin: 0; }
|
|
html, body {
|
|
width: 80mm !important;
|
|
max-width: 80mm !important;
|
|
margin: 0 auto !important;
|
|
padding: 0 !important;
|
|
background: #fff !important;
|
|
color: #000 !important;
|
|
}
|
|
body {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
h5, h6, p {
|
|
margin: 0 0 4px 0;
|
|
}
|
|
.thermal-receipt {
|
|
width: 72mm !important;
|
|
max-width: 72mm !important;
|
|
margin: 0 auto !important;
|
|
padding: 2mm 0 !important;
|
|
background: #fff !important;
|
|
color: #000 !important;
|
|
}
|
|
.thermal-receipt.rtl {
|
|
direction: rtl;
|
|
text-align: right;
|
|
}
|
|
.thermal-receipt .center {
|
|
text-align: center;
|
|
}
|
|
.thermal-receipt .separator {
|
|
border-top: 1px dashed #000;
|
|
margin: 8px 0;
|
|
}
|
|
.thermal-receipt table {
|
|
width: 100%;
|
|
table-layout: fixed;
|
|
border-collapse: collapse;
|
|
}
|
|
.thermal-receipt table th {
|
|
text-align: left;
|
|
border-bottom: 1px dashed #000;
|
|
font-size: 10px;
|
|
padding-bottom: 4px;
|
|
word-break: break-word;
|
|
}
|
|
.thermal-receipt.rtl table th {
|
|
text-align: right;
|
|
}
|
|
.thermal-receipt table td {
|
|
padding: 4px 0;
|
|
font-size: 11px;
|
|
word-break: break-word;
|
|
vertical-align: top;
|
|
}
|
|
.d-flex { display: flex !important; }
|
|
.justify-content-between { justify-content: space-between !important; }
|
|
.align-items-center { align-items: center !important; }
|
|
.fw-bold { font-weight: 700 !important; }
|
|
.small { font-size: 11px !important; }
|
|
.text-uppercase { text-transform: uppercase !important; }
|
|
.text-danger { color: #b91c1c !important; }
|
|
.text-success { color: #047857 !important; }
|
|
.mb-0 { margin-bottom: 0 !important; }
|
|
.mt-1 { margin-top: 0.25rem !important; }
|
|
.total-row {
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>${receiptHtml}</body>
|
|
</html>`);
|
|
frameDoc.close();
|
|
|
|
setTimeout(() => {
|
|
iframe.contentWindow.focus();
|
|
iframe.contentWindow.print();
|
|
setTimeout(() => {
|
|
document.body.removeChild(iframe);
|
|
}, 2000);
|
|
}, 350);
|
|
};
|
|
|
|
window.printPosReceipt = function(options = {}) {
|
|
const contentEl = document.getElementById('posReceiptContent');
|
|
if (!contentEl) {
|
|
return;
|
|
}
|
|
|
|
const content = contentEl.innerHTML;
|
|
if (!(content || '').trim()) {
|
|
return;
|
|
}
|
|
|
|
if (typeof window.printReceiptHtml === 'function') {
|
|
window.printReceiptHtml(content, {
|
|
title: options.title || <?= json_encode($lang === 'ar' ? 'إيصال نقطة البيع' : 'POS Receipt', JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>
|
|
});
|
|
return;
|
|
}
|
|
|
|
const printArea = document.getElementById('posPrintArea');
|
|
window.prepareReceiptPrintArea(content, printArea);
|
|
|
|
document.body.classList.add('printing-receipt');
|
|
window.print();
|
|
document.body.classList.remove('printing-receipt');
|
|
if (printArea) {
|
|
printArea.innerHTML = '';
|
|
}
|
|
}
|
|
|