// Global variables for help system var helpSystem = { currentProjectId: null, priceGroupsData: null, isLoading: false }; // Function to open full help dialog using apex.theme.openRegion function openFullHelp() { console.log('🚀 openFullHelp() called'); // Load dynamic content before showing dialog console.log('📊 Loading dynamic price groups...'); loadDynamicPriceGroups(); // Use apex.theme.openRegion to open the dialog console.log('🔥 Opening dialog using apex.theme.openRegion...'); try { if (typeof apex !== 'undefined' && apex.theme && apex.theme.openRegion) { console.log('✅ apex.theme.openRegion is available'); apex.theme.openRegion('fullHelpModal'); console.log('🎉 Dialog opened successfully'); } else { console.log('❌ apex.theme.openRegion not available'); console.log('🔍 apex object:', typeof apex); console.log('🔍 apex.theme object:', typeof apex !== 'undefined' ? apex.theme : 'N/A'); // Fallback method console.log('🔄 Trying fallback methods...'); // Try jQuery UI dialog as fallback if (typeof $ !== 'undefined' && $.fn.dialog) { console.log('🔧 Using jQuery dialog fallback...'); const $dialog = $('#fullHelpModal'); if ($dialog.length > 0) { $dialog.dialog({ modal: true, width: 900, height: 600, title: 'Transaction Distribution by Price Groups - Complete Guide', resizable: true, draggable: true }); console.log('✅ jQuery dialog opened'); } else { console.log('❌ Dialog element not found for jQuery'); } } else { console.log('❌ jQuery dialog not available either'); } } } catch (error) { console.error('❌ Error opening dialog:', error); console.log('🔄 Attempting direct DOM manipulation...'); // Last resort - direct DOM manipulation const dialogElement = document.getElementById('fullHelpModal'); if (dialogElement) { dialogElement.style.display = 'block'; dialogElement.style.position = 'fixed'; dialogElement.style.top = '50%'; dialogElement.style.left = '50%'; dialogElement.style.transform = 'translate(-50%, -50%)'; dialogElement.style.zIndex = '9999'; dialogElement.style.background = 'white'; dialogElement.style.border = '1px solid #ccc'; dialogElement.style.boxShadow = '0 4px 8px rgba(0,0,0,0.3)'; dialogElement.style.maxWidth = '900px'; dialogElement.style.maxHeight = '600px'; console.log('✅ Direct DOM manipulation applied'); } } } // Function to load dynamic price groups from APEX process function loadDynamicPriceGroups() { console.log('📡 loadDynamicPriceGroups() started'); const projectId = getSelectedProject(); console.log('🏢 Selected project ID:', projectId); if (!projectId) { console.log('❌ No project ID found, rendering default groups'); renderDefaultPriceGroups(); return; } // Prevent multiple simultaneous requests if (helpSystem.isLoading) { console.log('⏳ Already loading, skipping request'); return; } console.log('🔄 Setting loading state to true'); helpSystem.isLoading = true; // Show loading indicator const container = document.getElementById('dynamicPriceGroups'); console.log('📦 Container element:', container); if (container) { container.innerHTML = '

Loading price groups...

