<?php
// Cquery metrics and stats natively in PHP
$stats = [
    'provinces' => $pdo->query("SELECT COUNT(DISTINCT province) FROM learning_resources WHERE status = 'approved'")->fetchColumn() ?: 77,
    'districts' => $pdo->query("SELECT COUNT(DISTINCT district) FROM learning_resources WHERE status = 'approved'")->fetchColumn() ?: 928,
    'subdistricts' => $pdo->query("SELECT COUNT(DISTINCT sub_district) FROM learning_resources WHERE status = 'approved'")->fetchColumn() ?: 7255,
    'resources' => $pdo->query("SELECT COUNT(*) FROM learning_resources WHERE status = 'approved'")->fetchColumn(),
    'activities' => $pdo->query("SELECT COUNT(*) FROM featured_activities")->fetchColumn(),
    'visitors' => isset($visitor_count) ? number_format($visitor_count) : '0'
];

// ตัด "สาขา" นำหน้าออกเพื่อรวม group ที่เก็บข้อมูลต่างรูปแบบกัน
function dashNormWisdom(string $s): string {
    $s = trim($s);
    return (mb_substr($s, 0, 4, 'UTF-8') === 'สาขา') ? trim(mb_substr($s, 4, null, 'UTF-8')) : $s;
}

// Query chart details
$wisdom_query = $pdo->query("SELECT wisdom_branch, COUNT(*) as count FROM learning_resources WHERE status = 'approved' AND wisdom_branch IS NOT NULL AND wisdom_branch != '' GROUP BY wisdom_branch ORDER BY count DESC")->fetchAll();

// Merge สาขาที่ซ้ำกันเนื่องจากมี/ไม่มีคำว่า "สาขา" นำหน้า
$wisdom_merged = [];
foreach ($wisdom_query as $row) {
    $label = dashNormWisdom($row['wisdom_branch']);
    $wisdom_merged[$label] = ($wisdom_merged[$label] ?? 0) + (int)$row['count'];
}
arsort($wisdom_merged);
$wisdom_labels = array_keys($wisdom_merged);
$wisdom_values = array_values($wisdom_merged);

$type_query = $pdo->query("SELECT type, COUNT(*) as count FROM learning_resources WHERE status = 'approved' AND type IS NOT NULL AND type != '' GROUP BY type ORDER BY count DESC")->fetchAll();
$type_labels = array_column($type_query, 'type');
$type_values = array_map('intval', array_column($type_query, 'count'));

$subject_query = $pdo->query("SELECT subject, COUNT(*) as count FROM learning_resources WHERE status = 'approved' AND subject IS NOT NULL AND subject != '' GROUP BY subject ORDER BY count DESC")->fetchAll();
$subject_labels = array_column($subject_query, 'subject');
$subject_values = array_map('intval', array_column($subject_query, 'count'));

// Query region statistics
$geo_names = [
    1 => 'ภาคเหนือ',
    2 => 'ภาคตะวันออกเฉียงเหนือ',
    3 => 'ภาคตะวันออก',
    4 => 'ภาคกลาง',
    5 => 'ภาคใต้'
];
$regions_data = array_fill_keys(array_values($geo_names), 0);
$geo_query = $pdo->query("SELECT geo, COUNT(*) as count FROM learning_resources WHERE status = 'approved' GROUP BY geo")->fetchAll();
foreach ($geo_query as $row) {
    $g_val = $row['geo'] !== null ? (int)$row['geo'] : 0;
    if (isset($geo_names[$g_val])) {
        $regions_data[$geo_names[$g_val]] = (int)$row['count'];
    }
}
$grand_total_resources = $stats['resources'];

// Query homepage activities — ใช้รายการที่แอดมินเลือกไว้ใน system_settings.homepage_activity_ids
// ถ้ายังไม่ได้เลือกหรือลบไปจนหมด ให้ fallback เป็น 9 รายการล่าสุดที่อนุมัติแล้ว
$homepage_ids_csv = $settings['homepage_activity_ids'] ?? '';
$homepage_ids = array_filter(array_map('intval', explode(',', $homepage_ids_csv)));

