<?php include 'header.php'; ?>

<?php
// PHP 5.3 compatible session check
if (session_id() == '') {
    session_start();
}
include '../inc/connect.php';

function safe_json($data, $fallback = '[]') {
    $json = json_encode($data);
    return $json !== false ? $json : $fallback;
}

// 1. รับค่าตัวแปรจาก header.php และคลีนอักขระ
$raw_school_id = isset($schoolID) ? $schoolID : (isset($_SESSION['schoolID']) ? $_SESSION['schoolID'] : '');
$raw_school_id = preg_replace('/[^a-zA-Z0-9_]/', '', $raw_school_id); 

$current_user_type = isset($user_type_id) ? intval($user_type_id) : (isset($_SESSION['user_type_id']) ? intval($_SESSION['user_type_id']) : 0);

$is_admin = ($current_user_type === 9); 

// 🔴 กำหนดการ Group ข้อมูลและข้อความช่องค้นหาตามสิทธิ์
$show_search_box = true;
$search_box_label = "ค้นหา";

if ($is_admin) {
    $user_school_id = ''; 
    $role_name = "ส่วนกลาง (สิทธิ์เต็ม)";
    $group_col = "s.province";
    $chart_label = "จังหวัด";
    $search_box_label = "ค้นหาชื่อจังหวัด"; // ข้อความของส่วนกลาง
} else {
    $user_school_id = $raw_school_id;
    if ($current_user_type === 1) {
        $role_name = "จังหวัด";
        $group_col = "s.amphur";    
        $chart_label = "อำเภอ";
        $search_box_label = "ค้นหาชื่ออำเภอ"; // ข้อความของจังหวัด
    } else if ($current_user_type === 2) {
        $role_name = "อำเภอ";
        $group_col = "s.firstname"; 
        $chart_label = "สถานศึกษา";
        $search_box_label = "ค้นหาชื่อตำบล"; // ข้อความของอำเภอ
    } else if ($current_user_type === 3) {
        $role_name = "สถานศึกษาขึ้นตรง";
        $group_col = "s.firstname"; 
        $chart_label = "สถานศึกษา";
        $search_box_label = "ค้นหาชื่อสถานศึกษา";
    } else if ($current_user_type === 4) {
        $role_name = "ตำบล";
        $group_col = "s.firstname"; 
        $chart_label = "สถานศึกษา";
        $show_search_box = false; // 🔴 ระดับตำบล ให้เอาช่องค้นหาออก
    } else {
        $role_name = "ไม่ระบุสิทธิ์";
        $group_col = "s.firstname"; 
        $chart_label = "สถานศึกษา";
    }
}

$start_date = isset($_POST['start_date']) ? $_POST['start_date'] : '';
$end_date = isset($_POST['end_date']) ? $_POST['end_date'] : '';
$service_type = isset($_POST['service_type']) ? $_POST['service_type'] : '';
$search_term = isset($_POST['search_term']) ? trim($_POST['search_term']) : '';

// ฟังก์ชันสร้าง WHERE clause 
function buildWhereClause($start_date, $end_date, $service_type, $search_term, $user_school_id, $current_user_type) {
    $where_conditions = array();
    $params = array();
    
    if ($user_school_id !== '' && $user_school_id !== '0') {
        if ($current_user_type === 1) {
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = '%' . substr($user_school_id, 0, 4) . '%';
        } else if ($current_user_type === 2) {
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = '%' . substr($user_school_id, 0, 6) . '%';
        } else {
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = '%' . $user_school_id . '%';
        }
    }
    
    if (!empty($start_date)) {
        $where_conditions[] = "g.created_at >= ?";
        $params[] = $start_date . ' 00:00:00';
    }
    if (!empty($end_date)) {
        $where_conditions[] = "g.created_at <= ?";
        $params[] = $end_date . ' 23:59:59';
    }
    if (!empty($service_type)) {
        $where_conditions[] = "g.guidance_type = ?";
        $params[] = $service_type;
    }
    if (!empty($search_term)) {
        $where_conditions[] = "(s.firstname LIKE ? OR s.province LIKE ? OR s.amphur LIKE ?)";
        $search_param = '%' . $search_term . '%';
        $params[] = $search_param;
        $params[] = $search_param;
        $params[] = $search_param;
    }
    
    $where_clause = '';
    if (!empty($where_conditions)) {
        $where_clause = ' AND ' . implode(' AND ', $where_conditions);
    }
    
    return array('clause' => $where_clause, 'params' => $params);
}

