Prototaip Portal Latihan Kepimpinan<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8; \/* Latar belakang yang lembut *\/\n color: #333;\n }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1.5rem;\n }\n .card {\n background-color: #ffffff;\n border-radius: 1rem; \/* Sudut bulat *\/\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n padding: 2rem;\n margin-bottom: 1.5rem;\n }\n \/* Warna utama: Hijau Emerald *\/\n .btn-primary {\n background-color: #059669; \/* Emerald 600 *\/\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.75rem; \/* Sudut bulat *\/\n font-weight: 600;\n transition: background-color 0.3s ease;\n }\n .btn-primary:hover {\n background-color: #047857; \/* Emerald 700 *\/\n }\n \/* Warna sekunder: Kelabu Muda dengan teks hijau *\/\n .btn-secondary {\n background-color: #f3f4f6; \/* Gray 100 *\/\n color: #047857; \/* Emerald 700 *\/\n padding: 0.5rem 1rem; \/* Saiz butang dikecilkan *\/\n border-radius: 0.75rem;\n font-weight: 600;\n transition: background-color 0.3s ease;\n font-size: 0.875rem; \/* Saiz teks dikecilkan *\/\n }\n .btn-secondary:hover {\n background-color: #e5e7eb; \/* Gray 200 *\/\n }\n input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], select, textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db; \/* Kelabu sederhana *\/\n border-radius: 0.5rem; \/* Sudut bulat *\/\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n font-size: 1rem;\n }\n label {\n display: block;\n margin-bottom: 0.25rem;\n font-weight: 600;\n color: #4b5563; \/* Kelabu gelap *\/\n }\n .category-item, .sub-category-item {\n background-color: #f9fafb;\n padding: 1rem;\n border-radius: 0.75rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.2s ease;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .category-item:hover, .sub-category-item:hover {\n background-color: #e5e7eb;\n transform: translateY(-2px);\n }\n .category-item h3, .sub-category-item h4 {\n font-weight: 600;\n color: #047857; \/* Emerald 700 *\/\n }\n .category-content {\n margin-top: 1rem;\n padding-left: 1.5rem;\n border-left: 2px solid #a7f3d0; \/* Emerald 200 *\/\n }\n .material-item {\n background-color: #f9fafb;\n padding: 1rem;\n border-radius: 0.75rem;\n margin-bottom: 0.75rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .material-item a {\n color: #059669;\n font-weight: 600;\n }\n .material-item a:hover {\n text-decoration: underline;\n }\n .trainer-card {\n background-color: #f9fafb;\n border-radius: 0.75rem;\n padding: 1.5rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n .trainer-card h4 {\n font-weight: 700;\n color: #047857;\n margin-bottom: 0.5rem;\n }\n .trainer-card p {\n color: #4b5563;\n font-size: 0.95rem;\n margin-bottom: 0.25rem;\n }\n .optional-item {\n color: #6b7280; \/* Gray 500 *\/\n font-style: italic;\n }\n .optional-item h4 { \/* Style for the sub-category title itself *\/\n color: #6b7280 !important; \/* Override default color *\/\n font-style: italic;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col\">\n \n <header class=\"bg-gradient-to-r from-lime-500 to-emerald-600 text-white p-4 shadow-md rounded-b-lg\">\n <div class=\"container flex justify-between items-center\">\n <div class=\"flex items-center\"> \n <img decoding=\"async\" src=\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/PORTAL-AKP.png\" alt=\"Portal Logo\" class=\"h-14 mr-2\">\n <\/div>\n <nav>\n <button onclick=\"showView('login')\" class=\"btn-secondary mr-2\">Log Masuk<\/button>\n <button onclick=\"showView('trainingList')\" class=\"btn-secondary mr-2\">Latihan<\/button>\n <button onclick=\"showView('materials')\" class=\"btn-secondary mr-2\">Bahan<\/button>\n <button onclick=\"showView('akpPanel')\" class=\"btn-secondary mr-2\">Panel AKP<\/button>\n <button onclick=\"showView('participantDashboard')\" class=\"btn-secondary mr-2\">Dashboard<\/button>\n <button onclick=\"showView('adminDashboard')\" class=\"btn-secondary\">Admin<\/button>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-grow container mt-8\">\n \n <section id=\"loginView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Log Masuk \/ Daftar<\/h2>\n <div class=\"grid md:grid-cols-2 gap-8\">\n \n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Log Masuk<\/h3>\n <form onsubmit=\"event.preventDefault(); alert('Fungsi Log Masuk Belum Diimplementasi');\">\n <label for=\"loginEmail\">E-mel:<\/label>\n <input type=\"email\" id=\"loginEmail\" placeholder=\"emel@contoh.com\" required>\n\n <label for=\"loginPassword\">Kata Laluan:<\/label>\n <input type=\"password\" id=\"loginPassword\" placeholder=\"********\" required>\n\n <button type=\"submit\" class=\"btn-primary w-full mt-4\">Log Masuk<\/button>\n <\/form>\n <\/div>\n \n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Daftar Ahli Baru<\/h3>\n <form onsubmit=\"event.preventDefault(); alert('Fungsi Pendaftaran Belum Diimplementasi');\">\n <label for=\"registerKawasan\">Kawasan Parlimen (P):<\/label>\n <select id=\"registerKawasan\" required onchange=\"populateDUNs()\">\n <option value=\"\">Pilih Kawasan Parlimen<\/option>\n <\/select>\n\n <label for=\"registerDUN\">DUN:<\/label>\n <select id=\"registerDUN\" required>\n <option value=\"\">Pilih DUN<\/option>\n <\/select>\n\n <label for=\"registerName\">Nama Penuh:<\/label>\n <input type=\"text\" id=\"registerName\" placeholder=\"Nama Penuh Anda\" required>\n\n <label for=\"registerEmail\">E-mel:<\/label>\n <input type=\"email\" id=\"registerEmail\" placeholder=\"emel@contoh.com\" required>\n\n <label for=\"registerPassword\">Kata Laluan:<\/label>\n <input type=\"password\" id=\"registerPassword\" placeholder=\"********\" required>\n\n <button type=\"submit\" class=\"btn-primary w-full mt-4\">Daftar<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"trainingListView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Senarai Latihan & Kursus<\/h2>\n <div id=\"mainTrainingCategories\" class=\"space-y-4\">\n <h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Latihan<\/h3>\n \n <\/div>\n <div id=\"mainCourseCategories\" class=\"space-y-4 mt-8\">\n <h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Kursus<\/h3>\n \n <\/div>\n <div id=\"subCategoryContent\" class=\"hidden mt-8\">\n <button onclick=\"showMainCategories()\" class=\"btn-secondary mb-4\">\u2190 Kembali ke Kategori Utama<\/button>\n <h3 id=\"currentCategoryTitle\" class=\"text-2xl font-bold mb-4 text-emerald-700\"><\/h3>\n <div id=\"currentSubCategoryList\" class=\"space-y-3\">\n \n <\/div>\n <div id=\"quizContainer\" class=\"hidden mt-6 p-6 bg-gray-50 rounded-lg shadow-inner\">\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"materialsView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Bahan Rujukan<\/h2>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Artikel Motivasi Kepimpinan<\/h3>\n <div id=\"articleList\" class=\"space-y-3\">\n \n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Risalah Ringkas (PDF)<\/h3>\n <div id=\"pdfList\" class=\"space-y-3\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"akpPanelView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Panel Jurulatih AKP<\/h2>\n <div id=\"trainerList\" class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"participantDashboardView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Personal Dashboard<\/h2>\n <div class=\"text-center mb-8\">\n <p class=\"text-xl font-semibold\">Selamat Datang, <span id=\"participantName\">Nama Peserta<\/span>!<\/p>\n <p class=\"text-gray-600\">ID Unik: <span id=\"participantId\">AKP-XXX<\/span><\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Ringkasan Ujian DISC<\/h3>\n <p class=\"text-lg mb-2\">Gaya Utama Anda: <span class=\"font-bold text-emerald-600\" id=\"discResult\">Dominance (D)<\/span><\/p>\n <p class=\"text-gray-700\">Kecenderungan: Anda seorang yang berorientasikan hasil, tegas, dan suka mengambil cabaran.<\/p>\n <button class=\"btn-secondary mt-4\">Baca Lebih Lanjut Mengenai DISC<\/button>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Ringkasan Ujian MBTI<\/h3>\n <p class=\"text-lg mb-2\">Jenis Anda: <span class=\"font-bold text-emerald-600\" id=\"mbtiResult\">INTJ<\/span><\/p>\n <p class=\"text-gray-700\">Kecenderungan: Individu yang analitikal, strategik, dan berfikiran logik.<\/p>\n <button class=\"btn-secondary mt-4\">Baca Lebih Lanjut Mengenai MBTI<\/button>\n <\/div>\n <\/div>\n <div class=\"mt-8 text-center\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Laporan Prestasi Keseluruhan<\/h3>\n <p class=\"text-gray-700\">Graf dan data terperinci mengenai perkembangan anda dalam latihan akan dipaparkan di sini.<\/p>\n <div class=\"bg-gray-100 p-6 rounded-lg mt-4 text-gray-500\">\n \n [Graf Perkembangan Prestasi Anda]\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"adminDashboardView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Admin Dashboard<\/h2>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8\">\n <div class=\"bg-emerald-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-emerald-800\">Jumlah Peserta Berdaftar<\/h3>\n <p class=\"text-4xl font-bold text-emerald-600\" id=\"totalParticipants\">0<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-gray-800\">Latihan Diselesaikan<\/h3>\n <p class=\"text-4xl font-bold text-gray-600\" id=\"quizzesCompleted\">0<\/p>\n <\/div>\n <div class=\"bg-red-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-red-800\">Purata Skor Keseluruhan<\/h3>\n <p class=\"text-4xl font-bold text-red-600\" id=\"overallAvgScore\">0%<\/p>\n <\/div>\n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Segmen Latihan & Peratus Pendaftaran<\/h3>\n <div id=\"trainingEnrollmentSummary\" class=\"space-y-4 mb-8\">\n \n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Pendaftaran Kursus<\/h3>\n <div id=\"courseEnrollmentSummary\" class=\"space-y-4 mb-8\">\n \n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Mengikut Parlimen<\/h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white rounded-lg shadow-md\">\n <thead>\n <tr class=\"bg-gray-100 text-gray-600 uppercase text-sm leading-normal rounded-t-lg\">\n <th class=\"py-3 px-6 text-left rounded-tl-lg\">Parlimen<\/th>\n <th class=\"py-3 px-6 text-left\">Bil. Peserta<\/th>\n <th class=\"py-3 px-6 text-left\">Purata DISC (D)<\/th>\n <th class=\"py-3 px-6 text-left\">Purata MBTI (I)<\/th>\n <th class=\"py-3 px-6 text-left rounded-tr-lg\">Status Kuiz Selesai<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"parlimenAnalysisTableBody\" class=\"text-gray-700 text-sm font-light\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Taburan Jenis Personaliti<\/h3>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">DISC Distribution<\/h4>\n <p class=\"text-gray-600\">D: 30%, I: 25%, S: 20%, C: 25%<\/p>\n <div class=\"bg-gray-200 h-4 rounded-full mt-2\">\n <div class=\"bg-emerald-500 h-full w-[30%] rounded-l-full inline-block\"><\/div>\n <div class=\"bg-gray-500 h-full w-[25%] inline-block\"><\/div>\n <div class=\"bg-red-500 h-full w-[20%] inline-block\"><\/div>\n <div class=\"bg-gray-200 h-full w-[25%] rounded-r-full inline-block\"><\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">MBTI Popular Types<\/h4>\n <ul class=\"list-disc list-inside text-gray-600\">\n <li>ISTJ: 15%<\/li>\n <li>ENFP: 12%<\/li>\n <li>INTJ: 10%<\/li>\n <li>ESFJ: 9%<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Data Kawasan Parlimen dan DUN\n const terengganuAreas = {\n \"P033 Besut\": [\"N01 Kuala Besut\", \"N02 Kota Putera\", \"N03 Jertih\", \"N04 Hulu Besut\"],\n \"P034 Setiu\": [\"N05 Jabi\", \"N06 Permaisuri\", \"N07 Langkap\", \"N08 Batu Rakit\"],\n \"P035 Kuala Nerus\": [\"N09 Tepuh\", \"N10 Buluh Gading\", \"N11 Seberang Takir\", \"N12 Bukit Tunggal\"],\n \"P036 Kuala Terengganu\": [\"N13 Wakaf Mempelam\", \"N14 Bandar\", \"N15 Ladang\", \"N16 Batu Buruk\"],\n \"P037 Marang\": [\"N17 Alur Limbat\", \"N18 Bukit Payung\", \"N19 Ru Rendang\", \"N20 Pengkalan Berangan\"],\n \"P038 Hulu Terengganu\": [\"N21 Telemung\", \"N22 Manir\", \"N23 Kuala Berang\", \"N24 Ajil\"],\n \"P039 Dungun\": [\"N25 Bukit Besi\", \"N26 Rantau Abang\", \"N27 Sura\", \"N28 Paka\"],\n \"P040 Kemaman\": [\"N29 Kemasik\", \"N30 Kijal\", \"N31 Cukai\", \"N32 Air Putih\"]\n };\n\n \/\/ Data Kandungan Latihan\n const trainingContent = {\n \"KENALI DIRI - UJIAN PERSONALITI KEPIMPINAN\": {\n \"Kenal Cara Fikir & Potensi Otak\": [\n \"Herrmann Brain Dominance Instrument (HBDI)\",\n \"Thinking Talents\",\n \"Kepner-Tregoe Thinking Styles\",\n \"Six Thinking Hats Edward de Bono\"\n ],\n \"Kenal Personaliti Diri\": [\n \"MBTI (16 Personalities)\",\n \"Big Five (OCEAN)\",\n \"Enneagram\",\n \"Color Brain\",\n \"DOPE Personality\",\n \"Four Temperaments (Choleric, etc.)\",\n \"Kuiz Contoh: Gaya Personaliti DISC\" \/\/ Kuiz contoh dimasukkan di sini\n ],\n \"Gaya Kepimpinan & Kerja Berpasukan\": [\n \"DISC (Teori)\",\n \"Leadership Style Questionnaire\",\n \"Situational Leadership (Hersey & Blanchard)\"\n ],\n \"Gaya Pembelajaran\": [\n \"VARK\",\n \"Multiple Intelligences (Howard Gardner)\"\n ],\n \"Gaya Urus Konflik & Komunikasi\": [\n \"Thomas-Kilmann Conflict Mode Instrument (TKI)\",\n \"Collaboration Conflict Styles\",\n \"Animal Conflict Style (Owl, Shark, etc.)\"\n ],\n \"Emosi dan Kesihatan\": [\n \"Patient Health Questionnaire (PHQ)\",\n \"Depression, Anxiety & Stress Scale (DASS)\",\n \"Copenhagen Burnout Inventories (CBI)\",\n \"World Health Organization Disability Assessment Schedule (WHODAS)\"\n ]\n },\n \"TIPS PENGURUSAN\": {\n \"Ilmu Perancangan Strategik\": [\n \"SWOT Analysis \u2013 Kekuatan, Kelemahan, Peluang, Ancaman\",\n \"SOSTAC \u2013 Situation, Objectives, Strategy, Tactics, Action, Control\",\n \"OKR \u2013 Objective & Key Results\",\n \"TMBO \u2013 Time Management by Objective\"\n ],\n \"Pengurusan Prestasi & KPI\": [\n \"SMART Goals \u2013 Specific, Measurable, Achievable, Relevant, Time-bound\",\n \"KPI vs KRA \u2013 Indikator Prestasi vs Hasil Utama\",\n \"Balance Scorecard (BSC) \u2013 Prestasi organisasi dari 4 perspektif\"\n ],\n \"Imej, Kepimpinan dan Motivasi\": [\n \"Penampilan & Imej Diri\",\n \"Maslow Hierarchy of Needs \u2013 Keperluan asas hingga self-actualization\",\n \"Herzberg Theory \u2013 Faktor motivasi & ketidakpuasan kerja\",\n \"Goleman\u2019s Emotional Intelligence \u2013 5 elemen kecerdasan emosi\"\n ],\n \"Pengurusan Organisasi & Pasukan\": [\n \"RACI Matrix \u2013Responsible, Accountable, Consulted, Informed\",\n \"Tuckman Model \u2013 Forming, Storming, Norming, Performing\",\n \"Delegation Matrix (Eisenhower Box) \u2013 Prioriti dan pelimpahan tugas\"\n ],\n \"Pengurusan Masa & Produktiviti\": [\n \"Eisenhower Matrix \u2013 Urgent vs Important\",\n \"Pomodoro Technique \u2013 Kaedah kerja dalam blok masa 25 minit\",\n \"Time Blocking \u2013 Jadual berdasarkan tugasan\"\n ]\n },\n \"DAKWAH & KOMUNIKASI KEPIMPINAN\": { \/\/ Updated to Title Case\n \"Dakwah & Komunikasi Kepimpinan\": [\n \"Fiqh Dakwah\",\n \"Fiqh Aulawiyyat\",\n \"Maratib Amal\",\n \"Kemahiran Rapport \/ PR\",\n \"Public Speaking\",\n \"Protokol & Pengurusan Acara\"\n ]\n },\n \"SENARAI KURSUS\": { \/\/ New main category\n \"Kursus Kepimpinan\": [\n \"AMILIN Competency Workshop (AMILIN)\",\n \"High Performance Talent (HPT)\"\n ],\n \"Kursus Darul Iman\": [ \/\/ Optional courses\n { title: \"Dasar Integriti Darul Iman (DIDI)\", optional: true },\n { title: \"Islamic Digital Leadership Development Training\", optional: true },\n { title: \"Itqan Insani\", optional: true }\n ]\n }\n };\n\n \/\/ Data Kandungan Bahan\n const materialsContent = {\n \"Artikel Motivasi Kepimpinan\": [\n { title: \"Kepimpinan Berkesan dalam Organisasi\", link: \"#\" },\n { title: \"Membina Pasukan yang Kuat\", link: \"#\" },\n { title: \"Pengurusan Stres untuk Pemimpin\", link: \"#\" }, \/\/ New\n { title: \"Meningkatkan Kecerdasan Emosi\", link: \"#\" }, \/\/ New\n { title: \"Visi dan Misi Organisasi\", link: \"#\" } \/\/ New\n ],\n \"Risalah Ringkas (PDF)\": [\n { title: \"Panduan Ringkas RACI Matrix\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Checklist Pengurusan Masa\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Tips Peningkatan EQ\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Modul Komunikasi Berkesan\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true }, \/\/ New\n { title: \"Prinsip Delegasi Tugas\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true } \/\/ New\n ]\n };\n\n \/\/ Data Jurulatih Panel AKP (Mock Data)\n const akpTrainers = [\n { name: \"Dr. Ahmad Fadhli\", specialization: \"Personaliti & Psikologi Organisasi\", position: \"AKP Pusat\" },\n { name: \"Puan Hajar Binti Abdullah\", specialization: \"Kepimpinan Strategik & Pengurusan\", position: \"AKP Negeri\" },\n { name: \"Ustaz Kamal bin Idris\", specialization: \"Fiqh Dakwah & Komunikasi\", position: \"AKP Pusat\" },\n { name: \"Cikgu Salmah bt Abu Bakar\", specialization: \"Pengurusan Masa & Produktiviti\", position: \"AKP Kawasan (Kuala Terengganu)\" },\n { name: \"Encik Razali bin Kassim\", specialization: \"Kerja Berpasukan & Resolusi Konflik\", position: \"AKP Negeri\" },\n { name: \"Puan Siti Aisyah\", specialization: \"Motivasi & Pembangunan Diri\", position: \"AKP Kawasan (Dungun)\" }\n ];\n\n\n \/\/ Fungsi untuk menukar paparan antara halaman\n function showView(viewId) {\n \/\/ Sembunyikan semua paparan terlebih dahulu\n document.querySelectorAll('.view').forEach(view => {\n view.classList.add('hidden');\n });\n \/\/ Paparkan paparan yang diminta\n document.getElementById(viewId + 'View').classList.remove('hidden');\n\n \/\/ Logik tambahan untuk paparan Latihan, Bahan, dan Panel AKP\n if (viewId === 'trainingList') {\n loadTrainingCategories(); \/\/ Panggil fungsi baru untuk memuatkan kedua-dua segmen latihan\/kursus\n } else if (viewId === 'materials') {\n loadMaterialsContent();\n } else if (viewId === 'akpPanel') { \/\/ Panggil fungsi untuk memuatkan data jurulatih\n loadAkpPanelData();\n } else if (viewId === 'adminDashboard') {\n generateAdminDashboardData(); \/\/ Jana data untuk dashboard admin\n }\n }\n\n \/\/ Fungsi untuk mengisi dropdown Kawasan Parlimen\n function populateKawasan() {\n const kawasanSelect = document.getElementById('registerKawasan');\n kawasanSelect.innerHTML = '<option value=\"\">Pilih Kawasan Parlimen<\/option>';\n for (const kawasan in terengganuAreas) {\n const option = document.createElement('option');\n option.value = kawasan;\n option.textContent = kawasan;\n kawasanSelect.appendChild(option);\n }\n }\n\n \/\/ Fungsi untuk mengisi dropdown DUN berdasarkan Kawasan Parlimen yang dipilih\n function populateDUNs() {\n const kawasanSelect = document.getElementById('registerKawasan');\n const dunSelect = document.getElementById('registerDUN');\n const selectedKawasan = kawasanSelect.value;\n\n dunSelect.innerHTML = '<option value=\"\">Pilih DUN<\/option>'; \/\/ Reset DUN options\n\n if (selectedKawasan && terengganuAreas[selectedKawasan]) {\n terengganuAreas[selectedKawasan].forEach(dun => {\n const option = document.createElement('option');\n option.value = dun;\n option.textContent = dun;\n dunSelect.appendChild(option);\n });\n }\n }\n\n \/\/ Fungsi untuk memuatkan kategori latihan dan kursus\n function loadTrainingCategories() {\n const mainTrainingCategoriesDiv = document.getElementById('mainTrainingCategories');\n const mainCourseCategoriesDiv = document.getElementById('mainCourseCategories');\n \n \/\/ Pastikan kedua-dua segmen utama latihan dan kursus kelihatan\n mainTrainingCategoriesDiv.classList.remove('hidden');\n mainCourseCategoriesDiv.classList.remove('hidden');\n document.getElementById('subCategoryContent').classList.add('hidden'); \/\/ Sembunyikan sub-kategori\n\n mainTrainingCategoriesDiv.innerHTML = '<h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Latihan<\/h3>';\n mainCourseCategoriesDiv.innerHTML = '<h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Kursus<\/h3>';\n\n\n \/\/ Muatkan Kategori Latihan Utama\n for (const mainCat in trainingContent) {\n if (mainCat !== \"SENARAI KURSUS\") { \/\/ Hanya kategori latihan\n const categoryItem = document.createElement('div');\n categoryItem.className = 'category-item';\n categoryItem.innerHTML = `\n <h3 class=\"text-xl\">${toTitleCase(mainCat)}<\/h3>\n <span>\u203a<\/span>\n `;\n categoryItem.onclick = () => showSubCategories(mainCat);\n mainTrainingCategoriesDiv.appendChild(categoryItem);\n }\n }\n\n \/\/ Muatkan Kategori Kursus\n if (trainingContent[\"SENARAI KURSUS\"]) {\n for (const subCat in trainingContent[\"SENARAI KURSUS\"]) {\n const categoryItem = document.createElement('div');\n categoryItem.className = 'category-item';\n \/\/ Apply optional-item class to the category item itself if it's \"Kursus Darul Iman\"\n if (subCat === \"Kursus Darul Iman\") {\n categoryItem.classList.add('optional-item');\n }\n categoryItem.innerHTML = `\n <h3 class=\"text-xl\">${toTitleCase(subCat)}<\/h3>\n <span>\u203a<\/span>\n `;\n categoryItem.onclick = () => showTrainingItems(\"SENARAI KURSUS\", subCat); \/\/ Panggil showTrainingItems untuk kursus\n mainCourseCategoriesDiv.appendChild(categoryItem);\n }\n }\n }\n\n \/\/ Fungsi untuk memaparkan sub-kategori atau item latihan\n function showSubCategories(mainCategory) {\n document.getElementById('mainTrainingCategories').classList.add('hidden');\n document.getElementById('mainCourseCategories').classList.add('hidden'); \/\/ Sembunyikan juga kategori kursus utama\n document.getElementById('subCategoryContent').classList.remove('hidden');\n document.getElementById('currentCategoryTitle').textContent = toTitleCase(mainCategory);\n\n const subCategoryListDiv = document.getElementById('currentSubCategoryList');\n subCategoryListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n document.getElementById('quizContainer').classList.add('hidden'); \/\/ Sembunyikan kuiz jika ada\n\n const subCategories = trainingContent[mainCategory];\n for (const subCat in subCategories) {\n const subCategoryItem = document.createElement('div');\n subCategoryItem.className = 'sub-category-item';\n \/\/ Apply optional-item class to the sub-category title itself if it's \"Kursus Darul Iman\"\n if (mainCategory === \"SENARAI KURSUS\" && subCat === \"Kursus Darul Iman\") {\n subCategoryItem.classList.add('optional-item');\n }\n subCategoryItem.innerHTML = `\n <h4 class=\"text-lg\">${toTitleCase(subCat)}<\/h4>\n <span>\u203a<\/span>\n `;\n subCategoryItem.onclick = () => showTrainingItems(mainCategory, subCat);\n subCategoryListDiv.appendChild(subCategoryItem);\n }\n }\n\n \/\/ Fungsi untuk memaparkan item latihan dalam sub-kategori\n function showTrainingItems(mainCategory, subCategory) {\n const subCategoryListDiv = document.getElementById('currentSubCategoryList');\n subCategoryListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n document.getElementById('currentCategoryTitle').textContent = `${toTitleCase(mainCategory)} \u203a ${toTitleCase(subCategory)}`;\n\n const items = trainingContent[mainCategory][subCategory];\n if (items) {\n items.forEach(item => {\n let itemTitle;\n let isOptional = false;\n\n if (typeof item === 'object' && item.title) {\n itemTitle = item.title;\n isOptional = item.optional || false;\n } else {\n itemTitle = item;\n }\n\n if (itemTitle === \"Kuiz Contoh: Gaya Personaliti DISC\") {\n \/\/ Jika item adalah kuiz contoh, paparkan borang kuiz\n document.getElementById('quizContainer').classList.remove('hidden');\n document.getElementById('quizContainer').innerHTML = `\n <h3 class=\"text-2xl font-bold text-center mb-6 text-emerald-700\">Kuiz Contoh: Gaya Personaliti DISC<\/h3>\n <form onsubmit=\"event.preventDefault(); submitQuiz();\">\n <div class=\"mb-4\">\n <label for=\"uniqueId\" class=\"text-lg\">Sila masukkan ID Unik Peserta anda:<\/label>\n <input type=\"text\" id=\"uniqueId\" placeholder=\"Contoh: AKP-001\" required class=\"text-xl\">\n <\/div>\n\n <div class=\"mb-6\">\n <p class=\"text-lg font-semibold mb-2\">Soalan 1: Apabila berhadapan dengan masalah, saya cenderung untuk:<\/p>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"D\" class=\"mr-2\">a) Bertindak pantas dan mengambil alih.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"I\" class=\"mr-2\">b) Mencari sokongan dan berbincang dengan orang lain.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"S\" class=\"mr-2\">c) Menganalisis situasi dengan teliti sebelum bertindak.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"C\" class=\"mr-2\">d) Mengikut prosedur dan mencari penyelesaian yang terbukti.<\/label>\n <\/div>\n\n <div class=\"mb-6\">\n <p class=\"text-lg font-semibold mb-2\">Soalan 2: Dalam persekitaran kerja, saya paling selesa dengan:<\/p>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"D\" class=\"mr-2\">a) Mencapai matlamat yang mencabar.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"I\" class=\"mr-2\">b) Berinteraksi dan membina hubungan.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"S\" class=\"mr-2\">c) Kestabilan dan rutin yang jelas.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"C\" class=\"mr-2\">d) Ketepatan dan kualiti kerja.<\/label>\n <\/div>\n\n <button type=\"submit\" class=\"btn-primary w-full\">Hantar Jawapan<\/button>\n <\/form>\n `;\n } else {\n \/\/ Item latihan biasa\n const trainingItemDiv = document.createElement('div');\n trainingItemDiv.className = `material-item ${isOptional ? 'optional-item' : ''}`; \/\/ Apply optional class\n trainingItemDiv.innerHTML = `\n <p class=\"text-lg text-gray-700 ${isOptional ? 'text-gray-500 italic' : ''}\">${itemTitle}<\/p>\n <a href=\"#\" class=\"btn-secondary text-sm\">Lihat<\/a>\n `;\n subCategoryListDiv.appendChild(trainingItemDiv);\n }\n });\n }\n }\n\n \/\/ Fungsi untuk kembali ke paparan kategori utama\n function showMainCategories() {\n document.getElementById('mainTrainingCategories').classList.remove('hidden');\n document.getElementById('mainCourseCategories').classList.remove('hidden');\n document.getElementById('subCategoryContent').classList.add('hidden');\n document.getElementById('quizContainer').classList.add('hidden'); \/\/ Pastikan kuiz disembunyikan\n loadTrainingCategories(); \/\/ Muat semula kategori utama\n }\n\n \/\/ Fungsi untuk memuatkan kandungan Bahan\n function loadMaterialsContent() {\n const articleListDiv = document.getElementById('articleList');\n const pdfListDiv = document.getElementById('pdfList');\n articleListDiv.innerHTML = '';\n pdfListDiv.innerHTML = '';\n\n \/\/ Muatkan Artikel\n materialsContent[\"Artikel Motivasi Kepimpinan\"].forEach(item => {\n const articleItem = document.createElement('div');\n articleItem.className = 'material-item';\n articleItem.innerHTML = `\n <p class=\"text-lg text-gray-700\">${item.title}<\/p>\n <a href=\"${item.link}\" target=\"_blank\" class=\"btn-secondary text-sm\">Baca<\/a>\n `;\n articleListDiv.appendChild(articleItem);\n });\n\n \/\/ Muatkan PDF\n materialsContent[\"Risalah Ringkas (PDF)\"].forEach(item => {\n const pdfItem = document.createElement('div');\n pdfItem.className = 'material-item';\n pdfItem.innerHTML = `\n <p class=\"text-lg text-gray-700\">${item.title}<\/p>\n <a href=\"${item.link}\" ${item.download ? 'download' : ''} target=\"_blank\" class=\"btn-secondary text-sm\">Muat Turun<\/a>\n `;\n pdfListDiv.appendChild(pdfItem);\n });\n }\n\n \/\/ Fungsi untuk memuatkan data jurulatih Panel AKP\n function loadAkpPanelData() {\n const trainerListDiv = document.getElementById('trainerList');\n trainerListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n\n akpTrainers.forEach(trainer => {\n const trainerCard = document.createElement('div');\n trainerCard.className = 'trainer-card';\n trainerCard.innerHTML = `\n <h4 class=\"text-xl\">${trainer.name}<\/h4>\n <p><strong>Bidang Kepakaran:<\/strong> ${trainer.specialization}<\/p>\n <p><strong>Jawatan:<\/strong> ${trainer.position}<\/p>\n `;\n trainerListDiv.appendChild(trainerCard);\n });\n }\n\n \/\/ Fungsi untuk menjana data olok-olok untuk papan pemuka admin\n function generateAdminDashboardData() {\n \/\/ Data Ringkasan Utama\n document.getElementById('totalParticipants').innerText = (Math.floor(Math.random() * 500) + 1000).toLocaleString(); \/\/ 1000-1500\n document.getElementById('quizzesCompleted').innerText = (Math.floor(Math.random() * 400) + 700).toLocaleString(); \/\/ 700-1100\n document.getElementById('overallAvgScore').innerText = (Math.floor(Math.random() * 10) + 80) + '%'; \/\/ 80-90%\n\n \/\/ Analisis Segmen Latihan & Peratus Pendaftaran\n const trainingEnrollmentSummaryDiv = document.getElementById('trainingEnrollmentSummary');\n trainingEnrollmentSummaryDiv.innerHTML = ''; \/\/ Kosongkan sedia ada\n\n for (const mainCat in trainingContent) {\n if (mainCat !== \"SENARAI KURSUS\") { \/\/ Hanya kategori latihan, bukan kursus\n const enrollmentPercentage = Math.floor(Math.random() * 40) + 50; \/\/ 50-90%\n const enrollmentItem = document.createElement('div');\n enrollmentItem.className = 'bg-gray-50 p-4 rounded-lg shadow-inner';\n enrollmentItem.innerHTML = `\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">${toTitleCase(mainCat)}<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-emerald-500 h-2.5 rounded-full\" style=\"width: ${enrollmentPercentage}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${enrollmentPercentage}%<\/span>\n <\/div>\n `;\n trainingEnrollmentSummaryDiv.appendChild(enrollmentItem);\n }\n }\n\n \/\/ Analisis Pendaftaran Kursus\n const courseEnrollmentSummaryDiv = document.getElementById('courseEnrollmentSummary');\n courseEnrollmentSummaryDiv.innerHTML = '';\n\n const kursusKepimpinanEnrollment = Math.floor(Math.random() * 30) + 60; \/\/ 60-90%\n const kursusDarulImanEnrollment = Math.floor(Math.random() * 20) + 40; \/\/ 40-60% (optional, so lower)\n\n courseEnrollmentSummaryDiv.innerHTML += `\n <div class=\"bg-gray-50 p-4 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">Kursus Kepimpinan<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-emerald-500 h-2.5 rounded-full\" style=\"width: ${kursusKepimpinanEnrollment}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${kursusKepimpinanEnrollment}%<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">Kursus Darul Iman (Optional)<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-gray-500 h-2.5 rounded-full\" style=\"width: ${kursusDarulImanEnrollment}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${kursusDarulImanEnrollment}%<\/span>\n <\/div>\n <\/div>\n `;\n\n\n \/\/ Analisis Mengikut Parlimen\n const parlimenAnalysisTableBody = document.getElementById('parlimenAnalysisTableBody');\n parlimenAnalysisTableBody.innerHTML = ''; \/\/ Kosongkan sedia ada\n\n for (const parlimen in terengganuAreas) {\n \/\/ Generate mock data for each parliamentary area\n const numParticipants = Math.floor(Math.random() * 300) + 100; \/\/ 100-400 participants per Parlimen\n const avgDiscD = (Math.random() * 2 + 6).toFixed(1); \/\/ 6.0-8.0\n const avgMbtiI = (Math.random() * 2 + 6).toFixed(1); \/\/ 6.0-8.0\n const quizCompletionStatus = Math.floor(Math.random() * 20) + 70; \/\/ 70-90%\n\n const row = document.createElement('tr');\n row.className = 'border-b border-gray-200 hover:bg-gray-50';\n row.innerHTML = `\n <td class=\"py-3 px-6 text-left whitespace-nowrap\">${parlimen}<\/td>\n <td class=\"py-3 px-6 text-left\">${numParticipants}<\/td>\n <td class=\"py-3 px-6 text-left\">${avgDiscD}<\/td>\n <td class=\"py-3 px-6 text-left\">${avgMbtiI}<\/td>\n <td class=\"py-3 px-6 text-left\">${quizCompletionStatus}%<\/td>\n `;\n parlimenAnalysisTableBody.appendChild(row);\n }\n }\n\n\n \/\/ Fungsi untuk mengendalikan penghantaran kuiz (contoh sahaja)\n function submitQuiz() {\n const uniqueId = document.getElementById('uniqueId').value;\n if (uniqueId) {\n \/\/ Dalam aplikasi sebenar, data akan dihantar ke Google Sheet\/Firestore\n \/\/ Di sini, kita hanya tunjukkan mesej dan tukar paparan ke dashboard peserta\n alert(`Kuiz anda telah dihantar dengan ID Unik: ${uniqueId}. Keputusan akan diproses.`);\n \/\/ Kemas kini data mock untuk dashboard peserta\n document.getElementById('participantName').innerText = 'Peserta Contoh';\n document.getElementById('participantId').innerText = uniqueId;\n document.getElementById('discResult').innerText = 'Dominance (D)'; \/\/ Contoh hasil\n document.getElementById('mbtiResult').innerText = 'INTJ'; \/\/ Contoh hasil\n showView('participantDashboard');\n } else {\n alert('Sila masukkan ID Unik Peserta anda.');\n }\n }\n\n \/\/ Fungsi pembantu untuk menukar string kepada Title Case\n function toTitleCase(str) {\n return str.replace(\n \/\\w\\S*\/g,\n function(txt) {\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\n }\n ).replace(\/ (A|An|The|And|But|Or|Nor|As|At|By|For|From|In|Into|Near|Of|On|Onto|To|With|Vs?\\.?|Via)$\/i, function(txt){\n return txt.toLowerCase();\n });\n }\n\n\n \/\/ Tetapkan paparan awal kepada halaman log masuk dan muat data awal\n document.addEventListener('DOMContentLoaded', () => {\n populateKawasan(); \/\/ Isi dropdown Kawasan Parlimen\n loadTrainingCategories(); \/\/ Muatkan kategori latihan dan kursus\n loadMaterialsContent(); \/\/ Muatkan kandungan bahan\n showView('login'); \/\/ Paparkan halaman login sebagai permulaan\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]<\/p>\n","protected":false},"author":1,"featured_media":93,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Akademi Kepimpinan Pemuda (AKP) DPPNT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/akp.tarbiahkreatif.my\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Akademi Kepimpinan Pemuda (AKP) DPPNT\" \/>\n<meta property=\"og:description\" content=\"Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/akp.tarbiahkreatif.my\/\" \/>\n<meta property=\"og:site_name\" content=\"Akademi Kepimpinan Pemuda (AKP) DPPNT\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T04:05:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1408\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"isPartOf\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"datePublished\":\"2025-08-06T02:50:45+00:00\",\"dateModified\":\"2025-08-07T04:05:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/akp.tarbiahkreatif.my\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"contentUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"width\":1408,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/akp.tarbiahkreatif.my\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#website\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/akp.tarbiahkreatif.my\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#organization\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png\",\"contentUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png\",\"width\":157,\"height\":86,\"caption\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\"},\"image\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Akademi Kepimpinan Pemuda (AKP) DPPNT","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:\/\/akp.tarbiahkreatif.my\/","og_locale":"en_US","og_type":"article","og_title":"Akademi Kepimpinan Pemuda (AKP) DPPNT","og_description":"Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]","og_url":"https:\/\/akp.tarbiahkreatif.my\/","og_site_name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","article_modified_time":"2025-08-07T04:05:45+00:00","og_image":[{"width":1408,"height":768,"url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/akp.tarbiahkreatif.my\/","url":"https:\/\/akp.tarbiahkreatif.my\/","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","isPartOf":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#website"},"primaryImageOfPage":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage"},"image":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage"},"thumbnailUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","datePublished":"2025-08-06T02:50:45+00:00","dateModified":"2025-08-07T04:05:45+00:00","breadcrumb":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/akp.tarbiahkreatif.my\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage","url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","contentUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","width":1408,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/akp.tarbiahkreatif.my\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/akp.tarbiahkreatif.my\/#website","url":"https:\/\/akp.tarbiahkreatif.my\/","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","description":"","publisher":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/akp.tarbiahkreatif.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/akp.tarbiahkreatif.my\/#organization","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","url":"https:\/\/akp.tarbiahkreatif.my\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/","url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png","contentUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png","width":157,"height":86,"caption":"Akademi Kepimpinan Pemuda (AKP) DPPNT"},"image":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":35,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/97"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/media\/93"}],"wp:attachment":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":8,"date":"2025-08-06T02:50:45","date_gmt":"2025-08-06T02:50:45","guid":{"rendered":"https:\/\/akp.tarbiahkreatif.my\/?page_id=8"},"modified":"2025-08-07T04:05:45","modified_gmt":"2025-08-07T04:05:45","slug":"home","status":"publish","type":"page","link":"https:\/\/akp.tarbiahkreatif.my\/","title":{"rendered":"Home"},"content":{"rendered":"\n\n\n\n \n \n Prototaip Portal Latihan Kepimpinan<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n body {\n font-family: 'Inter', sans-serif;\n background-color: #f0f4f8; \/* Latar belakang yang lembut *\/\n color: #333;\n }\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 1.5rem;\n }\n .card {\n background-color: #ffffff;\n border-radius: 1rem; \/* Sudut bulat *\/\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n padding: 2rem;\n margin-bottom: 1.5rem;\n }\n \/* Warna utama: Hijau Emerald *\/\n .btn-primary {\n background-color: #059669; \/* Emerald 600 *\/\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 0.75rem; \/* Sudut bulat *\/\n font-weight: 600;\n transition: background-color 0.3s ease;\n }\n .btn-primary:hover {\n background-color: #047857; \/* Emerald 700 *\/\n }\n \/* Warna sekunder: Kelabu Muda dengan teks hijau *\/\n .btn-secondary {\n background-color: #f3f4f6; \/* Gray 100 *\/\n color: #047857; \/* Emerald 700 *\/\n padding: 0.5rem 1rem; \/* Saiz butang dikecilkan *\/\n border-radius: 0.75rem;\n font-weight: 600;\n transition: background-color 0.3s ease;\n font-size: 0.875rem; \/* Saiz teks dikecilkan *\/\n }\n .btn-secondary:hover {\n background-color: #e5e7eb; \/* Gray 200 *\/\n }\n input[type=\"text\"], input[type=\"email\"], input[type=\"password\"], select, textarea {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db; \/* Kelabu sederhana *\/\n border-radius: 0.5rem; \/* Sudut bulat *\/\n margin-top: 0.5rem;\n margin-bottom: 1rem;\n font-size: 1rem;\n }\n label {\n display: block;\n margin-bottom: 0.25rem;\n font-weight: 600;\n color: #4b5563; \/* Kelabu gelap *\/\n }\n .category-item, .sub-category-item {\n background-color: #f9fafb;\n padding: 1rem;\n border-radius: 0.75rem;\n margin-bottom: 0.75rem;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.2s ease;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .category-item:hover, .sub-category-item:hover {\n background-color: #e5e7eb;\n transform: translateY(-2px);\n }\n .category-item h3, .sub-category-item h4 {\n font-weight: 600;\n color: #047857; \/* Emerald 700 *\/\n }\n .category-content {\n margin-top: 1rem;\n padding-left: 1.5rem;\n border-left: 2px solid #a7f3d0; \/* Emerald 200 *\/\n }\n .material-item {\n background-color: #f9fafb;\n padding: 1rem;\n border-radius: 0.75rem;\n margin-bottom: 0.75rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .material-item a {\n color: #059669;\n font-weight: 600;\n }\n .material-item a:hover {\n text-decoration: underline;\n }\n .trainer-card {\n background-color: #f9fafb;\n border-radius: 0.75rem;\n padding: 1.5rem;\n box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n }\n .trainer-card h4 {\n font-weight: 700;\n color: #047857;\n margin-bottom: 0.5rem;\n }\n .trainer-card p {\n color: #4b5563;\n font-size: 0.95rem;\n margin-bottom: 0.25rem;\n }\n .optional-item {\n color: #6b7280; \/* Gray 500 *\/\n font-style: italic;\n }\n .optional-item h4 { \/* Style for the sub-category title itself *\/\n color: #6b7280 !important; \/* Override default color *\/\n font-style: italic;\n }\n <\/style>\n<\/head>\n<body class=\"min-h-screen flex flex-col\">\n \n <header class=\"bg-gradient-to-r from-lime-500 to-emerald-600 text-white p-4 shadow-md rounded-b-lg\">\n <div class=\"container flex justify-between items-center\">\n <div class=\"flex items-center\"> \n <img decoding=\"async\" src=\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/PORTAL-AKP.png\" alt=\"Portal Logo\" class=\"h-14 mr-2\">\n <\/div>\n <nav>\n <button onclick=\"showView('login')\" class=\"btn-secondary mr-2\">Log Masuk<\/button>\n <button onclick=\"showView('trainingList')\" class=\"btn-secondary mr-2\">Latihan<\/button>\n <button onclick=\"showView('materials')\" class=\"btn-secondary mr-2\">Bahan<\/button>\n <button onclick=\"showView('akpPanel')\" class=\"btn-secondary mr-2\">Panel AKP<\/button>\n <button onclick=\"showView('participantDashboard')\" class=\"btn-secondary mr-2\">Dashboard<\/button>\n <button onclick=\"showView('adminDashboard')\" class=\"btn-secondary\">Admin<\/button>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <main class=\"flex-grow container mt-8\">\n \n <section id=\"loginView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Log Masuk \/ Daftar<\/h2>\n <div class=\"grid md:grid-cols-2 gap-8\">\n \n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Log Masuk<\/h3>\n <form onsubmit=\"event.preventDefault(); alert('Fungsi Log Masuk Belum Diimplementasi');\">\n <label for=\"loginEmail\">E-mel:<\/label>\n <input type=\"email\" id=\"loginEmail\" placeholder=\"emel@contoh.com\" required>\n\n <label for=\"loginPassword\">Kata Laluan:<\/label>\n <input type=\"password\" id=\"loginPassword\" placeholder=\"********\" required>\n\n <button type=\"submit\" class=\"btn-primary w-full mt-4\">Log Masuk<\/button>\n <\/form>\n <\/div>\n \n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Daftar Ahli Baru<\/h3>\n <form onsubmit=\"event.preventDefault(); alert('Fungsi Pendaftaran Belum Diimplementasi');\">\n <label for=\"registerKawasan\">Kawasan Parlimen (P):<\/label>\n <select id=\"registerKawasan\" required onchange=\"populateDUNs()\">\n <option value=\"\">Pilih Kawasan Parlimen<\/option>\n <\/select>\n\n <label for=\"registerDUN\">DUN:<\/label>\n <select id=\"registerDUN\" required>\n <option value=\"\">Pilih DUN<\/option>\n <\/select>\n\n <label for=\"registerName\">Nama Penuh:<\/label>\n <input type=\"text\" id=\"registerName\" placeholder=\"Nama Penuh Anda\" required>\n\n <label for=\"registerEmail\">E-mel:<\/label>\n <input type=\"email\" id=\"registerEmail\" placeholder=\"emel@contoh.com\" required>\n\n <label for=\"registerPassword\">Kata Laluan:<\/label>\n <input type=\"password\" id=\"registerPassword\" placeholder=\"********\" required>\n\n <button type=\"submit\" class=\"btn-primary w-full mt-4\">Daftar<\/button>\n <\/form>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"trainingListView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Senarai Latihan & Kursus<\/h2>\n <div id=\"mainTrainingCategories\" class=\"space-y-4\">\n <h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Latihan<\/h3>\n \n <\/div>\n <div id=\"mainCourseCategories\" class=\"space-y-4 mt-8\">\n <h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Kursus<\/h3>\n \n <\/div>\n <div id=\"subCategoryContent\" class=\"hidden mt-8\">\n <button onclick=\"showMainCategories()\" class=\"btn-secondary mb-4\">\u2190 Kembali ke Kategori Utama<\/button>\n <h3 id=\"currentCategoryTitle\" class=\"text-2xl font-bold mb-4 text-emerald-700\"><\/h3>\n <div id=\"currentSubCategoryList\" class=\"space-y-3\">\n \n <\/div>\n <div id=\"quizContainer\" class=\"hidden mt-6 p-6 bg-gray-50 rounded-lg shadow-inner\">\n \n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"materialsView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Bahan Rujukan<\/h2>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Artikel Motivasi Kepimpinan<\/h3>\n <div id=\"articleList\" class=\"space-y-3\">\n \n <\/div>\n <\/div>\n <div>\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Risalah Ringkas (PDF)<\/h3>\n <div id=\"pdfList\" class=\"space-y-3\">\n \n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"akpPanelView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Panel Jurulatih AKP<\/h2>\n <div id=\"trainerList\" class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n \n <\/div>\n <\/section>\n\n \n <section id=\"participantDashboardView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Personal Dashboard<\/h2>\n <div class=\"text-center mb-8\">\n <p class=\"text-xl font-semibold\">Selamat Datang, <span id=\"participantName\">Nama Peserta<\/span>!<\/p>\n <p class=\"text-gray-600\">ID Unik: <span id=\"participantId\">AKP-XXX<\/span><\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Ringkasan Ujian DISC<\/h3>\n <p class=\"text-lg mb-2\">Gaya Utama Anda: <span class=\"font-bold text-emerald-600\" id=\"discResult\">Dominance (D)<\/span><\/p>\n <p class=\"text-gray-700\">Kecenderungan: Anda seorang yang berorientasikan hasil, tegas, dan suka mengambil cabaran.<\/p>\n <button class=\"btn-secondary mt-4\">Baca Lebih Lanjut Mengenai DISC<\/button>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Ringkasan Ujian MBTI<\/h3>\n <p class=\"text-lg mb-2\">Jenis Anda: <span class=\"font-bold text-emerald-600\" id=\"mbtiResult\">INTJ<\/span><\/p>\n <p class=\"text-gray-700\">Kecenderungan: Individu yang analitikal, strategik, dan berfikiran logik.<\/p>\n <button class=\"btn-secondary mt-4\">Baca Lebih Lanjut Mengenai MBTI<\/button>\n <\/div>\n <\/div>\n <div class=\"mt-8 text-center\">\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Laporan Prestasi Keseluruhan<\/h3>\n <p class=\"text-gray-700\">Graf dan data terperinci mengenai perkembangan anda dalam latihan akan dipaparkan di sini.<\/p>\n <div class=\"bg-gray-100 p-6 rounded-lg mt-4 text-gray-500\">\n \n [Graf Perkembangan Prestasi Anda]\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"adminDashboardView\" class=\"view card hidden\">\n <h2 class=\"text-3xl font-bold text-center mb-6 text-emerald-800\">Admin Dashboard<\/h2>\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8\">\n <div class=\"bg-emerald-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-emerald-800\">Jumlah Peserta Berdaftar<\/h3>\n <p class=\"text-4xl font-bold text-emerald-600\" id=\"totalParticipants\">0<\/p>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-gray-800\">Latihan Diselesaikan<\/h3>\n <p class=\"text-4xl font-bold text-gray-600\" id=\"quizzesCompleted\">0<\/p>\n <\/div>\n <div class=\"bg-red-50 p-6 rounded-lg shadow-inner\">\n <h3 class=\"text-xl font-semibold text-red-800\">Purata Skor Keseluruhan<\/h3>\n <p class=\"text-4xl font-bold text-red-600\" id=\"overallAvgScore\">0%<\/p>\n <\/div>\n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Segmen Latihan & Peratus Pendaftaran<\/h3>\n <div id=\"trainingEnrollmentSummary\" class=\"space-y-4 mb-8\">\n \n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Pendaftaran Kursus<\/h3>\n <div id=\"courseEnrollmentSummary\" class=\"space-y-4 mb-8\">\n \n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Analisis Mengikut Parlimen<\/h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white rounded-lg shadow-md\">\n <thead>\n <tr class=\"bg-gray-100 text-gray-600 uppercase text-sm leading-normal rounded-t-lg\">\n <th class=\"py-3 px-6 text-left rounded-tl-lg\">Parlimen<\/th>\n <th class=\"py-3 px-6 text-left\">Bil. Peserta<\/th>\n <th class=\"py-3 px-6 text-left\">Purata DISC (D)<\/th>\n <th class=\"py-3 px-6 text-left\">Purata MBTI (I)<\/th>\n <th class=\"py-3 px-6 text-left rounded-tr-lg\">Status Kuiz Selesai<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"parlimenAnalysisTableBody\" class=\"text-gray-700 text-sm font-light\">\n \n <\/tbody>\n <\/table>\n <\/div>\n\n <h3 class=\"text-2xl font-semibold mb-4 text-gray-700\">Taburan Jenis Personaliti<\/h3>\n <div class=\"grid md:grid-cols-2 gap-6\">\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">DISC Distribution<\/h4>\n <p class=\"text-gray-600\">D: 30%, I: 25%, S: 20%, C: 25%<\/p>\n <div class=\"bg-gray-200 h-4 rounded-full mt-2\">\n <div class=\"bg-emerald-500 h-full w-[30%] rounded-l-full inline-block\"><\/div>\n <div class=\"bg-gray-500 h-full w-[25%] inline-block\"><\/div>\n <div class=\"bg-red-500 h-full w-[20%] inline-block\"><\/div>\n <div class=\"bg-gray-200 h-full w-[25%] rounded-r-full inline-block\"><\/div>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-6 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">MBTI Popular Types<\/h4>\n <ul class=\"list-disc list-inside text-gray-600\">\n <li>ISTJ: 15%<\/li>\n <li>ENFP: 12%<\/li>\n <li>INTJ: 10%<\/li>\n <li>ESFJ: 9%<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <script>\n \/\/ Data Kawasan Parlimen dan DUN\n const terengganuAreas = {\n \"P033 Besut\": [\"N01 Kuala Besut\", \"N02 Kota Putera\", \"N03 Jertih\", \"N04 Hulu Besut\"],\n \"P034 Setiu\": [\"N05 Jabi\", \"N06 Permaisuri\", \"N07 Langkap\", \"N08 Batu Rakit\"],\n \"P035 Kuala Nerus\": [\"N09 Tepuh\", \"N10 Buluh Gading\", \"N11 Seberang Takir\", \"N12 Bukit Tunggal\"],\n \"P036 Kuala Terengganu\": [\"N13 Wakaf Mempelam\", \"N14 Bandar\", \"N15 Ladang\", \"N16 Batu Buruk\"],\n \"P037 Marang\": [\"N17 Alur Limbat\", \"N18 Bukit Payung\", \"N19 Ru Rendang\", \"N20 Pengkalan Berangan\"],\n \"P038 Hulu Terengganu\": [\"N21 Telemung\", \"N22 Manir\", \"N23 Kuala Berang\", \"N24 Ajil\"],\n \"P039 Dungun\": [\"N25 Bukit Besi\", \"N26 Rantau Abang\", \"N27 Sura\", \"N28 Paka\"],\n \"P040 Kemaman\": [\"N29 Kemasik\", \"N30 Kijal\", \"N31 Cukai\", \"N32 Air Putih\"]\n };\n\n \/\/ Data Kandungan Latihan\n const trainingContent = {\n \"KENALI DIRI - UJIAN PERSONALITI KEPIMPINAN\": {\n \"Kenal Cara Fikir & Potensi Otak\": [\n \"Herrmann Brain Dominance Instrument (HBDI)\",\n \"Thinking Talents\",\n \"Kepner-Tregoe Thinking Styles\",\n \"Six Thinking Hats Edward de Bono\"\n ],\n \"Kenal Personaliti Diri\": [\n \"MBTI (16 Personalities)\",\n \"Big Five (OCEAN)\",\n \"Enneagram\",\n \"Color Brain\",\n \"DOPE Personality\",\n \"Four Temperaments (Choleric, etc.)\",\n \"Kuiz Contoh: Gaya Personaliti DISC\" \/\/ Kuiz contoh dimasukkan di sini\n ],\n \"Gaya Kepimpinan & Kerja Berpasukan\": [\n \"DISC (Teori)\",\n \"Leadership Style Questionnaire\",\n \"Situational Leadership (Hersey & Blanchard)\"\n ],\n \"Gaya Pembelajaran\": [\n \"VARK\",\n \"Multiple Intelligences (Howard Gardner)\"\n ],\n \"Gaya Urus Konflik & Komunikasi\": [\n \"Thomas-Kilmann Conflict Mode Instrument (TKI)\",\n \"Collaboration Conflict Styles\",\n \"Animal Conflict Style (Owl, Shark, etc.)\"\n ],\n \"Emosi dan Kesihatan\": [\n \"Patient Health Questionnaire (PHQ)\",\n \"Depression, Anxiety & Stress Scale (DASS)\",\n \"Copenhagen Burnout Inventories (CBI)\",\n \"World Health Organization Disability Assessment Schedule (WHODAS)\"\n ]\n },\n \"TIPS PENGURUSAN\": {\n \"Ilmu Perancangan Strategik\": [\n \"SWOT Analysis \u2013 Kekuatan, Kelemahan, Peluang, Ancaman\",\n \"SOSTAC \u2013 Situation, Objectives, Strategy, Tactics, Action, Control\",\n \"OKR \u2013 Objective & Key Results\",\n \"TMBO \u2013 Time Management by Objective\"\n ],\n \"Pengurusan Prestasi & KPI\": [\n \"SMART Goals \u2013 Specific, Measurable, Achievable, Relevant, Time-bound\",\n \"KPI vs KRA \u2013 Indikator Prestasi vs Hasil Utama\",\n \"Balance Scorecard (BSC) \u2013 Prestasi organisasi dari 4 perspektif\"\n ],\n \"Imej, Kepimpinan dan Motivasi\": [\n \"Penampilan & Imej Diri\",\n \"Maslow Hierarchy of Needs \u2013 Keperluan asas hingga self-actualization\",\n \"Herzberg Theory \u2013 Faktor motivasi & ketidakpuasan kerja\",\n \"Goleman\u2019s Emotional Intelligence \u2013 5 elemen kecerdasan emosi\"\n ],\n \"Pengurusan Organisasi & Pasukan\": [\n \"RACI Matrix \u2013Responsible, Accountable, Consulted, Informed\",\n \"Tuckman Model \u2013 Forming, Storming, Norming, Performing\",\n \"Delegation Matrix (Eisenhower Box) \u2013 Prioriti dan pelimpahan tugas\"\n ],\n \"Pengurusan Masa & Produktiviti\": [\n \"Eisenhower Matrix \u2013 Urgent vs Important\",\n \"Pomodoro Technique \u2013 Kaedah kerja dalam blok masa 25 minit\",\n \"Time Blocking \u2013 Jadual berdasarkan tugasan\"\n ]\n },\n \"DAKWAH & KOMUNIKASI KEPIMPINAN\": { \/\/ Updated to Title Case\n \"Dakwah & Komunikasi Kepimpinan\": [\n \"Fiqh Dakwah\",\n \"Fiqh Aulawiyyat\",\n \"Maratib Amal\",\n \"Kemahiran Rapport \/ PR\",\n \"Public Speaking\",\n \"Protokol & Pengurusan Acara\"\n ]\n },\n \"SENARAI KURSUS\": { \/\/ New main category\n \"Kursus Kepimpinan\": [\n \"AMILIN Competency Workshop (AMILIN)\",\n \"High Performance Talent (HPT)\"\n ],\n \"Kursus Darul Iman\": [ \/\/ Optional courses\n { title: \"Dasar Integriti Darul Iman (DIDI)\", optional: true },\n { title: \"Islamic Digital Leadership Development Training\", optional: true },\n { title: \"Itqan Insani\", optional: true }\n ]\n }\n };\n\n \/\/ Data Kandungan Bahan\n const materialsContent = {\n \"Artikel Motivasi Kepimpinan\": [\n { title: \"Kepimpinan Berkesan dalam Organisasi\", link: \"#\" },\n { title: \"Membina Pasukan yang Kuat\", link: \"#\" },\n { title: \"Pengurusan Stres untuk Pemimpin\", link: \"#\" }, \/\/ New\n { title: \"Meningkatkan Kecerdasan Emosi\", link: \"#\" }, \/\/ New\n { title: \"Visi dan Misi Organisasi\", link: \"#\" } \/\/ New\n ],\n \"Risalah Ringkas (PDF)\": [\n { title: \"Panduan Ringkas RACI Matrix\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Checklist Pengurusan Masa\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Tips Peningkatan EQ\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true },\n { title: \"Modul Komunikasi Berkesan\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true }, \/\/ New\n { title: \"Prinsip Delegasi Tugas\", link: \"https:\/\/www.africau.edu\/images\/default\/sample.pdf\", download: true } \/\/ New\n ]\n };\n\n \/\/ Data Jurulatih Panel AKP (Mock Data)\n const akpTrainers = [\n { name: \"Dr. Ahmad Fadhli\", specialization: \"Personaliti & Psikologi Organisasi\", position: \"AKP Pusat\" },\n { name: \"Puan Hajar Binti Abdullah\", specialization: \"Kepimpinan Strategik & Pengurusan\", position: \"AKP Negeri\" },\n { name: \"Ustaz Kamal bin Idris\", specialization: \"Fiqh Dakwah & Komunikasi\", position: \"AKP Pusat\" },\n { name: \"Cikgu Salmah bt Abu Bakar\", specialization: \"Pengurusan Masa & Produktiviti\", position: \"AKP Kawasan (Kuala Terengganu)\" },\n { name: \"Encik Razali bin Kassim\", specialization: \"Kerja Berpasukan & Resolusi Konflik\", position: \"AKP Negeri\" },\n { name: \"Puan Siti Aisyah\", specialization: \"Motivasi & Pembangunan Diri\", position: \"AKP Kawasan (Dungun)\" }\n ];\n\n\n \/\/ Fungsi untuk menukar paparan antara halaman\n function showView(viewId) {\n \/\/ Sembunyikan semua paparan terlebih dahulu\n document.querySelectorAll('.view').forEach(view => {\n view.classList.add('hidden');\n });\n \/\/ Paparkan paparan yang diminta\n document.getElementById(viewId + 'View').classList.remove('hidden');\n\n \/\/ Logik tambahan untuk paparan Latihan, Bahan, dan Panel AKP\n if (viewId === 'trainingList') {\n loadTrainingCategories(); \/\/ Panggil fungsi baru untuk memuatkan kedua-dua segmen latihan\/kursus\n } else if (viewId === 'materials') {\n loadMaterialsContent();\n } else if (viewId === 'akpPanel') { \/\/ Panggil fungsi untuk memuatkan data jurulatih\n loadAkpPanelData();\n } else if (viewId === 'adminDashboard') {\n generateAdminDashboardData(); \/\/ Jana data untuk dashboard admin\n }\n }\n\n \/\/ Fungsi untuk mengisi dropdown Kawasan Parlimen\n function populateKawasan() {\n const kawasanSelect = document.getElementById('registerKawasan');\n kawasanSelect.innerHTML = '<option value=\"\">Pilih Kawasan Parlimen<\/option>';\n for (const kawasan in terengganuAreas) {\n const option = document.createElement('option');\n option.value = kawasan;\n option.textContent = kawasan;\n kawasanSelect.appendChild(option);\n }\n }\n\n \/\/ Fungsi untuk mengisi dropdown DUN berdasarkan Kawasan Parlimen yang dipilih\n function populateDUNs() {\n const kawasanSelect = document.getElementById('registerKawasan');\n const dunSelect = document.getElementById('registerDUN');\n const selectedKawasan = kawasanSelect.value;\n\n dunSelect.innerHTML = '<option value=\"\">Pilih DUN<\/option>'; \/\/ Reset DUN options\n\n if (selectedKawasan && terengganuAreas[selectedKawasan]) {\n terengganuAreas[selectedKawasan].forEach(dun => {\n const option = document.createElement('option');\n option.value = dun;\n option.textContent = dun;\n dunSelect.appendChild(option);\n });\n }\n }\n\n \/\/ Fungsi untuk memuatkan kategori latihan dan kursus\n function loadTrainingCategories() {\n const mainTrainingCategoriesDiv = document.getElementById('mainTrainingCategories');\n const mainCourseCategoriesDiv = document.getElementById('mainCourseCategories');\n \n \/\/ Pastikan kedua-dua segmen utama latihan dan kursus kelihatan\n mainTrainingCategoriesDiv.classList.remove('hidden');\n mainCourseCategoriesDiv.classList.remove('hidden');\n document.getElementById('subCategoryContent').classList.add('hidden'); \/\/ Sembunyikan sub-kategori\n\n mainTrainingCategoriesDiv.innerHTML = '<h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Latihan<\/h3>';\n mainCourseCategoriesDiv.innerHTML = '<h3 class=\"text-2xl font-bold mb-4 text-gray-700\">Senarai Kursus<\/h3>';\n\n\n \/\/ Muatkan Kategori Latihan Utama\n for (const mainCat in trainingContent) {\n if (mainCat !== \"SENARAI KURSUS\") { \/\/ Hanya kategori latihan\n const categoryItem = document.createElement('div');\n categoryItem.className = 'category-item';\n categoryItem.innerHTML = `\n <h3 class=\"text-xl\">${toTitleCase(mainCat)}<\/h3>\n <span>\u203a<\/span>\n `;\n categoryItem.onclick = () => showSubCategories(mainCat);\n mainTrainingCategoriesDiv.appendChild(categoryItem);\n }\n }\n\n \/\/ Muatkan Kategori Kursus\n if (trainingContent[\"SENARAI KURSUS\"]) {\n for (const subCat in trainingContent[\"SENARAI KURSUS\"]) {\n const categoryItem = document.createElement('div');\n categoryItem.className = 'category-item';\n \/\/ Apply optional-item class to the category item itself if it's \"Kursus Darul Iman\"\n if (subCat === \"Kursus Darul Iman\") {\n categoryItem.classList.add('optional-item');\n }\n categoryItem.innerHTML = `\n <h3 class=\"text-xl\">${toTitleCase(subCat)}<\/h3>\n <span>\u203a<\/span>\n `;\n categoryItem.onclick = () => showTrainingItems(\"SENARAI KURSUS\", subCat); \/\/ Panggil showTrainingItems untuk kursus\n mainCourseCategoriesDiv.appendChild(categoryItem);\n }\n }\n }\n\n \/\/ Fungsi untuk memaparkan sub-kategori atau item latihan\n function showSubCategories(mainCategory) {\n document.getElementById('mainTrainingCategories').classList.add('hidden');\n document.getElementById('mainCourseCategories').classList.add('hidden'); \/\/ Sembunyikan juga kategori kursus utama\n document.getElementById('subCategoryContent').classList.remove('hidden');\n document.getElementById('currentCategoryTitle').textContent = toTitleCase(mainCategory);\n\n const subCategoryListDiv = document.getElementById('currentSubCategoryList');\n subCategoryListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n document.getElementById('quizContainer').classList.add('hidden'); \/\/ Sembunyikan kuiz jika ada\n\n const subCategories = trainingContent[mainCategory];\n for (const subCat in subCategories) {\n const subCategoryItem = document.createElement('div');\n subCategoryItem.className = 'sub-category-item';\n \/\/ Apply optional-item class to the sub-category title itself if it's \"Kursus Darul Iman\"\n if (mainCategory === \"SENARAI KURSUS\" && subCat === \"Kursus Darul Iman\") {\n subCategoryItem.classList.add('optional-item');\n }\n subCategoryItem.innerHTML = `\n <h4 class=\"text-lg\">${toTitleCase(subCat)}<\/h4>\n <span>\u203a<\/span>\n `;\n subCategoryItem.onclick = () => showTrainingItems(mainCategory, subCat);\n subCategoryListDiv.appendChild(subCategoryItem);\n }\n }\n\n \/\/ Fungsi untuk memaparkan item latihan dalam sub-kategori\n function showTrainingItems(mainCategory, subCategory) {\n const subCategoryListDiv = document.getElementById('currentSubCategoryList');\n subCategoryListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n document.getElementById('currentCategoryTitle').textContent = `${toTitleCase(mainCategory)} \u203a ${toTitleCase(subCategory)}`;\n\n const items = trainingContent[mainCategory][subCategory];\n if (items) {\n items.forEach(item => {\n let itemTitle;\n let isOptional = false;\n\n if (typeof item === 'object' && item.title) {\n itemTitle = item.title;\n isOptional = item.optional || false;\n } else {\n itemTitle = item;\n }\n\n if (itemTitle === \"Kuiz Contoh: Gaya Personaliti DISC\") {\n \/\/ Jika item adalah kuiz contoh, paparkan borang kuiz\n document.getElementById('quizContainer').classList.remove('hidden');\n document.getElementById('quizContainer').innerHTML = `\n <h3 class=\"text-2xl font-bold text-center mb-6 text-emerald-700\">Kuiz Contoh: Gaya Personaliti DISC<\/h3>\n <form onsubmit=\"event.preventDefault(); submitQuiz();\">\n <div class=\"mb-4\">\n <label for=\"uniqueId\" class=\"text-lg\">Sila masukkan ID Unik Peserta anda:<\/label>\n <input type=\"text\" id=\"uniqueId\" placeholder=\"Contoh: AKP-001\" required class=\"text-xl\">\n <\/div>\n\n <div class=\"mb-6\">\n <p class=\"text-lg font-semibold mb-2\">Soalan 1: Apabila berhadapan dengan masalah, saya cenderung untuk:<\/p>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"D\" class=\"mr-2\">a) Bertindak pantas dan mengambil alih.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"I\" class=\"mr-2\">b) Mencari sokongan dan berbincang dengan orang lain.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"S\" class=\"mr-2\">c) Menganalisis situasi dengan teliti sebelum bertindak.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q1\" value=\"C\" class=\"mr-2\">d) Mengikut prosedur dan mencari penyelesaian yang terbukti.<\/label>\n <\/div>\n\n <div class=\"mb-6\">\n <p class=\"text-lg font-semibold mb-2\">Soalan 2: Dalam persekitaran kerja, saya paling selesa dengan:<\/p>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"D\" class=\"mr-2\">a) Mencapai matlamat yang mencabar.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"I\" class=\"mr-2\">b) Berinteraksi dan membina hubungan.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"S\" class=\"mr-2\">c) Kestabilan dan rutin yang jelas.<\/label>\n <label class=\"block mb-2\"><input type=\"radio\" name=\"q2\" value=\"C\" class=\"mr-2\">d) Ketepatan dan kualiti kerja.<\/label>\n <\/div>\n\n <button type=\"submit\" class=\"btn-primary w-full\">Hantar Jawapan<\/button>\n <\/form>\n `;\n } else {\n \/\/ Item latihan biasa\n const trainingItemDiv = document.createElement('div');\n trainingItemDiv.className = `material-item ${isOptional ? 'optional-item' : ''}`; \/\/ Apply optional class\n trainingItemDiv.innerHTML = `\n <p class=\"text-lg text-gray-700 ${isOptional ? 'text-gray-500 italic' : ''}\">${itemTitle}<\/p>\n <a href=\"#\" class=\"btn-secondary text-sm\">Lihat<\/a>\n `;\n subCategoryListDiv.appendChild(trainingItemDiv);\n }\n });\n }\n }\n\n \/\/ Fungsi untuk kembali ke paparan kategori utama\n function showMainCategories() {\n document.getElementById('mainTrainingCategories').classList.remove('hidden');\n document.getElementById('mainCourseCategories').classList.remove('hidden');\n document.getElementById('subCategoryContent').classList.add('hidden');\n document.getElementById('quizContainer').classList.add('hidden'); \/\/ Pastikan kuiz disembunyikan\n loadTrainingCategories(); \/\/ Muat semula kategori utama\n }\n\n \/\/ Fungsi untuk memuatkan kandungan Bahan\n function loadMaterialsContent() {\n const articleListDiv = document.getElementById('articleList');\n const pdfListDiv = document.getElementById('pdfList');\n articleListDiv.innerHTML = '';\n pdfListDiv.innerHTML = '';\n\n \/\/ Muatkan Artikel\n materialsContent[\"Artikel Motivasi Kepimpinan\"].forEach(item => {\n const articleItem = document.createElement('div');\n articleItem.className = 'material-item';\n articleItem.innerHTML = `\n <p class=\"text-lg text-gray-700\">${item.title}<\/p>\n <a href=\"${item.link}\" target=\"_blank\" class=\"btn-secondary text-sm\">Baca<\/a>\n `;\n articleListDiv.appendChild(articleItem);\n });\n\n \/\/ Muatkan PDF\n materialsContent[\"Risalah Ringkas (PDF)\"].forEach(item => {\n const pdfItem = document.createElement('div');\n pdfItem.className = 'material-item';\n pdfItem.innerHTML = `\n <p class=\"text-lg text-gray-700\">${item.title}<\/p>\n <a href=\"${item.link}\" ${item.download ? 'download' : ''} target=\"_blank\" class=\"btn-secondary text-sm\">Muat Turun<\/a>\n `;\n pdfListDiv.appendChild(pdfItem);\n });\n }\n\n \/\/ Fungsi untuk memuatkan data jurulatih Panel AKP\n function loadAkpPanelData() {\n const trainerListDiv = document.getElementById('trainerList');\n trainerListDiv.innerHTML = ''; \/\/ Kosongkan kandungan sedia ada\n\n akpTrainers.forEach(trainer => {\n const trainerCard = document.createElement('div');\n trainerCard.className = 'trainer-card';\n trainerCard.innerHTML = `\n <h4 class=\"text-xl\">${trainer.name}<\/h4>\n <p><strong>Bidang Kepakaran:<\/strong> ${trainer.specialization}<\/p>\n <p><strong>Jawatan:<\/strong> ${trainer.position}<\/p>\n `;\n trainerListDiv.appendChild(trainerCard);\n });\n }\n\n \/\/ Fungsi untuk menjana data olok-olok untuk papan pemuka admin\n function generateAdminDashboardData() {\n \/\/ Data Ringkasan Utama\n document.getElementById('totalParticipants').innerText = (Math.floor(Math.random() * 500) + 1000).toLocaleString(); \/\/ 1000-1500\n document.getElementById('quizzesCompleted').innerText = (Math.floor(Math.random() * 400) + 700).toLocaleString(); \/\/ 700-1100\n document.getElementById('overallAvgScore').innerText = (Math.floor(Math.random() * 10) + 80) + '%'; \/\/ 80-90%\n\n \/\/ Analisis Segmen Latihan & Peratus Pendaftaran\n const trainingEnrollmentSummaryDiv = document.getElementById('trainingEnrollmentSummary');\n trainingEnrollmentSummaryDiv.innerHTML = ''; \/\/ Kosongkan sedia ada\n\n for (const mainCat in trainingContent) {\n if (mainCat !== \"SENARAI KURSUS\") { \/\/ Hanya kategori latihan, bukan kursus\n const enrollmentPercentage = Math.floor(Math.random() * 40) + 50; \/\/ 50-90%\n const enrollmentItem = document.createElement('div');\n enrollmentItem.className = 'bg-gray-50 p-4 rounded-lg shadow-inner';\n enrollmentItem.innerHTML = `\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">${toTitleCase(mainCat)}<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-emerald-500 h-2.5 rounded-full\" style=\"width: ${enrollmentPercentage}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${enrollmentPercentage}%<\/span>\n <\/div>\n `;\n trainingEnrollmentSummaryDiv.appendChild(enrollmentItem);\n }\n }\n\n \/\/ Analisis Pendaftaran Kursus\n const courseEnrollmentSummaryDiv = document.getElementById('courseEnrollmentSummary');\n courseEnrollmentSummaryDiv.innerHTML = '';\n\n const kursusKepimpinanEnrollment = Math.floor(Math.random() * 30) + 60; \/\/ 60-90%\n const kursusDarulImanEnrollment = Math.floor(Math.random() * 20) + 40; \/\/ 40-60% (optional, so lower)\n\n courseEnrollmentSummaryDiv.innerHTML += `\n <div class=\"bg-gray-50 p-4 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">Kursus Kepimpinan<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-emerald-500 h-2.5 rounded-full\" style=\"width: ${kursusKepimpinanEnrollment}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${kursusKepimpinanEnrollment}%<\/span>\n <\/div>\n <\/div>\n <div class=\"bg-gray-50 p-4 rounded-lg shadow-inner\">\n <h4 class=\"text-xl font-semibold mb-2 text-gray-700\">Kursus Darul Iman (Optional)<\/h4>\n <div class=\"flex items-center\">\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mr-2\">\n <div class=\"bg-gray-500 h-2.5 rounded-full\" style=\"width: ${kursusDarulImanEnrollment}%\"><\/div>\n <\/div>\n <span class=\"text-gray-700 font-bold\">${kursusDarulImanEnrollment}%<\/span>\n <\/div>\n <\/div>\n `;\n\n\n \/\/ Analisis Mengikut Parlimen\n const parlimenAnalysisTableBody = document.getElementById('parlimenAnalysisTableBody');\n parlimenAnalysisTableBody.innerHTML = ''; \/\/ Kosongkan sedia ada\n\n for (const parlimen in terengganuAreas) {\n \/\/ Generate mock data for each parliamentary area\n const numParticipants = Math.floor(Math.random() * 300) + 100; \/\/ 100-400 participants per Parlimen\n const avgDiscD = (Math.random() * 2 + 6).toFixed(1); \/\/ 6.0-8.0\n const avgMbtiI = (Math.random() * 2 + 6).toFixed(1); \/\/ 6.0-8.0\n const quizCompletionStatus = Math.floor(Math.random() * 20) + 70; \/\/ 70-90%\n\n const row = document.createElement('tr');\n row.className = 'border-b border-gray-200 hover:bg-gray-50';\n row.innerHTML = `\n <td class=\"py-3 px-6 text-left whitespace-nowrap\">${parlimen}<\/td>\n <td class=\"py-3 px-6 text-left\">${numParticipants}<\/td>\n <td class=\"py-3 px-6 text-left\">${avgDiscD}<\/td>\n <td class=\"py-3 px-6 text-left\">${avgMbtiI}<\/td>\n <td class=\"py-3 px-6 text-left\">${quizCompletionStatus}%<\/td>\n `;\n parlimenAnalysisTableBody.appendChild(row);\n }\n }\n\n\n \/\/ Fungsi untuk mengendalikan penghantaran kuiz (contoh sahaja)\n function submitQuiz() {\n const uniqueId = document.getElementById('uniqueId').value;\n if (uniqueId) {\n \/\/ Dalam aplikasi sebenar, data akan dihantar ke Google Sheet\/Firestore\n \/\/ Di sini, kita hanya tunjukkan mesej dan tukar paparan ke dashboard peserta\n alert(`Kuiz anda telah dihantar dengan ID Unik: ${uniqueId}. Keputusan akan diproses.`);\n \/\/ Kemas kini data mock untuk dashboard peserta\n document.getElementById('participantName').innerText = 'Peserta Contoh';\n document.getElementById('participantId').innerText = uniqueId;\n document.getElementById('discResult').innerText = 'Dominance (D)'; \/\/ Contoh hasil\n document.getElementById('mbtiResult').innerText = 'INTJ'; \/\/ Contoh hasil\n showView('participantDashboard');\n } else {\n alert('Sila masukkan ID Unik Peserta anda.');\n }\n }\n\n \/\/ Fungsi pembantu untuk menukar string kepada Title Case\n function toTitleCase(str) {\n return str.replace(\n \/\\w\\S*\/g,\n function(txt) {\n return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();\n }\n ).replace(\/ (A|An|The|And|But|Or|Nor|As|At|By|For|From|In|Into|Near|Of|On|Onto|To|With|Vs?\\.?|Via)$\/i, function(txt){\n return txt.toLowerCase();\n });\n }\n\n\n \/\/ Tetapkan paparan awal kepada halaman log masuk dan muat data awal\n document.addEventListener('DOMContentLoaded', () => {\n populateKawasan(); \/\/ Isi dropdown Kawasan Parlimen\n loadTrainingCategories(); \/\/ Muatkan kategori latihan dan kursus\n loadMaterialsContent(); \/\/ Muatkan kandungan bahan\n showView('login'); \/\/ Paparkan halaman login sebagai permulaan\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]<\/p>\n","protected":false},"author":1,"featured_media":93,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"plain-container","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"disabled","ast-banner-title-visibility":"disabled","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"enabled","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-8","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Akademi Kepimpinan Pemuda (AKP) DPPNT<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/akp.tarbiahkreatif.my\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Akademi Kepimpinan Pemuda (AKP) DPPNT\" \/>\n<meta property=\"og:description\" content=\"Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/akp.tarbiahkreatif.my\/\" \/>\n<meta property=\"og:site_name\" content=\"Akademi Kepimpinan Pemuda (AKP) DPPNT\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-07T04:05:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1408\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"isPartOf\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"datePublished\":\"2025-08-06T02:50:45+00:00\",\"dateModified\":\"2025-08-07T04:05:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/akp.tarbiahkreatif.my\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#primaryimage\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"contentUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg\",\"width\":1408,\"height\":768},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/akp.tarbiahkreatif.my\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#website\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/akp.tarbiahkreatif.my\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#organization\",\"name\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png\",\"contentUrl\":\"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png\",\"width\":157,\"height\":86,\"caption\":\"Akademi Kepimpinan Pemuda (AKP) DPPNT\"},\"image\":{\"@id\":\"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Akademi Kepimpinan Pemuda (AKP) DPPNT","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:\/\/akp.tarbiahkreatif.my\/","og_locale":"en_US","og_type":"article","og_title":"Akademi Kepimpinan Pemuda (AKP) DPPNT","og_description":"Prototaip Portal Latihan Kepimpinan Log Masuk Latihan Bahan Panel AKP Dashboard Admin Log Masuk \/ Daftar Log Masuk E-mel: Kata […]","og_url":"https:\/\/akp.tarbiahkreatif.my\/","og_site_name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","article_modified_time":"2025-08-07T04:05:45+00:00","og_image":[{"width":1408,"height":768,"url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/akp.tarbiahkreatif.my\/","url":"https:\/\/akp.tarbiahkreatif.my\/","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","isPartOf":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#website"},"primaryImageOfPage":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage"},"image":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage"},"thumbnailUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","datePublished":"2025-08-06T02:50:45+00:00","dateModified":"2025-08-07T04:05:45+00:00","breadcrumb":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/akp.tarbiahkreatif.my\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/akp.tarbiahkreatif.my\/#primaryimage","url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","contentUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/Portal-AKP-DPPNT.jpg","width":1408,"height":768},{"@type":"BreadcrumbList","@id":"https:\/\/akp.tarbiahkreatif.my\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/akp.tarbiahkreatif.my\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/akp.tarbiahkreatif.my\/#website","url":"https:\/\/akp.tarbiahkreatif.my\/","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","description":"","publisher":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/akp.tarbiahkreatif.my\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/akp.tarbiahkreatif.my\/#organization","name":"Akademi Kepimpinan Pemuda (AKP) DPPNT","url":"https:\/\/akp.tarbiahkreatif.my\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/","url":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png","contentUrl":"https:\/\/akp.tarbiahkreatif.my\/wp-content\/uploads\/2025\/08\/cropped-AKP-DPPNT.png","width":157,"height":86,"caption":"Akademi Kepimpinan Pemuda (AKP) DPPNT"},"image":{"@id":"https:\/\/akp.tarbiahkreatif.my\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":35,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":97,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/pages\/8\/revisions\/97"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/media\/93"}],"wp:attachment":[{"href":"https:\/\/akp.tarbiahkreatif.my\/index.php\/wp-json\/wp\/v2\/media?parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}