Property Gallery
+
+ ${chunkHTML}
+
+ ${propertyName}
${location}
+
`;
+ }
+
+ // z-index functions removed
+
+ get localUploadTabClass() {
+ return this.replacementActiveTab === "upload"
+ ? "source-tab active"
+ : "source-tab";
+ }
+
+ get showPropertyImagesTab() {
+ return this.replacementActiveTab === "property";
+ }
+
+ get showLocalUploadTab() {
+ return this.replacementActiveTab === "upload";
+ }
+
+ // Image insertion modal getters
+ get isImageModalOpen() {
+ return this.showImageModal;
+ }
+
+ get imageCategories() {
+ const categories = [
+ { label: "All Images", value: "all" },
+ { label: "Exterior", value: "exterior" },
+ { label: "Interior", value: "interior" },
+ { label: "Kitchen", value: "kitchen" },
+ { label: "Bedroom", value: "bedroom" },
+ { label: "Bathroom", value: "bathroom" },
+ { label: "Living Room", value: "living" },
+ { label: "Maps", value: "maps" },
+ { label: "None", value: "none" },
+ ];
+ return categories;
+ }
+ get filteredPropertyImages() {
+ if (!this.propertyImages || this.propertyImages.length === 0) {
+ return [];
+ }
+
+ if (this.selectedImageCategory === "all") {
+ return this.propertyImages;
+ }
+
+ const filtered = this.propertyImages.filter((image) => {
+ const category = image.category ? image.category.toLowerCase() : "none";
+ return category === this.selectedImageCategory;
+ });
+
+ return filtered;
+ }
+
+ get propertyTabClass() {
+ return this.imageSource === "property" ? "tab-btn active" : "tab-btn";
+ }
+
+ get localTabClass() {
+ return this.imageSource === "local" ? "tab-btn active" : "tab-btn";
+ }
+
+ getCategoryButtonClass(categoryValue) {
+ return this.selectedImageCategory === categoryValue
+ ? "category-btn active"
+ : "category-btn";
+ }
+
+ get showPropertyImagesSection() {
+ return this.imageSource === "property";
+ }
+
+ get showLocalUploadSection() {
+ return this.imageSource === "local";
+ }
+
+ get isInsertButtonDisabled() {
+ const disabled = !this.selectedImageUrl || this.selectedImageUrl === "";
+ return disabled;
+ }
+
+ // Computed properties for template selection
+ get isBlankTemplateSelected() {
+ return this.selectedTemplateId === "blank-template";
+ }
+
+ get isEverkindTemplateSelected() {
+ return this.selectedTemplateId === "everkind-template";
+ }
+
+ get isShiftTemplateSelected() {
+ return this.selectedTemplateId === "shift-template";
+ }
+
+ get isSaintbartsTemplateSelected() {
+ return this.selectedTemplateId === "saintbarts-template";
+ }
+
+ get isLearnoyTemplateSelected() {
+ return this.selectedTemplateId === "learnoy-template";
+ }
+
+ get isLeafampTemplateSelected() {
+ return this.selectedTemplateId === "leafamp-template";
+ }
+
+ get isCoreshiftTemplateSelected() {
+ return this.selectedTemplateId === "coreshift-template";
+ }
+
+ get isModernHomeTemplateSelected() {
+ return this.selectedTemplateId === "modern-home-template";
+ }
+
+ get isGrandOakVillaTemplateSelected() {
+ return this.selectedTemplateId === "grand-oak-villa-template";
+ }
+
+ get isSampleTemplateSelected() {
+ return this.selectedTemplateId === "sample-template";
+ }
+
+ get isSerenityHouseTemplateSelected() {
+ return this.selectedTemplateId === "serenity-house-template";
+ }
+
+ get isLuxuryMansionTemplateSelected() {
+ return this.selectedTemplateId === "luxury-mansion-template";
+ }
+
+ // Image review computed properties
+ get isFirstImage() {
+ return this.currentImageIndex === 0;
+ }
+
+ get isLastImage() {
+ return this.currentImageIndex === this.totalImages - 1;
+ }
+
+ get displayImageIndex() {
+ return this.currentImageIndex + 1;
+ }
+
+ // Computed properties for step visibility
+ get step1Class() {
+ return this.currentStep === 1 ? "step-content active" : "step-content";
+ }
+ get step2Class() {
+ return this.currentStep === 2 ? "step-content active" : "step-content";
+ }
+ get step3Class() {
+ return this.currentStep === 3 ? "step-content active" : "step-content";
+ }
+
+ // Step navigation classes (for header stepper circles only)
+ get step1NavClass() {
+ return this.currentStep === 1 ? "active-circle active" : "";
+ }
+
+ get step2NavClass() {
+ return this.currentStep === 2 ? "active-circle active" : "";
+ }
+
+ get step3NavClass() {
+ return this.currentStep === 3 ? "active-circle active" : "";
+ }
+
+ // Inline styles to hard-force blue fill for active circles
+ get step1NavStyle() {
+ return this.currentStep === 1
+ ? "background:#1e88e5;border-color:#1e88e5;color:#ffffff;"
+ : "";
+ }
+ get step2NavStyle() {
+ return this.currentStep === 2
+ ? "background:#1e88e5;border-color:#1e88e5;color:#ffffff;"
+ : "";
+ }
+ get step3NavStyle() {
+ return this.currentStep === 3
+ ? "background:#1e88e5;border-color:#1e88e5;color:#ffffff;"
+ : "";
+ }
+
+ // Image availability flag
+ get hasPropertyImages() {
+ return (
+ Array.isArray(this.realPropertyImages) &&
+ this.realPropertyImages.length > 0
+ );
+ }
+
+ // Dynamic class for pdf viewport to enable placeholder styling when no images
+ get pdfViewportClass() {
+ return this.hasPropertyImages ? "pdf-viewport" : "pdf-viewport no-images";
+ }
+
+ originalTemplateGridHTML = null;
+ originalStylesText = null;
+
+ renderedCallback() {
+ if (this.currentStep === 1) {
+ const gridLive = this.template.querySelector("#all-templates");
+ if (gridLive) {
+ // Always keep a clean snapshot from the DOM the first time we hit step 1 in a render pass
+ if (
+ this.originalTemplateGridHTML === null ||
+ this.originalTemplateGridHTML.length < 50
+ ) {
+ this.originalTemplateGridHTML = gridLive.innerHTML;
+ }
+ }
+ }
+ if (this.originalTemplateGridHTML === null) {
+ const grid = this.template.querySelector("#all-templates");
+ if (grid) {
+ this.originalTemplateGridHTML = grid.innerHTML;
+ }
+ }
+ if (this.originalStylesText === null) {
+ const styles = this.template.querySelectorAll("style");
+ this.originalStylesText = Array.from(styles).map((s) => s.textContent);
+ }
+ }
+
+ resetStep1Grid() {
+ const grid = this.template.querySelector("#all-templates");
+ if (!grid) return;
+ // Clear any selected states on cards
+ const cards = grid.querySelectorAll(".template-card");
+ cards.forEach((card) => {
+ card.classList.remove("selected");
+ });
+ // DON'T clear selectedTemplateId - preserve the selection
+ // this.selectedTemplateId = '';
+ }
+
+ restoreComponentStyles() {
+ if (!this.originalStylesText) return;
+ const styles = this.template.querySelectorAll("style");
+ const snapshots = this.originalStylesText;
+ styles.forEach((styleEl, idx) => {
+ if (
+ snapshots[idx] !== undefined &&
+ styleEl.textContent !== snapshots[idx]
+ ) {
+ styleEl.textContent = snapshots[idx];
+ }
+ });
+ }
+ get isNextButtonDisabled() {
+ return !this.selectedTemplateId;
+ }
+
+ get isNextButtonDisabledStep2() {
+ return !this.selectedPropertyId;
+ }
+
+ // Wire method to get properties
+ @wire(getProperties)
+ wiredProperties({ error, data }) {
+ if (data) {
+ this.properties = data;
+ if (this._deferHydrateFromUrl) {
+ try {
+ this._deferHydrateFromUrl();
+ } catch (e) {}
+ this._deferHydrateFromUrl = null;
+ }
+ } else if (error) {
+ this.error = "Error loading properties: " + error.body.message;
+ }
+ }
+
+ // Derived list with selected flag to force dropdown selection rendering
+ get propertiesWithSelected() {
+ const selectedId = this.selectedPropertyId || "";
+ return (this.properties || []).map((p) => ({
+ ...p,
+ _selected: p.Id === selectedId,
+ }));
+ }
+
+ // Filtered properties based on search and filters
+ get filteredProperties() {
+ let filtered = this.properties || [];
+
+ // Apply search filter
+ if (this.propertySearchTerm) {
+ const searchTerm = this.propertySearchTerm.toLowerCase();
+ filtered = filtered.filter(property =>
+ (property.Name && property.Name.toLowerCase().includes(searchTerm)) ||
+ (property.pcrm__Title_English__c && property.pcrm__Title_English__c.toLowerCase().includes(searchTerm)) ||
+ (property.pcrm__Property_Type__c && property.pcrm__Property_Type__c.toLowerCase().includes(searchTerm)) ||
+ (property.pcrm__City_Bayut_Dubizzle__c && property.pcrm__City_Bayut_Dubizzle__c.toLowerCase().includes(searchTerm)) ||
+ (property.Address__c && property.Address__c.toLowerCase().includes(searchTerm))
+ );
+ }
+
+ // Apply property type filter
+ if (this.propertyFilterType !== "all") {
+ filtered = filtered.filter(property =>
+ property.pcrm__Property_Type__c === this.propertyFilterType
+ );
+ }
+
+ // Apply city filter
+ if (this.propertyFilterCity !== "all") {
+ filtered = filtered.filter(property =>
+ property.pcrm__City_Bayut_Dubizzle__c === this.propertyFilterCity
+ );
+ }
+
+ return filtered;
+ }
+
+ // Get unique property types for filter dropdown
+ get uniquePropertyTypes() {
+ const types = [...new Set((this.properties || []).map(p => p.pcrm__Property_Type__c).filter(Boolean))];
+ return types.sort();
+ }
+
+ // Get unique cities for filter dropdown
+ get uniqueCities() {
+ const cities = [...new Set((this.properties || []).map(p => p.pcrm__City_Bayut_Dubizzle__c).filter(Boolean))];
+ return cities.sort();
+ }
+
+ // Get filtered properties with selected flag
+ get filteredPropertiesWithSelected() {
+ const selectedId = this.selectedPropertyId || "";
+ return this.filteredProperties.map((p) => ({
+ ...p,
+ _selected: p.Id === selectedId,
+ }));
+ }
+
+ // Template selection handler
+ handleTemplateSelect(event) {
+ const templateId = event.currentTarget.dataset.templateId;
+
+ // Clear cached content when selecting a new template
+ this.cachedTemplateContent = null;
+
+ // Set the selected template
+ switch (templateId) {
+ case "blank-template":
+ this.selectedTemplateId = "blank-template";
+ break;
+ case "everkind-template":
+ this.selectedTemplateId = "everkind-template";
+ break;
+ case "shift-template":
+ this.selectedTemplateId = "shift-template";
+ break;
+ case "saintbarts-template":
+ this.selectedTemplateId = "saintbarts-template";
+ break;
+ case "learnoy-template":
+ this.selectedTemplateId = "learnoy-template";
+ break;
+ case "leafamp-template":
+ this.selectedTemplateId = "leafamp-template";
+ break;
+ case "coreshift-template":
+ this.selectedTemplateId = "coreshift-template";
+ break;
+ case "modern-home-template":
+ this.selectedTemplateId = "modern-home-template";
+ break;
+ case "grand-oak-villa-template":
+ this.selectedTemplateId = "grand-oak-villa-template";
+ break;
+ case "serenity-house-template":
+ this.selectedTemplateId = "serenity-house-template";
+ break;
+ case "sample-template":
+ this.selectedTemplateId = "sample-template";
+ break;
+ case "luxury-mansion-template":
+ this.selectedTemplateId = "luxury-mansion-template";
+ break;
+ default:
+ break;
+ }
+
+ // Visually mark the selected template card with a black border
+ try {
+ this.template.querySelectorAll(".template-card").forEach((card) => {
+ card.classList.remove("selected");
+ });
+ if (event.currentTarget && event.currentTarget.classList) {
+ event.currentTarget.classList.add("selected");
+ }
+ } catch (e) {}
+ }
+
+ resetTemplateSelections() {
+ this.selectedTemplateId = "";
+ }
+ // Page size change handler
+ handlePageSizeChange(event) {
+ const newPageSize = event.target.value;
+ this.selectedPageSize = newPageSize;
+
+ // Update the preview frame with new dimensions
+ this.updatePreviewFrameSize(newPageSize);
+
+ // Initialize viewport with exact PDF dimensions
+ this.initializeViewportDimensions();
+
+ // Re-fit to width when page size changes
+ setTimeout(() => this.fitToWidth(), 0);
+ }
+
+ // ===== Step 3 viewport zoom controls =====
+ get zoomPercent() {
+ try {
+ return `${Math.round((this.zoom || 1) * 100)}%`;
+ } catch (e) {
+ return "100%";
+ }
+ }
+
+ get pdfCanvasStyle() {
+ const scale = this.zoom || 1;
+ return `transform: scale(${scale}) !important; transform-origin: top center !important; margin: 0 auto;`;
+ }
+
+ zoomIn() {
+ this.zoom = Math.min((this.zoom || 1) + 0.1, 3);
+ }
+ zoomOut() {
+ this.zoom = Math.max((this.zoom || 1) - 0.1, 0.3);
+ }
+ resetZoom() {
+ this.zoom = 1;
+ }
+
+ // Handler methods for HTML onclick events
+ handleZoomIn() {
+ this.zoomIn();
+ }
+ handleZoomOut() {
+ this.zoomOut();
+ }
+ handleZoom100() {
+ this.resetZoom();
+ }
+ handleFitWidth() {
+ this.fitToWidth();
+ }
+ handleFitPage() {
+ this.fitToPage();
+ }
+
+ // Page management methods
+ addNewPage() {
+ const newPage = {
+ id: `page-${Date.now()}`,
+ content: "Property Gallery
+
+ ${imagesHTML}
+
+ New page content...
", + }; + this.previewPages = [...this.previewPages, newPage]; + this.updatePageCount(); + } + + updatePageCount() { + const pageInfo = this.template?.querySelector(".page-info"); + if (pageInfo) { + const pageCount = this.previewPages.length || 1; + pageInfo.innerHTML = `${ + this.selectedPageSize + } - ${pageCount} page${pageCount > 1 ? "s" : ""}`; + } + } + + // Split content into pages based on page breaks + splitContentIntoPages(content) { + if (!content) return []; + + // Look for page break markers or split by content length + const pageBreakMarkers = [ + '', + '', + ]; + let pages = []; + + // Check if content has explicit page breaks + let hasPageBreaks = false; + pageBreakMarkers.forEach((marker) => { + if (content.includes(marker)) { + hasPageBreaks = true; + } + }); + + if (hasPageBreaks) { + // Split by page breaks + const pageContent = content.split(/Empty page
", + })); + } else { + // Single page for now - can be enhanced to auto-split based on content length + pages = [ + { + id: "page-1", + content: content, + }, + ]; + } + + return pages; + } + + // Update preview pages when content changes + updatePreviewPages() { + if (this.htmlContent) { + this.previewPages = this.splitContentIntoPages(this.htmlContent); + } else { + this.previewPages = []; + } + this.updatePageCount(); + + // Force proper HTML rendering after content changes + setTimeout(() => { + this.forceHTMLRendering(); + }, 100); + } + + fitToWidth() { + const container = this.template?.querySelector(".pdf-viewport"); + if (!container) { + return; + } + // Use exact PDF dimensions for perfect matching + const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; + const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; + const available = Math.max((container.clientWidth || baseWidth) - 20, 100); + this.zoom = Math.max(Math.min(available / baseWidth, 4), 0.2); + + // Update canvas dimensions to match PDF exactly + const canvas = this.template?.querySelector(".pdf-canvas"); + if (canvas) { + canvas.style.width = `${baseWidth}px`; + canvas.style.height = `${baseHeight}px`; + canvas.setAttribute('data-page-size', this.selectedPageSize); + } + } + + fitToPage() { + const container = this.template?.querySelector(".pdf-viewport"); + if (!container) { + return; + } + // Use exact PDF dimensions for perfect matching + const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; + const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; + const availableW = Math.max((container.clientWidth || baseWidth) - 20, 100); + const availableH = Math.max((container.clientHeight || baseHeight) - 20, 100); + const scaleW = availableW / baseWidth; + const scaleH = availableH / baseHeight; + this.zoom = Math.max(Math.min(Math.min(scaleW, scaleH), 4), 0.2); + + // Update canvas dimensions to match PDF exactly + const canvas = this.template?.querySelector(".pdf-canvas"); + if (canvas) { + canvas.style.width = `${baseWidth}px`; + canvas.style.height = `${baseHeight}px`; + canvas.setAttribute('data-page-size', this.selectedPageSize); + } + } + // Update preview frame size based on selected page size + updatePreviewFrameSize(pageSize) { + const previewFrame = this.template.querySelector( + ".enhanced-editor-content" + ); + if (previewFrame) { + // Update the data attribute for the CSS content + previewFrame.setAttribute("data-page-size", pageSize); + + // Set exact PDF dimensions for perfect matching + const baseWidth = pageSize === "A3" ? 1123 : 794; + const baseHeight = pageSize === "A3" ? 1587 : 1123; + + // Update canvas dimensions + const canvas = this.template?.querySelector(".pdf-canvas"); + if (canvas) { + canvas.style.width = `${baseWidth}px`; + canvas.style.height = `${baseHeight}px`; + canvas.setAttribute('data-page-size', pageSize); + } + + // Re-render content with new page size + this.renderContentInPages(pageSize); + + // Update page count based on new page size + this.updatePageCountForSize(pageSize); + } + } + + // Render content in separate pages based on selected size + renderContentInPages(pageSize) { + const previewFrame = this.template.querySelector( + ".enhanced-editor-content" + ); + if (!previewFrame) return; + + // Get the current template content + const templateHTML = this.createTemplateHTML(); + if (!templateHTML) return; + + // Clear existing content + previewFrame.innerHTML = ""; + + // Split content into pages based on size + const pages = this.splitContentIntoPages(templateHTML, pageSize); + + // Set exact PDF dimensions for perfect matching + const baseWidth = pageSize === "A3" ? 1123 : 794; + const baseHeight = pageSize === "A3" ? 1587 : 1123; + + // Create page containers with exact PDF dimensions + pages.forEach((pageContent, index) => { + const pageContainer = document.createElement("div"); + pageContainer.className = `preview-page page-size-${pageSize.toLowerCase()}`; + pageContainer.setAttribute("data-page-number", `Page ${index + 1}`); + pageContainer.style.width = `${baseWidth}px`; + pageContainer.style.minHeight = `${baseHeight}px`; + pageContainer.style.maxWidth = `${baseWidth}px`; + pageContainer.innerHTML = pageContent; + previewFrame.appendChild(pageContainer); + }); + + // Force proper HTML rendering after pages are created + setTimeout(() => { + this.forceHTMLRendering(); + }, 50); + } + // Split HTML content into pages based on page size + splitContentIntoPages(htmlContent, pageSize) { + const pages = []; + let currentPage = ""; + let currentHeight = 0; + + // Define page heights in mm + const pageHeights = { + A4: 297, + A3: 420, + }; + + const maxHeight = pageHeights[pageSize] || 297; + + // Create a temporary div to parse HTML + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = htmlContent; + + // Get all direct children (brochure pages) + const children = Array.from(tempDiv.children); + + children.forEach((child, index) => { + // If it's a brochure-page div, treat it as a separate page + if (child.classList.contains("brochure-page")) { + if (currentPage) { + pages.push(currentPage); + } + currentPage = child.outerHTML; + currentHeight = 0; + } else { + // For other content, check if it fits in current page + const estimatedHeight = this.estimateElementHeight(child, pageSize); + + if (currentHeight + estimatedHeight > maxHeight && currentPage) { + // Start new page + pages.push(currentPage); + currentPage = child.outerHTML; + currentHeight = estimatedHeight; + } else { + // Add to current page + currentPage += child.outerHTML; + currentHeight += estimatedHeight; + } + } + }); + + // Add the last page + if (currentPage) { + pages.push(currentPage); + } + + return pages; + } + + // Estimate element height based on page size + estimateElementHeight(element, pageSize) { + // Base height estimation in mm + let baseHeight = 50; // Default height + + // Adjust based on element type + if (element.tagName === "IMG") { + baseHeight = 100; + } else if (element.tagName === "H1") { + baseHeight = 30; + } else if (element.tagName === "H2") { + baseHeight = 25; + } else if (element.tagName === "P") { + baseHeight = 20; + } else if (element.tagName === "DIV") { + baseHeight = 80; + } + + // Adjust for page size + if (pageSize === "A3") { + baseHeight *= 1.4; // A3 is larger + } + + return baseHeight; + } + + // Update page count based on selected page size + updatePageCountForSize(pageSize) { + const previewFrame = this.template.querySelector( + ".enhanced-editor-content" + ); + if (previewFrame) { + let pageHeight = 297; // Default A4 height in mm + + switch (pageSize) { + case "A3": + pageHeight = 420; // A3 height in mm + break; + case "A4": + default: + pageHeight = 297; // A4 height in mm + break; + } + + // Calculate content height and estimate pages needed + const contentHeight = previewFrame.scrollHeight; + const contentHeightMm = contentHeight * 0.264583; // Convert px to mm + const pagesNeeded = Math.ceil(contentHeightMm / pageHeight); + + this.pageCount = Math.max(1, Math.min(pagesNeeded, 20)); // Limit to 1-20 pages + } + } + + // Navigation methods + nextStep() { + if (this.currentStep === 1 && !this.selectedTemplateId) { + this.showError("Please select a template first."); + return; + } + if (this.currentStep < 3) { + this.currentStep++; + // Reset click tracking when changing steps + this.resetImageClickTracking(); + // If moving to step 3, automatically load the template + if (this.currentStep === 3) { + this.loadTemplateInStep3(); + requestAnimationFrame(() => { + this.updatePreviewFrameSize(this.selectedPageSize || "A4"); + }); + } + this.scrollToTop(); + } + } + + previousStep() { + if (this.currentStep > 1) { + this.currentStep--; + // Reset click tracking when changing steps + this.resetImageClickTracking(); + if (this.currentStep === 1) { + this.resetStep1Grid(); + } + this.scrollToTop(); + } + } + + replaceStaticWithDynamic(content) { + if (!this.propertyData || !content) return content; + + let result = content; + + // Replace hardcoded values with actual property data + result = result.replace( + /Concorde Tower/g, + this.propertyData.propertyName || "Property Name" + ); + result = result.replace( + /AED 81,999/g, + this.propertyData.rentPriceMin || this.propertyData.price || "Price" + ); + result = result.replace( + /Modern Villa/g, + this.propertyData.propertyName || "Property Name" + ); + result = result.replace( + /AED 2,500,000/g, + this.propertyData.salePriceMin || this.propertyData.price || "Price" + ); + result = result.replace(/Dubai/g, this.propertyData.city || "Location"); + result = result.replace( + /This beautiful property offers exceptional value and modern amenities\./g, + this.propertyData.descriptionEnglish || "Property description" + ); + + return result; + } + goToStep(event) { + const step = parseInt(event.currentTarget.dataset.step); + this.currentStep = step; + // Reset click tracking when changing steps + this.resetImageClickTracking(); + if (this.currentStep === 1) { + this.resetStep1Grid(); + // Also reconstruct grid HTML from original snapshot if available to fully reset content + if ( + this.originalTemplateGridHTML && + this.originalTemplateGridHTML.length > 50 + ) { + const grid = this.template.querySelector("#all-templates"); + if (grid) { + grid.innerHTML = this.originalTemplateGridHTML; + } + } + // Restore any styles that could have been mutated during step 3 + this.restoreComponentStyles(); + // Rebind click handlers for fresh grid without page reload + requestAnimationFrame(() => { + const cards = this.template.querySelectorAll( + "#all-templates .template-card" + ); + cards.forEach((card) => { + card.onclick = this.handleTemplateSelect.bind(this); + // Restore selected state if this card matches the selected template + if ( + this.selectedTemplateId && + card.dataset.templateId === this.selectedTemplateId + ) { + card.classList.add("selected"); + } + }); + }); + } + // If going directly to step 3, load the template only if not already loaded + if ( + this.currentStep === 3 && + (!this.htmlContent || this.htmlContent.trim() === "") + ) { + this.loadTemplateInStep3(); + requestAnimationFrame(() => { + this.updatePreviewFrameSize(this.selectedPageSize || "A4"); + // Auto fit width for better initial experience + this.fitToWidth && this.fitToWidth(); + }); + } + this.scrollToTop(); + } + + // Scroll to top of page when changing steps + scrollToTop() { + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + } + // Load template content into step 3 enhanced editor + async loadTemplateInStep3() { + if (this.selectedTemplateId && this.selectedPropertyId) { + try { + // Use cached content if available to prevent regeneration + if ( + this.cachedTemplateContent && + this.cachedTemplateContent.templateId === this.selectedTemplateId && + this.cachedTemplateContent.propertyId === this.selectedPropertyId + ) { + this.htmlContent = this.cachedTemplateContent.html; + this.updatePreviewPages(); + this.updatePreviewFrameSize(this.selectedPageSize); + setTimeout(() => { + this.updatePageCountForSize(this.selectedPageSize); + this.updatePageCount(); + + // Set exact PDF dimensions for perfect matching + const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; + const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; + + // Update canvas dimensions to match PDF exactly + const canvas = this.template?.querySelector(".pdf-canvas"); + if (canvas) { + canvas.style.width = `${baseWidth}px`; + canvas.style.height = `${baseHeight}px`; + canvas.setAttribute('data-page-size', this.selectedPageSize); + } + + this.fitToWidth && this.fitToWidth(); + // Apply dynamic font sizing for cached content + this.applyDynamicFontSizing(); + // Force image reload to ensure they display properly + this.forceImageReload(); + // Force proper HTML rendering to match PDF exactly + this.forceHTMLRendering(); + }, 100); + return; + } + + // Ensure property images are loaded before creating template + if (this.realPropertyImages.length === 0) { + await this.loadPropertyImages(); + } + + const templateHTML = this.createTemplateHTML(); + + // Replace any hardcoded background-image URLs with property images + const processedTemplateHTML = + this.replaceBackgroundImagesInHTML(templateHTML); + + // Cache the template content + this.cachedTemplateContent = { + templateId: this.selectedTemplateId, + propertyId: this.selectedPropertyId, + html: processedTemplateHTML, + }; + + // Set the HTML content for the template binding + this.htmlContent = processedTemplateHTML; + + // Update preview pages with the new content + this.updatePreviewPages(); + + // Set initial page size class and data attribute + this.updatePreviewFrameSize(this.selectedPageSize); + + // Update page count after template is loaded + setTimeout(() => { + this.updatePageCountForSize(this.selectedPageSize); + this.updatePageCount(); // Update page count display + + // Set exact PDF dimensions for perfect matching + const baseWidth = this.selectedPageSize === "A3" ? 1123 : 794; + const baseHeight = this.selectedPageSize === "A3" ? 1587 : 1123; + + // Update canvas dimensions to match PDF exactly + const canvas = this.template?.querySelector(".pdf-canvas"); + if (canvas) { + canvas.style.width = `${baseWidth}px`; + canvas.style.height = `${baseHeight}px`; + canvas.setAttribute('data-page-size', this.selectedPageSize); + } + + // After content settles, fit viewport to width + this.fitToWidth && this.fitToWidth(); + // Ensure CSS background images reflect current property images + this.updateCSSBackgroundImages(); + // Apply dynamic font sizing after template loads + this.applyDynamicFontSizing(); + + // Force image reload to ensure they display properly + this.forceImageReload(); + // Force proper HTML rendering to match PDF exactly + this.forceHTMLRendering(); + }, 100); + } catch (error) { + this.error = "Error loading template: " + error.message; + + // Show error message in preview frame + const previewFrame = this.template.querySelector( + ".enhanced-editor-content" + ); + if (previewFrame) { + previewFrame.innerHTML = `
+
`;
+ }
+ }
+ } else {
+ // Show a message if template or property is not selected
+ const previewFrame = this.template.querySelector(
+ ".enhanced-editor-content"
+ );
+ if (previewFrame) {
+ if (!this.selectedTemplateId) {
+ previewFrame.innerHTML =
+ 'Error Loading Template
+${error.message}
+Please try selecting a different template or contact support.
+No Template Selected
Please go back to step 1 and select a template.
No Property Selected
Please go back to step 2 and select a property.
-separated bullet/number lines inside a single block + const brBlocks = tempDiv.querySelectorAll("p, div"); + brBlocks.forEach((block) => { + if (block.closest("ul,ol")) return; + const html = block.innerHTML || ""; + if (!/br\s*\/?/i.test(html)) return; + const parts = html + .split(/
+
+
+
+
+ `;
+
+ return html;
+ } catch (error) {
+ // Return a fallback HTML if there's an error
+ return `
+
+
+
+
+ ${ + this.selectedProperty?.Name || + this.propertyData?.propertyName || + "Property Details" + }
+Exclusive Property Brochure
+
+
+
+
+ 🏠
+ Property Image
+
+
+
+
+
+
+
+ Property Information
+ +
+ Property Type:
+ ${
+ this.selectedProperty.Property_Type__c ||
+ "N/A"
+ }
+
+
+
+ Location:
+ ${
+ this.selectedProperty.Location__c || "N/A"
+ }
+
+
+
+ Price:
+ ${
+ this.selectedProperty.Price__c
+ ? "$" +
+ this.selectedProperty.Price__c.toLocaleString()
+ : "N/A"
+ }
+
+
+
+ Additional Details
+ +
+ Bedrooms:
+ ${
+ this.selectedProperty.Bedrooms__c || "N/A"
+ }
+
+
+
+ Bathrooms:
+ ${
+ this.selectedProperty.Bathrooms__c || "N/A"
+ }
+
+
+
+ Square Feet:
+ ${
+ this.selectedProperty.Square_Feet__c
+ ? this.selectedProperty.Square_Feet__c.toLocaleString() +
+ " sq ft"
+ : "N/A"
+ }
+
+
+
+
+
+ Description
++ ${ + this.selectedProperty.Description__c || + "This beautiful property offers exceptional value and is located in a prime area. Contact us for more details and to schedule a viewing." + } +
+
+
+
+
+
+ Interested in this property?
+Contact our team for more information and to schedule a viewing.
+
+
+ 📞 Call Us
+ 📧 Email Us
+ 💬 Chat
+
+
+ `;
+ }
+ }
+
+ // Progress and message methods (from first prompt)
+ showProgress(message) {
+ this.isLoading = true;
+ this.progressMessage = message;
+ }
+
+ hideProgress() {
+ this.isLoading = false;
+ this.progressMessage = "";
+ }
+
+ showSuccess(message) {
+ this.progressMessage = message;
+ this.error = "";
+ }
+
+ showError(message) {
+ this.error = message;
+ this.progressMessage = "";
+ }
+
+ // Handle PDF response using the working approach from first prompt
+ handlePdfResponse(result) {
+ try {
+ if (result.pdfUrl) {
+ // For the working approach, we need to create a proper download
+ this.downloadPDF(result.pdfUrl);
+ } else {
+ this.error = "PDF generated but no download URL received";
+ }
+ } catch (error) {
+ this.error = "Error handling PDF response: " + error.message;
+ }
+ }
+ // Download PDF method
+ downloadPDF(pdfUrl) {
+ try {
+ // Create a temporary link element
+ const link = document.createElement("a");
+ link.href = pdfUrl;
+ link.download = `property-brochure-${
+ this.selectedTemplateId
+ }-${Date.now()}.pdf`;
+
+ // Append to body, click, and remove
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+
+ this.progressMessage = "PDF download started!";
+
+ // Fallback: If download doesn't work, show instructions
+ setTimeout(() => {
+ if (this.template.querySelector(".progress-message")) {
+ const progressMsg = this.template.querySelector(".progress-message");
+ progressMsg.innerHTML +=
+ 'Property Brochure
+Property: ${ + this.selectedProperty?.Name || "Selected Property" + }
+Template: ${ + this.selectedTemplateId || "Selected Template" + }
+Generated on: ${new Date().toLocaleDateString()}
+💡 If download didn\'t start, right-click the PDF link below and select "Save as..."'; + + // Add a visible download link as fallback + const fallbackLink = document.createElement("a"); + fallbackLink.href = pdfUrl; + fallbackLink.textContent = "📄 Click here to download PDF"; + fallbackLink.className = "slds-button slds-button_brand"; + fallbackLink.style.marginTop = "10px"; + fallbackLink.style.display = "inline-block"; + + progressMsg.appendChild(fallbackLink); + } + }, 2000); + } catch (error) { + this.error = "Error downloading PDF: " + error.message; + } + } + // Handle large PDF responses + async handleLargePDFResponse(decodedResponse) { + try { + const responseData = JSON.parse(decodedResponse); + + this.hideProgress(); + this.isLoading = false; + + if (responseData.status === "large_pdf") { + // Show options for large PDFs + this.showLargePDFOptions(responseData); + } + } catch (error) { + this.showError("Error handling large PDF response: " + error.message); + } + } + + // Show options for large PDFs + showLargePDFOptions(responseData) { + const message = ` + + `; + + this.showSuccess(message); + } + + // Generate compressed PDF to stay under Salesforce limits + async generateCompressedPDF() { + try { + this.showProgress("Generating compressed PDF..."); + + // Get current editor content + const editorFrame = this.template.querySelector( + ".enhanced-editor-content" + ); + let htmlContent = ""; + + if (editorFrame && editorFrame.innerHTML) { + htmlContent = editorFrame.innerHTML; + // Check if there are draggable elements - if so, don't regenerate template + const tempDiv = document.createElement("div"); + tempDiv.innerHTML = htmlContent; + const draggableElements = tempDiv.querySelectorAll( + ".draggable-element, .draggable-image-container, .draggable-table-container" + ); + if (draggableElements.length === 0 && htmlContent.length < 100) { + // Only regenerate if truly empty and no draggable elements + htmlContent = this.createCompleteTemplateHTML(); + } + } else { + htmlContent = this.createCompleteTemplateHTML(); + } + + // Call the compressed PDF generation method + const compressedPDF = await generateCompressedPDF({ + htmlContent: htmlContent, + pageSize: this.selectedPageSize, + }); + + if (compressedPDF) { + // Process the compressed PDF + const pdfBlob = this.base64ToBlob(compressedPDF, "application/pdf"); + const pdfUrl = window.URL.createObjectURL(pdfBlob); + + // Download the compressed PDF + const downloadLink = document.createElement("a"); + downloadLink.href = pdfUrl; + downloadLink.download = `${ + this.selectedProperty?.Name || "Property" + }_Brochure_Compressed_${this.selectedPageSize}.pdf`; + downloadLink.style.display = "none"; + + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); + + // Clean up + setTimeout(() => { + window.URL.revokeObjectURL(pdfUrl); + }, 1000); + + this.hideProgress(); + this.showSuccess( + "Compressed PDF generated and downloaded successfully!" + ); + } + } catch (error) { + this.showError("Failed to generate compressed PDF: " + error.message); + } + } + + // Handle PDF download ready response + async handlePDFDownloadReady(pdfResult) { + try { + // Hide loading state + this.isLoading = false; + this.hideProgress(); + + // Set the download info for the modal + this.downloadInfo = { + filename: pdfResult.filename || "Unknown", + fileSize: pdfResult.file_size_mb + ? pdfResult.file_size_mb + " MB" + : "Unknown", + generatedAt: this.formatDate(pdfResult.generated_at), + expiresAt: this.formatDate(pdfResult.expires_at), + downloadUrl: pdfResult.download_url, + }; + // Automatically open download URL in new tab + window.open(pdfResult.download_url, "_blank"); + + // Show simple success message + this.showSuccess( + `✅ PDF generated successfully! File: ${pdfResult.filename} (${pdfResult.file_size_mb} MB) - Download opened in new tab.` + ); + this.showSuccess( + `✅ PDF generated successfully! File: ${pdfResult.filename} (${pdfResult.file_size_mb} MB)` + ); + } catch (error) { + this.showError("Error handling PDF download: " + error.message); + } + } + + // Modal control methods + closeDownloadModal() { + this.showDownloadModal = false; + } + + stopPropagation(event) { + event.stopPropagation(); + } + + copyDownloadLink() { + if (navigator.clipboard && this.downloadInfo) { + navigator.clipboard + .writeText(this.downloadInfo.downloadUrl) + .then(() => { + // Show feedback + const copyBtn = this.template.querySelector(".copy-btn"); + if (copyBtn) { + const originalText = copyBtn.textContent; + copyBtn.textContent = "✅ Copied!"; + copyBtn.classList.add("copied"); + + setTimeout(() => { + copyBtn.textContent = originalText; + copyBtn.classList.remove("copied"); + }, 2000); + } + }) + .catch((err) => { + alert("Failed to copy link to clipboard"); + }); + } + } + + openInNewTab() { + if (this.downloadInfo && this.downloadInfo.downloadUrl) { + window.open(this.downloadInfo.downloadUrl, "_blank"); + } + } + // Helper method to format dates + formatDate(dateString) { + if (!dateString) return "Unknown"; + const date = new Date(dateString); + return date.toLocaleString(); + } + // Create template HTML based on selection + createTemplateHTML() { + switch (this.selectedTemplateId) { + case "blank-template": + return this.createBlankTemplate(); + case "modern-home-template": + return this.createModernHomeTemplate(); + case "grand-oak-villa-template": + // Grand Oak Villa (black theme with gold accents) + return this.createGrandOakVillaTemplate(); + case "serenity-house-template": + return this.createSerenityHouseTemplate(); + case "luxury-mansion-template": + return this.createLuxuryMansionTemplate(); + default: + return this.createBlankTemplate(); + } + } + // Format description for PDF generation + formatDescriptionForPDF(description) { + if (!description || description.trim() === "") { + return "
Property description not available.
"; + } + + const raw = String(description).trim(); + + // If the description already contains HTML tags, trust it and return as-is + if (/[<][a-zA-Z][^>]*>/.test(raw)) { + return raw; + } + + const escapeHtml = (str) => + str + .replace(/&/g, "&") + .replace(//g, ">") + .replace(/\"/g, """) + .replace(/'/g, "'"); + + const lines = raw + .replace(/\r\n?/g, "\n") + .split("\n") + .map((l) => l.trim()); + + const bulletRe = /^\s*(?:[-*•]|\u2022)\s+(.*)$/; // -,*,• bullets + const numberedRe = /^\s*(\d+)[\.)]\s+(.*)$/; // 1. or 1) + + let htmlParts = []; + let listType = null; // 'ul' | 'ol' + let listBuffer = []; + + const flushList = () => { + if (!listType || listBuffer.length === 0) return; + htmlParts.push( + `<${listType}>` + + listBuffer.map((item) => `${escapeHtml(trimmed)}
`); + } + + flushList(); + return htmlParts.join(""); + } + + // Generate amenities HTML from property data + generateAmenitiesHTML(data) { + const amenities = []; + + // Check for common amenity fields in the property data + const amenityFields = [ + "amenities", + "features", + "facilities", + "amenitiesList", + "propertyAmenities", + "Amenities__c", + "Features__c", + "Facilities__c", + "Property_Amenities__c", + // Add the actual fields that are available in propertyData + "parkingSpaces", + "furnished", + "offeringType", + ]; + + // Try to find amenities in various field formats + for (const field of amenityFields) { + if (data[field] && data[field] !== "N/A") { + if (Array.isArray(data[field])) { + amenities.push(...data[field]); + } else if (typeof data[field] === "string") { + // For specific fields, format them properly + if (field === "parkingSpaces") { + amenities.push(`Parking: ${data[field]} spaces`); + } else if (field === "furnished") { + amenities.push(`Furnished: ${data[field]}`); + } else if (field === "offeringType") { + amenities.push(`Offering Type: ${data[field]}`); + } else { + // Split by common delimiters for other fields + const amenityList = data[field] + .split(/[,;|\n]/) + .map((a) => a.trim()) + .filter((a) => a); + amenities.push(...amenityList); + } + } + } + } + + // If no amenities found, return empty string + if (amenities.length === 0) { + return 'No amenities specified
${amenity}
`
+ )
+ .join("");
+ }
+
+ // Generate amenity list items (
+
`;
+ }
+ }
+
+ return `
+
+
+ Property Gallery
+
+ ${this.generatePropertyGalleryHTMLForImages(chunk)}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ${additionalGalleryPagesHTML}
+ `;
+ }
+
+ createModernHomeTemplate() {
+ const data = this.propertyData || {};
+ console.log("data-----------", data);
+ const propertyName = data.Name || data.propertyName;
+ const propertyType = data.Property_Type__c || data.propertyType;
+ const location = data.Address__c || data.location;
+ const price = data.Price__c || data.price;
+ const bedrooms = data.Bedrooms__c || data.bedrooms;
+ const bathrooms = data.Bathrooms__c || data.bathrooms;
+ const area = data.Square_Feet__c || data.area;
+
+ const description = this.formatDescriptionForPDF(
+ data.Description_English__c ||
+ data.descriptionEnglish ||
+ data.description ||
+ "This beautiful property offers exceptional value and modern amenities. Located in a prime area, it represents an excellent investment opportunity."
+ );
+
+ const referenceId =
+ data.pcrm__Title_English__c || data.Name || data.propertyName || "";
+
+ // Contact information
+ const agentName =
+ data.contactName || data.Agent_Name__c || data.agentName || "N/A";
+ const agentPhone =
+ data.contactPhone || data.Agent_Phone__c || data.agentPhone || "N/A";
+ const agentEmail =
+ data.contactEmail || data.Agent_Email__c || data.agentEmail || "N/A";
+
+ // Dynamic gallery and amenities
+ const propertyGallery = this.generatePropertyGalleryHTML();
+ const amenitiesHTML = this.generateAmenitiesHTML(data);
+
+ // Additional computed fields for full dynamic rendering
+ const status = data.Status__c || data.status || "Available";
+ const floor = data.Floor__c || data.floor || "N/A";
+ const parking =
+ data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A";
+ const yearBuilt = data.Build_Year__c || data.buildYear || "N/A";
+ const furnishing = data.Furnished__c || data.furnished || "N/A";
+ const maintenanceFee =
+ data.Maintenance_Fee__c || data.maintenanceFee || "N/A";
+ const serviceCharge = data.Service_Charge__c || data.serviceCharge || "N/A";
+
+ const ownerName = data.Owner_Name__c || data.ownerName || "N/A";
+ const ownerPhone = data.Owner_Phone__c || data.ownerPhone || "N/A";
+
+ const landmarks = data.Nearby_Landmarks__c || data.nearbyLandmarks || "N/A";
+ const transportation =
+ data.Transportation__c || data.transportation || "N/A";
+ const schools = data.Schools__c || data.schools || "N/A";
+ const hospitals = data.Hospitals__c || data.hospitals || "N/A";
+ const shopping = data.Shopping_Centers__c || data.shoppingCenters || "N/A";
+ const airportDistance =
+ data.Airport_Distance__c || data.airportDistance || "N/A";
+
+ const petFriendly =
+ data.Pet_Friendly__c !== "N/A"
+ ? data.Pet_Friendly__c
+ ? "Yes"
+ : "No"
+ : data.petFriendly || "N/A";
+ const smokingAllowed =
+ data.Smoking_Allowed__c !== "N/A"
+ ? data.Smoking_Allowed__c
+ ? "Yes"
+ : "No"
+ : data.smokingAllowed || "N/A";
+ const availableFrom =
+ data.Rent_Available_From__c ||
+ data.Available_From__c ||
+ data.availableFrom ||
+ "N/A";
+ const minimumContract =
+ data.Minimum_Contract__c || data.minimumContract || "N/A";
+ const securityDeposit =
+ data.Security_Deposit__c || data.securityDeposit || "N/A";
+
+ const mapsImageUrl =
+ this.getMapsImageUrl() ||
+ "https://plus.unsplash.com/premium_photo-1676467963268-5a20d7a7a448?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
+
+ // Build dynamic gallery pages with responsive grid
+ const allImages = Array.isArray(this.realPropertyImages)
+ ? this.realPropertyImages
+ : [];
+ const imagesPerPage = 6; // Optimal for A4 with 2x3 grid
+ let galleryPagesHTML = "";
+ if (allImages.length > 0) {
+ for (let i = 0; i < allImages.length; i += imagesPerPage) {
+ const chunk = allImages.slice(i, i + imagesPerPage);
+ const pageNumber = Math.floor(i / imagesPerPage) + 1;
+ const totalPages = Math.ceil(allImages.length / imagesPerPage);
+
+ const chunkHTML = chunk
+ .map((img, idx) => {
+ const title =
+ img.title ||
+ img.pcrm__Title__c ||
+ `Property Image ${i + idx + 1}`;
+ return ``;
+ })
+ .join("");
+ galleryPagesHTML += `
+ Basic Information
+
+
+ Property Type: ${propertyType}
+ Status: ${status}
+ City: ${city}
+ Community: ${community}
+ Sub Community: ${subCommunity}
+ Furnished: ${furnished}
+ Contact Details
+
+
+ Name: ${data.contactName || "N/A"}
+ Email: ${data.contactEmail || "N/A"}
+ Phone: ${data.contactPhone || "N/A"}
+ Location Details
+
+
+ City (Bayut): ${data.cityBayut || "N/A"}
+ City (Propertyfinder): ${data.cityPropertyfinder || "N/A"}
+ Community (Bayut): ${data.communityBayut || "N/A"}
+ Sub Community (Bayut): ${data.subCommunityBayut || "N/A"}
+ Locality (Bayut): ${data.localityBayut || "N/A"}
+ Sub Locality (Bayut): ${data.subLocalityBayut || "N/A"}
+ Tower (Bayut): ${data.towerBayut || "N/A"}
+ Unit Number: ${data.unitNumber || "N/A"}
+ Specifications
+
+
+ Bedrooms: ${bedrooms}
+ Bathrooms: ${bathrooms}
+ Size: ${size} ${sizeUnit}
+ Parking Spaces: ${parkingSpaces}
+ Build Year: ${buildYear}
+ Floor: ${data.floor || "N/A"}
+ Pricing
+
+
+ Rent Price: ${rentPriceMin}
+ Sale Price: ${salePriceMin}
+ Rent Price (Max): ${data.rentPriceMax || "N/A"}
+ Sale Price (Max): ${data.salePriceMax || "N/A"}
+ Rent Availability
+
+
+ Available From: ${data.rentAvailableFrom || "N/A"}
+ Available To: ${data.rentAvailableTo || "N/A"}
+ Property Description
+${titleEnglish}
+${descriptionEnglish}
+Amenities & Features
+
+
+ Parking Spaces: ${data.parkingSpaces || "N/A"}
+ Furnished: ${data.furnished || "N/A"}
+ Offering Type: ${data.offeringType || "N/A"}
+ Build Year: ${data.buildYear || "N/A"}
+ Property Gallery
+
+ ${
+ firstChunk.length > 0
+ ? this.generatePropertyGalleryHTMLForImages(firstChunk)
+ : this.generatePropertyGalleryHTML()
+ }
+
+
+
@@ -498,9 +537,73 @@
-
+
+
+
+
+
+
+
+
+
-
+
+ Pricing Information Options
+Select which pricing fields to include in your report
+ + +
+
+
+
+
+
+
+
+
+ Property Details Preview
@@ -545,6 +648,33 @@
+
@@ -576,28 +706,6 @@
-
- Agent Information
+
+
+
+ Agent Name:
+ {agentData.name}
+
+
+ Agent Email:
+ {agentData.email}
+
+
+ Agent Phone:
+ {agentData.phone}
+
+
+ Agent Title:
+ {agentData.title}
+
+
+ Company:
+ {agentData.company}
+
+
-
@@ -669,6 +777,17 @@
{propertyData.offeringType}
+
+
+ Pricing Information
-
-
-
- Rent Price (Min):
- {propertyData.rentPriceMin}
-
-
- Rent Price (Max):
- {propertyData.rentPriceMax}
-
-
- Sale Price (Min):
- {propertyData.salePriceMin}
-
-
- Sale Price (Max):
- {propertyData.salePriceMax}
-
-
+ Private Amenities:
+
+
@@ -814,6 +933,7 @@
→
+
@@ -875,7 +995,7 @@
title="Insert Square Footage">
Sq Ft
-
@@ -1041,12 +1161,12 @@
+
+ {amenity}
+
+
+