{"id":5004,"date":"2026-08-06T05:08:44","date_gmt":"2026-08-06T05:08:44","guid":{"rendered":"https:\/\/tiles360dev.3droomview.com\/tiles360\/?page_id=5004"},"modified":"2026-08-06T10:04:50","modified_gmt":"2026-08-06T10:04:50","slug":"blogs","status":"publish","type":"page","link":"https:\/\/tiles360dev.3droomview.com\/tiles360\/blogs\/","title":{"rendered":"Blogs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"5004\" class=\"elementor elementor-5004\">\n\t\t\t\t<div class=\"elementor-element elementor-element-303da65 e-con-full e-flex e-con e-parent\" data-id=\"303da65\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c24b9ba elementor-widget elementor-widget-int-page-title-v5\" data-id=\"c24b9ba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"int-page-title-v5.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        <section class=\"page-title pt-200 pos-rel bg_img\" \">\r\n            <div class=\"container\">\r\n                <div class=\"page-title-wrap pg-title-wrap\">\r\n                    <div class=\"row mt-none-30 align-items-start\">\r\n                        <div class=\"col-lg-9 mt-30\">\r\n                            <div class=\"page-title-box\">\r\n                                                                    <span class=\"sub-title\">Blogs<\/span>\r\n                                                                                                    <h2 class=\"title\">Read our latest articles, updates, and insights\n<\/h2>\r\n                                                            <\/div>\r\n                        <\/div>\r\n                                            <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/section>\r\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c262a04 e-flex e-con-boxed e-con e-parent\" data-id=\"c262a04\" 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-1da2a3a elementor-widget elementor-widget-shortcode\" data-id=\"1da2a3a\" 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 id=\"t360-blog-container\">\r\n            <div style=\"padding: 40px; text-align: center;\">Loading...<\/div>\r\n        <\/div>\r\n\r\n        <script>\r\n        document.addEventListener(\"DOMContentLoaded\", function() {\r\n            const blogContainer = document.getElementById('t360-blog-container');\r\n            if (!blogContainer) return;\r\n\r\n            const imgBaseUrl = \"https:\/\/tiles360.ai\/storage\/\";\r\n            const currentSlug = \"\";\r\n            \r\n            const pathSegments = window.location.pathname.split('\/').filter(Boolean);\r\n            const blogsIdx = pathSegments.indexOf('blogs');\r\n            const baseUrl = window.location.origin + (blogsIdx !== -1 ? '\/' + pathSegments.slice(0, blogsIdx + 1).join('\/') + '\/' : '\/blogs\/');\r\n\r\n            \/\/ -------------------------------------------------------------\r\n            \/\/ DETAIL VIEW\r\n            \/\/ -------------------------------------------------------------\r\n            if (currentSlug && currentSlug !== 'blogs') {\r\n                fetch('https:\/\/tiles360.ai\/api\/fetchBlogBySlug\/' + encodeURIComponent(currentSlug))\r\n                    .then(res => res.json())\r\n                    .then(resData => {\r\n                        if (!resData.status || !resData.data) {\r\n                            blogContainer.innerHTML = '<div style=\"padding:40px 0;\"><p>Blog post not found.<\/p><a href=\"' + baseUrl + '\" class=\"thm-btn thm-btn--aso header-btn-login\">&larr; Back to Blogs<\/a><\/div>';\r\n                            return;\r\n                        }\r\n\r\n                        const blog = resData.data;\r\n                        let imgPath = blog.images ? blog.images.replace(\/\\\\\/g, '\/').replace(\/^\\\/?(storage\\\/)?\/, '') : '';\r\n                        let imgUrl = imgPath ? imgBaseUrl + imgPath : '';\r\n                        \r\n                        let rawContent = blog.description || blog.short_description || '';\r\n                        let content = rawContent.replace(\/<(p|h[1-6]|div)\\s*>\\s*(<br\\s*\\\/?>)?\\s*<\\\/\\1>\/gi, '');\r\n\r\n                        const cf7FormHtml = \"\\n<div class=\\\"wpcf7 no-js\\\" id=\\\"wpcf7-f5026-o1\\\" lang=\\\"en-US\\\" dir=\\\"ltr\\\" data-wpcf7-id=\\\"5026\\\">\\n<div class=\\\"screen-reader-response\\\"><p role=\\\"status\\\" aria-live=\\\"polite\\\" aria-atomic=\\\"true\\\"><\\\/p> <ul><\\\/ul><\\\/div>\\n<form action=\\\"\\\/tiles360\\\/wp-json\\\/wp\\\/v2\\\/pages\\\/5004#wpcf7-f5026-o1\\\" method=\\\"post\\\" class=\\\"wpcf7-form init\\\" aria-label=\\\"Contact form\\\" novalidate=\\\"novalidate\\\" data-status=\\\"init\\\">\\n<fieldset class=\\\"hidden-fields-container\\\"><input type=\\\"hidden\\\" name=\\\"_wpcf7\\\" value=\\\"5026\\\" \\\/><input type=\\\"hidden\\\" name=\\\"_wpcf7_version\\\" value=\\\"6.1.6\\\" \\\/><input type=\\\"hidden\\\" name=\\\"_wpcf7_locale\\\" value=\\\"en_US\\\" \\\/><input type=\\\"hidden\\\" name=\\\"_wpcf7_unit_tag\\\" value=\\\"wpcf7-f5026-o1\\\" \\\/><input type=\\\"hidden\\\" name=\\\"_wpcf7_container_post\\\" value=\\\"0\\\" \\\/><input type=\\\"hidden\\\" name=\\\"_wpcf7_posted_data_hash\\\" value=\\\"\\\" \\\/>\\n<\\\/fieldset>\\n<div class=\\\"cf360-form\\\">\\n    <div class=\\\"row g-4\\\">\\n        <div class=\\\"col-md-4 mt-3\\\">\\n            <div class=\\\"cf360-field\\\">\\n                <label for=\\\"text1\\\">Full Name <span>*<\\\/span><\\\/label>\\n                <span class=\\\"wpcf7-form-control-wrap\\\" data-name=\\\"name\\\"><input size=\\\"40\\\" maxlength=\\\"400\\\" class=\\\"wpcf7-form-control wpcf7-text wpcf7-validates-as-required cf360-input\\\" id=\\\"text1\\\" aria-required=\\\"true\\\" aria-invalid=\\\"false\\\" value=\\\"\\\" type=\\\"text\\\" name=\\\"name\\\" \\\/><\\\/span>\\n            <\\\/div>\\n        <\\\/div>\\n        <div class=\\\"col-md-4 mt-3\\\">\\n            <div class=\\\"cf360-field\\\">\\n                <label for=\\\"text2\\\">Email Address <span>*<\\\/span><\\\/label>\\n                <span class=\\\"wpcf7-form-control-wrap\\\" data-name=\\\"email\\\"><input size=\\\"40\\\" maxlength=\\\"400\\\" class=\\\"wpcf7-form-control wpcf7-email wpcf7-validates-as-required wpcf7-text wpcf7-validates-as-email cf360-input\\\" id=\\\"text2\\\" aria-required=\\\"true\\\" aria-invalid=\\\"false\\\" value=\\\"\\\" type=\\\"email\\\" name=\\\"email\\\" \\\/><\\\/span>\\n            <\\\/div>\\n        <\\\/div>\\n        <div class=\\\"col-md-4 mt-3\\\">\\n            <div class=\\\"cf360-field\\\">\\n                <label for=\\\"text3\\\">Your Website<\\\/label>\\n                <span class=\\\"wpcf7-form-control-wrap\\\" data-name=\\\"website\\\"><input size=\\\"40\\\" maxlength=\\\"400\\\" class=\\\"wpcf7-form-control wpcf7-url wpcf7-text wpcf7-validates-as-url cf360-input\\\" id=\\\"text3\\\" aria-invalid=\\\"false\\\" value=\\\"\\\" type=\\\"url\\\" name=\\\"website\\\" \\\/><\\\/span>\\n            <\\\/div>\\n        <\\\/div>\\n        <div class=\\\"col-12 mt-3\\\">\\n            <div class=\\\"cf360-field\\\">\\n                <label>Your Comment<span>*<\\\/span><\\\/label>\\n                <span class=\\\"wpcf7-form-control-wrap\\\" data-name=\\\"message\\\"><textarea cols=\\\"40\\\" rows=\\\"10\\\" maxlength=\\\"2000\\\" class=\\\"wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required cf360-textarea\\\" aria-required=\\\"true\\\" aria-invalid=\\\"false\\\" name=\\\"message\\\"><\\\/textarea><\\\/span>\\n            <\\\/div>\\n        <\\\/div>\\n        <div class=\\\"col-12 mt-3\\\">\\n<button type=\\\"submit\\\" class=\\\"cp-btn\\\">Send us a message <i class=\\\"fal fa-arrow-right\\\"><\\\/i><\\\/button>\\n        <\\\/div>\\n    <\\\/div>\\n<\\\/div><p style=\\\"display: none !important;\\\" class=\\\"akismet-fields-container\\\" data-prefix=\\\"_wpcf7_ak_\\\"><label>&#916;<textarea name=\\\"_wpcf7_ak_hp_textarea\\\" cols=\\\"45\\\" rows=\\\"8\\\" maxlength=\\\"100\\\"><\\\/textarea><\\\/label><input type=\\\"hidden\\\" id=\\\"ak_js_1\\\" name=\\\"_wpcf7_ak_js\\\" value=\\\"66\\\"\\\/><script>\\ndocument.getElementById( \\\"ak_js_1\\\" ).setAttribute( \\\"value\\\", ( new Date() ).getTime() );\\n<\\\/script>\\n<\\\/p><div class=\\\"wpcf7-response-output\\\" aria-hidden=\\\"true\\\"><\\\/div>\\n<\\\/form>\\n<\\\/div>\\n\";\r\n\r\n                        blogContainer.innerHTML = `\r\n                            <div class=\"t360-blog-detail-wrapper\" style=\"width: 100%; padding: 40px 0;\">\r\n                                <a href=\"${baseUrl}\" class=\"thm-btn thm-btn--aso header-btn-login\" style=\"margin-bottom: 30px; display: inline-block;\">\r\n                                    &larr; Back to Blogs\r\n                                <\/a>\r\n                                <h1 class=\"t360-detail-title\">${blog.title}<\/h1>\r\n                                <div class=\"t360-detail-meta\">Published on: ${blog.date}<\/div>\r\n                                ${imgUrl ? `<div class=\"t360-detail-featured-img\"><img decoding=\"async\" src=\"${imgUrl}\" alt=\"${blog.title}\"><\/div>` : ''}\r\n                                <div class=\"t360-detail-content\">${content}<\/div>\r\n\r\n                                <!-- Comment Form Section -->\r\n                                <div class=\"t360-blog-comment-section\" style=\"margin-top: 50px;\">\r\n                                    <h2 style=\"color: #3351A3; font-weight: 700; margin-bottom: 25px;\">Leave a Comment<\/h2>\r\n                                    ${cf7FormHtml}\r\n                                    <div id=\"t360-comment-status\" style=\"margin-top: 15px; display: none;\"><\/div>\r\n                                <\/div>\r\n\r\n                                <!-- Recent Blogs Section -->\r\n                                <div class=\"t360-recent-blogs-section\" style=\"margin-top: 70px; padding-top: 40px; border-top: 1px solid #e2e8f0;\">\r\n                                    <h2 style=\"color: #3351A3; font-weight: 700; margin-bottom: 25px;\">Recent Blogs<\/h2>\r\n                                    <div class=\"t360-blog-grid\" id=\"t360-recent-grid\">\r\n                                        <div style=\"padding: 20px;\">Loading recent blogs...<\/div>\r\n                                    <\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        `;\r\n\r\n                        \/\/ Fetch & Render Recent Blogs (3 Posts)\r\n                        fetch('https:\/\/tiles360.ai\/api\/fetchBlogList')\r\n                            .then(res => res.json())\r\n                            .then(recentData => {\r\n                                const recentGrid = document.getElementById('t360-recent-grid');\r\n                                if (!recentGrid) return;\r\n\r\n                                if (recentData.status && recentData.data) {\r\n                                    let recentList = recentData.data\r\n                                        .filter(b => b.id !== blog.id)\r\n                                        .sort((a, b) => new Date(b.date) - new Date(a.date))\r\n                                        .slice(0, 3);\r\n\r\n                                    recentGrid.innerHTML = '';\r\n                                    recentList.forEach(item => {\r\n                                        let rImgPath = item.images ? item.images.replace(\/\\\\\/g, '\/').replace(\/^\\\/?(storage\\\/)?\/, '') : '';\r\n                                        let rImgUrl = rImgPath ? imgBaseUrl + rImgPath : '';\r\n                                        let rItemSlug = item.title.toLowerCase().replace(\/[^a-z0-9]+\/g, '-').replace(\/^-+|-+$\/g, '');\r\n                                        let rDetailLink = baseUrl + rItemSlug + '\/';\r\n\r\n                                        let rTitleWords = item.title.trim().split(\/\\s+\/);\r\n                                        let rTruncatedTitle = rTitleWords.length > 7 ? rTitleWords.slice(0, 7).join(' ') + '...' : item.title;\r\n\r\n                                        let rPlainDesc = (item.short_description || '').replace(\/<[^>]*>?\/gm, '').trim();\r\n                                        let rDescWords = rPlainDesc.split(\/\\s+\/);\r\n                                        let rTruncatedExcerpt = rDescWords.length > 11 ? rDescWords.slice(0, 11).join(' ') + '...' : rPlainDesc;\r\n\r\n                                        recentGrid.insertAdjacentHTML('beforeend', `\r\n                                            <div class=\"t360-blog-card\">\r\n                                                ${rImgUrl ? `<a href=\"${rDetailLink}\" class=\"t360-card-img-link\"><img decoding=\"async\" src=\"${rImgUrl}\" alt=\"${item.title}\" loading=\"lazy\"><\/a>` : ''}\r\n                                                <div class=\"t360-card-body\">\r\n                                                    <span class=\"t360-card-date\">${item.date}<\/span>\r\n                                                    <h3 class=\"t360-card-title\"><a href=\"${rDetailLink}\" title=\"${item.title}\">${rTruncatedTitle}<\/a><\/h3>\r\n                                                    <p class=\"t360-card-excerpt\">${rTruncatedExcerpt}<\/p>\r\n                                                    <div style=\"margin-top: auto; padding-top: 15px;\">\r\n                                                        <a href=\"${rDetailLink}\" class=\"thm-btn thm-btn--aso header-btn-login\">Read More<\/a>\r\n                                                    <\/div>\r\n                                                <\/div>\r\n                                            <\/div>\r\n                                        `);\r\n                                    });\r\n                                }\r\n                            })\r\n                            .catch(err => console.error('Error fetching recent blogs:', err));\r\n\t\t\t\t\t\/\/ Direct Fetch Submit Handler\r\nconst formElement = blogContainer.querySelector('form');\r\nif (formElement) {\r\n\r\n    \/\/ Map each input name -> its cf360-field wrapper (for error placement)\r\n    function getFieldWrapper(inputEl) {\r\n        return inputEl.closest('.cf360-field');\r\n    }\r\n\r\n    function clearFieldError(inputEl) {\r\n        const wrapper = getFieldWrapper(inputEl);\r\n        if (!wrapper) return;\r\n        const errorEl = wrapper.querySelector('.cf360-error-msg');\r\n        if (errorEl) errorEl.remove();\r\n        inputEl.classList.remove('cf360-input-error');\r\n    }\r\n\r\n    function showFieldError(inputEl, message) {\r\n        const wrapper = getFieldWrapper(inputEl);\r\n        if (!wrapper) return;\r\n        clearFieldError(inputEl);\r\n        inputEl.classList.add('cf360-input-error');\r\n        const errorEl = document.createElement('div');\r\n        errorEl.className = 'cf360-error-msg';\r\n        errorEl.textContent = message;\r\n        wrapper.appendChild(errorEl);\r\n    }\r\n\r\n    function clearAllErrors() {\r\n        formElement.querySelectorAll('.cf360-error-msg').forEach(el => el.remove());\r\n        formElement.querySelectorAll('.cf360-input-error').forEach(el => el.classList.remove('cf360-input-error'));\r\n    }\r\n\r\n    \/\/ Clear a field's error the moment the user edits it\r\n    formElement.querySelectorAll('.cf360-input, .cf360-textarea').forEach(inputEl => {\r\n        inputEl.addEventListener('input', function() {\r\n            clearFieldError(inputEl);\r\n        });\r\n    });\r\n\r\n    function isValidEmail(value) {\r\n        return \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(value);\r\n    }\r\n\r\n    function isValidUrl(value) {\r\n        try {\r\n            new URL(value);\r\n            return true;\r\n        } catch (e) {\r\n            return false;\r\n        }\r\n    }\r\n\r\n    function validateForm() {\r\n        clearAllErrors();\r\n        let isValid = true;\r\n\r\n        const nameInput = formElement.querySelector('[name=\"name\"]');\r\n        const emailInput = formElement.querySelector('[name=\"email\"]');\r\n        const websiteInput = formElement.querySelector('[name=\"website\"]');\r\n        const messageInput = formElement.querySelector('[name=\"message\"]');\r\n\r\n        if (nameInput && !nameInput.value.trim()) {\r\n            showFieldError(nameInput, 'Full Name is required.');\r\n            isValid = false;\r\n        }\r\n\r\n        if (emailInput) {\r\n            if (!emailInput.value.trim()) {\r\n                showFieldError(emailInput, 'Email Address is required.');\r\n                isValid = false;\r\n            } else if (!isValidEmail(emailInput.value.trim())) {\r\n                showFieldError(emailInput, 'Please enter a valid email address.');\r\n                isValid = false;\r\n            }\r\n        }\r\n\r\n        \/\/ Website is required only if it still carries the \"required\" validation class\r\n        if (websiteInput && websiteInput.classList.contains('wpcf7-validates-as-required')) {\r\n            if (!websiteInput.value.trim()) {\r\n                showFieldError(websiteInput, 'Website is required.');\r\n                isValid = false;\r\n            } else if (!isValidUrl(websiteInput.value.trim())) {\r\n                showFieldError(websiteInput, 'Please enter a valid URL (e.g. https:\/\/example.com).');\r\n                isValid = false;\r\n            }\r\n        } else if (websiteInput && websiteInput.value.trim() && !isValidUrl(websiteInput.value.trim())) {\r\n            showFieldError(websiteInput, 'Please enter a valid URL (e.g. https:\/\/example.com).');\r\n            isValid = false;\r\n        }\r\n\r\n        if (messageInput && !messageInput.value.trim()) {\r\n            showFieldError(messageInput, 'Comment is required.');\r\n            isValid = false;\r\n        }\r\n\r\n        return isValid;\r\n    }\r\n\r\n    formElement.addEventListener('submit', function(e) {\r\n        e.preventDefault();\r\n        e.stopPropagation();\r\n\r\n        const statusBox = document.getElementById('t360-comment-status');\r\n        if (statusBox) {\r\n            statusBox.style.display = 'none';\r\n            statusBox.innerHTML = '';\r\n        }\r\n\r\n        if (!validateForm()) {\r\n            \/\/ Scroll to the first invalid field\r\n            const firstError = formElement.querySelector('.cf360-input-error');\r\n            if (firstError) {\r\n                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n                firstError.focus();\r\n            }\r\n            return;\r\n        }\r\n\r\n        const submitBtn = formElement.querySelector('button[type=\"submit\"], input[type=\"submit\"], .cp-btn');\r\n\r\n        if (submitBtn) {\r\n            submitBtn.disabled = true;\r\n            submitBtn.setAttribute('data-original-text', submitBtn.innerHTML);\r\n            submitBtn.innerHTML = 'Sending...';\r\n        }\r\n\r\n        const formData = new FormData(formElement);\r\n\r\n        const payload = {\r\n            blog_id: blog.id,\r\n            name: formData.get('name') || '',\r\n            email: formData.get('email') || '',\r\n            website: formData.get('website') || '',\r\n            comment: formData.get('message') || ''\r\n        };\r\n\r\n        fetch('https:\/\/tiles360.ai\/api\/client\/comments\/store', {\r\n            method: 'POST',\r\n            headers: {\r\n                'Content-Type': 'application\/json',\r\n                'Accept': 'application\/json'\r\n            },\r\n            body: JSON.stringify(payload)\r\n        })\r\n        .then(response => {\r\n            if (!response.ok) {\r\n                throw new Error(`Server returned status code ${response.status}`);\r\n            }\r\n            return response.json();\r\n        })\r\n        .then(data => {\r\n            if (data && data.status === false) {\r\n                throw new Error(data.message || 'API rejected submission');\r\n            }\r\n            if (statusBox) {\r\n                statusBox.style.display = 'block';\r\n                statusBox.style.padding = '12px 20px';\r\n                statusBox.style.borderRadius = '4px';\r\n                statusBox.style.border = '1px solid #46b450';\r\n                statusBox.style.backgroundColor = '#f4fbf4';\r\n                statusBox.style.color = '#105214';\r\n                statusBox.innerHTML = 'Your comment has been sent successfully!';\r\n            }\r\n            formElement.reset();\r\n            clearAllErrors();\r\n        })\r\n        .catch(err => {\r\n            console.error('API Post Error:', err);\r\n            if (statusBox) {\r\n                statusBox.style.display = 'block';\r\n                statusBox.style.padding = '12px 20px';\r\n                statusBox.style.borderRadius = '4px';\r\n                statusBox.style.border = '1px solid #dc3232';\r\n                statusBox.style.backgroundColor = '#fcf0f0';\r\n                statusBox.style.color = '#8a1f1f';\r\n                statusBox.innerHTML = 'Something went wrong while sending your comment. Please try again in a moment.';\r\n            }\r\n        })\r\n        .finally(() => {\r\n            if (submitBtn) {\r\n                submitBtn.disabled = false;\r\n                submitBtn.innerHTML = submitBtn.getAttribute('data-original-text') || 'Send us a message';\r\n            }\r\n        });\r\n    }, true);\r\n}\r\n                    })\r\n                    .catch(err => {\r\n                        console.error('Fetch Error:', err);\r\n                        blogContainer.innerHTML = '<p>Error loading blog details.<\/p>';\r\n                    });\r\n\r\n            } else {\r\n                \/\/ -------------------------------------------------------------\r\n                \/\/ MAIN LIST VIEW\r\n                \/\/ -------------------------------------------------------------\r\n                fetch('https:\/\/tiles360.ai\/api\/fetchBlogList')\r\n                    .then(res => res.json())\r\n                    .then(resData => {\r\n                        if (!resData.status || !resData.data || !resData.data.length) {\r\n                            blogContainer.innerHTML = '<p>No blogs found.<\/p>';\r\n                            return;\r\n                        }\r\n\r\n                        let blogs = resData.data;\r\n                        blogs.sort((a, b) => new Date(b.date) - new Date(a.date));\r\n\r\n                        let currentIndex = 0;\r\n                        const itemsPerPage = 6;\r\n\r\n                        blogContainer.innerHTML = `\r\n                            <div class=\"t360-blog-grid\" id=\"t360-grid\"><\/div>\r\n                            <div id=\"t360-load-more-wrapper\" style=\"text-align: center; margin-top: 40px; margin-bottom: 20px;\">\r\n                                <button id=\"t360-load-more-btn\" class=\"thm-btn thm-btn--aso header-btn-login\" style=\"cursor: pointer; border: none;\">\r\n                                    Load More\r\n                                <\/button>\r\n                            <\/div>\r\n                        `;\r\n\r\n                        const gridContainer = document.getElementById('t360-grid');\r\n                        const loadMoreBtn = document.getElementById('t360-load-more-btn');\r\n                        const loadMoreWrapper = document.getElementById('t360-load-more-wrapper');\r\n\r\n                        function renderBatch() {\r\n                            const nextBatch = blogs.slice(currentIndex, currentIndex + itemsPerPage);\r\n\r\n                            nextBatch.forEach(item => {\r\n                                let imgPath = item.images ? item.images.replace(\/\\\\\/g, '\/').replace(\/^\\\/?(storage\\\/)?\/, '') : '';\r\n                                let imgUrl = imgPath ? imgBaseUrl + imgPath : '';\r\n                                \r\n                                let itemSlug = item.title.toLowerCase().replace(\/[^a-z0-9]+\/g, '-').replace(\/^-+|-+$\/g, '');\r\n                                let detailLink = baseUrl + itemSlug + '\/';\r\n\r\n                                let titleWords = item.title.trim().split(\/\\s+\/);\r\n                                let truncatedTitle = titleWords.length > 7 ? titleWords.slice(0, 7).join(' ') + '...' : item.title;\r\n\r\n                                let plainDescription = (item.short_description || '').replace(\/<[^>]*>?\/gm, '').trim();\r\n                                let descWords = plainDescription.split(\/\\s+\/);\r\n                                let truncatedExcerpt = descWords.length > 11 ? descWords.slice(0, 11).join(' ') + '...' : plainDescription;\r\n\r\n                                const cardHtml = `\r\n                                    <div class=\"t360-blog-card\">\r\n                                        ${imgUrl ? `<a href=\"${detailLink}\" class=\"t360-card-img-link\"><img decoding=\"async\" src=\"${imgUrl}\" alt=\"${item.title}\" loading=\"lazy\"><\/a>` : ''}\r\n                                        <div class=\"t360-card-body\">\r\n                                            <span class=\"t360-card-date\">${item.date}<\/span>\r\n                                            <h3 class=\"t360-card-title\"><a href=\"${detailLink}\" title=\"${item.title}\">${truncatedTitle}<\/a><\/h3>\r\n                                            <p class=\"t360-card-excerpt\">${truncatedExcerpt}<\/p>\r\n                                            <div style=\"margin-top: auto; padding-top: 15px;\">\r\n                                                <a href=\"${detailLink}\" class=\"thm-btn thm-btn--aso header-btn-login\">\r\n                                                    Read More\r\n                                                    <svg width=\"14\" height=\"12\" viewBox=\"0 0 14 12\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"margin-left: 6px; vertical-align: middle;\">\r\n                                                        <path d=\"M8 1L13 6M13 6L8 11M13 6H1\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n                                                    <\/svg>\r\n                                                <\/a>\r\n                                            <\/div>\r\n                                        <\/div>\r\n                                    <\/div>\r\n                                `;\r\n                                gridContainer.insertAdjacentHTML('beforeend', cardHtml);\r\n                            });\r\n\r\n                            currentIndex += itemsPerPage;\r\n\r\n                            if (currentIndex >= blogs.length) {\r\n                                loadMoreWrapper.style.display = 'none';\r\n                            }\r\n                        }\r\n\r\n                        renderBatch();\r\n\r\n                        loadMoreBtn.addEventListener('click', function() {\r\n                            renderBatch();\r\n                        });\r\n                    })\r\n                    .catch(err => {\r\n                        console.error('Fetch Error:', err);\r\n                        blogContainer.innerHTML = '<p>Error loading blogs.<\/p>';\r\n                    });\r\n            }\r\n        });\r\n        <\/script>\r\n        <\/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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"innomax-template.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-5004","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/pages\/5004","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/comments?post=5004"}],"version-history":[{"count":25,"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/pages\/5004\/revisions"}],"predecessor-version":[{"id":5036,"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/pages\/5004\/revisions\/5036"}],"wp:attachment":[{"href":"https:\/\/tiles360dev.3droomview.com\/tiles360\/wp-json\/wp\/v2\/media?parent=5004"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}