{"id":10765,"date":"2026-01-30T09:23:33","date_gmt":"2026-01-30T02:23:33","guid":{"rendered":"https:\/\/yatimmandiri.org\/blog\/?page_id=10765"},"modified":"2026-02-02T14:42:22","modified_gmt":"2026-02-02T07:42:22","slug":"jadwal-sholat","status":"publish","type":"page","link":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/","title":{"rendered":"Jadwal Sholat Lengkap di Indonesia Hari Ini"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10765\" class=\"elementor elementor-10765\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-68b9ff4 e-flex e-con-boxed e-con e-parent\" data-id=\"68b9ff4\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2cecf2 elementor-widget elementor-widget-heading\" data-id=\"c2cecf2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Jadwal Sholat Lengkap di Indonesia<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d68156d elementor-hidden-mobile elementor-widget elementor-widget-text-editor\" data-id=\"d68156d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Temukan Jadwal Sholat Subuh, Dzuhur, Ashar, Maghrib, dan Isya secara <em>realtime<\/em> untuk <strong>470 kota<\/strong> dari <strong>38 provinsi<\/strong> di Seluruh Indonesia. Waktu dapat berbeda tergantung wilayah masing-masing.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-616473c elementor-hidden-desktop elementor-widget elementor-widget-text-editor\" data-id=\"616473c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Temukan Jadwal Sholat Subuh, Dzuhur, Ashar, Maghrib, dan Isya secara <em>realtime<\/em> untuk <strong>470 kota<\/strong> dari <strong>38 provinsi<\/strong> di Seluruh Indonesia. Waktu dapat berbeda tergantung wilayah masing-masing.<\/p>\t\t\t\t\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<div class=\"elementor-element elementor-element-7d785c8d e-flex e-con-boxed e-con e-parent\" data-id=\"7d785c8d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-12b22629 elementor-widget elementor-widget-shortcode\" data-id=\"12b22629\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <!-- Library untuk generate PDF -->\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\r\n    <!-- Menggunakan font Plus Jakarta Sans untuk nuansa premium & modern -->\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    \r\n    <style>\r\n        \/* --- UI VARIABLES (World Class Elegant Warmth) --- *\/\r\n        .js-widget-root {\r\n            \/* Brand Colors - Vivid & Premium *\/\r\n            --ym-primary: #F26900;\r\n            --ym-primary-hover: #d95d00;\r\n            --ym-accent-bg: #fff0e6; \/* Softest orange tint *\/\r\n            --ym-gradient-header: linear-gradient(135deg, #ffffff 0%, #fffbf7 100%);\r\n            \r\n            \/* Neutrals - Warm & Sophisticated *\/\r\n            --ym-bg-white: #ffffff;\r\n            --ym-bg-soft: #faf9f8; \/* Warm off-white, not generic gray *\/\r\n            --ym-bg-hover: #fff5eb; \/* Warm hover state *\/\r\n            --ym-border-subtle: rgba(242, 105, 0, 0.08); \/* Colored subtle border *\/\r\n            \r\n            \/* Text Colors - High Contrast *\/\r\n            --ym-text-main: #2d3748; \/* Deep Charcoal *\/\r\n            --ym-text-secondary: #4a5568; \/* Cool Gray *\/\r\n            --ym-text-tertiary: #a0aec0;\r\n            \r\n            \/* Effects - Modern Depth *\/\r\n            --ym-shadow-card: 0 20px 40px -10px rgba(242, 105, 0, 0.06), 0 10px 20px -5px rgba(0, 0, 0, 0.02);\r\n            --ym-shadow-float: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);\r\n            --ym-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.02);\r\n            --ym-radius: 20px;\r\n            \r\n            font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;\r\n            box-sizing: border-box;\r\n            line-height: 1.5;\r\n            -webkit-font-smoothing: antialiased;\r\n        }\r\n\r\n        \/* --- MAIN WRAPPER --- *\/\r\n        .js-wrapper {\r\n            background: var(--ym-bg-white);\r\n            width: 100%;\r\n            max-width: 100%;\r\n            border-radius: var(--ym-radius);\r\n            box-shadow: var(--ym-shadow-card);\r\n            overflow: hidden;\r\n            position: relative;\r\n            margin: 30px 0;\r\n            border: 1px solid rgba(255, 255, 255, 0.5); \/* Glassy border feel *\/\r\n        }\r\n\r\n\t\t\/* --- MINIMALIST SCROLLBAR --- *\/\r\n\t\t.kontainer-scroll {\r\n\t\t\tscrollbar-width: thin; \/* Membuat scrollbar tipis *\/\r\n\t\t\toverflow-y: auto;       \/* Pastikan konten bisa di-scroll *\/\r\n\t\t\theight: 400px;         \/* Contoh tinggi kontainer *\/\r\n\t\t}\r\n\r\n        \/* Accent Top Line - Gradient *\/\r\n        .js-header-decor {\r\n            height: 5px;\r\n            background: linear-gradient(90deg, #F26900 0%, #ff8c42 50%, #F26900 100%);\r\n            width: 100%;\r\n        }\r\n\r\n        \/* --- COMPACT HEADER \/ INFO BAR --- *\/\r\n        .js-compact-header {\r\n            padding: 16px 28px;\r\n            background: var(--ym-gradient-header);\r\n            border-bottom: 1px solid var(--ym-border-subtle);\r\n            display: flex;\r\n            justify-content: space-between;\r\n            align-items: center;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n        }\r\n\r\n        \/* Group Tanggal & Hijriah *\/\r\n        .js-date-group-compact {\r\n            font-size: 0.85rem;\r\n            color: var(--ym-text-secondary);\r\n            font-weight: 500;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n            background: rgba(255,255,255,0.8);\r\n            padding: 6px 12px;\r\n            border-radius: 50px;\r\n            border: 1px solid var(--ym-border-subtle);\r\n        }\r\n\r\n        .js-date-compact { color: var(--ym-primary); font-weight: 700; }\r\n        .js-divider { color: #e2e8f0; }\r\n        .js-hijri-compact { color: var(--ym-text-secondary); font-weight: 600; }\r\n\r\n        \/* BUTTON DOWNLOAD PDF (NEW) *\/\r\n        .js-btn-pdf {\r\n            background: none;\r\n            border: none;\r\n            cursor: pointer;\r\n            font-family: inherit;\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            color: var(--ym-primary);\r\n            padding: 2px 8px;\r\n            border-radius: 4px;\r\n            transition: background 0.2s;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 4px;\r\n        }\r\n        \r\n        .js-btn-pdf:hover {\r\n            background: var(--ym-accent-bg);\r\n            text-decoration: none;\r\n        }\r\n\r\n        \/* --- COUNTDOWN (Highlighted Badge - Gradient) --- *\/\r\n        .js-countdown-badge {\r\n            display: inline-flex;\r\n            align-items: center;\r\n            gap: 8px;\r\n            padding: 6px 16px;\r\n            background: linear-gradient(135deg, var(--ym-primary) 0%, #ff8c42 100%);\r\n            color: #ffffff;\r\n            border-radius: 50px;\r\n            font-size: 0.75rem;\r\n            font-weight: 700;\r\n            box-shadow: 0 4px 12px rgba(242, 105, 0, 0.25);\r\n            white-space: nowrap;\r\n            letter-spacing: 0.02em;\r\n        }\r\n        \r\n        .js-countdown-label {\r\n            font-weight: 600;\r\n            opacity: 0.95;\r\n            font-size: 0.7rem;\r\n            text-transform: uppercase;\r\n            margin-right: 4px;\r\n        }\r\n\r\n        \/* --- SELECT CONTAINER --- *\/\r\n        .js-select-container { \r\n            padding: 24px 28px;\r\n            background: var(--ym-bg-white);\r\n            display: flex;\r\n            flex-direction: row; \r\n            gap: 20px; \r\n            align-items: flex-end; \r\n            flex-wrap: wrap; \r\n        }\r\n        \r\n        .js-select-group {\r\n            position: relative;\r\n            flex: 1; \r\n            min-width: 220px;\r\n        }\r\n\r\n        .js-select-label {\r\n            display: block;\r\n            font-size: 0.75rem;\r\n            font-weight: 800;\r\n            color: var(--ym-text-secondary);\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.08em;\r\n            margin-bottom: 10px;\r\n            text-align: left;\r\n        }\r\n\r\n        .js-select {\r\n            width: 100%;\r\n            padding: 14px 18px;\r\n            border-radius: 12px;\r\n            border: 1px solid #edf2f7;\r\n            font-size: 0.9rem;\r\n            background: var(--ym-bg-soft); \r\n            color: var(--ym-text-main);\r\n            font-weight: 600;\r\n            outline: none;\r\n            cursor: pointer;\r\n            appearance: none;\r\n            -webkit-appearance: none;\r\n            background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23F26900' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'\/%3E%3C\/svg%3E\");\r\n            background-repeat: no-repeat;\r\n            background-position: right 18px center;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            box-shadow: inset 0 2px 4px rgba(0,0,0,0.01);\r\n        }\r\n\r\n        .js-select:focus {\r\n            background: #fff;\r\n            border-color: var(--ym-primary);\r\n            box-shadow: 0 0 0 4px rgba(242, 105, 0, 0.1);\r\n            transform: translateY(-1px);\r\n        }\r\n\r\n        .js-select:disabled {\r\n            background-color: #f7fafc;\r\n            color: #cbd5e0;\r\n            cursor: not-allowed;\r\n            border-color: #edf2f7;\r\n        }\r\n\r\n        \/* --- TODAY PRAYER BLOCKS (Card Style) --- *\/\r\n        .js-today-stats {\r\n            display: grid;\r\n            grid-template-columns: repeat(6, 1fr);\r\n            gap: 12px;\r\n            padding: 0 28px 30px;\r\n            background: var(--ym-bg-white);\r\n        }\r\n\r\n        .js-stat-card {\r\n            background: #ffffff;\r\n            border: 1px solid transparent; \/* No border by default *\/\r\n            border-radius: 14px;\r\n            padding: 14px 8px;\r\n            text-align: center;\r\n            display: flex;\r\n            flex-direction: column;\r\n            align-items: center;\r\n            justify-content: center;\r\n            transition: all 0.3s ease;\r\n            box-shadow: 0 4px 15px rgba(0,0,0,0.03); \/* Soft shadow instead of border *\/\r\n            position: relative;\r\n            overflow: hidden;\r\n        }\r\n        \r\n        \/* Decorative top line for cards *\/\r\n        .js-stat-card::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0; left: 0; right: 0;\r\n            height: 3px;\r\n            background: var(--ym-bg-soft);\r\n            transition: background 0.3s;\r\n        }\r\n\r\n        .js-stat-card:hover {\r\n            transform: translateY(-4px);\r\n            box-shadow: 0 12px 20px rgba(242, 105, 0, 0.1);\r\n        }\r\n        \r\n        .js-stat-card:hover::before {\r\n            background: var(--ym-primary);\r\n        }\r\n\r\n        \/* --- ACTIVE CARD STYLE (Highlight Next Prayer) --- *\/\r\n        .js-stat-card.active {\r\n            background: var(--ym-primary);\r\n            border-color: var(--ym-primary);\r\n            box-shadow: 0 10px 25px rgba(242, 105, 0, 0.3);\r\n            transform: translateY(-4px);\r\n        }\r\n        \r\n        .js-stat-card.active .js-stat-label {\r\n            color: rgba(255,255,255,0.9);\r\n        }\r\n        \r\n        .js-stat-card.active .js-stat-time {\r\n            color: #ffffff;\r\n        }\r\n        \r\n        .js-stat-card.active::before {\r\n            background: rgba(255,255,255,0.5);\r\n        }\r\n\r\n        .js-stat-label {\r\n            font-size: 0.7rem;\r\n            color: var(--ym-text-tertiary);\r\n            font-weight: 800;\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            margin-bottom: 6px;\r\n        }\r\n\r\n        .js-stat-time {\r\n            font-size: 1.1rem;\r\n            font-weight: 700;\r\n            color: var(--ym-text-main);\r\n            font-family: 'Plus Jakarta Sans', monospace;\r\n        }\r\n\r\n        @media (max-width: 768px) {\r\n            .js-today-stats {\r\n                grid-template-columns: repeat(3, 1fr);\r\n            }\r\n        }\r\n\r\n        \/* --- DATA TABLE (Premium Clean - SCALED DOWN) --- *\/\r\n        .js-content { padding: 0; }\r\n\r\n        .js-table-wrapper {\r\n            overflow-x: auto; \r\n            width: 100%;\r\n            padding-bottom: 10px;\r\n        }\r\n        \r\n        .js-table-wrapper::-webkit-scrollbar { height: 6px; }\r\n        .js-table-wrapper::-webkit-scrollbar-track { background: transparent; }\r\n        .js-table-wrapper::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }\r\n\r\n        .js-table { \r\n            width: 100%; \r\n            border-collapse: collapse; \r\n            margin: 0; \r\n            min-width: 750px; \r\n            table-layout: fixed;\r\n        }\r\n        \r\n        .js-table th {\r\n            \/* Header Warm & Clean - Scaled Down *\/\r\n            background-color: #fffbf7; \/* Very warm light tint *\/\r\n            color: var(--ym-text-secondary);\r\n            font-weight: 800;\r\n            font-size: 0.75rem; \/* Reduced size *\/\r\n            text-transform: uppercase;\r\n            letter-spacing: 0.05em;\r\n            padding: 14px 10px; \/* Reduced padding *\/\r\n            text-align: center;\r\n            border: none;\r\n            white-space: nowrap;\r\n            \/* Subtle bottom separator *\/\r\n            box-shadow: 0 1px 0 rgba(0,0,0,0.03); \r\n        }\r\n        \r\n        .js-table th:nth-child(1) { width: 10%; }\r\n        .js-table th:nth-child(2) { width: 18%; }\r\n        .js-table th:nth-child(n+3) { width: 12%; }\r\n\r\n        \/* Sticky Header *\/\r\n        .js-table th:first-child { \r\n            text-align: center;\r\n            padding-left: 10px; \/* Reduced padding *\/\r\n            position: sticky;\r\n            left: 0;\r\n            background-color: #fffbf7;\r\n            z-index: 2;\r\n            box-shadow: 1px 0 0 rgba(0,0,0,0.03), 0 1px 0 rgba(0,0,0,0.03); \/* Right & Bottom shadow *\/\r\n        }\r\n\r\n        .js-row td {\r\n            padding: 12px 10px; \/* Reduced padding *\/\r\n            border: none;\r\n            font-size: 0.85rem; \/* Reduced size *\/\r\n            text-align: center;\r\n            color: var(--ym-text-secondary);\r\n            font-variant-numeric: tabular-nums;\r\n            transition: all 0.2s;\r\n        }\r\n        \r\n        \/* Sticky Date Column *\/\r\n        .js-row td:first-child { \r\n            color: var(--ym-primary); \/* Date is highlighted *\/\r\n            font-weight: 700; \r\n            text-align: center;\r\n            padding-left: 10px; \/* Reduced padding *\/\r\n            position: sticky;\r\n            left: 0;\r\n            background: inherit;\r\n            z-index: 1;\r\n            \/* Separator shadow for sticky col *\/\r\n            box-shadow: 1px 0 0 rgba(0,0,0,0.03); \r\n        }\r\n        \r\n        \/* Zebra Striping (Subtle Warmth vs White) *\/\r\n        .js-row:nth-child(odd) td { background-color: #ffffff; }\r\n        .js-row:nth-child(even) td { background-color: #fcfbf9; } \/* Very warm gray *\/\r\n\r\n        .js-row:hover td {\r\n            background-color: var(--ym-bg-hover);\r\n            color: var(--ym-text-main);\r\n            cursor: default;\r\n        }\r\n\r\n        \/* --- HIGHLIGHT TODAY (FLAT COLOR BLOCK) --- *\/\r\n        .js-row.today-row td {\r\n            background: var(--ym-accent-bg) !important; \/* Flat soft orange *\/\r\n            color: var(--ym-primary) !important;\r\n            font-weight: 800;\r\n        }\r\n        \r\n        .js-row.today-row td:first-child {\r\n            \/* Left Indicator Pill *\/\r\n            position: relative;\r\n        }\r\n        \r\n        .js-row.today-row td:first-child::before {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0; top: 8px; bottom: 8px;\r\n            width: 4px;\r\n            background: var(--ym-primary);\r\n            border-radius: 0 4px 4px 0;\r\n        }\r\n\r\n        \/* --- FOOTER & LOADER --- *\/\r\n        .js-loader { \r\n            text-align: center; \r\n            display: none; \r\n            padding: 50px; \r\n            color: var(--ym-primary); \r\n            font-size: 0.95rem; \r\n            font-weight: 600;\r\n        }\r\n        \r\n        .js-footer { \r\n            text-align: center; \r\n            font-size: 0.75rem; \r\n            color: var(--ym-text-tertiary); \r\n            padding: 24px; \r\n            background: var(--ym-bg-soft);\r\n            font-weight: 600;\r\n            letter-spacing: 0.05em;\r\n        }\r\n        \r\n        .js-spinner {\r\n            width: 28px; height: 28px;\r\n            border: 3px solid rgba(242, 105, 0, 0.1);\r\n            border-top: 3px solid var(--ym-primary);\r\n            border-radius: 50%;\r\n            animation: js-spin 0.8s linear infinite;\r\n            margin: 0 auto 12px;\r\n            display: block;\r\n        }\r\n        @keyframes js-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n    <\/style>\r\n\r\n    <div class=\"js-widget-root\">\r\n        <!-- Tambahkan ID agar html2pdf bisa menarget wrapper ini jika diperlukan -->\r\n        <div id=\"js-pdf-content\" class=\"js-wrapper\">\r\n            <div class=\"js-header-decor\"><\/div>\r\n            \r\n            <div class=\"js-compact-header\">\r\n                <div id=\"js-city-name\" style=\"display:none;\"><\/div>\r\n\r\n                <div class=\"js-date-group-compact\">\r\n                    <span id=\"js-date-text\" class=\"js-date-compact\">...<\/span>\r\n                    <span class=\"js-divider\">|<\/span>\r\n                    <span id=\"js-hijri-text\" class=\"js-hijri-compact\">...<\/span>\r\n                    <!-- Divider & Button Download PDF -->\r\n                    <span class=\"js-divider\">|<\/span>\r\n                    <button id=\"js-download-pdf\" class=\"js-btn-pdf\" title=\"Download PDF\">\r\n                        <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"><\/path><polyline points=\"7 10 12 15 17 10\"><\/polyline><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"><\/line><\/svg>\r\n                        Download PDF\r\n                    <\/button>\r\n                <\/div>\r\n                \r\n                <div id=\"js-countdown\" class=\"js-countdown-badge\" style=\"display:none;\"><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"js-select-container\">\r\n                <div class=\"js-select-group\">\r\n                    <span class=\"js-select-label\">Pilih Provinsi<\/span>\r\n                    <select id=\"js-province-select\" class=\"js-select\">\r\n                        <option value=\"\">-- Provinsi --<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n                <div class=\"js-select-group\">\r\n                    <span class=\"js-select-label\">Pilih Kota \/ Kabupaten<\/span>\r\n                    <select id=\"js-city-select\" class=\"js-select\" disabled>\r\n                        <option value=\"\">-- Kota --<\/option>\r\n                    <\/select>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- New Section: Today's Prayer Stats -->\r\n            <div class=\"js-today-stats\">\r\n                <div class=\"js-stat-card\" id=\"card-subuh\">\r\n                    <span class=\"js-stat-label\">Subuh<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-subuh\">--:--<\/span>\r\n                <\/div>\r\n                <div class=\"js-stat-card\" id=\"card-terbit\">\r\n                    <span class=\"js-stat-label\">Terbit<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-terbit\">--:--<\/span>\r\n                <\/div>\r\n                <div class=\"js-stat-card\" id=\"card-dzuhur\">\r\n                    <span class=\"js-stat-label\">Dzuhur<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-dzuhur\">--:--<\/span>\r\n                <\/div>\r\n                <div class=\"js-stat-card\" id=\"card-ashar\">\r\n                    <span class=\"js-stat-label\">Ashar<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-ashar\">--:--<\/span>\r\n                <\/div>\r\n                <div class=\"js-stat-card\" id=\"card-maghrib\">\r\n                    <span class=\"js-stat-label\">Maghrib<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-maghrib\">--:--<\/span>\r\n                <\/div>\r\n                <div class=\"js-stat-card\" id=\"card-isya\">\r\n                    <span class=\"js-stat-label\">Isya<\/span>\r\n                    <span class=\"js-stat-time\" id=\"js-card-isya\">--:--<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- ID untuk target tabel saja yang akan di-clone untuk PDF -->\r\n            <div id=\"js-pdf-table-source\" class=\"js-content\">\r\n                <div id=\"js-loader\" class=\"js-loader\">\r\n                    <span class=\"js-spinner\"><\/span>\r\n                    Menghubungkan ke server...\r\n                <\/div>\r\n                \r\n                <div id=\"js-table-container\" class=\"kontainer-scroll\"><\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"js-footer\">Sumber Data: Aladhan.com (Kemenag Method)<\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const provinceSelect = document.getElementById('js-province-select');\r\n        const citySelect = document.getElementById('js-city-select');\r\n        const container = document.getElementById('js-table-container');\r\n        const loader = document.getElementById('js-loader');\r\n        const cityNameText = document.getElementById('js-city-name');\r\n        const countdownBox = document.getElementById('js-countdown');\r\n        const hijriText = document.getElementById('js-hijri-text');\r\n        \r\n        let timerInterval = null;\r\n        const now = new Date();\r\n\r\n        document.getElementById('js-date-text').innerText = now.toLocaleDateString('id-ID', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });\r\n\r\n        \/\/ --- PDF DOWNLOAD HANDLER (FIXED 1 PAGE & LAYOUT) ---\r\n        const btnPdf = document.getElementById('js-download-pdf');\r\n        if (btnPdf) {\r\n            btnPdf.addEventListener('click', function() {\r\n                \/\/ 1. Ambil elemen tabel\r\n                const tableSource = document.querySelector('.js-table-wrapper table'); \/\/ Target the table element directly\r\n                if (!tableSource) return;\r\n\r\n                \/\/ 2. Siapkan data judul\r\n                const monthYear = now.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' });\r\n                const hijriFull = document.getElementById('js-hijri-text').innerText;\r\n                const hijriYearMatch = hijriFull.match(\/(\\d{4}\\s*H)\/);\r\n                const hijriYear = hijriYearMatch ? hijriYearMatch[0] : '';\r\n                const cityName = document.getElementById('js-city-name').innerText.replace('Jadwal ', '');\r\n                \r\n                const titleText = `Jadwal Sholat Lengkap Bulan ${monthYear} ${hijriYear}`;\r\n\r\n                \/\/ 3. Buat Container Sementara untuk PDF (A4 Width Logic)\r\n                const tempContainer = document.createElement('div');\r\n                \/\/ Gunakan inline styles untuk memastikan tampilan PDF konsisten\r\n                \/\/ Lebar 210mm = A4 Width. Menggunakan px agar render lebih tajam di canvas\r\n                tempContainer.style.width = '794px'; \/\/ ~210mm @ 96DPI\r\n                tempContainer.style.padding = '10px 30px'; \/\/ Padding kanan kiri agar tidak mepet\r\n                tempContainer.style.fontFamily = \"'Plus Jakarta Sans', sans-serif\";\r\n                tempContainer.style.background = '#ffffff';\r\n                tempContainer.style.color = '#000';\r\n                tempContainer.style.boxSizing = 'border-box';\r\n\r\n                \/\/ Header PDF\r\n                const headerEl = document.createElement('div');\r\n                headerEl.style.textAlign = 'center';\r\n                headerEl.style.marginBottom = '20px';\r\n                \r\n                const titleEl = document.createElement('h3');\r\n                titleEl.innerText = titleText;\r\n                titleEl.style.margin = '0 0 5px 0';\r\n                titleEl.style.fontSize = '16px';\r\n                titleEl.style.fontWeight = '800';\r\n                titleEl.style.textTransform = 'uppercase';\r\n                titleEl.style.color = '#F26900';\r\n                headerEl.appendChild(titleEl);\r\n\r\n                const subTitle = document.createElement('p');\r\n                subTitle.innerText = `Untuk Wilayah: ${cityName}`;\r\n                subTitle.style.margin = '0';\r\n                subTitle.style.fontSize = '12px';\r\n                subTitle.style.fontWeight = '600';\r\n                headerEl.appendChild(subTitle);\r\n\r\n                tempContainer.appendChild(headerEl);\r\n\r\n                \/\/ Clone Tabel\r\n                const tableClone = tableSource.cloneNode(true);\r\n                \r\n                \/\/ Styling Tabel untuk PDF (Compact)\r\n                tableClone.style.width = '100%';\r\n                tableClone.style.borderCollapse = 'collapse';\r\n                tableClone.style.fontSize = '9px'; \/\/ Font sangat kecil agar muat\r\n                tableClone.style.marginBottom = '10px';\r\n                \r\n                \/\/ Reset semua styling bawaan yang mungkin mengganggu layout PDF\r\n                tableClone.style.marginTop = '0';\r\n                tableClone.style.boxShadow = 'none';\r\n                tableClone.style.maxWidth = '100%';\r\n\r\n                \/\/ Styling Cells (Header & Body)\r\n                tableClone.querySelectorAll('th, td').forEach(cell => {\r\n                    cell.style.padding = '4px 3px'; \/\/ Padding minimal\r\n                    cell.style.border = '1px solid #ccc'; \/\/ Border wajib ada\r\n                    cell.style.textAlign = 'center';\r\n                    cell.style.position = 'static'; \/\/ Reset sticky\r\n                    cell.style.boxShadow = 'none'; \/\/ Reset shadow separator\r\n                    cell.style.backgroundColor = 'transparent';\r\n                    cell.style.color = '#333';\r\n                });\r\n\r\n                \/\/ Khusus Header Tabel\r\n                tableClone.querySelectorAll('th').forEach(th => {\r\n                    th.style.backgroundColor = '#e5e5e5';\r\n                    th.style.fontWeight = '900';\r\n                    th.style.fontSize = '10px';\r\n                });\r\n\r\n                tempContainer.appendChild(tableClone);\r\n\r\n                \/\/ Footer PDF\r\n                const footerEl = document.createElement('div');\r\n                footerEl.style.textAlign = 'center';\r\n                footerEl.style.marginTop = '5px';\r\n                footerEl.style.paddingTop = '15px';\r\n                footerEl.style.borderTop = '1px solid #eee';\r\n                footerEl.style.fontSize = '8px';\r\n                footerEl.style.color = '#666';\r\n                footerEl.innerHTML = \"Sumber Data: bimasislam.kemenag.go.id &bull; <strong>www.yatimmandiri.org<\/strong>\";\r\n                tempContainer.appendChild(footerEl);\r\n\r\n                \/\/ Wrapper off-screen\r\n                const wrapper = document.createElement('div');\r\n                wrapper.className = 'js-widget-root'; \/\/ Inherit font\r\n                wrapper.style.position = 'absolute';\r\n                wrapper.style.left = '-9999px';\r\n                wrapper.style.top = '0';\r\n                wrapper.appendChild(tempContainer);\r\n                document.body.appendChild(wrapper);\r\n\r\n                \/\/ 4. Konfigurasi html2pdf\r\n                const opt = {\r\n                    margin:       [10, 0, 10, 0], \/\/ Margin atas\/bawah 10mm, kiri\/kanan 0 karena container sudah punya padding\r\n                    filename:     `Jadwal_Sholat_${monthYear.replace(\/\\s\/g, '_')}.pdf`,\r\n                    image:        { type: 'jpeg', quality: 1 }, \/\/ Kualitas max\r\n                    html2canvas:  { scale: 2, useCORS: true, scrollY: 0 },\r\n                    jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }\r\n                };\r\n\r\n                \/\/ 5. Generate\r\n                const originalText = btnPdf.innerHTML;\r\n                btnPdf.innerHTML = 'Downloading...';\r\n                \r\n                html2pdf().set(opt).from(tempContainer).save().then(() => {\r\n                    document.body.removeChild(wrapper);\r\n                    btnPdf.innerHTML = originalText;\r\n                }).catch(err => {\r\n                    console.error(err);\r\n                    if(document.body.contains(wrapper)) document.body.removeChild(wrapper);\r\n                    btnPdf.innerHTML = 'Error';\r\n                    setTimeout(() => btnPdf.innerHTML = originalText, 2000);\r\n                });\r\n            });\r\n        }\r\n\r\n        const regions = {\r\n            \"Aceh\": [\"Banda Aceh\", \"Langsa\", \"Lhokseumawe\", \"Sabang\", \"Subulussalam\", \"Aceh Barat\", \"Aceh Besar\", \"Aceh Jaya\", \"Aceh Selatan\", \"Aceh Singkil\", \"Aceh Tamiang\", \"Aceh Tengah\", \"Aceh Tenggara\", \"Aceh Timur\", \"Aceh Utara\", \"Bener Meriah\", \"Bireuen\", \"Gayo Lues\", \"Nagan Raya\", \"Pidie\", \"Pidie Jaya\", \"Simeulue\"],\r\n            \"Bali\": [\"Denpasar\", \"Badung\", \"Bangli\", \"Buleleng\", \"Gianyar\", \"Jembrana\", \"Karangasem\", \"Klungkung\", \"Tabanan\"],\r\n            \"Banten\": [\"Cilegon\", \"Serang\", \"Tangerang\", \"Tangerang Selatan\", \"Lebak\", \"Pandeglang\"],\r\n            \"Bengkulu\": [\"Bengkulu\", \"Bengkulu Selatan\", \"Bengkulu Tengah\", \"Bengkulu Utara\", \"Kaur\", \"Kepahiang\", \"Lebong\", \"Mukomuko\", \"Rejang Lebong\", \"Seluma\"],\r\n            \"DI Yogyakarta\": [\"Yogyakarta\", \"Bantul\", \"Gunungkidul\", \"Kulon Progo\", \"Sleman\"],\r\n            \"DKI Jakarta\": [\"Jakarta Barat\", \"Jakarta Pusat\", \"Jakarta Selatan\", \"Jakarta Timur\", \"Jakarta Utara\", \"Kepulauan Seribu\"],\r\n            \"Gorontalo\": [\"Gorontalo\", \"Boalemo\", \"Bone Bolango\", \"Gorontalo Utara\", \"Pohuwato\"],\r\n            \"Jambi\": [\"Jambi\", \"Sungai Penuh\", \"Batanghari\", \"Bungo\", \"Kerinci\", \"Merangin\", \"Muaro Jambi\", \"Sarolangun\", \"Tanjung Jabung Barat\", \"Tanjung Jabung Timur\", \"Tebo\"],\r\n            \"Jawa Barat\": [\"Bandung\", \"Banjar\", \"Bekasi\", \"Bogor\", \"Cimahi\", \"Cirebon\", \"Depok\", \"Sukabumi\", \"Tasikmalaya\", \"Ciamis\", \"Cianjur\", \"Garut\", \"Indramayu\", \"Karawang\", \"Kuningan\", \"Majalengka\", \"Pangandaran\", \"Purwakarta\", \"Subang\", \"Sumedang\"],\r\n            \"Jawa Tengah\": [\"Magelang\", \"Pekalongan\", \"Salatiga\", \"Semarang\", \"Surakarta\", \"Tegal\", \"Banjarnegara\", \"Banyumas\", \"Batang\", \"Blora\", \"Boyolali\", \"Brebes\", \"Cilacap\", \"Demak\", \"Grobogan\", \"Jepara\", \"Karanganyar\", \"Kebumen\", \"Kendal\", \"Klaten\", \"Kudus\", \"Pati\", \"Pemalang\", \"Purbalingga\", \"Purworejo\", \"Rembang\", \"Sragen\", \"Sukoharjo\", \"Temanggung\", \"Wonogiri\", \"Wonosobo\"],\r\n            \"Jawa Timur\": [\"Batu\", \"Blitar\", \"Kediri\", \"Madiun\", \"Malang\", \"Mojokerto\", \"Pasuruan\", \"Probolinggo\", \"Surabaya\", \"Bangkalan\", \"Banyuwangi\", \"Bojonegoro\", \"Bondowoso\", \"Gresik\", \"Jember\", \"Jombang\", \"Lamongan\", \"Lumajang\", \"Magetan\", \"Nganjuk\", \"Ngawi\", \"Pacitan\", \"Pamekasan\", \"Ponorogo\", \"Sampang\", \"Sidoarjo\", \"Situbondo\", \"Sumenep\", \"Trenggalek\", \"Tuban\", \"Tulungagung\"],\r\n            \"Kalimantan Barat\": [\"Pontianak\", \"Singkawang\", \"Bengkayang\", \"Kapuas Hulu\", \"Kayong Utara\", \"Ketapang\", \"Kubu Raya\", \"Landak\", \"Melawi\", \"Mempawah\", \"Sambas\", \"Sanggau\", \"Sekadau\", \"Sintang\"],\r\n            \"Kalimantan Selatan\": [\"Banjarbaru\", \"Banjarmasin\", \"Balangan\", \"Banjar\", \"Barito Kuala\", \"Hulu Sungai Selatan\", \"Hulu Sungai Tengah\", \"Hulu Sungai Utara\", \"Kotabaru\", \"Tabalong\", \"Tanah Bumbu\", \"Tanah Laut\", \"Tapin\"],\r\n            \"Kalimantan Tengah\": [\"Palangkaraya\", \"Barito Selatan\", \"Barito Timur\", \"Barito Utara\", \"Gunung Mas\", \"Kapuas\", \"Katingan\", \"Kotawaringin Barat\", \"Kotawaringin Timur\", \"Lamandau\", \"Murung Raya\", \"Pulang Pisau\", \"Seruyan\", \"Sukamara\"],\r\n            \"Kalimantan Timur\": [\"Balikpapan\", \"Bontang\", \"Samarinda\", \"Berau\", \"Kutai Barat\", \"Kutai Kartanegara\", \"Kutai Timur\", \"Mahakam Ulu\", \"Paser\", \"Penajam Paser Utara\"],\r\n            \"Kalimantan Utara\": [\"Tarakan\", \"Bulungan\", \"Malinau\", \"Nunukan\", \"Tana Tidung\"],\r\n            \"Kepulauan Bangka Belitung\": [\"Pangkalpinang\", \"Bangka\", \"Bangka Barat\", \"Bangka Selatan\", \"Bangka Tengah\", \"Belitung\", \"Belitung Timur\"],\r\n            \"Kepulauan Riau\": [\"Batam\", \"Tanjungpinang\", \"Bintan\", \"Karimun\", \"Kepulauan Anambas\", \"Lingga\", \"Natuna\"],\r\n            \"Lampung\": [\"Bandar Lampung\", \"Metro\", \"Lampung Barat\", \"Lampung Selatan\", \"Lampung Tengah\", \"Lampung Timur\", \"Lampung Utara\", \"Mesuji\", \"Pesawaran\", \"Pesisir Barat\", \"Pringsewu\", \"Tanggamus\", \"Tulang Bawang\", \"Tulang Bawang Barat\", \"Way Kanan\"],\r\n            \"Maluku\": [\"Ambon\", \"Tual\", \"Buru\", \"Buru Selatan\", \"Kepulauan Aru\", \"Maluku Barat Daya\", \"Maluku Tengah\", \"Maluku Tenggara\", \"Maluku Tenggara Barat\", \"Seram Bagian Barat\", \"Seram Bagian Timur\"],\r\n            \"Maluku Utara\": [\"Ternate\", \"Tidore Kepulauan\", \"Halmahera Barat\", \"Halmahera Tengah\", \"Halmahera Timur\", \"Halmahera Selatan\", \"Halmahera Utara\", \"Kepulauan Sula\", \"Pulau Morotai\", \"Pulau Taliabu\"],\r\n            \"Nusa Tenggara Barat\": [\"Bima\", \"Mataram\", \"Dompu\", \"Lombok Barat\", \"Lombok Tengah\", \"Lombok Timur\", \"Lombok Utara\", \"Sumbawa\", \"Sumbawa Barat\"],\r\n            \"Nusa Tenggara Timur\": [\"Kupang\", \"Alor\", \"Belu\", \"Ende\", \"Flores Timur\", \"Lembata\", \"Malaka\", \"Manggarai\", \"Manggarai Barat\", \"Manggarai Timur\", \"Nagekeo\", \"Ngada\", \"Rote Ndao\", \"Sabu Raijua\", \"Sikka\", \"Sumba Barat\", \"Sumba Barat Daya\", \"Sumba Tengah\", \"Sumba Timur\", \"Timor Tengah Selatan\", \"Timor Tengah Utara\"],\r\n            \"Papua\": [\"Jayapura\", \"Biak Numfor\", \"Keerom\", \"Kepulauan Yapen\", \"Mamberamo Raya\", \"Sarmi\", \"Supiori\", \"Waropen\"],\r\n            \"Papua Barat\": [\"Fakfak\", \"Kaimana\", \"Manokwari\", \"Manokwari Selatan\", \"Pegunungan Arfak\", \"Teluk Bintuni\", \"Teluk Wondama\"],\r\n            \"Papua Barat Daya\": [\"Sorong\", \"Maybrat\", \"Raja Ampat\", \"Tambrauw\"],\r\n            \"Papua Pegunungan\": [\"Jayawijaya\", \"Lanny Jaya\", \"Mamberamo Tengah\", \"Nduga\", \"Pegunungan Bintang\", \"Tolikara\", \"Yahukimo\", \"Yalimo\"],\r\n            \"Papua Selatan\": [\"Merauke\", \"Asmat\", \"Boven Digoel\", \"Mappi\"],\r\n            \"Papua Tengah\": [\"Nabire\", \"Deiyai\", \"Dogiyai\", \"Intan Jaya\", \"Mimika\", \"Paniai\", \"Puncak\", \"Puncak Jaya\"],\r\n            \"Riau\": [\"Dumai\", \"Pekanbaru\", \"Bengkalis\", \"Indragiri Hilir\", \"Indragiri Hulu\", \"Kampar\", \"Kepulauan Meranti\", \"Kuantan Singingi\", \"Pelalawan\", \"Rokan Hilir\", \"Rokan Hulu\", \"Siak\"],\r\n            \"Sulawesi Barat\": [\"Majene\", \"Mamasa\", \"Mamuju\", \"Mamuju Tengah\", \"Mamuju Utara\", \"Polewali Mandar\"],\r\n            \"Sulawesi Selatan\": [\"Makassar\", \"Palopo\", \"Parepare\", \"Bantaeng\", \"Barru\", \"Bone\", \"Bulukumba\", \"Enrekang\", \"Gowa\", \"Jeneponto\", \"Kepulauan Selayar\", \"Luwu\", \"Luwu Timur\", \"Luwu Utara\", \"Maros\", \"Pangkajene dan Kepulauan\", \"Pinrang\", \"Sidenreng Rappang\", \"Sinjai\", \"Soppeng\", \"Takalar\", \"Tana Toraja\", \"Toraja Utara\", \"Wajo\"],\r\n            \"Sulawesi Tengah\": [\"Palu\", \"Banggai\", \"Banggai Kepulauan\", \"Banggai Laut\", \"Buol\", \"Donggala\", \"Morowali\", \"Morowali Utara\", \"Parigi Moutong\", \"Poso\", \"Sigi\", \"Tojo Una-Una\", \"Toli-Toli\"],\r\n            \"Sulawesi Tenggara\": [\"Baubau\", \"Kendari\", \"Bombana\", \"Buton\", \"Buton Selatan\", \"Buton Tengah\", \"Buton Utara\", \"Kolaka\", \"Kolaka Timur\", \"Kolaka Utara\", \"Konawe\", \"Konawe Kepulauan\", \"Konawe Selatan\", \"Konawe Utara\", \"Muna\", \"Muna Barat\", \"Wakatobi\"],\r\n            \"Sulawesi Utara\": [\"Bitung\", \"Kotamobagu\", \"Manado\", \"Tomohon\", \"Bolaang Mongondow\", \"Bolaang Mongondow Selatan\", \"Bolaang Mongondow Timur\", \"Bolaang Mongondow Utara\", \"Kepulauan Sangihe\", \"Kepulauan Siau Tagulandang Biaro\", \"Kepulauan Talaud\", \"Minahasa\", \"Minahasa Selatan\", \"Minahasa Tenggara\", \"Minahasa Utara\"],\r\n            \"Sumatera Barat\": [\"Bukittinggi\", \"Padang\", \"Padangpanjang\", \"Pariaman\", \"Payakumbuh\", \"Sawahlunto\", \"Solok\", \"Agam\", \"Dharmasraya\", \"Kepulauan Mentawai\", \"Lima Puluh Kota\", \"Padang Pariaman\", \"Pasaman\", \"Pasaman Barat\", \"Pesisir Selatan\", \"Sijunjung\", \"Solok Selatan\", \"Tanah Datar\"],\r\n            \"Sumatera Selatan\": [\"Lubuklinggau\", \"Pagar Alam\", \"Palembang\", \"Prabumulih\", \"Banyuasin\", \"Empat Lawang\", \"Lahat\", \"Muara Enim\", \"Musi Banyuasin\", \"Musi Rawas\", \"Musi Rawas Utara\", \"Ogan Ilir\", \"Ogan Komering Ilir\", \"Ogan Komering Ulu\", \"Ogan Komering Ulu Selatan\", \"Ogan Komering Ulu Timur\", \"Penukal Abab Lematang Ilir\"],\r\n            \"Sumatera Utara\": [\"Binjai\", \"Gunungsitoli\", \"Medan\", \"Padangsidimpuan\", \"Pematangsiantar\", \"Sibolga\", \"Tanjungbalai\", \"Tebing Tinggi\", \"Asahan\", \"Batubara\", \"Dairi\", \"Deli Serdang\", \"Humbang Hasundutan\", \"Karo\", \"Labuhanbatu\", \"Labuhanbatu Selatan\", \"Labuhanbatu Utara\", \"Langkat\", \"Mandailing Natal\", \"Nias\", \"Nias Barat\", \"Nias Selatan\", \"Nias Utara\", \"Padang Lawas\", \"Padang Lawas Utara\", \"Pakpak Bharat\", \"Samosir\", \"Serdang Bedagai\", \"Simalungun\", \"Tapanuli Selatan\", \"Tapanuli Tengah\", \"Tapanuli Utara\", \"Toba Samosir\"]\r\n        };\r\n\r\n        const sortedProvinces = Object.keys(regions).sort();\r\n        sortedProvinces.forEach(prov => {\r\n            const option = document.createElement('option');\r\n            option.value = prov;\r\n            option.textContent = prov;\r\n            provinceSelect.appendChild(option);\r\n        });\r\n\r\n        provinceSelect.addEventListener('change', function() {\r\n            const selectedProv = this.value;\r\n            citySelect.innerHTML = '<option value=\"\">-- Pilih Kota \/ Kabupaten --<\/option>';\r\n            citySelect.disabled = true;\r\n\r\n            if (selectedProv && regions[selectedProv]) {\r\n                const citiesInProv = regions[selectedProv].sort();\r\n                citiesInProv.forEach(city => {\r\n                    const option = document.createElement('option');\r\n                    option.value = city;\r\n                    option.textContent = city;\r\n                    citySelect.appendChild(option);\r\n                });\r\n                citySelect.disabled = false;\r\n            }\r\n        });\r\n\r\n        citySelect.addEventListener('change', function() {\r\n            const selectedCity = this.value;\r\n            if (selectedCity) {\r\n                fetchPrayer(selectedCity);\r\n            }\r\n        });\r\n\r\n        const savedName = localStorage.getItem('ym_sholat_name_aladhan') || 'Surabaya';\r\n        fetchPrayer(savedName);\r\n\r\n        function fetchPrayer(cityName) {\r\n            loader.style.display = 'block';\r\n            container.style.opacity = '0.3';\r\n            countdownBox.style.display = 'none';\r\n            if(timerInterval) clearInterval(timerInterval);\r\n\r\n            let cleanName = cityName.replace('KOTA ', '').replace('KAB. ', '');\r\n            cityNameText.innerText = 'Jadwal ' + cleanName;\r\n            \r\n            localStorage.setItem('ym_sholat_name_aladhan', cleanName);\r\n\r\n            const year = now.getFullYear();\r\n            const month = now.getMonth() + 1;\r\n            const currentDay = now.getDate(); \r\n\r\n            \/\/ 1. Hijriah\r\n            const dStr = String(currentDay).padStart(2, '0');\r\n            const mStr = String(month).padStart(2, '0');\r\n            fetch(`https:\/\/api.aladhan.com\/v1\/gToH\/${dStr}-${mStr}-${year}`)\r\n                .then(r => r.json())\r\n                .then(data => {\r\n                    if(data && data.data && data.data.hijri) {\r\n                        const h = data.data.hijri;\r\n                        hijriText.innerText = `${h.day} ${h.month.en} ${h.year} H`;\r\n                    }\r\n                })\r\n                .catch(() => { hijriText.innerText = \"-\"; });\r\n\r\n            \/\/ 2. Prayer Times\r\n            fetch(`https:\/\/api.aladhan.com\/v1\/calendarByCity\/${year}\/${month}?city=${cleanName}&country=Indonesia&method=20`)\r\n                .then(r => r.json())\r\n                .then(res => {\r\n                    loader.style.display = 'none';\r\n                    container.style.opacity = '1';\r\n                    \r\n                    if (res.code === 200 && res.data) {\r\n                        const jadwalBulanan = res.data;\r\n                        const todayData = jadwalBulanan[currentDay - 1]; \r\n\r\n                        if(todayData) {\r\n                            startCountdown(todayData.timings);\r\n                            \r\n                            \/\/ --- POPULATE TODAY'S CARDS ---\r\n                            const t = todayData.timings;\r\n                            const clean = (timeStr) => timeStr.split(' ')[0];\r\n                            \r\n                            document.getElementById('js-card-subuh').innerText = clean(t.Fajr);\r\n                            document.getElementById('js-card-terbit').innerText = clean(t.Sunrise);\r\n                            document.getElementById('js-card-dzuhur').innerText = clean(t.Dhuhr);\r\n                            document.getElementById('js-card-ashar').innerText = clean(t.Asr);\r\n                            document.getElementById('js-card-maghrib').innerText = clean(t.Maghrib);\r\n                            document.getElementById('js-card-isya').innerText = clean(t.Isha);\r\n                        }\r\n\r\n                        let html = `\r\n                        <div class=\"js-table-wrapper\">\r\n                            <table class=\"js-table\">\r\n                                <thead>\r\n                                    <tr>\r\n                                        <th>Tanggal<\/th>\r\n                                        <th>Hari<\/th>\r\n                                        <th>Subuh<\/th>\r\n                                        <th>Terbit\/Fajr<\/th>\r\n                                        <th>Dzuhur<\/th>\r\n                                        <th>Ashar<\/th>\r\n                                        <th>Maghrib<\/th>\r\n                                        <th>Isya<\/th>\r\n                                    <\/tr>\r\n                                <\/thead>\r\n                                <tbody>`;\r\n                        \r\n                        jadwalBulanan.forEach((dayData, index) => {\r\n                            const dayNumber = index + 1;\r\n                            const t = dayData.timings;\r\n                            const dateObj = new Date(year, month - 1, dayNumber);\r\n                            const dayName = dateObj.toLocaleDateString('id-ID', { weekday: 'long' });\r\n                            const cleanTime = (timeStr) => timeStr.split(' ')[0];\r\n                            const isToday = dayNumber === currentDay;\r\n                            const rowClass = isToday ? 'today-row' : '';\r\n\r\n                            html += `\r\n                                <tr class=\"js-row ${rowClass}\">\r\n                                    <td>${dayNumber}<\/td>\r\n                                    <td>${dayName}<\/td>\r\n                                    <td>${cleanTime(t.Fajr)}<\/td>\r\n                                    <td>${cleanTime(t.Sunrise)}<\/td>\r\n                                    <td>${cleanTime(t.Dhuhr)}<\/td>\r\n                                    <td>${cleanTime(t.Asr)}<\/td>\r\n                                    <td>${cleanTime(t.Maghrib)}<\/td>\r\n                                    <td>${cleanTime(t.Isha)}<\/td>\r\n                                <\/tr>`;\r\n                        });\r\n\r\n                        html += `<\/tbody><\/table><\/div>`;\r\n                        container.innerHTML = html;\r\n                        \r\n                    } else {\r\n                        container.innerHTML = '<p style=\"text-align:center; color:red; padding:20px;\">Kota tidak ditemukan di database Aladhan.<\/p>';\r\n                    }\r\n                })\r\n                .catch(() => {\r\n                    loader.style.display = 'none';\r\n                    container.innerHTML = '<p style=\"text-align:center; color:red; padding:20px;\">Gagal koneksi server.<\/p>';\r\n                });\r\n        }\r\n\r\n        function startCountdown(timings) {\r\n            const clean = (t) => t.substring(0, 5);\r\n            const prayers = [\r\n                {name: 'Subuh', time: clean(timings.Fajr)},\r\n                {name: 'Terbit', time: clean(timings.Sunrise)},\r\n                {name: 'Dzuhur', time: clean(timings.Dhuhr)},\r\n                {name: 'Ashar', time: clean(timings.Asr)},\r\n                {name: 'Maghrib', time: clean(timings.Maghrib)},\r\n                {name: 'Isya', time: clean(timings.Isha)}\r\n            ];\r\n\r\n            function updateTimer() {\r\n                const nowTime = new Date();\r\n                const currentStr = nowTime.getHours().toString().padStart(2,'0') + ':' + nowTime.getMinutes().toString().padStart(2,'0');\r\n                let nextPrayer = prayers.find(p => p.time > currentStr);\r\n                \r\n                \/\/ Reset active classes\r\n                document.querySelectorAll('.js-stat-card').forEach(el => el.classList.remove('active'));\r\n\r\n                if (!nextPrayer) {\r\n                    countdownBox.innerHTML = 'Jadwal Hari Ini Selesai';\r\n                    countdownBox.style.display = 'inline-flex';\r\n                    return;\r\n                }\r\n\r\n                \/\/ Highlight Active Card\r\n                const cardId = 'card-' + nextPrayer.name.toLowerCase();\r\n                const activeCard = document.getElementById(cardId);\r\n                if(activeCard) activeCard.classList.add('active');\r\n\r\n                const [h, m] = nextPrayer.time.split(':');\r\n                const targetTime = new Date();\r\n                targetTime.setHours(h, m, 0, 0);\r\n                \r\n                const diff = targetTime - nowTime;\r\n                if (diff < 0) return; \r\n\r\n                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) \/ (1000 * 60 * 60));\r\n                const minutes = Math.floor((diff % (1000 * 60 * 60)) \/ (1000 * 60));\r\n                const seconds = Math.floor((diff % (1000 * 60)) \/ 1000);\r\n\r\n                countdownBox.innerHTML = `<span class=\"js-countdown-label\">Menuju ${nextPrayer.name}:<\/span> ${hours.toString().padStart(2,'0')}:${minutes.toString().padStart(2,'0')}:${seconds.toString().padStart(2,'0')}`;\r\n                countdownBox.style.display = 'inline-flex';\r\n            }\r\n\r\n            updateTimer(); \r\n            timerInterval = setInterval(updateTimer, 1000);\r\n        }\r\n    });\r\n    <\/script>\r\n    <\/div>\n\t\t\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>Jadwal Sholat Lengkap di Indonesia Temukan Jadwal Sholat Subuh, Dzuhur, Ashar, Maghrib, dan Isya secara realtime untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Waktu dapat berbeda tergantung wilayah masing-masing. Temukan Jadwal Sholat Subuh, Dzuhur, Ashar, Maghrib, dan Isya secara realtime untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Waktu dapat berbeda tergantung &#8230; <a title=\"Jadwal Sholat Lengkap di Indonesia Hari Ini\" class=\"read-more\" href=\"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/\" aria-label=\"Baca selengkapnya tentang Jadwal Sholat Lengkap di Indonesia Hari Ini\">Baca Selengkapnya<\/a><\/p>\n","protected":false},"author":9,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10765","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia<\/title>\n<meta name=\"description\" content=\"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia\" \/>\n<meta property=\"og:description\" content=\"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/\" \/>\n<meta property=\"og:site_name\" content=\"Yatim Mandiri\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/yatim.mandiri\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-02T07:42:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/yatimmandiri.org\/blog\/wp-content\/uploads\/2022\/10\/Yatim-Mandiri-Blog-e1665991205922.png\" \/>\n\t<meta property=\"og:image:width\" content=\"300\" \/>\n\t<meta property=\"og:image:height\" content=\"52\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@yatimmandiri\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/jadwal-sholat\\\/\",\"url\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/jadwal-sholat\\\/\",\"name\":\"Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#website\"},\"datePublished\":\"2026-01-30T02:23:33+00:00\",\"dateModified\":\"2026-02-02T07:42:22+00:00\",\"description\":\"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/jadwal-sholat\\\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/jadwal-sholat\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/jadwal-sholat\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Beranda\",\"item\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jadwal Sholat Lengkap di Indonesia Hari Ini\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/\",\"name\":\"Yatim Mandiri Blog\",\"description\":\"Belajar Zakat, Infak, Sedekah, Wakaf &amp; Keislaman\",\"publisher\":{\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#organization\"},\"alternateName\":\"Yatim Mandiri\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#organization\",\"name\":\"Yayasan Yatim Mandiri\",\"alternateName\":\"Yatim Mandiri\",\"url\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Logo-YM.jpg\",\"contentUrl\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/08\\\/Logo-YM.jpg\",\"width\":640,\"height\":360,\"caption\":\"Yayasan Yatim Mandiri\"},\"image\":{\"@id\":\"https:\\\/\\\/yatimmandiri.org\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/yatim.mandiri\\\/\",\"https:\\\/\\\/x.com\\\/yatimmandiri\",\"https:\\\/\\\/www.instagram.com\\\/yatimmandiri\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/yatimmandiri\\\/\",\"https:\\\/\\\/www.tiktok.com\\\/@yatimmandiri\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia","description":"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/","og_locale":"id_ID","og_type":"article","og_title":"Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia","og_description":"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!","og_url":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/","og_site_name":"Yatim Mandiri","article_publisher":"https:\/\/www.facebook.com\/yatim.mandiri\/","article_modified_time":"2026-02-02T07:42:22+00:00","og_image":[{"width":300,"height":52,"url":"https:\/\/yatimmandiri.org\/blog\/wp-content\/uploads\/2022\/10\/Yatim-Mandiri-Blog-e1665991205922.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@yatimmandiri","twitter_misc":{"Estimasi waktu membaca":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/","url":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/","name":"Cek! Jadwal Sholat Lengkap di 470 Kota 38 Provinsi di Indonesia","isPartOf":{"@id":"https:\/\/yatimmandiri.org\/blog\/#website"},"datePublished":"2026-01-30T02:23:33+00:00","dateModified":"2026-02-02T07:42:22+00:00","description":"Temukan Jadwal Sholat hari ini untuk 470 kota dari 38 provinsi di Seluruh Indonesia. Pastikan sholat tepat waktu, jangan salah waktu!","breadcrumb":{"@id":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/yatimmandiri.org\/blog\/jadwal-sholat\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Beranda","item":"https:\/\/yatimmandiri.org\/blog\/"},{"@type":"ListItem","position":2,"name":"Jadwal Sholat Lengkap di Indonesia Hari Ini"}]},{"@type":"WebSite","@id":"https:\/\/yatimmandiri.org\/blog\/#website","url":"https:\/\/yatimmandiri.org\/blog\/","name":"Yatim Mandiri Blog","description":"Belajar Zakat, Infak, Sedekah, Wakaf &amp; Keislaman","publisher":{"@id":"https:\/\/yatimmandiri.org\/blog\/#organization"},"alternateName":"Yatim Mandiri","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yatimmandiri.org\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/yatimmandiri.org\/blog\/#organization","name":"Yayasan Yatim Mandiri","alternateName":"Yatim Mandiri","url":"https:\/\/yatimmandiri.org\/blog\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/yatimmandiri.org\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/yatimmandiri.org\/blog\/wp-content\/uploads\/2022\/08\/Logo-YM.jpg","contentUrl":"https:\/\/yatimmandiri.org\/blog\/wp-content\/uploads\/2022\/08\/Logo-YM.jpg","width":640,"height":360,"caption":"Yayasan Yatim Mandiri"},"image":{"@id":"https:\/\/yatimmandiri.org\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/yatim.mandiri\/","https:\/\/x.com\/yatimmandiri","https:\/\/www.instagram.com\/yatimmandiri\/","https:\/\/www.linkedin.com\/company\/yatimmandiri\/","https:\/\/www.tiktok.com\/@yatimmandiri"]}]}},"_links":{"self":[{"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/pages\/10765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/comments?post=10765"}],"version-history":[{"count":92,"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/pages\/10765\/revisions"}],"predecessor-version":[{"id":10890,"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/pages\/10765\/revisions\/10890"}],"wp:attachment":[{"href":"https:\/\/yatimmandiri.org\/blog\/wp-json\/wp\/v2\/media?parent=10765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}