From 7ba6d951bf9b3927ac66bd7a6cb6fa26856205d8 Mon Sep 17 00:00:00 2001
From: Mas Budi Kusuma <admin@masbudi.my.id>
Date: Tue, 15 Sep 2026 23:37:36 +0700
Subject: [PATCH] feat(i18n): integrasi tombol bilingual native ID/EN dan skrip
 translasi instan otomatis

---
 header.php         | 95 +++++++++++++++++++++++++++++++++++++---------
 inc/admin-menu.php | 27 +++++++++----
 style.css          | 43 +++++++++++++++++++++
 3 files changed, 139 insertions(+), 26 deletions(-)

diff --git a/header.php b/header.php
index ffbeddd..c5854eb 100644
--- a/header.php
+++ b/header.php
@@ -22,24 +22,83 @@
                 </a>
             </div>
 
-            <!-- Tombol Hamburger Mobile -->
-            <button class="menu-toggle" id="mobile-menu-toggle" aria-label="Buka Menu Navigasi">
-                <span></span>
-                <span></span>
-                <span></span>
-            </button>
+            <!-- Area Navigasi & Bilingual -->
+            <div class="header-nav-wrap">
+                <nav class="main-navigation" id="site-navigation">
+                    <?php
+                    wp_nav_menu( array(
+                        'theme_location' => 'menu-utama',
+                        'menu_id'        => 'primary-menu',
+                        'fallback_cb'    => false,
+                        'container'      => false,
+                        'menu_class'     => 'nav-menu-custom'
+                    ) );
+                    ?>
+                </nav>
+
+                <!-- BILINGUAL SWITCHER (ID | EN) -->
+                <?php if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : ?>
+                <div class="edukarsa-lang-switcher" id="lang-switcher">
+                    <button type="button" class="lang-btn active" data-lang="id" title="Bahasa Indonesia">ID</button>
+                    <span class="lang-divider">|</span>
+                    <button type="button" class="lang-btn" data-lang="en" title="English">EN</button>
+                </div>
+                <div id="google_translate_element" style="display:none;"></div>
+                <?php endif; ?>
+
+                <!-- Tombol Hamburger Mobile -->
+                <button class="menu-toggle" id="mobile-menu-toggle" aria-label="Buka Menu Navigasi">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                </button>
+            </div>
 
-            <!-- Navigasi Utama -->
-            <nav class="main-navigation" id="site-navigation">
-                <?php
-                wp_nav_menu( array(
-                    'theme_location' => 'menu-utama',
-                    'menu_id'        => 'primary-menu',
-                    'fallback_cb'    => false,
-                    'container'      => false,
-                    'menu_class'     => 'nav-menu-custom'
-                ) );
-                ?>
-            </nav>
         </div>
     </header>