if (!empty($homepage_ids)) {
    $place = implode(',', array_fill(0, count($homepage_ids), '?'));
    $stmt = $pdo->prepare("
        SELECT * FROM featured_activities
        WHERE id IN ($place) AND status = 'approved'
        ORDER BY id DESC
        LIMIT 12
    ");
    $stmt->execute($homepage_ids);
    $activities = $stmt->fetchAll();
} else {
    // ไม่มีรายการเด่นที่แอดมินเลือกไว้ → แสดงกิจกรรมที่เพิ่มเข้าระบบล่าสุด
    $activities = $pdo->query("
        SELECT * FROM featured_activities
        WHERE status = 'approved'
        ORDER BY id DESC
        LIMIT 12
    ")->fetchAll();
}
?>

<div class="view-section container">
    <!-- Part 1: Overview Dashboard -->
    <div id="stats-overview">
        <div class="stats-grid">
            <div class="stat-card"><h3>จังหวัด</h3><div class="value"><?php echo $stats['provinces']; ?></div></div>
            <div class="stat-card"><h3>อำเภอ</h3><div class="value"><?php echo $stats['districts']; ?></div></div>
            <div class="stat-card"><h3>ตำบล</h3><div class="value"><?php echo $stats['subdistricts']; ?></div></div>
            <div class="stat-card"><h3>แหล่งเรียนรู้</h3><div class="value"><?php echo $stats['resources']; ?></div></div>
            <div class="stat-card"><h3>กิจกรรม</h3><div class="value"><?php echo $stats['activities']; ?></div></div>
            <div class="stat-card"><h3>จำนวนผู้เข้าชม</h3><div class="value"><?php echo $stats['visitors']; ?></div></div>
        </div>
        
        <!-- Row 1: Map & Region List -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-8">
            <!-- Left: Map -->
            <div class="lg:col-span-8 bg-white p-5 rounded-3xl border border-slate-100 shadow-sm min-h-[650px] relative overflow-hidden flex flex-col">
                 <iframe src="view_map.php?embed=map_only&v=1.0.4" style="width: 100%; height: 100%; min-height: 650px; border: none; overflow: hidden; background: transparent;" allowtransparency="true" scrolling="no"></iframe>
            </div>
            
            <!-- Right: Region Stats -->
            <div class="lg:col-span-4 bg-white p-6 rounded-3xl border border-slate-100 shadow-sm flex flex-col justify-between">
                <h4 class="font-bold text-slate-800 text-lg border-b border-slate-100 pb-3 mb-4 flex items-center gap-2">
                    <i class="fa-solid fa-map-location-dot text-[#6a5acd]"></i>
                    จำนวนแหล่งเรียนรู้แยกตามภาค
                </h4>
                
                <?php
                $region_items = [
                    ['name' => 'ภาคเหนือ', 'en' => 'Northern Region', 'color' => 'bg-indigo-500', 'bg' => 'bg-indigo-50/40', 'border' => 'border-indigo-100/50', 'text' => 'text-indigo-600', 'count' => $regions_data['ภาคเหนือ']],
                    ['name' => 'ภาคตะวันออกเฉียงเหนือ', 'en' => 'Northeastern Region', 'color' => 'bg-amber-500', 'bg' => 'bg-amber-50/40', 'border' => 'border-amber-100/50', 'text' => 'text-amber-600', 'count' => $regions_data['ภาคตะวันออกเฉียงเหนือ']],
                    ['name' => 'ภาคตะวันออก', 'en' => 'Eastern Region', 'color' => 'bg-emerald-500', 'bg' => 'bg-emerald-50/40', 'border' => 'border-emerald-100/50', 'text' => 'text-emerald-600', 'count' => $regions_data['ภาคตะวันออก']],
                    ['name' => 'ภาคกลาง', 'en' => 'Central Region', 'color' => 'bg-sky-500', 'bg' => 'bg-sky-50/40', 'border' => 'border-sky-100/50', 'text' => 'text-sky-600', 'count' => $regions_data['ภาคกลาง']],
                    ['name' => 'ภาคใต้', 'en' => 'Southern Region', 'color' => 'bg-rose-500', 'bg' => 'bg-rose-50/40', 'border' => 'border-rose-100/50', 'text' => 'text-rose-600', 'count' => $regions_data['ภาคใต้']],
                    ['name' => 'ภาพรวม', 'en' => 'Total Overview', 'color' => 'bg-[#6a5acd]', 'bg' => 'bg-purple-50/50', 'border' => 'border-purple-200/50', 'text' => 'text-[#6a5acd]', 'count' => $grand_total_resources]
                ];
                ?>
                <div class="space-y-3.5 my-auto">
                    <?php foreach ($region_items as $item): ?>
                        <div class="flex items-center justify-between p-3 rounded-2xl <?php echo $item['bg']; ?> border <?php echo $item['border']; ?> hover:scale-[1.02] transition-transform duration-200">
                            <div class="flex items-center gap-3">
                                <span class="w-9 h-9 rounded-xl <?php echo $item['color']; ?> text-white flex items-center justify-center font-bold shadow-sm">
                                    <i class="fa-solid fa-map-pin text-sm"></i>
                                </span>
                                <div>
                                    <h5 class="font-bold text-slate-800 text-sm"><?php echo $item['name']; ?></h5>
                                    <p class="text-[10px] text-slate-400"><?php echo $item['en']; ?></p>
                                </div>
                            </div>
                            <div class="text-right">
                                <span class="text-lg font-black <?php echo $item['text']; ?>"><?php echo number_format($item['count']); ?></span>
                                <span class="text-[10px] text-slate-500 block font-semibold">แห่ง</span>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Row 2: 3 Charts side-by-side -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
            <!-- 1. Wisdom Pie Chart -->
            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex flex-col">
                <h4 class="text-center font-bold text-slate-800 mb-4 flex items-center justify-center gap-1.5"><i class="fas fa-leaf text-[#6a5acd]"></i> สาขาภูมิปัญญาท้องถิ่น</h4>
                <div class="relative h-[240px]">
                    <canvas id="wisdomChart"></canvas>
                </div>
                <!-- Custom 2-column legend -->
                <div id="wisdomLegend" style="display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin-top:12px;font-size:0.75rem;"></div>
            </div>
            
            <!-- 2. Subject Bar Chart -->
            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex flex-col">
                <h4 class="text-center font-bold text-slate-800 mb-4 flex items-center justify-center gap-1.5"><i class="fas fa-book text-[#6a5acd]"></i> สาระการเรียนรู้</h4>
                <div class="relative h-[300px]">
                    <canvas id="subjectChart"></canvas>
                </div>
            </div>
            
            <!-- 3. Type Pie Chart -->
            <div class="bg-white p-5 rounded-3xl border border-slate-100 shadow-sm flex flex-col">
                <h4 class="text-center font-bold text-slate-800 mb-4 flex items-center justify-center gap-1.5"><i class="fas fa-tags text-[#6a5acd]"></i> ประเภทแหล่งเรียนรู้</h4>
                <div class="relative h-[300px]">
                    <canvas id="typeChart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Part 2: Featured Activities -->
    <div class="activities-section mt-12" style="margin-bottom: 50px;">
        <h2 style="margin-bottom: 40px; color: var(--text-main); text-align: center; font-size: 1.8rem; font-weight: 700;">
            <i class="fas fa-calendar-alt text-[#6a5acd] mr-2"></i> กิจกรรมเด่น
        </h2>

        <?php
        // Helpers ที่ใช้รูปแบบเดียวกับ views/activities.php
        if (!function_exists('activity_image_url')) {
            function activity_image_url($poster) {
                if (empty($poster)) {
                    return 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80';
                }
                if (strpos($poster, 'http') === 0) return $poster;
                return 'admin/upload/' . $poster;
            }
        }
        if (!function_exists('to_thai_date')) {
            function to_thai_date($date_str) {
                if (empty($date_str)) return $date_str;
                $ts = strtotime($date_str);
                if ($ts === false) return $date_str;
                return date('d-m-', $ts) . (date('Y', $ts) + 543);
            }
        }
        if (!function_exists('format_activity_date')) {
            function format_activity_date($act) {
                $start = $act['start_date'] ?? $act['activity_date'] ?? '';
                $end   = $act['end_date'] ?? '';
                if (empty($start)) return '-';
                if (empty($end) || $end === $start) return to_thai_date($start);
                return to_thai_date($start) . ' ถึง ' . to_thai_date($end);
            }
        }
        if (!function_exists('format_activity_time')) {
            function format_activity_time($act) {
                $s = $act['start_time'] ?? '';
                $e = $act['end_time'] ?? '';
                if (empty($s) && empty($e)) return '';
                if (!empty($s) && !empty($e)) return substr($s,0,5) . ' - ' . substr($e,0,5) . ' น.';
                return substr($s ?: $e, 0, 5) . ' น.';
            }
        }
        ?>
        <?php if (!empty($activities)): ?>
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
                <?php foreach ($activities as $act):
                    $modal_data = [
                        'title'         => $act['title'] ?? '',
                        'poster'        => activity_image_url($act['poster_url'] ?? ''),
                        'type'          => ($act['activity_type'] === 'อื่นๆ' && !empty($act['activity_type_other'])) ? 'อื่นๆ (' . $act['activity_type_other'] . ')' : ($act['activity_type'] ?? ''),
                        'date'          => format_activity_date($act),
                        'time'          => format_activity_time($act),
                        'location'      => $act['location'] ?? '',
                        'province'      => $act['province'] ?? '',
                        'district'      => $act['district'] ?? '',
                        'sub_district'  => $act['sub_district'] ?? '',
                        'target_group'  => $act['target_group'] ?? '',
                        'target_count'  => $act['target_count'] ?? '',
                        'participant_count' => $act['participant_count'] ?? '',
                        'description'   => $act['description'] ?? '',
                        'link_url'      => $act['link_url'] ?? '',
                    ];
                ?>
                    <div class="bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all border border-slate-100 flex flex-col hover:-translate-y-1 duration-300">

                        <!-- Poster Image -->
                        <div class="relative overflow-hidden h-[240px] group/img bg-slate-100">
                            <img src="<?php echo htmlspecialchars(activity_image_url($act['poster_url'] ?? '')); ?>"
                                class="w-full h-full object-cover group-hover/img:scale-105 transition-transform duration-500"
                                alt="<?php echo htmlspecialchars($act['title']); ?>"
                                loading="lazy" decoding="async"
                                onerror="this.src='https://images.unsplash.com/photo-1540575467063-178a50c2df87?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80'">
                            <div class="absolute top-4 left-4 bg-[#6a5acd] text-white text-[10px] px-3 py-1 rounded-xl font-bold shadow-md">
                                <?php
                                $type_label = $act['activity_type'] ?: 'กิจกรรมเด่น';
                                if ($type_label === 'อื่นๆ' && !empty($act['activity_type_other'])) {
                                    $type_label = 'อื่นๆ (' . $act['activity_type_other'] . ')';
                                }
                                echo htmlspecialchars($type_label);
                                ?>
                            </div>
                        </div>

                        <!-- Details (ไม่แสดงคำอธิบาย — คลิก "รายละเอียดเพิ่มเติม" เพื่อเปิด modal) -->
                        <div class="p-6 flex-1 flex flex-col justify-between">
                            <div>
                                <h3 class="font-extrabold text-slate-800 text-lg mb-3 line-clamp-2" title="<?php echo htmlspecialchars($act['title']); ?>">
                                    <?php echo htmlspecialchars($act['title']); ?>
                                </h3>

                                <div class="space-y-2 text-xs text-slate-600 mb-4">
                                    <div class="flex items-start gap-1.5">
                                        <i class="far fa-calendar-alt text-[#6a5acd] mt-0.5"></i>
                                        <span><?php echo htmlspecialchars(format_activity_date($act)); ?>
                                            <?php $t = format_activity_time($act); if ($t): ?>
                                                <span class="text-slate-400"> · <?php echo htmlspecialchars($t); ?></span>
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                    <?php if (!empty($act['location'])): ?>
                                    <div class="flex items-start gap-1.5">
                                        <i class="fas fa-map-marker-alt text-[#6a5acd] mt-0.5"></i>
                                        <span class="line-clamp-1"><?php echo htmlspecialchars($act['location']); ?></span>
                                    </div>
                                    <?php endif; ?>
                                     <?php if (false && (!empty($act['target_group']) || !empty($act['target_count']))): ?>
                                    <div class="flex items-start gap-1.5">
                                        <i class="fas fa-users text-[#6a5acd] mt-0.5"></i>
                                        <span>
                                            <?php echo htmlspecialchars($act['target_group'] ?? ''); ?>
                                            <?php if (!empty($act['target_count'])): ?>
                                                <strong><?php echo (int)$act['target_count']; ?> คน</strong>
                                            <?php endif; ?>
                                        </span>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <div class="border-t border-slate-100 pt-4 mt-auto flex items-center justify-between gap-2">
                                <button type="button"
                                    class="activity-more-btn inline-flex items-center gap-1 text-xs text-[#6a5acd] font-bold hover:underline"
                                    data-act='<?php echo htmlspecialchars(json_encode($modal_data, JSON_UNESCAPED_UNICODE), ENT_QUOTES, "UTF-8"); ?>'>
                                    <i class="fas fa-circle-info"></i> รายละเอียดเพิ่มเติม
                                </button>
                                <span class="text-[10px] text-slate-400 truncate">
                                    <?php echo htmlspecialchars($act['province'] ?? ''); ?>
                                </span>
                            </div>
                        </div>

                    </div>
                <?php endforeach; ?>
            </div>

            <!-- Modal สำหรับแสดงรายละเอียดกิจกรรม -->
            <div id="activity-detail-modal" class="act-modal" aria-hidden="true">
                <div class="act-modal-content">
                    <button id="activity-modal-close" class="act-modal-close" aria-label="ปิด">&times;</button>
                    <div id="activity-modal-body" class="act-modal-body"></div>
                </div>
            </div>

            <!-- Lightbox สำหรับดูรูปใหญ่ -->
            <div id="img-lightbox" class="img-lightbox" aria-hidden="true">
                <button id="img-lightbox-close" class="img-lightbox-close" aria-label="ปิด">&times;</button>
                <img id="img-lightbox-img" src="" alt="">
            </div>

            <style>
                .act-modal {
                    display: none;
                    position: fixed;
                    inset: 0;
                    z-index: 2000;
                    background: rgba(15, 23, 42, 0.55);
                    backdrop-filter: blur(8px);
                    -webkit-backdrop-filter: blur(8px);
                    padding: 16px;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                }
                .act-modal.open { display: flex; align-items: flex-start; justify-content: center; }
                .act-modal-content {
                    position: relative;
                    background: #fff;
                    width: 100%;
                    max-width: 720px;
                    max-height: calc(100vh - 32px);
                    border-radius: 20px;
                    overflow: hidden;
                    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.4);
                    display: flex;
                    flex-direction: column;
                    margin: auto;
                    animation: actModalIn .25s ease-out;
                }
                @keyframes actModalIn { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
                .act-modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; overscroll-behavior: contain; }
                .act-modal-close {
                    position: absolute; top: 10px; right: 12px;
                    width: 38px; height: 38px;
                    border: none; border-radius: 50%;
                    background: rgba(0,0,0,0.45); color: #fff;
                    font-size: 1.6rem; line-height: 1;
                    cursor: pointer; z-index: 10;
                    display: flex; align-items: center; justify-content: center;
                    transition: background .2s;
                }
                .act-modal-close:hover { background: rgba(0,0,0,0.7); }
                .act-modal-body .modal-poster { width: 100%; height: 240px; object-fit: cover; display: block; background: #f1f5f9; cursor: zoom-in; transition: opacity .2s; }
                .act-modal-body .modal-poster:hover { opacity: .92; }

                /* Lightbox สำหรับดูรูปใหญ่ */
                .img-lightbox { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; animation: lbFade .2s ease-out; }
                .img-lightbox.open { display: flex; }
                @keyframes lbFade { from { opacity:0; } to { opacity:1; } }
                .img-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); animation: lbZoom .25s ease-out; }
                @keyframes lbZoom { from { transform: scale(.92); opacity:0; } to { transform: scale(1); opacity:1; } }
                .img-lightbox-close { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
                .img-lightbox-close:hover { background: rgba(255,255,255,0.3); }
                @media (max-width: 480px) {
                    .img-lightbox { padding: 0; }
                    .img-lightbox img { border-radius: 0; }
                    .img-lightbox-close { top: 12px; right: 12px; width: 38px; height: 38px; font-size: 1.5rem; }
                }
                .act-modal-body .modal-inner { padding: 24px; }
                @media (max-width: 768px) {
                    .act-modal { padding: 10px; }
                    .act-modal-content { max-height: calc(100vh - 20px); border-radius: 16px; }
                    .act-modal-body .modal-poster { height: 200px; }
                    .act-modal-body .modal-inner { padding: 18px; }
                    .act-modal-body .modal-inner h2 { font-size: 1.3rem !important; }
                    .act-modal-body .modal-inner .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
                }
                @media (max-width: 480px) {
                    .act-modal { padding: 0; }
                    .act-modal-content { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
                    .act-modal-body .modal-poster { height: 180px; }
                    .act-modal-body .modal-inner { padding: 16px; }
                    .act-modal-body .modal-inner h2 { font-size: 1.15rem !important; }
                    .act-modal-close { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 1.4rem; }
                    .act-modal-body .modal-inner .text-sm { font-size: 13px; }
                    .act-modal-body .modal-inner a[target="_blank"] { width: 100%; justify-content: center; }
                }
            </style>

            <script>
            (function() {
                const modal = document.getElementById('activity-detail-modal');
                const body  = document.getElementById('activity-modal-body');
                const closeBtn = document.getElementById('activity-modal-close');
                if (!modal || !body) return;

                function escapeHtml(s) {
                    return String(s ?? '').replace(/[&<>"']/g, c => ({ '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]));
                }

                function open(a) {
                    const loc = [a.sub_district, a.district, a.province].filter(Boolean).join(' · ');
                    body.innerHTML = `
                        <img src="${a.poster}" alt="" class="modal-poster" onerror="this.style.display='none'">
                        <div class="modal-inner">
                            ${a.type ? `<span class="inline-block bg-[#6a5acd] text-white text-[10px] px-3 py-1 rounded-xl font-bold mb-3">${escapeHtml(a.type)}</span>` : ''}
                            <h2 class="text-2xl font-extrabold text-slate-800 mb-4 break-words">${escapeHtml(a.title)}</h2>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-slate-700 mb-5 pb-5 border-b border-slate-100">
                                <div><i class="far fa-calendar-alt text-[#6a5acd] mr-2"></i><strong>วันที่:</strong> ${escapeHtml(a.date)}${a.time ? ' · ' + escapeHtml(a.time) : ''}</div>
                                ${a.location ? `<div><i class="fas fa-map-marker-alt text-[#6a5acd] mr-2"></i><strong>สถานที่:</strong> ${escapeHtml(a.location)}</div>` : ''}
                                ${loc ? `<div><i class="fas fa-location-dot text-[#6a5acd] mr-2"></i><strong>พื้นที่:</strong> ${escapeHtml(loc)}</div>` : ''}
                                ${false ? `<div><i class="fas fa-users text-[#6a5acd] mr-2"></i><strong>กลุ่มเป้าหมาย:</strong> ${escapeHtml(a.target_group || '-')} ${a.target_count ? '<strong>'+escapeHtml(a.target_count)+' คน</strong>' : ''}</div>` : ''}
                                ${a.participant_count ? `<div><i class="fas fa-user-check text-[#6a5acd] mr-2"></i><strong>ผู้เข้าร่วมจริง:</strong> ${escapeHtml(a.participant_count)} คน</div>` : ''}
                            </div>

                            <h3 class="font-bold text-slate-800 mb-2"><i class="fas fa-align-left text-[#6a5acd] mr-2"></i>รายละเอียดกิจกรรม</h3>
                            <p class="text-slate-600 text-sm leading-relaxed whitespace-pre-line break-words">${escapeHtml(a.description || 'ไม่มีคำอธิบายสำหรับกิจกรรมนี้')}</p>

                            ${a.link_url ? `<div class="mt-5 pt-4 border-t border-slate-100">
                                <a href="${escapeHtml(a.link_url)}" target="_blank" rel="noopener"
                                   class="inline-flex items-center gap-2 px-5 py-2 bg-[#6a5acd] hover:bg-[#483d8b] text-white font-semibold rounded-xl text-sm transition-colors" style="text-decoration:none;">
                                    <i class="fas fa-external-link-alt"></i> เปิดลิงก์เพิ่มเติม
                                </a>
                            </div>` : ''}
                        </div>
                    `;
                    body.scrollTop = 0;
                    modal.classList.add('open');
                    modal.setAttribute('aria-hidden', 'false');
                    document.body.style.overflow = 'hidden';
                }
                function close() {
                    modal.classList.remove('open');
                    modal.setAttribute('aria-hidden', 'true');
                    document.body.style.overflow = '';
                }

                document.querySelectorAll('.activity-more-btn').forEach(btn => {
                    btn.addEventListener('click', () => {
                        try { open(JSON.parse(btn.dataset.act)); }
                        catch (e) { console.error(e); }
                    });
                });
                if (closeBtn) closeBtn.addEventListener('click', close);
                modal.addEventListener('click', e => { if (e.target === modal) close(); });
                document.addEventListener('keydown', e => {
                    if (e.key === 'Escape') {
                        if (lightbox.classList.contains('open')) closeLightbox();
                        else if (modal.classList.contains('open')) close();
                    }
                });

                // ---- Lightbox ----
                const lightbox = document.getElementById('img-lightbox');
                const lightboxImg = document.getElementById('img-lightbox-img');
                const lightboxClose = document.getElementById('img-lightbox-close');
                function openLightbox(src) {
                    lightboxImg.src = src;
                    lightbox.classList.add('open');
                    lightbox.setAttribute('aria-hidden', 'false');
                }
                function closeLightbox() {
                    lightbox.classList.remove('open');
                    lightbox.setAttribute('aria-hidden', 'true');
                    setTimeout(() => { lightboxImg.src = ''; }, 200);
                }
                body.addEventListener('click', e => {
                    if (e.target.classList && e.target.classList.contains('modal-poster')) {
                        openLightbox(e.target.src);
                    }
                });
                lightbox.addEventListener('click', closeLightbox);
                if (lightboxClose) lightboxClose.addEventListener('click', e => { e.stopPropagation(); closeLightbox(); });
            })();
            </script>
        <?php else: ?>
            <div class="text-center py-20 bg-slate-50/50 rounded-2xl border border-slate-100">
                <i class="far fa-calendar-times text-5xl text-slate-300 mb-3"></i>
                <p class="text-slate-500 font-bold">ขณะนี้ยังไม่มีข้อมูลกิจกรรมที่น่าสนใจในระบบ</p>
            </div>
        <?php endif; ?>

        <?php if (!empty($activities)): ?>
            <div class="text-center mt-10">
                <a href="index.php?view=activities"
                   class="inline-flex items-center gap-2 px-8 py-3 bg-[#6a5acd] hover:bg-[#483d8b] text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all"
                   style="text-decoration:none;">
                    <i class="fas fa-calendar-check"></i>
                    ดูกิจกรรมทั้งหมด
                    <i class="fas fa-arrow-right text-xs"></i>
                </a>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Load Chart.js DataLabels Plugin -->
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
    // Register DataLabels plugin globally
    Chart.register(ChartDataLabels);

    // Initialize Dashboard Charts directly utilizing clean PHP json_encode values!
    document.addEventListener('DOMContentLoaded', function() {
        // 1. Wisdom Pie Chart
        const wisdomCtx = document.getElementById('wisdomChart')?.getContext('2d');
        if (wisdomCtx) {
            const wisdomColors = ['#f8b449', '#ff9999', '#9a81e9', '#ff7b7b', '#bdf17b', '#7ae6bd', '#ffcf5c', '#42b0f5', '#606ee3', '#e060e3', '#e36098', '#60e395'];
            const wisdomLabels = <?php echo json_encode($wisdom_labels); ?>;
            const wisdomValues = <?php echo json_encode($wisdom_values); ?>;

            new Chart(wisdomCtx, {
                type: 'pie',
                data: {
                    labels: wisdomLabels,
                    datasets: [{ data: wisdomValues, backgroundColor: wisdomColors }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        datalabels: {
                            color: '#000000',
                            font: { weight: 'bold', family: 'Sarabun', size: 10 },
                            formatter: (value) => value > 0 ? value : ''
                        }
                    }
                }
            });

            // สร้าง custom legend 2 คอลัมน์
            const legendEl = document.getElementById('wisdomLegend');
            if (legendEl) {
                wisdomLabels.forEach((label, i) => {
                    const color = wisdomColors[i] || '#ccc';
                    const value = wisdomValues[i] || 0;
                    const item = document.createElement('div');
                    item.style.cssText = 'display:flex;align-items:center;gap:5px;overflow:hidden;min-width:0;';
                    item.innerHTML = `
                        <span style="width:10px;height:10px;border-radius:3px;background:${color};flex-shrink:0;display:inline-block;"></span>
                        <span style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#374151;flex:1;min-width:0;" title="${label}">${label}</span>
                        <span style="font-weight:700;color:#6a5acd;flex-shrink:0;margin-left:2px;">${value}</span>
                    `;
                    legendEl.appendChild(item);
                });
            }
        }

        // 2. Type Pie Chart
        const typeCtx = document.getElementById('typeChart')?.getContext('2d');
        if (typeCtx) {
            new Chart(typeCtx, {
                type: 'pie',
                data: {
                    labels: <?php echo json_encode($type_labels); ?>,
                    datasets: [{
                        data: <?php echo json_encode($type_values); ?>,
                        backgroundColor: ['#f8b449', '#ff9999', '#9a81e9']
                    }]
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    plugins: { 
                        legend: { 
                            position: 'bottom', 
                            labels: { 
                                font: { size: 9, family: 'Sarabun' }, 
                                boxWidth: 8
                            } 
                        },
                        datalabels: {
                            color: '#000000',
                            font: { weight: 'bold', family: 'Sarabun', size: 11 },
                            formatter: (value) => value > 0 ? value : ''
                        }
                    } 
                }
            });
        }

        // 3. Subject Bar Chart
        const subjectCtx = document.getElementById('subjectChart')?.getContext('2d');
        if (subjectCtx) {
            new Chart(subjectCtx, {
                type: 'bar',
                data: {
                    labels: <?php echo json_encode($subject_labels); ?>,
                    datasets: [{
                        data: <?php echo json_encode($subject_values); ?>,
                        backgroundColor: ['#f8b449', '#ff9999', '#9a81e9', '#ff7b7b', '#bdf17b', '#7ae6bd', '#ffcf5c', '#42b0f5', '#606ee3', '#e060e3', '#e36098', '#60e395']
                    }]
                },
                options: {
                    indexAxis: 'y',
                    responsive: true,
                    maintainAspectRatio: false,
                    layout: {
                        padding: {
                            right: 25
                        }
                    },
                    plugins: { 
                        legend: { display: false },
                        datalabels: {
                            anchor: 'end',
                            align: 'right',
                            color: '#475569',
                            font: {
                                weight: 'bold',
                                family: 'Sarabun',
                                size: 10
                            },
                            formatter: (value) => value
                        }
                    },
                    scales: {
                        x: { beginAtZero: true, grid: { color: '#eee' } },
                        y: {
                            ticks: { font: { size: 9, family: 'Sarabun' } }
                        }
                    }
                }
            });
        }
    });
</script>