'; console.log('⌛ Loading indicator set'); } else { console.log('❌ Container "dynamicPriceGroups" not found!'); } if (typeof apex !== 'undefined') { console.log('🔧 APEX available, making server call...'); console.log('📤 Calling process: GET_PROJECT_PRICE_GROUPS with x01:', projectId); apex.server.process('GET_PROJECT_PRICE_GROUPS', { x01: projectId }, { success: function(data) { console.log('✅ APEX server call successful'); console.log('📥 Raw data received:', data); console.log('📊 Data type:', typeof data); console.log('📏 Data length:', data && data.length ? data.length : 'N/A'); helpSystem.isLoading = false; console.log('🔄 Loading state set to false'); try { // Check if data is already an object or needs parsing let priceGroups; if (typeof data === 'string') { console.log('🔧 Data is string, parsing JSON...'); priceGroups = JSON.parse(data); console.log('✅ JSON parsed successfully'); } else { console.log('🔧 Data is already object, using directly'); priceGroups = data; // Already parsed by APEX } console.log('🎯 Final price groups data:', priceGroups); console.log('📊 Number of price groups:', priceGroups ? priceGroups.length : 0); helpSystem.priceGroupsData = priceGroups; console.log('💾 Data stored in helpSystem.priceGroupsData'); console.log('🎨 Calling renderPriceGroups...'); renderPriceGroups(priceGroups); } catch (e) { console.error('❌ Error processing price groups data:', e); console.log('🔍 Raw data that caused error:', data); console.log('📋 Falling back to default groups'); renderDefaultPriceGroups(); } }, error: function(xhr, status, error) { console.error('❌ APEX server call failed'); console.error('🚨 XHR:', xhr); console.error('📊 Status:', status); console.error('💥 Error:', error); helpSystem.isLoading = false; console.log('🔄 Loading state set to false (error)'); console.log('📋 Falling back to default groups'); renderDefaultPriceGroups(); } }); } else { console.log('❌ APEX not available!'); helpSystem.isLoading = false; console.log('📋 Falling back to default groups'); renderDefaultPriceGroups(); } } // Function to render price groups from server data function renderPriceGroups(priceGroups) { console.log('🎨 renderPriceGroups() called with:', priceGroups); const container = document.getElementById('dynamicPriceGroups'); console.log('📦 Render container:', container); if (!container) { console.log('❌ Container not found for rendering!'); return; } container.innerHTML = ''; console.log('🧹 Container cleared'); if (!priceGroups || priceGroups.length === 0) { console.log('❌ No price groups data available'); container.innerHTML = '

No price group data available for selected project.

'; return; } console.log('🔢 Rendering', priceGroups.length, 'price groups'); priceGroups.forEach((group, index) => { console.log(`🏷️ Processing group ${index + 1}:`, group); // Determine if this is the highest price group (potential outlier/premium) const isHighestGroup = index === priceGroups.length - 1 && priceGroups.length > 1; const isPremiumGroup = group.BUCKET_NO >= 5; // || isHighestGroup; console.log(`🎯 Group ${index + 1} - isHighest: ${isHighestGroup}, isPremium: ${isPremiumGroup}`); const cardDiv = document.createElement('div'); cardDiv.className = `price-group-card-dynamic ${isPremiumGroup ? 'premium' : ''}`; // Create description based on bucket position and transaction count const description = generateGroupDescription(group, index, priceGroups.length); console.log(`📝 Generated description for group ${index + 1}:`, description); cardDiv.innerHTML = `

${group.PRICE_RANGE}

${formatNumber(group.NO_OF_TRANSACTIONS)} transactions
${description}

