{"id":226,"date":"2026-07-17T21:30:35","date_gmt":"2026-07-17T14:30:35","guid":{"rendered":"https:\/\/sditmtamatesih.sch.id\/?page_id=226"},"modified":"2026-07-18T00:02:46","modified_gmt":"2026-07-17T17:02:46","slug":"ekstra","status":"publish","type":"page","link":"https:\/\/sditmtamatesih.sch.id\/?page_id=226","title":{"rendered":"Formulir Ekstrakurikuler"},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Pendaftaran Ekstrakurikuler<\/title>\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n    <style>\n        body { font-family: 'Inter', sans-serif; }\n        \/* Animasi loading transisi mulus *\/\n        .fade-in { animation: fadeIn 0.4s ease-in-out; }\n        @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }\n    <\/style>\n\n\n\n    <div class=\"max-w-3xl mx-auto bg-white sm:rounded-3xl sm:shadow-2xl border border-gray-100 overflow-hidden\">\n        <!-- Header -->\n        <div class=\"bg-green-600 px-6 py-8 sm:px-10 text-center text-white\">\n            <h2 class=\"text-3xl font-extrabold tracking-tight\">Pendaftaran Ekstrakurikuler<\/h2>\n<h2 class=\"text-3xl font-extrabold tracking-tight\">SDIT MTA MATESIH<\/h2>\n            <p class=\"mt-2 text-white-100 font-medium\">Tahun Ajaran 2026\/2027<\/p>\n        <\/div>\n\n        <div class=\"p-6 sm:p-10\">\n            <div class=\"mb-6 rounded-lg bg-blue-50 p-4 border border-blue-100\">\n                <p class=\"text-sm text-blue-800\">\n                    <strong>Penting:<\/strong> Setiap ekstrakurikuler memiliki batasan jumlah kuota siswa. Formulir tidak akan bisa dikirim jika kuota ekskul pilihan Anda sudah penuh.\n                <\/p>\n            <\/div>\n\n            <form id=\"registration-form\" class=\"space-y-8\">\n                <!-- Data Diri -->\n                <div class=\"space-y-5\">\n                    <h3 class=\"text-lg font-bold text-gray-900 border-b pb-2\">1. Data Siswa<\/h3>\n                    <div>\n                        <label for=\"nama\" class=\"block text-sm font-semibold text-gray-700\">Nama Lengkap Siswa<\/label>\n                        <input type=\"text\" id=\"nama\" name=\"nama\" required=\"\" class=\"mt-2 block w-full rounded-xl border border-gray-300 px-4 py-3.5 text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors shadow-sm\" placeholder=\"Masukkan nama lengkap Anda\">\n                    <\/div>\n                    <div>\n                        <label for=\"kelas\" class=\"block text-sm font-semibold text-gray-700\">Kelas<\/label>\n                        <input type=\"text\" id=\"kelas\" name=\"kelas\" required=\"\" class=\"mt-2 block w-full rounded-xl border border-gray-300 px-4 py-3.5 text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors shadow-sm\" placeholder=\"Contoh: 2A\">\n                    <\/div>\n                <\/div>\n                \n                <div class=\"space-y-5 pt-2\">\n                    <h3 class=\"text-lg font-bold text-gray-900 border-b pb-2 flex items-center justify-between\">\n                        <span class=\"flex items-center gap-2\">\n                            2. Pilihan Ekstrakurikuler\n                            <span class=\"hidden sm:inline-block text-xs font-medium px-2.5 py-0.5 bg-green-100 text-green-700 rounded-full border border-green-200\">Terhubung Spreadsheet<\/span>\n                        <\/span>\n                        <button type=\"button\" onclick=\"loadQuotas()\" class=\"text-sm text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1\" title=\"Muat ulang sisa kuota\">\n                            <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"><\/path><\/svg> Refresh Kuota\n                        <\/button>\n                    <\/h3>\n                    \n                    <div id=\"ekskul-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n                        <!-- Loading Skeletons -->\n                        <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                        <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                        <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                        <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Tombol Submit -->\n                <div class=\"pt-4\">\n                    <button type=\"submit\" id=\"submit-btn\" class=\"w-full flex justify-center items-center rounded-xl bg-green-600 px-4 py-4 text-base font-bold text-white shadow-lg hover:bg-green-700 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 transition-all transform active:scale-[0.98]\">\n                        Kirim Pendaftaran\n                    <\/button>\n                <\/div>\n            <\/form>\n\n            <div class=\"mt-12 border-t border-gray-200 pt-6\">\n                \n                    <\/ol>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"modal\" class=\"fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-900 bg-opacity-60 backdrop-blur-sm transition-opacity duration-300 opacity-0 px-4\">\n        <div class=\"bg-white rounded-3xl shadow-2xl max-w-sm w-full p-8 transform scale-95 transition-transform duration-300 flex flex-col items-center\">\n            <div id=\"modal-icon\" class=\"w-20 h-20 mb-5 rounded-full flex items-center justify-center shadow-inner\">\n                <!-- SVG Icon Injected here -->\n            <\/div>\n            <h3 id=\"modal-title\" class=\"text-2xl font-extrabold text-center text-gray-900 mb-2\"><\/h3>\n            <p id=\"modal-desc\" class=\"text-center text-gray-600 mb-8 leading-relaxed\"><\/p>\n            <button onclick=\"closeModal()\" class=\"w-full py-3.5 px-4 bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold rounded-xl transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400\">Tutup<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ =========================================================================\n        \/\/ GANTI TEXT DI BAWAH INI DENGAN URL WEB APP GOOGLE APPS SCRIPT ANDA\n        \/\/ =========================================================================\n        const SCRIPT_URL = 'https:\/\/script.google.com\/macros\/s\/AKfycbyBPz8ar3OIBN-adhiMFFt7cPGxJKX-0bTt5a9Dr7VRhBgoQwtevScn_VcOGC3y6FWf\/exec';\n\n        document.addEventListener('DOMContentLoaded', () => {\n            loadQuotas();\n            document.getElementById('registration-form').addEventListener('submit', handleSubmit);\n        });\n\n        async function loadQuotas() {\n            const container = document.getElementById('ekskul-container');\n            \/\/ Reset state to loading skeletons\n            container.innerHTML = `\n                <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n                <div class=\"animate-pulse bg-gray-100 border border-gray-200 h-28 rounded-2xl\"><\/div>\n            `;\n            \n            try {\n                if (SCRIPT_URL === 'https:\/\/script.google.com\/macros\/s\/AKfycbwRdrdRTYAWKqkpoIOpzLcz_A9vBTKI_hkzrl-8dqIlmI7I8rn1m0dt-VWrt9xSb2Ts\/exec') {\n                    throw new Error(\"PENTING: Anda belum memasukkan URL Web App. Silakan ikuti Panduan Admin di bagian bawah untuk mendapatkan URL dan memasukkannya ke variabel SCRIPT_URL.\");\n                }\n\n                \/\/ Fetch data sebenarnya dari Google Sheets\n                const res = await fetch(SCRIPT_URL + '?action=getQuotas');\n                const json = await res.json();\n                if (json.status === 'success') {\n                    renderEkskul(json.data);\n                } else {\n                    throw new Error(json.message);\n                }\n            } catch (err) {\n                container.innerHTML = `\n                    <div class=\"col-span-full p-6 bg-red-50 border border-red-200 text-red-700 rounded-2xl text-center flex flex-col items-center\">\n                        <svg class=\"w-8 h-8 mb-2\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"><\/path><\/svg>\n                        <span class=\"font-semibold\">Gagal memuat data kuota.<\/span>\n                        <span class=\"text-sm mt-1\">${err.message}<\/span>\n                    <\/div>`;\n            }\n        }\n\n        function renderEkskul(data) {\n            const container = document.getElementById('ekskul-container');\n            container.innerHTML = '';\n            \n            data.forEach((ekskul, index) => {\n                const isFull = ekskul.sisa <= 0;\n                \/\/ HTML untuk kartu pilihan ekskul\n                const html = `\n                    <label class=\"fade-in relative ${isFull ? 'cursor-not-allowed opacity-60 grayscale' : 'cursor-pointer group'}\" style=\"animation-delay: ${index * 0.05}s\">\n                        <input type=\"radio\" name=\"ekskul\" value=\"${ekskul.nama}\" class=\"peer sr-only\" ${isFull ? 'disabled' : ''} required>\n                        <div class=\"h-full rounded-2xl border-2 ${isFull ? 'border-gray-200 bg-gray-50' : 'border-gray-200 bg-white group-hover:border-blue-300 group-hover:shadow-md peer-checked:border-blue-600 peer-checked:bg-blue-50 peer-checked:ring-4 peer-checked:ring-blue-100'} p-5 transition-all duration-200 flex flex-col justify-between relative overflow-hidden\">\n                            ${isFull ? '<div class=\"absolute inset-0 bg-gray-50 opacity-50 z-10\"><\/div>' : ''}\n                            \n                            <div class=\"flex w-full items-start justify-between mb-3 z-20\">\n                                <p class=\"font-extrabold text-gray-900 text-lg leading-tight pr-2\">${ekskul.nama}<\/p>\n                                <span class=\"shrink-0 inline-flex items-center rounded-full px-3 py-1 text-xs font-bold ${isFull ? 'bg-red-100 text-red-800 border border-red-200' : 'bg-emerald-100 text-emerald-800 border border-emerald-200'}\">\n                                    Sisa: ${ekskul.sisa}\n                                <\/span>\n                            <\/div>\n                            \n                            <div class=\"flex items-center justify-between z-20\">\n                                <p class=\"text-sm font-medium text-gray-500\">Maks: ${ekskul.max} siswa<\/p>\n                                <!-- Indikator Checked (Centang) -->\n                                <div class=\"w-6 h-6 rounded-full border-2 border-gray-300 flex items-center justify-center peer-checked:border-blue-600 peer-checked:bg-blue-600 transition-colors opacity-0 peer-checked:opacity-100 ${isFull ? 'hidden' : 'peer-checked:flex'}\">\n                                    <svg class=\"w-4 h-4 text-white\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/label>\n                `;\n                container.insertAdjacentHTML('beforeend', html);\n            });\n        }\n\n        async function handleSubmit(e) {\n            e.preventDefault();\n            const form = e.target;\n            const btn = document.getElementById('submit-btn');\n            const originalBtnText = btn.innerHTML;\n            \n            \/\/ Mengubah state tombol menjadi loading\n            btn.disabled = true;\n            btn.innerHTML = `<svg class=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white inline\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"><\/circle><path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"><\/path><\/svg> Sedang Memproses...`;\n            \n            const formData = new FormData(form);\n            const data = Object.fromEntries(formData.entries());\n            \n            try {\n                if (SCRIPT_URL === 'https:\/\/script.google.com\/macros\/s\/AKfycbwRdrdRTYAWKqkpoIOpzLcz_A9vBTKI_hkzrl-8dqIlmI7I8rn1m0dt-VWrt9xSb2Ts\/exec') {\n                    throw new Error(\"URL Web App belum disetting. Pendaftaran tidak dapat diproses. Silakan cek Panduan Admin.\");\n                }\n\n                \/\/ Kirim ke Google Apps Script menggunakan Text Plain untuk menghindari masalah CORS Preflight\n                const res = await fetch(SCRIPT_URL, {\n                    method: 'POST',\n                    headers: {\n                        'Content-Type': 'text\/plain;charset=utf-8',\n                    },\n                    body: JSON.stringify(data)\n                });\n                const json = await res.json();\n                \n                if (json.status === 'success') {\n                    showMessage('success', 'Pendaftaran Berhasil!', json.message);\n                    form.reset();\n                    loadQuotas(); \/\/ refresh sisa kuota\n                } else {\n                    showMessage('error', 'Pendaftaran Gagal', json.message);\n                }\n            } catch (err) {\n                const errorMsg = err.message.includes(\"URL Web App\") ? err.message : 'Gagal menghubungi server. Pastikan koneksi internet stabil dan URL Web App sudah benar.';\n                showMessage('error', 'Terjadi Kesalahan', errorMsg);\n            } finally {\n                \/\/ Kembalikan tombol seperti semula\n                btn.disabled = false;\n                btn.innerHTML = originalBtnText;\n            }\n        }\n\n        function showMessage(type, title, desc) {\n            const modal = document.getElementById('modal');\n            const icon = document.getElementById('modal-icon');\n            \n            document.getElementById('modal-title').textContent = title;\n            document.getElementById('modal-desc').textContent = desc;\n            \n            if (type === 'success') {\n                icon.className = 'w-20 h-20 mb-5 rounded-full flex items-center justify-center bg-green-100 text-green-500 ring-8 ring-green-50';\n                icon.innerHTML = `<svg class=\"w-10 h-10\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M5 13l4 4L19 7\"><\/path><\/svg>`;\n            } else {\n                icon.className = 'w-20 h-20 mb-5 rounded-full flex items-center justify-center bg-red-100 text-red-500 ring-8 ring-red-50';\n                icon.innerHTML = `<svg class=\"w-10 h-10\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"3\" d=\"M6 18L18 6M6 6l12 12\"><\/path><\/svg>`;\n            }\n            \n            modal.classList.remove('hidden');\n            void modal.offsetWidth; \/\/ Trigger reflow untuk CSS transition\n            modal.classList.remove('opacity-0');\n            modal.querySelector('div').classList.remove('scale-95');\n        }\n\n        function closeModal() {\n            const modal = document.getElementById('modal');\n            modal.classList.add('opacity-0');\n            modal.querySelector('div').classList.add('scale-95');\n            setTimeout(() => { modal.classList.add('hidden'); }, 300);\n        }\n\n        function toggleGuide() {\n            const content = document.getElementById('guide-content');\n            const icon = document.getElementById('guide-icon');\n            if (content.classList.contains('hidden')) {\n                content.classList.remove('hidden');\n                icon.classList.add('rotate-180');\n            } else {\n                content.classList.add('hidden');\n                icon.classList.remove('rotate-180');\n            }\n        }\n    <\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pendaftaran Ekstrakurikuler Pendaftaran Ekstrakurikuler SDIT MTA MATESIH Tahun Ajaran 2026\/2027 Penting: Setiap ekstrakurikuler memiliki batasan jumlah kuota siswa. Formulir tidak &hellip; <\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-226","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/226","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=226"}],"version-history":[{"count":9,"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/226\/revisions"}],"predecessor-version":[{"id":245,"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=\/wp\/v2\/pages\/226\/revisions\/245"}],"wp:attachment":[{"href":"https:\/\/sditmtamatesih.sch.id\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}