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

<?php
if (session_id() == '') {
    session_start();
}
include '../inc/connect.php';

if (!isset($pdo) && isset($conn)) { $pdo = $conn; }

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

// 1. ฟังก์ชันคำนวณอายุที่แม่นยำ
function calculateAge($bdate) {
    if (empty($bdate) || $bdate == '0000-00-00' || $bdate == '-') return 0; 
    if (preg_match('/\b(19\d{2}|20\d{2}|25\d{2})\b/', $bdate, $matches)) {
        $db_year = intval($matches[1]);
        if ($db_year > 2400) { $db_year -= 543; }
        $server_year = intval(date('Y'));
        if ($server_year > 2400) { $server_year -= 543; }
        $age = $server_year - $db_year;
        return $age >= 0 ? $age : 0;
    }
    return 0;
}

// 2. ตรวจสอบสิทธิ์ผู้ใช้งาน
$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 || empty($raw_school_id) || strtolower($raw_school_id) === 'admin'); 

$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'] : '';
$search_term = isset($_POST['search_term']) ? trim($_POST['search_term']) : '';

$where_c = array(); $params_c = array();
$where_srv = array(); $params_srv = array();

if (!$is_admin && $user_school_id !== '' && $user_school_id !== '0') {
    $like_val = ($current_user_type === 1) ? substr($user_school_id, 0, 4) . '%' : (($current_user_type === 2) ? substr($user_school_id, 0, 6) . '%' : $user_school_id . '%');
    $where_c[] = "c.schoolID LIKE ?"; $params_c[] = $like_val;
    $where_srv[] = "srv.schoolID LIKE ?"; $params_srv[] = $like_val;
}

if (!empty($start_date)) {
    $where_c[] = "c.created_at >= ?"; $params_c[] = $start_date . ' 00:00:00';
    $where_srv[] = "srv.service_request_date >= ?"; $params_srv[] = $start_date;
}
if (!empty($end_date)) {
    $where_c[] = "c.created_at <= ?"; $params_c[] = $end_date . ' 23:59:59';
    $where_srv[] = "srv.service_request_date <= ?"; $params_srv[] = $end_date;
}
if (!empty($search_term)) {
    $search_val = '%' . $search_term . '%';
    $search_clause = "(s.firstname LIKE ? OR s.province LIKE ? OR s.amphur LIKE ?)";
    $where_c[] = $search_clause; $params_c[] = $search_val; $params_c[] = $search_val; $params_c[] = $search_val;
    $where_srv[] = $search_clause; $params_srv[] = $search_val; $params_srv[] = $search_val; $params_srv[] = $search_val;
}

$clause_c = !empty($where_c) ? " AND " . implode(" AND ", $where_c) : "";
$clause_srv = !empty($where_srv) ? " AND " . implode(" AND ", $where_srv) : "";

$db_error_message = '';
$totalServices = 0; $totalIndividualParticipants = 0; $total_success_1 = 0; $total_unsuccess_2 = 0;
$total_referrals = 0; 
$total_reg = 0; $count_type1 = 0; $count_type2 = 0; $count_type3 = 0; $count_type4 = 0;

