diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html index e5d4fd1..7d73e68 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.html @@ -1212,7 +1212,7 @@
- @@ -1276,10 +1276,10 @@ onchange={handlePageSizeChange}> A4 -
diff --git a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js index 2a863c6..bb3cfe1 100644 --- a/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js +++ b/force-app/main/default/lwc/propertyTemplateSelector/propertyTemplateSelector.js @@ -830,11 +830,23 @@ export default class PropertyTemplateSelector extends LightningElement { case "sample-template": this.selectedTemplateId = "sample-template"; break; - case "luxury-mansion-template": - this.selectedTemplateId = "luxury-mansion-template"; - break; - default: - break; + case "luxury-mansion-template": + this.selectedTemplateId = "luxury-mansion-template"; + break; + case "modern-home-a3-template": + this.selectedTemplateId = "modern-home-a3-template"; + break; + case "grand-oak-villa-a3-template": + this.selectedTemplateId = "grand-oak-villa-a3-template"; + break; + case "serenity-house-a3-template": + this.selectedTemplateId = "serenity-house-a3-template"; + break; + case "luxury-mansion-a3-template": + this.selectedTemplateId = "luxury-mansion-a3-template"; + break; + default: + break; } // Visually mark the selected template card with a black border @@ -1143,24 +1155,52 @@ export default class PropertyTemplateSelector extends LightningElement { // Initialize viewport with exact PDF dimensions this.initializeViewportDimensions(); - // Special handling for A3 mode to prevent image reset - if (newPageSize === "A3") { - console.log("A3 mode selected - preserving all image positions"); - // For A3, we need to be extra careful about position preservation - setTimeout(() => { - this.restoreCurrentImageState(currentImageState); - // Additional position preservation for A3 - this.preserveElementPositions(); - // Extra A3-specific position lock - setTimeout(() => { - this.preserveElementPositions(); - console.log("A3 mode - final position preservation completed"); - }, 100); - }, 300); - } else { - // Normal restoration for other page sizes - this.restoreCurrentImageState(currentImageState); - } + // Switch to appropriate A3 template if switching to A3, or back to A4 template + if (newPageSize === "A3") { + // Switch to A3 version of current template + if (this.selectedTemplateId === "modern-home-template") { + this.selectedTemplateId = "modern-home-a3-template"; + } else if (this.selectedTemplateId === "grand-oak-villa-template") { + this.selectedTemplateId = "grand-oak-villa-a3-template"; + } else if (this.selectedTemplateId === "serenity-house-template") { + this.selectedTemplateId = "serenity-house-a3-template"; + } else if (this.selectedTemplateId === "luxury-mansion-template") { + this.selectedTemplateId = "luxury-mansion-a3-template"; + } + } else if (newPageSize === "A4") { + // Switch back to A4 version of current template + if (this.selectedTemplateId === "modern-home-a3-template") { + this.selectedTemplateId = "modern-home-template"; + } else if (this.selectedTemplateId === "grand-oak-villa-a3-template") { + this.selectedTemplateId = "grand-oak-villa-template"; + } else if (this.selectedTemplateId === "serenity-house-a3-template") { + this.selectedTemplateId = "serenity-house-template"; + } else if (this.selectedTemplateId === "luxury-mansion-a3-template") { + this.selectedTemplateId = "luxury-mansion-template"; + } + } + + // Clear cached content to force regeneration with new template + this.cachedTemplateContent = null; + + // Special handling for A3 mode to prevent image reset + if (newPageSize === "A3") { + console.log("A3 mode selected - preserving all image positions"); + // For A3, we need to be extra careful about position preservation + setTimeout(() => { + this.restoreCurrentImageState(currentImageState); + // Additional position preservation for A3 + this.preserveElementPositions(); + // Extra A3-specific position lock + setTimeout(() => { + this.preserveElementPositions(); + console.log("A3 mode - final position preservation completed"); + }, 100); + }, 300); + } else { + // Normal restoration for other page sizes + this.restoreCurrentImageState(currentImageState); + } // Re-fit to width when page size changes setTimeout(() => this.fitToWidth(), 0); @@ -4109,6 +4149,14 @@ export default class PropertyTemplateSelector extends LightningElement { return this.createSerenityHouseTemplate(); case "luxury-mansion-template": return this.createLuxuryMansionTemplate(); + case "modern-home-a3-template": + return this.createModernHomeA3Template(); + case "grand-oak-villa-a3-template": + return this.createGrandOakVillaA3Template(); + case "serenity-house-a3-template": + return this.createSerenityHouseA3Template(); + case "luxury-mansion-a3-template": + return this.createLuxuryMansionA3Template(); default: return this.createBlankTemplate(); } @@ -5486,7 +5534,7 @@ export default class PropertyTemplateSelector extends LightningElement {
- +
@@ -8499,6 +8547,1509 @@ ${galleryPagesHTML} } } + // A3 Template Functions + createModernHomeA3Template() { + const data = this.propertyData || {}; + const dimensions = this.getPageDimensions(); // A3 dimensions + + 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; + // Use price toggle and selected pricing fields to determine what to display + let price = "Price on Request"; + if (this.showPrice) { + const selectedPrices = []; + + // Add selected pricing fields based on step 2 selection + if (this.pricingSelection.includeRentPriceMin && data.rentPriceMin && data.rentPriceMin !== "N/A") { + selectedPrices.push(data.rentPriceMin); + } + if (this.pricingSelection.includeRentPriceMax && data.rentPriceMax && data.rentPriceMax !== "N/A") { + selectedPrices.push(data.rentPriceMax); + } + if (this.pricingSelection.includeSalePriceMin && data.salePriceMin && data.salePriceMin !== "N/A") { + selectedPrices.push(data.salePriceMin); + } + if (this.pricingSelection.includeSalePriceMax && data.salePriceMax && data.salePriceMax !== "N/A") { + selectedPrices.push(data.salePriceMax); + } + + // If no pricing fields are selected, fall back to default price + if (selectedPrices.length === 0) { + price = data.Price__c || data.price || "Price on Request"; + } else { + // Join selected prices with " | " separator + price = selectedPrices.join(" | "); + } + } + const bedrooms = data.Bedrooms__c || data.bedrooms; + const bathrooms = data.Bathrooms__c || data.bathrooms; + const area = data.Square_Feet__c || data.area; + + // Get description and format it dynamically + const rawDescription = 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 description = this.formatDescriptionForPDF(rawDescription); + + // Add dynamic class based on description length for CSS targeting + const descriptionLength = rawDescription.length; + const descriptionClass = descriptionLength > 500 ? 'description-long' : + descriptionLength > 200 ? 'description-medium' : 'description-short'; + + const referenceId = + data.pcrm__Title_English__c || data.Name || data.propertyName || ""; + + // Define logoUrl for template usage + const logoUrl = "https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757764346286"; + + // Agent information from loaded agent data + const agentName = this.agentData.name || "N/A"; + const agentPhone = this.agentData.phone || "N/A"; + const agentEmail = this.agentData.email || "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 = 12; // 3x4 grid for A3 - more images per page + 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}`; + + // Ensure image URL is absolute for PDF generation + const imageUrl = img.url && img.url.startsWith('http') ? img.url : + img.url ? `https://salesforce.tech4biz.io${img.url}` : + 'https://via.placeholder.com/400x200?text=No+Image'; + + // First image gets half height, others get standard height + const imageHeight = idx === 0 ? '100px' : '150px'; + + return `
+ ${title} + +
`; + }) + .join(""); + galleryPagesHTML += ` +
+
+
+

