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

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

// ฟังก์ชันช่วยเข้ารหัส JSON ให้ปลอดภัย ป้องกัน JS พัง
function safe_json($data, $fallback = '[]') {
    $json = json_encode($data);
    return $json !== false ? $json : $fallback;
}

// 1. รับค่าตัวแปรจาก header.php ตามที่คุณ App กำหนดไว้
$raw_school_id = isset($schoolID) ? trim($schoolID) : (isset($_SESSION['schoolID']) ? trim($_SESSION['schoolID']) : '');
$current_user_type = isset($user_type_id) ? intval($user_type_id) : (isset($_SESSION['user_type_id']) ? intval($_SESSION['user_type_id']) : 0);

// 🔴 ตรวจสอบระดับสิทธิ์อย่างเด็ดขาด จาก $user_type_id
$is_admin = ($current_user_type === 9); // 9 = ส่วนกลาง (Admin)

if ($is_admin) {
    // ถ้าเป็นส่วนกลาง ให้ข้ามรหัส schoolID ไปเลย (ดึงข้อมูลทั้งประเทศ)
    $user_school_id = ''; 
    $role_name = "ส่วนกลาง (สิทธิ์เต็ม)";
    $group_col = "s.province";
    $chart_label = "จังหวัด";
} else {
    // ถ้าไม่ใช่ส่วนกลาง ใช้รหัส schoolID ในการกรองข้อมูล
    $user_school_id = $raw_school_id;
    
    if ($current_user_type === 1) {
        $role_name = "จังหวัด";
        $group_col = "s.district";
        $chart_label = "อำเภอ";
    } else if ($current_user_type === 2) {
        $role_name = "อำเภอ";
        $group_col = "s.school_name";
        $chart_label = "สถานศึกษา";
    } else if ($current_user_type === 3) {
        $role_name = "สถานศึกษาขึ้นตรง";
        $group_col = "s.school_name";
        $chart_label = "สถานศึกษา";
    } else if ($current_user_type === 4) {
        $role_name = "ตำบล";
        $group_col = "s.school_name";
        $chart_label = "สถานศึกษา";
    } else {
        $role_name = "ไม่ระบุสิทธิ์";
        $group_col = "s.school_name";
        $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 รวมสิทธิ์การเข้าถึง (RBAC)
function buildWhereClause($start_date, $end_date, $service_type, $search_term, $user_school_id, $current_user_type) {
    $where_conditions = array();
    $params = array();
    
    // 🔴 หัวใจสำคัญที่แก้ปัญหาข้อมูลเป็น 0
    // ใช้ substr ตัดเอาเฉพาะรหัสตามระดับสิทธิ์ เพื่อกวาดข้อมูลลูกข่ายให้ครบ
    if (!empty($user_school_id)) {
        if ($current_user_type === 1) {
            // ระดับ จังหวัด (1) ตัดเอาแค่ 4 หลักแรกไปค้นหา
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = substr($user_school_id, 0, 4) . '%';
        } else if ($current_user_type === 2) {
            // ระดับ อำเภอ (2) ตัดเอาแค่ 6 หลักแรกไปค้นหา
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = substr($user_school_id, 0, 6) . '%';
        } else if ($current_user_type === 3) {
            // ระดับ ขึ้นตรง (3) กวาดข้อมูลภายใต้รหัสตัวเอง
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = $user_school_id . '%';
        } else if ($current_user_type === 4) {
            // ระดับ ตำบล (4) ดึงเฉพาะข้อมูลของตำบลตัวเองเป๊ะๆ (10 หลัก)
            $where_conditions[] = "g.schoolID = ?";
            $params[] = $user_school_id;
        } else {
            // Fallback ป้องกัน Error
            $where_conditions[] = "g.schoolID LIKE ?";
            $params[] = substr($user_school_id, 0, 4) . '%';
        }
    }
    
    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.school_name LIKE ? OR s.province LIKE ? OR s.district 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'];

try {
    if (!isset($pdo) || !$pdo) { throw new PDOException("ไม่สามารถเชื่อมต่อฐานข้อมูลได้"); }
    $check_tables = $pdo->query("SHOW TABLES LIKE 'group_guidance'");
    if (!$check_tables || $check_tables->rowCount() == 0) { throw new PDOException("ไม่พบตาราง group_guidance"); }

    $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.school_name", "s.province", "s.district"), 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 {$group_col} 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.school_name", "s.province", "s.district"), 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. ดึงรายละเอียดแต่ละพื้นที่
    $itemDetails = array();
    foreach($topItems as $item) {
        if ($has_school_table) {
            $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, COUNT(*) as count, g.guidance_type
                FROM group_guidance g LEFT JOIN school s ON g.schoolID = s.schoolID
                WHERE {$group_col} = ? AND g.guidance_type IS NOT NULL" . $where_clause . " GROUP BY g.guidance_type ORDER BY g.guidance_type");
            $item_params = array($item['item_name']);
            if (!empty($filter_params)) { foreach($filter_params as $param) { $item_params[] = $param; } }
            $stmt->execute($item_params);
        } else {
            $stmt = $pdo->prepare("SELECT COUNT(*) as count, g.guidance_type FROM group_guidance g WHERE g.guidance_type IS NOT NULL" . str_replace(array("s.school_name", "s.province", "s.district"), array("''", "''", "''"), $where_clause) . " GROUP BY g.guidance_type");
            $stmt->execute($filter_params);
        }
        $details = $stmt->fetchAll(PDO::FETCH_ASSOC);
        $guidanceOrder = array('1' => 0, '2' => 0, '3' => 0); 
        foreach($details as $detail) { $guidanceOrder[$detail['guidance_type']] = $detail['count']; }
        $total = array_sum($guidanceOrder);
        $percentages = array();
        if ($total > 0) { foreach($guidanceOrder as $count) { $percentages[] = round(($count / $total) * 100, 1); } } 
        else { $percentages = array(0, 0, 0); }
        $itemDetails[$item['item_name']] = $percentages;
    }
} catch (PDOException $e) {
    $totalParticipants = 0; $participantTypes = array(); $guidanceTypes = array();
    $successRates = array(); $topItems = array(); $itemDetails = array();
}
?>

<!DOCTYPE html>
<html lang="th">
<head>
    <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>

<style>
    .top-navbar {
        position: relative;
        z-index: 9999 !important;
    }
    .dropdown-menu {
        z-index: 9999 !important;
    }
    .sidebar { /* หรือคลาสของแถบเมนูด้านซ้าย */
        z-index: 9998 !important;
    }
</style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard แบบรายกลุ่ม</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', 'Segoe UI', 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; }
    
    .top-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px; 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 { display: flex; flex-direction: column; gap: 12px; }
    .dashboard-title { color: #0f172a; font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; }
    
    .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; }
    .debug-box { background: #fff3cd; color: #856404; padding: 12px 20px; border-radius: 8px; font-size: 0.9rem; margin-top: 15px; border: 1px solid #ffeeba; }
    
    .toggle-buttons { display: flex; gap: 10px; }
    .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:hover { background: #e2e8f0; color: #334155; }
    .toggle-btn.active { background: #1e40af; color: white; border-color: #1e40af; }
    
    .compact-filter { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
    .filter-group { display: flex; flex-direction: column; gap: 6px; }
    .filter-group label { font-size: 0.85rem; font-weight: 600; color: #64748b; }
    .filter-group input, .filter-group select { padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 0.95rem; color: #334155; background: #fff; outline: none; transition: border-color 0.2s;}
    .filter-group input:focus, .filter-group select:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); }
    .btn-small { padding: 10px 20px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; color: white; height: 42px; transition: opacity 0.2s;}
    .btn-small:hover { opacity: 0.9; }
    .search-btn { background: #2563eb; } 
    .reset-btn { background: #64748b; }
    
    .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 { border-top: 5px solid #2563eb; } .stat-card.main .stat-number { color: #2563eb; }
    .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; }
    
    .btn-excel { background-color: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background-color 0.2s;}
    .btn-excel:hover { background-color: #059669; }
    
    .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) { 
        .bottom-row { grid-template-columns: 1fr; } 
        .stats-row { flex-wrap: wrap; } 
        .stat-card { min-width: 200px; } 
    }
    </style>
</head>
<body>
    <div class="dashboard">
        <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 class="toggle-buttons">
                    <a href="dashboardgroup.php" class="toggle-btn active">👥 แบบรายกลุ่ม</a>
                    <a href="dashboardperson.php" class="toggle-btn">👤 แบบรายบุคคล</a>
                </div>
            </div>
            
            <form id="filterForm" method="POST" action="" class="compact-filter">
                <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>
                <div class="filter-group">
                    <label>ค้นหา</label>
                    <input type="text" id="search_term" name="search_term" placeholder="ค้นหา <?php echo $chart_label; ?>" value="<?php echo htmlspecialchars($search_term); ?>">
                </div>
                <button type="submit" class="btn-small search-btn">ค้นหา</button>
                <button type="button" class="btn-small reset-btn" onclick="resetFilters()">รีเซ็ต</button>
            </form>
            
            <?php 
            // 🔴 กล่องแจ้งเตือน (Debug) โชว์เฉพาะตอนข้อมูลเป็น 0 เพื่อให้คุณ App รู้ว่าระบบดึงรหัสอะไรไปค้นหา
            if ($totalParticipants == 0 && !$is_admin && !empty($user_school_id)): 
                $search_prefix = $user_school_id;
                if ($current_user_type == 1) $search_prefix = substr($user_school_id, 0, 4) . "%";
                if ($current_user_type == 2) $search_prefix = substr($user_school_id, 0, 6) . "%";
            ?>
            <div class="debug-box" style="width: 100%;">
                <strong>💡 ข้อมูลการค้นหา:</strong> ระบบกำลังค้นหาข้อมูลด้วยเงื่อนไข 
                รหัสของคุณคือ <code><?php echo htmlspecialchars($user_school_id); ?></code> 
                (ระบบนำไปค้นหาด้วยเงื่อนไข: <code><?php echo $search_prefix; ?></code>)<br>
                <small>*หากคุณคิดว่าควรมีข้อมูล โปรดตรวจสอบว่ารหัสลูกข่ายในฐานข้อมูลขึ้นต้นด้วยเลข <strong><?php echo str_replace('%', '', $search_prefix); ?></strong> หรือไม่</small>
            </div>
            <?php endif; ?>
        </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>

        <div class="hero-row chart-box">
            <div class="chart-header">
                <div class="chart-title">TOP 10 <?php echo $chart_label; ?> ที่ให้บริการแนะแนวมากที่สุด (คลิกที่แท่งเพื่อดูรายละเอียด)</div>
                <button type="button" onclick="exportToExcel()" class="btn-excel">
                    📊 Export Excel
                </button>
            </div>
            <div class="hero-chart-wrapper">
                <canvas id="itemChart"></canvas>
            </div>
        </div>

        <div class="bottom-row">
            <div class="chart-box">
                <div class="chart-title">ประเภทของการแนะแนว</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">อัตราความสำเร็จ</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; border-radius: 8px;">📊 กราฟไม่สามารถแสดงได้<br><small>กรุณาตรวจสอบอินเทอร์เน็ต</small></div>';
        }
    } else {
        Chart.defaults.color = '#64748b'; 
        Chart.defaults.font.family = "'Inter', 'Segoe UI', sans-serif";
        
        const chartLabelType = "<?php echo $chart_label; ?>";
        
        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 itemDetailsGroup = <?php echo safe_json($itemDetails, '{}'); ?>;

        const itemCtx = document.getElementById('itemChart');
        let itemChart, detailChart;
        
        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;
                            updateDetailChart(itemData.labels[index]);
                        }
                    }
                }
            });
        }

        const guidanceCtx = document.getElementById('guidanceTypeChart');
        if (guidanceCtx) {
            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', labels: { padding: 20, usePointStyle: true } } } 
                }
            });
        }

        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', labels: { padding: 20, usePointStyle: true } } } 
                }
            });
        }

        window.updateDetailChart = function(itemName) {
            document.getElementById('detailTitle').textContent = `รายละเอียด - ${itemName}`;
            detailChart.data.datasets[0].data = itemDetailsGroup[itemName] || [0, 0, 0];
            detailChart.update();
        }

        const successCtx = document.getElementById('successRateChart');
        if (successCtx) {
            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, grid: { color: '#f1f5f9' } }, 
                        x: { grid: { display: false } } 
                    }, 
                    plugins: { legend: { display: false } } 
                }
            });
        }
    }

    function resetFilters() {
        document.getElementById('start_date').value = ''; 
        document.getElementById('end_date').value = '';
        document.getElementById('service_type').value = ''; 
        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>