$genders = array('ชาย' => 0, 'หญิง' => 0, 'ไม่ระบุ' => 0);
$ages = array('under15' => 0, '15to18' => 0, '19to60' => 0, 'over60' => 0);
$occupations = array(); $total_edu = 0; $total_career = 0; $total_personal = 0;
$edu_items = array(); $career_items = array(); $personal_items = array(); $help_items = array();
$topItems = array(); $tableData = array();

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

    $stmt_occ = $pdo->query("SELECT * FROM typeOccupation");
    while($row = $stmt_occ->fetch(PDO::FETCH_ASSOC)) { $occ_map[$row['id']] = $row['name'] ?? $row['title'] ?? $row['occupation_name'] ?? array_values($row)[1]; }
    
    $s1 = $pdo->query("SELECT id, title FROM typeEducational"); while($r = $s1->fetch(PDO::FETCH_ASSOC)) $dict_edu[$r['id']] = $r['title'];
    $s2 = $pdo->query("SELECT id, title FROM typeEduOccupation"); while($r = $s2->fetch(PDO::FETCH_ASSOC)) $dict_car[$r['id']] = $r['title'];
    $s3 = $pdo->query("SELECT id, title FROM typesocialSspects"); while($r = $s3->fetch(PDO::FETCH_ASSOC)) $dict_per[$r['id']] = $r['title'];
    $s4 = $pdo->query("SELECT id, title FROM typeGiveHelp"); while($r = $s4->fetch(PDO::FETCH_ASSOC)) $dict_hlp[$r['id']] = $r['title'];

    // สถิติภาพรวม
    $sql_hero = "SELECT COUNT(srv.id) as total_services, COUNT(DISTINCT srv.individual_counseling_id) as unique_people FROM individual_counseling_service srv LEFT JOIN school s ON srv.schoolID = s.schoolID WHERE 1=1 " . $clause_srv;
    $stmt_hero = $pdo->prepare($sql_hero); $stmt_hero->execute($params_srv);
    if($hero_row = $stmt_hero->fetch(PDO::FETCH_ASSOC)) {
        $totalServices = intval($hero_row['total_services']); 
        $totalIndividualParticipants = intval($hero_row['unique_people']); 
    }

    $inner_where = str_replace("srv.", "srv2.", $clause_srv);
    $sql_status = "SELECT SUM(CASE WHEN srv.service_success_id = '1' THEN 1 ELSE 0 END) as total_success_1, SUM(CASE WHEN srv.service_success_id = '2' THEN 1 ELSE 0 END) as total_unsuccess_2 FROM individual_counseling_service srv INNER JOIN (SELECT c.first_name, c.last_name, MAX(srv2.id) as max_id FROM individual_counseling_service srv2 JOIN individual_counseling c ON srv2.individual_counseling_id = c.id LEFT JOIN school s ON srv2.schoolID = s.schoolID WHERE 1=1 {$inner_where} GROUP BY c.first_name, c.last_name) latest ON srv.id = latest.max_id";
    $stmt_status = $pdo->prepare($sql_status); $stmt_status->execute($params_srv);
    if($status_row = $stmt_status->fetch(PDO::FETCH_ASSOC)) {
        $total_success_1 = intval($status_row['total_success_1']); 
        $total_unsuccess_2 = intval($status_row['total_unsuccess_2']);
    }

    $sql_person = "SELECT c.service_type_id, c.gender_id, c.birth_date, c.occupation_id FROM individual_counseling c LEFT JOIN school s ON c.schoolID = s.schoolID WHERE 1=1 " . $clause_c;
    $stmt_c = $pdo->prepare($sql_person); $stmt_c->execute($params_c);
    while($row = $stmt_c->fetch(PDO::FETCH_ASSOC)) {
        $total_reg++; 
        $st = $row['service_type_id'] ?? '';
        if($st == '1') $count_type1++; elseif($st == '2') $count_type2++; elseif($st == '3') $count_type3++; elseif($st == '4') $count_type4++;
        
        $g = $row['gender_id'] ?? '';
        if($g == '1') $genders['ชาย']++; elseif($g == '2') $genders['หญิง']++; else $genders['ไม่ระบุ']++;

        $calculated_age = calculateAge($row['birth_date'] ?? '');
        if ($calculated_age < 15) $ages['under15']++; elseif ($calculated_age <= 18) $ages['15to18']++; elseif ($calculated_age <= 60) $ages['19to60']++; else $ages['over60']++;

        $occ_id = $row['occupation_id'] ?? '';
        $occ_name = $occ_map[$occ_id] ?? ($occ_id ? "อาชีพรหัส " . $occ_id : "ไม่ระบุ");
        $occupations[$occ_name] = ($occupations[$occ_name] ?? 0) + 1;
    }

    // =========================================================
    // 🌟 ระบบคำนวณด้านการศึกษา/อาชีพ/ส่วนตัว (ฉบับนับเมื่อมีข้อมูลจริง) 🌟
    // =========================================================
    $sql_service = "SELECT srv.education_issues, srv.career_issues, srv.personal_issues, srv.referral_services FROM individual_counseling_service srv LEFT JOIN school s ON srv.schoolID = s.schoolID WHERE 1=1 " . $clause_srv;
    $stmt_srv = $pdo->prepare($sql_service); $stmt_srv->execute($params_srv);
    
    while($row = $stmt_srv->fetch(PDO::FETCH_ASSOC)) {
        // --- 1. ด้านการศึกษา ---
        $e_val = $row['education_issues'] ?? ''; 
        $e_arr = json_decode($e_val, true);
        if (!is_array($e_arr)) $e_arr = empty(trim($e_val)) ? [] : explode(',', $e_val);
        
        $has_valid_edu = false;
        foreach($e_arr as $id) { 
            $id = trim($id); 
            if($id !== '' && $id !== '0') { // ต้องมีค่าจริงๆ ไม่ใช่ช่องว่าง
                $edu_items[$id] = ($edu_items[$id] ?? 0) + 1; 
                $has_valid_edu = true;
            } 
        }
        if($has_valid_edu) { $total_edu++; }

        // --- 2. ด้านอาชีพ ---
        $c_val = $row['career_issues'] ?? ''; 
        $c_arr = json_decode($c_val, true);
        if (!is_array($c_arr)) $c_arr = empty(trim($c_val)) ? [] : explode(',', $c_val);
        
        $has_valid_car = false;
        foreach($c_arr as $id) { 
            $id = trim($id); 
            if($id !== '' && $id !== '0') { 
                $career_items[$id] = ($career_items[$id] ?? 0) + 1; 
                $has_valid_car = true;
            } 
        }
        if($has_valid_car) { $total_career++; }

        // --- 3. ด้านส่วนตัวและสังคม ---
        $p_val = $row['personal_issues'] ?? ''; 
        $p_arr = json_decode($p_val, true);
        if (!is_array($p_arr)) $p_arr = empty(trim($p_val)) ? [] : explode(',', $p_val);
        
        $has_valid_per = false;
        foreach($p_arr as $id) { 
            $id = trim($id); 
            if($id !== '' && $id !== '0') { 
                $personal_items[$id] = ($personal_items[$id] ?? 0) + 1; 
                $has_valid_per = true;
            } 
        }
        if($has_valid_per) { $total_personal++; }
        
        // --- 4. การส่งต่อ ---
        $h_val = $row['referral_services'] ?? ''; 
        $h_arr = json_decode($h_val, true);
        if (!is_array($h_arr)) $h_arr = empty(trim($h_val)) ? [] : explode(',', $h_val);
        
        $count_this_row_as_referral = false;
        foreach($h_arr as $id) { 
            $id = trim($id); 
            if($id !== '' && $id !== '0') { 
                $help_items[$id] = ($help_items[$id] ?? 0) + 1; 
                $num_id = intval($id);
                if (($num_id >= 3 && $num_id <= 9) || strtolower($id) === 'referral-other') {
                    $count_this_row_as_referral = true;
                }
            } 
        }
        if ($count_this_row_as_referral) {
            $total_referrals++;
        }
    }

    arsort($edu_items); $top_edu = array_slice($edu_items, 0, 5, true);
    arsort($career_items); $top_career = array_slice($career_items, 0, 5, true);
    arsort($personal_items); $top_personal = array_slice($personal_items, 0, 5, true);
    arsort($help_items); $top_help = array_slice($help_items, 0, 5, true);
    arsort($occupations);

    if ($current_user_type != 4) {
        $sql_top10 = "SELECT IFNULL({$group_col}, 'ไม่ระบุ') as item_name, COUNT(srv.id) as total_count FROM individual_counseling_service srv LEFT JOIN school s ON srv.schoolID = s.schoolID WHERE srv.schoolID IS NOT NULL " . $clause_srv . " GROUP BY item_name HAVING total_count > 0 ORDER BY total_count DESC LIMIT 10";
        $stmt_top10 = $pdo->prepare($sql_top10); $stmt_top10->execute($params_srv);
        $topItems = $stmt_top10->fetchAll(PDO::FETCH_ASSOC); if (!$topItems) $topItems = array();
    }

    if ($current_user_type == 4) {
        $sql_table = "SELECT srv.id as srv_id, srv.service_request_date, srv.service_request_details, srv.counselor_first_name, srv.counselor_last_name, srv.education_issues, srv.career_issues, srv.personal_issues, srv.referral_services, srv.service_success_id, srv.follow_up_date, srv.follow_up_id, c.* FROM individual_counseling_service srv LEFT JOIN individual_counseling c ON srv.individual_counseling_id = c.id LEFT JOIN school s ON srv.schoolID = s.schoolID WHERE 1=1 " . $clause_srv . " ORDER BY srv.service_request_date DESC";
        $stmt_table = $pdo->prepare($sql_table); $stmt_table->execute($params_srv);
        $tableData = $stmt_table->fetchAll(PDO::FETCH_ASSOC);
    }

} catch (PDOException $e) { $db_error_message = $e->getMessage(); }