`; container.appendChild(cardDiv); console.log(`✅ Group ${index + 1} card added to container`); }); console.log('🎉 All price groups rendered successfully'); } // Function to generate appropriate description for each price group function generateGroupDescription(group, index, totalGroups) { console.log(`📝 generateGroupDescription() called for group ${index + 1}:`, { group: group, index: index, totalGroups: totalGroups }); const transactionCount = group.NO_OF_TRANSACTIONS; const bucketNo = group.BUCKET_NO; const isHighest = index === totalGroups - 1; const isPremium = bucketNo >= 5; console.log(`🔍 Group analysis - transactions: ${transactionCount}, bucket: ${bucketNo}, isHighest: ${isHighest}, isPremium: ${isPremium}`); let description; if (isPremium || isHighest) { if (transactionCount < 10) { description = "Ultra-luxury segment with limited inventory. Low transaction volumes are typical for this premium market tier."; } else { description = "Premium market segment featuring high-end properties with luxury specifications and exceptional features."; } } else if (index === 0) { description = "Entry-level price segment, typically featuring smaller units or properties with standard finishes. Popular among first-time buyers and yield-focused investors."; } else if (index === 1 || (index <= totalGroups / 2)) { description = "Mid-range market segment with enhanced specifications, better locations, or larger layouts. Often represents the most active transaction segment."; } else { description = "Upper-mid to high-end segment featuring premium specifications, better views, and enhanced amenities. Targets affluent buyers and serious investors."; } console.log(`📄 Generated description: ${description}`); return description; } // Function to render default price groups when data is unavailable function renderDefaultPriceGroups() { console.log('🔧 renderDefaultPriceGroups() called'); const container = document.getElementById('dynamicPriceGroups'); console.log('📦 Default render container:', container); if (!container) { console.log('❌ Container not found for default rendering!'); return; } const defaultGroups = [ { range: 'Group 1', description: 'Lower price segment - entry-level properties and smaller units.' }, { range: 'Group 2', description: 'Mid-range segment - properties with better specifications and locations.' }, { range: 'Group 3', description: 'Upper-mid segment - enhanced amenities and premium features.' }, { range: 'Group 4', description: 'High-end segment - luxury specifications and exceptional views.' }, { range: 'Group 5+', description: 'Premium/luxury segment with typically lower transaction volumes due to limited inventory and ultra-high-net-worth targeting.' } ]; console.log('📋 Default groups to render:', defaultGroups); container.innerHTML = ''; console.log('🧹 Container cleared for defaults'); defaultGroups.forEach((group, index) => { console.log(`🏷️ Processing default group ${index + 1}:`, group); const isLastGroup = index === defaultGroups.length - 1; const cardDiv = document.createElement('div'); cardDiv.className = `price-group-card-dynamic ${isLastGroup ? 'premium' : ''}`; cardDiv.innerHTML = `

${group.range}

${group.description}

`; container.appendChild(cardDiv); console.log(`✅ Default group ${index + 1} added to container`); }); console.log('🎉 Default price groups rendered successfully'); } // Helper function to get selected project from APEX page item function getSelectedProject() { console.log('🔍 getSelectedProject() called'); if (typeof apex !== 'undefined') { console.log('✅ APEX is available'); // Using your page item P9_PROJECT_ID const projectId = apex.item("P9_PROJECT_ID").getValue(); console.log('🏢 Project ID from P9_PROJECT_ID:', projectId); return projectId; } else { console.log('❌ APEX not available for getSelectedProject'); } // Fallback for testing console.log('🔄 Returning null (fallback)'); return null; } // Function to be called from APEX when project changes function onProjectChange(projectId) { console.log('🔄 onProjectChange() called with:', projectId); // Update help content when project selection changes helpSystem.currentProjectId = projectId; helpSystem.priceGroupsData = null; // Clear cached data console.log('💾 Updated helpSystem.currentProjectId:', helpSystem.currentProjectId); console.log('🧹 Cleared helpSystem.priceGroupsData'); // If help dialog is open, refresh the content const dynamicContainer = document.getElementById('dynamicPriceGroups'); console.log('📦 Dynamic container element:', dynamicContainer); if (dynamicContainer && dynamicContainer.offsetParent !== null) { console.log('🔄 Help dialog is open, refreshing content...'); loadDynamicPriceGroups(); } else { console.log('📋 Help dialog is not open, content will refresh when opened'); } } // Helper function to format numbers function formatNumber(num) { console.log('🔢 formatNumber() called with:', num, typeof num); if (typeof num === 'number') { const formatted = num.toLocaleString(); console.log('✅ Formatted number:', formatted); return formatted; } console.log('🔄 Returning original value:', num); return num; } // Function to refresh help content function refreshHelpContent() { console.log('🔄 refreshHelpContent() called'); console.log('🏢 Current project ID:', helpSystem.currentProjectId); if (helpSystem.currentProjectId) { console.log('✅ Project ID exists, loading dynamic price groups'); loadDynamicPriceGroups(); } else { console.log('❌ No current project ID, cannot refresh'); } }

Bar: Price Group chart
	Transactions
AED 7.2M - AED 16M	4
AED 23M - AED 23M	2

Um Al Sheif construction progress

Um Al Sheif

Property price change, Year-to-date

Transaction Distribution by Price Groups

Apartments and Villas

Number of units per bed

4

4

Size Ranges