`); printWindow.document.close(); setTimeout(() => { printWindow.focus(); printWindow.print(); }, 1000); } else { template.printThis({ importCSS: true, importStyle: true, removeScripts: true, pageTitle: title, printDelay: 300, }); } }, printForm() { const template = jQuery('#print-template'); const ref = this.getSelectedCategoryRef(); const formData = this.getFormData(ref); const content = this.generateInvoiceTable(formData); const title = "Cetakan Kiraan " + this.getSelectedCategory(); template.find('[data-slot="title"]').html("

" + title + "

"); template.find('[data-slot="content"]').html(content); template.find('[data-slot="print-date"]').html(new Date().toLocaleString('en-MY')); const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); if (isMobile) { const printContent = template.html(); const printWindow = window.open('', '_blank'); printWindow.document.write(` ${printContent} `); printWindow.document.close(); setTimeout(() => { printWindow.focus(); printWindow.print(); }, 1000); } else { template.printThis({ importCSS: true, importStyle: true, removeScripts: true, pageTitle: title, printDelay: 300, }); } }, payZakat(amount = 0) { const url = 'https://fpx.zakatselangor.com.my/fpx_paynow_website.asp'; amount = this.parseNumber(amount).toFixed(2); zakatType = this.getSelectedCategoryFpxKey(); haulYear = new Date().getFullYear() - 1; const query = `?amount=${encodeURIComponent(amount)}&jeniszakat=${encodeURIComponent(zakatType)}&tahun=${encodeURIComponent(haulYear)}`; window.open(url + query, '_blank'); // opens in new tab }, payGaji(amount = '0') { const url = 'https://espg.zakatselangor.com.my/'; window.open(url, '_blank'); // opens in new tab }, getFormData(ref) { const sections = Array.from(ref.querySelectorAll('.section-group')).filter(section => section.classList.contains('section-hide') == false); const groupedData = []; sections.forEach(section => { // Find section title const title = section.querySelector('h3')?.innerText?.trim() || ''; // Get all inputs in this section const inputs = Array.from(section.querySelectorAll('input, select')) .filter(input => input.type !== 'hidden' && (input.hasAttribute('hidden') == false) && (input.classList.contains('sum-ref-input-hide') == false)) .filter(function(input) { if (input.type == 'radio') { return input.checked; } return true; }) .map(input => { const label = section.querySelector(`label[for='${input.id}']`)?.innerText?.trim().replace(':', '') || ''; if (input.type === 'radio') { return { id: input.id, label: label, value: '', type: 'radio', unit: '' }; } if (input.type === 'select-one') { return { id: input.id, label: label, value: input.querySelector('option:checked').textContent, type: 'select', unit: '' }; } return { id: input.id, label: label, value: input.value || 0, type: input.type, unit: input.dataset.unit }; }); groupedData.push({ title: title, inputs: inputs }); }); return groupedData; }, generateInvoiceTable(formData) { return formData.map(group => { const table = document.createElement('table'); const tbody = document.createElement('tbody'); if (group.title) { const tr = document.createElement('tr'); const th = document.createElement('th'); th.setAttribute('colspan', '2'); th.innerText = group.title; tr.appendChild(th); tbody.appendChild(tr); } group.inputs.forEach(input => { const tr = document.createElement('tr'); const td1 = document.createElement('td'); td1.classList.add('zcp-label'); td1.innerText = input.label; if (input.id?.includes('jumlah')) { td1.classList.add('zcp-total'); } if (input.type == 'radio') { td1.setAttribute('colspan', '2'); tr.appendChild(td1); tbody.appendChild(tr); return; } const td2 = document.createElement('td'); td2.setAttribute('width', '20%'); td2.classList.add('zcp-value'); td2.innerText = this.handlePrintValue(input); tr.appendChild(td1); tr.appendChild(td2); tbody.appendChild(tr); }); table.appendChild(tbody); return table.outerHTML; }); }, handlePrintValue(input) { if (input.unit == 'RM') { return `RM ${formatMoney(input.value)}`; } return input.unit ? `${input.value} ${input.unit}` : input.value; }, parseNumber(val) { return parseFloat(String(val).replace(/,/g, "")) || 0; }, formatMoney(val) { return Number(this.parseNumber(val)).toLocaleString("en-MY", { minimumFractionDigits: 2, maximumFractionDigits: 2, }); }, sum(...values) { const totalCents = values .map((v) => this.parseNumber(v)) .filter((v) => !isNaN(v)) .reduce((total, num) => total + Math.round(num * 100), 0); return this.formatMoney(totalCents / 100); }, resetOnTypeChange(el) { Array.from(el.querySelectorAll(`input[type='text']`)) .filter(input => !input.classList.contains('no-reset')) .forEach(input => { input.value = ''; }); Array.from(el.querySelectorAll('select')) .filter(select => !select.classList.contains('no-reset')) .forEach(select => { select.selectedIndex = 0; }); this.isFilled = false; }, })); })