Property Gallery

+
+
+
${chunkHTML}
+
+
+ +
`; + } + } + + return ` + + + + + Property Brochure - A3 Size + + + + + +
+
+
+

${propertyName}

+

${location}

+
+
${price}
+
+ ${bedrooms} Beds + ${bathrooms} Baths + ${area} +
+
+
+
+ +
+
+

About this Property

+ ${description} +
+ + +
+ + +
+ +
+
+ +
+ +
+
+

Specifications

+
+
Status: ${status}
+
Type: ${propertyType}
+
Floor: ${floor}
+
Parking: ${parking}
+
Year Built: ${yearBuilt}
+
Furnishing: ${furnishing}
+
+
+ +
+

Amenities & Features

+
+ ${amenitiesHTML} +
+
+
+ + +
+ + ${galleryPagesHTML} + + +`; + } + + createGrandOakVillaA3Template() { + const data = this.propertyData || {}; + const dimensions = this.getPageDimensions(); // A3 dimensions + + const propertyName = data.Name || data.propertyName || "Property Name"; + const propertyType = data.Property_Type__c || data.propertyType || "N/A"; + const location = data.Address__c || data.location || "Location"; + const referenceId = data.pcrm__Title_English__c || data.Name || data.propertyName || ""; + const agentName = this.agentData.name || "N/A"; + const agentPhone = this.agentData.phone || "N/A"; + const agentEmail = this.agentData.email || "N/A"; + const ownerName = data.Owner_Name__c || data.ownerName || "N/A"; + const ownerPhone = data.Owner_Phone__c || data.ownerPhone || "N/A"; + const ownerEmail = data.Owner_Email__c || data.ownerEmail || "N/A"; + + // Define logoUrl for template usage + const logoUrl = "https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757764346286"; + + // Dynamic pricing with fallbacks - use price toggle and selected pricing fields + let price = "Price on Request"; + if (this.showPrice) { + const selectedPrices = []; + + // Add selected pricing fields based on step 2 selection + if (this.pricingSelection.includeRentPriceMin && data.rentPriceMin && data.rentPriceMin !== "N/A") { + selectedPrices.push(data.rentPriceMin); + } + if (this.pricingSelection.includeRentPriceMax && data.rentPriceMax && data.rentPriceMax !== "N/A") { + selectedPrices.push(data.rentPriceMax); + } + if (this.pricingSelection.includeSalePriceMin && data.salePriceMin && data.salePriceMin !== "N/A") { + selectedPrices.push(data.salePriceMin); + } + if (this.pricingSelection.includeSalePriceMax && data.salePriceMax && data.salePriceMax !== "N/A") { + selectedPrices.push(data.salePriceMax); + } + + // If no pricing fields are selected, fall back to default price + if (selectedPrices.length === 0) { + price = data.Sale_Price_Min__c || + data.Rent_Price_Min__c || + data.Price__c || + data.salePriceMin || + data.rentPriceMin || + data.price || "Price on Request"; + } else { + // Join selected prices with " | " separator + price = selectedPrices.join(" | "); + } + } + + const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A"; + const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A"; + const squareFeet = data.Square_Feet__c || data.squareFeet || data.area || "N/A"; + const status = data.Status__c || data.status || "Available"; + const yearBuilt = data.Build_Year__c || data.buildYear || "N/A"; + const floor = data.Floor__c || data.floor || "N/A"; + const parking = data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A"; + const furnishing = data.Furnished__c || data.furnished || "N/A"; + + // Get description and format it dynamically + const rawDescription = data.Description_English__c || + data.descriptionEnglish || + data.description || + "This exceptional property represents the pinnacle of luxury living. Meticulously designed with attention to every detail, it offers an unparalleled lifestyle experience in one of the most prestigious locations."; + + const description = this.formatDescriptionForPDF(rawDescription); + + // Dynamic gallery and amenities + const propertyGallery = this.generatePropertyGalleryHTML(); + const amenitiesHTML = this.generateAmenitiesHTML(data); + + // Additional computed fields for full dynamic rendering + const maintenanceFee = data.Maintenance_Fee__c || data.maintenanceFee || "N/A"; + const serviceCharge = data.Service_Charge__c || data.serviceCharge || "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 for A3 + const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; + const imagesPerPage = 12; // 3x4 grid for A3 - more images per page + 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}`; + const imageUrl = img.url && img.url.startsWith('http') ? img.url : + img.url ? `https://salesforce.tech4biz.io${img.url}` : + 'https://via.placeholder.com/400x200?text=No+Image'; + + return `
+ ${title} +
`; + }) + .join(""); + galleryPagesHTML += ` +
+
+
+

Property Gallery

+
+
+
${chunkHTML}
+
+
+ +
`; + } + } + + return ` + + + + + Prestige Real Estate Brochure - A3 Size + + + + + + + + +
+
+
+

Grand Oak Villa

+ Luxury Living Redefined +
+
+
+

Property Overview

+
+
+ Property Name: + ${propertyName} +
+
+ Location: + ${location} +
+
+ Price: + ${price} +
+
+ Reference ID: + ${referenceId} +
+
+
+ +
+

Specifications

+
+
+ Bedrooms: + ${bedrooms} +
+
+ Bathrooms: + ${bathrooms} +
+
+ Area: + ${squareFeet} +
+
+ Status: + ${status} +
+
+ Year Built: + ${yearBuilt} +
+
+ Floor: + ${floor} +
+
+
+ +
+

Description

+
+ ${description} +
+
+ +
+

Amenities & Features

+
+ ${amenitiesHTML} +
+
+
+ +
+
+ + ${galleryPagesHTML} + + +`; + } + + createSerenityHouseA3Template() { + const data = this.propertyData || {}; + const dimensions = this.getPageDimensions(); // A3 dimensions + + const propertyName = data.Name || data.propertyName || "Property Name"; + const location = data.Address__c || data.location || "Location"; + const referenceId = data.pcrm__Title_English__c || data.Name || data.propertyName || ""; + const agentName = this.agentData.name || "N/A"; + const agentPhone = this.agentData.phone || "N/A"; + const agentEmail = this.agentData.email || "N/A"; + + const logoUrl = "https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757764346286"; + + // Dynamic pricing + let price = "Price on Request"; + if (this.showPrice) { + const selectedPrices = []; + if (this.pricingSelection.includeRentPriceMin && data.rentPriceMin && data.rentPriceMin !== "N/A") { + selectedPrices.push(data.rentPriceMin); + } + if (this.pricingSelection.includeRentPriceMax && data.rentPriceMax && data.rentPriceMax !== "N/A") { + selectedPrices.push(data.rentPriceMax); + } + if (this.pricingSelection.includeSalePriceMin && data.salePriceMin && data.salePriceMin !== "N/A") { + selectedPrices.push(data.salePriceMin); + } + if (this.pricingSelection.includeSalePriceMax && data.salePriceMax && data.salePriceMax !== "N/A") { + selectedPrices.push(data.salePriceMax); + } + + if (selectedPrices.length === 0) { + price = data.Sale_Price_Min__c || data.Rent_Price_Min__c || data.Price__c || data.salePriceMin || data.rentPriceMin || data.price || "Price on Request"; + } else { + price = selectedPrices.join(" | "); + } + } + + const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A"; + const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A"; + const squareFeet = data.Square_Feet__c || data.squareFeet || data.area || "N/A"; + const status = data.Status__c || data.status || "Available"; + const yearBuilt = data.Build_Year__c || data.buildYear || "N/A"; + const floor = data.Floor__c || data.floor || "N/A"; + const parking = data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A"; + const furnishing = data.Furnished__c || data.furnished || "N/A"; + + const rawDescription = data.Description_English__c || data.descriptionEnglish || data.description || "This serene property offers a peaceful retreat from the hustle and bustle of city life. Designed with tranquility in mind, it provides the perfect sanctuary for modern living."; + const description = this.formatDescriptionForPDF(rawDescription); + + const amenitiesHTML = this.generateAmenitiesHTML(data); + + // Build dynamic gallery pages for A3 + const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; + const imagesPerPage = 12; // 3x4 grid for A3 + let galleryPagesHTML = ""; + if (allImages.length > 0) { + for (let i = 0; i < allImages.length; i += imagesPerPage) { + const chunk = allImages.slice(i, i + imagesPerPage); + const chunkHTML = chunk + .map((img, idx) => { + const title = img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`; + const imageUrl = img.url && img.url.startsWith('http') ? img.url : + img.url ? `https://salesforce.tech4biz.io${img.url}` : + 'https://via.placeholder.com/400x200?text=No+Image'; + + return `
+ ${title} +
`; + }) + .join(""); + galleryPagesHTML += ` +
+
+
+

Property Gallery

+
+
+
${chunkHTML}
+
+
+ +
`; + } + } + + return ` + + + + + Serenity House Brochure - A3 Size + + + + + + + +
+
+
+

Serenity House

+ Peaceful Living +
+
+
+

Property Overview

+
+
+ Property Name: + ${propertyName} +
+
+ Location: + ${location} +
+
+ Price: + ${price} +
+
+ Reference ID: + ${referenceId} +
+
+
+ +
+

Specifications

+
+
+ Bedrooms: + ${bedrooms} +
+
+ Bathrooms: + ${bathrooms} +
+
+ Area: + ${squareFeet} +
+
+ Status: + ${status} +
+
+ Year Built: + ${yearBuilt} +
+
+ Floor: + ${floor} +
+
+
+ +
+

Description

+
+ ${description} +
+
+ +
+

Amenities & Features

+
+ ${amenitiesHTML} +
+
+
+ +
+
+ + ${galleryPagesHTML} + +`; + } + + createLuxuryMansionA3Template() { + const data = this.propertyData || {}; + const dimensions = this.getPageDimensions(); // A3 dimensions + + const propertyName = data.Name || data.propertyName || "Property Name"; + const propertyType = data.Property_Type__c || data.propertyType || "N/A"; + const location = data.Address__c || data.location || "Location"; + const referenceId = data.pcrm__Title_English__c || data.Name || data.propertyName || ""; + const agentName = this.agentData.name || "N/A"; + const agentPhone = this.agentData.phone || "N/A"; + const agentEmail = this.agentData.email || "N/A"; + + const logoUrl = "https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757764346286"; + + // Dynamic pricing + let price = "Price on Request"; + if (this.showPrice) { + const selectedPrices = []; + if (this.pricingSelection.includeRentPriceMin && data.rentPriceMin && data.rentPriceMin !== "N/A") { + selectedPrices.push(data.rentPriceMin); + } + if (this.pricingSelection.includeRentPriceMax && data.rentPriceMax && data.rentPriceMax !== "N/A") { + selectedPrices.push(data.rentPriceMax); + } + if (this.pricingSelection.includeSalePriceMin && data.salePriceMin && data.salePriceMin !== "N/A") { + selectedPrices.push(data.salePriceMin); + } + if (this.pricingSelection.includeSalePriceMax && data.salePriceMax && data.salePriceMax !== "N/A") { + selectedPrices.push(data.salePriceMax); + } + + if (selectedPrices.length === 0) { + price = data.Sale_Price_Min__c || data.Rent_Price_Min__c || data.Price__c || data.salePriceMin || data.rentPriceMin || data.price || "Price on Request"; + } else { + price = selectedPrices.join(" | "); + } + } + + const bedrooms = data.Bedrooms__c || data.bedrooms || "N/A"; + const bathrooms = data.Bathrooms__c || data.bathrooms || "N/A"; + const squareFeet = data.Square_Feet__c || data.squareFeet || data.area || "N/A"; + const status = data.Status__c || data.status || "Available"; + const yearBuilt = data.Build_Year__c || data.buildYear || "N/A"; + const floor = data.Floor__c || data.floor || "N/A"; + const parking = data.Parking_Spaces__c || data.parkingSpaces || data.parking || "N/A"; + const furnishing = data.Furnished__c || data.furnished || "N/A"; + + const rawDescription = data.Description_English__c || data.descriptionEnglish || data.description || "This magnificent luxury mansion represents the epitome of sophisticated living. Every detail has been carefully crafted to provide an unparalleled residential experience."; + const description = this.formatDescriptionForPDF(rawDescription); + + const amenitiesHTML = this.generateAmenitiesHTML(data); + + // Build dynamic gallery pages for A3 + const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; + const imagesPerPage = 12; // 3x4 grid for A3 + let galleryPagesHTML = ""; + if (allImages.length > 0) { + for (let i = 0; i < allImages.length; i += imagesPerPage) { + const chunk = allImages.slice(i, i + imagesPerPage); + const chunkHTML = chunk + .map((img, idx) => { + const title = img.title || img.pcrm__Title__c || `Property Image ${i + idx + 1}`; + const imageUrl = img.url && img.url.startsWith('http') ? img.url : + img.url ? `https://salesforce.tech4biz.io${img.url}` : + 'https://via.placeholder.com/400x200?text=No+Image'; + + return `
+ ${title} +
`; + }) + .join(""); + galleryPagesHTML += ` +
+
+
+

Property Gallery

+
+
+
${chunkHTML}
+
+
+ +
`; + } + } + + return ` + + + + + Luxury Mansion Brochure - A3 Size + + + + + + + +
+
+
+

Luxury Mansion

+ Ultimate Living Experience +
+
+
+

Property Overview

+
+
+ Property Name: + ${propertyName} +
+
+ Location: + ${location} +
+
+ Price: + ${price} +
+
+ Reference ID: + ${referenceId} +
+
+
+ +
+

Specifications

+
+
+ Bedrooms: + ${bedrooms} +
+
+ Bathrooms: + ${bathrooms} +
+
+ Area: + ${squareFeet} +
+
+ Status: + ${status} +
+
+ Year Built: + ${yearBuilt} +
+
+ Floor: + ${floor} +
+
+
+ +
+

Description

+
+ ${description} +
+
+ +
+

Amenities & Features

+
+ ${amenitiesHTML} +
+
+
+ +
+
+ + ${galleryPagesHTML} + +`; + } + // Helper function to get template-specific footer getTemplateSpecificFooter() { const logoUrl = 'https://tso3listingimages.s3.amazonaws.com/00DFV000001HtSX/a0LFV000001NhJq2AK/companyLogo.jpeg?t=1757834589169'; @@ -8548,6 +10099,50 @@ ${galleryPagesHTML} `; + case 'modern-home-a3-template': + return ` + `; + + case 'grand-oak-villa-a3-template': + return ` + `; + + case 'serenity-house-a3-template': + return ` + `; + + case 'luxury-mansion-a3-template': + return ` + `; + default: return `
@@ -10016,6 +11611,10 @@ ${galleryPagesHTML} img.style.height = "auto"; img.draggable = true; img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); + img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); + img.addEventListener("dragover", this.handleImageDragOver.bind(this)); + img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); + img.addEventListener("drop", this.handleImageDrop.bind(this)); this.selectedElement.parentNode.insertBefore( img, @@ -10430,12 +12029,149 @@ ${galleryPagesHTML} // Handle image drag start handleImageDragStart(event) { + console.log("=== IMAGE DRAG START ==="); + console.log("Dragged element:", event.target); + console.log("Element src:", event.target.src); + console.log("Element alt:", event.target.alt); + console.log("Element draggable:", event.target.draggable); + + // Store the dragged image element and its properties + this.draggedImageElement = event.target; + this.draggedImageSrc = event.target.src; + this.draggedImageAlt = event.target.alt; + event.dataTransfer.setData("text/plain", "image"); event.dataTransfer.effectAllowed = "move"; + + // Add visual feedback + event.target.style.opacity = "0.5"; + event.target.style.transform = "scale(0.95)"; + event.target.style.transition = "all 0.2s ease"; + + console.log("✅ Drag state stored:", { + element: this.draggedImageElement, + src: this.draggedImageSrc, + alt: this.draggedImageAlt + }); + + // Test: Add a simple alert to confirm drag is working + console.log("🚀 DRAG STARTED - Check if you see this message!"); } + // Handle image drag end handleImageDragEnd(event) { - // Remove any drag feedback + // Remove visual feedback + if (this.draggedImageElement) { + this.draggedImageElement.style.opacity = ""; + this.draggedImageElement.style.transform = ""; + } + + // Clear drag state + this.draggedImageElement = null; + this.draggedImageSrc = null; + this.draggedImageAlt = null; + } + + // Handle image drag over + handleImageDragOver(event) { + console.log("🔄 DRAG OVER EVENT!"); + event.preventDefault(); + event.dataTransfer.dropEffect = "move"; + + // Find the target image element (could be the target itself or a child) + let targetImage = event.target; + if (event.target.tagName !== 'IMG') { + targetImage = event.target.querySelector('img'); + } + + // Add visual feedback to drop target + if (targetImage && targetImage.tagName === 'IMG' && targetImage !== this.draggedImageElement) { + console.log("🎯 Valid drop target detected:", targetImage); + targetImage.style.border = "3px dashed #007bff"; + targetImage.style.borderRadius = "8px"; + targetImage.style.transition = "all 0.2s ease"; + } + } + + // Handle image drag leave + handleImageDragLeave(event) { + // Find the target image element (could be the target itself or a child) + let targetImage = event.target; + if (event.target.tagName !== 'IMG') { + targetImage = event.target.querySelector('img'); + } + + // Remove visual feedback + if (targetImage && targetImage.tagName === 'IMG') { + targetImage.style.border = ""; + targetImage.style.borderRadius = ""; + } + } + + // Handle image drop for swapping + handleImageDrop(event) { + console.log("🎯 DROP EVENT TRIGGERED!"); + event.preventDefault(); + event.stopPropagation(); + + console.log("=== IMAGE DROP EVENT ==="); + console.log("Event target:", event.target); + console.log("Event target tagName:", event.target.tagName); + console.log("Dragged image element:", this.draggedImageElement); + console.log("Dragged image src:", this.draggedImageSrc); + + // Find the target image element (could be the target itself or a child) + let targetImage = event.target; + if (event.target.tagName !== 'IMG') { + // Look for an img element within the target + targetImage = event.target.querySelector('img'); + console.log("Looking for img in container, found:", targetImage); + } + + // Remove visual feedback + if (targetImage && targetImage.tagName === 'IMG') { + targetImage.style.border = ""; + targetImage.style.borderRadius = ""; + } + + // Check if we're dropping on another image + if (targetImage && + targetImage.tagName === 'IMG' && + this.draggedImageElement && + targetImage !== this.draggedImageElement) { + + console.log("✅ Valid drop detected - performing swap"); + console.log("Target image:", targetImage); + + // Swap the image sources + const targetImageSrc = targetImage.src; + const targetImageAlt = targetImage.alt; + + console.log("Target image src:", targetImageSrc); + console.log("Target image alt:", targetImageAlt); + + // Perform the swap + targetImage.src = this.draggedImageSrc; + targetImage.alt = this.draggedImageAlt; + this.draggedImageElement.src = targetImageSrc; + this.draggedImageElement.alt = targetImageAlt; + + console.log("✅ Images swapped successfully!"); + console.log("New target src:", targetImage.src); + console.log("New dragged src:", this.draggedImageElement.src); + + // Show success message + this.showSuccess("Images swapped successfully!"); + + // Save undo state + this.saveUndoState(); + } else { + console.log("❌ Invalid drop - conditions not met"); + console.log("Target image found:", !!targetImage); + console.log("Is IMG:", targetImage && targetImage.tagName === 'IMG'); + console.log("Has dragged element:", !!this.draggedImageElement); + console.log("Different elements:", targetImage !== this.draggedImageElement); + } } // Start resize operation @@ -10911,6 +12647,91 @@ ${galleryPagesHTML} }, 100); } + // Helper function to get center position of the screen for element insertion + getCenterPosition() { + const editor = this.template.querySelector(".enhanced-editor-content"); + if (!editor) { + return { x: 50, y: 50 }; // Default position if editor not found + } + + const editorRect = editor.getBoundingClientRect(); + + // Get screen center position + const screenCenterX = window.innerWidth / 2; + const screenCenterY = window.innerHeight / 2 - (window.innerHeight * 0.5); // Bring up by 60vh + + // Calculate position relative to editor + const x = screenCenterX - editorRect.left; + const y = screenCenterY - editorRect.top; + + // Offset by half the element size to center it properly + // Default element sizes: images (300x200), text (150x40), tables (400x150) + const elementWidth = 300; // Default width for most elements + const elementHeight = 200; // Default height for most elements + + const finalX = x - (elementWidth / 2); + const finalY = y - (elementHeight / 2); + + // Ensure position is within editor bounds + const maxX = editorRect.width - elementWidth; + const maxY = editorRect.height - elementHeight; + + return { + x: Math.max(10, Math.min(finalX, maxX)), + y: Math.max(10, Math.min(finalY, maxY)) + }; + } + + // Helper function to get center position for specific element types + getCenterPositionForElement(elementType = 'default') { + const editor = this.template.querySelector(".enhanced-editor-content"); + if (!editor) { + return { x: 50, y: 50 }; + } + + const editorRect = editor.getBoundingClientRect(); + + // Get screen center position + const screenCenterX = window.innerWidth / 2; + const screenCenterY = window.innerHeight / 2 - (window.innerHeight * 0.6); // Bring up by 60vh + + // Calculate position relative to editor + const x = screenCenterX - editorRect.left; + const y = screenCenterY - editorRect.top; + + // Define element-specific dimensions + let elementWidth, elementHeight; + switch(elementType) { + case 'image': + elementWidth = 300; + elementHeight = 200; + break; + case 'text': + elementWidth = 150; + elementHeight = 40; + break; + case 'table': + elementWidth = 400; + elementHeight = 150; + break; + default: + elementWidth = 300; + elementHeight = 200; + } + + const finalX = x - (elementWidth / 2); + const finalY = y - (elementHeight / 2); + + // Ensure position is within editor bounds + const maxX = editorRect.width - elementWidth; + const maxY = editorRect.height - elementHeight; + + return { + x: Math.max(10, Math.min(finalX, maxX)), + y: Math.max(10, Math.min(finalY, maxY)) + }; + } + // Helper function to insert text at cursor position insertTextAtCursor(text) { const editor = this.template.querySelector(".enhanced-editor-content"); @@ -11103,6 +12924,9 @@ ${galleryPagesHTML} console.log("=== METHOD 4: Background image detection ==="); if (!clickedImage) { let currentElement = e.target; + let heroBackgroundImage = null; + let otherBackgroundImage = null; + while (currentElement && currentElement !== editor) { // Check for background images on any element (not just positioned ones) const computedStyle = window.getComputedStyle(currentElement); @@ -11113,18 +12937,39 @@ ${galleryPagesHTML} backgroundImage !== "none" && backgroundImage !== "initial" ) { - // Create a virtual IMG element for background images - const virtualImg = document.createElement("img"); - virtualImg.src = backgroundImage.replace( - /url\(['"]?(.+?)['"]?\)/, - "$1" - ); - virtualImg.isBackgroundImage = true; - virtualImg.style.backgroundImage = backgroundImage; - virtualImg.originalElement = currentElement; // Store reference to original element - clickedImage = virtualImg; - console.log("✅ Method 4 SUCCESS: Found background image", virtualImg); - break; + // Check if this is a hero section + const isHeroSection = currentElement.classList.contains('hero') || + currentElement.classList.contains('p1-image-side') || + currentElement.classList.contains('p2-image'); + + if (isHeroSection) { + // Create a virtual IMG element for hero background images + const virtualImg = document.createElement("img"); + virtualImg.src = backgroundImage.replace( + /url\(['"]?(.+?)['"]?\)/, + "$1" + ); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = backgroundImage; + virtualImg.originalElement = currentElement; + heroBackgroundImage = virtualImg; + console.log("✅ Method 4 SUCCESS: Found HERO background image", virtualImg); + break; // Prioritize hero sections - break immediately + } else { + // Store other background images for fallback + if (!otherBackgroundImage) { + const virtualImg = document.createElement("img"); + virtualImg.src = backgroundImage.replace( + /url\(['"]?(.+?)['"]?\)/, + "$1" + ); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = backgroundImage; + virtualImg.originalElement = currentElement; + otherBackgroundImage = virtualImg; + console.log("✅ Method 4: Found other background image", virtualImg); + } + } } // Also check if this element has a background image set via CSS classes @@ -11138,7 +12983,9 @@ ${galleryPagesHTML} className.includes("hero") || className.includes("banner") || className.includes("card") || - className.includes("property") + className.includes("property") || + className.includes("p1-image-side") || + className.includes("p2-image") ) { const classStyle = window.getComputedStyle(currentElement); const classBgImage = classStyle.backgroundImage; @@ -11147,17 +12994,35 @@ ${galleryPagesHTML} classBgImage !== "none" && classBgImage !== "initial" ) { - const virtualImg = document.createElement("img"); - virtualImg.src = classBgImage.replace( - /url\(['"]?(.+?)['"]?\)/, - "$1" - ); - virtualImg.isBackgroundImage = true; - virtualImg.style.backgroundImage = classBgImage; - virtualImg.originalElement = currentElement; - clickedImage = virtualImg; - console.log("✅ Method 4 SUCCESS: Found CSS class background image", virtualImg); - break; + // Check if this is a hero section + const isHeroSection = currentElement.classList.contains('hero') || + currentElement.classList.contains('p1-image-side') || + currentElement.classList.contains('p2-image'); + + if (isHeroSection) { + const virtualImg = document.createElement("img"); + virtualImg.src = classBgImage.replace( + /url\(['"]?(.+?)['"]?\)/, + "$1" + ); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = classBgImage; + virtualImg.originalElement = currentElement; + heroBackgroundImage = virtualImg; + console.log("✅ Method 4 SUCCESS: Found HERO CSS class background image", virtualImg); + break; // Prioritize hero sections - break immediately + } else if (!otherBackgroundImage) { + const virtualImg = document.createElement("img"); + virtualImg.src = classBgImage.replace( + /url\(['"]?(.+?)['"]?\)/, + "$1" + ); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = classBgImage; + virtualImg.originalElement = currentElement; + otherBackgroundImage = virtualImg; + console.log("✅ Method 4: Found other CSS class background image", virtualImg); + } } } } @@ -11165,7 +13030,15 @@ ${galleryPagesHTML} currentElement = currentElement.parentElement; } - if (!clickedImage) { + + // Use hero background image if found, otherwise fall back to other background image + if (heroBackgroundImage) { + clickedImage = heroBackgroundImage; + console.log("✅ Method 4 SUCCESS: Using HERO background image", clickedImage); + } else if (otherBackgroundImage) { + clickedImage = otherBackgroundImage; + console.log("✅ Method 4 SUCCESS: Using other background image", clickedImage); + } else { console.log("❌ Method 4 FAILED: No background image found"); } } else { @@ -11209,14 +13082,29 @@ ${galleryPagesHTML} const computedStyle = window.getComputedStyle(element); const bgImage = computedStyle.backgroundImage; if (bgImage && bgImage !== "none" && bgImage !== "initial" && bgImage.includes("url(")) { - const virtualImg = document.createElement("img"); - virtualImg.src = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); - virtualImg.isBackgroundImage = true; - virtualImg.style.backgroundImage = bgImage; - virtualImg.originalElement = element; - clickedImage = virtualImg; - console.log("Found layered background image:", element, bgImage); - break; + // Check if this is a hero section + const isHeroSection = element.classList.contains('hero') || + element.classList.contains('p1-image-side') || + element.classList.contains('p2-image'); + + if (isHeroSection) { + const virtualImg = document.createElement("img"); + virtualImg.src = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = bgImage; + virtualImg.originalElement = element; + clickedImage = virtualImg; + console.log("Found layered HERO background image:", element, bgImage); + break; // Prioritize hero sections - break immediately + } else if (!clickedImage) { + const virtualImg = document.createElement("img"); + virtualImg.src = bgImage.replace(/url\(['"]?([^'"]*)['"]?\)/, "$1"); + virtualImg.isBackgroundImage = true; + virtualImg.style.backgroundImage = bgImage; + virtualImg.originalElement = element; + clickedImage = virtualImg; + console.log("Found layered background image:", element, bgImage); + } } // Check for pseudo-elements with background images (::before, ::after) @@ -11410,12 +13298,16 @@ ${galleryPagesHTML} const editor = this.template.querySelector(".enhanced-editor-content"); if (editor) { this.setupEditorClickHandler(); + + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('text'); + const textElement = document.createElement("div"); textElement.className = "draggable-element draggable-text"; textElement.contentEditable = true; textElement.innerHTML = "Click to edit text"; - textElement.style.left = "50px"; - textElement.style.top = "50px"; + textElement.style.left = `${centerPos.x}px`; + textElement.style.top = `${centerPos.y}px`; textElement.style.width = "200px"; textElement.style.height = "40px"; textElement.style.zIndex = "1000"; @@ -11651,6 +13543,7 @@ ${galleryPagesHTML} const img = document.createElement("img"); img.src = imageUrl; img.alt = fileName; + img.draggable = true; // Enable dragging img.style.cssText = ` width: 100%; height: auto; @@ -11659,6 +13552,13 @@ ${galleryPagesHTML} object-fit: cover; `; + // Add drag and drop listeners for image swapping + img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); + img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); + img.addEventListener("dragover", this.handleImageDragOver.bind(this)); + img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); + img.addEventListener("drop", this.handleImageDrop.bind(this)); + // Create file name overlay const fileNameOverlay = document.createElement("div"); fileNameOverlay.style.cssText = ` @@ -11713,11 +13613,14 @@ ${galleryPagesHTML} this.saveUndoState(); this.setupEditorClickHandler(); + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('image'); + // Create draggable image container const imageContainer = document.createElement("div"); imageContainer.className = "draggable-image-container"; - imageContainer.style.left = "50px"; - imageContainer.style.top = "50px"; + imageContainer.style.left = `${centerPos.x}px`; + imageContainer.style.top = `${centerPos.y}px`; imageContainer.style.width = "200px"; imageContainer.style.height = "150px"; imageContainer.style.zIndex = "1000"; @@ -11733,9 +13636,17 @@ ${galleryPagesHTML} const img = document.createElement("img"); img.src = imageUrl; img.alt = imageName; + img.draggable = true; // Enable dragging img.style.width = "100%"; img.style.height = "100%"; img.style.objectFit = "cover"; + + // Add drag and drop listeners for image swapping + img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); + img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); + img.addEventListener("dragover", this.handleImageDragOver.bind(this)); + img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); + img.addEventListener("drop", this.handleImageDrop.bind(this)); img.style.display = "block"; img.style.border = "none"; img.style.outline = "none"; @@ -11786,10 +13697,14 @@ ${galleryPagesHTML} // Save undo state before making changes this.saveUndoState(); this.setupEditorClickHandler(); + + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('image'); + const imageContainer = document.createElement("div"); imageContainer.className = "draggable-image-container"; - imageContainer.style.left = "50px"; - imageContainer.style.top = "50px"; + imageContainer.style.left = `${centerPos.x}px`; + imageContainer.style.top = `${centerPos.y}px`; imageContainer.style.width = "200px"; imageContainer.style.height = "150px"; imageContainer.style.zIndex = "1000"; @@ -12296,14 +14211,17 @@ ${galleryPagesHTML} ".enhanced-editor-content" ); if (previewFrame) { + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('text'); + // Create draggable and resizable text box const textBox = document.createElement("div"); textBox.className = "draggable-text-box"; textBox.contentEditable = true; textBox.textContent = "Double-click to edit text"; textBox.style.position = "absolute"; - textBox.style.left = "50px"; - textBox.style.top = "50px"; + textBox.style.left = `${centerPos.x}px`; + textBox.style.top = `${centerPos.y}px`; textBox.style.width = "150px"; textBox.style.height = "40px"; textBox.style.minWidth = "100px"; @@ -12445,6 +14363,9 @@ ${galleryPagesHTML} throw new Error('Preview frame not found'); } + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('image'); + // Generate unique ID for the image container const uniqueId = `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`; @@ -12455,11 +14376,11 @@ ${galleryPagesHTML} imageContainer.setAttribute('data-image-type', 'inserted'); imageContainer.setAttribute('data-original-filename', fileName); - // Apply consistent styling + // Apply consistent styling with center position Object.assign(imageContainer.style, { position: "absolute", - left: "50px", - top: "50px", + left: `${centerPos.x}px`, + top: `${centerPos.y}px`, width: "300px", height: "200px", cursor: "move", @@ -12474,6 +14395,7 @@ ${galleryPagesHTML} img.src = imageDataUrl; img.alt = fileName; img.setAttribute('loading', 'lazy'); // Performance optimization + img.draggable = true; // Enable dragging Object.assign(img.style, { width: "100%", @@ -12484,6 +14406,13 @@ ${galleryPagesHTML} display: "block" }); + // Add drag and drop listeners for image swapping + img.addEventListener("dragstart", this.handleImageDragStart.bind(this)); + img.addEventListener("dragend", this.handleImageDragEnd.bind(this)); + img.addEventListener("dragover", this.handleImageDragOver.bind(this)); + img.addEventListener("dragleave", this.handleImageDragLeave.bind(this)); + img.addEventListener("drop", this.handleImageDrop.bind(this)); + // Add click handler for selection imageContainer.addEventListener("click", (e) => { e.stopPropagation(); @@ -13651,7 +15580,11 @@ ${galleryPagesHTML} } // Special handling for hero sections - always allow replacement - if (imageElement.originalElement && imageElement.originalElement.classList.contains('hero')) { + if (imageElement.originalElement && ( + imageElement.originalElement.classList.contains('hero') || + imageElement.originalElement.classList.contains('p1-image-side') || + imageElement.originalElement.classList.contains('p2-image') + )) { console.log("Image is in hero section - can replace"); return true; } @@ -14641,12 +16574,15 @@ ${galleryPagesHTML} // Save undo state this.saveUndoState(); + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('table'); + // Create table element using our new method (draggable/resizeable container like images) const tableContainer = this.createTableElement(); editor.appendChild(tableContainer); - // Default placement similar to images - tableContainer.style.left = "50px"; - tableContainer.style.top = "50px"; + // Place at center position + tableContainer.style.left = `${centerPos.x}px`; + tableContainer.style.top = `${centerPos.y}px`; // Enable drag + resize this.addTableResizeHandles(tableContainer); this.makeDraggable(tableContainer); @@ -14733,6 +16669,29 @@ ${galleryPagesHTML} return ""; } + // Get random image from property images + getRandomImage() { + const allImages = Array.isArray(this.realPropertyImages) ? this.realPropertyImages : []; + + if (allImages.length === 0) { + // Return a default placeholder image if no property images available + return 'https://via.placeholder.com/400x300?text=No+Image+Available'; + } + + // Get a random index + const randomIndex = Math.floor(Math.random() * allImages.length); + const randomImage = allImages[randomIndex]; + + // Ensure image URL is absolute for PDF generation + if (randomImage && randomImage.url) { + return randomImage.url.startsWith('http') ? randomImage.url : + `https://salesforce.tech4biz.io${randomImage.url}`; + } + + // Fallback to placeholder if image URL is invalid + return 'https://via.placeholder.com/400x300?text=No+Image+Available'; + } + // Method to replace background-image URLs in CSS at runtime replaceBackgroundImagesInHTML(htmlContent) { if (!this.realPropertyImages || this.realPropertyImages.length === 0) { @@ -15513,6 +17472,9 @@ ${galleryPagesHTML} // Save undo state before making changes this.saveUndoState(); + // Get center position for insertion + const centerPos = this.getCenterPositionForElement('text'); + // Create draggable text element const textElement = document.createElement("div"); textElement.className = "draggable-element draggable-text"; @@ -15521,8 +17483,8 @@ ${galleryPagesHTML} // Position absolutely for free placement textElement.style.position = "absolute"; - textElement.style.left = "20px"; - textElement.style.top = "20px"; + textElement.style.left = `${centerPos.x}px`; + textElement.style.top = `${centerPos.y}px`; textElement.style.minWidth = "150px"; textElement.style.minHeight = "30px"; textElement.style.padding = "8px";