+
+    <?php if ( get_option( 'edukarsa_tampil_bilingual', 1 ) == 1 ) : ?>
+    <!-- SKRIP NATIVE TRANSLATE CONTROLLER -->
+    <script type="text/javascript">
+    function googleTranslateElementInit() {
+        new google.translate.TranslateElement({
+            pageLanguage: 'id',
+            includedLanguages: 'en,id',
+            autoDisplay: false
+        }, 'google_translate_element');
+    }
+
+    function changeLanguage(lang) {
+        var host = window.location.hostname;
+        var cookieVal = '/id/' + lang;
+        if (lang === 'id') {
+            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=" + host;
+            document.cookie = "googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
+        } else {
+            document.cookie = "googtrans=" + cookieVal + "; path=/; domain=" + host;
+            document.cookie = "googtrans=" + cookieVal + "; path=/;";
+        }
+        window.location.reload();
+    }
+
+    document.addEventListener("DOMContentLoaded", function() {
+        // Cek status bahasa aktif dari cookie
+        var match = document.cookie.match(/googtrans=\/id\/([a-z]{2})/i);
+        var activeLang = match ? match[1].toLowerCase() : 'id';
+
+        var buttons = document.querySelectorAll('.lang-btn');
+        buttons.forEach(function(btn) {
+            if (btn.getAttribute('data-lang') === activeLang) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+            btn.addEventListener('click', function() {
+                var selected = this.getAttribute('data-lang');
+                changeLanguage(selected);
+            });
+        });
+    });
+    </script>
+    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <?php endif; ?>
diff --git a/inc/admin-menu.php b/inc/admin-menu.php
index c1dceff..16ea23e 100644
--- a/inc/admin-menu.php
+++ b/inc/admin-menu.php
@@ -44,7 +44,7 @@ add_action( 'admin_bar_menu', 'edukarsa_admin_bar_shortcut', 80 );
 function edukarsa_register_settings() {
     $options = array(
         'edukarsa_font_choice', 'edukarsa_primary_color', 'edukarsa_secondary_color', 'edukarsa_heading_color',
-        'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news',
+        'edukarsa_tampil_bilingual', 'edukarsa_tampil_slider', 'edukarsa_tampil_stats', 'edukarsa_tampil_about', 'edukarsa_tampil_milestone', 'edukarsa_tampil_program', 'edukarsa_tampil_video', 'edukarsa_tampil_keunggulan', 'edukarsa_tampil_cta', 'edukarsa_tampil_faq', 'edukarsa_tampil_news',
         'edukarsa_header_logo',
         'edukarsa_milestone_subtitle', 'edukarsa_milestone_title',
         'edukarsa_program_subtitle', 'edukarsa_program_title',
@@ -141,7 +141,7 @@ function edukarsa_settings_page_html() {
             <div class="edukarsa-admin-layout">
                 <div class="edukarsa-admin-main">
                     
-                    <!-- 1. Header, Logo & Slider -->
+                    <!-- 1. Header, Logo, Slider & Bilingual Switcher -->
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header"><h2>🏛️ 1. Header, Logo & Slider</h2></div>
                         <div class="edukarsa-card-body">
@@ -153,7 +153,22 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <div class="switch-row-inline" style="margin-top: 20px;">
+                            <!-- Opsi Bilingual -->
+                            <div class="switch-row" style="margin-top: 18px; background: #eef2ff; border-color: #c7d2fe;">
+                                <div class="switch-label-wrap">
+                                    <div class="switch-label" style="color: #3730a3;">
+                                        <span>🌐 Fitur Bilingual (Bahasa Indonesia & Inggris)</span>
+                                        <span class="tooltip-hint">?<span class="tooltip-text">Menampilkan tombol switcher ID | EN di header dengan sistem translasi instan otomatis.</span></span>
+                                    </div>
+                                    <span style="font-size: 11px; color: #4338ca;">Penerjemah instan untuk mempermudah pengunjung internasional tanpa membebani operator.</span>
+                                </div>
+                                <label class="edukarsa-switch">
+                                    <input type="checkbox" name="edukarsa_tampil_bilingual" value="1" <?php checked(1, get_option('edukarsa_tampil_bilingual', 1)); ?>>
+                                    <span class="slider-round"></span>
+                                </label>
+                            </div>
+
+                            <div class="switch-row-inline" style="margin-top: 15px;">
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
                                         <div class="switch-label"><span>Tampilkan Slider Atas</span><span class="tooltip-hint">?<span class="tooltip-text">Gambar & tautan banner dikelola pada modul 🌟 Slider Banner.</span></span></div>
@@ -166,7 +181,7 @@ function edukarsa_settings_page_html() {
                                 </div>
                                 <div class="switch-row">
                                     <div class="switch-label-wrap">
-                                        <div class="switch-label"><span>Tampilkan 3 Kotak Statistik</span><span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur pada form di bawah.</span></span></div>
+                                        <div class="switch-label"><span>Tampilkan 3 Kotak Statistik</span><span class="tooltip-hint">?<span class="tooltip-text">Konfigurasi teks, angka capaian, dan ikon diatur pada formulir di bawah.</span></span></div>
                                         <span style="font-size: 11px; color: #64748b;">Formulir Pengaturan Bawah ↓</span>
                                     </div>
                                     <label class="edukarsa-switch">
@@ -292,8 +307,6 @@ function edukarsa_settings_page_html() {
                     <div class="edukarsa-card">
                         <div class="edukarsa-card-header"><h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2></div>
                         <div class="edukarsa-card-body">
-                            
-                            <!-- Switch Rows -->
                             <div class="switch-row-inline">
                                 <div class="switch-row">
                                     <div class="switch-label-wrap"><span class="switch-label">Tampilkan CTA Banner</span><span style="font-size: 11px; color: #64748b;">Pengaturan Khusus PPDB</span></div>
@@ -312,7 +325,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- Form CTA -->
                             <div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4>Konfigurasi CTA PPDB / PMB</h4>
                                 <div class="form-grid-2">
@@ -325,7 +337,6 @@ function edukarsa_settings_page_html() {
                                 </div>
                             </div>
 
-                            <!-- Form Label FAQ -->
                             <div id="faq-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
                                 <h4>Label Tampilan Seksi FAQ (Tanya Jawab)</h4>
                                 <div class="form-grid-2">
diff --git a/style.css b/style.css
index 136288f..a6493d7 100644
--- a/style.css
+++ b/style.css
@@ -378,3 +378,46 @@ h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 800; line-hei
 .faq-body-content p { margin-bottom: 0; }
 .faq-body-content p + p { margin-top: 10px; }
 .faq-item.active .faq-body { max-height: 400px; padding: 0 26px 22px; }
+
+/* 17. BILINGUAL LANGUAGE SWITCHER & GOOGLE RESET */
+.header-nav-wrap { display: flex; align-items: center; gap: 20px; }
+.edukarsa-lang-switcher {
+    display: inline-flex;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    padding: 3px 8px;
+    border-radius: 20px;
+    backdrop-filter: blur(4px);
+}
+.lang-btn {
+    background: transparent;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 12px;
+    font-weight: 800;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    padding: 3px 6px;
+    border-radius: 12px;
+    transition: all 0.2s ease;
+}
+.lang-btn:hover { color: #ffffff; }
+.lang-btn.active {
+    background: #ffffff;
+    color: var(--primary-color) !important;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+.lang-divider {
+    color: rgba(255, 255, 255, 0.3);
+    font-size: 11px;
+    user-select: none;
+    margin: 0 1px;
+}
+
+/* HILANGKAN TOOLBAR BANNER ASLI GOOGLE AGAR HEADER TETAP BERSIH */
+.goog-te-banner-frame.skiptranslate, .goog-te-banner-frame { display: none !important; }
+body { top: 0px !important; position: static !important; }
+.goog-tooltip, .goog-tooltip:hover { display: none !important; }
+.goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }
+#goog-gt-tt { display: none !important; }