function getIssueTextsDB($json_str, $dict, $type = '') {
    $arr = json_decode($json_str, true) ?: (empty($json_str) ? [] : explode(',', $json_str));
    if (empty($arr)) return "-";
    $texts = array();
    foreach($arr as $id) { 
        $id = trim($id); 
        if($id && $id !== '0') {
            $label = $dict[$id] ?? "รหัส ".$id;
            if ($type == 'edu' && ($id == '12' || strtolower($id) === 'education-other')) $label = 'อื่น ๆ';
            if ($type == 'car' && ($id == '10' || strtolower($id) === 'career-other')) $label = 'อื่น ๆ';
            if ($type == 'per' && ($id == '10' || strtolower($id) === 'personal-other')) $label = 'อื่น ๆ';
            if ($type == 'hlp' && ($id == '9' || strtolower($id) === 'referral-other')) $label = 'อื่น ๆ';
            $texts[] = $label;
        }
    }
    return "• " . implode("<br>• ", $texts);
}

function prepareChartDataDB($top_array, $dict, $type = '') {
    $labels = array(); $data = array();
    foreach($top_array as $id => $count) { 
        $label = $dict[$id] ?? "รหัส ".$id; 
        if ($type == 'edu' && ($id == '12' || strtolower($id) === 'education-other')) $label = 'อื่น ๆ';
        if ($type == 'car' && ($id == '10' || strtolower($id) === 'career-other')) $label = 'อื่น ๆ';
        if ($type == 'per' && ($id == '10' || strtolower($id) === 'personal-other')) $label = 'อื่น ๆ';
        if ($type == 'hlp' && ($id == '9' || strtolower($id) === 'referral-other')) $label = 'อื่น ๆ';
        $labels[] = $label; 
        $data[] = $count; 
    }
    return array('labels' => $labels, 'data' => $data);
}

