{"id":112,"date":"2024-12-31T08:56:08","date_gmt":"2024-12-31T08:56:08","guid":{"rendered":"https:\/\/wishpro.hk\/%e9%a6%96%e9%a1%b5\/"},"modified":"2025-01-10T09:32:20","modified_gmt":"2025-01-10T09:32:20","slug":"home","status":"publish","type":"page","link":"https:\/\/wishpro.hk\/zh\/","title":{"rendered":"Home"},"content":{"rendered":"\n<div id=\"banner\" class=\"xl:min-h-[50vh] pt-10 xl:pt-20\">\n    <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/uploads\/2024\/12\/Wishpro_top_banner_V01-1.png\" alt=\"\"\n        class=\"aspect-[1920\/653] block mx-auto w-full h-full bg-center object-cover\" \/>\n<\/div>\n\n\n<section block-name=\"locations\" class=\"indiba-locations container relative py-10 4xl:pt-20 4xl:pb-[60px] \">\n    <div class=\"container-md\" x-data=\"indiba_locations\">\n        <div class=\"mb-10 4xl:mb-20\">\n            <h3 class=\"heading3 mb-5 2xl:mb-[32px]\">\u6b63\u8ca8\u7cfb\u7d71\u8a8d\u8b49\u6e05\u55ae<\/h3>\n\n            <form class=\"flex gap-x-5 justify-between items-end w-full max-lg:flex-wrap\" x-on:submit.prevent=\"getPosts\">\n    <div class= \"space-y-2 xl:space-y-4 w-full xl:w-auto\">\n        <label for=\"\"\n            class=\" text-body-3 text-black-000\">\u641c\u5c0b\u95dc\u9375\u5b57<\/label>\n        <div class=\"search-inputcontainer relative w-full xl:w-auto\">\n            <input x-model=\"s_term\" type=\"text\" id=\"s_term\" name=\"s_term\" aria-label=\"s_term\"\n                @input.debounce.500ms=\"getPosts\"\n                class=\"border text-body-3 bg-transparent border-dark rounded-full px-6 py-3 min-w-[300px] 2xl:min-w-[400px] text-body w-full focus-visible:outline-none\"\n                placeholder=\"\u8f38\u5165\u95dc\u9375\u5b57\">\n            <button type=\"submit\" class=\"absolute right-6 top-1\/2 -translate-y-1\/2\">\n                <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/search-icon.svg\" alt=\"search icon\"\n                    class=\"w-6 h-6\">\n            <\/button>\n\n        <\/div>\n    <\/div>\n    <div class=\"flex max-lg:w-full news-filter gap-x-5\">\n        <div\n            class=\"w-full space-y-2 xl:space-y-4 xs:w-[calc(50%-5px)] lg:min-w-[150px] 2xl:min-w-[200px] mt-4 lg:mt-0 text-body text-black-000 filter-div-container\">\n            <label for=\"\" class=\"text-body-3 text-black-000\">\u5730\u5340<\/label>\n                <div class=\"relative\" x-data=\"indiba_area\">\n        <input type=\"text\" id=\"s_area\" name=\"s_area\" x-model=\"s_area\" class=\"hidden\"\n            aria-hidden=\"false\" \/>\n\n        <div class=\"indiba_area px-3 items-center justify-center md:px-6 cursor-pointer border-dark rounded-full py-2 md:py-3 border-[1px] flex\"\n            :class=\"dropdownOpened ? 'border-dark' : ''\" @click=\"toggleDropdown\">\n            <label for=\"s_area\"\n                class=\"mr-2.5 text-nowrap text-body-3 text-ellipsis line-clamp-1 pointer-events-none text-18 font-[500] text-dark\"\n                :class=\"!s_area ? '' : ''\" x-text=\"d_area\"><\/label>\n            <span class=\"ml-auto shrink-0\">\n                <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                    class=\" transition-all w-6 h-6 pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n            <\/span>\n        <\/div>\n\n        <ul class=\"absolute rounded-[20px] min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-dark transition-all max-h-0 overflow-hidden border\"\n            :class=\"dropdownOpened ? 'border-dark' : 'border-none'\" x-ref=\"dropdown\">\n            <li class=\"px-3 text-body-3 font- md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-lightGrey\"\n                :class=\"d_area == '\u5168\u90e8' ? 'font-bold ' : ''\"\n                @click=\"onOptionClick('', '\u5168\u90e8')\">\n                \u5168\u90e8            <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u4e0a\u6c34' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('84', '\u4e0a\u6c34')\">\n                                        \u4e0a\u6c34 Sheung Shui                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u4e2d\u74b0' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('26', '\u4e2d\u74b0')\">\n                                        \u4e2d\u74b0 Central                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u4e5d\u9f8d\u7063' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('38', '\u4e5d\u9f8d\u7063')\">\n                                        \u4e5d\u9f8d\u7063 Kowloon Bay                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u4f50\u6566' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('55', '\u4f50\u6566')\">\n                                        \u4f50\u6566 Jordan                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u4f55\u6587\u7530' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('99', '\u4f55\u6587\u7530')\">\n                                        \u4f55\u6587\u7530 Ho Man Tin                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5143\u6717' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('72', '\u5143\u6717')\">\n                                        \u5143\u6717 Yuen Long                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5317\u89d2' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('81', '\u5317\u89d2')\">\n                                        \u5317\u89d2 North Point                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5927\u570d' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('87', '\u5927\u570d')\">\n                                        \u5927\u570d Tai Wai                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5927\u57d4' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('77', '\u5927\u57d4')\">\n                                        \u5927\u57d4 Tai Po                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5c07\u8ecd\u6fb3' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('40', '\u5c07\u8ecd\u6fb3')\">\n                                        \u5c07\u8ecd\u6fb3 Tseung Kwan O                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5c16\u6c99\u5480' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('27', '\u5c16\u6c99\u5480')\">\n                                        \u5c16\u6c99\u5480 Tsim Sha Tsui                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u5c6f\u9580' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('101', '\u5c6f\u9580')\">\n                                        \u5c6f\u9580 Tuen Mun                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u65b0\u84b2\u5d17' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('52', '\u65b0\u84b2\u5d17')\">\n                                        \u65b0\u84b2\u5d17 San Po Kong                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u65fa\u89d2' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('28', '\u65fa\u89d2')\">\n                                        \u65fa\u89d2 Mong Kok                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u67f4\u7063' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('56', '\u67f4\u7063')\">\n                                        \u67f4\u7063 Chai Wan                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6c99\u7530' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('76', '\u6c99\u7530')\">\n                                        \u6c99\u7530 Shatin                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('95', '\u6fb3\u9580')\">\n                                        \u6fb3\u9580 Macau                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u52de\u52d5\u7bc0\u5927\u99ac\u8def)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('62', '\u6fb3\u9580 (\u52de\u52d5\u7bc0\u5927\u99ac\u8def)')\">\n                                        \u6fb3\u9580 (\u52de\u52d5\u7bc0\u5927\u99ac\u8def) Macao (Avenida 1 de Maio)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u5357\u7063\u5927\u99ac\u8def)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('70', '\u6fb3\u9580 (\u5357\u7063\u5927\u99ac\u8def)')\">\n                                        \u6fb3\u9580 (\u5357\u7063\u5927\u99ac\u8def) Macao (Avenida da Praia Grande)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u6c39\u4ed4)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('50', '\u6fb3\u9580 (\u6c39\u4ed4)')\">\n                                        \u6fb3\u9580 (\u6c39\u4ed4) Macao (Taipa)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u7687\u671d)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('69', '\u6fb3\u9580 (\u7687\u671d)')\">\n                                        \u6fb3\u9580 (\u7687\u671d) Macao (NAPE)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u7b77\u5b50\u57fa)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('63', '\u6fb3\u9580 (\u7b77\u5b50\u57fa)')\">\n                                        \u6fb3\u9580 (\u7b77\u5b50\u57fa) Macao (Fai Chi Kei)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u8377\u862d\u5712)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('66', '\u6fb3\u9580 (\u8377\u862d\u5712)')\">\n                                        \u6fb3\u9580 (\u8377\u862d\u5712) Macao (Avenida do Conselheiro Ferreira de Almeida)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580 (\u9ad8\u58eb\u5fb7)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('46', '\u6fb3\u9580 (\u9ad8\u58eb\u5fb7)')\">\n                                        \u6fb3\u9580 (\u9ad8\u58eb\u5fb7) Macao (Horta e Costa)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u6fb3\u9580(\u9ed1\u6c99\u74b0)' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('47', '\u6fb3\u9580(\u9ed1\u6c99\u74b0)')\">\n                                        \u6fb3\u9580(\u9ed1\u6c99\u74b0) Macao (Areia Preta)                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u77f3\u9580' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('54', '\u77f3\u9580')\">\n                                        \u77f3\u9580 Shek Mun                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u7c89\u5dba' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('44', '\u7c89\u5dba')\">\n                                        \u7c89\u5dba Fanling                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u7f8e\u5b5a' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('83', '\u7f8e\u5b5a')\">\n                                        \u7f8e\u5b5a Mei Foo                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u8343\u7063' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('29', '\u8343\u7063')\">\n                                        \u8343\u7063 Tsuen Wan                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u8354\u679d\u89d2' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('91', '\u8354\u679d\u89d2')\">\n                                        \u8354\u679d\u89d2 Lai Chi Kok                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u8584\u6276\u6797' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('97', '\u8584\u6276\u6797')\">\n                                        \u8584\u6276\u6797 Pok Fu Lam                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u85cd\u7530' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('89', '\u85cd\u7530')\">\n                                        \u85cd\u7530 Lam Tin                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u89c0\u5858' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('35', '\u89c0\u5858')\">\n                                        \u89c0\u5858 Kwun Tong                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u8abf\u666f\u5dba' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('92', '\u8abf\u666f\u5dba')\">\n                                        \u8abf\u666f\u5dba Tiu Keng Leng                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u9285\u947c\u7063' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('25', '\u9285\u947c\u7063')\">\n                                        \u9285\u947c\u7063 Causeway Bay                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u9577\u6c99\u7063' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('36', '\u9577\u6c99\u7063')\">\n                                        \u9577\u6c99\u7063 Cheung Sha Wan                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u9752\u8863' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('60', '\u9752\u8863')\">\n                                        \u9752\u8863 Tsing Yi                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_area == '\u99ac\u978d\u5c71' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('42', '\u99ac\u978d\u5c71')\">\n                                        \u99ac\u978d\u5c71 Ma On Shan                    <\/li>\n                    <\/ul>\n    <\/div>\n    <script>\n        (function () {\n            document.addEventListener('alpine:init', function () {\n                Alpine.data('indiba_area', () => ({\n                    handleClickAwayBound: null,\n                    dropdownOpened: false,\n                    toggleDropdown: function () {\n                        if (this.dropdownOpened) {\n                            this.dropdownOpened = false;\n                            this.hideDropdown();\n                        } else {\n                            this.dropdownOpened = true;\n                            this.showDropdown();\n                        }\n                    },\n                    showDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        let maxHeight = 0;\n                        Array.from(dropdown.children).forEach(child => {\n                            maxHeight += child.clientHeight;\n                        });\n                        dropdown.style.setProperty('max-height', maxHeight + 'px');\n                        this.handleClickAwayBound = this.handleClickAway.bind(\n                            this\n                        ); \/\/ using extra var to make function in state when removing listener\n                        document.addEventListener('click', this.handleClickAwayBound);\n                    },\n                    hideDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        dropdown.style.removeProperty('max-height');\n                        document.removeEventListener('click', this.handleClickAwayBound);\n                    },\n                    onOptionClick: function (search, display) {\n                        this['s_area'] = search;\n                        this['d_area'] = display;\n                        this.toggleDropdown();\n                        this.getPosts();\n                    },\n                    handleClickAway: function (e) {\n                        if (!e.target.closest('.indiba_area') && this.dropdownOpened) {\n                            this.toggleDropdown();\n                        }\n                    },\n                }));\n            });\n        })();\n    <\/script>\n            <\/div>\n        <div\n            class=\"w-full space-y-2 xl:space-y-4 xs:w-[calc(50%-5px)] lg:min-w-[150px] 2xl:min-w-[200px] mt-4 lg:mt-0 text-body text-black-000 filter-div-container\">\n            <label for=\"\" class=\"mb-3 text-body-3 text-black-000\">\u72c0\u614b<\/label>\n                <div class=\"relative\" x-data=\"indiba_status\">\n        <input type=\"text\" id=\"s_location_status\" name=\"s_location_status\" x-model=\"s_location_status\" class=\"hidden\"\n            aria-hidden=\"false\" \/>\n\n        <div class=\"indiba_status px-3 items-center justify-center md:px-6 cursor-pointer border-dark rounded-full py-2 md:py-3 border-[1px] flex\"\n            :class=\"dropdownOpened ? 'border-dark' : ''\" @click=\"toggleDropdown\">\n            <label for=\"s_location_status\"\n                class=\"mr-2.5 text-nowrap text-body-3 text-ellipsis line-clamp-1 pointer-events-none text-18 font-[500] text-dark\"\n                :class=\"!s_location_status ? '' : ''\" x-text=\"d_location_status\"><\/label>\n            <span class=\"ml-auto shrink-0\">\n                <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                    class=\" transition-all w-6 h-6 pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n            <\/span>\n        <\/div>\n\n        <ul class=\"absolute rounded-[20px] min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-dark transition-all max-h-0 overflow-hidden border\"\n            :class=\"dropdownOpened ? 'border-dark' : 'border-none'\" x-ref=\"dropdown\">\n            <li class=\"px-3 text-body-3 font- md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-lightGrey\"\n                :class=\"d_location_status == '\u5168\u90e8' ? 'font-bold ' : ''\"\n                @click=\"onOptionClick('', '\u5168\u90e8')\">\n                \u5168\u90e8            <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_location_status == '\u5df2\u8a8d\u8b49' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('22', '\u5df2\u8a8d\u8b49')\">\n                                            <span class=\"w-4 h-4 rounded-full inline-block bg-green\"><\/span>\n                                        \u5df2\u8a8d\u8b49                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_location_status == '\u5df2\u904e\u671f' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('23', '\u5df2\u904e\u671f')\">\n                                            <span class=\"w-4 h-4 rounded-full inline-block bg-red\"><\/span>\n                                        \u5df2\u904e\u671f                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_location_status == '\u5f85\u5b9a\u4e2d' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('24', '\u5f85\u5b9a\u4e2d')\">\n                                            <span class=\"w-4 h-4 rounded-full inline-block bg-yellow\"><\/span>\n                                        \u5f85\u5b9a\u4e2d                    <\/li>\n                    <\/ul>\n    <\/div>\n    <script>\n        (function () {\n            document.addEventListener('alpine:init', function () {\n                Alpine.data('indiba_status', () => ({\n                    handleClickAwayBound: null,\n                    dropdownOpened: false,\n                    toggleDropdown: function () {\n                        if (this.dropdownOpened) {\n                            this.dropdownOpened = false;\n                            this.hideDropdown();\n                        } else {\n                            this.dropdownOpened = true;\n                            this.showDropdown();\n                        }\n                    },\n                    showDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        let maxHeight = 0;\n                        Array.from(dropdown.children).forEach(child => {\n                            maxHeight += child.clientHeight;\n                        });\n                        dropdown.style.setProperty('max-height', maxHeight + 'px');\n                        this.handleClickAwayBound = this.handleClickAway.bind(\n                            this\n                        ); \/\/ using extra var to make function in state when removing listener\n                        document.addEventListener('click', this.handleClickAwayBound);\n                    },\n                    hideDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        dropdown.style.removeProperty('max-height');\n                        document.removeEventListener('click', this.handleClickAwayBound);\n                    },\n                    onOptionClick: function (search, display) {\n                        this['s_location_status'] = search;\n                        this['d_location_status'] = display;\n                        this.toggleDropdown();\n                        this.getPosts();\n                    },\n                    handleClickAway: function (e) {\n                        if (!e.target.closest('.indiba_status') && this.dropdownOpened) {\n                            this.toggleDropdown();\n                        }\n                    },\n                }));\n            });\n        })();\n    <\/script>\n            <\/div>\n\n        <div\n            class=\"w-full space-y-2 xl:space-y-4 xs:w-[calc(50%-5px)] lg:min-w-[150px] 2xl:min-w-[200px] mt-4 lg:mt-0 text-body text-black-000 filter-div-container\">\n            <label for=\"\" class=\"mb-3 text-body-3 text-black-000\">\u6392\u5e8f\u65b9\u5f0f<\/label>\n                <div class=\"relative\" x-data=\"indiba_order\">\n        <input type=\"text\" id=\"s_order\" name=\"s_order\" x-model=\"s_order\" class=\"hidden\"\n            aria-hidden=\"false\" \/>\n\n        <div class=\"indiba_order px-3 items-center justify-center md:px-6 cursor-pointer border-dark rounded-full py-2 md:py-3 border-[1px] flex\"\n            :class=\"dropdownOpened ? 'border-dark' : ''\" @click=\"toggleDropdown\">\n            <label for=\"s_order\"\n                class=\"mr-2.5 text-nowrap text-body-3 text-ellipsis line-clamp-1 pointer-events-none text-18 font-[500] text-dark\"\n                :class=\"!s_order ? '' : ''\" x-text=\"d_order\"><\/label>\n            <span class=\"ml-auto shrink-0\">\n                <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/arrow-down.svg\" alt=\"Down Arrow Svg\"\n                    class=\" transition-all w-6 h-6 pointer-events-none\" :class=\"dropdownOpened ? 'rotate-180' : ''\" \/>\n            <\/span>\n        <\/div>\n\n        <ul class=\"absolute rounded-[20px] min-w-max w-full -bottom-1.5 left-0 translate-y-full z-[11] bg-white text-dark transition-all max-h-0 overflow-hidden border\"\n            :class=\"dropdownOpened ? 'border-dark' : 'border-none'\" x-ref=\"dropdown\">\n            <li class=\"px-3 text-body-3 font- md:px-5 py-2 md:py-2.5 cursor-default transition hover:bg-lightGrey\"\n                :class=\"d_order == '\u5168\u90e8' ? 'font-bold ' : ''\"\n                @click=\"onOptionClick('', '\u5168\u90e8')\">\n                \u5168\u90e8            <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_order == 'Z-A' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('desc', 'Z-A')\">\n                                        Z-A                    <\/li>\n                            <li class=\"px-3 md:px-5 max-w-[300px] py-2 md:py-2.5 flex items-center gap-2 transition cursor-pointer hover:bg-lightGrey \"\n                    :class=\"d_order == 'A-Z' ? 'font-bold text-dark' : 'text-dark\/80'\"\n                    @click=\"onOptionClick('asc', 'A-Z')\">\n                                        A-Z                    <\/li>\n                    <\/ul>\n    <\/div>\n    <script>\n        (function () {\n            document.addEventListener('alpine:init', function () {\n                Alpine.data('indiba_order', () => ({\n                    handleClickAwayBound: null,\n                    dropdownOpened: false,\n                    toggleDropdown: function () {\n                        if (this.dropdownOpened) {\n                            this.dropdownOpened = false;\n                            this.hideDropdown();\n                        } else {\n                            this.dropdownOpened = true;\n                            this.showDropdown();\n                        }\n                    },\n                    showDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        let maxHeight = 0;\n                        Array.from(dropdown.children).forEach(child => {\n                            maxHeight += child.clientHeight;\n                        });\n                        dropdown.style.setProperty('max-height', maxHeight + 'px');\n                        this.handleClickAwayBound = this.handleClickAway.bind(\n                            this\n                        ); \/\/ using extra var to make function in state when removing listener\n                        document.addEventListener('click', this.handleClickAwayBound);\n                    },\n                    hideDropdown: function () {\n                        const dropdown = this.$refs.dropdown;\n                        dropdown.style.removeProperty('max-height');\n                        document.removeEventListener('click', this.handleClickAwayBound);\n                    },\n                    onOptionClick: function (search, display) {\n                        this['s_order'] = search;\n                        this['d_order'] = display;\n                        this.toggleDropdown();\n                        this.getPosts();\n                    },\n                    handleClickAway: function (e) {\n                        if (!e.target.closest('.indiba_order') && this.dropdownOpened) {\n                            this.toggleDropdown();\n                        }\n                    },\n                }));\n            });\n        })();\n    <\/script>\n            <\/div>\n    <\/div>\n\n\n<\/form>        <\/div>\n\n        <div class=\" news-cardlist\">\n            <div x-show=\"loading\" class=\"loading-spinner\">Loading&#8230;<\/div>\n            <div class=\"indiba-locations-content\">\n                <!-- render content -->\n\n            <\/div>\n        <\/div>\n\n\n        <div class=\"w-full flex justify-center mt-5 lg:mt-10 4xl:mt-20\">\n            <button x-show=\"current < totalPages &#038;&#038; !loading\" @click=\"loadMore()\"\n                class=\"border-[4px] min-w-[150px] md:min-w-[200px] text-body-2 4xl:min-w-[353px] rounded-full leading-[190%] md:leading-9 mx-auto border-purple hover:border-darkPurple hover:bg-darkPurple hover:text-white transition-all ease-out duration-300 px-[30px] py-1.5 4xl:py-[13.5px] text-dark\">\n                \u8f09\u5165\u66f4\u591a            <\/button>\n        <\/div>\n\n        \n    <\/div>\n\n    <div class=\"absolute -z-10 right-0 top-1\/2 transform -translate-y-1.1\/2\">\n        <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/vector.svg\"\n            class=\"bg-center object-contain\" alt=\"svg bg\">\n    <\/div>\n    <script>\n        (function () {\n            document.addEventListener('alpine:init', function () {\n                Alpine.data('indiba_locations', () => ({\n                    posts: [],\n                    s_term: \"\",\n                    s_area: \"\",\n                    d_area: \"\u5168\u90e8\",\n                    s_location_status: \"\",\n                    d_location_status: \"\u5168\u90e8\",\n                    s_order: \"DESC\",\n                    d_order: \"Z-A\",\n                    current: 0,\n                    per_page: 10,\n                    showPagination: Math.ceil(59 \/ 10),\n                    totalPages: Math.ceil(59 \/ 10),\n                    loading: false,\n                    selectedArea: 0,\n                    activeItem: 0,\n                    status_slug: '',\n                    calculateHeight(el) {\n                        return el.scrollHeight + 'px';\n                    },\n                    loadMore: async function () {\n                        if (this.current >= this.totalPages) return;\n                        this.loading = true;\n\n                        const baseUrl = 'https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/location';\n                        const param = {\n                            search: this.s_term,\n                            s_area: this.s_area,\n                            s_location_status: this.s_location_status,\n                            s_order: this.s_order,\n                            page: this.current + 1,\n                            per_page: this.per_page,\n\n                        };\n\n                        const fetchUrl = baseUrl + \"?\" + this.objectToQueryString(param);\n\n                        try {\n                            const res = await fetch(fetchUrl);\n                            const fetchPosts = await res.json();\n                            const totalPosts = res.headers.get('X-WP-Total');\n                            this.totalPosts = totalPosts;\n                            this.totalPages = Math.ceil(totalPosts \/ this.per_page);\n                            this.showPagination = Math.ceil(totalPosts \/ this.per_page);\n\n                            if (fetchPosts.length > 0) {\n                                \/\/ Append new posts to the existing list without duplication\n                                this.posts = [...this.posts, ...fetchPosts];\n                                this.current++;\n                            } else {\n                                console.log('No more posts to load.');\n                            }\n\n                            \/\/ Update the rendered list\n                            const content = document.querySelector('.indiba-locations .indiba-locations-content');\n                            if (!content.querySelector('template')) {\n                                const template = `<li class=\"list-none\">\n    <div class=\"py-5 xl:py-10 border-b-2 border-grey\">\n\n      <!-- Accordion Title -->\n      <div class=\" flex justify-between items-center cursor-pointer\"\n        @click=\"activeItem = (activeItem === index ? null : index);selectedArea = 0;\">\n        <h4 class=\"heading4\" x-text=\"post.title\"><\/h4>\n        <button class=\"toggle w-5 h-5 2xl:w-8 2xl:h-8\" :style=\"getButtonStyle(index)\"><\/button>\n      <\/div>\n\n      <!-- Accordion Content -->\n      <div \n      x-transition:enter=\"transition-all ease-in-out duration-500 transform\"\n      x-transition:enter-start=\"opacity-0 scale-y-90\"\n      x-transition:enter-end=\"opacity-100 scale-y-100\"\n      x-transition:leave=\"transition-all ease-in-out duration-500 transform\"\n      x-transition:leave-start=\"opacity-100 scale-y-100\"\n      x-transition:leave-end=\"opacity-0 scale-y-90\"\n      :class=\"{ 'hidden': activeItem !== index }\"\n      class=\"pt-5 2xl:pt-10 flex flex-col lg:flex-row justify-between gap-10 overflow-hidden\"\n      >\n        <div class=\"space-y-10\">\n          <!-- Status Terms -->\n          <div class=\"status-terms flex items-center gap-4\">\n            <div class=\"w-[24px] h-[24px] rounded-full\" :class=\"{\n                    'bg-green': post.status?.slug === 'certified',\n                    'bg-red': post.status?.slug === 'expired',\n                    'bg-yellow': post.status?.slug !== 'certified' &#038;&#038; post.status?.slug !== 'expired'\n                }\"><\/div>\n            <h5 class=\"heading5\" x-text=\"post.status?.name\"><\/h5>\n          <\/div>\n\n          <!-- Location Detail -->\n          <!-- area tab buttons -->\n          <div x-show=\"post.location_detail &#038;&#038; post.location_detail.length > 0\" class=\"space-y-10\"\n            x-init=\"selectedArea = 0\">\n            <ul class=\"flex flex-wrap gap-5 items-center\">\n              <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n                <li @click=\"selectedArea = index\" class=\"min-w-[150px] 2xl:min-w-[176px]\">\n\n                  <div class=\"gradient-btn-container group \">\n                    <button class=\"btn\" :class=\"{ 'active': selectedArea === index }\">\n                      <p class=\"line-clamp-1\" x-text=\"detail.area.name\"><\/p>\n                      <p class=\"line-clamp-1\" x-text=\"detail.area.description\"><\/p>\n                    <\/button>\n\n                <\/li>\n              <\/template>\n            <\/ul>\n\n            <!-- Location Details -->\n            <div class=\"location-detail gap-10\">\n              <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n                <div x-show=\"selectedArea == index\" x-cloak>\n\n                  <div class=\"space-y-5\">\n                    <!-- Website Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/globe.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"detail.website ? 'http:\/\/' + detail.website : '#'\"\n                        x-text=\"detail.website || 'No website provided'\"><\/a>\n                    <\/div>\n\n                    <!-- Email Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/mail.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"'mailto:' + detail.email\" x-text=\"detail.email\"><\/a>\n                    <\/div>\n\n                    <!-- Phone Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/call.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"'tel:' + detail.phone\" x-text=\"detail.phone\"><\/a>\n                    <\/div>\n                  <\/div>\n\n                  <!-- Social Media Links -->\n                  <div class=\"flex gap-5 mt-10\">\n                    <a :href=\"detail.facebook\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/fb-white.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.instagram\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/ig-white.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.whatsapp\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/whatsapp.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.social\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/social.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                  <\/div>\n                <\/div>\n              <\/template>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div x-show=\"post.location_detail &#038;&#038; post.location_detail.length > 0\">\n          <!-- area tab detail -->\n          <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n            <div x-show=\"selectedArea === index\" class=\"relative\" x-cloak>\n              <img :src=\"detail.certificate.url || 'https:\/\/fakeimg.pl\/530x750\/c2c2c2\/'\"\n                :alt=\"detail.certificate.alt||'certificate'\"\n                class=\"aspect-[530\/750] max-w-[300px] 4xl:max-w-[530px] w-full h-full rounded-[20px] bg-center object-cover shadow-md\" \/>\n              <a :href=\"detail.certificate.url\" :download=\"detail.certificate.url\"\n                class=\"flex items-center justify-center bg-dark absolute lg:right-3 bottom-3 hover:bg-darkPurple rounded-full cursor-pointer z-10 p-3\">\n                <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/white-download.svg'\"\n                  class=\"object-contain bg-center\" alt=\"\">\n              <\/a>\n            <\/div>\n          <\/template>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/li>`;\n                                Alpine.morph(content, `\n                                <ul class=\"${content.className}\">\n                                    <template x-for=\"(post, index) in posts\" :key=\"index\">\n                                    ${template}\n                                    <\/template>\n                                <\/ul>\n                            `);\n                            }\n                        } catch (e) {\n                            console.error(e);\n                        } finally {\n                            this.loading = false;\n                        }\n                    },\n\n                    getPosts: async function (resetCurrent = true) {\n                        if (resetCurrent) this.current = 1;\n                        this.loading = true;\n\n                        \/\/ fetch\n                        const baseUrl = 'https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/location';\n                        const param = {\n                            search: this.s_term,\n                            s_area: this.s_area,\n                            s_location_status: this.s_location_status,\n                            s_order: this.s_order,\n                            page: this.current,\n                            per_page: this.per_page,\n                        }\n                        const fetchUrl = baseUrl + \"?\" + this.objectToQueryString(param);\n\n                        try {\n                            const res = await fetch(fetchUrl);\n                            const fetchPosts = await res.json();\n                            const totalPosts = res.headers.get('X-WP-Total');\n                            this.posts = fetchPosts;\n                            this.totalPosts = totalPosts;\n                            this.totalPages = Math.ceil(totalPosts \/ this.per_page);\n                            this.showPagination = Math.ceil(totalPosts \/ this.per_page);\n\n                            \/\/ render\n                            const content = document.querySelector(\n                                '.indiba-locations .indiba-locations-content');\n                            if (!content.querySelector('template')) {\n                                const template = `<li class=\"list-none\">\n    <div class=\"py-5 xl:py-10 border-b-2 border-grey\">\n\n      <!-- Accordion Title -->\n      <div class=\" flex justify-between items-center cursor-pointer\"\n        @click=\"activeItem = (activeItem === index ? null : index);selectedArea = 0;\">\n        <h4 class=\"heading4\" x-text=\"post.title\"><\/h4>\n        <button class=\"toggle w-5 h-5 2xl:w-8 2xl:h-8\" :style=\"getButtonStyle(index)\"><\/button>\n      <\/div>\n\n      <!-- Accordion Content -->\n      <div \n      x-transition:enter=\"transition-all ease-in-out duration-500 transform\"\n      x-transition:enter-start=\"opacity-0 scale-y-90\"\n      x-transition:enter-end=\"opacity-100 scale-y-100\"\n      x-transition:leave=\"transition-all ease-in-out duration-500 transform\"\n      x-transition:leave-start=\"opacity-100 scale-y-100\"\n      x-transition:leave-end=\"opacity-0 scale-y-90\"\n      :class=\"{ 'hidden': activeItem !== index }\"\n      class=\"pt-5 2xl:pt-10 flex flex-col lg:flex-row justify-between gap-10 overflow-hidden\"\n      >\n        <div class=\"space-y-10\">\n          <!-- Status Terms -->\n          <div class=\"status-terms flex items-center gap-4\">\n            <div class=\"w-[24px] h-[24px] rounded-full\" :class=\"{\n                    'bg-green': post.status?.slug === 'certified',\n                    'bg-red': post.status?.slug === 'expired',\n                    'bg-yellow': post.status?.slug !== 'certified' &#038;&#038; post.status?.slug !== 'expired'\n                }\"><\/div>\n            <h5 class=\"heading5\" x-text=\"post.status?.name\"><\/h5>\n          <\/div>\n\n          <!-- Location Detail -->\n          <!-- area tab buttons -->\n          <div x-show=\"post.location_detail &#038;&#038; post.location_detail.length > 0\" class=\"space-y-10\"\n            x-init=\"selectedArea = 0\">\n            <ul class=\"flex flex-wrap gap-5 items-center\">\n              <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n                <li @click=\"selectedArea = index\" class=\"min-w-[150px] 2xl:min-w-[176px]\">\n\n                  <div class=\"gradient-btn-container group \">\n                    <button class=\"btn\" :class=\"{ 'active': selectedArea === index }\">\n                      <p class=\"line-clamp-1\" x-text=\"detail.area.name\"><\/p>\n                      <p class=\"line-clamp-1\" x-text=\"detail.area.description\"><\/p>\n                    <\/button>\n\n                <\/li>\n              <\/template>\n            <\/ul>\n\n            <!-- Location Details -->\n            <div class=\"location-detail gap-10\">\n              <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n                <div x-show=\"selectedArea == index\" x-cloak>\n\n                  <div class=\"space-y-5\">\n                    <!-- Website Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/globe.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"detail.website ? 'http:\/\/' + detail.website : '#'\"\n                        x-text=\"detail.website || 'No website provided'\"><\/a>\n                    <\/div>\n\n                    <!-- Email Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/mail.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"'mailto:' + detail.email\" x-text=\"detail.email\"><\/a>\n                    <\/div>\n\n                    <!-- Phone Info -->\n                    <div class=\"flex gap-8\">\n                      <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/call.svg\" alt=\"\">\n                      <a class=\"text-body-2\" :href=\"'tel:' + detail.phone\" x-text=\"detail.phone\"><\/a>\n                    <\/div>\n                  <\/div>\n\n                  <!-- Social Media Links -->\n                  <div class=\"flex gap-5 mt-10\">\n                    <a :href=\"detail.facebook\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/fb-white.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.instagram\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/ig-white.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.whatsapp\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/whatsapp.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                    <a :href=\"detail.social\"\n                      class=\"bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 rounded-full w-[34px] h-[34px] flex items-center justify-center\">\n                      <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/social.svg'\"\n                        class=\"object-contain bg-center\" alt=\"\">\n                    <\/a>\n                  <\/div>\n                <\/div>\n              <\/template>\n            <\/div>\n          <\/div>\n        <\/div>\n        <div x-show=\"post.location_detail &#038;&#038; post.location_detail.length > 0\">\n          <!-- area tab detail -->\n          <template x-for=\"(detail, index) in post.location_detail\" :key=\"index\">\n            <div x-show=\"selectedArea === index\" class=\"relative\" x-cloak>\n              <img :src=\"detail.certificate.url || 'https:\/\/fakeimg.pl\/530x750\/c2c2c2\/'\"\n                :alt=\"detail.certificate.alt||'certificate'\"\n                class=\"aspect-[530\/750] max-w-[300px] 4xl:max-w-[530px] w-full h-full rounded-[20px] bg-center object-cover shadow-md\" \/>\n              <a :href=\"detail.certificate.url\" :download=\"detail.certificate.url\"\n                class=\"flex items-center justify-center bg-dark absolute lg:right-3 bottom-3 hover:bg-darkPurple rounded-full cursor-pointer z-10 p-3\">\n                <img :src=\"themePath.templateUrl+'\/resources\/images\/icon\/white-download.svg'\"\n                  class=\"object-contain bg-center\" alt=\"\">\n              <\/a>\n            <\/div>\n          <\/template>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/li>`;\n                                Alpine.morph(content, `\n                                    <ul class=\"${content.className}\">\n                                        <template x-for=\"(post, index) in posts\" :key=\"index\">\n                                        ${template}\n                                        <\/template>\n                                    <\/ul>\n                                    `);\n                            }\n\n                            \/\/ update URL\n                            const hrefParams = {\n                                s_term: this.s_term,\n                                s_area: this.s_area,\n                                s_location_status: this.s_location_status,\n                                s_order: this.s_order,\n                                current: this.current\n                            };\n                            const newUrl = window.location.href.split(\"?\")[0] + \"?\" + this\n                                .objectToQueryString(hrefParams);\n                            window.history.replaceState({}, document.title, newUrl);\n                        } catch (e) {\n                            console.log(e);\n                        } finally {\n                            this.loading = false;\n                        }\n                    },\n                    toggleActiveState(index) {\n                        this.activeItem = this.activeItem === index ? null : index;\n                    },\n                    getButtonStyle(index) {\n                        const iconType = this.activeItem === index ? \"minus\" : \"plus\";\n                        const iconUrl = `${themePath.templateUrl}\/resources\/images\/icon\/${iconType}.svg`;\n                        return `\n                            background-image: url('${iconUrl}');\n                            background-repeat: no-repeat;\n                            background-position: center;\n                            background-size: contain;\n                        `;\n                    },\n                    toggleAccordion(idx) {\n                        this.activeItem = this.activeItem === idx ? null : idx;\n                    },\n\n                    toggleArea(slug) {\n                        this.selectedArea = this.selectedArea === slug ? '' : slug;\n                    },\n\n\n                    objectToQueryString: function (obj) {\n                        for (let key in obj) {\n                            if (!obj[key]) delete obj[key];\n                        }\n\n                        return Object.keys(obj).map(key => encodeURIComponent(key) + '=' +\n                            encodeURIComponent(obj[key])).join('&');\n                    },\n                    init: function () {\n                        this.loadMore(); \/\/ Load the first batch of posts when the component is initialized\n                    }\n                }));\n            });\n        })();\n    <\/script>\n\n<\/section>\n\n\n<section id=\"contact-form\" class=\"pt-10 pb-5\"\n    style=\"background: linear-gradient(to right, #FFE9C566, #D8C1FF66, #F1C4EA66, #CAD6F366, #FFE9C566);\">\n    <div class=\"container\">\n        <div class=\"container-md\">\n            <div class=\"mb-10 xl:mb-[60px]\">\n                <h2 class=\"heading2 mb-[10px]\">\n                    \u696d\u52d9\u67e5\u8a62                <\/h2>\n                <p class=\"text-body-3\">\n                    \u63a2\u7d22\u6211\u5011\u7684\u5c08\u696d\u8a2d\u5099\u3001\u7642\u7a0b\u53ca\u6559\u80b2\u57f9\u8a13\uff0c\u8b93WISHPRO\u00ae\u52a9\u60a8\u62d3\u5c55\u696d\u52d9\u7684\u7121\u9650\u53ef\u80fd\u3002                <\/p>\n            <\/div>\n            <div class=\"\">\n                <div class=\"contact-form-wrapper\">\n                                            <div class=\"wpforms-container wpforms-container-full wpforms-render-modern\" id=\"wpforms-92\"><form id=\"wpforms-form-92\" class=\"wpforms-validate wpforms-form wpforms-ajax-form\" data-formid=\"92\" method=\"post\" enctype=\"multipart\/form-data\" action=\"\/zh\/wp-json\/wp\/v2\/pages\/112\" data-token=\"57b2157d1ff950d6fb0b09763b5ad40a\" data-token-time=\"1775647991\"><noscript class=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/noscript><div class=\"wpforms-hidden\" id=\"wpforms-error-noscript\">Please enable JavaScript in your browser to complete this form.<\/div><div class=\"wpforms-field-container\"><div id=\"wpforms-92-field_1-container\" class=\"wpforms-field wpforms-field-text\" data-field-id=\"1\"><label class=\"wpforms-field-label\" for=\"wpforms-92-field_1\">\u516c\u53f8\u540d\u7a31<\/label><input type=\"text\" id=\"wpforms-92-field_1\" class=\"wpforms-field-large\" name=\"wpforms[fields][1]\" placeholder=\"\u8acb\u8f38\u5165\u516c\u53f8\u540d\u7a31\" aria-errormessage=\"wpforms-92-field_1-error\" ><\/div><div id=\"wpforms-92-field_2-container\" class=\"wpforms-field wpforms-field-text\" data-field-id=\"2\"><label class=\"wpforms-field-label\" for=\"wpforms-92-field_2\">\u806f\u7d61\u4eba\u540d\u7a31<\/label><input type=\"text\" id=\"wpforms-92-field_2\" class=\"wpforms-field-large\" name=\"wpforms[fields][2]\" placeholder=\"\u8acb\u8f38\u5165\u806f\u7d61\u4eba\u540d\u7a31\" aria-errormessage=\"wpforms-92-field_2-error\" ><\/div><div id=\"wpforms-92-field_8-container\" class=\"wpforms-field wpforms-field-email\" data-field-id=\"8\"><label class=\"wpforms-field-label\" for=\"wpforms-92-field_8\">\u96fb\u90f5\u5730\u5740<\/label><input type=\"email\" id=\"wpforms-92-field_8\" class=\"wpforms-field-large\" name=\"wpforms[fields][8]\" placeholder=\"\u8acb\u8f38\u5165\u96fb\u90f5\u5730\u5740\" spellcheck=\"false\" aria-errormessage=\"wpforms-92-field_8-error\" ><\/div><div id=\"wpforms-92-field_5-container\" class=\"wpforms-field wpforms-field-phone\" data-field-id=\"5\"><label class=\"wpforms-field-label\" for=\"wpforms-92-field_5\">\u806f\u7d61\u96fb\u8a71<\/label><input type=\"tel\" id=\"wpforms-92-field_5\" class=\"wpforms-field-large wpforms-smart-phone-field\" data-rule-smart-phone-field=\"true\" name=\"wpforms[fields][5]\" placeholder=\"\u8acb\u8f38\u5165\u865f\u78bc\" aria-label=\"\u806f\u7d61\u96fb\u8a71\" aria-errormessage=\"wpforms-92-field_5-error\" ><\/div><div id=\"wpforms-92-field_7-container\" class=\"wpforms-field wpforms-field-text\" data-field-id=\"7\"><label class=\"wpforms-field-label\" for=\"wpforms-92-field_7\">\u67e5\u8a62\u4e8b\u5b9c<\/label><input type=\"text\" id=\"wpforms-92-field_7\" class=\"wpforms-field-large\" name=\"wpforms[fields][7]\" placeholder=\"\u8bf7\u8f93\u5165\u67e5\u8be2\u4e8b\u5b9c\" aria-errormessage=\"wpforms-92-field_7-error\" ><\/div><\/div><!-- .wpforms-field-container --><div class=\"wpforms-submit-container\" ><input type=\"hidden\" name=\"wpforms[id]\" value=\"92\"><input type=\"hidden\" name=\"page_title\" value=\"\"><input type=\"hidden\" name=\"page_url\" value=\"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/pages\/112\"><button type=\"submit\" name=\"wpforms[submit]\" id=\"wpforms-submit-92\" class=\"wpforms-submit\" data-alt-text=\"\u53d1\u9001...\" data-submit-text=\"\u7acb\u5373\u63d0\u4ea4\" aria-live=\"assertive\" value=\"wpforms-submit\">\u7acb\u5373\u63d0\u4ea4<\/button><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/plugins\/wpforms\/assets\/images\/submit-spin.svg\" class=\"wpforms-submit-spinner\" style=\"display: none;\" width=\"26\" height=\"26\" alt=\"Loading\"><\/div><\/form><\/div>  <!-- .wpforms-container -->\n                                    <\/div>\n            <\/div>\n\n        <\/div>\n\n    <\/div>\n\n    <div id=\"contact-submit-popup\" class=\"fixed hidden top-0 right-0 w-full h-full bg-[#0000005c] z-[999999] \">\n        <div\n            class=\"absolute bg-white p-5 md:p-7 rounded-xl -translate-x-1\/2 -translate-y-1\/2 left-1\/2 top-1\/2 max-w-[500px] lg:min-w-[500px] w-[90vw]\">\n            <div class=\"relative w-full flex flex-col justify-center items-center\">\n                <div id=\"popup-close\" class=\"absolute top-[5px] right-[5px] cursor-pointer\">\n                    <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/alert-popup-close.svg\" \/>\n                <\/div>\n                <!-- <img decoding=\"async\" src=\"https:\/\/wishpro.hk\/wp-content\/themes\/indiba\/resources\/images\/icon\/popup-icon.svg\" \/> -->\n\n                <div class=\"w-full\">\n                    <h5 class=\"heading5  text-dark text-center pt-5 pb-2 leading-[normal] font-bold\">\n                        Send Successfully                    <\/h5>\n                    <p class=\"text-body text-dark text-center\">Form has been submitted successfully<\/p>\n                    <button id=\"popup-close-btn\" type=\"button\"\n                        class=\"contact-us-form-submitted block text-body mx-auto font-bold px-7 py-3 uppercase text-white bg-dark hover:bg-darkPurple transition-all ease-in-out duration-300 mt-5 text-center rounded-full border-2 border-grey\">\n                        Ok                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n<\/section>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-112","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/pages\/112","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/comments?post=112"}],"version-history":[{"count":6,"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/pages\/112\/revisions"}],"predecessor-version":[{"id":136,"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/pages\/112\/revisions\/136"}],"wp:attachment":[{"href":"https:\/\/wishpro.hk\/zh\/wp-json\/wp\/v2\/media?parent=112"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}