{"id":231,"date":"2026-01-04T11:22:35","date_gmt":"2026-01-04T08:22:35","guid":{"rendered":"https:\/\/beta.puiux.org\/hekma\/Dawah-Association\/youtube-channel\/"},"modified":"2026-02-03T10:46:40","modified_gmt":"2026-02-03T07:46:40","slug":"youtube-channel","status":"publish","type":"page","link":"https:\/\/sullaee.com\/en\/youtube-channel\/","title":{"rendered":"youtube channel"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"231\" class=\"elementor elementor-231 elementor-66\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4ed0f47 e-flex e-con-boxed e-con e-parent\" data-id=\"4ed0f47\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-347a257 elementor-widget elementor-widget-puiux-dawawh-youtube-channel-single\" data-id=\"347a257\" data-element_type=\"widget\" data-widget_type=\"puiux-dawawh-youtube-channel-single.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t        \n        <!-- Header Content Section -->\n        <section class=\"header-content\">\n            <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Frame7226988.png\" alt=\"\" class=\"header-image\">\n            <div class=\"container\">\n                <div class=\"header\">\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Ellipse1.png\" alt=\"GHF \" class=\"sayam-yemen\" \/>\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Ellipse2.png\" alt=\" RH \" class=\"sayam-shemal\" \/>\n                    <button class=\"header-label\">Our Visual Platform<\/button>\n                    <h2 class=\"header-title\">Your Journey Toward Accessible Sharia Knowledge<\/h2>\n                    <p class=\"header-description\">\n                        Discover rich visual content that includes the translation of Friday sermons and awareness programs for expatriate communities in various languages, as well as guiding mosque speeches. Become a partner in spreading the message of Islam by watching and sharing these Dawah materials, which are supervised by a group of highly qualified preachers.\n\n\n                    <\/p>\n                <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Blog Posts Section -->\n        <section class=\"blog-section\">\n            <div class=\"container\">\n                <div class=\"blog-header d-flex align-items-center justify-content-between\">\n                    <p>Video Order (<span class=\"view-tab primary-color active\" data-view=\"cards\">Cards<\/span> - <span class=\"view-tab kamel \" data-view=\"full\">Full<\/span>)<\/p>\n                    \n                    <div class=\"dropdown\">\n                        <button class=\"dropdown-toggle\" type=\"button\" aria-expanded=\"false\">\n                            Sort By                        <\/button>\n                        <ul class=\"dropdown-menu\" dir=\"rtl\">\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"newest\">Newest First<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"oldest\">Oldest First<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"top-rated\">Top Rated<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"most-viewed\">Most Viewed<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"alpha\">Alphabetical<\/a><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"row g-4\" id=\"videosGrid-347a257\">\n                            <div class=\"col-lg-4 col-md-6\">\n            <a href=\"https:\/\/www.youtube.com\/watch?v=Xa8yo60xLWk\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"blog-card featured\"\n                 data-title=\"Welcoming the month of Shawwal and the rituals of Hajj and Umrah\"\n                 data-date=\"2026-01-04\"\n                 data-views=\"20\"\n                 data-likes=\"30\">\n                <div class=\"blog-image\">\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Frame%202147226984.png\" alt=\"Welcoming the month of Shawwal and the rituals of Hajj and Umrah\"> \n                <\/div>\n                <div class=\"blog-content\">\n                    <h3 class=\"blog-title\">Welcoming the month of Shawwal and the rituals of Hajj and Umrah<\/h3>\n                    <p class=\"blog-date\">2026 January 04<\/p>\n                    <p class=\"blog-comments\">\n                        <span>20 Views<\/span> \u2022 \n                        <span>30 Likes<\/span> \u2022 \n                        <span>50 Comments<\/span>\n                    <\/p>\n                <\/div>\n            <\/a>\n        <\/div>\n                <div class=\"col-lg-4 col-md-6\">\n            <a href=\"https:\/\/youtu.be\/wcQNINlcQ7A\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"blog-card featured\"\n                 data-title=\"\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0634\u0647\u0631 \u0631\u0645\u0636\u0627\u0646\"\n                 data-date=\"2026-01-04\"\n                 data-views=\"5000\"\n                 data-likes=\"450\">\n                <div class=\"blog-image\">\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Frame%202147226984.png\" alt=\"\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0634\u0647\u0631 \u0631\u0645\u0636\u0627\u0646\"> \n                <\/div>\n                <div class=\"blog-content\">\n                    <h3 class=\"blog-title\">\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0634\u0647\u0631 \u0631\u0645\u0636\u0627\u0646<\/h3>\n                    <p class=\"blog-date\">2026 January 04<\/p>\n                    <p class=\"blog-comments\">\n                        <span>5000 Views<\/span> \u2022 \n                        <span>450 Likes<\/span> \u2022 \n                        <span>89 Comments<\/span>\n                    <\/p>\n                <\/div>\n            <\/a>\n        <\/div>\n                <div class=\"col-lg-4 col-md-6\">\n            <a href=\"https:\/\/www.youtube.com\/watch?v=9bZkp7q19f0\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"blog-card featured\"\n                 data-title=\"\u0631\u0645\u0636\u0627\u0646 \u0634\u0647\u0631 \u0627\u0644\u062c\u0648\u062f\"\n                 data-date=\"2026-01-04\"\n                 data-views=\"2300\"\n                 data-likes=\"180\">\n                <div class=\"blog-image\">\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Frame%202147226984.png\" alt=\"\u0631\u0645\u0636\u0627\u0646 \u0634\u0647\u0631 \u0627\u0644\u062c\u0648\u062f\"> \n                <\/div>\n                <div class=\"blog-content\">\n                    <h3 class=\"blog-title\">\u0631\u0645\u0636\u0627\u0646 \u0634\u0647\u0631 \u0627\u0644\u062c\u0648\u062f<\/h3>\n                    <p class=\"blog-date\">2026 January 04<\/p>\n                    <p class=\"blog-comments\">\n                        <span>2300 Views<\/span> \u2022 \n                        <span>180 Likes<\/span> \u2022 \n                        <span>42 Comments<\/span>\n                    <\/p>\n                <\/div>\n            <\/a>\n        <\/div>\n                <div class=\"col-lg-4 col-md-6\">\n            <a href=\"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"blog-card featured\"\n                 data-title=\"Test video 1\"\n                 data-date=\"2026-01-04\"\n                 data-views=\"1500\"\n                 data-likes=\"120\">\n                <div class=\"blog-image\">\n                    <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/Frame%202147226984.png\" alt=\"Test video 1\"> \n                <\/div>\n                <div class=\"blog-content\">\n                    <h3 class=\"blog-title\">Test video 1<\/h3>\n                    <p class=\"blog-date\">2026 January 04<\/p>\n                    <p class=\"blog-comments\">\n                        <span>1500 Views<\/span> \u2022 \n                        <span>120 Likes<\/span> \u2022 \n                        <span>25 Comments<\/span>\n                    <\/p>\n                <\/div>\n            <\/a>\n        <\/div>\n                        <\/div>\n            <\/div>\n        <\/section>\n\n        <!-- Association Section -->\n        <section class=\"association-section\">\n            <div class=\"container\">\n                <div class=\"blog-header d-flex align-items-center justify-content-between\">\n                    <p>Video Order (<span class=\"view-tab primary-color active\" data-view=\"cards\">Cards<\/span> - <span class=\"view-tab kamel \" data-view=\"full\">Full<\/span>)<\/p>\n                    \n                    <div class=\"dropdown\">\n                        <button class=\"dropdown-toggle\" type=\"button\" aria-expanded=\"false\">\n                            Sort By                        <\/button>\n                        <ul class=\"dropdown-menu\" dir=\"rtl\">\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"newest\">Newest First<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"oldest\">Oldest First<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"top-rated\">Top Rated<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"most-viewed\">Most Viewed<\/a><\/li>\n                            <li><a class=\"dropdown-item\" href=\"#\" data-sort=\"alpha\">Alphabetical<\/a><\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"association-video-wrapper\" id=\"associationVideos-347a257\">\n                            <div class=\"association-slide-card video-thumbnail-wrapper\" \n             data-video-id=\"Xa8yo60xLWk\"\n             data-title=\"Welcoming the month of Shawwal and the rituals of Hajj and Umrah\"\n             data-date=\"2026-01-04\"\n             data-views=\"20\"\n             data-likes=\"30\">\n            <div style=\"position: relative;\">\n                <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/image58.png\" alt=\"Video Thumbnail\" class=\"video-thumbnail-img\">\n                <div class=\"video-play-button\">\n                    <svg width=\"68\" height=\"48\" viewBox=\"0 0 68 48\" fill=\"none\">\n                        <path d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path>\n                        <path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            <div class=\"video-info video-info-association\">\n                <h3 class=\"video-title\">Welcoming the month of Shawwal and the rituals of Hajj and Umrah<\/h3>\n                <p class=\"video-date\">2026 January 04<\/p>\n                <p class=\"video-description\">20 Views \u2022 30 Likes \u2022 50 Comments<\/p>\n            <\/div>\n        <\/div>\n                <div class=\"association-slide-card video-thumbnail-wrapper\" \n             data-video-id=\"wcQNINlcQ7A\"\n             data-title=\"\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0634\u0647\u0631 \u0631\u0645\u0636\u0627\u0646\"\n             data-date=\"2026-01-04\"\n             data-views=\"5000\"\n             data-likes=\"450\">\n            <div style=\"position: relative;\">\n                <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/image58.png\" alt=\"Video Thumbnail\" class=\"video-thumbnail-img\">\n                <div class=\"video-play-button\">\n                    <svg width=\"68\" height=\"48\" viewBox=\"0 0 68 48\" fill=\"none\">\n                        <path d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path>\n                        <path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            <div class=\"video-info video-info-association\">\n                <h3 class=\"video-title\">\u0627\u0633\u062a\u0642\u0628\u0627\u0644 \u0634\u0647\u0631 \u0631\u0645\u0636\u0627\u0646<\/h3>\n                <p class=\"video-date\">2026 January 04<\/p>\n                <p class=\"video-description\">5000 Views \u2022 450 Likes \u2022 89 Comments<\/p>\n            <\/div>\n        <\/div>\n                <div class=\"association-slide-card video-thumbnail-wrapper\" \n             data-video-id=\"9bZkp7q19f0\"\n             data-title=\"\u0631\u0645\u0636\u0627\u0646 \u0634\u0647\u0631 \u0627\u0644\u062c\u0648\u062f\"\n             data-date=\"2026-01-04\"\n             data-views=\"2300\"\n             data-likes=\"180\">\n            <div style=\"position: relative;\">\n                <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/image58.png\" alt=\"Video Thumbnail\" class=\"video-thumbnail-img\">\n                <div class=\"video-play-button\">\n                    <svg width=\"68\" height=\"48\" viewBox=\"0 0 68 48\" fill=\"none\">\n                        <path d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path>\n                        <path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            <div class=\"video-info video-info-association\">\n                <h3 class=\"video-title\">\u0631\u0645\u0636\u0627\u0646 \u0634\u0647\u0631 \u0627\u0644\u062c\u0648\u062f<\/h3>\n                <p class=\"video-date\">2026 January 04<\/p>\n                <p class=\"video-description\">2300 Views \u2022 180 Likes \u2022 42 Comments<\/p>\n            <\/div>\n        <\/div>\n                <div class=\"association-slide-card video-thumbnail-wrapper\" \n             data-video-id=\"dQw4w9WgXcQ\"\n             data-title=\"Test video 1\"\n             data-date=\"2026-01-04\"\n             data-views=\"1500\"\n             data-likes=\"120\">\n            <div style=\"position: relative;\">\n                <img decoding=\"async\" src=\"https:\/\/sullaee.com\/wp-content\/plugins\/PUIUX%20Dawa\/widgets\/..\/assets\/images\/image58.png\" alt=\"Video Thumbnail\" class=\"video-thumbnail-img\">\n                <div class=\"video-play-button\">\n                    <svg width=\"68\" height=\"48\" viewBox=\"0 0 68 48\" fill=\"none\">\n                        <path d=\"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z\" fill=\"#f00\"><\/path>\n                        <path d=\"M 45,24 27,14 27,34\" fill=\"#fff\"><\/path>\n                    <\/svg>\n                <\/div>\n            <\/div>\n            <div class=\"video-info video-info-association\">\n                <h3 class=\"video-title\">Test video 1<\/h3>\n                <p class=\"video-date\">2026 January 04<\/p>\n                <p class=\"video-description\">1500 Views \u2022 120 Likes \u2022 25 Comments<\/p>\n            <\/div>\n        <\/div>\n                        <\/div>\n            <\/div>\n        <\/section>\n\n        \n        <script>\n        (function() {\n            'use strict';\n            \n            \/\/ ============================================\n            \/\/ CONFIGURATION\n            \/\/ ============================================\n            const CONFIG = {\n                cardsContainer: 'videosGrid-347a257',\n                fullContainer: 'associationVideos-347a257',\n                cardsItemSelector: '.col-lg-4',\n                fullItemSelector: '.association-slide-card',\n                cardsDataSelector: '.blog-card'\n            };\n            \n            let currentSortBy = 'newest';\n            \n            \/\/ ============================================\n            \/\/ UTILITY FUNCTIONS\n            \/\/ ============================================\n            \n            \/\/ Parse number safely (handles commas, empty strings, etc.)\n            function parseNumber(value) {\n                if (!value) return 0;\n                \/\/ Remove any non-numeric characters except decimal point\n                const cleaned = String(value).replace(\/[^\\d.]\/g, '');\n                return parseFloat(cleaned) || 0;\n            }\n            \n            \/\/ Parse date safely\n            function parseDate(dateStr) {\n                if (!dateStr) return new Date(0);\n                return new Date(dateStr);\n            }\n            \n            \/\/ Get data from an element (handles both view types)\n            function getItemData(item, isCardsView) {\n                let dataElement = item;\n                \n                \/\/ For cards view, the data attributes are on the .blog-card child\n                if (isCardsView) {\n                    dataElement = item.querySelector(CONFIG.cardsDataSelector);\n                    if (!dataElement) return null;\n                }\n                \n                return {\n                    title: dataElement.getAttribute('data-title') || '',\n                    date: parseDate(dataElement.getAttribute('data-date')),\n                    views: parseNumber(dataElement.getAttribute('data-views')),\n                    likes: parseNumber(dataElement.getAttribute('data-likes'))\n                };\n            }\n            \n            \/\/ Compare function factory\n            function createComparator(sortBy, isCardsView) {\n                return function(a, b) {\n                    const dataA = getItemData(a, isCardsView);\n                    const dataB = getItemData(b, isCardsView);\n                    \n                    if (!dataA || !dataB) return 0;\n                    \n                    switch(sortBy) {\n                        case 'newest':\n                            return dataB.date - dataA.date;\n                        case 'oldest':\n                            return dataA.date - dataB.date;\n                        case 'most-viewed':\n                            return dataB.views - dataA.views;\n                        case 'top-rated':\n                            return dataB.likes - dataA.likes;\n                        case 'alpha':\n                            const currentLang = 'en';\n                            return dataA.title.localeCompare(dataB.title, currentLang);\n                        default:\n                            return 0;\n                    }\n                };\n            }\n            \n            \/\/ ============================================\n            \/\/ SORTING FUNCTIONS\n            \/\/ ============================================\n            \n            function sortCardsView(sortBy) {\n                const container = document.getElementById(CONFIG.cardsContainer);\n                if (!container) {\n                    console.warn('Cards container not found');\n                    return;\n                }\n                \n                const items = Array.from(container.querySelectorAll(CONFIG.cardsItemSelector));\n                console.log('Sorting Cards View:', items.length, 'items by', sortBy);\n                \n                if (items.length === 0) return;\n                \n                \/\/ Sort items\n                items.sort(createComparator(sortBy, true));\n                \n                \/\/ Re-append in new order\n                items.forEach(item => container.appendChild(item));\n            }\n            \n            function sortFullView(sortBy) {\n                const container = document.getElementById(CONFIG.fullContainer);\n                if (!container) {\n                    console.warn('Full view container not found');\n                    return;\n                }\n                \n                const items = Array.from(container.querySelectorAll(CONFIG.fullItemSelector));\n                console.log('Sorting Full View:', items.length, 'items by', sortBy);\n                \n                if (items.length === 0) return;\n                \n                \/\/ Sort items\n                items.sort(createComparator(sortBy, false));\n                \n                \/\/ Re-append in new order\n                items.forEach(item => container.appendChild(item));\n            }\n            \n            \/\/ Sort both views together\n            function sortAllViews(sortBy) {\n                console.log('=== SORTING ALL VIEWS BY:', sortBy, '===');\n                sortCardsView(sortBy);\n                sortFullView(sortBy);\n            }\n            \n            \/\/ ============================================\n            \/\/ UI INITIALIZATION\n            \/\/ ============================================\n            \n            document.addEventListener('DOMContentLoaded', function() {\n                const blogSection = document.querySelector('.blog-section');\n                const associationSection = document.querySelector('.association-section');\n                \n                \/\/ ----------------------------------------\n                \/\/ Initialize tab states\n                \/\/ ----------------------------------------\n                if (blogSection && associationSection) {\n                    const defaultLayout = 'cards';\n                    \n                    if (defaultLayout === 'full') {\n                        blogSection.style.display = 'none';\n                        associationSection.style.display = 'block';\n                    } else {\n                        blogSection.style.display = 'block';\n                        associationSection.style.display = 'none';\n                    }\n                    \n                    document.querySelectorAll('.view-tab').forEach(tab => {\n                        if (tab.getAttribute('data-view') === defaultLayout) {\n                            tab.classList.add('active');\n                        } else {\n                            tab.classList.remove('active');\n                        }\n                    });\n                }\n                \n                \/\/ ----------------------------------------\n                \/\/ Tab switching handlers\n                \/\/ ----------------------------------------\n                document.querySelectorAll('.view-tab').forEach(tab => {\n                    tab.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        const view = this.getAttribute('data-view');\n                        \n                        \/\/ Update active states for all tabs with same view\n                        document.querySelectorAll('.view-tab').forEach(t => {\n                            t.classList.remove('active');\n                        });\n                        document.querySelectorAll('.view-tab[data-view=\"' + view + '\"]').forEach(t => {\n                            t.classList.add('active');\n                        });\n                        \n                        \/\/ Toggle sections\n                        if (view === 'full') {\n                            if (blogSection) blogSection.style.display = 'none';\n                            if (associationSection) associationSection.style.display = 'block';\n                        } else {\n                            if (blogSection) blogSection.style.display = 'block';\n                            if (associationSection) associationSection.style.display = 'none';\n                        }\n                    });\n                });\n                \n                \/\/ ----------------------------------------\n                \/\/ Dropdown toggle handlers\n                \/\/ ----------------------------------------\n                document.querySelectorAll('.dropdown-toggle').forEach(toggle => {\n                    toggle.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        \n                        const dropdown = this.closest('.dropdown');\n                        const menu = dropdown.querySelector('.dropdown-menu');\n                        const isOpen = menu.classList.contains('show');\n                        \n                        \/\/ Close all dropdowns first\n                        document.querySelectorAll('.dropdown-menu').forEach(m => {\n                            m.classList.remove('show');\n                        });\n                        document.querySelectorAll('.dropdown-toggle').forEach(t => {\n                            t.classList.remove('show');\n                            t.setAttribute('aria-expanded', 'false');\n                        });\n                        \n                        \/\/ Open this one if it was closed\n                        if (!isOpen) {\n                            menu.classList.add('show');\n                            this.classList.add('show');\n                            this.setAttribute('aria-expanded', 'true');\n                        }\n                    });\n                });\n                \n                \/\/ Close dropdowns when clicking outside\n                document.addEventListener('click', function(e) {\n                    if (!e.target.closest('.dropdown')) {\n                        document.querySelectorAll('.dropdown-menu').forEach(menu => {\n                            menu.classList.remove('show');\n                        });\n                        document.querySelectorAll('.dropdown-toggle').forEach(toggle => {\n                            toggle.classList.remove('show');\n                            toggle.setAttribute('aria-expanded', 'false');\n                        });\n                    }\n                });\n                \n                \/\/ ----------------------------------------\n                \/\/ Sort item click handlers\n                \/\/ ----------------------------------------\n                document.querySelectorAll('.dropdown-item[data-sort]').forEach(item => {\n                    item.addEventListener('click', function(e) {\n                        e.preventDefault();\n                        \n                        const sortBy = this.getAttribute('data-sort');\n                        const previousSort = currentSortBy;\n                        \n                        \/\/ Close dropdown ALWAYS first\n                        const dropdown = this.closest('.dropdown');\n                        if (dropdown) {\n                            const menu = dropdown.querySelector('.dropdown-menu');\n                            const toggle = dropdown.querySelector('.dropdown-toggle');\n                            if (menu) menu.classList.remove('show');\n                            if (toggle) {\n                                toggle.classList.remove('show');\n                                toggle.setAttribute('aria-expanded', 'false');\n                            }\n                        }\n\n                        \/\/ If clicking same sort, do nothing\n                        if (sortBy === previousSort) return;\n                        \n                        currentSortBy = sortBy;\n                        \n                        console.log('[DEBUG] Sort changed to:', sortBy);\n                        \n                        \/\/ RESET AND RELOAD LOGIC\n\n                        \/\/ RESET AND RELOAD LOGIC\n                        const btn = document.getElementById('loadMoreBtn-347a257');\n                        \n                        if (btn) {\n                            console.log('[DEBUG] Resetting view for new sort...');\n                            \n                            \/\/ 1. Clear containers and show loading spinner\n                            const cardsContainer = document.getElementById(CONFIG.cardsContainer);\n                            const fullContainer = document.getElementById(CONFIG.fullContainer);\n                            \n                            const spinner = '<div class=\"text-center w-100 py-5\"><i class=\"fas fa-spinner fa-spin fa-2x\" style=\"color:var(--primary-color, #cfa030);\"><\/i><\/div>';\n                            \n                            if (cardsContainer) cardsContainer.innerHTML = spinner;\n                            if (fullContainer) fullContainer.innerHTML = spinner;\n                            \n                            \/\/ 2. Reset button state\n                            btn.setAttribute('data-page', '1');\n                            \/\/ Use flex to maintain centering defined in CSS\n                            btn.closest('.faq-load-more').style.display = 'flex';\n                            btn.disabled = false;\n                            \n                            \/\/ 3. Trigger load\n                            btn.click();\n                        } else {\n                            console.error('[DEBUG] Load more button not found, cannot reload sorted data');\n                        }\n                    });\n                });\n                \n                \/\/ ----------------------------------------\n                \/\/ Load more button logic\n                \/\/ ----------------------------------------\n                const loadMoreBtn = document.getElementById('loadMoreBtn-347a257');\n                \n                if (loadMoreBtn) {\n                    loadMoreBtn.addEventListener('click', function() {\n                        const btn = this;\n                        const page = parseInt(btn.getAttribute('data-page'));\n                        const postsPerPage = 6;\n                        const nonce = btn.getAttribute('data-nonce');\n                        \n                        \/\/ Show loading state\n                        btn.disabled = true;\n                        const originalText = btn.querySelector('.load-more-text').innerText;\n                        \/\/ Avoid changing text to '...' if it's a reload (page 1) to keep UI clean, or keep it.\n                        \/\/ Let's keep it but maybe simpler.\n                        btn.querySelector('.load-more-text').innerText = '...';\n                        \n                        \/\/ Determine AJAX URL\n                        let ajaxUrl = '\/wp-admin\/admin-ajax.php';\n                        if (typeof puiuxAjax !== 'undefined' && puiuxAjax.ajaxUrl) {\n                            ajaxUrl = puiuxAjax.ajaxUrl;\n                        } else if (typeof ajaxurl !== 'undefined') {\n                            ajaxUrl = ajaxurl;\n                        }\n                        \n                        const requestData = {\n                            action: 'puiux_load_more_youtube_videos',\n                            page: page,\n                            posts_per_page: postsPerPage,\n                            nonce: nonce,\n                            lang: 'en',\n                            settings: {\"header_title\":\"Your Journey Toward Accessible Sharia Knowledge\",\"header_description\":\"Discover rich visual content that includes the translation of Friday sermons and awareness programs for expatriate communities in various languages, as well as guiding mosque speeches. Become a partner in spreading the message of Islam by watching and sharing these Dawah materials, which are supervised by a group of highly qualified preachers.\\n\\n\\n\",\"whatsapp_number\":\"966540034566\",\"custom_translations\":\"\",\"header_label\":\"Our Visual Platform\",\"show_header\":\"yes\",\"show_filters\":\"yes\",\"default_layout\":\"cards\",\"posts_per_page\":6,\"show_pagination\":\"yes\",\"custom_header_label\":null,\"custom_header_title\":null,\"custom_header_description\":null,\"custom_video_order\":null,\"custom_cards\":null,\"custom_full\":null,\"custom_sort_by\":null,\"custom_newest_first\":null,\"custom_oldest_first\":null,\"custom_top_rated\":null,\"custom_most_viewed\":null,\"custom_alphabetical\":null,\"custom_load_more\":null,\"custom_no_videos\":null,\"custom_no_videos_desc\":null,\"custom_views\":null,\"custom_likes\":null,\"custom_comments\":null,\"_title\":\"\",\"_element_width\":\"\",\"_element_width_tablet\":\"\",\"_element_width_mobile\":\"\",\"_position\":\"\",\"_element_id\":\"\",\"_css_classes\":\"\",\"e_display_conditions\":\"\",\"_element_cache\":\"\",\"motion_fx_motion_fx_scrolling\":\"\",\"motion_fx_translateY_effect\":null,\"motion_fx_translateY_direction\":null,\"motion_fx_translateY_speed\":null,\"motion_fx_translateY_affectedRange\":null,\"motion_fx_translateX_effect\":null,\"motion_fx_translateX_direction\":null,\"motion_fx_translateX_speed\":null,\"motion_fx_translateX_affectedRange\":null,\"motion_fx_opacity_effect\":null,\"motion_fx_opacity_direction\":null,\"motion_fx_opacity_level\":null,\"motion_fx_opacity_range\":null,\"motion_fx_blur_effect\":null,\"motion_fx_blur_direction\":null,\"motion_fx_blur_level\":null,\"motion_fx_blur_range\":null,\"motion_fx_rotateZ_effect\":null,\"motion_fx_rotateZ_direction\":null,\"motion_fx_rotateZ_speed\":null,\"motion_fx_rotateZ_affectedRange\":null,\"motion_fx_scale_effect\":null,\"motion_fx_scale_direction\":null,\"motion_fx_scale_speed\":null,\"motion_fx_scale_range\":null,\"motion_fx_devices\":null,\"motion_fx_range\":null,\"motion_fx_motion_fx_mouse\":\"\",\"motion_fx_mouseTrack_effect\":null,\"motion_fx_mouseTrack_direction\":null,\"motion_fx_mouseTrack_speed\":null,\"motion_fx_tilt_effect\":null,\"motion_fx_tilt_direction\":null,\"motion_fx_tilt_speed\":null,\"handle_motion_fx_asset_loading\":\"\",\"sticky\":\"\",\"sticky_on\":null,\"sticky_offset\":null,\"sticky_offset_tablet\":null,\"sticky_offset_mobile\":null,\"sticky_effects_offset\":null,\"sticky_effects_offset_tablet\":null,\"sticky_effects_offset_mobile\":null,\"sticky_anchor_link_offset\":null,\"sticky_anchor_link_offset_tablet\":null,\"sticky_anchor_link_offset_mobile\":null,\"sticky_parent\":null,\"_animation\":\"\",\"_animation_tablet\":\"\",\"_animation_mobile\":\"\",\"animation_duration\":null,\"_animation_delay\":null,\"_transform_rotate_popover\":\"\",\"_transform_rotateZ_effect\":null,\"_transform_rotateZ_effect_tablet\":null,\"_transform_rotateZ_effect_mobile\":null,\"_transform_rotate_3d\":null,\"_transform_rotateX_effect\":null,\"_transform_rotateX_effect_tablet\":null,\"_transform_rotateX_effect_mobile\":null,\"_transform_rotateY_effect\":null,\"_transform_rotateY_effect_tablet\":null,\"_transform_rotateY_effect_mobile\":null,\"_transform_perspective_effect\":null,\"_transform_perspective_effect_tablet\":null,\"_transform_perspective_effect_mobile\":null,\"_transform_translate_popover\":\"\",\"_transform_translateX_effect\":null,\"_transform_translateX_effect_tablet\":null,\"_transform_translateX_effect_mobile\":null,\"_transform_translateY_effect\":null,\"_transform_translateY_effect_tablet\":null,\"_transform_translateY_effect_mobile\":null,\"_transform_scale_popover\":\"\",\"_transform_keep_proportions\":\"yes\",\"_transform_scale_effect\":null,\"_transform_scale_effect_tablet\":null,\"_transform_scale_effect_mobile\":null,\"_transform_scaleX_effect\":null,\"_transform_scaleX_effect_tablet\":null,\"_transform_scaleX_effect_mobile\":null,\"_transform_scaleY_effect\":null,\"_transform_scaleY_effect_tablet\":null,\"_transform_scaleY_effect_mobile\":null,\"_transform_skew_popover\":\"\",\"_transform_skewX_effect\":null,\"_transform_skewX_effect_tablet\":null,\"_transform_skewX_effect_mobile\":null,\"_transform_skewY_effect\":null,\"_transform_skewY_effect_tablet\":null,\"_transform_skewY_effect_mobile\":null,\"_transform_flipX_effect\":\"\",\"_transform_flipY_effect\":\"\",\"_transform_rotate_popover_hover\":\"\",\"_transform_rotateZ_effect_hover\":null,\"_transform_rotateZ_effect_hover_tablet\":null,\"_transform_rotateZ_effect_hover_mobile\":null,\"_transform_rotate_3d_hover\":null,\"_transform_rotateX_effect_hover\":null,\"_transform_rotateX_effect_hover_tablet\":null,\"_transform_rotateX_effect_hover_mobile\":null,\"_transform_rotateY_effect_hover\":null,\"_transform_rotateY_effect_hover_tablet\":null,\"_transform_rotateY_effect_hover_mobile\":null,\"_transform_perspective_effect_hover\":null,\"_transform_perspective_effect_hover_tablet\":null,\"_transform_perspective_effect_hover_mobile\":null,\"_transform_translate_popover_hover\":\"\",\"_transform_translateX_effect_hover\":null,\"_transform_translateX_effect_hover_tablet\":null,\"_transform_translateX_effect_hover_mobile\":null,\"_transform_translateY_effect_hover\":null,\"_transform_translateY_effect_hover_tablet\":null,\"_transform_translateY_effect_hover_mobile\":null,\"_transform_scale_popover_hover\":\"\",\"_transform_keep_proportions_hover\":\"yes\",\"_transform_scale_effect_hover\":null,\"_transform_scale_effect_hover_tablet\":null,\"_transform_scale_effect_hover_mobile\":null,\"_transform_scaleX_effect_hover\":null,\"_transform_scaleX_effect_hover_tablet\":null,\"_transform_scaleX_effect_hover_mobile\":null,\"_transform_scaleY_effect_hover\":null,\"_transform_scaleY_effect_hover_tablet\":null,\"_transform_scaleY_effect_hover_mobile\":null,\"_transform_skew_popover_hover\":\"\",\"_transform_skewX_effect_hover\":null,\"_transform_skewX_effect_hover_tablet\":null,\"_transform_skewX_effect_hover_mobile\":null,\"_transform_skewY_effect_hover\":null,\"_transform_skewY_effect_hover_tablet\":null,\"_transform_skewY_effect_hover_mobile\":null,\"_transform_flipX_effect_hover\":\"\",\"_transform_flipY_effect_hover\":\"\",\"_background_color\":null,\"_background_color_b\":null,\"_background_image\":null,\"_background_video_link\":null,\"_background_video_start\":null,\"_background_video_end\":null,\"_background_play_once\":null,\"_background_play_on_mobile\":null,\"_background_privacy_mode\":null,\"_background_slideshow_gallery\":null,\"_background_slideshow_loop\":null,\"_background_slideshow_slide_duration\":null,\"_background_slideshow_slide_transition\":null,\"_background_slideshow_transition_duration\":null,\"_background_slideshow_lazyload\":null,\"_background_slideshow_ken_burns\":null,\"_background_slideshow_ken_burns_zoom_direction\":null,\"_background_hover_color\":null,\"_background_hover_color_b\":null,\"_background_hover_image\":null,\"_background_hover_video_link\":null,\"_background_hover_video_start\":null,\"_background_hover_video_end\":null,\"_background_hover_play_once\":null,\"_background_hover_play_on_mobile\":null,\"_background_hover_privacy_mode\":null,\"_background_hover_slideshow_gallery\":null,\"_background_hover_slideshow_loop\":null,\"_background_hover_slideshow_slide_duration\":null,\"_background_hover_slideshow_slide_transition\":null,\"_background_hover_slideshow_transition_duration\":null,\"_background_hover_slideshow_lazyload\":null,\"_background_hover_slideshow_ken_burns\":null,\"_background_hover_slideshow_ken_burns_zoom_direction\":null,\"_mask_switch\":\"\",\"_mask_notice\":null,\"hide_desktop\":\"\",\"hide_tablet\":\"\",\"hide_mobile\":\"\",\"_attributes\":\"\"},\n                            sort_by: currentSortBy\n                        };\n                        \n                        if (typeof jQuery !== 'undefined') {\n                            jQuery.ajax({\n                                url: ajaxUrl,\n                                type: 'POST',\n                                data: requestData,\n                                success: function(response) {\n                                    if (response && response.success) {\n                                        \/\/ If this was a reset (page 1 request via filter), we need to clear the spinner first\n                                        if (page === 1) {\n                                            const cardsContainer = jQuery('#' + CONFIG.cardsContainer);\n                                            const fullContainer = jQuery('#' + CONFIG.fullContainer);\n                                            cardsContainer.empty();\n                                            fullContainer.empty();\n                                        }\n\n                                        if (response.data.cards_html) {\n                                            const cardsContainer = jQuery('#' + CONFIG.cardsContainer);\n                                            cardsContainer.append(response.data.cards_html);\n                                        }\n                                        if (response.data.full_html) {\n                                            const fullContainer = jQuery('#' + CONFIG.fullContainer);\n                                            fullContainer.append(response.data.full_html);\n                                        }\n                                        \n                                        \/\/ Re-apply sorting for newly added items (Client side sort for mixed content if needed, but we rely on server sort now)\n                                        \/\/ Keeping it doesn't hurt, but server sort is primary.\n                                        \n                                        if (response.data.has_more) {\n                                            btn.setAttribute('data-page', response.data.next_page);\n                                            btn.disabled = false;\n                                            btn.querySelector('.load-more-text').innerText = originalText;\n                                            \/\/ Ensure display is flex\n                                            btn.closest('.faq-load-more').style.display = 'flex';\n                                        } else {\n                                            btn.closest('.faq-load-more').style.display = 'none';\n                                        }\n                                    } else {\n                                        \/\/ Error handling\n                                        btn.disabled = false;\n                                        btn.querySelector('.load-more-text').innerText = originalText;\n                                    }\n                                },\n                                error: function(xhr, status, error) {\n                                    console.error('[DEBUG] AJAX ERROR:', error);\n                                    btn.disabled = false;\n                                    btn.querySelector('.load-more-text').innerText = originalText;\n                                    \n                                    \/\/ Remove spinner if error on page 1\n                                    if (page === 1) {\n                                         const cardsContainer = jQuery('#' + CONFIG.cardsContainer);\n                                         const fullContainer = jQuery('#' + CONFIG.fullContainer);\n                                         cardsContainer.html('<div class=\"col-12 text-center text-white\">Error loading data.<\/div>');\n                                         fullContainer.html('<div class=\"col-12 text-center text-white\">Error loading data.<\/div>');\n                                    }\n                                }\n                            });\n                        }\n                    });\n                }\n                \n                \/\/ Debug: log initial data\n                console.log('YouTube Widget initialized');\n            });\n            \n            \/\/ Scroll function (global)\n            window.toggleScroll = function() {\n                window.scrollTo({\n                    top: window.innerHeight,\n                    behavior: 'smooth'\n                });\n            };\n        })();\n        <\/script>\n\n\n \n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Visual Platform Your Journey Toward Accessible Sharia Knowledge Discover rich visual content that includes the translation of Friday sermons and awareness programs for expatriate communities in various languages, as well as guiding mosque speeches. Become a partner in spreading the message of Islam by watching and sharing these Dawah materials, which are supervised by [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-231","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/pages\/231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/comments?post=231"}],"version-history":[{"count":11,"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/pages\/231\/revisions"}],"predecessor-version":[{"id":489,"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/pages\/231\/revisions\/489"}],"wp:attachment":[{"href":"https:\/\/sullaee.com\/en\/wp-json\/wp\/v2\/media?parent=231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}