Unduh Sertifikat Diklat<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body { font-family: 'Inter', sans-serif; background-color: #f9fafb; }\n \n \/* Loading Spinner *\/\n .loader { \n border-top-color: #0d9488; \/* Teal-600 *\/\n -webkit-animation: spin 1s linear infinite; \n animation: spin 1s linear infinite; \n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* Utility helper for hiding *\/\n .hidden-section { display: none; }\n \n \/* Smooth Fade In for Results *\/\n .fade-in { animation: fadeIn 0.5s ease-in-out; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8\">\n\n \n <div class=\"max-w-3xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100\">\n \n \n <div class=\"bg-gradient-to-r from-teal-500 to-teal-700 p-8 text-white text-center\">\n \n <h2 class=\"text-2xl md:text-3xl font-bold mb-2 flex items-center justify-center gap-3\">\n <i class=\"fas fa-download\"><\/i> Cari dan Unduh File Sertifikat\n <\/h2>\n <p class=\"opacity-90 text-sm md:text-base\">Khusus bagi Anda yang sudah mendaftar, jika belum mendaftar hubungi Admin<\/p>\n <\/div>\n\n <div class=\"p-6 md:p-8 space-y-6\">\n\n \n <div class=\"bg-gray-50 p-5 rounded-xl border border-gray-200\">\n <div class=\"mb-4\">\n <h3 class=\"text-teal-800 font-bold text-lg mb-1\">Lengkapi Data<\/h3>\n <p class=\"text-xs text-gray-800\">Mohon isi persyaratan di bawah ini untuk mengaktifkan pencarian.<\/p>\n <\/div>\n\n <form id=\"reqForm\" onsubmit=\"return false;\">\n \n <div class=\"mb-3 p-3 bg-white rounded-lg border border-gray-200 shadow-sm\">\n <label class=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkHadir\" class=\"w-5 h-5 text-teal-600 rounded focus:ring-teal-500 border-gray-300\">\n <span class=\"text-gray-800 text-sm font-medium\">Saya hadir pada acara tersebut (Wajib)<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"mb-3 space-y-3\">\n <p class=\"text-sm font-semibold text-gray-700\">Pilih metode Unduh Sertifikat:<\/p>\n \n \n <div class=\"bg-white rounded-lg border border-gray-200 shadow-sm p-3\">\n <label class=\"flex items-center gap-3 cursor-pointer mb-2\">\n <input type=\"radio\" name=\"certOption\" value=\"donasi\" id=\"optDonasi\" class=\"w-4 h-4 text-teal-600 focus:ring-teal-500 border-gray-300\">\n <span class=\"text-sm text-gray-800 font-medium\">DONASI Sukarela<\/span>\n <\/label>\n \n \n <div id=\"contentDonasi\" class=\"hidden-section ml-7 mt-2 p-3 bg-yellow-50 rounded border border-yellow-200\">\n <p class=\"text-sm text-gray-800 mb-2\">Silakan transfer ke:<\/p>\n <div class=\"flex items-center justify-between bg-white p-2 rounded border border-gray-200 mb-2\">\n <div>\n \n <div class=\"text-sm font-bold text-gray-800\">\n Bank SMBC – No.rek: <span id=\"rekText\" class=\"font-normal text-gray-800\">90130467723<\/span>\n <\/div>\n <div class=\"text-[10px] text-gray-800\">a.n Wawa<\/div>\n <\/div>\n <button type=\"button\" onclick=\"copyRek()\" class=\"text-sm bg-gray-100 hover:bg-gray-200 border border-gray-300 px-2 py-1 rounded text-gray-600 transition\" title=\"Salin Nomor Rekening\">\n <i class=\"fas fa-copy\"><\/i>\n <\/button>\n <\/div>\n <div>\n <label class=\"text-sm text-gray-800 block mb-1\">Nominal Donasi (Rp):<\/label>\n <input type=\"text\" id=\"inputDonasi\" placeholder=\"Angka tanpa titik\" class=\"w-full text-sm p-2 border border-gray-300 rounded focus:outline-none focus:border-teal-500 transition\" oninput=\"this.value = this.value.replace(\/[^0-9]\/g, '')\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-lg border border-gray-200 shadow-sm p-3\">\n <label class=\"flex items-start gap-3 cursor-pointer mb-2\">\n <input type=\"radio\" name=\"certOption\" value=\"gratis\" id=\"optGratis\" class=\"mt-1 w-4 h-4 text-teal-600 focus:ring-teal-500 border-gray-300\">\n <span class=\"text-sm text-gray-850 leading-snug\">Maaf kondisi keuangan saya sedang tidak memungkinkan, berikan saya GRATIS<\/span>\n <\/label>\n\n \n <div id=\"contentGratis\" class=\"hidden-section ml-7 mt-2 p-3 bg-blue-50 rounded border border-blue-100\">\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkGrup\" class=\"mt-1 w-4 h-4 text-teal-600 rounded\">\n <span class=\"text-sm text-gray-800\">Saya sudah masuk group “Info Diklat” <a href=\"https:\/\/chat.whatsapp.com\/G3hBBl2TLWoEA8g9L85sBI\" target=\"_blank\" class=\"text-blue-600 underline font-bold hover:text-blue-800\">Link Group<\/a><\/span>\n <\/label>\n <label class=\"flex items-start gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkSaluran\" class=\"mt-1 w-4 h-4 text-teal-600 rounded\">\n <span class=\"text-sm text-gray-800\">Saya sudah follow saluran “Info Diklat” <a href=\"https:\/\/chat.whatsapp.com\/G3hBBl2TLWoEA8g9L85sBI\" target=\"_blank\" class=\"text-blue-600 underline font-bold hover:text-blue-800\">Link Saluran<\/a><\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-4 p-3 bg-red-50 rounded-lg border border-red-100\">\n <label class=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkSumpah\" class=\"w-5 h-5 text-red-600 rounded focus:ring-red-500 border-gray-300\">\n <span class=\"text-gray-800 text-sm font-medium italic\">Pernyataan di atas benar, Allah SWT sebaik-baik saksi. Jazakallah.<\/span>\n <\/label>\n <\/div>\n <\/form>\n <\/div>\n\n \n <div class=\"bg-teal-50 border-l-4 border-teal-500 text-teal-800 p-4 rounded-md shadow-xs\" role=\"alert\">\n <p class=\"font-bold smb-1\">Petunjuk<\/p>\n <p class=\"text-xs\">Masukkan <strong>Nama Anda<\/strong> (tanpa gelar) untuk mencari file sertifikat Anda yang tersimpan di Cloud.<\/p>\n <\/div>\n\n \n <div class=\"flex flex-col md:flex-row gap-3\">\n <input type=\"text\" id=\"searchInput\" class=\"flex-grow px-5 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 text-lg text-gray-700 shadow-xs transition\" placeholder=\"Nama tanpa gelar cukup 1-2 kata...\">\n \n <button id=\"searchButton\" onclick=\"validateAndSearch()\" class=\"bg-teal-600 hover:bg-teal-700 text-white px-8 py-3 rounded-xl font-bold text-lg shadow-md transition-all cursor-pointer flex items-center justify-center gap-2 min-w-[120px]\">\n <i class=\"fas fa-search\"><\/i> Cari\n <\/button>\n <\/div>\n\n \n <div id=\"resultContainer\" class=\"mt-6\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbxMW_hzYZZX-D902NQSFUedNTyxh0qiXwLFGVgMuYpLCTFecOGHBKtXausqzdJEDtLO7g\/exec'; \n \n const searchInput = document.getElementById('searchInput');\n const searchButton = document.getElementById('searchButton');\n const resultContainer = document.getElementById('resultContainer');\n \n \/\/ Element Form\n const optDonasi = document.getElementById('optDonasi');\n const optGratis = document.getElementById('optGratis');\n const contentDonasi = document.getElementById('contentDonasi');\n const contentGratis = document.getElementById('contentGratis');\n const inputDonasi = document.getElementById('inputDonasi');\n const checkHadir = document.getElementById('checkHadir');\n const checkSumpah = document.getElementById('checkSumpah');\n\n \/\/ --- Toggle Tampilan Form ---\n function toggleOptions() {\n if (optDonasi.checked) {\n contentDonasi.classList.remove('hidden-section');\n contentGratis.classList.add('hidden-section');\n } else if (optGratis.checked) {\n contentDonasi.classList.add('hidden-section');\n contentGratis.classList.remove('hidden-section');\n }\n }\n optDonasi.addEventListener('change', toggleOptions);\n optGratis.addEventListener('change', toggleOptions);\n\n \/\/ --- Copy Rekening ---\n window.copyRek = function() {\n const rek = document.getElementById('rekText').innerText;\n navigator.clipboard.writeText(rek).then(() => {\n \/\/ Feedback visual kecil jika diperlukan\n alert('No Rekening Berhasil Disalin');\n });\n };\n\n \/\/ --- FUNGSI UTAMA: VALIDASI & CARI ---\n window.validateAndSearch = function() {\n \/\/ 1. Validasi Input Nama\n const query = searchInput.value.trim();\n if (!query) { \n alert('Silakan masukkan nama yang ingin dicari pada kolom pencarian.');\n searchInput.focus();\n return; \n }\n\n \/\/ 2. Validasi Persyaratan\n \/\/ A. Cek Hadir\n if (!checkHadir.checked) {\n alert(\"Wajib mencentang 'Saya hadir pada acara tersebut' di bagian formulir atas.\");\n checkHadir.parentElement.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n return;\n }\n\n \/\/ B. Cek Opsi Donasi\/Gratis\n if (optDonasi.checked) {\n const nominal = parseInt(inputDonasi.value || 0);\n \/\/ Validasi diubah menjadi 10.000 sesuai permintaan\n if (nominal < 10000) {\n alert(\"Untuk opsi donasi, minimal Rp 10.000 (Angka tanpa titik).\");\n inputDonasi.focus();\n return;\n }\n } else if (optGratis.checked) {\n const checkGrup = document.getElementById('checkGrup').checked;\n const checkSaluran = document.getElementById('checkSaluran').checked;\n if (!checkGrup || !checkSaluran) {\n alert(\"Mohon selesaikan tugas: Masuk Group dan Follow Saluran.\");\n return;\n }\n } else {\n alert(\"Silakan pilih metode unduh: Donasi atau Gratis.\");\n return;\n }\n\n \/\/ C. Cek Sumpah\n if (!checkSumpah.checked) {\n alert(\"Mohon centang pernyataan sumpah di bagian bawah formulir.\");\n checkSumpah.parentElement.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n return;\n }\n\n \/\/ 3. Jika Valid, Lakukan Pencarian\n performSearch(query);\n };\n\n \/\/ --- LOGIKA PENCARIAN ---\n function performSearch(query) {\n \/\/ Tampilkan Loading Inline\n resultContainer.innerHTML = `\n <div class=\"flex flex-col items-center justify-center py-8 bg-gray-50 rounded-xl border border-dashed border-gray-300\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mb-4\"><\/div>\n <p class=\"text-gray-600 font-medium\">Sedang mencari data...<\/p>\n <\/div>`;\n \n \/\/ Scroll ke hasil agar user sadar ada proses\n resultContainer.scrollIntoView({behavior: \"smooth\", block: \"start\"});\n\n fetch(`${SCRIPT_URL}?q=${encodeURIComponent(query)}`)\n .then(response => response.json())\n .then(data => displayResults(data, query))\n .catch(error => {\n resultContainer.innerHTML = `\n <div class=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative\" role=\"alert\">\n <strong class=\"font-bold\">Terjadi Kesalahan!<\/strong>\n <span class=\"block sm:inline\">Gagal terhubung ke server. Silakan coba lagi.<\/span>\n <\/div>`;\n });\n }\n \n function displayResults(results, query) {\n \/\/ JIKA DATA TIDAK DITEMUKAN\n if (!results || results.length === 0 || results.status === 'error') {\n resultContainer.innerHTML = `\n <div class=\"fade-in bg-white border border-gray-200 rounded-xl p-6 text-center shadow-sm\">\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-500 mb-4\">\n <i class=\"fas fa-times text-2xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-700 mb-2\">Data Tidak Ditemukan<\/h3>\n <p class=\"text-gray-800 mb-4\">Maaf, sertifikat untuk nama \"<strong>${query}<\/strong>\" tidak ditemukan.<\/p>\n \n <div class=\"bg-blue-50 border border-blue-100 rounded-lg p-4 text-left\">\n <p class=\"text-sm text-blue-800 font-semibold mb-2\"><i class=\"fas fa-info-circle mr-1\"><\/i> Solusi:<\/p>\n <ul class=\"list-disc list-inside text-sm text-blue-700 space-y-1 mb-4\">\n <li>Pastikan penulisan nama sudah benar.<\/li>\n <li>Pastikan Anda sudah mendaftar sebelumnya.<\/li>\n <\/ul>\n \n <div class=\"text-center\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136&text=Halo+Admin,+saya+ingin+bertanya+mengenai+sertifikat+atas+nama+${encodeURIComponent(query)}\" target=\"_blank\" class=\"inline-flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg transition duration-300 shadow-md\">\n <i class=\"fab fa-whatsapp text-xl mr-2\"><\/i> Hubungi Admin\n <\/a>\n <\/div>\n <\/div>\n <\/div>`;\n return;\n }\n\n \/\/ JIKA DATA DITEMUKAN\n let html = '<div class=\"fade-in flex flex-col gap-3\">';\n html += `<p class=\"text-sm text-gray-600 mb-2\">Ditemukan <strong>${results.length}<\/strong> file untuk \"${query}\":<\/p>`;\n \n results.forEach(file => {\n html += `\n <div class=\"flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition hover:border-teal-200 group\">\n <div class=\"flex items-center gap-4 overflow-hidden\">\n <div class=\"flex-shrink-0 w-10 h-10 bg-teal-100 text-teal-600 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-file-pdf text-xl\"><\/i>\n <\/div>\n <div class=\"min-w-0\">\n <h4 class=\"text-gray-800 font-semibold truncate group-hover:text-teal-700 transition\">${file.name}<\/h4>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fab fa-google-drive\"><\/i> Google Drive\n <\/span>\n <\/div>\n <\/div>\n <a href=\"${file.url}\" target=\"_blank\" class=\"flex-shrink-0 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition shadow-sm ml-3 flex items-center gap-2\">\n <i class=\"fas fa-download\"><\/i> <span class=\"hidden sm:inline\">Unduh<\/span>\n <\/a>\n <\/div>`;\n });\n html += '<\/div>';\n resultContainer.innerHTML = html;\n }\n\n \/\/ Enter key untuk search\n searchInput.addEventListener('keypress', (e) => { \n if(e.key === 'Enter') validateAndSearch(); \n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">Jika sebelumnya belum mendaftar hubungi <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136\" data-type=\"link\" data-id=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136\">Admin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unduh Sertifikat Diklat Cari dan Unduh File Sertifikat Khusus bagi Anda yang sudah mendaftar, jika belum mendaftar hubungi Admin Lengkapi Data Mohon isi persyaratan di bawah ini untuk mengaktifkan pencarian. Saya hadir pada acara tersebut (Wajib) Pilih metode Unduh Sertifikat: DONASI Sukarela Silakan transfer ke: Bank SMBC – No.rek: 90130467723 a.n Wawa Nominal Donasi (Rp): […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":5,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":57,"date":"2025-12-14T00:57:55","date_gmt":"2025-12-14T00:57:55","guid":{"rendered":"https:\/\/edu.yahdifa.org\/diklat\/?page_id=57"},"modified":"2025-12-15T11:30:12","modified_gmt":"2025-12-15T11:30:12","slug":"unduh-sertifikat","status":"publish","type":"page","link":"https:\/\/edu.yahdifa.org\/diklat\/unduh-sertifikat\/","title":{"rendered":"Unduh Sertifikat"},"content":{"rendered":"\n\n\n\n \n \n Unduh Sertifikat Diklat<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.2\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n <style>\n body { font-family: 'Inter', sans-serif; background-color: #f9fafb; }\n \n \/* Loading Spinner *\/\n .loader { \n border-top-color: #0d9488; \/* Teal-600 *\/\n -webkit-animation: spin 1s linear infinite; \n animation: spin 1s linear infinite; \n }\n @keyframes spin { to { transform: rotate(360deg); } }\n\n \/* Utility helper for hiding *\/\n .hidden-section { display: none; }\n \n \/* Smooth Fade In for Results *\/\n .fade-in { animation: fadeIn 0.5s ease-in-out; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n <\/style>\n<\/head>\n<body class=\"p-4 md:p-8\">\n\n \n <div class=\"max-w-3xl mx-auto bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100\">\n \n \n <div class=\"bg-gradient-to-r from-teal-500 to-teal-700 p-8 text-white text-center\">\n \n <h2 class=\"text-2xl md:text-3xl font-bold mb-2 flex items-center justify-center gap-3\">\n <i class=\"fas fa-download\"><\/i> Cari dan Unduh File Sertifikat\n <\/h2>\n <p class=\"opacity-90 text-sm md:text-base\">Khusus bagi Anda yang sudah mendaftar, jika belum mendaftar hubungi Admin<\/p>\n <\/div>\n\n <div class=\"p-6 md:p-8 space-y-6\">\n\n \n <div class=\"bg-gray-50 p-5 rounded-xl border border-gray-200\">\n <div class=\"mb-4\">\n <h3 class=\"text-teal-800 font-bold text-lg mb-1\">Lengkapi Data<\/h3>\n <p class=\"text-xs text-gray-800\">Mohon isi persyaratan di bawah ini untuk mengaktifkan pencarian.<\/p>\n <\/div>\n\n <form id=\"reqForm\" onsubmit=\"return false;\">\n \n <div class=\"mb-3 p-3 bg-white rounded-lg border border-gray-200 shadow-sm\">\n <label class=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkHadir\" class=\"w-5 h-5 text-teal-600 rounded focus:ring-teal-500 border-gray-300\">\n <span class=\"text-gray-800 text-sm font-medium\">Saya hadir pada acara tersebut (Wajib)<\/span>\n <\/label>\n <\/div>\n\n \n <div class=\"mb-3 space-y-3\">\n <p class=\"text-sm font-semibold text-gray-700\">Pilih metode Unduh Sertifikat:<\/p>\n \n \n <div class=\"bg-white rounded-lg border border-gray-200 shadow-sm p-3\">\n <label class=\"flex items-center gap-3 cursor-pointer mb-2\">\n <input type=\"radio\" name=\"certOption\" value=\"donasi\" id=\"optDonasi\" class=\"w-4 h-4 text-teal-600 focus:ring-teal-500 border-gray-300\">\n <span class=\"text-sm text-gray-800 font-medium\">DONASI Sukarela<\/span>\n <\/label>\n \n \n <div id=\"contentDonasi\" class=\"hidden-section ml-7 mt-2 p-3 bg-yellow-50 rounded border border-yellow-200\">\n <p class=\"text-sm text-gray-800 mb-2\">Silakan transfer ke:<\/p>\n <div class=\"flex items-center justify-between bg-white p-2 rounded border border-gray-200 mb-2\">\n <div>\n \n <div class=\"text-sm font-bold text-gray-800\">\n Bank SMBC – No.rek: <span id=\"rekText\" class=\"font-normal text-gray-800\">90130467723<\/span>\n <\/div>\n <div class=\"text-[10px] text-gray-800\">a.n Wawa<\/div>\n <\/div>\n <button type=\"button\" onclick=\"copyRek()\" class=\"text-sm bg-gray-100 hover:bg-gray-200 border border-gray-300 px-2 py-1 rounded text-gray-600 transition\" title=\"Salin Nomor Rekening\">\n <i class=\"fas fa-copy\"><\/i>\n <\/button>\n <\/div>\n <div>\n <label class=\"text-sm text-gray-800 block mb-1\">Nominal Donasi (Rp):<\/label>\n <input type=\"text\" id=\"inputDonasi\" placeholder=\"Angka tanpa titik\" class=\"w-full text-sm p-2 border border-gray-300 rounded focus:outline-none focus:border-teal-500 transition\" oninput=\"this.value = this.value.replace(\/[^0-9]\/g, '')\">\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"bg-white rounded-lg border border-gray-200 shadow-sm p-3\">\n <label class=\"flex items-start gap-3 cursor-pointer mb-2\">\n <input type=\"radio\" name=\"certOption\" value=\"gratis\" id=\"optGratis\" class=\"mt-1 w-4 h-4 text-teal-600 focus:ring-teal-500 border-gray-300\">\n <span class=\"text-sm text-gray-850 leading-snug\">Maaf kondisi keuangan saya sedang tidak memungkinkan, berikan saya GRATIS<\/span>\n <\/label>\n\n \n <div id=\"contentGratis\" class=\"hidden-section ml-7 mt-2 p-3 bg-blue-50 rounded border border-blue-100\">\n <div class=\"space-y-2\">\n <label class=\"flex items-start gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkGrup\" class=\"mt-1 w-4 h-4 text-teal-600 rounded\">\n <span class=\"text-sm text-gray-800\">Saya sudah masuk group “Info Diklat” <a href=\"https:\/\/chat.whatsapp.com\/G3hBBl2TLWoEA8g9L85sBI\" target=\"_blank\" class=\"text-blue-600 underline font-bold hover:text-blue-800\">Link Group<\/a><\/span>\n <\/label>\n <label class=\"flex items-start gap-2 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkSaluran\" class=\"mt-1 w-4 h-4 text-teal-600 rounded\">\n <span class=\"text-sm text-gray-800\">Saya sudah follow saluran “Info Diklat” <a href=\"https:\/\/chat.whatsapp.com\/G3hBBl2TLWoEA8g9L85sBI\" target=\"_blank\" class=\"text-blue-600 underline font-bold hover:text-blue-800\">Link Saluran<\/a><\/span>\n <\/label>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"mb-4 p-3 bg-red-50 rounded-lg border border-red-100\">\n <label class=\"flex items-center gap-3 cursor-pointer\">\n <input type=\"checkbox\" id=\"checkSumpah\" class=\"w-5 h-5 text-red-600 rounded focus:ring-red-500 border-gray-300\">\n <span class=\"text-gray-800 text-sm font-medium italic\">Pernyataan di atas benar, Allah SWT sebaik-baik saksi. Jazakallah.<\/span>\n <\/label>\n <\/div>\n <\/form>\n <\/div>\n\n \n <div class=\"bg-teal-50 border-l-4 border-teal-500 text-teal-800 p-4 rounded-md shadow-xs\" role=\"alert\">\n <p class=\"font-bold smb-1\">Petunjuk<\/p>\n <p class=\"text-xs\">Masukkan <strong>Nama Anda<\/strong> (tanpa gelar) untuk mencari file sertifikat Anda yang tersimpan di Cloud.<\/p>\n <\/div>\n\n \n <div class=\"flex flex-col md:flex-row gap-3\">\n <input type=\"text\" id=\"searchInput\" class=\"flex-grow px-5 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-teal-500 text-lg text-gray-700 shadow-xs transition\" placeholder=\"Nama tanpa gelar cukup 1-2 kata...\">\n \n <button id=\"searchButton\" onclick=\"validateAndSearch()\" class=\"bg-teal-600 hover:bg-teal-700 text-white px-8 py-3 rounded-xl font-bold text-lg shadow-md transition-all cursor-pointer flex items-center justify-center gap-2 min-w-[120px]\">\n <i class=\"fas fa-search\"><\/i> Cari\n <\/button>\n <\/div>\n\n \n <div id=\"resultContainer\" class=\"mt-6\">\n \n <\/div>\n <\/div>\n <\/div>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbxMW_hzYZZX-D902NQSFUedNTyxh0qiXwLFGVgMuYpLCTFecOGHBKtXausqzdJEDtLO7g\/exec'; \n \n const searchInput = document.getElementById('searchInput');\n const searchButton = document.getElementById('searchButton');\n const resultContainer = document.getElementById('resultContainer');\n \n \/\/ Element Form\n const optDonasi = document.getElementById('optDonasi');\n const optGratis = document.getElementById('optGratis');\n const contentDonasi = document.getElementById('contentDonasi');\n const contentGratis = document.getElementById('contentGratis');\n const inputDonasi = document.getElementById('inputDonasi');\n const checkHadir = document.getElementById('checkHadir');\n const checkSumpah = document.getElementById('checkSumpah');\n\n \/\/ --- Toggle Tampilan Form ---\n function toggleOptions() {\n if (optDonasi.checked) {\n contentDonasi.classList.remove('hidden-section');\n contentGratis.classList.add('hidden-section');\n } else if (optGratis.checked) {\n contentDonasi.classList.add('hidden-section');\n contentGratis.classList.remove('hidden-section');\n }\n }\n optDonasi.addEventListener('change', toggleOptions);\n optGratis.addEventListener('change', toggleOptions);\n\n \/\/ --- Copy Rekening ---\n window.copyRek = function() {\n const rek = document.getElementById('rekText').innerText;\n navigator.clipboard.writeText(rek).then(() => {\n \/\/ Feedback visual kecil jika diperlukan\n alert('No Rekening Berhasil Disalin');\n });\n };\n\n \/\/ --- FUNGSI UTAMA: VALIDASI & CARI ---\n window.validateAndSearch = function() {\n \/\/ 1. Validasi Input Nama\n const query = searchInput.value.trim();\n if (!query) { \n alert('Silakan masukkan nama yang ingin dicari pada kolom pencarian.');\n searchInput.focus();\n return; \n }\n\n \/\/ 2. Validasi Persyaratan\n \/\/ A. Cek Hadir\n if (!checkHadir.checked) {\n alert(\"Wajib mencentang 'Saya hadir pada acara tersebut' di bagian formulir atas.\");\n checkHadir.parentElement.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n return;\n }\n\n \/\/ B. Cek Opsi Donasi\/Gratis\n if (optDonasi.checked) {\n const nominal = parseInt(inputDonasi.value || 0);\n \/\/ Validasi diubah menjadi 10.000 sesuai permintaan\n if (nominal < 10000) {\n alert(\"Untuk opsi donasi, minimal Rp 10.000 (Angka tanpa titik).\");\n inputDonasi.focus();\n return;\n }\n } else if (optGratis.checked) {\n const checkGrup = document.getElementById('checkGrup').checked;\n const checkSaluran = document.getElementById('checkSaluran').checked;\n if (!checkGrup || !checkSaluran) {\n alert(\"Mohon selesaikan tugas: Masuk Group dan Follow Saluran.\");\n return;\n }\n } else {\n alert(\"Silakan pilih metode unduh: Donasi atau Gratis.\");\n return;\n }\n\n \/\/ C. Cek Sumpah\n if (!checkSumpah.checked) {\n alert(\"Mohon centang pernyataan sumpah di bagian bawah formulir.\");\n checkSumpah.parentElement.scrollIntoView({behavior: \"smooth\", block: \"center\"});\n return;\n }\n\n \/\/ 3. Jika Valid, Lakukan Pencarian\n performSearch(query);\n };\n\n \/\/ --- LOGIKA PENCARIAN ---\n function performSearch(query) {\n \/\/ Tampilkan Loading Inline\n resultContainer.innerHTML = `\n <div class=\"flex flex-col items-center justify-center py-8 bg-gray-50 rounded-xl border border-dashed border-gray-300\">\n <div class=\"loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-10 w-10 mb-4\"><\/div>\n <p class=\"text-gray-600 font-medium\">Sedang mencari data...<\/p>\n <\/div>`;\n \n \/\/ Scroll ke hasil agar user sadar ada proses\n resultContainer.scrollIntoView({behavior: \"smooth\", block: \"start\"});\n\n fetch(`${SCRIPT_URL}?q=${encodeURIComponent(query)}`)\n .then(response => response.json())\n .then(data => displayResults(data, query))\n .catch(error => {\n resultContainer.innerHTML = `\n <div class=\"bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative\" role=\"alert\">\n <strong class=\"font-bold\">Terjadi Kesalahan!<\/strong>\n <span class=\"block sm:inline\">Gagal terhubung ke server. Silakan coba lagi.<\/span>\n <\/div>`;\n });\n }\n \n function displayResults(results, query) {\n \/\/ JIKA DATA TIDAK DITEMUKAN\n if (!results || results.length === 0 || results.status === 'error') {\n resultContainer.innerHTML = `\n <div class=\"fade-in bg-white border border-gray-200 rounded-xl p-6 text-center shadow-sm\">\n <div class=\"inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-red-500 mb-4\">\n <i class=\"fas fa-times text-2xl\"><\/i>\n <\/div>\n <h3 class=\"text-xl font-bold text-gray-700 mb-2\">Data Tidak Ditemukan<\/h3>\n <p class=\"text-gray-800 mb-4\">Maaf, sertifikat untuk nama \"<strong>${query}<\/strong>\" tidak ditemukan.<\/p>\n \n <div class=\"bg-blue-50 border border-blue-100 rounded-lg p-4 text-left\">\n <p class=\"text-sm text-blue-800 font-semibold mb-2\"><i class=\"fas fa-info-circle mr-1\"><\/i> Solusi:<\/p>\n <ul class=\"list-disc list-inside text-sm text-blue-700 space-y-1 mb-4\">\n <li>Pastikan penulisan nama sudah benar.<\/li>\n <li>Pastikan Anda sudah mendaftar sebelumnya.<\/li>\n <\/ul>\n \n <div class=\"text-center\">\n <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136&text=Halo+Admin,+saya+ingin+bertanya+mengenai+sertifikat+atas+nama+${encodeURIComponent(query)}\" target=\"_blank\" class=\"inline-flex items-center justify-center bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-6 rounded-lg transition duration-300 shadow-md\">\n <i class=\"fab fa-whatsapp text-xl mr-2\"><\/i> Hubungi Admin\n <\/a>\n <\/div>\n <\/div>\n <\/div>`;\n return;\n }\n\n \/\/ JIKA DATA DITEMUKAN\n let html = '<div class=\"fade-in flex flex-col gap-3\">';\n html += `<p class=\"text-sm text-gray-600 mb-2\">Ditemukan <strong>${results.length}<\/strong> file untuk \"${query}\":<\/p>`;\n \n results.forEach(file => {\n html += `\n <div class=\"flex items-center justify-between p-4 bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md transition hover:border-teal-200 group\">\n <div class=\"flex items-center gap-4 overflow-hidden\">\n <div class=\"flex-shrink-0 w-10 h-10 bg-teal-100 text-teal-600 rounded-lg flex items-center justify-center\">\n <i class=\"fas fa-file-pdf text-xl\"><\/i>\n <\/div>\n <div class=\"min-w-0\">\n <h4 class=\"text-gray-800 font-semibold truncate group-hover:text-teal-700 transition\">${file.name}<\/h4>\n <span class=\"text-xs text-gray-500 flex items-center gap-1\">\n <i class=\"fab fa-google-drive\"><\/i> Google Drive\n <\/span>\n <\/div>\n <\/div>\n <a href=\"${file.url}\" target=\"_blank\" class=\"flex-shrink-0 bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition shadow-sm ml-3 flex items-center gap-2\">\n <i class=\"fas fa-download\"><\/i> <span class=\"hidden sm:inline\">Unduh<\/span>\n <\/a>\n <\/div>`;\n });\n html += '<\/div>';\n resultContainer.innerHTML = html;\n }\n\n \/\/ Enter key untuk search\n searchInput.addEventListener('keypress', (e) => { \n if(e.key === 'Enter') validateAndSearch(); \n });\n });\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"has-text-align-center has-small-font-size\">Jika sebelumnya belum mendaftar hubungi <a href=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136\" data-type=\"link\" data-id=\"https:\/\/api.whatsapp.com\/send\/?phone=6281573048136\">Admin<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Unduh Sertifikat Diklat Cari dan Unduh File Sertifikat Khusus bagi Anda yang sudah mendaftar, jika belum mendaftar hubungi Admin Lengkapi Data Mohon isi persyaratan di bawah ini untuk mengaktifkan pencarian. Saya hadir pada acara tersebut (Wajib) Pilih metode Unduh Sertifikat: DONASI Sukarela Silakan transfer ke: Bank SMBC – No.rek: 90130467723 a.n Wawa Nominal Donasi (Rp): […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"class_list":["post-57","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/comments?post=57"}],"version-history":[{"count":5,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57\/revisions"}],"predecessor-version":[{"id":119,"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/pages\/57\/revisions\/119"}],"wp:attachment":[{"href":"https:\/\/edu.yahdifa.org\/diklat\/wp-json\/wp\/v2\/media?parent=57"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}