Product: ${data.product} | Serial: ${data.serial}
`;
// 2. Customer Info
html += `
I. Claimant Information
`;
html += `
Name: ${data.name} | Phone: ${data.phone}
`;
html += `
Email: ${data.email}
`;
html += `
Shipping Address: ${data.address}
`;
// 3. Product Info
html += `
II. Product & Purchase Details
`;
html += `
Product/Model: ${data.product}
`;
html += `
Serial Number: ${data.serial}
`;
html += `
Purchase Date: ${data.purchaseDate} | Price: $${data.price}
`;
// 4. Defect Details
html += `
III. Claim Details
`;
html += `
Date Noticed: ${data.defectDate}
`;
html += `
Desired Resolution: ${data.resolution}
`;
html += `
Detailed Description of Failure:
`;
html += `
${data.defectDesc}
`;
// 5. Signature Block
html += `
Claimant Signature: ___________________________________
Date Submitted: ___________________________________
`;
container.innerHTML = html;
}
function wcigSwitchTab(tabId) {
document.querySelectorAll('.wcig-tab-btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.wcig-content').forEach(c => c.classList.remove('active'));
const idx = tabId === 'builder' ? 0 : 1;
document.querySelectorAll('.wcig-tab-btn')[idx].classList.add('active');
document.getElementById('wcig-' + tabId).classList.add('active');
if (tabId === 'report') {
wcigRenderReport();
}
}
function wcigLoadExample() {
if(!confirm("Overwrite current inputs with example data?")) return;
// Set example dates (10 months old purchase, 2 weeks ago defect)
const today = new Date();
const purchaseDate = new Date(today.getFullYear(), today.getMonth() - 10, today.getDate() - 5);
const defectDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 14);
document.getElementById('inp-name').value = "Michael T. Chen";
document.getElementById('inp-phone').value = "(555) 987-6543";
document.getElementById('inp-email').value = "michael.chen@corp.com";
document.getElementById('inp-address').value = "401 Tech Drive, Suite 10, San Jose, CA 95134";
document.getElementById('inp-product').value = "ProComm Network Router v4";
document.getElementById('inp-serial').value = "PRO-RT-V4-38B-4491";
document.getElementById('inp-price').value = "450.00";
document.getElementById('inp-resolution').value = "Replacement";
document.getElementById('inp-purchase-date').valueAsDate = purchaseDate;
document.getElementById('inp-defect-date').valueAsDate = defectDate;
document.getElementById('inp-defect-desc').value = "The device fails to boot after a routine power cycle. Only the amber status light flashes. Troubleshooting steps (firmware reset, factory settings) were unsuccessful. The failure occurred unexpectedly after 10 months of stable operation.";
wcigRenderReport();
wcigSwitchTab('report');
}
/* --- PDF Generation --- */
async function wcigGeneratePDF() {
wcigRenderReport(); // Final render
const data = wcigGetData();
const { jsPDF } = window.jspdf;
const doc = new jsPDF('p', 'mm', 'a4');
const navy = [30, 58, 138];
let y = 20;
// 1. Header
doc.setFillColor(...navy);
doc.rect(0, 0, 210, 20, 'F');
doc.setTextColor(255, 255, 255);
doc.setFontSize(16);
doc.text("Warranty Claim Information Sheet", 14, 13);
// 2. Metadata (Using AutoTable for neatness)
doc.setTextColor(0, 0, 0);
doc.setFontSize(10);
const tableData = [
['Claimant Name', data.name, 'Phone', data.phone],
['Email Address', data.email, 'Product Name', data.product],
['Address', data.address, 'Serial Number', data.serial]
];
doc.autoTable({
startY: y + 10,
head: [['Customer Details', '', 'Product Info', '']],
body: tableData,
theme: 'grid',
headStyles: { fillColor: [240, 240, 240], textColor: navy, fontStyle: 'bold' },
styles: { fontSize: 9 },
columnStyles: { 0: { fontStyle: 'bold' }, 2: { fontStyle: 'bold' } }
});
y = doc.lastAutoTable.finalY + 10;
// 3. Purchase & Resolution
doc.setFontSize(12);
doc.setFont("helvetica", "bold");
doc.setTextColor(navy);
doc.text("Purchase & Resolution", 14, y);
y += 5;
const purchaseTable = [
['Date of Purchase', data.purchaseDate, 'Purchase Price', `$${data.price}`],
['Date Defect Noticed', data.defectDate, 'Desired Resolution', data.resolution]
];
doc.autoTable({
startY: y,
body: purchaseTable,
theme: 'grid',
styles: { fontSize: 9 },
columnStyles: { 0: { fontStyle: 'bold' }, 2: { fontStyle: 'bold' } }
});
y = doc.lastAutoTable.finalY + 10;
// 4. Defect Description
doc.setFontSize(12);
doc.setFont("helvetica", "bold");
doc.setTextColor(navy);
doc.text("Detailed Description of Failure", 14, y);
y += 5;
doc.setFontSize(10);
doc.setFont("times", "normal");
doc.setTextColor(0, 0, 0);
const splitDesc = doc.splitTextToSize(data.defectDesc, 180);
doc.rect(14, y, 180, (splitDesc.length * 5) + 5, 'S'); // Box the description
doc.text(splitDesc, 16, y + 4);
y += (splitDesc.length * 5) + 10;
// 5. Signature Block
y += 10;
doc.setFontSize(10);
doc.text("Claimant Signature: ___________________________________", 14, y);
doc.text("Date Submitted: _______________", 140, y);
doc.save(`WarrantyClaim_${data.serial}.pdf`);
}