$chart_edu = prepareChartDataDB($top_edu, $dict_edu, 'edu');
$chart_car = prepareChartDataDB($top_career, $dict_car, 'car');
$chart_per = prepareChartDataDB($top_personal, $dict_per, 'per');
$chart_hlp = prepareChartDataDB($top_help, $dict_hlp, 'hlp');
?>

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard แบบรายบุคคล</title>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
    
    <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; padding-top: 5px; }
    
    #sidebar.active, #sidebar.show { transform: translateX(0) !important; left: 0 !important; }
    #sidebarOverlay.active, #sidebarOverlay.show { display: block !important; opacity: 1 !important; z-index: 998; }

    .top-header { 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-main-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 15px; }
    .header-titles { display: flex; flex-direction: column; gap: 4px; }
    .dashboard-title { color: #0f172a; font-size: 1.8rem; font-weight: 800; margin: 0; line-height: 1.2; }
    .role-badge { display: inline-block; padding: 4px 12px; background: #e0e7ff; color: #4338ca; border-radius: 20px; font-size: 0.85rem; font-weight: 700; width: fit-content; }
    
    .toggle-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
    .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; white-space: nowrap; }
    .toggle-btn.active { background: #1e40af; color: white; border-color: #1e40af; }
    
    .filter-wrapper { width: 100%; margin-top: 10px; }
    .compact-filter { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; justify-content: space-between; width: 100%; }
    .filter-inputs { display: flex; flex-wrap: wrap; gap: 15px; flex: 1; }
    
    .filter-group { flex: 1 1 200px; max-width: 280px; display: flex; flex-direction: column; gap: 6px; }
    .filter-group label { font-size: 0.85rem; font-weight: 600; color: #64748b; margin: 0; }
    .filter-group input, .filter-group select { width: 100%; height: 42px; padding: 8px 14px; border: 1px solid #cbd5e1 !important; border-radius: 8px; font-size: 0.95rem; color: #334155; background-color: #fff !important; outline: none; }
    
    .filter-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 5px; }
    .btn-small, .btn-excel, .btn-alert { height: 42px; padding: 0 16px; border: none; border-radius: 8px; font-size: 0.95rem; font-weight: 600; cursor: pointer; color: white; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .search-btn { background: #2563eb; } .reset-btn { background: #64748b; }
    .btn-excel { background-color: #10b981; max-width: fit-content; text-decoration: none; }

    @media (max-width: 1024px) { .filter-group { max-width: none; } .filter-actions { flex: 1 1 100%; justify-content: flex-end; } }
    @media (max-width: 768px) {
        .header-main-row { flex-direction: column; align-items: flex-start; }
        .toggle-buttons { width: 100%; } .toggle-btn { flex: 1; text-align: center; }
        .filter-inputs { flex-direction: column; gap: 10px; }
        .filter-group { width: 100%; flex: none; max-width: none; }
        .filter-actions { justify-content: space-between; } .filter-actions button { flex: 1; }
    }

    .hero-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
    .hero-stat-card { border-radius: 16px; padding: 25px; display: flex; align-items: center; gap: 20px; color: white; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); transition: transform 0.2s; }
    .hero-stat-card:hover { transform: translateY(-5px); }
    .hero-stat-card .icon { font-size: 2.5rem; background: rgba(255,255,255,0.2); width: 75px; height: 75px; display: flex; justify-content: center; align-items: center; border-radius: 50%; }
    .hero-stat-card .details { display: flex; flex-direction: column; }
    .hero-stat-card .stat-number { font-size: 2.8rem; font-weight: 800; line-height: 1; margin-bottom: 5px; color: #fff; }
    .hero-stat-card .stat-label { font-size: 1.05rem; font-weight: 600; opacity: 0.9; color: #fff; }
    
    .bg-primary-gradient { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
    .bg-success-gradient { background: linear-gradient(135deg, #10b981 0%, #047857 100%); }
    .bg-warning-gradient { background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); }
    .bg-indigo-gradient { background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); }
    .bg-danger-gradient { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
    .bg-teal-gradient { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }

    .stats-row-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
    .stat-card { 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.c1 { border-top: 5px solid #059669; } .stat-card.c1 .stat-number { color: #059669; }
    .stat-card.c2 { border-top: 5px solid #d97706; } .stat-card.c2 .stat-number { color: #d97706; }
    .stat-card.c3 { border-top: 5px solid #7c3aed; } .stat-card.c3 .stat-number { color: #7c3aed; }
    .stat-card.c4 { border-top: 5px solid #475569; } .stat-card.c4 .stat-number { color: #475569; }

    .stats-row-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
    .stat-card.sub-edu { border-top: 4px solid #10b981; min-height: 100px; padding: 15px;} .stat-card.sub-edu .stat-number { color: #10b981; font-size: 2rem;}
    .stat-card.sub-car { border-top: 4px solid #3b82f6; min-height: 100px; padding: 15px;} .stat-card.sub-car .stat-number { color: #3b82f6; font-size: 2rem;}
    .stat-card.sub-per { border-top: 4px solid #f59e0b; min-height: 100px; padding: 15px;} .stat-card.sub-per .stat-number { color: #f59e0b; font-size: 2rem;}
    
    .stat-number { font-size: 2.2rem; font-weight: 800; line-height: 1; margin-bottom: 12px; }
    .stat-label { font-size: 0.95rem; 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; display: flex; flex-direction: column;}
    .chart-title { font-size: 1.15rem; color: #1e293b; margin-bottom: 20px; font-weight: 700; text-align: center; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px;}
    .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; border-bottom: 2px solid #f1f5f9; padding-bottom: 15px; }
    .chart-header .chart-title { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
    
    .hero-row { width: 100%; } .hero-chart-wrapper { position: relative; height: 350px; width: 100%; }
    .charts-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
    .charts-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; }
    .small-chart-wrapper { position: relative; height: 300px; width: 100%; flex-grow: 1; }
    </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>🚨 พบข้อผิดพลาด:</strong><br><code style="font-size: 1rem;"><?php echo htmlspecialchars($db_error_message); ?></code>
            </div>
        <?php endif; ?>

        <div class="top-header">
            <div class="header-main-row">
                <div class="header-titles">
                    <span class="role-badge">สถานะการใช้งาน: <?php echo $role_name; ?></span>
                    <h1 class="dashboard-title">Dashboard แบบรายบุคคล</h1>
                </div>
                <div class="toggle-buttons">
                    <a href="index.php" class="toggle-btn">👥 แบบรายกลุ่ม</a>
                    <a href="dashboardperson.php" class="toggle-btn active">👤 แบบรายบุคคล</a>
                </div>
            </div>
            
            <div class="filter-wrapper">
                <form id="filterForm" method="POST" action="" class="compact-filter">
                    <div class="filter-inputs">
                        <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>
                        <?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>
                        <?php endif; ?>
                    </div>
                    
                    <div class="filter-actions">
                        <button type="submit" class="btn-small search-btn"><?php echo $show_search_box ? 'ค้นหา' : 'กรองข้อมูล'; ?></button>
                        <button type="button" class="btn-small reset-btn" onclick="resetFilters()">รีเซ็ต</button>
                        <button type="button" onclick="exportToExcel()" class="btn-small btn-excel">📊 Export Excel</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="hero-stats-row" style="margin-bottom: 0;">
            <div class="hero-stat-card bg-indigo-gradient">
                <div class="icon"><i class="fas fa-user-plus"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($total_reg); ?></div><div class="stat-label">จำนวนผู้ลงทะเบียน (คน)</div></div>
            </div>
            <div class="hero-stat-card bg-primary-gradient">
                <div class="icon"><i class="fas fa-users"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($totalIndividualParticipants); ?></div><div class="stat-label">จำนวนผู้รับบริการ (คน)</div></div>
            </div>
            <div class="hero-stat-card bg-teal-gradient">
                <div class="icon"><i class="fas fa-hands-helping"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($totalServices); ?></div><div class="stat-label">จำนวนครั้งที่ให้บริการ (ครั้ง)</div></div>
            </div>
        </div>

        <div class="hero-stats-row">
            <div class="hero-stat-card bg-success-gradient">
                <div class="icon"><i class="fas fa-check-circle"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($total_success_1); ?></div><div class="stat-label">สำเร็จ (คน)</div></div>
            </div>
            <div class="hero-stat-card bg-danger-gradient">
                <div class="icon"><i class="fas fa-times-circle"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($total_unsuccess_2); ?></div><div class="stat-label">ไม่สำเร็จ (คน)</div></div>
            </div>
            <div class="hero-stat-card bg-warning-gradient">
                <div class="icon"><i class="fas fa-share-square"></i></div>
                <div class="details"><div class="stat-number"><?php echo number_format($total_referrals); ?></div><div class="stat-label">การส่งต่อ (ครั้ง)</div></div>
            </div>
        </div>

        <h4 class="section-title">สถิติผู้รับบริการ (แบ่งตามกลุ่มเป้าหมาย)</h4>
        <div class="stats-row-4">
            <div class="stat-card c1"><div class="stat-number"><?php echo number_format($count_type1); ?></div><div class="stat-label">ผู้เรียนการเรียนรู้ตลอดชีวิต<br>(คน)</div></div>
            <div class="stat-card c2"><div class="stat-number"><?php echo number_format($count_type2); ?></div><div class="stat-label">ผู้เรียนการเรียนรู้เพื่อการพัฒนาตนเอง<br>(คน)</div></div>
            <div class="stat-card c3"><div class="stat-number"><?php echo number_format($count_type3); ?></div><div class="stat-label">ผู้เรียนการเรียนรู้เพื่อคุณวุฒิตามระดับ<br>(คน)</div></div>
            <div class="stat-card c4"><div class="stat-number"><?php echo number_format($count_type4); ?></div><div class="stat-label">ประชาชน<br>(ทั่วไป)</div></div>
        </div>

        <h4 class="section-title">สถิติการให้คำปรึกษา (แบ่งตามด้าน)</h4>
        <div class="stats-row-3">
            <div class="stat-card sub-edu"><div class="stat-number"><?php echo number_format($total_edu); ?></div><div class="stat-label">ด้านการศึกษา (ครั้ง)</div></div>
            <div class="stat-card sub-car"><div class="stat-number"><?php echo number_format($total_career); ?></div><div class="stat-label">ด้านอาชีพ (ครั้ง)</div></div>
            <div class="stat-card sub-per"><div class="stat-number"><?php echo number_format($total_personal); ?></div><div class="stat-label">ด้านส่วนตัวและสังคม (ครั้ง)</div></div>
        </div>

        <?php if ($current_user_type != 4): ?>
        <h4 class="section-title">สถานศึกษาที่ให้บริการแนะแนวรายบุคคลมากที่สุด</h4>
        <div class="hero-row chart-box" style="margin-top: 15px;">
            <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; ?>

        <h4 class="section-title">ข้อมูลประชากรศาสตร์</h4>
        <div class="charts-grid-3">
            <div class="chart-box"><div class="chart-title">เพศของผู้รับบริการ</div><div class="small-chart-wrapper"><canvas id="genderChart"></canvas></div></div>
            <div class="chart-box">
                <div class="chart-title">ช่วงอายุของผู้รับบริการ <br><span style="font-size: 0.85rem; color:#64748b; font-weight: normal;">(รวม <?php echo $total_reg; ?> คน)</span></div>
                <div class="small-chart-wrapper"><canvas id="ageChart"></canvas></div>
            </div>
            <div class="chart-box"><div class="chart-title">ประกอบอาชีพ</div><div class="small-chart-wrapper"><canvas id="occChart"></canvas></div></div>
        </div>

        <h4 class="section-title">ปัญหาและอุปสรรคที่พบมากที่สุด (TOP 5)</h4>
        <div class="charts-grid-2">
            <div class="chart-box"><div class="chart-title">TOP 5 ปัญหาด้านการศึกษา</div><div class="small-chart-wrapper"><canvas id="eduChart"></canvas></div></div>
            <div class="chart-box"><div class="chart-title">TOP 5 ปัญหาด้านอาชีพ</div><div class="small-chart-wrapper"><canvas id="carChart"></canvas></div></div>
            <div class="chart-box"><div class="chart-title">TOP 5 ปัญหาด้านส่วนตัวและสังคม</div><div class="small-chart-wrapper"><canvas id="perChart"></canvas></div></div>
            <div class="chart-box"><div class="chart-title">TOP 5 การให้ความช่วยเหลือ (ส่งต่อ)</div><div class="small-chart-wrapper"><canvas id="hlpChart"></canvas></div></div>
        </div>

        <?php if ($current_user_type == 4): ?>
        <h4 class="section-title" style="margin-top: 30px;">ตารางข้อมูลผู้รับบริการแนะแนว (ระดับตำบล)</h4>
        <div class="chart-box" style="margin-top: 15px; overflow-x: auto;">
            <table id="personTable" class="table table-striped table-hover table-bordered" style="width:100%; font-size: 0.95rem;">
                <thead style="background-color: #f1f5f9;">
                    <tr><th class="text-center">ลำดับ</th><th>วันที่รับการแนะแนว</th><th>ประเภทบริการ</th><th>ชื่อผู้รับบริการ</th><th>ชื่อผู้ให้บริการ</th><th class="text-center">สถานะ</th><th class="text-center">ดูข้อมูล</th></tr>
                </thead>
                <tbody>
                    <?php 
                    $no = 1;
                    foreach($tableData as $row): 
                        $srv_types = array();
                        
                        // เช็คแบบเดียวกันกับที่ใช้บวกเลข เพื่อแสดงในตาราง
                        $has_edu = false; $e_arr = json_decode($row['education_issues'] ?? '', true) ?: (empty(trim($row['education_issues'] ?? '')) ? [] : explode(',', $row['education_issues']));
                        foreach($e_arr as $v) { if(trim($v) !== '' && trim($v) !== '0') $has_edu = true; }
                        if($has_edu) $srv_types[] = "การศึกษา";

                        $has_car = false; $c_arr = json_decode($row['career_issues'] ?? '', true) ?: (empty(trim($row['career_issues'] ?? '')) ? [] : explode(',', $row['career_issues']));
                        foreach($c_arr as $v) { if(trim($v) !== '' && trim($v) !== '0') $has_car = true; }
                        if($has_car) $srv_types[] = "อาชีพ";

                        $has_per = false; $p_arr = json_decode($row['personal_issues'] ?? '', true) ?: (empty(trim($row['personal_issues'] ?? '')) ? [] : explode(',', $row['personal_issues']));
                        foreach($p_arr as $v) { if(trim($v) !== '' && trim($v) !== '0') $has_per = true; }
                        if($has_per) $srv_types[] = "ส่วนตัว";
                        
                        $srv_text = !empty($srv_types) ? implode(', ', $srv_types) : "ไม่ระบุ";

                        $success_id = intval($row['service_success_id'] ?? 0);
                        if ($success_id === 1) {
                            $status_badge = '<span class="badge badge-success" style="font-size:0.85rem; padding:5px 10px; background-color:#10b981; color:white;">สำเร็จ</span>';
                            $status_text = 'สำเร็จ';
                        } elseif (!empty($row['follow_up_date'])) {
                            $status_badge = '<span class="badge badge-warning" style="font-size:0.85rem; padding:5px 10px; background-color:#f59e0b; color:white;">มีการนัดหมายติดตาม</span>';
                            $status_text = 'มีการนัดหมายติดตาม';
                        } elseif ($success_id === 2) {
                            $status_badge = '<span class="badge badge-danger" style="font-size:0.85rem; padding:5px 10px; background-color:#ef4444; color:white;">ไม่สำเร็จ</span>';
                            $status_text = 'ไม่สำเร็จ';
                        } else {
                            $status_badge = '<span class="badge badge-warning" style="font-size:0.85rem; padding:5px 10px; background-color:#f59e0b; color:white;">ดำเนินการอยู่</span>';
                            $status_text = 'ดำเนินการอยู่';
                        }

                        $date_parts = explode('-', explode(' ', $row['service_request_date'] ?? '')[0]);
                        $thai_date = count($date_parts) == 3 ? $date_parts[2].'/'.$date_parts[1].'/'.($date_parts[0]+543) : ($row['service_request_date'] ?? '-');

                        $g_text = ($row['gender_id'] ?? '') == '1' ? 'ชาย' : (($row['gender_id'] ?? '') == '2' ? 'หญิง' : 'ไม่ระบุ');
                        $age_val = calculateAge($row['birth_date'] ?? '');
                        $age_text = ($age_val > 0) ? $age_val . ' ปี' : 'ไม่ระบุ';
                        
                        $addr = '';
                        if(!empty($row['house_number'])) $addr .= "เลขที่ " . $row['house_number'] . " ";
                        if(!empty($row['village_number'])) $addr .= "หมู่ " . $row['village_number'] . " ";
                        if(!empty($row['subdistrict'])) $addr .= "ต." . $row['subdistrict'] . " ";
                        if(!empty($row['district'])) $addr .= "อ." . $row['district'] . " ";
                        if(!empty($row['province'])) $addr .= "จ." . $row['province'] . " ";
                        if($addr == '') $addr = '-';

                        $srv_id = $row['service_type_id'] ?? '';
                        if($srv_id == '1') $st_text = 'การเรียนรู้ตลอดชีวิต'; elseif($srv_id == '2') $st_text = 'การเรียนรู้เพื่อการพัฒนาตนเอง'; elseif($srv_id == '3') $st_text = 'การเรียนรู้เพื่อคุณวุฒิตามระดับ'; elseif($srv_id == '4') $st_text = 'ประชาชน'; else $st_text = 'ไม่ระบุ';
                        
                        $occ_id = $row['occupation_id'] ?? '';
                        $occ_text = $occ_map[$occ_id] ?? ($occ_id ? "รหัส " . $occ_id : "ไม่ระบุ");

                        $edu_txt = getIssueTextsDB($row['education_issues'] ?? '', $dict_edu, 'edu');
                        $car_txt = getIssueTextsDB($row['career_issues'] ?? '', $dict_car, 'car');
                        $per_txt = getIssueTextsDB($row['personal_issues'] ?? '', $dict_per, 'per');
                        $ref_txt = getIssueTextsDB($row['referral_services'] ?? '', $dict_hlp, 'hlp');

                        $fname = trim(($row['first_name'] ?? '') . ' ' . ($row['last_name'] ?? ''));
                        $cfname = trim(($row['counselor_first_name'] ?? '') . ' ' . ($row['counselor_last_name'] ?? ''));
                        $emname = trim(($row['emergency_first_name'] ?? '') . ' ' . ($row['emergency_last_name'] ?? ''));

                        $modalData = array(
                            'patientName' => $fname, 'phone' => $row['phone'] ?: '-', 'gender' => $g_text, 'age' => $age_text,
                            'nat' => $row['nationality'] ?: '-', 'eth' => $row['ethnicity'] ?: '-', 'rel' => $row['religion'] ?: '-', 'blood' => $row['blood_type'] ?: '-',
                            'addr' => $addr, 'em_name' => $emname ?: '-', 'em_phone' => $row['emergency_phone'] ?: '-',
                            'target_group' => $st_text, 'occupation' => $occ_text, 'date' => $thai_date, 'consultant' => $cfname,
                            'status' => $status_text, 'details' => $row['service_request_details'] ?: '-',
                            'edu' => $edu_txt, 'car' => $car_txt, 'per' => $per_txt, 'ref' => $ref_txt
                        );
                        $json_modal_data = htmlspecialchars(json_encode($modalData), ENT_QUOTES, 'UTF-8');
                    ?>
                    <tr>
                        <td class="text-center"><?php echo $no++; ?></td><td><?php echo $thai_date; ?></td><td><?php echo $srv_text; ?></td>
                        <td><?php echo htmlspecialchars($fname); ?></td><td><?php echo htmlspecialchars($cfname); ?></td>
                        <td class="text-center"><?php echo $status_badge; ?></td>
                        <td class="text-center"><button class="btn btn-info btn-sm" onclick="viewPersonDetails(this)" data-info="<?php echo $json_modal_data; ?>"><i class="fas fa-eye"></i> ดูข้อมูล</button></td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>

        <div class="modal fade" id="personModal" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                <div class="modal-content" style="border-radius: 12px; border: none; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
                    <div class="modal-header" style="background: #1e40af; color: white; border-radius: 12px 12px 0 0;">
                        <h5 class="modal-title"><i class="fas fa-address-card"></i> ข้อมูลเชิงลึกผู้รับบริการแนะแนว</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: white;"><span aria-hidden="true">&times;</span></button>
                    </div>
                    <div class="modal-body" style="padding: 30px; font-size: 1.05rem;">
                        <div class="row">
                            <div class="col-md-6">
                                <h6 class="text-primary font-weight-bold" style="border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;">ข้อมูลผู้รับบริการ</h6>
                                <p><strong>ชื่อ-สกุล:</strong> <span id="md_patient_name" style="color: #2563eb;"></span></p>
                                <p><strong>เบอร์โทรศัพท์:</strong> <span id="md_phone"></span></p>
                                <p><strong>เพศ:</strong> <span id="md_gender"></span> &nbsp;&nbsp;|&nbsp;&nbsp; <strong>อายุ:</strong> <span id="md_age"></span></p>
                                <p><strong>กลุ่มเป้าหมาย:</strong> <span id="md_target"></span> &nbsp;&nbsp;|&nbsp;&nbsp; <strong>อาชีพ:</strong> <span id="md_occ"></span></p>
                                <p><strong>ที่อยู่ปัจจุบัน:</strong> <span id="md_addr"></span></p>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary font-weight-bold" style="border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;">ข้อมูลการเข้ารับบริการ</h6>
                                <p><strong>วันที่รับบริการ:</strong> <span id="md_date"></span></p>
                                <p><strong>ผู้ให้คำปรึกษา:</strong> <span id="md_consultant"></span></p>
                                <p><strong>รายละเอียดการขอรับบริการ:</strong><br><span id="md_details" style="color: #64748b;"></span></p>
                                <p><strong>สถานะการดำเนินการ:</strong> <span id="md_status" class="font-weight-bold"></span></p>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-12">
                                <h6 class="font-weight-bold" style="color: #059669; border-bottom: 2px solid #e2e8f0; padding-bottom: 8px;">ประเด็นปัญหาและหัวข้อที่ให้คำปรึกษา</h6>
                                <p style="margin-bottom: 5px;"><strong>ด้านการศึกษา:</strong></p><p id="md_edu" style="margin-left: 20px; color: #475569; font-size: 0.95rem;"></p>
                                <p style="margin-bottom: 5px;"><strong>ด้านอาชีพ:</strong></p><p id="md_car" style="margin-left: 20px; color: #475569; font-size: 0.95rem;"></p>
                                <p style="margin-bottom: 5px;"><strong>ด้านส่วนตัวและสังคม:</strong></p><p id="md_per" style="margin-left: 20px; color: #475569; font-size: 0.95rem;"></p>
                                <hr>
                                <p><strong><i class="fas fa-share-square"></i> การส่งต่อหน่วยงานอื่น:</strong></p><p id="md_ref" style="margin-left: 20px; color: #ef4444; font-size: 0.95rem;"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

    <script>
    $(document).ready(function() {
        $('#sidebarToggle').on('click', function(e) { e.preventDefault(); $('#sidebar, #sidebarOverlay').toggleClass('active show'); });
        $('#sidebarOverlay').on('click', function() { $('#sidebar, #sidebarOverlay').removeClass('active show'); });
        if ($('#personTable').length) $('#personTable').DataTable({ "pageLength": 20, "language": { "url": "//cdn.datatables.net/plug-ins/1.10.24/i18n/th.json" } });
    });

    if (typeof Chart !== 'undefined') {
        Chart.defaults.color = '#64748b'; 
        Chart.defaults.font.family = "'Inter', 'Sarabun', sans-serif";
        Chart.register(ChartDataLabels);

        <?php if ($current_user_type != 4): ?>
        if (document.getElementById('itemChart')) {
            new Chart(document.getElementById('itemChart').getContext('2d'), {
                type: 'bar', 
                data: {
                    labels: <?php echo safe_json(array_column($topItems ?: [], 'item_name'), '["ไม่มีข้อมูล"]'); ?>,
                    datasets: [{
                        label: 'จำนวน (ครั้ง)',
                        data: <?php echo safe_json(array_column($topItems ?: [], 'total_count'), '[0]'); ?>,
                        // 🌟 เปลี่ยนสีแท่ง TOP 10 ให้มี 10 สีไม่ซ้ำกัน 🌟
                        backgroundColor: [
                            '#ef4444', '#f97316', '#f59e0b', '#84cc16', '#10b981', 
                            '#06b6d4', '#3b82f6', '#6366f1', '#8b5cf6', '#ec4899'
                        ],
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    layout: { padding: { top: 30 } },
                    scales: { y: { beginAtZero: true, grid: { color: '#f1f5f9' } }, x: { grid: { display: false } } },
                    plugins: { 
                        legend: { display: false },
                        datalabels: { anchor: 'end', align: 'top', color: '#1e293b', font: { weight: 'bold', size: 14 }, formatter: v => v > 0 ? v : '' }
                    }
                }
            });
        }
        <?php endif; ?>

        if (document.getElementById('genderChart')) {
            new Chart(document.getElementById('genderChart').getContext('2d'), {
                type: 'pie',
                data: {
                    labels: ['ชาย', 'หญิง', 'ไม่ระบุ'],
                    datasets: [{ data: [<?php echo "{$genders['ชาย']},{$genders['หญิง']},{$genders['ไม่ระบุ']}"; ?>], backgroundColor: ['#3b82f6', '#ec4899', '#cbd5e1'], borderWidth: 2, borderColor: '#ffffff' }]
                },
                options: { 
                    responsive: true, maintainAspectRatio: false, 
                    plugins: { 
                        legend: { position: 'bottom' },
                        datalabels: { color: '#ffffff', font: { weight: 'bold', size: 14 }, formatter: v => v > 0 ? v : '' }
                    } 
                }
            });
        }

        if (document.getElementById('ageChart')) {
            new Chart(document.getElementById('ageChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: ['ต่ำกว่า 15 ปี', '15-18 ปี', '19-60 ปี', 'มากกว่า 60 ปี'],
                    datasets: [{
                        label: 'จำนวน (คน)',
                        data: [<?php echo "{$ages['under15']}, {$ages['15to18']}, {$ages['19to60']}, {$ages['over60']}"; ?>],
                        backgroundColor: ['#10b981', '#3b82f6', '#f59e0b', '#8b5cf6'], borderRadius: 4
                    }]
                },
                options: { 
                    responsive: true, maintainAspectRatio: false, layout: { padding: { top: 30 } },
                    scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } }, x: { grid: { display: false } } },
                    plugins: { 
                        legend: { display: false },
                        datalabels: { anchor: 'end', align: 'top', color: '#1e293b', font: { weight: 'bold', size: 14 }, formatter: v => v > 0 ? v : '' }
                    } 
                }
            });
        }

        if (document.getElementById('occChart')) {
            new Chart(document.getElementById('occChart').getContext('2d'), {
                type: 'bar',
                data: {
                    labels: <?php echo safe_json(array_keys($occupations)); ?>,
                    datasets: [{ 
                        label: 'จำนวน (คน)', 
                        data: <?php echo safe_json(array_values($occupations)); ?>, 
                        backgroundColor: [
                            '#3b82f6', '#ec4899', '#10b981', '#f59e0b', '#8b5cf6', 
                            '#06b6d4', '#f43f5e', '#eab308', '#14b8a6', '#6366f1',
                            '#84cc16', '#d946ef', '#0ea5e9', '#f97316', '#64748b'
                        ], 
                        // 🌟 แก้มุมมนและขอบล่าง
                        borderRadius: { topLeft: 6, topRight: 6, bottomLeft: 0, bottomRight: 0 },
                        borderSkipped: 'bottom'
                    }]
                },
                options: { 
                    responsive: true, maintainAspectRatio: false, layout: { padding: { top: 30 } },
                    scales: { 
                        // 🌟 ล็อคแกน Y
                        y: { beginAtZero: true, min: 0, ticks: { stepSize: 1 } }, 
                        x: { grid: { display: false } } 
                    }, 
                    plugins: { 
                        legend: { display: false },
                        datalabels: { anchor: 'end', align: 'top', color: '#1e293b', font: { weight: 'bold', size: 14 }, formatter: v => v > 0 ? v : '' }
                    } 
                }
            });
        }

       function renderHBar(canvasId, labels, data, bgColor) {
            if (!document.getElementById(canvasId)) return;
            
            new Chart(document.getElementById(canvasId).getContext('2d'), {
                type: 'bar',
                data: { 
                    labels: labels, // ดึงข้อความเต็มมาใช้เลย เดี๋ยวให้กราฟจัดการตัดเอง
                    datasets: [{ label: 'จำนวน (ครั้ง)', data: data, backgroundColor: bgColor, borderRadius: 4 }] 
                },
                options: { 
                    responsive: true, 
                    maintainAspectRatio: false, 
                    indexAxis: 'y', 
                    layout: { 
                        // 🌟 ดันขอบขวาให้ตัวเลขไม่ขาด
                        padding: { left: 0, right: 40 } 
                    }, 
                    scales: { 
                        x: { 
                            beginAtZero: true, 
                            ticks: { stepSize: 1, precision: 0 } 
                        }, 
                        y: { 
                            grid: { display: false },
                            ticks: {
                                // 🌟 ปรับแต่งการแสดงข้อความบนแกน Y 🌟
                                font: {
                                    size: 12,
                                    family: "'Inter', 'Sarabun', sans-serif"
                                },
                                // ตัดคำอัตโนมัติหากยาวเกินไป (ให้เหลือแค่บรรทัดเดียว)
                                callback: function(value) {
                                    let label = this.getLabelForValue(value);
                                    // หากข้อความยาวเกิน 20 ตัวอักษร ให้ตัดแล้วใส่ ...
                                    if (label.length > 20) {
                                        return label.substring(0, 20) + '...';
                                    }
                                    return label;
                                }
                            }
                        } 
                    },
                    plugins: { 
                        legend: { display: false }, 
                        tooltip: { 
                            callbacks: { 
                                // เอาเมาส์ชี้แล้วโชว์เต็มๆ
                                title: c => labels[c[0].dataIndex] 
                            } 
                        },
                        datalabels: { 
                            anchor: 'end', align: 'right', color: '#1e293b', 
                            font: { weight: 'bold', size: 14 }, 
                            formatter: v => v > 0 ? v : '' 
                        }
                    } 
                }
            });
        }

        renderHBar('eduChart', <?php echo safe_json($chart_edu['labels']); ?>, <?php echo safe_json($chart_edu['data']); ?>, '#10b981');
        renderHBar('carChart', <?php echo safe_json($chart_car['labels']); ?>, <?php echo safe_json($chart_car['data']); ?>, '#3b82f6');
        renderHBar('perChart', <?php echo safe_json($chart_per['labels']); ?>, <?php echo safe_json($chart_per['data']); ?>, '#f59e0b');
        renderHBar('hlpChart', <?php echo safe_json($chart_hlp['labels']); ?>, <?php echo safe_json($chart_hlp['data']); ?>, '#8b5cf6');
    }

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

    function viewPersonDetails(btn) {
        const data = JSON.parse(btn.getAttribute('data-info'));
        document.getElementById('md_patient_name').textContent = data.patientName; document.getElementById('md_phone').textContent = data.phone;
        document.getElementById('md_gender').textContent = data.gender; document.getElementById('md_age').textContent = data.age;
        document.getElementById('md_addr').textContent = data.addr; document.getElementById('md_target').textContent = data.target_group;
        document.getElementById('md_occ').textContent = data.occupation; document.getElementById('md_date').textContent = data.date;
        document.getElementById('md_consultant').textContent = data.consultant; document.getElementById('md_details').textContent = data.details;
        document.getElementById('md_edu').innerHTML = data.edu; document.getElementById('md_car').innerHTML = data.car;
        document.getElementById('md_per').innerHTML = data.per; document.getElementById('md_ref').innerHTML = data.ref;
        document.getElementById('md_status').textContent = data.status;
        let statusColor = '#f59e0b';
        if (data.status === 'สำเร็จ') {
            statusColor = '#10b981';
        } else if (data.status === 'ไม่สำเร็จ') {
            statusColor = '#ef4444';
        } else if (data.status === 'มีการนัดหมายติดตาม') {
            statusColor = '#f59e0b';
        }
        document.getElementById('md_status').style.color = statusColor;
        $('#personModal').modal('show');
    }

    function exportToExcel() {
    const start_date  = document.getElementById('start_date') ? document.getElementById('start_date').value : '';
    const end_date    = document.getElementById('end_date') ? document.getElementById('end_date').value : '';
    
    // "ค้นหาชื่อจังหวัด"
    let search_term = '';
    if (document.getElementById('search_term')) { 
        search_term = document.getElementById('search_term').value; 
    }

    // 2. สร้าง URL โดยวิ่งไปที่ไฟล์ person_report_excel.php
    const url = `report/person_report_excel.php?start_date=${encodeURIComponent(start_date)}&end_date=${encodeURIComponent(end_date)}&search_term=${encodeURIComponent(search_term)}`;

    // 3. เปิดหน้าต่างใหม่เพื่อดาวน์โหลดไฟล์
    window.open(url, '_blank');
    }
    </script>
</body>
</html>