Files
edukarsa/inc/admin-menu.php
T

876 lines
76 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* Modul Pengaturan Menu Admin, Toolbar, dan Settings API EduKarsa
*/
function edukarsa_admin_menu() {
add_menu_page(
'EduKarsa',
'EduKarsa',
'manage_options',
'edukarsa_settings',
'edukarsa_settings_page_html',
'dashicons-welcome-learn-more',
2
);
add_submenu_page( 'edukarsa_settings', 'Pengaturan Utama', '⚙️ Pengaturan Utama', 'manage_options', 'edukarsa_settings', 'edukarsa_settings_page_html' );
add_submenu_page( 'edukarsa_settings', 'Semua Slider', '🌟 Slider Banner', 'manage_options', 'edit.php?post_type=slider' );
add_submenu_page( 'edukarsa_settings', 'Semua Program', '📚 Program Kami', 'manage_options', 'edit.php?post_type=program' );
add_submenu_page( 'edukarsa_settings', 'Semua Keunggulan', '⭐ Keunggulan', 'manage_options', 'edit.php?post_type=keunggulan' );
add_submenu_page( 'edukarsa_settings', 'Semua Milestone', '🏆 Milestone', 'manage_options', 'edit.php?post_type=milestone' );
add_submenu_page( 'edukarsa_settings', 'Semua FAQ', '❓ Tanya Jawab (FAQ)', 'manage_options', 'edit.php?post_type=faq' );
add_submenu_page( 'edukarsa_settings', 'Tentang & Donasi', '☕ Donasi & Info', 'manage_options', 'edukarsa_about', 'edukarsa_about_page_html' );
}
add_action( 'admin_menu', 'edukarsa_admin_menu' );
function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
if ( ! current_user_can( 'manage_options' ) ) return;
$wp_admin_bar->add_node( array(
'id' => 'edukarsa-topbar-menu',
'title' => '<span class="ab-icon dashicons dashicons-welcome-learn-more" style="top:2px;"></span><span class="ab-label">EduKarsa</span>',
'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-settings', 'parent' => 'edukarsa-topbar-menu', 'title' => '⚙️ Pengaturan Utama', 'href' => admin_url( 'admin.php?page=edukarsa_settings' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-slider', 'parent' => 'edukarsa-topbar-menu', 'title' => '🌟 Slider Banner', 'href' => admin_url( 'edit.php?post_type=slider' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-program', 'parent' => 'edukarsa-topbar-menu', 'title' => '📚 Program Kami', 'href' => admin_url( 'edit.php?post_type=program' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-keunggulan', 'parent' => 'edukarsa-topbar-menu', 'title' => '⭐ Keunggulan', 'href' => admin_url( 'edit.php?post_type=keunggulan' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-milestone', 'parent' => 'edukarsa-topbar-menu', 'title' => '🏆 Milestone', 'href' => admin_url( 'edit.php?post_type=milestone' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-faq', 'parent' => 'edukarsa-topbar-menu', 'title' => '❓ Tanya Jawab (FAQ)', 'href' => admin_url( 'edit.php?post_type=faq' ) ) );
$wp_admin_bar->add_node( array( 'id' => 'edukarsa-sub-about', 'parent' => 'edukarsa-topbar-menu', 'title' => '☕ Donasi & Info', 'href' => admin_url( 'admin.php?page=edukarsa_about' ) ) );
}
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_bilingual', 'edukarsa_lang_en', 'edukarsa_lang_ar', 'edukarsa_lang_zh', 'edukarsa_lang_ja',
'edukarsa_tampil_accessibility',
'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',
'edukarsa_keunggulan_subtitle', 'edukarsa_keunggulan_title',
'edukarsa_faq_subtitle', 'edukarsa_faq_title',
'edukarsa_news_title',
'edukarsa_stat1_angka', 'edukarsa_stat1_label', 'edukarsa_stat1_desc', 'edukarsa_stat1_icon',
'edukarsa_stat2_angka', 'edukarsa_stat2_label', 'edukarsa_stat2_desc', 'edukarsa_stat2_icon',
'edukarsa_stat3_angka', 'edukarsa_stat3_label', 'edukarsa_stat3_desc', 'edukarsa_stat3_icon',
'edukarsa_foto_kepsek', 'edukarsa_nama_kepsek', 'edukarsa_subtitle_about', 'edukarsa_teks_sambutan', 'edukarsa_link_about',
'edukarsa_video1_thumb', 'edukarsa_video1_url', 'edukarsa_video2_thumb', 'edukarsa_video2_url',
'edukarsa_mid_bg_image', 'edukarsa_mid_bg_color',
'edukarsa_cta_bg', 'edukarsa_cta_title', 'edukarsa_cta_btn_teks', 'edukarsa_cta_btn_url',
// Pengaturan Sidebar Native
'edukarsa_sidebar_tampil_search',
'edukarsa_sidebar_tampil_cta',
'edukarsa_sidebar_cta_badge',
'edukarsa_sidebar_cta_title',
'edukarsa_sidebar_cta_desc',
'edukarsa_sidebar_cta_btn_text',
'edukarsa_sidebar_cta_btn_url',
'edukarsa_sidebar_tampil_html',
'edukarsa_sidebar_html_title',
'edukarsa_sidebar_html_content',
'edukarsa_sidebar_tampil_recent',
'edukarsa_sidebar_recent_title',
'edukarsa_sidebar_recent_count',
'edukarsa_sidebar_tampil_cats',
'edukarsa_sidebar_cats_title',
'edukarsa_sidebar_banner_img',
'edukarsa_sidebar_banner_url',
'edukarsa_footer_logo', 'edukarsa_footer_desc', 'edukarsa_footer_alamat', 'edukarsa_footer_telp', 'edukarsa_footer_email', 'edukarsa_footer_jam',
'edukarsa_wa_btn_text', 'edukarsa_wa_default_msg',
'edukarsa_tampil_fb', 'edukarsa_footer_fb', 'edukarsa_tampil_ig', 'edukarsa_footer_ig', 'edukarsa_tampil_yt', 'edukarsa_footer_yt', 'edukarsa_tampil_tiktok', 'edukarsa_footer_tiktok', 'edukarsa_tampil_x', 'edukarsa_footer_x',
'edukarsa_footer_copyright', 'edukarsa_custom_css'
);
foreach ( $options as $opt ) { register_setting( 'edukarsa_settings_group', $opt ); }
}
add_action( 'admin_init', 'edukarsa_register_settings' );
// HALAMAN PENGATURAN UTAMA DENGAN TRANSISI ACCORDION HALUS
function edukarsa_settings_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
$primary_color = get_option( 'edukarsa_primary_color', '#0b4a8e' );
$secondary_color = get_option( 'edukarsa_secondary_color', '#1a73e8' );
$heading_color = get_option( 'edukarsa_heading_color', '#0f172a' );
?>
<style>
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
/* CARD COLLAPSIBLE ACCORDION STYLE */
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 16px; overflow: hidden; transition: border-color 0.2s ease; }
.edukarsa-card:hover { border-color: #cbd5e1; }
.edukarsa-card-header {
padding: 16px 22px;
background: #fafafa;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
transition: background 0.2s ease;
}
.edukarsa-card-header:hover { background: #f1f5f9; }
.edukarsa-card-header h2 { margin: 0; font-size: 15px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.header-collapse-trigger { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #64748b; }
.collapse-icon { width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; transition: transform 0.25s ease, background 0.2s ease; color: #334155; }
.edukarsa-card.is-collapsed .collapse-icon { transform: rotate(-90deg); background: #f1f5f9; }
.edukarsa-card-body { padding: 22px; border-top: 1px solid #f1f5f9; }
.edukarsa-accordion-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 15px; }
.btn-acc-action { background: #f1f5f9; border: 1px solid #cbd5e1; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: #475569; }
.btn-acc-action:hover { background: #e2e8f0; color: #0b4a8e; }
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 15px; }
.switch-label-wrap { display: flex; flex-direction: column; gap: 5px; }
.switch-label { font-weight: 700; font-size: 13px; color: #334155; display: inline-flex; align-items: center; gap: 6px; }
.cpt-shortcut-link { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: #0b4a8e; text-decoration: none; background: #e0f2fe; padding: 2px 9px; border-radius: 12px; width: fit-content; transition: all 0.2s ease; border: 1px solid #bae6fd; }
.cpt-shortcut-link:hover { background: #0b4a8e; color: #ffffff !important; border-color: #0b4a8e; }
.tooltip-hint { position: relative; cursor: help; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 10px; font-weight: 800; }
.tooltip-hint:hover { background: #0b4a8e; }
.tooltip-hint .tooltip-text { visibility: hidden; opacity: 0; position: absolute; bottom: 140%; left: 50%; transform: translateX(-50%); background-color: #0f172a; color: #ffffff; text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; line-height: 1.45; white-space: normal; width: 220px; z-index: 1000; box-shadow: 0 10px 25px rgba(0,0,0,0.2); transition: opacity 0.2s ease, visibility 0.2s ease; pointer-events: none; }
.tooltip-hint .tooltip-text::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #0f172a transparent transparent transparent; }
.tooltip-hint:hover .tooltip-text { visibility: visible; opacity: 1; }
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; flex-shrink: 0; }
.edukarsa-switch input { opacity: 0; width: 0; height: 0; }
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
.slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
input:checked + .slider-round { background-color: #0b4a8e; }
input:checked + .slider-round:before { transform: translateX(20px); }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
.form-field-group { margin-bottom: 15px; }
.form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
.form-field-group input[type="text"], .form-field-group input[type="number"], .form-field-group textarea, .form-field-group select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 13px; box-sizing: border-box; }
.input-with-button { display: flex; gap: 8px; }
.input-with-button input { flex-grow: 1; }
.stats-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
.stat-config-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
.stat-config-box h4 { margin: 0 0 12px; font-size: 13px; color: #0b4a8e; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
.preset-pill { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all .2s; }
.preset-pill:hover { border-color: #0b4a8e; transform: translateX(3px); }
.swatch-group { display: flex; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); }
.swatch-item { width: 18px; height: 18px; }
.preset-name { font-size: 12px; font-weight: 600; color: #334155; }
.edukarsa-admin-sidebar { position: sticky; top: 45px; }
.color-picker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.color-picker-row input[type="color"] { border: none; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: transparent; }
@media (max-width: 1100px) {
.edukarsa-admin-layout { grid-template-columns: 1fr; }
.edukarsa-admin-sidebar { position: static; }
.stats-config-grid { grid-template-columns: 1fr; }
}
</style>
<div class="wrap edukarsa-admin-wrap">
<h1 style="font-weight: 800; font-size: 24px; margin-bottom: 20px;">Pengaturan Tema EduKarsa</h1>
<?php settings_errors(); ?>
<form action="options.php" method="post">
<?php settings_fields( 'edukarsa_settings_group' ); ?>
<div class="edukarsa-admin-layout">
<div class="edukarsa-admin-main">
<div class="edukarsa-accordion-actions">
<button type="button" class="btn-acc-action" id="acc-expand-all">➕ Buka Semua</button>
<button type="button" class="btn-acc-action" id="acc-collapse-all">➖ Tutup Semua</button>
</div>
<!-- 1. Header, Logo, Slider & Bahasa -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>🏛️ 1. Header, Logo, Slider & Bahasa</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<div class="form-field-group">
<label>Logo Website (Header)</label>
<div class="input-with-button">
<input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
<button type="button" class="button btn-upload" data-target="#edukarsa_header_logo">Pilih Logo</button>
</div>
</div>
<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 Bahasa (Penerjemah Instan)</span>
<span class="tooltip-hint">?<span class="tooltip-text">Menampilkan tombol pemilih bahasa di header situs.</span></span>
</div>
<span style="font-size: 11px; color: #4338ca;">Bahasa Indonesia (ID) aktif sebagai bahasa utama. Pilih bahasa tambahan di bawah:</span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#lang-options-box" name="edukarsa_tampil_bilingual" value="1" <?php checked(1, get_option('edukarsa_tampil_bilingual', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div id="lang-options-box" style="background: #f8fafc; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 14px 18px; margin-bottom: 14px;">
<span style="font-weight: 700; font-size: 12px; color: #475569; display: block; margin-bottom: 10px;">Bahasa Tambahan yang Diaktifkan:</span>
<div style="display: flex; gap: 20px; flex-wrap: wrap;">
<label style="font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;">
<input type="checkbox" name="edukarsa_lang_en" value="1" <?php checked(1, get_option('edukarsa_lang_en', 1)); ?>> 🇬🇧 English (EN)
</label>
<label style="font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;">
<input type="checkbox" name="edukarsa_lang_ar" value="1" <?php checked(1, get_option('edukarsa_lang_ar', 0)); ?>> 🇸🇦 العربية (AR)
</label>
<label style="font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;">
<input type="checkbox" name="edukarsa_lang_zh" value="1" <?php checked(1, get_option('edukarsa_lang_zh', 0)); ?>> 🇨🇳 中文 (ZH)
</label>
<label style="font-size: 13px; font-weight: 600; color: #334155; cursor: pointer;">
<input type="checkbox" name="edukarsa_lang_ja" value="1" <?php checked(1, get_option('edukarsa_lang_ja', 0)); ?>> 🇯🇵 日本語 (JA)
</label>
</div>
</div>
<div class="switch-row" style="background: #f0fdf4; border-color: #bbf7d0;">
<div class="switch-label-wrap">
<div class="switch-label" style="color: #166534;">
<span>♿ Fitur Aksesibilitas Disabilitas (WCAG Toolbar & Suara)</span>
<span class="tooltip-hint">?<span class="tooltip-text">Menampilkan toolbar ramah disabilitas (pembaca suara audio, kontras, monokrom, ukuran huruf, sorot tautan).</span></span>
</div>
<span style="font-size: 11px; color: #15803d;">Dilengkapi Web Speech Synthesizer bawaan untuk membacakan artikel bagi tunanetra.</span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_accessibility" value="1" <?php checked(1, get_option('edukarsa_tampil_accessibility', 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>
<a href="<?php echo admin_url('edit.php?post_type=slider'); ?>" class="cpt-shortcut-link">Kelola Slider ↗</a>
</div>
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
<span class="slider-round"></span>
</label>
</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 formulir di bawah.</span></span></div>
<span style="font-size: 11px; color: #64748b;">Formulir Pengaturan Bawah ↓</span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#stats-settings-box" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
<div id="stats-settings-box">
<div class="stats-config-grid">
<?php for($i=1; $i<=3; $i++) : ?>
<div class="stat-config-box">
<h4>Statistik <?php echo $i; ?></h4>
<div class="form-field-group">
<label>Ikon / Gambar</label>
<div class="input-with-button">
<input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" placeholder="URL Ikon">
<button type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon">Up</button>
</div>
</div>
<div class="form-field-group"><label>Angka / Capaian</label><input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" placeholder="cth: 98%"></div>
<div class="form-field-group"><label>Judul Statistik</label><input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" placeholder="cth: Akreditasi A"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Deskripsi Ringkas</label><textarea name="edukarsa_stat<?php echo $i; ?>_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_stat'.$i.'_desc')); ?></textarea></div>
</div>
<?php endfor; ?>
</div>
</div>
</div>
</div>
<!-- 2. Tentang Kami -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>👤 2. Sambutan & Profil Pimpinan</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<div class="switch-row" style="margin-bottom: 15px;">
<span class="switch-label">Aktifkan Seksi Sambutan</span>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#about-settings-box" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div id="about-settings-box">
<div class="form-grid-2">
<div class="form-field-group"><label>Foto Pimpinan (Portrait 3:4)</label><div class="input-with-button"><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek">Pilih</button></div></div>
<div class="form-field-group"><label>Nama Lengkap & Gelar</label><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>"></div>
</div>
<div class="form-grid-2">
<div class="form-field-group"><label>Sub-Judul (cth: Rektor / Kepala Sekolah)</label><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>"></div>
<div class="form-field-group"><label>Tautan Detail (URL Profil)</label><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></div>
</div>
<div class="form-field-group" style="margin-bottom:0;"><label>Teks Sambutan</label><textarea name="edukarsa_teks_sambutan" rows="4"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></div>
</div>
</div>
</div>
<!-- 3. Program, Milestones, & Keunggulan -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<div class="switch-row-inline">
<div class="switch-row">
<div class="switch-label-wrap"><div class="switch-label"><span>Seksi Milestone</span><span class="tooltip-hint">?<span class="tooltip-text">Data capaian diisi melalui menu 🏆 Milestone di sidebar.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=milestone'); ?>" class="cpt-shortcut-link">Kelola Milestone ↗</a></div>
<label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>><span class="slider-round"></span></label>
</div>
<div class="switch-row">
<div class="switch-label-wrap"><div class="switch-label"><span>Seksi Program</span><span class="tooltip-hint">?<span class="tooltip-text">Daftar program kurikulum dikelola pada menu 📚 Program Kami.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=program'); ?>" class="cpt-shortcut-link">Kelola Program ↗</a></div>
<label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>><span class="slider-round"></span></label>
</div>
<div class="switch-row">
<div class="switch-label-wrap"><div class="switch-label"><span>Seksi Keunggulan</span><span class="tooltip-hint">?<span class="tooltip-text">Poin keunggulan dikelola pada menu ⭐ Keunggulan.</span></span></div><a href="<?php echo admin_url('edit.php?post_type=keunggulan'); ?>" class="cpt-shortcut-link">Kelola Keunggulan ↗</a></div>
<label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>><span class="slider-round"></span></label>
</div>
</div>
<div style="border-top: 1px solid #e2e8f0; margin-top: 20px; padding-top: 15px;">
<h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">🏆 Label Tampilan: Seksi Milestone</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_milestone_subtitle" value="<?php echo esc_attr(get_option('edukarsa_milestone_subtitle', 'REKAM JEJAK')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_milestone_title" value="<?php echo esc_attr(get_option('edukarsa_milestone_title', 'Milestone & Prestasi')); ?>"></div>
</div>
</div>
<div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
<h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">📚 Label Tampilan: Seksi Program</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_program_subtitle" value="<?php echo esc_attr(get_option('edukarsa_program_subtitle', 'AKADEMIK & KARAKTER')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_program_title" value="<?php echo esc_attr(get_option('edukarsa_program_title', 'Our Program')); ?>"></div>
</div>
</div>
<div style="border-top: 1px solid #e2e8f0; margin-top: 15px; padding-top: 15px;">
<h4 style="margin: 0 0 10px; font-size: 13px; color: #0b4a8e;">⭐ Label Tampilan: Seksi Keunggulan</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge Teks</label><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi (Heading)</label><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>"></div>
</div>
</div>
</div>
</div>
<!-- 4. Video & Parallax Area -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>🎬 4. Video & Parallax (Area Tengah)</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<div class="switch-row" style="margin-bottom: 15px;">
<span class="switch-label">Aktifkan Seksi Video</span>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#video-settings-box" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div id="video-settings-box">
<div class="form-grid-2">
<div class="form-field-group"><label>Gambar Latar Parallax</label><div class="input-with-button"><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><button type="button" class="button btn-upload" data-target="#mid_bg_image">Pilih</button></div></div>
<div class="form-field-group"><label>Warna Overlay Parallax</label><div style="display:flex; align-items:center; gap:10px;"><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"><code><?php echo esc_html(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?></code></div></div>
</div>
<div class="form-grid-2">
<div class="stat-config-box">
<h4>Video 1</h4>
<div class="form-field-group"><label>Thumbnail Video 1</label><div class="input-with-button"><input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button></div></div>
<div class="form-field-group" style="margin-bottom:0;"><label>URL Video 1</label><input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
</div>
<div class="stat-config-box">
<h4>Video 2</h4>
<div class="form-field-group"><label>Thumbnail Video 2</label><div class="input-with-button"><input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button></div></div>
<div class="form-field-group" style="margin-bottom:0;"><label>URL Video 2</label><input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=..."></div>
</div>
</div>
</div>
</div>
</div>
<!-- 5. CTA, FAQ & Berita -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>📢 5. CTA Pendaftaran, FAQ & Berita</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<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>
<label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>><span class="slider-round"></span></label>
</div>
<div class="switch-row">
<div class="switch-label-wrap">
<div class="switch-label">
<span>Tampilkan Seksi FAQ</span>
<span class="tooltip-hint">?<span class="tooltip-text">Jika dinonaktifkan, seksi FAQ disembunyikan dari beranda. Seluruh item FAQ tetap tersimpan aman.</span></span>
</div>
<a href="<?php echo admin_url('edit.php?post_type=faq'); ?>" class="cpt-shortcut-link">Kelola Data FAQ ↗</a>
</div>
<label class="edukarsa-switch"><input type="checkbox" class="section-toggle" data-target="#faq-settings-box" name="edukarsa_tampil_faq" value="1" <?php checked(1, get_option('edukarsa_tampil_faq', 1)); ?>><span class="slider-round"></span></label>
</div>
<div class="switch-row">
<div class="switch-label-wrap"><div class="switch-label"><span>Tampilkan Berita Kampus</span><span class="tooltip-hint">?<span class="tooltip-text">Berita otomatis diambil dari menu 'Pos'.</span></span></div><a href="<?php echo admin_url('edit.php'); ?>" class="cpt-shortcut-link">Kelola Berita ↗</a></div>
<label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>><span class="slider-round"></span></label>
</div>
</div>
<div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
<h4>Konfigurasi CTA PPDB / PMB</h4>
<div class="form-grid-2">
<div class="form-field-group"><label>Gambar Latar CTA</label><div class="input-with-button"><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><button type="button" class="button btn-upload" data-target="#cta_bg">Up</button></div></div>
<div class="form-field-group"><label>Teks Tombol CTA</label><input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>"></div>
</div>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Ajakan CTA</label><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Tautan Tombol CTA</label><input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></div>
</div>
</div>
<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">
<div class="form-field-group" style="margin-bottom:0;"><label>Subtitle / Badge FAQ</label><input type="text" name="edukarsa_faq_subtitle" value="<?php echo esc_attr(get_option('edukarsa_faq_subtitle', 'FAQ')); ?>" placeholder="cth: FAQ / INFO PENTING"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi FAQ</label><input type="text" name="edukarsa_faq_title" value="<?php echo esc_attr(get_option('edukarsa_faq_title', 'Pertanyaan Umum')); ?>" placeholder="cth: Pertanyaan Umum"></div>
</div>
</div>
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi Berita</label><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>"></div>
</div>
</div>
<!-- 6. Kustomisasi Sidebar -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>📑 6. Pengaturan Sidebar (Artikel & Halaman)</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<p style="font-size: 13px; color: #64748b; margin-top:0; margin-bottom: 15px;">
Kelola komponen sidebar artikel dan halaman statis secara native tanpa menu Widget WordPress.
</p>
<div class="switch-row-inline">
<div class="switch-row">
<span class="switch-label">Kotak Pencarian Cepat</span>
<label class="edukarsa-switch">
<input type="checkbox" name="edukarsa_sidebar_tampil_search" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_search', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div class="switch-row">
<span class="switch-label">Mini CTA Pendaftaran</span>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#sidebar-cta-box" name="edukarsa_sidebar_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_cta', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
<div id="sidebar-cta-box" class="stat-config-box" style="margin-bottom: 15px;">
<h4>Konfigurasi Mini CTA Sidebar</h4>
<div class="form-grid-2">
<div class="form-field-group"><label>Badge Judul CTA</label><input type="text" name="edukarsa_sidebar_cta_badge" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_badge', 'Penerimaan Siswa/Mhs')); ?>"></div>
<div class="form-field-group"><label>Judul Ajakan</label><input type="text" name="edukarsa_sidebar_cta_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_title', 'Siap Berprestasi Bersama Kami?')); ?>"></div>
</div>
<div class="form-field-group"><label>Deskripsi Singkat</label><textarea name="edukarsa_sidebar_cta_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_sidebar_cta_desc', 'Daftarkan diri Anda sekarang dan raih peluang beasiswa unggulan.')); ?></textarea></div>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom:0;"><label>Teks Tombol</label><input type="text" name="edukarsa_sidebar_cta_btn_text" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_btn_text', 'Daftar Sekarang')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Tautan URL Tombol</label><input type="text" name="edukarsa_sidebar_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cta_btn_url', '#')); ?>"></div>
</div>
</div>
<div class="switch-row" style="background: #fdf4ff; border-color: #f5d0fe;">
<div class="switch-label-wrap">
<div class="switch-label" style="color: #86198f;">
<span>🧩 Box HTML Kustom Sidebar</span>
<span class="tooltip-hint">?<span class="tooltip-text">Pasang kode HTML bebas seperti embed Google Maps, video profil, widget eksternal, atau teks bebas.</span></span>
</div>
<span style="font-size: 11px; color: #a21caf;">Menambahkan area kustomisasi tanpa batas pada sidebar.</span>
</div>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#sidebar-html-box" name="edukarsa_sidebar_tampil_html" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_html', 0)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div id="sidebar-html-box" class="stat-config-box" style="margin-bottom: 15px;">
<h4>Konfigurasi Box HTML Kustom</h4>
<div class="form-field-group">
<label>Judul Box (Opsional, kosongkan jika tanpa judul)</label>
<input type="text" name="edukarsa_sidebar_html_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_html_title', 'Informasi Tambahan')); ?>" placeholder="cth: Peta Kampus / Info Layanan">
</div>
<div class="form-field-group" style="margin-bottom:0;">
<label>Isi Kode HTML / Teks Bebas</label>
<textarea name="edukarsa_sidebar_html_content" rows="6" placeholder="<p>Tulis teks HTML atau paste iframe Google Maps di sini...</p>" style="font-family: monospace; font-size: 12px;"><?php echo esc_textarea(get_option('edukarsa_sidebar_html_content')); ?></textarea>
</div>
</div>
<div class="switch-row-inline">
<div class="switch-row">
<span class="switch-label">Daftar Berita Terbaru</span>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#sidebar-recent-box" name="edukarsa_sidebar_tampil_recent" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_recent', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
<div class="switch-row">
<span class="switch-label">Daftar Kategori Berita</span>
<label class="edukarsa-switch">
<input type="checkbox" class="section-toggle" data-target="#sidebar-cats-box" name="edukarsa_sidebar_tampil_cats" value="1" <?php checked(1, get_option('edukarsa_sidebar_tampil_cats', 1)); ?>>
<span class="slider-round"></span>
</label>
</div>
</div>
<div id="sidebar-recent-box" class="form-grid-2" style="background:#f8fafc; padding:15px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:15px;">
<div class="form-field-group" style="margin-bottom:0;"><label>Judul Seksi Berita Terkini</label><input type="text" name="edukarsa_sidebar_recent_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_recent_title', 'Warta Terkini')); ?>"></div>
<div class="form-field-group" style="margin-bottom:0;"><label>Jumlah Pos Ditampilkan</label><input type="number" name="edukarsa_sidebar_recent_count" value="<?php echo esc_attr(get_option('edukarsa_sidebar_recent_count', 5)); ?>" min="1" max="10"></div>
</div>
<div id="sidebar-cats-box" class="form-field-group" style="background:#f8fafc; padding:15px; border:1px solid #e2e8f0; border-radius:8px; margin-bottom:15px;">
<label>Judul Seksi Kategori</label>
<input type="text" name="edukarsa_sidebar_cats_title" value="<?php echo esc_attr(get_option('edukarsa_sidebar_cats_title', 'Kategori Pilihan')); ?>">
</div>
<div class="form-grid-2">
<div class="form-field-group">
<label>Banner Poster Sidebar (Opsional)</label>
<div class="input-with-button">
<input type="text" id="edukarsa_sidebar_banner_img" name="edukarsa_sidebar_banner_img" value="<?php echo esc_url(get_option('edukarsa_sidebar_banner_img')); ?>" placeholder="https://...">
<button type="button" class="button btn-upload" data-target="#edukarsa_sidebar_banner_img">Pilih</button>
</div>
</div>
<div class="form-field-group">
<label>Tautan Klik Banner Poster</label>
<input type="text" name="edukarsa_sidebar_banner_url" value="<?php echo esc_attr(get_option('edukarsa_sidebar_banner_url')); ?>" placeholder="https://...">
</div>
</div>
</div>
</div>
<!-- 7. Footer, Kontak & WhatsApp -->
<div class="edukarsa-card">
<div class="edukarsa-card-header">
<h2>📞 7. Footer, Kontak & Tombol WhatsApp</h2>
<div class="header-collapse-trigger"><span class="collapse-icon">▾</span></div>
</div>
<div class="edukarsa-card-body">
<div style="background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 16px 20px; margin-bottom: 20px;">
<h4 style="margin: 0 0 12px; font-size: 13px; color: #166534;">💬 Kustomisasi Tombol WhatsApp Melayang</h4>
<div class="form-grid-2">
<div class="form-field-group" style="margin-bottom: 0;">
<label>Label / Tulisan Tombol</label>
<input type="text" name="edukarsa_wa_btn_text" value="<?php echo esc_attr(get_option('edukarsa_wa_btn_text', 'Tanya PMB')); ?>">
</div>
<div class="form-field-group" style="margin-bottom: 0;">
<label>Template Pesan Awal Otomatis</label>
<input type="text" name="edukarsa_wa_default_msg" value="<?php echo esc_attr(get_option('edukarsa_wa_default_msg', 'Halo Admin EduKarsa, saya ingin bertanya informasi lebih lanjut.')); ?>">
</div>
</div>
</div>
<div class="form-grid-2">
<div class="form-field-group">
<label>Logo Footer (Opsional, kosongkan jika pakai logo header)</label>
<div class="input-with-button">
<input type="text" id="edukarsa_footer_logo" name="edukarsa_footer_logo" value="<?php echo esc_url(get_option('edukarsa_footer_logo')); ?>" placeholder="https://...">
<button type="button" class="button btn-upload" data-target="#edukarsa_footer_logo">Pilih</button>
</div>
</div>
<div class="form-field-group">
<label>Jam Operasional / Layanan (Multi-baris / Bebas Tekan Enter)</label>
<textarea name="edukarsa_footer_jam" rows="3"><?php echo esc_textarea(get_option('edukarsa_footer_jam', "Senin – Jumat: 08.00 – 16.00 WIB\nSabtu: 08.00 – 12.00 WIB")); ?></textarea>
</div>
</div>
<div class="form-field-group">
<label>Deskripsi Singkat Kampus / Visi Ringkas</label>
<textarea name="edukarsa_footer_desc" rows="3"><?php echo esc_textarea(get_option('edukarsa_footer_desc', 'Institusi pendidikan terakreditasi unggul yang berdedikasi mencetak generasi berkarakter cerdas, kompetitif, dan berintegritas.')); ?></textarea>
</div>
<div class="form-field-group"><label>Alamat Lengkap Institusi</label><textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></div>
<div class="form-grid-2">
<div class="form-field-group"><label>Nomor Telepon / WhatsApp Layanan</label><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>" placeholder="+62 ..."></div>
<div class="form-field-group"><label>Alamat Email Resmi</label><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>" placeholder="[email protected]"></div>
</div>
<div class="form-field-group"><label>Teks Hak Cipta (Copyright Bar)</label><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright', 'EduKarsa University. All Rights Reserved.')); ?>"></div>
<h4 style="margin: 25px 0 12px; font-size:14px; color:#0b4a8e; border-bottom:1px solid #e2e8f0; padding-bottom:8px;">Jaringan Media Sosial Resmi</h4>
<div class="switch-row"><span class="switch-label">Facebook</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>><span class="slider-round"></span></label></div></div>
<div class="switch-row"><span class="switch-label">Instagram</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>><span class="slider-round"></span></label></div></div>
<div class="switch-row"><span class="switch-label">YouTube</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>><span class="slider-round"></span></label></div></div>
<div class="switch-row"><span class="switch-label">TikTok</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_tiktok" value="<?php echo esc_attr(get_option('edukarsa_footer_tiktok')); ?>" placeholder="https://tiktok.com/@..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_tiktok" value="1" <?php checked(1, get_option('edukarsa_tampil_tiktok', 0)); ?>><span class="slider-round"></span></label></div></div>
<div class="switch-row"><span class="switch-label">X (Twitter)</span><div style="display:flex; align-items:center; gap:12px; width:70%;"><input type="text" name="edukarsa_footer_x" value="<?php echo esc_attr(get_option('edukarsa_footer_x')); ?>" placeholder="https://x.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;"><label class="edukarsa-switch"><input type="checkbox" name="edukarsa_tampil_x" value="1" <?php checked(1, get_option('edukarsa_tampil_x', 0)); ?>><span class="slider-round"></span></label></div></div>
</div>
</div>
</div>
<!-- KOLOM KANAN (SIDEBAR ACTION PANEL STICKY) -->
<div class="edukarsa-admin-sidebar">
<div class="edukarsa-card">
<div class="edukarsa-card-header" style="cursor:default;">
<h2>💾 Publikasi</h2>
</div>
<div class="edukarsa-card-body text-center" style="padding:18px;">
<p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan seluruh konfigurasi tema EduKarsa.</p>
<?php submit_button( 'Simpan Pengaturan', 'primary large', 'submit', false, array('style'=>'width:100%; border-radius:6px; font-weight:700; padding:10px;') ); ?>
</div>
</div>
<div class="edukarsa-card">
<div class="edukarsa-card-header" style="cursor:default;">
<h2>🔤 Tipografi Font</h2>
</div>
<div class="edukarsa-card-body">
<div class="form-field-group" style="margin-bottom:0;">
<label>Pilihan Font Utama</label>
<select name="edukarsa_font_choice" id="edukarsa_font_choice" style="width:100%; padding:8px; border-radius:6px;">
<option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Rekomendasi)</option>
<option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern UI)</option>
<option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris)</option>
<option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik)</option>
<option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat)</option>
</select>
</div>
</div>
</div>
<div class="edukarsa-card">
<div class="edukarsa-card-header" style="cursor:default;">
<h2>🎨 Skema Warna</h2>
</div>
<div class="edukarsa-card-body">
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
<div class="preset-grid">
<div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a"><div class="swatch-group"><span class="swatch-item" style="background:#0b4a8e;"></span><span class="swatch-item" style="background:#1a73e8;"></span></div><span class="preset-name">Classic Navy (Default)</span></div>
<div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b"><div class="swatch-group"><span class="swatch-item" style="background:#065f46;"></span><span class="swatch-item" style="background:#10b981;"></span></div><span class="preset-name">Islamic Emerald Green</span></div>
<div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519"><div class="swatch-group"><span class="swatch-item" style="background:#881337;"></span><span class="swatch-item" style="background:#e11d48;"></span></div><span class="preset-name">Prestige Maroon</span></div>
<div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a"><div class="swatch-group"><span class="swatch-item" style="background:#0f766e;"></span><span class="swatch-item" style="background:#06b6d4;"></span></div><span class="preset-name">Techno Teal</span></div>
<div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764"><div class="swatch-group"><span class="swatch-item" style="background:#581c87;"></span><span class="swatch-item" style="background:#8b5cf6;"></span></div><span class="preset-name">Royal Violet</span></div>
<div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f"><div class="swatch-group"><span class="swatch-item" style="background:#b45309;"></span><span class="swatch-item" style="background:#f59e0b;"></span></div><span class="preset-name">Autumn Gold</span></div>
</div>
<hr style="margin:20px 0; border:none; border-top:1px solid #f1f5f9;">
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:12px;">Sesuaikan Manual</label>
<div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Primer</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="primary_picker" name="edukarsa_primary_color" value="<?php echo esc_attr( $primary_color ); ?>"><code id="primary_code"><?php echo esc_html( $primary_color ); ?></code></div></div>
<div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Aksen</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="secondary_picker" name="edukarsa_secondary_color" value="<?php echo esc_attr( $secondary_color ); ?>"><code id="secondary_code"><?php echo esc_html( $secondary_color ); ?></code></div></div>
<div class="color-picker-row"><span style="font-size:13px; font-weight:600;">Warna Judul</span><div style="display:flex; align-items:center; gap:8px;"><input type="color" id="heading_picker" name="edukarsa_heading_color" value="<?php echo esc_attr( $heading_color ); ?>"><code id="heading_code"><?php echo esc_html( $heading_color ); ?></code></div></div>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
jQuery(document).ready(function($){
// 1. TRANSISI HALUS ACCORDION BERBASIS JQUERY SLIDETOGGLE
$('.edukarsa-admin-main .edukarsa-card').each(function(index){
if (index > 0) {
$(this).addClass('is-collapsed');
$(this).find('.edukarsa-card-body').hide();
}
});
$('.edukarsa-admin-main .edukarsa-card-header').on('click', function(e){
if ($(e.target).closest('.edukarsa-switch, input, a, button').length) {
return;
}
var $card = $(this).closest('.edukarsa-card');
var $body = $card.find('.edukarsa-card-body');
$card.toggleClass('is-collapsed');
$body.stop().slideToggle(250);
});
$('#acc-expand-all').click(function(){
$('.edukarsa-admin-main .edukarsa-card').removeClass('is-collapsed');
$('.edukarsa-admin-main .edukarsa-card-body').stop().slideDown(250);
});
$('#acc-collapse-all').click(function(){
$('.edukarsa-admin-main .edukarsa-card').addClass('is-collapsed');
$('.edukarsa-admin-main .edukarsa-card-body').stop().slideUp(250);
});
// 2. TOGGLE ROW FORM INPUT
function syncToggles() {
$('.section-toggle').each(function(){
var target = $(this).data('target');
if ($(this).is(':checked')) { $(target).slideDown(200); } else { $(target).slideUp(200); }
});
}
$('.section-toggle').change(syncToggles);
syncToggles();
// 3. COLOR PRESET PICKER
$('.preset-pill').click(function(){
var p = $(this).data('p'), s = $(this).data('s'), h = $(this).data('h');
$('#primary_picker').val(p); $('#primary_code').text(p);
$('#secondary_picker').val(s); $('#secondary_code').text(s);
$('#heading_picker').val(h); $('#heading_code').text(h);
$('.preset-pill').css('border-color', '#e2e8f0');
$(this).css('border-color', '#0b4a8e');
});
$('#primary_picker').on('input change', function(){ $('#primary_code').text($(this).val()); });
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
// 4. MEDIA UPLOADER
var mediaUploader;
$('.btn-upload').click(function(e) {
e.preventDefault();
var targetInput = $(this).data('target');
if (mediaUploader) { mediaUploader.targetInput = targetInput; mediaUploader.open(); return; }
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Berkas Media', button: { text: 'Gunakan Media Ini' }, multiple: false });
mediaUploader.targetInput = targetInput;
mediaUploader.on('select', function() {
var attachment = mediaUploader.state().get('selection').first().toJSON();
$(mediaUploader.targetInput).val(attachment.url);
});
mediaUploader.open();
});
});
</script>
<?php
}
// HALAMAN KHUSUS: TENTANG APLIKASI, DEVELOPER & PERSUASIVE DONATION CTA
function edukarsa_about_page_html() {
if ( ! current_user_can( 'manage_options' ) ) return;
?>
<div class="wrap edukarsa-admin-wrap" style="max-width: 1000px; margin-top: 20px;">
<!-- HEADER UTAMA APLIKASI -->
<div style="background: linear-gradient(135deg, #0f2b5c 0%, #1a73e8 100%); color: #ffffff; padding: 45px 40px; border-radius: 16px; box-shadow: 0 15px 35px rgba(15,43,92,0.18); margin-bottom: 30px; position: relative; overflow: hidden;">
<div style="position: absolute; top: -20px; right: -20px; font-size: 140px; opacity: 0.08; font-weight: 900; user-select: none;">🎓</div>
<span style="display: inline-block; background: rgba(255,255,255,0.2); padding: 4px 14px; border-radius: 20px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 15px;">WordPress Theme Khusus Sekolah & Kampus</span>
<h1 style="color: #ffffff; font-size: 32px; font-weight: 800; margin: 0 0 12px; line-height: 1.2;">EduKarsa Theme</h1>
<p style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; max-width: 680px; margin: 0 0 25px;">
Tema WordPress profesional 100% Native dan Zero Plugin yang dirancang secara khusus untuk memberikan performa ultra cepat, keamanan tingkat tinggi, ramah disabilitas (WCAG), dan siap pakai untuk kebutuhan akreditasi institusi pendidikan.
</p>
<div style="display: flex; gap: 12px; flex-wrap: wrap;">
<a href="https://apps.masbudi.my.id/edukarsa" target="_blank" rel="noopener" class="button" style="background: #ffffff; color: #0f2b5c; font-weight: 800; padding: 6px 20px; height: auto; border-radius: 50px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
🌐 https://apps.masbudi.my.id/ &raquo;
</a>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" class="button" style="background: #f59e0b; color: #ffffff; font-weight: 800; padding: 6px 20px; height: auto; border-radius: 50px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15);">
☕ https://donate.masbudi.my.id &raquo;
</a>
</div>
</div>
<div style="display: grid; grid-template-columns: 1.4fr 1fr; gap: 25px; align-items: start;">
<!-- KOLOM KIRI: KARTU DONASI & PERSUASI PENGEMBANGAN -->
<div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); margin-bottom: 25px;">
<div style="display: flex; align-items: center; gap: 12px; margin-bottom: 15px;">
<span style="font-size: 32px;">☕</span>
<div>
<h3 style="margin: 0; font-size: 18px; color: #0f172a; font-weight: 800;">Dukung Keberlanjutan Tema EduKarsa</h3>
<span style="font-size: 12px; color: #64748b;">Kontribusi Anda menjaga tema ini tetap gratis, aman, dan terus berkembang.</span>
</div>
</div>
<p style="font-size: 14px; color: #334155; line-height: 1.75; margin-bottom: 18px;">
Tema <strong>EduKarsa</strong> dibangun dengan komitmen <em>Zero Plugin</em> untuk memastikan situs institusi pendidikan Anda terbebas dari lisensi berbayar bulanan, terbebas dari celah keamanan plugin pihak ketiga, dan memiliki kecepatan akses maksimal bagi siswa maupun wali murid.
</p>
<div style="background: #fef3c7; border-left: 4px solid #f59e0b; padding: 14px 16px; border-radius: 4px; margin-bottom: 22px;">
<p style="margin: 0; font-size: 13px; color: #92400e; line-height: 1.6;">
<strong>Mari Berkolaborasi:</strong> Jika tema ini membantu sekolah atau kampus Anda menghemat biaya pengembangan ratusan ribu hingga jutaan rupiah, Anda dapat menyisihkan donasi sukarela untuk mendukung riset, pembaruan fitur, dan pemeliharaan jangka panjang.
</p>
</div>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="display: block; text-align: center; background: linear-gradient(135deg, #f59e0b, #d97706); color: #ffffff; text-decoration: none; padding: 14px 25px; border-radius: 50px; font-weight: 800; font-size: 15px; box-shadow: 0 8px 20px rgba(217,119,6,0.3); transition: all 0.2s ease;">
💖 Salurkan Donasi Melalui https://donate.masbudi.my.id &raquo;
</a>
</div>
<!-- KARTU SPESIFIKASI ARSITEKTUR -->
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.04);">
<h4 style="margin: 0 0 15px; font-size: 15px; color: #0f172a; font-weight: 800;">⚡ Keunggulan Arsitektur EduKarsa</h4>
<ul style="margin: 0; padding-left: 18px; font-size: 13px; color: #475569; line-height: 1.9;">
<li><strong>100% Native WordPress</strong>: Mengandalkan Settings API dan Native CPT tanpa ketergantungan plugin pihak ketiga.</li>
<li><strong>WCAG 2.1 Accessibility</strong>: Dilengkapi Web Speech Synthesizer (Audio Baca), Kontras Tinggi, dan Monokrom untuk disabilitas.</li>
<li><strong>Multilingual Ready</strong>: Dukungan translasi instan otomatis (ID, EN, AR, ZH, JA) tanpa membebani operator sekolah.</li>
<li><strong>Structured Schema JSON-LD</strong>: Metadata otomatis untuk memaksimalkan peringkat Google Search dan Google News.</li>
<li><strong>Zero Cache Trapping</strong>: Menggunakan manajemen cache-busting dinamis untuk kemudahan deployment.</li>
</ul>
</div>
</div>
<!-- KOLOM KANAN: PROFIL DEVELOPER & KONTAK -->
<div>
<div style="background: #ffffff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.04); margin-bottom: 25px;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="width: 75px; height: 75px; border-radius: 50%; background: #0f2b5c; color: #ffffff; font-size: 32px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 8px 20px rgba(15,43,92,0.2);">
MB
</div>
<h3 style="margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #0f172a;">Mas Budi Kusuma</h3>
<span style="font-size: 12px; color: #1a73e8; font-weight: 700; background: #e0f2fe; padding: 2px 10px; border-radius: 12px;">Full-Stack & DevOps Engineer</span>
</div>
<div style="border-top: 1px solid #f1f5f9; padding-top: 15px; font-size: 13px; color: #334155; line-height: 1.8;">
<div style="margin-bottom: 10px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Portal Aplikasi</span>
<a href="https://apps.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="font-weight: 700; color: #0f2b5c; text-decoration: none;">https://apps.masbudi.my.id/</a>
</div>
<div style="margin-bottom: 10px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Portal Donasi</span>
<a href="https://donate.masbudi.my.id/edukarsa" target="_blank" rel="noopener" style="font-weight: 700; color: #d97706; text-decoration: none;">https://donate.masbudi.my.id</a>
</div>
<div style="margin-bottom: 15px;">
<span style="display: block; font-size: 11px; font-weight: 700; color: #94a3b8; text-transform: uppercase;">Email Developer</span>
<a href="mailto:[email protected]" style="font-weight: 700; color: #0f2b5c; text-decoration: none;">[email protected]</a>
</div>
</div>
<a href="mailto:[email protected]?subject=Konsultasi%20Tema%20EduKarsa" class="button" style="width: 100%; text-align: center; border-radius: 6px; padding: 6px 0; font-weight: 700; color: #0f2b5c; border-color: #cbd5e1;">
✉️ Kirim Pesan ke Developer
</a>
</div>
<div style="text-align: center; font-size: 12px; color: #94a3b8;">
<p style="margin: 0;">EduKarsa Theme &bull; Versi 1.1.4</p>
<p style="margin: 4px 0 0;">Dikelola dan dirawat oleh <strong>masbudi.my.id</strong></p>
</div>
</div>
</div>
</div>
<?php
}