<!-- Libraries -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

<!-- CSS Styling -->

<style>

.step-section {

margin-bottom: 30px;

padding: 20px;

border: 1px solid #ccc;

border-radius: 8px;

}

.form-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 15px;

}

.preview-box {

border: 2px dashed #ccc;

padding: 20px;

margin-top: 20px;

background: #fff;

}

</style>

<!-- JavaScript Logic -->

<script>

function generatePreview() {

const preview = document.getElementById("feature-sheet-preview");

const name = document.getElementById("realtorName").value;

const email = document.getElementById("realtorEmail").value;

const phone = document.getElementById("realtorPhone").value;

const brokerage = document.getElementById("brokerageName").value;

const address = document.getElementById("propertyAddress").value;

const city = document.getElementById("propertyCity").value;

const price = document.getElementById("propertyPrice").value;

const beds = document.getElementById("propertyBeds").value;

const baths = document.getElementById("propertyBaths").value;

const sqft = document.getElementById("propertySqft").value;

const year = document.getElementById("propertyYear").value;

preview.innerHTML = `

<h3>${address}, ${city}</h3>

<p><strong>Price:</strong> $${price}</p>

<p><strong>Beds:</strong> ${beds} | <strong>Baths:</strong> ${baths} | <strong>Sq Ft:</strong> ${sqft} | <strong>Year:</strong> ${year}</p>

<hr>

<p><strong>Realtor:</strong> ${name}</p>

<p><strong>Email:</strong> ${email} | <strong>Phone:</strong> ${phone}</p>

<p><strong>Brokerage:</strong> ${brokerage}</p>

`;

}

async function downloadPDF() {

const { jsPDF } = window.jspdf;

const doc = new jsPDF('p', 'pt', 'a4');

const previewElement = document.getElementById("feature-sheet-preview");

const canvas = await html2canvas(previewElement);

const imgData = canvas.toDataURL("image/png");

const imgProps = doc.getImageProperties(imgData);

const pdfWidth = doc.internal.pageSize.getWidth();

const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

doc.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);

doc.save("feature-sheet.pdf");

}

</script>