$filter_conditions = buildWhereClause($start_date, $end_date, $service_type, $search_term, $user_school_id, $current_user_type);
$where_clause = $filter_conditions['clause'];
$filter_params = $filter_conditions['params'];

$db_error_message = '';

try {
    if (!isset($pdo) || !$pdo) { throw new PDOException("ไม่สามารถเชื่อมต่อฐานข้อมูลได้"); }

    $has_school_table = false;
    try {
        $check_school = $pdo->query("SHOW TABLES LIKE 'school'");
        $has_school_table = ($check_school && $check_school->rowCount() > 0);
    } catch (Exception $e) { $has_school_table = false; }
    
    // 1. ดึงยอดรวม
    if ($has_school_table) {
        $sql = "SELECT COUNT(*) as total_participants FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE 1=1" . $where_clause;
    } else {
        $sql = "SELECT COUNT(*) as total_participants FROM group_guidance g WHERE 1=1" . str_replace(array("s.firstname", "s.province", "s.amphur"), array("''", "''", "''"), $where_clause);
    }
    $stmt = $pdo->prepare($sql);
    $stmt->execute($filter_params);
    $result = $stmt->fetch(PDO::FETCH_ASSOC);
    $totalParticipants = $result ? (empty($result['total_participants']) ? 0 : $result['total_participants']) : 0;
    
    // 2. ดึงประเภทผู้เข้าร่วม
    $sql = "SELECT CASE WHEN g.participant_type = '1' THEN 'การเรียนรู้ตลอดชีวิต' WHEN g.participant_type = '2' THEN 'การเรียนรู้เพื่อการพัฒนาตนเอง' WHEN g.participant_type = '3' THEN 'การเรียนรู้เพื่อคุณวุฒิตามระดับ' WHEN g.participant_type = '4' THEN 'ประชาชน' ELSE 'อื่นๆ' END as type_name, COUNT(*) as count FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE g.participant_type IS NOT NULL" . $where_clause . " GROUP BY g.participant_type";
    $stmt = $pdo->prepare($sql);
    $stmt->execute($filter_params);
    $participantTypes = $stmt->fetchAll(PDO::FETCH_ASSOC);
    if (!$participantTypes) { $participantTypes = array(); }
    
    // 3. ดึงประเภทการแนะแนว (ภาพรวม)
    $sql = "SELECT CASE WHEN g.guidance_type = '1' THEN 'ด้านการศึกษา' WHEN g.guidance_type = '2' THEN 'ด้านอาชีพ' WHEN g.guidance_type = '3' THEN 'ด้านส่วนตัวและสังคม' ELSE 'อื่นๆ' END as guidance_name, IFNULL(SUM(g.participant_count), 0) as count FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE g.participant_count IS NOT NULL AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY count DESC";
    $stmt = $pdo->prepare($sql);
    $stmt->execute($filter_params);
    $guidanceTypes = $stmt->fetchAll(PDO::FETCH_ASSOC);
    if (!$guidanceTypes) { $guidanceTypes = array(); }
    
    // 4. ดึงอัตราความสำเร็จ (ภาพรวม)
    $sql = "SELECT CASE WHEN g.guidance_type = '1' THEN 'ด้านการศึกษา' WHEN g.guidance_type = '2' THEN 'ด้านอาชีพ' WHEN g.guidance_type = '3' THEN 'ด้านส่วนตัวและสังคม' ELSE 'อื่นๆ' END as guidance_name, CASE WHEN SUM(g.participant_count) > 0 THEN ROUND((SUM(CASE WHEN g.goal_achieved = '1' THEN g.participant_count ELSE 0 END) / SUM(g.participant_count) * 100), 2) ELSE 0 END as success_rate FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE g.participant_count IS NOT NULL AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY success_rate DESC";
    $stmt = $pdo->prepare($sql);
    $stmt->execute($filter_params);
    $successRates = $stmt->fetchAll(PDO::FETCH_ASSOC);
    if (!$successRates) { $successRates = array(); }
    
    // 5. ดึงข้อมูล TOP 10 
    if ($has_school_table) {
        $sql = "SELECT IFNULL({$group_col}, 'ไม่ระบุ') as item_name, COUNT(*) as total_count FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE g.schoolID IS NOT NULL" . $where_clause . " GROUP BY item_name HAVING total_count > 0 ORDER BY total_count DESC LIMIT 10";
    } else {
        $sql = "SELECT 'กรุงเทพมหานคร' as item_name, COUNT(*) as total_count FROM group_guidance g WHERE 1=1" . str_replace(array("s.firstname", "s.province", "s.amphur"), array("''", "'กรุงเทพมหานคร'", "''"), $where_clause) . " HAVING total_count > 0 LIMIT 10";
    }
    $stmt = $pdo->prepare($sql);
    $stmt->execute($filter_params);
    $topItems = $stmt->fetchAll(PDO::FETCH_ASSOC);
    if (!$topItems) { $topItems = array(); }
    
    // 6. ดึงรายละเอียดเชิงลึกของแต่ละพื้นที่ เพื่ออัปเดตกราฟทั้ง 3 ตัว
    $itemDetails = array();
    $dynamicGuidance = array();
    $dynamicSuccess = array();

    foreach($topItems as $item) {
        $iname = $item['item_name'];
        $item_params = array($iname);
        if (!empty($filter_params)) { foreach($filter_params as $param) { $item_params[] = $param; } }

        if ($has_school_table) {
            $stmt = $pdo->prepare("SELECT COUNT(*) as count, g.guidance_type FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE IFNULL({$group_col}, 'ไม่ระบุ') = ? AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY g.guidance_type");
            $stmt->execute($item_params);
            $details = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $gOrder = array('1' => 0, '2' => 0, '3' => 0); 
            foreach($details as $detail) { $gOrder[$detail['guidance_type']] = $detail['count']; }
            $tot = array_sum($gOrder);
            $perc = array();
            if ($tot > 0) { foreach($gOrder as $count) { $perc[] = round(($count / $tot) * 100, 1); } } 
            else { $perc = array(0, 0, 0); }
            $itemDetails[$iname] = $perc;

            $stmt = $pdo->prepare("SELECT CASE WHEN g.guidance_type = '1' THEN 'ด้านการศึกษา' WHEN g.guidance_type = '2' THEN 'ด้านอาชีพ' WHEN g.guidance_type = '3' THEN 'ด้านส่วนตัวและสังคม' ELSE 'อื่นๆ' END as guidance_name, IFNULL(SUM(g.participant_count), 0) as count FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE IFNULL({$group_col}, 'ไม่ระบุ') = ? AND g.participant_count IS NOT NULL AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY count DESC");
            $stmt->execute($item_params);
            $g_res = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $g_labels = array(); $g_data = array(); $g_tot = 0;
            foreach($g_res as $r) { $g_tot += $r['count']; }
            foreach($g_res as $r) { 
                $g_labels[] = $r['guidance_name']; 
                $g_data[] = $g_tot > 0 ? round(($r['count'] / $g_tot) * 100, 1) : 0; 
            }
            $dynamicGuidance[$iname] = array('labels' => $g_labels ? $g_labels : array('ไม่มีข้อมูล'), 'data' => $g_data ? $g_data : array(100));

            $stmt = $pdo->prepare("SELECT CASE WHEN g.guidance_type = '1' THEN 'ด้านการศึกษา' WHEN g.guidance_type = '2' THEN 'ด้านอาชีพ' WHEN g.guidance_type = '3' THEN 'ด้านส่วนตัวและสังคม' ELSE 'อื่นๆ' END as guidance_name, CASE WHEN SUM(g.participant_count) > 0 THEN ROUND((SUM(CASE WHEN g.goal_achieved = '1' THEN g.participant_count ELSE 0 END) / SUM(g.participant_count) * 100), 2) ELSE 0 END as success_rate FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID WHERE IFNULL({$group_col}, 'ไม่ระบุ') = ? AND g.participant_count IS NOT NULL AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY success_rate DESC");
            $stmt->execute($item_params);
            $s_res = $stmt->fetchAll(PDO::FETCH_ASSOC);
            $s_labels = array(); $s_data = array();
            foreach($s_res as $r) { 
                $s_labels[] = $r['guidance_name']; 
                $s_data[] = floatval($r['success_rate']); 
            }
            $dynamicSuccess[$iname] = array('labels' => $s_labels ? $s_labels : array('ไม่มีข้อมูล'), 'data' => $s_data ? $s_data : array(0));

        } else {
            $itemDetails[$iname] = array(0,0,0);
            $dynamicGuidance[$iname] = array('labels' => array('ไม่มีข้อมูล'), 'data' => array(100));
            $dynamicSuccess[$iname] = array('labels' => array('ไม่มีข้อมูล'), 'data' => array(0));
        }
    }
} catch (PDOException $e) {
    $db_error_message = $e->getMessage();
    $totalParticipants = 0; $participantTypes = array(); $guidanceTypes = array();
    $successRates = array(); $topItems = array(); $itemDetails = array();
}
?>

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard แบบรายกลุ่ม</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', 'Sarabun', sans-serif; background: #f8fafc; min-height: 100vh; padding: 25px; color: #334155; }
    .dashboard { max-width: 1600px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
    
    /* 🔴 ปรับลดช่องว่าง Header แบบเดียวกับไฟล์บุคคล */
    .top-header { display: flex; flex-direction: column; gap: 0px; background: #ffffff; border-radius: 16px; padding: 24px 30px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; }
    .header-titles { width: 100%; display: flex; flex-direction: column; gap: 4px; }
    .dashboard-title { color: #0f172a; font-size: 1.8rem; font-weight: 800; margin-bottom: -15px; line-height: 1; }
    .role-badge { display: inline-block; padding: 4px 12px; background: #e0e7ff; color: #4338ca; border-radius: 20px; font-size: 0.85rem; font-weight: 700; margin-bottom: 5px; }
    
    .toolbar-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 15px; width: 100%; margin-top: 5px; }
    .toggle-buttons { display: flex; gap: 10px; margin-bottom: 2px;}
    .toggle-btn { padding: 8px 18px; border: 1px solid #cbd5e1; background: #f8fafc; color: #64748b; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.2s;}
    .toggle-btn.active { background: #1e40af; color: white; border-color: #1e40af; }
    
    .compact-filter { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 0; align-self: flex-end; }
    .filter-group { display: flex; flex-direction: column; gap: 6px; }
    .filter-group label { font-size: 0.85rem; font-weight: 600; color: #64748b; margin-bottom: 0;}
    .filter-group input, .filter-group select { padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95rem; color: #334155; background: #fff; outline: none; height: 40px; }
    .btn-small { padding: 0 20px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; color: white; height: 40px; transition: opacity 0.2s;}
    .btn-small:hover { opacity: 0.9; }
    .search-btn { background: #2563eb; } .reset-btn { background: #64748b; }
    .btn-excel { background-color: #10b981; color: white; border: none; padding: 0 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; margin-left: 5px;}

    .stats-row { display: flex; justify-content: space-between; gap: 20px; }
    .stat-card { flex: 1; background: #ffffff; border-radius: 12px; padding: 24px 15px; text-align: center; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 120px; }
    .stat-card.main { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); border: none; } 
    .stat-card.main .stat-number { color: #ffffff; }
    .stat-card.main .stat-label { color: #e2e8f0; }
    .stat-card.lifelong { border-top: 5px solid #059669; } .stat-card.lifelong .stat-number { color: #059669; }
    .stat-card.development { border-top: 5px solid #d97706; } .stat-card.development .stat-number { color: #d97706; }
    .stat-card.qualification { border-top: 5px solid #7c3aed; } .stat-card.qualification .stat-number { color: #7c3aed; }
    .stat-card.public { border-top: 5px solid #475569; } .stat-card.public .stat-number { color: #475569; }
    .stat-number { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 12px; }
    .stat-label { font-size: 0.9rem; font-weight: 600; color: #475569; line-height: 1.5; }
    
    .chart-box { background: #ffffff; border-radius: 16px; padding: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; }
    .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
    .chart-header .chart-title { font-size: 1.15rem; color: #1e293b; font-weight: 700; margin-bottom: 0; }
    .chart-title { font-size: 1.15rem; color: #1e293b; margin-bottom: 20px; font-weight: 700; text-align: center; }
    
    .hero-row { width: 100%; } .hero-chart-wrapper { position: relative; height: 350px; width: 100%; }
    .bottom-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .small-chart-wrapper { position: relative; height: 260px; width: 100%; }
    
    @media (max-width: 1024px) { 
        .toolbar-row { flex-direction: column; align-items: flex-start; }
        .compact-filter { width: 100%; align-self: flex-start;}
        .bottom-row { grid-template-columns: 1fr; } 
        .stats-row { flex-wrap: wrap; } .stat-card { min-width: 200px; } 
    }
    </style>
</head>
<body>
    <div class="dashboard">

        <?php if(!empty($db_error_message)): ?>
            <div style="background: #f8d7da; color: #721c24; padding: 15px; border-radius: 8px; border: 1px solid #f5c6cb; margin-bottom: 15px;">
                <strong>🚨 พบข้อผิดพลาด (SQL Error):</strong><br>
                <code style="font-size: 1rem;"><?php echo htmlspecialchars($db_error_message); ?></code>
            </div>
        <?php endif; ?>

        <div class="top-header">
            <div class="header-titles">
                <div><span class="role-badge">สถานะการใช้งาน: <?php echo $role_name; ?></span></div>
                <h1 class="dashboard-title">Dashboard แบบรายกลุ่ม</h1>
            </div>
            
            <div class="toolbar-row">
                <div class="toggle-buttons">
                    <a href="index" class="toggle-btn active">👥 แบบรายกลุ่ม</a>
                    <a href="dashboardperson" class="toggle-btn">👤 แบบรายบุคคล</a>
                </div>
                
                <form id="filterForm" method="POST" action="" class="compact-filter">
                    <div style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; width: 100%;">
                        <div class="filter-group">
                            <label>วันที่เริ่มต้น</label>
                            <input type="date" id="start_date" name="start_date" value="<?php echo htmlspecialchars($start_date); ?>">
                        </div>
                        <div class="filter-group">
                            <label>ถึงวันที่</label>
                            <input type="date" id="end_date" name="end_date" value="<?php echo htmlspecialchars($end_date); ?>">
                        </div>
                        <div class="filter-group">
                            <label>ประเภทบริการ</label>
                            <select id="service_type" name="service_type">
                                <option value="">ทั้งหมด</option>
                                <option value="1" <?php echo $service_type == '1' ? 'selected' : ''; ?>>ด้านการศึกษา</option>
                                <option value="2" <?php echo $service_type == '2' ? 'selected' : ''; ?>>ด้านอาชีพ</option>
                                <option value="3" <?php echo $service_type == '3' ? 'selected' : ''; ?>>ด้านส่วนตัวและสังคม</option>
                            </select>
                        </div>
                        
                        <?php if ($show_search_box): ?>
                        <div class="filter-group">
                            <label><?php echo $search_box_label; ?></label>
                            <input type="text" id="search_term" name="search_term" placeholder="<?php echo $search_box_label; ?>..." value="<?php echo htmlspecialchars($search_term); ?>">
                        </div>
                        <button type="submit" class="btn-small search-btn">ค้นหา</button>
                        <?php else: ?>
                        <button type="submit" class="btn-small search-btn">กรองข้อมูล</button>
                        <?php endif; ?>
                        
                        <button type="button" class="btn-small reset-btn" onclick="resetFilters()">รีเซ็ต</button>
                        <button type="button" onclick="exportToExcel()" class="btn-excel">📊 Export Excel</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="stats-row">
            <div class="stat-card main">
                <div class="stat-number" id="totalParticipants"><?php echo number_format($totalParticipants); ?></div>
                <div class="stat-label">จำนวนผู้เข้าร่วม<br>กิจกรรมทั้งหมด</div>
            </div>
            <?php 
            $participantTypesArray = array(
                'การเรียนรู้ตลอดชีวิต' => array('class' => 'lifelong', 'count' => 0, 'label' => 'การเรียนรู้<br>ตลอดชีวิต'),
                'การเรียนรู้เพื่อการพัฒนาตนเอง' => array('class' => 'development', 'count' => 0, 'label' => 'การเรียนรู้เพื่อ<br>การพัฒนาตนเอง'),
                'การเรียนรู้เพื่อคุณวุฒิตามระดับ' => array('class' => 'qualification', 'count' => 0, 'label' => 'การเรียนรู้เพื่อ<br>คุณวุฒิตามระดับ'),
                'ประชาชน' => array('class' => 'public', 'count' => 0, 'label' => 'ประชาชน<br>(ทั่วไป)')
            );
            foreach($participantTypes as $type) {
                if(isset($participantTypesArray[$type['type_name']])) { $participantTypesArray[$type['type_name']]['count'] = $type['count']; }
            }
            foreach($participantTypesArray as $data): ?>
            <div class="stat-card <?php echo $data['class']; ?>">
                <div class="stat-number"><?php echo number_format($data['count']); ?></div>
                <div class="stat-label"><?php echo $data['label']; ?></div>
            </div>
            <?php endforeach; ?>
        </div>

        <?php if ($current_user_type != 4): ?>
        <div class="hero-row chart-box">
            <div class="chart-header">
                <div class="chart-title">TOP 10 <?php echo $chart_label; ?> ที่ให้บริการแนะแนวมากที่สุด (คลิกที่แท่งเพื่อดูรายละเอียด)</div>
            </div>
            <div class="hero-chart-wrapper"><canvas id="itemChart"></canvas></div>
        </div>
        <?php endif; ?>

        <div class="bottom-row">
            <div class="chart-box">
                <div class="chart-title" id="guidanceTitle">ประเภทของการแนะแนว - ภาพรวม</div>
                <div class="small-chart-wrapper"><canvas id="guidanceTypeChart"></canvas></div>
            </div>
            <div class="chart-box">
                <div class="chart-title" id="detailTitle">รายละเอียด - <?php echo !empty($topItems) ? $topItems[0]['item_name'] : 'ภาพรวม'; ?></div>
                <div class="small-chart-wrapper"><canvas id="detailChart"></canvas></div>
            </div>
            <div class="chart-box">
                <div class="chart-title" id="successTitle">อัตราความสำเร็จ - ภาพรวม</div>
                <div class="small-chart-wrapper"><canvas id="successRateChart"></canvas></div>
            </div>
        </div>
    </div>

    <script>
    if (typeof Chart === 'undefined') {
        var wrappers = document.querySelectorAll('.hero-chart-wrapper, .small-chart-wrapper');
        for (var i = 0; i < wrappers.length; i++) {
            wrappers[i].innerHTML = '<div style="color: #6b7280; padding: 40px; text-align: center; border: 1px dashed #d1d5db;">📊 กราฟไม่สามารถแสดงได้</div>';
        }
    } else {
        Chart.defaults.color = '#64748b'; Chart.defaults.font.family = "'Inter', sans-serif";
        const chartLabelType = "<?php echo $chart_label; ?>";
        
        const itemDetailsGroup = <?php echo safe_json($itemDetails, '{}'); ?>;
        const dynamicGuidance = <?php echo safe_json($dynamicGuidance, '{}'); ?>;
        const dynamicSuccess = <?php echo safe_json($dynamicSuccess, '{}'); ?>;

        let itemChart, guidanceChart, detailChart, successChart;

        <?php if ($current_user_type != 4): ?>
        const itemData = {
            labels: <?php 
                $iLabels = array(); foreach($topItems as $p) { $iLabels[] = $p['item_name']; }
                echo safe_json($iLabels ? $iLabels : array('ไม่มีข้อมูล'), '["ไม่มีข้อมูล"]');
            ?>,
            datasets: [{
                label: 'จำนวนผู้เข้าร่วม',
                data: <?php 
                    $iCounts = array(); foreach($topItems as $p) { $iCounts[] = intval($p['total_count']); }
                    echo safe_json($iCounts ? $iCounts : array(0), '[0]');
                ?>,
                backgroundColor: '#3b82f6', borderRadius: 4
            }]
        };
        const itemCtx = document.getElementById('itemChart');
        if (itemCtx) {
            itemChart = new Chart(itemCtx.getContext('2d'), {
                type: 'bar', data: itemData,
                options: {
                    responsive: true, maintainAspectRatio: false,
                    scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' } }, x: { grid: { display: false } } },
                    plugins: { legend: { display: false } },
                    onClick: (e, elements) => {
                        if (elements.length > 0) {
                            const index = elements[0].index;
                            updateChartsData(itemData.labels[index]);
                        }
                    }
                }
            });
        }
        <?php endif; ?>

        const guidanceCtx = document.getElementById('guidanceTypeChart');
        if (guidanceCtx) {
            guidanceChart = new Chart(guidanceCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: <?php 
                        $gLabels = array(); foreach($guidanceTypes as $t) { $gLabels[] = $t['guidance_name']; }
                        echo safe_json($gLabels ? $gLabels : array('ไม่มีข้อมูล'), '["ไม่มีข้อมูล"]');
                    ?>,
                    datasets: [{
                        data: <?php 
                            $total = 0; foreach($guidanceTypes as $t) { $total += $t['count']; }
                            $gPercents = array();
                            if ($total > 0) { foreach($guidanceTypes as $t) { $gPercents[] = round(($t['count'] / $total) * 100, 1); } } 
                            else { $gPercents = array(100); }
                            echo safe_json($gPercents, '[100]');
                        ?>,
                        backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6'], borderWidth: 2, borderColor: '#ffffff'
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, cutout: '65%', plugins: { legend: { position: 'bottom' } } }
            });
        }

        const detailCtx = document.getElementById('detailChart');
        if (detailCtx) {
            detailChart = new Chart(detailCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: ['ด้านการศึกษา', 'ด้านอาชีพ', 'ด้านส่วนตัวและสังคม'],
                    datasets: [{
                        data: <?php 
                            $default_detail = array(0,0,0);
                            if (!empty($topItems)) {
                                $first_item = $topItems[0]['item_name'];
                                if (isset($itemDetails[$first_item])) { $default_detail = $itemDetails[$first_item]; }
                            }
                            echo safe_json($default_detail, '[0,0,0]'); 
                        ?>,
                        backgroundColor: ['#10b981', '#3b82f6', '#f59e0b'], borderWidth: 2, borderColor: '#ffffff'
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, cutout: '65%', plugins: { legend: { position: 'bottom' } } }
            });
        }

        const successCtx = document.getElementById('successRateChart');
        if (successCtx) {
            successChart = new Chart(successCtx.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: <?php 
                        $sLabels = array(); foreach($successRates as $r) { $sLabels[] = $r['guidance_name']; }
                        echo safe_json($sLabels ? $sLabels : array('ไม่มีข้อมูล'), '["ไม่มีข้อมูล"]');
                    ?>,
                    datasets: [{
                        label: 'สำเร็จ (%)',
                        data: <?php 
                            $sData = array(); foreach($successRates as $r) { $sData[] = floatval($r['success_rate']); }
                            echo safe_json($sData ? $sData : array(0), '[0]');
                        ?>,
                        backgroundColor: ['#10b981', '#3b82f6', '#f59e0b'], borderRadius: 4
                    }]
                },
                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } }, plugins: { legend: { display: false } } }
            });
        }

        window.updateChartsData = function(itemName) {
            document.getElementById('guidanceTitle').textContent = `ประเภทของการแนะแนว - ${itemName}`;
            document.getElementById('detailTitle').textContent = `รายละเอียด - ${itemName}`;
            document.getElementById('successTitle').textContent = `อัตราความสำเร็จ - ${itemName}`;

            if (guidanceChart && dynamicGuidance[itemName]) {
                guidanceChart.data.labels = dynamicGuidance[itemName].labels;
                guidanceChart.data.datasets[0].data = dynamicGuidance[itemName].data;
                guidanceChart.update();
            }

            if (detailChart) {
                detailChart.data.datasets[0].data = itemDetailsGroup[itemName] || [0, 0, 0];
                detailChart.update();
            }

            if (successChart && dynamicSuccess[itemName]) {
                successChart.data.labels = dynamicSuccess[itemName].labels;
                successChart.data.datasets[0].data = dynamicSuccess[itemName].data;
                successChart.update();
            }
        }
    }

    function resetFilters() {
        document.getElementById('start_date').value = ''; 
        document.getElementById('end_date').value = '';
        document.getElementById('service_type').value = ''; 
        if(document.getElementById('search_term')) {
            document.getElementById('search_term').value = '';
        }
        document.getElementById('filterForm').submit();
    }

    function exportToExcel() {
        if (typeof itemData === 'undefined') return;
        let csvContent = "data:text/csv;charset=utf-8,\uFEFF"; 
        csvContent += `ลำดับที่,${chartLabelType},จำนวนผู้เข้าร่วม (คน)\n`;
        const labels = itemData.labels; const data = itemData.datasets[0].data;
        for (let i = 0; i < labels.length; i++) {
            if(labels[i] === 'ไม่มีข้อมูล') continue;
            csvContent += `"${i+1}","${labels[i]}","${data[i]}"\n`;
        }
        const link = document.createElement("a"); link.setAttribute("href", encodeURI(csvContent));
        link.setAttribute("download", `Top10_${chartLabelType}_${new Date().toISOString().split('T')[0]}.csv`);
        document.body.appendChild(link); link.click(); document.body.removeChild(link);
    }
    </script>
</body>
</html>