{"id":4351,"date":"2025-11-26T09:46:04","date_gmt":"2025-11-26T09:46:04","guid":{"rendered":"https:\/\/forestgreen-goose-685196.hostingersite.com\/?page_id=4351"},"modified":"2025-11-26T10:07:05","modified_gmt":"2025-11-26T10:07:05","slug":"ii-block","status":"publish","type":"page","link":"https:\/\/dekadevelopment.ge\/en\/ii-block\/","title":{"rendered":"II Block"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4351\" class=\"elementor elementor-4351\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6cf9f55 e-flex e-con-boxed e-con e-parent\" data-id=\"6cf9f55\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-51ada93 elementor-widget elementor-widget-html\" data-id=\"51ada93\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- WORDPRESS + IMAGE MAP PRO INTEGRATION -->\n<!-- Dynamic badges and navigation based on WordPress apartment data -->\n\n<style>\n.custom-sold-badge,\n.custom-reserved-badge {\n    position: absolute;\n    width: 45px;\n    height: auto;\n    pointer-events: none;\n    z-index: 99999;\n}\n\n#apartment-controls {\n    position: fixed;\n    bottom: 20px;\n    right: 20px;\n    z-index: 999999;\n    background: white;\n    padding: 15px;\n    border-radius: 8px;\n    box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    max-width: 250px;\n}\n\n#apartment-controls button {\n    display: block;\n    width: 100%;\n    padding: 8px 12px;\n    margin: 5px 0;\n    background: #ff6600;\n    color: white;\n    border: none;\n    border-radius: 4px;\n    cursor: pointer;\n    font-size: 14px;\n}\n\n#apartment-controls button:hover {\n    background: #ff8833;\n}\n\n#apartment-status {\n    font-size: 12px;\n    margin-top: 10px;\n    padding: 8px;\n    background: #f0f0f0;\n    border-radius: 4px;\n}\n\n.apartment-stats {\n    font-size: 11px;\n    margin-top: 5px;\n    color: #666;\n}\n<\/style>\n\n<div id=\"apartment-controls\">\n    <div style=\"font-weight: bold; margin-bottom: 10px;\">\ud83c\udfe2 Apartment System<\/div>\n    <button id=\"btn-refresh-data\">Refresh Data<\/button>\n    <button id=\"btn-apply-badges\">Apply Badges<\/button>\n    <button id=\"btn-debug-info\">Show Debug Info<\/button>\n    <div id=\"apartment-status\">Initializing...<\/div>\n    <div class=\"apartment-stats\" id=\"apartment-stats\"><\/div>\n<\/div>\n\n<script>\n(function() {\n    'use strict';\n    \n    console.log('\ud83d\ude80 WordPress + Image Map Pro Integration Starting...');\n    \n    \/\/ ==========================================\n    \/\/ CONFIGURATION\n    \/\/ ==========================================\n    \n    var CONFIG = {\n        \/\/ WordPress REST API endpoint\n        apiUrl: '\/wp-json\/wp\/v2\/apartment',\n        apiParams: '?per_page=100',\n        \n        \/\/ Badge images and colors\n        sold: {\n            image: 'http:\/\/dekadevelopment.ge\/wp-content\/uploads\/2025\/11\/Sold.webp',\n            color: 'rgba(93, 21, 32, 0.6)',\n            strokeColor: 'rgba(93, 21, 32, 1)',\n            badgeClass: 'custom-sold-badge'\n        },\n        reserved: {\n            image: 'http:\/\/dekadevelopment.ge\/wp-content\/uploads\/2025\/11\/reserved.png',\n            color: 'rgba(93, 21, 32, 0.25)',\n            strokeColor: 'rgba(93, 21, 32, 1)',\n            badgeClass: 'custom-reserved-badge'\n        },\n        \n        \/\/ Navigation\n        apartmentUrlPrefix: 'https:\/\/dekadevelopment.ge\/apartments\/',\n        \n        \/\/ Other settings\n        badgeWidth: 45,\n        debug: true,\n        cacheTimeout: 300000 \/\/ 5 minutes\n    };\n    \n    \/\/ ==========================================\n    \/\/ STATE MANAGEMENT\n    \/\/ ==========================================\n    \n    var STATE = {\n        apartments: [],\n        apartmentsById: {},\n        apartmentsBySlug: {},\n        lastFetch: null,\n        processedShapes: new Set(),\n        currentArtboard: null,\n        currentFloor: null\n    };\n    \n    var statusElement = null;\n    var statsElement = null;\n    \n    \/\/ ==========================================\n    \/\/ UTILITY FUNCTIONS\n    \/\/ ==========================================\n    \n    function log(message, data) {\n        if (CONFIG.debug) {\n            console.log('[APARTMENT SYSTEM]', message, data || '');\n        }\n    }\n    \n    function updateStatus(message) {\n        if (statusElement) {\n            statusElement.textContent = message;\n        }\n        log('Status:', message);\n    }\n    \n    function updateStats(stats) {\n        if (statsElement && stats) {\n            statsElement.innerHTML = \n                'Total: ' + stats.total + ' | ' +\n                'Sold: ' + stats.sold + ' | ' +\n                'Reserved: ' + stats.reserved + ' | ' +\n                'Available: ' + stats.available;\n        }\n    }\n    \n    \/\/ ==========================================\n    \/\/ DATA FETCHING\n    \/\/ ==========================================\n    \n    function fetchApartmentData() {\n        updateStatus('Fetching apartment data...');\n        log('Fetching from:', CONFIG.apiUrl + CONFIG.apiParams);\n        \n        return fetch(CONFIG.apiUrl + CONFIG.apiParams)\n            .then(function(response) {\n                if (!response.ok) {\n                    throw new Error('API request failed: ' + response.status);\n                }\n                return response.json();\n            })\n            .then(function(apartments) {\n                STATE.apartments = apartments;\n                STATE.lastFetch = Date.now();\n                \n                \/\/ Create lookup maps\n                STATE.apartmentsById = {};\n                STATE.apartmentsBySlug = {};\n                \n                apartments.forEach(function(apt) {\n                    STATE.apartmentsById[apt.id] = apt;\n                    STATE.apartmentsBySlug[apt.slug] = apt;\n                });\n                \n                \/\/ Calculate stats\n                var stats = {\n                    total: apartments.length,\n                    sold: apartments.filter(function(a) { return a.status === 'sold'; }).length,\n                    reserved: apartments.filter(function(a) { return a.status === 'reserved'; }).length,\n                    available: apartments.filter(function(a) { return !a.status || a.status === 'available'; }).length\n                };\n                \n                updateStats(stats);\n                updateStatus('Loaded ' + apartments.length + ' apartments');\n                log('Apartments loaded:', apartments.length);\n                log('Sample apartment:', apartments[0]);\n                \n                return apartments;\n            })\n            .catch(function(error) {\n                updateStatus('Error loading data');\n                log('Fetch error:', error);\n                console.error('Failed to fetch apartment data:', error);\n                return [];\n            });\n    }\n    \n    function ensureDataLoaded() {\n        \/\/ Check if we need to fetch (no data or cache expired)\n        var needsFetch = !STATE.lastFetch || \n                        (Date.now() - STATE.lastFetch) > CONFIG.cacheTimeout;\n        \n        if (needsFetch) {\n            return fetchApartmentData();\n        }\n        \n        return Promise.resolve(STATE.apartments);\n    }\n    \n    \/\/ ==========================================\n    \/\/ IMAGE MAP PRO PARSING\n    \/\/ ==========================================\n    \n    function parseArtboardName(artboardName) {\n        \/\/ Example: \"deka-lisi-i\" \u2192 {project: \"deka-lisi\", block: \"i\"}\n        if (!artboardName) return null;\n        \n        var parts = artboardName.split('-');\n        if (parts.length < 3) {\n            log('Invalid artboard format:', artboardName);\n            return null;\n        }\n        \n        return {\n            project: parts.slice(0, -1).join('-'), \/\/ \"deka-lisi\"\n            block: parts[parts.length - 1]         \/\/ \"i\"\n        };\n    }\n    \n    function parseFloorName(floorName) {\n        \/\/ Example: \"floor-1\" \u2192 \"1\", \"floor-10\" \u2192 \"10\"\n        if (!floorName) return null;\n        \n        var match = floorName.match(\/floor-(\\d+)\/i);\n        if (!match) {\n            log('Invalid floor format:', floorName);\n            return null;\n        }\n        \n        return match[1]; \/\/ \"1\", \"2\", \"10\", etc.\n    }\n    \n    function getCurrentMapContext() {\n        \/\/ Get current artboard and floor from Image Map Pro\n        var context = {\n            artboard: null,\n            floor: null,\n            projectSlug: null,\n            blockSlug: null,\n            floorNumber: null\n        };\n        \n        \/\/ Try to get selected floor from dropdown\n        var floorSelect = document.querySelector('.imp-ui-layers-select');\n        if (floorSelect) {\n            var selectedOption = floorSelect.options[floorSelect.selectedIndex];\n            if (selectedOption) {\n                context.floor = selectedOption.text;\n                context.floorNumber = parseFloorName(context.floor);\n                log('Current floor:', context.floor, '\u2192', context.floorNumber);\n            }\n        }\n        \n        \/\/ Try to get artboard from URL or container\n        \/\/ This might need adjustment based on your actual setup\n        var mapContainer = document.querySelector('[data-image-map-name]');\n        if (mapContainer) {\n            context.artboard = mapContainer.getAttribute('data-image-map-name');\n            var parsed = parseArtboardName(context.artboard);\n            if (parsed) {\n                context.projectSlug = parsed.project;\n                context.blockSlug = parsed.block;\n                log('Current artboard:', context.artboard);\n                log('  Project:', context.projectSlug);\n                log('  Block:', context.blockSlug);\n            }\n        }\n        \n        return context;\n    }\n    \n    \/\/ ==========================================\n    \/\/ APARTMENT MATCHING\n    \/\/ ==========================================\n    \n    function findApartmentForPolygon(polygonName, context) {\n        \/\/ Find apartment by slug that matches the polygon name\n        var apartment = STATE.apartmentsBySlug[polygonName];\n        \n        if (!apartment) {\n            log('No apartment found for slug:', polygonName);\n            return null;\n        }\n        \n        \/\/ Verify it matches current context (project, block, floor)\n        var matches = true;\n        \n        \/\/ Check project\n        if (context.projectSlug) {\n            var hasProject = apartment.project_terms && apartment.project_terms.some(function(term) {\n                return term.slug === context.projectSlug;\n            });\n            if (!hasProject) {\n                log('Project mismatch for', polygonName, '- expected:', context.projectSlug);\n                matches = false;\n            }\n        }\n        \n        \/\/ Check block\n        if (context.blockSlug) {\n            var hasBlock = apartment.block_terms && apartment.block_terms.some(function(term) {\n                return term.slug === context.blockSlug;\n            });\n            if (!hasBlock) {\n                log('Block mismatch for', polygonName, '- expected:', context.blockSlug);\n                matches = false;\n            }\n        }\n        \n        \/\/ Check floor\n        if (context.floorNumber && apartment.apartment_floor !== context.floorNumber) {\n            log('Floor mismatch for', polygonName, '- expected:', context.floorNumber, 'got:', apartment.apartment_floor);\n            matches = false;\n        }\n        \n        if (!matches) {\n            return null;\n        }\n        \n        log('\u2705 Matched apartment:', polygonName, '\u2192', apartment);\n        return apartment;\n    }\n    \n    \/\/ ==========================================\n    \/\/ BADGE & COLOR APPLICATION\n    \/\/ ==========================================\n    \n    function clearAllBadges() {\n        var badges = document.querySelectorAll('.custom-sold-badge, .custom-reserved-badge');\n        badges.forEach(function(badge) {\n            badge.remove();\n        });\n        STATE.processedShapes.clear();\n        log('Cleared', badges.length, 'badges');\n    }\n    \n    function applyBadgeAndColor(shape, apartment, config) {\n        var shapeId = shape.getAttribute('data-object-id');\n        var shapeName = shape.getAttribute('data-title') || apartment.slug;\n        \n        \/\/ Skip if already processed\n        if (STATE.processedShapes.has(shapeId)) {\n            return false;\n        }\n        \n        try {\n            \/\/ Get container\n            var container = document.querySelector('.imp-canvas');\n            if (!container) return false;\n            \n            if (window.getComputedStyle(container).position === 'static') {\n                container.style.position = 'relative';\n            }\n            \n            var shapeRect = shape.getBoundingClientRect();\n            if (shapeRect.width === 0 || shapeRect.height === 0) {\n                return false; \/\/ Hidden\n            }\n            \n            \/\/ Apply color to polygon\n            var polygon = shape.querySelector('polygon, path, rect, circle');\n            if (polygon) {\n                if (!polygon.hasAttribute('data-original-fill')) {\n                    polygon.setAttribute('data-original-fill', polygon.getAttribute('fill') || '');\n                }\n                polygon.setAttribute('fill', config.color);\n                polygon.setAttribute('stroke', config.strokeColor);\n            }\n            \n            \/\/ Add badge\n            var containerRect = container.getBoundingClientRect();\n            var centerX = shapeRect.left - containerRect.left + shapeRect.width \/ 2;\n            var centerY = shapeRect.top - containerRect.top + shapeRect.height \/ 2;\n            \n            var badge = document.createElement('img');\n            badge.src = config.image;\n            badge.className = config.badgeClass;\n            badge.setAttribute('data-shape-id', shapeId);\n            badge.setAttribute('data-apartment-slug', apartment.slug);\n            badge.style.cssText = \n                'position: absolute;' +\n                'left: ' + centerX + 'px;' +\n                'top: ' + centerY + 'px;' +\n                'width: ' + CONFIG.badgeWidth + 'px;' +\n                'height: auto;' +\n                'transform: translate(-50%, -50%);' +\n                'pointer-events: none;' +\n                'z-index: 99999;';\n            \n            container.appendChild(badge);\n            STATE.processedShapes.add(shapeId);\n            \n            log('\u2705 Applied', apartment.status, 'badge to:', shapeName);\n            return true;\n            \n        } catch (error) {\n            log('Error applying badge:', error);\n            return false;\n        }\n    }\n    \n    function addClickHandler(shape, apartment) {\n        var url = CONFIG.apartmentUrlPrefix + apartment.slug + '\/';\n        \n        \/\/ Remove pointer-events: none if present\n        shape.style.pointerEvents = 'auto';\n        shape.style.cursor = 'pointer';\n        \n        \/\/ Add click handler\n        shape.addEventListener('click', function(e) {\n            e.preventDefault();\n            log('Navigating to:', url);\n            window.location.href = url;\n        });\n        \n        log('\u2705 Added click handler:', apartment.slug, '\u2192', url);\n    }\n    \n    \/\/ ==========================================\n    \/\/ MAIN PROCESSING\n    \/\/ ==========================================\n    \n    function processPolygons() {\n        return ensureDataLoaded().then(function(apartments) {\n            if (apartments.length === 0) {\n                updateStatus('No apartment data');\n                return {sold: 0, reserved: 0, total: 0};\n            }\n            \n            updateStatus('Processing polygons...');\n            \n            \/\/ Get current context\n            var context = getCurrentMapContext();\n            log('Context:', context);\n            \n            \/\/ Find all polygons\n            var allPolygons = document.querySelectorAll('svg[data-title]');\n            log('Found', allPolygons.length, 'total polygons');\n            \n            var counts = {sold: 0, reserved: 0, total: 0, clicked: 0};\n            \n            allPolygons.forEach(function(polygon) {\n                var polygonName = polygon.getAttribute('data-title');\n                \n                \/\/ Try to find matching apartment\n                var apartment = findApartmentForPolygon(polygonName, context);\n                \n                if (apartment) {\n                    counts.total++;\n                    \n                    \/\/ Add click handler (always, regardless of status)\n                    addClickHandler(polygon, apartment);\n                    counts.clicked++;\n                    \n                    \/\/ Apply badge\/color based on status\n                    if (apartment.status === 'sold') {\n                        applyBadgeAndColor(polygon, apartment, CONFIG.sold);\n                        counts.sold++;\n                    } else if (apartment.status === 'reserved') {\n                        applyBadgeAndColor(polygon, apartment, CONFIG.reserved);\n                        counts.reserved++;\n                    }\n                }\n            });\n            \n            updateStatus('Applied: ' + counts.sold + ' sold, ' + counts.reserved + ' reserved');\n            log('Results:', counts);\n            \n            return counts;\n        });\n    }\n    \n    \/\/ ==========================================\n    \/\/ DEBUG FUNCTIONS\n    \/\/ ==========================================\n    \n    function showDebugInfo() {\n        console.log('=== DEBUG INFO ===');\n        console.log('Apartments loaded:', STATE.apartments.length);\n        console.log('Last fetch:', new Date(STATE.lastFetch));\n        console.log('Current context:', getCurrentMapContext());\n        console.log('Processed shapes:', STATE.processedShapes.size);\n        console.log('Sample apartments:', STATE.apartments.slice(0, 3));\n        \n        var context = getCurrentMapContext();\n        console.log('\\nApartments matching context:');\n        var matching = STATE.apartments.filter(function(apt) {\n            var projectMatch = apt.project_terms && apt.project_terms.some(function(t) {\n                return t.slug === context.projectSlug;\n            });\n            var blockMatch = apt.block_terms && apt.block_terms.some(function(t) {\n                return t.slug === context.blockSlug;\n            });\n            var floorMatch = apt.apartment_floor === context.floorNumber;\n            return projectMatch && blockMatch && floorMatch;\n        });\n        console.log('  Count:', matching.length);\n        console.log('  Slugs:', matching.map(function(a) { return a.slug; }));\n        console.log('==================');\n        \n        alert('Debug info logged to console (F12)');\n    }\n    \n    \/\/ ==========================================\n    \/\/ INITIALIZATION\n    \/\/ ==========================================\n    \n    function init() {\n        log('\ud83c\udfac Initializing WordPress integration...');\n        \n        statusElement = document.getElementById('apartment-status');\n        statsElement = document.getElementById('apartment-stats');\n        \n        \/\/ Button handlers\n        document.getElementById('btn-refresh-data').addEventListener('click', function() {\n            STATE.lastFetch = null; \/\/ Force refresh\n            clearAllBadges();\n            processPolygons();\n        });\n        \n        document.getElementById('btn-apply-badges').addEventListener('click', function() {\n            clearAllBadges();\n            processPolygons();\n        });\n        \n        document.getElementById('btn-debug-info').addEventListener('click', showDebugInfo);\n        \n        \/\/ Watch for floor changes\n        if (typeof jQuery !== 'undefined') {\n            jQuery(document).on('change', '.imp-ui-layers-select', function() {\n                log('\ud83d\udd04 Floor changed');\n                setTimeout(function() {\n                    clearAllBadges();\n                    processPolygons();\n                }, 500);\n            });\n        }\n        \n        \/\/ Initial load\n        updateStatus('Loading...');\n        fetchApartmentData().then(function() {\n            setTimeout(function() {\n                processPolygons();\n            }, 2000);\n        });\n    }\n    \n    \/\/ Start\n    if (document.readyState === 'loading') {\n        document.addEventListener('DOMContentLoaded', init);\n    } else {\n        init();\n    }\n    \n    log('\ud83d\udca1 WordPress + Image Map Pro integration loaded');\n    log('\ud83d\udca1 Artboard format: {project}-{block} (e.g., \"deka-lisi-i\")');\n    log('\ud83d\udca1 Floor format: floor-{number} (e.g., \"floor-1\")');\n    log('\ud83d\udca1 Polygon name = apartment slug (e.g., \"lisi_b10\")');\n    \n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4c2e53 elementor-widget elementor-widget-shortcode\" data-id=\"c4c2e53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div><div id=\"image-map-pro-b356c1ea-ab99-49f8-9420-3a014987a194\"><\/div><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\ud83c\udfe2 Apartment System Refresh Data Apply Badges Show Debug Info Initializing&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"uix_meta_title":"","uix_meta_description":"","uix_canonical_url":"","footnotes":""},"class_list":["post-4351","page","type-page","status-publish","hentry"],"acf":[],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/pages\/4351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/comments?post=4351"}],"version-history":[{"count":13,"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/pages\/4351\/revisions"}],"predecessor-version":[{"id":4365,"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/pages\/4351\/revisions\/4365"}],"wp:attachment":[{"href":"https:\/\/dekadevelopment.ge\/en\/wp-json\/wp\/v2\/media?parent=4351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}