{"id":608,"date":"2025-11-02T19:38:10","date_gmt":"2025-11-02T16:08:10","guid":{"rendered":"https:\/\/rubikto.com\/01\/?page_id=608"},"modified":"2025-12-12T17:47:06","modified_gmt":"2025-12-12T14:17:06","slug":"training-courses","status":"publish","type":"page","link":"https:\/\/rubikto.com\/01\/training-courses\/","title":{"rendered":"\u062f\u0648\u0631\u0647 \u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"608\" class=\"elementor elementor-608\" data-elementor-settings=\"{&quot;element_pack_global_tooltip_width&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_width_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;element_pack_global_tooltip_padding&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_padding_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true},&quot;element_pack_global_tooltip_border_radius_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;top&quot;:&quot;&quot;,&quot;right&quot;:&quot;&quot;,&quot;bottom&quot;:&quot;&quot;,&quot;left&quot;:&quot;&quot;,&quot;isLinked&quot;:true}}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d164f0e e-con-full e-flex e-con e-parent\" data-id=\"d164f0e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0131bc7 bdt-navigation-type-none elementor-align-center elementor-widget elementor-widget-bdt-slider\" data-id=\"0131bc7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"bdt-slider.default\">\n\t\t\t\t\t\t\t<div id=\"bdt-slider-0131bc7\" class=\"bdt-slider\" data-settings=\"{&quot;loop&quot;:true,&quot;speed&quot;:500,&quot;effect&quot;:&quot;fade&quot;,&quot;navigation&quot;:{&quot;nextEl&quot;:&quot;#bdt-slider-0131bc7 .bdt-navigation-next&quot;,&quot;prevEl&quot;:&quot;#bdt-slider-0131bc7 .bdt-navigation-prev&quot;},&quot;pagination&quot;:{&quot;el&quot;:&quot;#bdt-slider-0131bc7 .swiper-pagination&quot;,&quot;type&quot;:&quot;&quot;,&quot;clickable&quot;:&quot;true&quot;,&quot;dynamicBullets&quot;:false},&quot;scrollbar&quot;:{&quot;el&quot;:&quot;#bdt-slider-0131bc7 .swiper-scrollbar&quot;,&quot;hide&quot;:&quot;true&quot;}}\">\n\t\t\t<div class=\"swiper-carousel swiper\" role=\"region\" aria-roledescription=\"carousel\" aria-label=\"\u0627\u0633\u0644\u0627\u06cc\u062f\u0631\" dir=\"rtl\">\n\t\t\t\t\t\t<div class=\"swiper-wrapper\">\n\t\t\t\t\t<div class=\"bdt-slide-item swiper-slide bdt-slide-effect-left\">\n\n\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<div class=\"bdt-slider-image-wrapper\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1920\" height=\"399\" src=\"https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468.webp\" class=\"bdt-cover\" alt=\"\" data-bdt-cover=\"1\" srcset=\"https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468.webp 1920w, https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468-300x62.webp 300w, https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468-1024x213.webp 1024w, https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468-768x160.webp 768w, https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468-1536x319.webp 1536w, https:\/\/rubikto.com\/01\/wp-content\/uploads\/2025\/11\/98742398468273468-600x125.webp 600w\" sizes=\"(max-width: 1920px) 100vw, 1920px\" \/>\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\n\t\t\t\t\t<div class=\"bdt-slide-desc bdt-position-large bdt-position-center bdt-position-z-index\">\n\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\n\t\t\t\t\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6f1030a e-con-full e-flex e-con e-parent\" data-id=\"6f1030a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-aeebf3e e-con-full e-flex e-con e-child\" data-id=\"aeebf3e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-99ce35b elementor-widget elementor-widget-course-list\" data-id=\"99ce35b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"course-list.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n        \/* Base Typography *\/\n        .hep-course-list {\n            font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n            line-height: 1.6;\n        }\n        \n        .hep-course-list * {\n            box-sizing: border-box;\n        }\n\n        \/* Scrollbar Hide *\/\n        .hep-course-list .scrollbar-hide {\n            -ms-overflow-style: none;\n            scrollbar-width: none;\n        }\n        .hep-course-list .scrollbar-hide::-webkit-scrollbar {\n            display: none;\n        }\n\n        \/* Filter Boxes Styling *\/\n        .hep-course-list .bg-white {\n            background: #ffffff;\n            transition: all 0.3s ease;\n        }\n        \n        .hep-course-list .bg-white:hover {\n            box-shadow: 0 10px 25px rgba(90, 49, 244, 0.1);\n            transform: translateY(-2px);\n        }\n\n        .hep-course-list .rounded-2xl {\n            border-radius: 16px;\n        }\n\n        .hep-course-list .shadow-lg {\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\n        }\n\n        \/* Filter Headers *\/\n        .hep-course-list .font-bold {\n            font-weight: 700;\n            color: #1a1a1a;\n            letter-spacing: -0.02em;\n        }\n\n        \/* Clear Filter Buttons *\/\n        .hep-course-list button[onclick*=\"clear\"] {\n            background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);\n            color: #7c3aed;\n            font-weight: 600;\n            transition: all 0.2s ease;\n            border: 1px solid transparent;\n        }\n\n        .hep-course-list button[onclick*=\"clear\"]:hover {\n            background: linear-gradient(135deg, #e9d5ff 0%, #ddd6fe 100%);\n            border-color: #7c3aed;\n            transform: scale(1.05);\n        }\n\n        .hep-course-list button[onclick*=\"clear\"] svg {\n            transition: transform 0.2s ease;\n        }\n\n        .hep-course-list button[onclick*=\"clear\"]:hover svg {\n            transform: rotate(90deg);\n        }\n\n        \/* Filter List Items *\/\n        .hep-course-list .space-y-3 li {\n            padding: 8px 12px;\n            border-radius: 8px;\n            transition: background 0.2s ease;\n        }\n\n        .hep-course-list .space-y-3 li:hover {\n            background: #f9fafb;\n        }\n\n        .hep-course-list .space-y-3 label {\n            font-size: 13px;\n            color: #4b5563;\n            font-weight: 500;\n        }\n\n        \/* Custom Checkbox Styling *\/\n        .hep-course-list .peer-checked\\:border-\\[\\#5A31F4\\] {\n            transition: all 0.2s ease;\n        }\n\n        .hep-course-list .peer-checked\\:bg-\\[\\#edeaff\\] {\n            transition: all 0.2s ease;\n        }\n\n        \/* Sort Tabs Container *\/\n        .hep-course-list #courseTabs {\n            background: linear-gradient(135deg, #f3e8ff 0%, #ede9fe 100%);\n            border: 1px solid #e9d5ff;\n        }\n\n        \/* Sort Tab Buttons *\/\n        .hep-course-list .tab-btn {\n            border: none !important;\n            font-weight: 600;\n            transition: all 0.3s ease;\n            position: relative;\n            overflow: hidden;\n        }\n\n        .hep-course-list .tab-btn::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: linear-gradient(135deg, rgba(124, 58, 237, 0.1) 0%, rgba(90, 49, 244, 0.1) 100%);\n            opacity: 0;\n            transition: opacity 0.3s ease;\n        }\n\n        .hep-course-list .tab-btn:hover::before {\n            opacity: 1;\n        }\n\n        \/* Desktop Sort Tabs *\/\n        @media (min-width: 1024px) {\n            .hep-course-list .tab-btn {\n                font-size: 14px;\n                padding: 8px 0;\n                background: transparent !important;\n            }\n\n            .hep-course-list .tab-btn.text-purple-600 {\n                color: #7c3aed;\n                text-decoration: underline;\n                text-underline-offset: 4px;\n                text-decoration-thickness: 2px;\n            }\n\n            .hep-course-list .tab-btn.text-gray-400 {\n                color: #9ca3af;\n            }\n\n            .hep-course-list .tab-btn:hover {\n                color: #5A31F4;\n            }\n        }\n\n        \/* Mobile Sort Tabs *\/\n        @media (max-width: 1023px) {\n            .hep-course-list .tab-btn {\n                font-size: 12px;\n                padding: 10px 16px;\n                border-radius: 10px;\n            }\n\n            .hep-course-list .tab-btn.bg-white {\n                background: #ffffff !important;\n                box-shadow: 0 2px 8px rgba(90, 49, 244, 0.15);\n            }\n        }\n\n        \/* Course Count Badge *\/\n        .hep-course-list #courseCount,\n        .hep-course-list #courseCountDesktop {\n            font-weight: 700;\n            color: #7c3aed;\n            background: rgba(124, 58, 237, 0.1);\n            padding: 6px 12px;\n            border-radius: 8px;\n        }\n\n        \/* Course Cards *\/\n        .hep-course-list .bg-white.rounded-lg.py-4.shadow-xl {\n            transition: all 0.3s ease;\n        }\n\n        .hep-course-list .bg-white.rounded-lg.py-4.shadow-xl:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 20px 40px rgba(90, 49, 244, 0.15) !important;\n        }\n\n        \/* Course Card Button *\/\n        .hep-course-list .bg-\\[\\#5A31F4\\].rounded-lg.p-2 {\n            background: linear-gradient(135deg, #7c3aed 0%, #5A31F4 100%) !important;\n            transition: all 0.3s ease;\n            font-weight: 600;\n        }\n\n        .hep-course-list .bg-\\[\\#5A31F4\\].rounded-lg.p-2:hover {\n            transform: scale(1.02);\n            box-shadow: 0 4px 12px rgba(90, 49, 244, 0.4);\n        }\n\n        \/* Discount Badge *\/\n        .hep-course-list .bg-\\[\\#EF4056\\] {\n            background: linear-gradient(135deg, #EF4056 0%, #d63447 100%) !important;\n            font-weight: 700;\n            box-shadow: 0 2px 8px rgba(239, 64, 86, 0.3);\n        }\n\n        \/* Loading Spinner *\/\n        .hep-course-list #courseLoading .animate-spin {\n            border-color: #e9d5ff;\n            border-top-color: #7c3aed;\n        }\n\n        \/* No Results Message *\/\n        .hep-course-list #noResults {\n            font-size: 16px;\n            color: #6b7280;\n            font-weight: 500;\n        }\n\n        \/* Scrollbar for Filter Lists *\/\n        .hep-course-list .max-h-32,\n        .hep-course-list .max-h-72 {\n            scrollbar-width: thin;\n            scrollbar-color: #d1d5db #f3f4f6;\n        }\n\n        .hep-course-list .max-h-32::-webkit-scrollbar,\n        .hep-course-list .max-h-72::-webkit-scrollbar {\n            width: 6px;\n        }\n\n        .hep-course-list .max-h-32::-webkit-scrollbar-track,\n        .hep-course-list .max-h-72::-webkit-scrollbar-track {\n            background: #f3f4f6;\n            border-radius: 10px;\n        }\n\n        .hep-course-list .max-h-32::-webkit-scrollbar-thumb,\n        .hep-course-list .max-h-72::-webkit-scrollbar-thumb {\n            background: #d1d5db;\n            border-radius: 10px;\n        }\n\n        .hep-course-list .max-h-32::-webkit-scrollbar-thumb:hover,\n        .hep-course-list .max-h-72::-webkit-scrollbar-thumb:hover {\n            background: #9ca3af;\n        }\n\n        \/* Course Meta Info *\/\n        .hep-course-list .text-xs.text-gray-400 {\n            color: #9ca3af;\n            font-weight: 500;\n        }\n\n        .hep-course-list .text-xs.text-gray-500 {\n            color: #6b7280;\n            font-weight: 600;\n            line-height: 1.5;\n        }\n\n        \/* Instructor Image *\/\n        .hep-course-list img.rounded-full {\n            border: 2px solid #f3f4f6;\n            transition: all 0.2s ease;\n        }\n\n        .hep-course-list img.rounded-full:hover {\n            border-color: #7c3aed;\n            transform: scale(1.1);\n        }\n\n        \/* Price Display *\/\n        .hep-course-list .line-through {\n            opacity: 0.6;\n        }\n\n        \/* Responsive Typography *\/\n        @media (max-width: 640px) {\n            .hep-course-list .font-bold {\n                font-size: 13px;\n            }\n            \n            .hep-course-list .text-xs {\n                font-size: 11px;\n            }\n        }\n\n        \/* Animation for Filter Appearance *\/\n        @keyframes slideDown {\n            from {\n                opacity: 0;\n                transform: translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: translateY(0);\n            }\n        }\n\n        .hep-course-list .block {\n            animation: slideDown 0.3s ease;\n        }\n\n        \/* Grid Gap Enhancement *\/\n        .hep-course-list #courseGrid {\n            gap: 1.5rem;\n        }\n\n        @media (max-width: 640px) {\n            .hep-course-list #courseGrid {\n                gap: 1rem;\n            }\n        }\n\n        \/* Purple Theme Consistency *\/\n        .hep-course-list .text-purple-600 {\n            color: #7c3aed !important;\n        }\n\n        .hep-course-list .bg-purple-100 {\n            background-color: rgba(124, 58, 237, 0.1) !important;\n        }\n\n        .hep-course-list .border-\\[\\#5A31F4\\] {\n            border-color: #5A31F4 !important;\n        }\n\n        \/* Hover Effects for Interactive Elements *\/\n        .hep-course-list button,\n        .hep-course-list label {\n            cursor: pointer;\n        }\n\n        .hep-course-list button:active {\n            transform: scale(0.98);\n        }\n\n        \/* Focus States for Accessibility *\/\n        .hep-course-list button:focus,\n        .hep-course-list input:focus {\n            outline: 2px solid #7c3aed;\n            outline-offset: 2px;\n        }\n\n        \/* Smooth Transitions *\/\n        .hep-course-list * {\n            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n        }\n        <\/style>\n        <div class=\"hep-course-list\" dir=\"rtl\">\n            <div class=\"w-full px-4 sm:px-6 lg:px-8 mx-auto py-2 sm:py-4\">\n                <div class=\"w-full h-full flex flex-col lg:flex-row items-start gap-4\">\n                    \n                                        <!-- Right Sidebar - Filters -->\n                    <div class=\"w-full lg:w-1\/4 flex flex-col gap-4 order-1\">\n                            \n                            \n                                                        <!-- Category Filter -->\n                            <div class=\"bg-white rounded-2xl shadow-lg p-4\">\n                                <div class=\"flex items-center justify-between mb-4\">\n                                    <div class=\"flex items-center gap-2 cursor-pointer flex-1\" onclick=\"toggleFilter('categoryFilter')\">\n                                        <span class=\"font-bold text-sm\">\u062f\u0633\u062a\u0647 \u062f\u0648\u0631\u0647<\/span>\n                                       \n                                    <\/div>\n                                    <button onclick=\"clearCategoryFilters()\" class=\"flex items-center gap-1 bg-purple-100 text-purple-600 text-xs px-2 py-1 rounded-lg hover:bg-purple-200 transition-colors\">\n                                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"w-4 h-4\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n                                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\" \/>\n                                        <\/svg>\n                                        <span>\u062d\u0630\u0641 \u0641\u06cc\u0644\u062a\u0631<\/span>\n                                    <\/button>\n                                <\/div>\n                                <div id=\"categoryFilter\" class=\"block\">\n                                    <div class=\"flex\">\n                                        <div class=\"flex overflow-y-auto max-h-72 pr-4 w-full\">\n                                            <ul class=\"space-y-3 text-sm w-full\">\n                                                                                                        <li class=\"flex items-center justify-between gap-2\">\n                                                            <label class=\"flex items-center gap-2 cursor-pointer w-full\">\n                                                                <span class=\"w-6 h-6 flex items-center justify-center\">\n                                                                    <input type=\"checkbox\" class=\"category-filter hidden peer\" value=\"15\" data-slug=\"shop\">\n                                                                    <span\n                                                                        class=\"w-5 h-5 border border-gray-300 rounded bg-white peer-checked:border-[#5A31F4] peer-checked:bg-[#edeaff] transition-all\"><\/span>\n                                                                <\/span>\n                                                                <span>\u0645\u062d\u0635\u0648\u0644\u0627\u062a<\/span>\n                                                            <\/label>\n                                                        <\/li>\n                                                                                                                <li class=\"flex items-center justify-between gap-2\">\n                                                            <label class=\"flex items-center gap-2 cursor-pointer w-full\">\n                                                                <span class=\"w-6 h-6 flex items-center justify-center\">\n                                                                    <input type=\"checkbox\" class=\"category-filter hidden peer\" value=\"102\" data-slug=\"training-courses\">\n                                                                    <span\n                                                                        class=\"w-5 h-5 border border-gray-300 rounded bg-white peer-checked:border-[#5A31F4] peer-checked:bg-[#edeaff] transition-all\"><\/span>\n                                                                <\/span>\n                                                                <span>\u062f\u0648\u0631\u0647 \u0647\u0627\u06cc \u0622\u0645\u0648\u0632\u0634\u06cc<\/span>\n                                                            <\/label>\n                                                        <\/li>\n                                                                                                                <li class=\"flex items-center justify-between gap-2\">\n                                                            <label class=\"flex items-center gap-2 cursor-pointer w-full\">\n                                                                <span class=\"w-6 h-6 flex items-center justify-center\">\n                                                                    <input type=\"checkbox\" class=\"category-filter hidden peer\" value=\"103\" data-slug=\"physical-products\">\n                                                                    <span\n                                                                        class=\"w-5 h-5 border border-gray-300 rounded bg-white peer-checked:border-[#5A31F4] peer-checked:bg-[#edeaff] transition-all\"><\/span>\n                                                                <\/span>\n                                                                <span>\u0645\u062d\u0635\u0648\u0644\u0627\u062a \u0641\u06cc\u0632\u06cc\u06a9\u06cc<\/span>\n                                                            <\/label>\n                                                        <\/li>\n                                                                                                    <\/ul>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                                                <\/div>\n                    \n                    <!-- Left Side - Course List -->\n                    <div class=\"w-full lg:w-3\/4 flex flex-col gap-4 order-2\">\n                        \n                                                <!-- Sorting Tabs -->\n                        <div id=\"courseTabs\" class=\"bg-purple-100 rounded-2xl p-3 sm:p-4 mb-4\">\n                            <!-- Mobile Tabs -->\n                            <div class=\"lg:hidden\">\n                                <div class=\"flex items-center justify-between mb-3\">\n                                    <span class=\"text-xs text-purple-600 \" id=\"courseCount\">\u06f0 \u06a9\u0627\u0644\u0627<\/span>\n                                    <span class=\"text-xs text-purple-600\">\u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc:<\/span>\n                                <\/div>\n                                <div class=\"flex items-center gap-1 overflow-x-auto pb-2 scrollbar-hide\">\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-white text-purple-600 px-3 py-2 rounded-lg font-bold transition-all shadow-sm\"\n                                        data-sort=\"popular\">\u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-transparent text-gray-600 px-3 py-2 rounded-lg transition-all\"\n                                        data-sort=\"visited\">\u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-transparent text-gray-600 px-3 py-2 rounded-lg transition-all\"\n                                        data-sort=\"newest\">\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-transparent text-gray-600 px-3 py-2 rounded-lg transition-all\"\n                                        data-sort=\"cheapest\">\u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-transparent text-gray-600 px-3 py-2 rounded-lg transition-all\"\n                                        data-sort=\"expensive\">\u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button\n                                        class=\"tab-btn text-xs whitespace-nowrap bg-transparent text-gray-600 px-3 py-2 rounded-lg transition-all\"\n                                        data-sort=\"suggested\">\u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646<\/button>\n                                <\/div>\n                            <\/div>\n\n                            <!-- Desktop Tabs -->\n                            <div class=\"hidden lg:flex items-center justify-between\">\n                                <div class=\"flex items-center gap-6\">\n                                    <span>\n                                        <svg class=\"w-6 h-6 text-purple-600\" fill=\"none\" viewBox=\"0 0 24 24\"\n                                            stroke=\"currentColor\">\n                                            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\"\n                                                d=\"M4 6h16M4 12h16M4 18h16\" \/>\n                                        <\/svg>\n                                    <\/span>\n                                    <button class=\"tab-btn text-xs text-purple-600 underline font-bold transition-all\"\n                                        data-sort=\"popular\">\u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button class=\"tab-btn text-xs text-gray-400\"\n                                        data-sort=\"visited\">\u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n                                    <button class=\"tab-btn text-xs text-gray-400\"\n                                        data-sort=\"newest\">\u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646<\/button>\n                                    <button class=\"tab-btn text-xs text-gray-400\"\n                                        data-sort=\"cheapest\">\u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button class=\"tab-btn text-xs text-gray-400\"\n                                        data-sort=\"expensive\">\u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646<\/button>\n                                    <button class=\"tab-btn text-xs text-gray-400\" data-sort=\"suggested\">\u067e\u06cc\u0634\u0646\u0647\u0627\u062f\n                                        \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646<\/button>\n                                <\/div>\n                                <span class=\"text-xs text-purple-600 \" id=\"courseCountDesktop\">\u06f0 \u06a9\u0627\u0644\u0627<\/span>\n                            <\/div>\n                        <\/div>\n                        \n                        <!-- Course Grid -->\n                        <div id=\"courseGrid\"\n                            class=\"w-full grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-4\">\n                            <!-- Courses will be loaded here via JavaScript -->\n                        <\/div>\n\n                        <!-- Loading Spinner -->\n                        <div id=\"courseLoading\" class=\"hidden flex justify-center items-center py-8\">\n                            <div class=\"animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600\"><\/div>\n                        <\/div>\n\n                        <!-- No Results -->\n                        <div id=\"noResults\" class=\"hidden text-center py-8\">\n                            <p class=\"text-gray-500\">\u0647\u06cc\u0686 \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/p>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <script>\n        (function() {\n            const ajaxUrl = \"https:\\\/\\\/rubikto.com\\\/01\\\/wp-admin\\\/admin-ajax.php\";\n            const nonce = \"95f940d54a\";\n            const perPage = 12;\n            const initialCategoryId = 0;\n\n            let page = 1;\n            let totalPages = 1;\n            let loading = false;\n\n            const state = {\n                sort: 'popular',\n                courseTypes: [],\n                categories: [],\n                categoryId: initialCategoryId,\n            };\n            \n            const grid = document.getElementById('courseGrid');\n            const loadingEl = document.getElementById('courseLoading');\n            const noResultsEl = document.getElementById('noResults');\n            const courseCountEl = document.getElementById('courseCount');\n            const courseCountDesktopEl = document.getElementById('courseCountDesktop');\n            \n            \/\/ Format price\n            function formatPrice(price) {\n                return new Intl.NumberFormat('fa-IR').format(parseInt(price || 0));\n            }\n            \n            \/\/ Toggle filter visibility\n            window.toggleFilter = function(id) {\n                const filter = document.getElementById(id);\n                const icon = document.getElementById(id + 'Icon');\n                if (filter && icon) {\n                    if (filter.style.display === 'none') {\n                        filter.style.display = 'block';\n                        icon.classList.add('rotate-180');\n                    } else {\n                        filter.style.display = 'none';\n                        icon.classList.remove('rotate-180');\n                    }\n                }\n            };\n            \n            \/\/ Clear course type filters\n            window.clearCourseTypeFilters = function() {\n                document.querySelectorAll('.course-type-filter').forEach(checkbox => {\n                    checkbox.checked = false;\n                });\n                state.courseTypes = [];\n                page = 1;\n                loadCourses(true);\n            };\n            \n            \/\/ Clear category filters\n            window.clearCategoryFilters = function() {\n                document.querySelectorAll('.category-filter').forEach(checkbox => {\n                    checkbox.checked = false;\n                });\n                state.categories = [];\n                page = 1;\n                loadCourses(true);\n            };\n            \n            \/\/ Sort tabs\n            document.querySelectorAll('.tab-btn').forEach(btn => {\n                btn.addEventListener('click', function() {\n                    const isMobile = window.innerWidth < 1024;\n                    \n                    if (isMobile) {\n                        document.querySelectorAll('.tab-btn').forEach(b => {\n                            b.classList.remove('bg-white', 'text-purple-600', 'font-bold', 'shadow-sm');\n                            b.classList.add('bg-transparent', 'text-gray-600');\n                        });\n                        this.classList.add('bg-white', 'text-purple-600', 'font-bold', 'shadow-sm');\n                        this.classList.remove('bg-transparent', 'text-gray-600');\n                    } else {\n                        document.querySelectorAll('.tab-btn').forEach(b => {\n                            b.classList.remove('text-purple-600', 'underline', 'font-bold');\n                            b.classList.add('text-gray-400');\n                        });\n                        this.classList.add('text-purple-600', 'underline', 'font-bold');\n                        this.classList.remove('text-gray-400');\n                    }\n                    \n                    state.sort = this.dataset.sort;\n                    page = 1;\n                    loadCourses(true);\n                });\n            });\n            \n            \/\/ Course type filters\n            document.querySelectorAll('.course-type-filter').forEach(checkbox => {\n                checkbox.addEventListener('change', function() {\n                    const value = this.dataset.value;\n                    \n                    if (this.checked) {\n                        if (!state.courseTypes.includes(value)) {\n                            state.courseTypes.push(value);\n                        }\n                    } else {\n                        state.courseTypes = state.courseTypes.filter(t => t !== value);\n                    }\n                    page = 1;\n                    loadCourses(true);\n                });\n            });\n            \n            \/\/ Category filters\n            document.querySelectorAll('.category-filter').forEach(checkbox => {\n                checkbox.addEventListener('change', function() {\n                    if (this.checked) {\n                        state.categories.push(this.value);\n                    } else {\n                        state.categories = state.categories.filter(c => c !== this.value);\n                    }\n                    page = 1;\n                    loadCourses(true);\n                });\n            });\n            \n            \/\/ Load courses\n            function loadCourses(reset = false) {\n                if (loading) return;\n                loading = true;\n                \n                if (reset) {\n                    grid.innerHTML = '';\n                }\n                \n                loadingEl.classList.remove('hidden');\n                noResultsEl.classList.add('hidden');\n                \n                const formData = new FormData();\n                formData.append('action', 'load_course_list');\n                formData.append('nonce', nonce);\n                formData.append('page', page);\n                formData.append('per_page', perPage);\n                formData.append('sort', state.sort);\n                formData.append('course_types', JSON.stringify(state.courseTypes));\n                formData.append('categories', JSON.stringify(state.categories));\n                formData.append('category_id', state.categoryId);\n                \n                fetch(ajaxUrl, {\n                    method: 'POST',\n                    body: formData\n                })\n                .then(response => response.json())\n                .then(data => {\n                    loading = false;\n                    loadingEl.classList.add('hidden');\n                    \n                    if (data.success && data.data.courses && data.data.courses.length > 0) {\n                        data.data.courses.forEach(course => {\n                            grid.innerHTML += createCourseCard(course);\n                        });\n                        \n                        totalPages = data.data.total_pages || 1;\n                        \n                        if (courseCountEl) {\n                            courseCountEl.textContent = formatPrice(data.data.total) + ' \u062f\u0648\u0631\u0647';\n                        }\n                        if (courseCountDesktopEl) {\n                            courseCountDesktopEl.textContent = formatPrice(data.data.total) + ' \u062f\u0648\u0631\u0647';\n                        }\n                    } else {\n                        if (reset) {\n                            noResultsEl.classList.remove('hidden');\n                        }\n                        if (courseCountEl) {\n                            courseCountEl.textContent = '\u06f0 \u062f\u0648\u0631\u0647';\n                        }\n                        if (courseCountDesktopEl) {\n                            courseCountDesktopEl.textContent = '\u06f0 \u062f\u0648\u0631\u0647';\n                        }\n                    }\n                })\n                .catch(error => {\n                    console.error('Error:', error);\n                    loading = false;\n                    loadingEl.classList.add('hidden');\n                });\n            }\n            \n            \/\/ Create course card\n            function createCourseCard(course) {\n                return `\n                    <div class=\"w-full bg-white rounded-lg py-4 shadow-xl flex flex-col hover:shadow-2xl transition-all duration-300\">\n                        <a href=\"${course.permalink}\" class=\"block\">\n                            <div class=\"flex items-center justify-center\">\n                                <img decoding=\"async\" src=\"${course.image}\" alt=\"${course.name}\" class=\"w-full lg:w-64\" \/>\n                            <\/div>\n                            <div class=\"flex flex-col gap-2 sm:gap-3 px-3 sm:px-4 mt-3 sm:mt-4\">\n                                <div class=\"flex items-center justify-between\">\n                                    ${course.instructor_image ? `\n                                        <div class=\"flex items-center gap-1\">\n                                            <img decoding=\"async\" src=\"${course.instructor_image}\" alt=\"${course.instructor_name}\" class=\"w-5 sm:w-6 bg-gray-100 rounded-full p-1\">\n                                            <p class=\"text-xs text-gray-400\">${course.instructor_name}<\/p>\n                                        <\/div>\n                                    ` : '<div><\/div>'}\n                                    <p class=\"text-xs text-gray-400\">${course.lesson_count} \u062c\u0644\u0633\u0647<\/p>\n                                <\/div>\n                                <p class=\"text-xs text-gray-500\">${course.name}<\/p>\n                                <div class=\"flex items-center justify-between\">\n                                    ${course.discount_percent > 0 ? `\n                                        <p class=\"bg-[#EF4056] text-white rounded-md px-2 py-2 text-xs\">% ${formatPrice(course.discount_percent)}<\/p>\n                                    ` : '<div><\/div>'}\n                                    <div class=\"flex flex-col items-center gap-1\">\n                                        ${course.sale_price ? `\n                                            <p class=\"text-xs text-gray-500\">${formatPrice(course.sale_price)} \u062a\u0648\u0645\u0627\u0646<\/p>\n                                            <p class=\"text-xs text-gray-300 line-through\">${formatPrice(course.regular_price)} \u062a\u0648\u0645\u0627\u0646<\/p>\n                                        ` : `\n                                            <p class=\"text-xs text-gray-500\">${formatPrice(course.price)} \u062a\u0648\u0645\u0627\u0646<\/p>\n                                        `}\n                                    <\/div>\n                                <\/div>\n                                <div class=\"w-full bg-[#5A31F4] rounded-lg p-2 text-center text-xs text-gray-100\">\n                                    \u0645\u0634\u0627\u0647\u062f\u0647 \u0648 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062f\u0648\u0631\u0647\n                                <\/div>\n                            <\/div>\n                        <\/a>\n                    <\/div>\n                `;\n            }\n            \n            \/\/ Initial load\n            loadCourses(true);\n        })();\n        <\/script>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\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>\u062f\u0633\u062a\u0647 \u062f\u0648\u0631\u0647 \u062d\u0630\u0641 \u0641\u06cc\u0644\u062a\u0631 \u0645\u062d\u0635\u0648\u0644\u0627\u062a \u06f0 \u06a9\u0627\u0644\u0627 \u0645\u0631\u062a\u0628\u200c\u0633\u0627\u0632\u06cc: \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646 \u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646 \u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646 \u067e\u0631\u0641\u0631\u0648\u0634\u200c\u062a\u0631\u06cc\u0646 \u067e\u0631\u0628\u0627\u0632\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u062c\u062f\u06cc\u062f\u062a\u0631\u06cc\u0646 \u0627\u0631\u0632\u0627\u0646\u200c\u062a\u0631\u06cc\u0646 \u06af\u0631\u0627\u0646\u200c\u062a\u0631\u06cc\u0646 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u062e\u0631\u06cc\u062f\u0627\u0631\u0627\u0646 \u06f0 \u06a9\u0627\u0644\u0627 \u0647\u06cc\u0686 \u062f\u0648\u0631\u0647\u200c\u0627\u06cc \u06cc\u0627\u0641\u062a \u0646\u0634\u062f<\/p>\n","protected":false},"author":10,"featured_media":1980,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-608","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/pages\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":32,"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/pages\/608\/revisions"}],"predecessor-version":[{"id":2399,"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/pages\/608\/revisions\/2399"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/media\/1980"}],"wp:attachment":[{"href":"https:\/\/rubikto.com\/01\/wp-json\/wp\/v2\/media?parent=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}