{"id":150,"date":"2025-07-13T23:57:23","date_gmt":"2025-07-14T06:57:23","guid":{"rendered":"https:\/\/tegis.my.id\/?page_id=150"},"modified":"2025-07-18T05:20:20","modified_gmt":"2025-07-18T12:20:20","slug":"jadwal","status":"publish","type":"page","link":"https:\/\/tegis.my.id\/index.php\/jadwal\/","title":{"rendered":"Jadwal"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Pengecek Jadwal Keberangkatan Umroh<\/title>\r\n <!-- Tailwind CSS CDN -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f0f2f5; \/* Soft background color *\/\r\n }\r\n \/* Additional styles for poster images *\/\r\n .poster-container {\r\n display: flex;\r\n flex-wrap: wrap; \/* Allows images to wrap to the next line *\/\r\n gap: 1rem; \/* Space between images *\/\r\n justify-content: center; \/* Center images if there are multiple *\/\r\n margin-top: 1rem;\r\n }\r\n .poster-item {\r\n flex: 1 1 calc(50% - 0.5rem); \/* For 2 columns on wider screens, or 100% on small screens *\/\r\n min-width: 150px; \/* Minimum width to prevent images from becoming too small *\/\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n border-radius: 0.5rem;\r\n overflow: hidden; \/* Ensures rounded corners apply to image *\/\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); \/* shadow-md *\/\r\n background-color: #fff;\r\n padding-bottom: 0.5rem; \/* Space for caption *\/\r\n }\r\n .poster-image {\r\n max-width: 100%;\r\n height: auto;\r\n border-radius: 0.5rem 0.5rem 0 0; \/* Rounded top corners *\/\r\n cursor: pointer; \/* Indicate clickable *\/\r\n transition: transform 0.2s ease-in-out;\r\n }\r\n .poster-image:hover {\r\n transform: scale(1.02); \/* Slight zoom on hover *\/\r\n }\r\n .poster-caption {\r\n font-size: 0.875rem; \/* text-sm *\/\r\n color: #4a5568; \/* gray-700 *\/\r\n margin-top: 0.5rem;\r\n padding: 0 0.5rem;\r\n }\r\n\r\n \/* Responsive for smaller screens *\/\r\n @media (min-width: 640px) {\r\n .poster-item {\r\n flex: 1 1 calc(33.33% - 0.66rem); \/* For 3 columns on medium screens *\/\r\n }\r\n }\r\n @media (min-width: 768px) {\r\n .poster-item {\r\n flex: 1 1 calc(25% - 0.75rem); \/* For 4 columns on desktop *\/\r\n }\r\n }\r\n @media (min-width: 1024px) {\r\n .poster-item {\r\n flex: 1 1 calc(20% - 0.8rem); \/* For 5 columns on large screens *\/\r\n }\r\n }\r\n\r\n \/* Lightbox styles *\/\r\n .lightbox-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.8);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 1000;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\r\n }\r\n .lightbox-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n .lightbox-content {\r\n background-color: #fff;\r\n padding: 1.5rem;\r\n border-radius: 0.75rem; \/* rounded-xl *\/\r\n box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);\r\n max-width: 90%;\r\n max-height: 90%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n position: relative;\r\n }\r\n .lightbox-image {\r\n max-width: 100%;\r\n max-height: 70vh; \/* Limit height to prevent overflow on smaller screens *\/\r\n width: auto; \/* Allow width to adjust based on height *\/\r\n object-fit: contain; \/* Ensure image fits without cropping *\/\r\n border-radius: 0.5rem;\r\n }\r\n .lightbox-caption {\r\n margin-top: 1rem;\r\n font-size: 1rem; \/* text-base *\/\r\n color: #374151; \/* gray-700 *\/\r\n text-align: center;\r\n max-width: 100%;\r\n overflow-wrap: break-word; \/* Ensures long text wraps *\/\r\n }\r\n .lightbox-close {\r\n position: absolute;\r\n top: 0.75rem;\r\n right: 0.75rem;\r\n background: none;\r\n border: none;\r\n font-size: 1.5rem;\r\n color: #ef4444; \/* red-500 *\/\r\n cursor: pointer;\r\n padding: 0.5rem;\r\n border-radius: 50%;\r\n transition: background-color 0.2s ease-in-out;\r\n }\r\n .lightbox-close:hover {\r\n background-color: #fecaca; \/* red-100 *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"flex items-center justify-center min-h-screen p-4\">\r\n <div class=\"bg-white p-8 rounded-xl shadow-lg w-full max-w-md\">\r\n <h2 class=\"text-3xl font-bold text-center text-gray-800 mb-8\">Cek Jadwal Keberangkatan Umroh<\/h2>\r\n\r\n <!-- Bagian Pemilihan Bulan dan Tahun -->\r\n <div class=\"mb-6 grid grid-cols-2 gap-4\">\r\n <div>\r\n <label for=\"month-select\" class=\"block text-gray-700 text-lg font-medium mb-2\">Pilih Bulan:<\/label>\r\n <select id=\"month-select\"\r\n class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out text-gray-800\">\r\n <!-- Month options will be populated by JavaScript -->\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"year-select\" class=\"block text-gray-700 text-lg font-medium mb-2\">Pilih Tahun:<\/label>\r\n <select id=\"year-select\"\r\n class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out text-gray-800\">\r\n <!-- Year options will be populated by JavaScript -->\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bagian Pemilihan Paket Umroh -->\r\n <div class=\"mb-8\">\r\n <label for=\"package-select\" class=\"block text-gray-700 text-lg font-medium mb-2\">Pilih Paket:<\/label>\r\n <select id=\"package-select\"\r\n class=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200 ease-in-out text-gray-800\">\r\n <!-- Package options will be populated by JavaScript -->\r\n <\/select>\r\n <\/div>\r\n\r\n <!-- Tombol Cari Jadwal -->\r\n <button id=\"search-button\"\r\n class=\"w-full bg-blue-600 text-white py-3 rounded-lg font-semibold text-lg hover:bg-blue-700 transition duration-300 ease-in-out shadow-md\">\r\n Cari Jadwal\r\n <\/button>\r\n\r\n <!-- Area Hasil Pencarian -->\r\n <div id=\"result-box\" class=\"mt-6 p-4 rounded-lg hidden\">\r\n <!-- Results, details, and posters will be displayed here -->\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Lightbox Overlay -->\r\n <div id=\"lightbox-overlay\" class=\"lightbox-overlay\">\r\n <div class=\"lightbox-content\">\r\n <button id=\"lightbox-close\" class=\"lightbox-close\">×<\/button>\r\n <img decoding=\"async\" id=\"lightbox-image\" class=\"lightbox-image\" src=\"\" alt=\"Enlarged Umroh Poster\">\r\n <p id=\"lightbox-caption\" class=\"lightbox-caption\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Get DOM elements\r\n const monthSelect = document.getElementById('month-select');\r\n const yearSelect = document.getElementById('year-select');\r\n const packageSelect = document.getElementById('package-select');\r\n const searchButton = document.getElementById('search-button');\r\n const resultBox = document.getElementById('result-box');\r\n\r\n \/\/ Lightbox elements\r\n const lightboxOverlay = document.getElementById('lightbox-overlay');\r\n const lightboxImage = document.getElementById('lightbox-image');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n const lightboxCloseButton = document.getElementById('lightbox-close');\r\n\r\n \/\/ Available Umroh departure schedules (YYYY-MM)\r\n \/\/ Each entry is an object with 'monthYear' and 'packages' (array of objects)\r\n const availableSchedules = [\r\n {\r\n monthYear: \"2025-08\", \/\/ August 2025\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina 10 Hari\",\r\n \"Fokus ibadah di Mina\",\r\n \"Harga mulai Rp 30.000.000\",\r\n \"Maskapai: Saudia Airlines\",\r\n \"Pembimbing: Ustadz Khalid\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Agustus+Mina+1\", caption: \"Poster Paket Mina Agustus 2025 - Pemandangan Tenda Mina\" },\r\n { url: \"https:\/\/tegis.my.id\/wp-content\/uploads\/2025\/07\/WhatsApp-Image-2025-07-03-at-20.21.28-1.jpeg\", caption: \"Poster Paket Mina Agustus 2025 - Fasilitas Hotel\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=Agustus+Mina+2\", caption: \"Poster Paket Mina Agustus 2025 - Rute Perjalanan\" }\r\n ],\r\n description: \"Paket ini dirancang khusus untuk jamaah yang ingin mendalami ibadah di Mina dengan fasilitas yang nyaman.\"\r\n },\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah 10 Hari\",\r\n \"Fokus ibadah di Arafah\",\r\n \"Harga mulai Rp 32.000.000\",\r\n \"Maskapai: Emirates\",\r\n \"Pembimbing: Ustadz Yusuf\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Agustus+Arafah+1\", caption: \"Poster Paket Arafah Agustus 2025 - Jabal Rahmah\" }\r\n ],\r\n description: \"Nikmati pengalaman spiritual di Arafah dengan bimbingan terbaik dan akomodasi yang memadai.\"\r\n },\r\n {\r\n name: \"Muzdalifah\",\r\n details: [\r\n \"Paket Umroh Plus Muzdalifah 10 Hari\",\r\n \"Fokus ibadah di Muzdalifah\",\r\n \"Harga mulai Rp 33.000.000\",\r\n \"Maskapai: Qatar Airways\",\r\n \"Pembimbing: Ustadzah Fatimah\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Agustus+Muzdalifah+1\", caption: \"Poster Paket Muzdalifah Agustus 2025 - Pemandangan Muzdalifah\" }\r\n ],\r\n description: \"Paket ini menawarkan pengalaman beribadah yang mendalam di Muzdalifah, cocok untuk Anda yang mencari kekhusyukan.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2025-09\", \/\/ September 2025\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina 9 Hari\",\r\n \"Fokus ibadah di Mina\",\r\n \"Harga mulai Rp 28.000.000\",\r\n \"Maskapai: Garuda Indonesia\",\r\n \"Pembimbing: Ustadz Amir\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=September+Mina+1\", caption: \"Poster Paket Mina September 2025 - Suasana Ibadah\" }\r\n ],\r\n description: \"Pilihan ekonomis untuk pengalaman Mina yang berkesan di bulan September.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2025-10\", \/\/ October 2025\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina 10 Hari\",\r\n \"Fokus ibadah di Mina\",\r\n \"Harga mulai Rp 38.000.000\",\r\n \"Maskapai: Emirates\",\r\n \"Pembimbing: Ustadzah Siti\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=Oktober+Mina+1\", caption: \"Poster Paket Mina Oktober 2025 - Pemandangan Mekkah\" }\r\n ],\r\n description: \"Paket premium untuk ibadah Mina di bulan Oktober dengan fasilitas terbaik.\"\r\n },\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah 11 Hari\",\r\n \"Fokus ibadah di Arafah\",\r\n \"Harga mulai Rp 39.500.000\",\r\n \"Maskapai: Turkish Airlines\",\r\n \"Pembimbing: Ustadz Budi\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Oktober+Arafah+1\", caption: \"Poster Paket Arafah Oktober 2025 - Momen Doa di Arafah\" }\r\n ],\r\n description: \"Perjalanan spiritual yang lebih panjang untuk merasakan kekhusyukan di Arafah.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2025-11\", \/\/ November 2025\r\n packages: [\r\n {\r\n name: \"Muzdalifah\",\r\n details: [\r\n \"Paket Umroh Plus Muzdalifah 10 Hari\",\r\n \"Fokus ibadah di Muzdalifah\",\r\n \"Harga mulai Rp 31.000.000\",\r\n \"Maskapai: Saudia Airlines\",\r\n \"Pembimbing: Ustadz Hasan\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=November+Muzdalifah+1\", caption: \"Poster Paket Muzdalifah November 2025 - Persiapan di Muzdalifah\" }\r\n ],\r\n description: \"Nikmati ketenangan beribadah di Muzdalifah pada bulan November yang sejuk.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2025-12\", \/\/ December 2025\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina Akhir Tahun 10 Hari\",\r\n \"Harga mulai Rp 35.000.000\",\r\n \"Maskapai: Emirates\",\r\n \"Pembimbing: Ustadzah Siti\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Desember+Mina+1\", caption: \"Poster Paket Mina Desember 2025 - Perayaan Akhir Tahun\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Desember+Mina+2\", caption: \"Poster Paket Mina Desember 2025 - Pemandangan Kabah\" }\r\n ],\r\n description: \"Rayakan akhir tahun dengan ibadah di Mina, pengalaman yang tak terlupakan.\"\r\n },\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah Tahun Baru 12 Hari\",\r\n \"Pengalaman spiritual di Arafah\",\r\n \"Harga mulai Rp 45.000.000\",\r\n \"Maskapai: Qatar Airways\",\r\n \"Pembimbing: Ustadz Adam\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=Desember+Arafah+1\", caption: \"Poster Paket Arafah Desember 2025 - Doa Tahun Baru\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Desember+Arafah+2\", caption: \"Poster Paket Arafah Desember 2025 - Kebersamaan Jamaah\" }\r\n ],\r\n description: \"Awali tahun baru dengan perjalanan suci ke Arafah, penuh berkah dan makna.\"\r\n },\r\n {\r\n name: \"Muzdalifah\",\r\n details: [\r\n \"Paket Umroh Plus Muzdalifah Akhir Tahun 11 Hari\",\r\n \"Harga mulai Rp 42.000.000\",\r\n \"Maskapai: Saudia Airlines\",\r\n \"Pembimbing: Ustadz Budi\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Desember+Muzdalifah+1\", caption: \"Poster Paket Muzdalifah Desember 2025 - Persiapan Wukuf\" }\r\n ],\r\n description: \"Paket spesial akhir tahun untuk ibadah di Muzdalifah, dengan kenyamanan ekstra.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-01\", \/\/ January 2026\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina Awal Tahun 9 Hari\",\r\n \"Harga mulai Rp 29.000.000\",\r\n \"Maskapai: Garuda Indonesia\",\r\n \"Pembimbing: Ustadz Ridwan\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=Januari+Mina+1\", caption: \"Poster Paket Mina Januari 2026 - Awal Tahun di Tanah Suci\" }\r\n ],\r\n description: \"Mulai tahun dengan niat suci di Mina, paket yang cocok untuk awal tahun.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-02\", \/\/ February 2026\r\n packages: [\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah Februari Ceria 8 Hari\",\r\n \"Harga mulai Rp 27.000.000\",\r\n \"Maskapai: Lion Air\",\r\n \"Pembimbing: Ustadz Yusuf\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Februari+Arafah+1\", caption: \"Poster Paket Arafah Februari 2026 - Pemandangan Jabal Rahmah\" }\r\n ],\r\n description: \"Paket singkat namun berkesan untuk ibadah di Arafah di bulan Februari.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-03\", \/\/ March 2026\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina Ramadhan Awal 10 Hari\",\r\n \"Harga mulai Rp 40.000.000\",\r\n \"Maskapai: Qatar Airways\",\r\n \"Pembimbing: Ustadz Abdul\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Maret+Mina+1\", caption: \"Poster Paket Mina Maret 2026 - Suasana Ramadhan di Mina\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Maret+Mina+2\", caption: \"Poster Paket Mina Maret 2026 - Persiapan Ibadah\" }\r\n ],\r\n description: \"Rasakan berkah Ramadhan di Mina dengan paket khusus ini.\"\r\n },\r\n {\r\n name: \"Muzdalifah\",\r\n details: [\r\n \"Paket Umroh Plus Muzdalifah Ramadhan 12 Hari\",\r\n \"Fokus ibadah di Muzdalifah\",\r\n \"Harga mulai Rp 48.000.000\",\r\n \"Maskapai: Saudia Airlines\",\r\n \"Pembimbing: Ustadz Faisal\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=Maret+Muzdalifah+1\", caption: \"Poster Paket Muzdalifah Maret 2026 - Malam di Muzdalifah\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Maret+Muzdalifah+2\", caption: \"Poster Paket Muzdalifah Maret 2026 - Keberangkatan\" }\r\n ],\r\n description: \"Paket Ramadhan yang lebih panjang untuk pengalaman Muzdalifah yang mendalam.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-04\", \/\/ April 2026\r\n packages: [\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah Syawal 9 Hari\",\r\n \"Harga mulai Rp 30.000.000\",\r\n \"Maskapai: Saudia Airlines\",\r\n \"Pembimbing: Ustadzah Aminah\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/A7F3D0\/065F46?text=April+Arafah+1\", caption: \"Poster Paket Arafah April 2026 - Suasana Syawal di Arafah\" }\r\n ],\r\n description: \"Berangkat di bulan Syawal untuk ibadah Arafah yang tenang dan nyaman.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-05\", \/\/ May 2026\r\n packages: [\r\n {\r\n name: \"Mina\",\r\n details: [\r\n \"Paket Umroh Plus Mina Mei Indah 8 Hari\",\r\n \"Harga mulai Rp 27.000.000\",\r\n \"Maskapai: Batik Air\",\r\n \"Pembimbing: Ustadz Firman\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Mei+Mina+1\", caption: \"Poster Paket Mina Mei 2026 - Pemandangan Mina\" }\r\n ],\r\n description: \"Paket singkat namun padat untuk pengalaman Mina di bulan Mei.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-06\", \/\/ June 2026\r\n packages: [\r\n {\r\n name: \"Muzdalifah\",\r\n details: [\r\n \"Paket Umroh Plus Muzdalifah Liburan Sekolah 10 Hari\",\r\n \"Harga mulai Rp 32.000.000\",\r\n \"Maskapai: Garuda Indonesia\",\r\n \"Pembimbing: Ustadz Ikhsan\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/D1FAE5\/065F46?text=Juni+Muzdalifah+1\", caption: \"Poster Paket Muzdalifah Juni 2026 - Liburan Sekolah\" },\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Juni+Muzdalifah+2\", caption: \"Poster Paket Muzdalifah Juni 2026 - Keluarga Beribadah\" }\r\n ],\r\n description: \"Cocok untuk keluarga yang ingin beribadah di Muzdalifah selama liburan sekolah.\"\r\n }\r\n ]\r\n },\r\n {\r\n monthYear: \"2026-07\", \/\/ July 2026\r\n packages: [\r\n {\r\n name: \"Arafah\",\r\n details: [\r\n \"Paket Umroh Plus Arafah Juli Ceria 9 Hari\",\r\n \"Harga mulai Rp 28.000.000\",\r\n \"Maskapai: AirAsia\",\r\n \"Pembimbing: Ustadz Rahmat\"\r\n ],\r\n imageUrls: [\r\n { url: \"https:\/\/placehold.co\/400x300\/CCFBF1\/065F46?text=Juli+Arafah+1\", caption: \"Poster Paket Arafah Juli 2026 - Suasana Ceria\" }\r\n ],\r\n description: \"Perjalanan di bulan Juli yang ceria dengan fokus ibadah di Arafah.\"\r\n }\r\n ]\r\n }\r\n \/\/ Add other schedules with details, array of poster URLs, and description here\r\n ];\r\n\r\n \/\/ Month names in Indonesian\r\n const monthNames = [\r\n \"Januari\", \"Februari\", \"Maret\", \"April\", \"Mei\", \"Juni\",\r\n \"Juli\", \"Agustus\", \"September\", \"Oktober\", \"November\", \"Desember\"\r\n ];\r\n\r\n \/\/ Function to populate month dropdown\r\n function populateMonths() {\r\n monthNames.forEach((month, index) => {\r\n const option = document.createElement('option');\r\n option.value = String(index + 1).padStart(2, '0'); \/\/ Format MM (01-12)\r\n option.textContent = month;\r\n monthSelect.appendChild(option);\r\n });\r\n }\r\n\r\n \/\/ Function to populate year dropdown\r\n function populateYears() {\r\n const currentYear = new Date().getFullYear();\r\n \/\/ Start from current year up to 2026 (as requested)\r\n for (let year = currentYear; year <= 2026; year++) {\r\n const option = document.createElement('option');\r\n option.value = year;\r\n option.textContent = year;\r\n yearSelect.appendChild(option);\r\n }\r\n \/\/ Set default year to 2025 if available in options\r\n if (Array.from(yearSelect.options).some(option => option.value === '2025')) {\r\n yearSelect.value = '2025';\r\n }\r\n }\r\n\r\n \/\/ Function to populate package dropdown based on selected month and year\r\n function populatePackages() {\r\n packageSelect.innerHTML = ''; \/\/ Clear previous options\r\n const selectedMonth = monthSelect.value;\r\n const selectedYear = yearSelect.value;\r\n const searchKey = `${selectedYear}-${selectedMonth}`;\r\n\r\n const foundSchedule = availableSchedules.find(schedule => schedule.monthYear === searchKey);\r\n\r\n if (foundSchedule && foundSchedule.packages.length > 0) {\r\n \/\/ Add default \"Select Package\" option\r\n const defaultOption = document.createElement('option');\r\n defaultOption.value = \"\";\r\n defaultOption.textContent = \"Pilih Paket\";\r\n packageSelect.appendChild(defaultOption);\r\n \r\n foundSchedule.packages.forEach(pkg => {\r\n const option = document.createElement('option');\r\n option.value = pkg.name;\r\n option.textContent = pkg.name;\r\n packageSelect.appendChild(option);\r\n });\r\n packageSelect.disabled = false; \/\/ Enable dropdown\r\n } else {\r\n \/\/ Add default option if no packages are available\r\n const option = document.createElement('option');\r\n option.value = \"\";\r\n option.textContent = \"Tidak ada paket tersedia\";\r\n packageSelect.appendChild(option);\r\n packageSelect.disabled = true; \/\/ Disable dropdown if no packages are available\r\n }\r\n hideResultBox(); \/\/ Hide results when month\/year selection changes\r\n }\r\n\r\n \/\/ Function to open the lightbox\r\n function openLightbox(imageUrl, imageCaption) {\r\n lightboxImage.src = imageUrl;\r\n lightboxCaption.textContent = imageCaption;\r\n lightboxOverlay.classList.add('active');\r\n }\r\n\r\n \/\/ Function to close the lightbox\r\n function closeLightbox() {\r\n lightboxOverlay.classList.remove('active');\r\n lightboxImage.src = ''; \/\/ Clear image source\r\n lightboxCaption.textContent = ''; \/\/ Clear caption\r\n }\r\n\r\n \/\/ Function to display search results with details, images, and description\r\n function showResult(message, type = 'info', details = [], imageUrls = [], description = '') {\r\n resultBox.innerHTML = ''; \/\/ Clear previous content\r\n resultBox.classList.remove('hidden', 'bg-green-100', 'text-green-800', 'bg-red-100', 'text-red-800', 'bg-yellow-100', 'text-yellow-800');\r\n\r\n \/\/ Set background and text color based on message type\r\n if (type === 'success') {\r\n resultBox.classList.add('bg-green-100', 'text-green-800');\r\n } else if (type === 'error') {\r\n resultBox.classList.add('bg-red-100', 'text-red-800');\r\n } else if (type === 'info') {\r\n resultBox.classList.add('bg-yellow-100', 'text-yellow-800');\r\n }\r\n\r\n \/\/ Add main message\r\n const mainMessage = document.createElement('p');\r\n mainMessage.classList.add('font-semibold', 'mb-2');\r\n mainMessage.textContent = message;\r\n resultBox.appendChild(mainMessage);\r\n\r\n \/\/ If there's a description, display it as a paragraph\r\n if (description) {\r\n const descParagraph = document.createElement('p');\r\n descParagraph.classList.add('text-gray-700', 'text-base', 'mb-4'); \/\/ Styles for description\r\n descParagraph.textContent = description;\r\n resultBox.appendChild(descParagraph);\r\n }\r\n\r\n \/\/ If there are image URLs, display them in a flex container\r\n if (imageUrls && imageUrls.length > 0) {\r\n const posterContainer = document.createElement('div');\r\n posterContainer.classList.add('poster-container'); \/\/ Use CSS class for flex layout\r\n resultBox.appendChild(posterContainer); \/\/ Add container to resultBox\r\n\r\n imageUrls.forEach((imageData, index) => {\r\n const posterItem = document.createElement('div');\r\n posterItem.classList.add('poster-item');\r\n\r\n const img = document.createElement('img');\r\n img.src = imageData.url;\r\n img.alt = `Poster Jadwal Umroh ${index + 1}`;\r\n img.classList.add('poster-image'); \/\/ Use CSS class for styling\r\n img.onerror = function() {\r\n this.onerror=null; this.src=`https:\/\/placehold.co\/400x300\/CCCCCC\/333333?text=Gambar+Tidak+Tersedia+${index + 1}`; \/\/ Fallback image on error\r\n };\r\n \/\/ Add click event listener to open lightbox\r\n img.addEventListener('click', () => openLightbox(imageData.url, imageData.caption));\r\n posterItem.appendChild(img);\r\n\r\n if (imageData.caption) {\r\n const caption = document.createElement('p');\r\n caption.classList.add('poster-caption');\r\n caption.textContent = imageData.caption;\r\n posterItem.appendChild(caption);\r\n }\r\n\r\n posterContainer.appendChild(posterItem);\r\n });\r\n }\r\n\r\n \/\/ If there are text details, display them as a list\r\n if (details.length > 0) {\r\n const ul = document.createElement('ul');\r\n ul.classList.add('list-disc', 'list-inside', 'text-sm', 'mt-4'); \/\/ Add margin-top\r\n details.forEach(detail => {\r\n const li = document.createElement('li');\r\n li.textContent = detail;\r\n ul.appendChild(li);\r\n });\r\n resultBox.appendChild(ul);\r\n }\r\n\r\n resultBox.classList.remove('hidden');\r\n }\r\n\r\n \/\/ Function to hide the result box\r\n function hideResultBox() {\r\n resultBox.classList.add('hidden');\r\n resultBox.innerHTML = ''; \/\/ Clear content when hidden\r\n }\r\n\r\n \/\/ Initialize dropdowns when the page loads\r\n document.addEventListener('DOMContentLoaded', () => {\r\n populateMonths();\r\n populateYears();\r\n \/\/ Call populatePackages after months and years are populated\r\n populatePackages();\r\n\r\n \/\/ Set default month to August (index 7) if available in options\r\n if (Array.from(monthSelect.options).some(option => option.value === '08')) {\r\n monthSelect.value = '08';\r\n }\r\n \/\/ Call populatePackages again after setting default value\r\n populatePackages();\r\n });\r\n\r\n \/\/ Add event listeners for month and year changes to update packages\r\n monthSelect.addEventListener('change', populatePackages);\r\n yearSelect.addEventListener('change', populatePackages);\r\n\r\n \/\/ Add event listener to the lightbox close button\r\n lightboxCloseButton.addEventListener('click', closeLightbox);\r\n \/\/ Close lightbox when clicking outside the content\r\n lightboxOverlay.addEventListener('click', (event) => {\r\n if (event.target === lightboxOverlay) {\r\n closeLightbox();\r\n }\r\n });\r\n\r\n \/\/ Add event listener to the \"Search Schedule\" button\r\n searchButton.addEventListener('click', () => {\r\n hideResultBox(); \/\/ Hide previous results\r\n\r\n const selectedMonth = monthSelect.value;\r\n const selectedYear = yearSelect.value;\r\n const selectedPackageName = packageSelect.value; \/\/ Get selected package value\r\n\r\n const searchKey = `${selectedYear}-${selectedMonth}`;\r\n const monthName = monthNames[parseInt(selectedMonth) - 1];\r\n\r\n \/\/ Validate if a package has been selected\r\n if (!selectedPackageName) {\r\n showResult('Mohon pilih jenis paket umroh.', 'info');\r\n return;\r\n }\r\n\r\n \/\/ Find the matching schedule in the availableSchedules array based on month\/year\r\n const foundSchedule = availableSchedules.find(schedule => schedule.monthYear === searchKey);\r\n\r\n if (foundSchedule) {\r\n \/\/ Find the matching package within the found schedule\r\n const foundPackage = foundSchedule.packages.find(pkg => pkg.name === selectedPackageName);\r\n\r\n if (foundPackage) {\r\n showResult(\r\n `Jadwal keberangkatan umroh untuk bulan ${monthName} ${selectedYear} dengan Paket ${foundPackage.name}:`,\r\n 'success',\r\n foundPackage.details,\r\n foundPackage.imageUrls,\r\n foundPackage.description\r\n );\r\n } else {\r\n showResult(\r\n `Mohon maaf, paket \"${selectedPackageName}\" tidak tersedia untuk bulan ${monthName} ${selectedYear}.`,\r\n 'error'\r\n );\r\n }\r\n } else {\r\n showResult(\r\n `Mohon maaf, tidak ada jadwal keberangkatan umroh pada bulan ${monthName} ${selectedYear}. Silakan pilih bulan atau tahun lain.`,\r\n 'error'\r\n );\r\n }\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\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-6d81801 e-flex e-con-boxed e-con e-parent\" data-id=\"6d81801\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aaa4022 elementor-hidden-desktop elementor-widget elementor-widget-html\" data-id=\"aaa4022\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Tombol Mengambang Interaktif<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0-beta3\/css\/all.min.css\">\r\n <style>\r\n body {\r\n margin: 0;\r\n font-family: Arial, sans-serif;\r\n padding-bottom: 70px; \/* Memberikan ruang agar tombol tidak menutupi konten *\/\r\n background-color: #f0f2f5;\r\n }\r\n\r\n .floating-nav {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n background-color: #ffffff;\r\n box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);\r\n display: flex;\r\n justify-content: space-around;\r\n padding: 10px 0;\r\n z-index: 1000;\r\n }\r\n\r\n .floating-nav-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n color: #555;\r\n text-decoration: none;\r\n font-size: 12px;\r\n padding: 5px;\r\n flex: 1; \/* Agar item membagi ruang secara merata *\/\r\n transition: color 0.3s ease; \/* Transisi warna saat hover\/active *\/\r\n min-width: 60px; \/* Memberikan lebar minimum agar tidak terlalu sempit jika banyak item *\/\r\n }\r\n\r\n .floating-nav-item i {\r\n font-size: 20px;\r\n margin-bottom: 5px;\r\n color: #777;\r\n transition: color 0.3s ease; \/* Transisi warna ikon *\/\r\n }\r\n\r\n .floating-nav-item span {\r\n font-weight: bold;\r\n text-align: center; \/* Memastikan teks di tengah *\/\r\n line-height: 1.2; \/* Mengurangi spasi antar baris jika teks panjang *\/\r\n }\r\n\r\n .floating-nav-item:hover {\r\n color: #0056b3; \/* Warna saat dihover *\/\r\n }\r\n\r\n .floating-nav-item:hover i {\r\n color: #0056b3;\r\n }\r\n\r\n .floating-nav-item.active {\r\n color: #007bff; \/* Warna untuk item yang sedang aktif *\/\r\n }\r\n\r\n .floating-nav-item.active i {\r\n color: #007bff;\r\n }\r\n\r\n \/* Styling untuk konten dummy agar terlihat ada scroll *\/\r\n .content {\r\n height: 1200px; \/* Tinggi konten dummy *\/\r\n padding: 20px;\r\n text-align: center;\r\n color: #333;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n\r\n <nav class=\"floating-nav\">\r\n <!-- Home akan mengarah ke halaman utama.html -->\r\n <a href=\"https:\/\/tegis.my.id\/\" class=\"floating-nav-item\" data-page=\"home\">\r\n <i class=\"fas fa-home\"><\/i>\r\n <span>Home<\/span>\r\n <\/a>\r\n <!-- Paket akan mengarah ke halaman paket.html -->\r\n <a href=\"https:\/\/tegis.my.id\/index.php\/paket-umroh\/\" class=\"floating-nav-item\" data-page=\"paket\">\r\n <i class=\"fas fa-box\"><\/i>\r\n <span>Paket<\/span>\r\n <\/a>\r\n <!-- Jadwal akan mengarah ke halaman jadwal.html -->\r\n <a href=\"https:\/\/tegis.my.id\/index.php\/jadwal\/\" class=\"floating-nav-item\" data-page=\"jadwal\">\r\n <i class=\"fas fa-calendar-alt\"><\/i>\r\n <span>Jadwal<\/span>\r\n <\/a>\r\n <!-- Bayar akan mengarah ke halaman bayar.html -->\r\n <a href=\"https:\/\/tegis.my.id\/index.php\/pembayaran-2\/\" class=\"floating-nav-item\" data-page=\"bayar\">\r\n <i class=\"fas fa-credit-card\"><\/i>\r\n <span>Bayar<\/span>\r\n <\/a>\r\n <!-- Cara Daftar akan mengarah ke halaman daftar.html -->\r\n <a href=\"https:\/\/tegis.my.id\/index.php\/persyaratan\/\" class=\"floating-nav-item\" data-page=\"cara-daftar\">\r\n <i class=\"fas fa-user-plus\"><\/i> <!-- Ikon untuk pendaftaran\/registrasi -->\r\n <span>Cara Daftar<\/span>\r\n <\/a>\r\n <!-- Kontak akan mengarah ke halaman kontak.html -->\r\n <a href=\"https:\/\/tegis.my.id\/index.php\/kontak\/\" class=\"floating-nav-item\" data-page=\"kontak\">\r\n <i class=\"fas fa-address-book\"><\/i>\r\n <span>Kontak<\/span>\r\n <\/a>\r\n <\/nav>\r\n\r\n <script>\r\n \/\/ Mendapatkan semua item navigasi\r\n const navItems = document.querySelectorAll('.floating-nav-item');\r\n\r\n \/\/ Fungsi untuk menghapus kelas 'active' dari semua item\r\n function removeActiveClass() {\r\n navItems.forEach(item => {\r\n item.classList.remove('active');\r\n });\r\n }\r\n\r\n \/\/ Fungsi untuk mengatur tombol aktif berdasarkan URL saat ini\r\n function setActiveButtonBasedOnUrl() {\r\n \/\/ Dapatkan path dari URL halaman saat ini\r\n \/\/ Menggunakan new URL() untuk mendapatkan pathname yang bersih dari query string atau hash\r\n const currentPathname = new URL(window.location.href).pathname;\r\n\r\n \/\/ Hapus kelas 'active' dari semua item terlebih dahulu\r\n removeActiveClass();\r\n\r\n \/\/ Iterasi melalui setiap item navigasi\r\n navItems.forEach(item => {\r\n \/\/ Dapatkan path dari atribut href item navigasi\r\n const itemPathname = new URL(item.href).pathname;\r\n\r\n \/\/ Logika perbandingan yang lebih tepat:\r\n \/\/ 1. Jika pathname item sama persis dengan pathname halaman saat ini\r\n \/\/ 2. Atau, jika item adalah \"Home\" DAN pathname halaman saat ini adalah root (\"\/\" atau \"\/index.php\/\")\r\n if (itemPathname === currentPathname ||\r\n (item.dataset.page === 'home' && (currentPathname === '\/' || currentPathname === '\/index.php\/'))) {\r\n item.classList.add('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Panggil fungsi ini saat DOM selesai dimuat untuk mengatur status awal\r\n document.addEventListener('DOMContentLoaded', setActiveButtonBasedOnUrl);\r\n\r\n \/\/ Menambahkan event listener ke setiap item navigasi untuk perubahan warna saat diklik\r\n \/\/ Ini tetap diperlukan jika Anda ingin efek visual langsung saat mengklik\r\n \/\/ sebelum halaman baru dimuat sepenuhnya (jika ada navigasi SPA atau AJAX)\r\n navItems.forEach(item => {\r\n item.addEventListener('click', function(event) {\r\n \/\/ Tidak perlu event.preventDefault() jika Anda ingin navigasi normal\r\n \/\/ Jika ingin SPA, Anda akan mencegah default dan memuat konten secara dinamis\r\n \r\n \/\/ Hapus kelas 'active' dari semua item\r\n removeActiveClass();\r\n\r\n \/\/ Tambahkan kelas 'active' ke item yang diklik\r\n this.classList.add('active');\r\n\r\n \/\/ Catatan: Saat halaman baru dimuat, fungsi setActiveButtonBasedOnUrl\r\n \/\/ akan dipanggil lagi untuk memastikan status aktif yang benar.\r\n });\r\n });\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\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>Pengecek Jadwal Keberangkatan Umroh Cek Jadwal Keberangkatan Umroh Pilih Bulan: Pilih Tahun: Pilih Paket: Cari Jadwal × Tombol Mengambang Interaktif Home Paket Jadwal Bayar Cara Daftar Kontak<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-150","page","type-page","status-publish","hentry"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":64,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/150\/revisions"}],"predecessor-version":[{"id":673,"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/pages\/150\/revisions\/673"}],"wp:attachment":[{"href":"https:\/\/tegis.my.id\/index.php\/wp-json\/wp\/v2\/media?parent=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}