@extends('admin.dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="text-primary">
        <i class="bi bi-clipboard-data"></i> รายงานผลการประเมิน
    </h2>
    <div class="btn-group">
        <button class="btn btn-outline-primary" onclick="exportToExcel()">
            <i class="bi bi-file-earmark-excel"></i> Export Excel
        </button>

    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card stat-card">
            <div class="card-body text-center p-3">
                <h4 class="mt-2" id="totalSurveysSent">0</h4>
                <p class="mb-0">ส่งแบบประเมินทั้งหมด</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card stat-card">
            <div class="card-body text-center p-3">
                <h4 class="mt-2" id="totalResponses">0</h4>
                <p class="mb-0">มีผู้ตอบกลับทั้งหมด</p>
            </div>
        </div>
    </div>
</div>

<!-- Comparison Chart -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center flex-wrap">
                <h5 class="mb-0">
                    <i class="bi bi-graph-up"></i> ผลสะท้อนกลับของลูกค้า
                </h5>
                <div class="d-flex gap-2 align-items-center flex-wrap">
                    <select class="form-select form-select-sm" id="surveySelect" style="min-width: 250px;" onchange="loadQuestionChart()">
                        <option value="">เลือกแบบประเมิน...</option>
                    </select>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="groupByProductToggle" checked onchange="loadQuestionChart()">
                        <label class="form-check-label" for="groupByProductToggle">
                            แยกตามประเภทผลิตภัณฑ์
                        </label>
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <label class="form-label mb-0 small">วันที่เริ่ม:</label>
                        <input type="date" class="form-control form-control-sm" id="dateStart" style="width: 150px;" onchange="loadQuestionChart()">
                    </div>
                    <div class="d-flex gap-2 align-items-center">
                        <label class="form-label mb-0 small">วันที่สิ้นสุด:</label>
                        <input type="date" class="form-control form-control-sm" id="dateEnd" style="width: 150px;" onchange="loadQuestionChart()">
                    </div>
                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="clearDateRange()" title="ล้างช่วงวันที่">
                        <i class="bi bi-x-circle"></i> ล้าง
                    </button>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="scrollChart('left')">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span class="btn btn-outline-secondary btn-sm" id="yearInfo">ปี 2567</span>
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="scrollChart('right')">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="chart-container">
                    <div id="comparisonChart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Filter Section -->
<div class="card mb-4">
    <div class="card-body">
        <div class="row">
            <!-- Search Filter 1: ค้นหาจากข้อมูลพื้นฐาน -->
            <div class="col-md-6 mb-3">
                <label class="form-label">
                    <i class="bi bi-search"></i> ค้นหาข้อมูล
                </label>
                <div class="input-group">
                    <input class="form-control" id="searchFilter" 
                           placeholder="ค้นหาจาก รหัสคำขอ, หน่วยงาน, ผลิตภัณฑ์, ประเภทผลิตภัณฑ์, รายการทดสอบ...">
                </div>
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> ค้นหาได้จากทุกฟิลด์ในตาราง
                </small>
            </div>
            
            <!-- Search Filter 2: ค้นหาจากแบบประเมิน -->
            <div class="col-md-3 mb-3">
                <label class="form-label">
                    <i class="bi bi-clipboard-check"></i> แบบประเมิน
                </label>
                <select class="form-select" id="surveyNameFilter">
                    <option value="">ทั้งหมด</option>
                    <!-- Options will be loaded dynamically -->
                </select>
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> กรองตามแบบประเมินในรายละเอียด
                </small>
            </div>
            
            <!-- Search Filter 3: ค้นหาจากสถานะ -->
            <div class="col-md-3 mb-3">
                <label class="form-label">
                    <i class="bi bi-tag"></i> สถานะ
                </label>
                <select class="form-select" id="statusFilter">
                    <option value="">ทั้งหมด</option>
                    <option value="sent">รอตอบ</option>
                    <option value="completed">เสร็จสิ้น</option>
                    <option value="expired">หมดอายุ</option>
                    <option value="cancelled">ยกเลิกแล้ว</option>
                </select>
                <small class="text-muted">
                    <i class="bi bi-info-circle"></i> กรองตามสถานะแบบประเมิน
                </small>
            </div>
        </div>
        
        <div class="row">
            <div class="col-12 text-end">
                <button class="btn btn-outline-secondary" type="button" onclick="clearFilters()">
                    <i class="bi bi-x-circle"></i> ล้างตัวกรองทั้งหมด
                </button>
            </div>
        </div>
    </div>
</div>


<!-- Detailed Report Table -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">
            <i class="bi bi-table"></i> รายงานผลการประเมินตามรหัสคำขอ
        </h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead class="table-light">
                    <tr>
                        <th>รหัสคำขอ</th>
                        <th>หน่วยงาน</th>
                        <th>ผลิตภัณฑ์</th>
                        <th>ประเภทผลิตภัณฑ์</th>
                        <th>รายการทดสอบ</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody id="reportTableBody">
                    <!-- Data will be loaded here -->
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Survey Detail Modal -->
<div class="modal fade" id="surveyDetailModal" tabindex="-1" aria-labelledby="surveyDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="surveyDetailModalLabel">
                    <i class="bi bi-eye"></i> รายละเอียดแบบประเมิน
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Request Code Info -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-info-circle"></i> รหัสคำขอ: <span id="modalRequestCode">R60-001</span>
                        </h6>
                    </div>
                </div>

                <!-- Sent Surveys Section -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-primary border-bottom pb-2">
                            <i class="bi bi-send"></i> แบบประเมินที่ส่ง
                        </h6>
                    </div>
                </div>

                <div class="row" id="sentSurveysList">
                    <!-- Sent surveys will be loaded here dynamically -->
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> ปิด
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Survey Response Detail Modal -->
<div class="modal fade" id="surveyResponseDetailModal" tabindex="-1" aria-labelledby="surveyResponseDetailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="surveyResponseDetailModalLabel">
                    <i class="bi bi-list-check"></i> รายละเอียดการตอบแบบประเมิน
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <!-- Survey Info -->
                <div class="row mb-4">
                    <div class="col-12">
                        <h6 class="text-success border-bottom pb-2">
                            <i class="bi bi-question-circle"></i> <span id="modalSurveyName">แบบประเมินความพึงพอใจ</span>
                        </h6>
                    </div>
                </div>

                <!-- Response Detail Table -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>ลำดับ</th>
                                <th>คำถาม</th>
                                <th>คำตอบ</th>
                                <th>คะแนน</th>
                                <th>หมายเหตุ</th>
                            </tr>
                        </thead>
                        <tbody id="responseDetailTableBody">
                            <!-- Response details will be loaded here -->
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" onclick="goBackToSurveyDetails()">
                    <i class="bi bi-arrow-left"></i> ย้อนกลับ
                </button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="bi bi-x-circle"></i> ปิด
                </button>
            </div>
        </div>
    </div>
</div>

<style>
.chart-container {
    position: relative;
    height: 500px;
    margin: 1rem 0;
    width: 100%;
    overflow: hidden;
}

#comparisonChart {
    height: 100%;
    width: 100%;
}

/* ปรับให้กราฟ responsive */
@media (max-width: 768px) {
    .chart-container {
        height: 400px;
    }
}
</style>

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
// Chart data (จะโหลดจาก API)
let comparisonData = {};
let availableYears = [];
let productTypes = [];
let surveys = [];

// Chart variables
let currentYearIndex = 0; 
let years = []; // จะโหลดจาก API
let chart;
let chartLoading = false;

// Question chart data (ใหม่)
let questionChartData = {};
let selectedSurveyId = null;
let availableSurveys = [];
let questions = [];

// Function to generate 100 unique colors
function generate100Colors() {
    const colors = [];
    
    // ใช้ชุดสีที่กำหนดไว้ล่วงหน้าสำหรับคำถามแรกๆ ที่มีความแตกต่างชัดเจน
    // สีเหล่านี้ได้รับการเลือกมาเพื่อให้แตกต่างกันอย่างชัดเจนและอ่านง่าย
    const predefinedColors = [
        '#FF6384', // สีแดงชมพู
        '#36A2EB', // สีน้ำเงิน
        '#FFCE56', // สีเหลือง
        '#4BC0C0', // สีฟ้าอมเขียว
        '#9966FF', // สีม่วง
        '#FF9F40', // สีส้ม
        '#FF6B9D', // สีชมพูเข้ม
        '#C9CBCF', // สีเทา
        '#00D9FF', // สีฟ้าสดใส
        '#FFB84D', // สีส้มอ่อน
        '#5B8DEF', // สีน้ำเงินอ่อน
        '#FFD93D', // สีเหลืองทอง
        '#E74C3C', // สีแดง
        '#9B59B6', // สีม่วงอ่อน
        '#F39C12', // สีส้มเข้ม
        '#1ABC9C', // สีเขียวฟ้า
        '#3498DB', // สีน้ำเงินเข้ม
        '#E91E63', // สีชมพูเข้ม
        '#FFC107', // สีเหลืองเข้ม
        '#673AB7'  // สีม่วงเข้ม
    ];
    
    // เพิ่มชุดสีที่กำหนดไว้ล่วงหน้าสำหรับ 20 คำถามแรก
    for (let i = 0; i < Math.min(20, predefinedColors.length); i++) {
        colors.push(predefinedColors[i]);
    }
    
    // สำหรับคำถามที่เหลือ ใช้การสร้างสีแบบปรับปรุงใหม่
    // ใช้ระยะห่างของ hue ที่มากขึ้นเพื่อให้สีแตกต่างกันชัดเจน
    const hueStep = 30; // เพิ่มระยะห่างของ hue จากเดิม (เดิมใช้ golden angle)
    
    for (let i = colors.length; i < 100; i++) {
        // กระจาย hue อย่างสม่ำเสมอด้วยระยะห่างที่มากขึ้น
        const hue = ((i - colors.length) * hueStep) % 360;
        
        // ใช้ saturation และ lightness ที่เหมาะสมเพื่อให้สีชัดเจน
        // สลับระหว่าง saturation สูง-ต่ำ และ lightness สูง-ต่ำ เพื่อเพิ่มความแตกต่าง
        const saturation = 70 + ((i - colors.length) % 3) * 10; // 70, 80, 90
        const lightness = 45 + ((i - colors.length) % 4) * 8; // 45, 53, 61, 69
        
        // Convert HSL to RGB
        const hslToRgb = (h, s, l) => {
            h /= 360;
            s /= 100;
            l /= 100;
            
            let r, g, b;
            
            if (s === 0) {
                r = g = b = l; // achromatic
            } else {
                const hue2rgb = (p, q, t) => {
                    if (t < 0) t += 1;
                    if (t > 1) t -= 1;
                    if (t < 1/6) return p + (q - p) * 6 * t;
                    if (t < 1/2) return q;
                    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
                    return p;
                };
                
                const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
                const p = 2 * l - q;
                
                r = hue2rgb(p, q, h + 1/3);
                g = hue2rgb(p, q, h);
                b = hue2rgb(p, q, h - 1/3);
            }
            
            return [
                Math.round(r * 255),
                Math.round(g * 255),
                Math.round(b * 255)
            ];
        };
        
        const [r, g, b] = hslToRgb(hue, saturation, lightness);
        const hex = '#' + [r, g, b].map(x => {
            const hex = x.toString(16);
            return hex.length === 1 ? '0' + hex : hex;
        }).join('');
        
        colors.push(hex);
    }
    
    return colors;
}

// Generate 100 unique colors
const chartColors = generate100Colors();

// Initialize charts
function initializeCharts() {
    // Load surveys list first
    loadSurveysList().then(() => {
        // Load chart data from API (แต่ไม่แสดงกราฟทันที)
        return loadChartData();
    }).then(() => {
        // ไม่แสดงกราฟ comparison chart ทันที แต่รอให้ผู้ใช้เลือกแบบประเมินก่อน
        // แสดงข้อความให้เลือกแบบประเมิน
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">กรุณาเลือกแบบประเมินเพื่อดูกราฟ</p>
            </div>
        `;
        
        // Load report table data
        loadReportTable();
    }).catch(error => {
        console.error('Error loading chart data:', error);
        // Show error message
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่สามารถโหลดข้อมูลกราฟได้</p>
                <button class="btn btn-primary btn-sm mt-2" onclick="initializeCharts()">
                    <i class="bi bi-arrow-clockwise"></i> ลองใหม่อีกครั้ง
                </button>
            </div>
        `;
        
        // Load report table data anyway
        loadReportTable();
    });
}

// Load surveys list for dropdown
async function loadSurveysList() {
    try {
        const response = await fetch('/admin/surveys-list');
        const result = await response.json();
        
        if (result.success && result.data) {
            availableSurveys = result.data;
            
            // Populate survey select for chart
            const surveySelect = document.getElementById('surveySelect');
            surveySelect.innerHTML = '<option value="">เลือกแบบประเมิน...</option>';
            
            // Populate survey name filter dropdown (for reports filter)
            const surveyNameFilter = document.getElementById('surveyNameFilter');
            if (surveyNameFilter) {
                surveyNameFilter.innerHTML = '<option value="">ทั้งหมด</option>';
            }
            
            // จัดกลุ่มตาม Survey_ID
            const surveysByGroup = {};
            const uniqueSurveyNames = new Set(); // สำหรับ filter dropdown
            
            availableSurveys.forEach(survey => {
                const surveyId = survey.Survey_ID;
                if (!surveysByGroup[surveyId]) {
                    surveysByGroup[surveyId] = [];
                }
                surveysByGroup[surveyId].push(survey);
                
                // เก็บชื่อแบบประเมินที่ไม่ซ้ำ (สำหรับ filter dropdown)
                uniqueSurveyNames.add(survey.Survey_Name);
            });
            
            // สร้าง option สำหรับ chart dropdown (แต่ละ survey และแต่ละเวอร์ชัน)
            Object.keys(surveysByGroup).forEach(surveyId => {
                const versions = surveysByGroup[surveyId];
                const surveyName = versions[0].Survey_Name;
                
                versions.forEach(survey => {
                    const option = document.createElement('option');
                    const versionLabel = survey.version_label || `v${survey.survey_version || 1}`;
                    const currentLabel = survey.is_current ? ' (ปัจจุบัน)' : '';
                    option.value = `${survey.Survey_ID}_${survey.survey_version}`; // format: Survey_ID_version
                    option.textContent = `${surveyName} - ${versionLabel}${currentLabel}`;
                    option.dataset.surveyId = survey.Survey_ID;
                    option.dataset.surveyVersion = survey.survey_version;
                    surveySelect.appendChild(option);
                });
            });
            
            // สร้าง option สำหรับ filter dropdown (เฉพาะชื่อแบบประเมิน ไม่รวมเวอร์ชัน)
            if (surveyNameFilter) {
                const sortedSurveyNames = Array.from(uniqueSurveyNames).sort();
                sortedSurveyNames.forEach(surveyName => {
                    const option = document.createElement('option');
                    option.value = surveyName;
                    option.textContent = surveyName;
                    surveyNameFilter.appendChild(option);
                });
            }
        }
    } catch (error) {
        console.error('Error loading surveys list:', error);
    }
}

// Load question chart data
async function loadQuestionChart() {
    const surveySelect = document.getElementById('surveySelect');
    const selectedValue = surveySelect.value; // format: "Survey_ID_version"
    const groupByProductToggle = document.getElementById('groupByProductToggle');
    const groupByProduct = groupByProductToggle ? groupByProductToggle.checked : true;
    
    if (!selectedValue) {
        // ถ้าไม่ได้เลือกแบบประเมิน ไม่แสดงข้อมูลใดๆ
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">กรุณาเลือกแบบประเมินเพื่อดูกราฟ</p>
            </div>
        `;
        
        // ถ้ามี chart อยู่แล้ว ให้ destroy
        if (chart) {
            chart.destroy();
            chart = null;
        }
        
        // ล้างข้อมูล
        questionChartData = {};
        questions = [];
        productTypes = [];
        
        return;
    }
    
    // แยก Survey_ID และ version จากค่า selected
    const [surveyId, surveyVersion] = selectedValue.split('_');
    const selectedOption = surveySelect.options[surveySelect.selectedIndex];
    
    selectedSurveyId = surveyId;
    const currentYear = years.length > 0 ? years[currentYearIndex] : (new Date().getFullYear() + 543);
    
    try {
        // ล้าง container ก่อน
        const chartContainer = document.getElementById('comparisonChart');
        chartContainer.innerHTML = '';
        
        // ถ้ามี chart อยู่แล้ว ให้ destroy
        if (chart) {
            chart.destroy();
            chart = null;
        }
        
        // ดึงค่า date range
        const dateStart = document.getElementById('dateStart').value;
        const dateEnd = document.getElementById('dateEnd').value;
        
        // สร้าง query parameters
        const params = new URLSearchParams({
            survey_id: surveyId,
            year: currentYear,
            survey_version: surveyVersion,
            group_by_product: groupByProduct ? 1 : 0
        });
        
        // เพิ่ม date range ถ้ามีการกำหนด
        if (dateStart) {
            params.append('date_start', dateStart);
        }
        if (dateEnd) {
            params.append('date_end', dateEnd);
        }
        
        // ส่ง parameter ไปยัง API
        const response = await fetch(`/admin/chart-question-data?${params.toString()}`);
        const result = await response.json();
        
        if (result.success && result.data) {
            questionChartData = result.data;
            questions = result.questions || [];
            productTypes = result.product_types || [];
            
            // Initialize question chart with date range info
            initializeQuestionChart(groupByProduct, dateStart, dateEnd);
        } else {
            chartContainer.innerHTML = `
                <div class="text-center p-5">
                    <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                    <p class="mt-3 text-muted">${result.message || 'ไม่มีข้อมูลสำหรับแบบประเมินนี้'}</p>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading question chart data:', error);
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">เกิดข้อผิดพลาดในการโหลดข้อมูลกราฟ</p>
            </div>
        `;
    }
}

// Initialize question chart
function initializeQuestionChart(groupByProduct = true, dateStart = '', dateEnd = '') {
    if (!questionChartData || Object.keys(questionChartData).length === 0) {
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลคำถามสำหรับแบบประเมินนี้</p>
            </div>
        `;
        return;
    }
    
    // สร้าง subtitle สำหรับแสดงช่วงวันที่ (ถ้ามี)
    let dateRangeSubtitle = '';
    if (dateStart || dateEnd) {
        const startText = dateStart ? new Date(dateStart).toLocaleDateString('th-TH') : 'ทั้งหมด';
        const endText = dateEnd ? new Date(dateEnd).toLocaleDateString('th-TH') : 'ทั้งหมด';
        dateRangeSubtitle = `ช่วงวันที่: ${startText} - ${endText}`;
    }
    
    // สร้าง series จากคำถามแต่ละข้อ
    const series = [];
    let maxValue = 0;
    let maxTotal = 0; // สำหรับ stacked bar
    let categories = [];
    
    if (groupByProduct && productTypes.length > 0) {
        // แยกตาม Product Type (เดิม)
        categories = productTypes;
        
        Object.keys(questionChartData).forEach(questionId => {
            const questionData = questionChartData[questionId];
            const questionText = questionData.question_text;
            const scores = questionData.scores || {};
            
            // สร้าง data array สำหรับแต่ละ product type
            const data = productTypes.map(productName => {
                const score = scores[productName] || 0;
                if (score > maxValue) {
                    maxValue = score;
                }
                return score;
            });
            
            // คำนวณผลรวมสูงสุด (สำหรับ stacked bar)
            productTypes.forEach((productName, index) => {
                let total = 0;
                Object.keys(questionChartData).forEach(qId => {
                    const qData = questionChartData[qId];
                    const qScores = qData.scores || {};
                    total += qScores[productName] || 0;
                });
                if (total > maxTotal) {
                    maxTotal = total;
                }
            });
            
            // ใช้คำถามข้อแรกเป็นชื่อ (อาจจะยาวเกิน ให้ตัดให้เหมาะสม)
            const shortText = questionText.length > 50 ? questionText.substring(0, 50) + '...' : questionText;
            
            series.push({
                name: shortText,
                data: data
            });
        });
    } else {
        // ไม่แยกตาม Product Type (รวมทั้งหมด)
        categories = [''];
        
        Object.keys(questionChartData).forEach(questionId => {
            const questionData = questionChartData[questionId];
            const questionText = questionData.question_text;
            const scores = questionData.scores || {};
            
            // คำนวณค่าเฉลี่ยรวมจากทุก Product Type
            let totalScore = 0;
            let count = 0;
            
            Object.keys(scores).forEach(productName => {
                const score = scores[productName] || 0;
                if (score > 0) {
                    totalScore += score;
                    count++;
                }
            });
            
            const averageScore = count > 0 ? totalScore / count : 0;
            
            if (averageScore > maxValue) {
                maxValue = averageScore;
            }
            
            // ใช้คำถามข้อแรกเป็นชื่อ (อาจจะยาวเกิน ให้ตัดให้เหมาะสม)
            const shortText = questionText.length > 50 ? questionText.substring(0, 50) + '...' : questionText;
            
            series.push({
                name: shortText,
                data: [averageScore]
            });
        });
        
        maxTotal = maxValue; // สำหรับกรณีไม่แยกตาม Product Type
    }
    
    if (series.length === 0) {
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลสำหรับปีนี้</p>
            </div>
        `;
        return;
    }
    
    // คำนวณ max value โดยใช้ผลรวมสูงสุด (สำหรับ stacked bar)
    // ลด padding ลงเป็น 5% เพื่อให้กราฟดูชัดเจนขึ้น และเห็นทุกคำถามได้ครบ
    const xaxisMax = Math.ceil(Math.max(maxTotal, maxValue) * 1.05);
    // กำหนด max อย่างน้อย 10 แต่ไม่เกินผลรวมจริง + 10% เพื่อให้เห็นกราฟได้ชัดเจน
    // ไม่จำกัดที่ 40 แล้ว เพื่อให้เห็นข้อมูลทั้งหมดได้
    const finalXaxisMax = Math.max(xaxisMax, 10);
    
    const options = {
        series: series,
        chart: {
            type: 'bar',
            height: 500,
            width: '100%',
            stacked: groupByProduct, // ใช้ stacked เฉพาะเมื่อแยกตาม Product Type
            toolbar: {
                show: true
            },
            zoom: {
                enabled: true
            },
            parentHeightOffset: 0
        },
        subtitle: dateRangeSubtitle ? {
            text: dateRangeSubtitle,
            align: 'right',
            offsetY: 0,
            offsetX: -50,
            style: {
                fontSize: '11px',
                color: '#666'
            }
        } : undefined,
        plotOptions: {
            bar: {
                horizontal: true,
                columnWidth: '55%',
                endingShape: 'rounded',
                dataLabels: {
                    position: 'center',
                    hideOverflowingLabels: false
                }
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function (val, opts) {
                if (val && val > 0) {
                    return val.toFixed(1);
                }
                return '';
            },
            style: {
                fontSize: '12px',
                fontWeight: 600,
                colors: ['#000']
            },
            offsetX: 0,
            offsetY: 0,
            background: {
                enabled: true,
                opacity: 0.9,
                borderRadius: 4,
                padding: 4
            },
            dropShadow: {
                enabled: true,
                top: 1,
                left: 1,
                blur: 1,
                opacity: 0.45
            }
        },
        stroke: {
            show: true,
            width: 1,
            colors: ['transparent']
        },
        xaxis: {
            categories: categories.length > 0 ? categories : ['ไม่มีข้อมูล'],
            title: {
                text: 'คะแนนเฉลี่ย'
            },
            min: 0,
            max: finalXaxisMax,
            tickAmount: 10,
            labels: {
                formatter: function(val) {
                    return val.toFixed(1);
                },
                style: {
                    fontSize: '11px'
                }
            }
        },
        yaxis: {
            title: {
                text: groupByProduct ? 'ประเภทผลิตภัณฑ์' : 'คำถาม'
            },
            labels: {
                maxWidth: 200,
                style: {
                    fontSize: '11px'
                }
            }
        },
        fill: {
            opacity: 1
        },
        colors: chartColors,
        legend: {
            position: 'top',
            horizontalAlign: 'left',
            offsetX: 40,
            offsetY: dateRangeSubtitle ? 20 : 0, // เพิ่ม offsetY เมื่อมี subtitle เพื่อไม่ให้ซ้อนทับ
            itemMargin: {
                horizontal: 10,
                vertical: 5
            },
            fontSize: '11px',
            fontFamily: 'inherit'
        },
        tooltip: {
            shared: true,
            intersect: false,
            y: {
                formatter: function (val, opts) {
                    if (opts && opts.seriesIndex !== undefined) {
                        return opts.seriesName + ': ' + val.toFixed(1) + " คะแนน";
                    }
                    return val.toFixed(1) + " คะแนน";
                }
            },
            custom: function({series, seriesIndex, dataPointIndex, w}) {
                // สร้าง tooltip แบบ custom เพื่อแสดงผลรวมของแต่ละ bar
                // ตั้งค่า title จาก product type (category) ที่ถูก hover
                const category = w.globals.labels[dataPointIndex] || '';
                const titleHtml = category ? `<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;">${category}</div>` : '';
                let html = titleHtml;
                let total = 0;
                
                series.forEach((s, idx) => {
                    const value = s[dataPointIndex];
                    if (value && value > 0) {
                        total += value;
                        html += '<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: ' + (idx + 1) + '; display: flex; flex-direction: column;"><span class="apexcharts-tooltip-marker" style="background-color: ' + w.globals.colors[idx] + ';"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">' + w.globals.seriesNames[idx] + ': </span><span class="apexcharts-tooltip-text-y-value">' + value.toFixed(1) + ' คะแนน</span></div></div></div>';
                    }
                });
                
                if (series.length > 1) {
                    html += '<div class="apexcharts-tooltip-series-group" style="order: ' + (series.length + 1) + '; border-top: 1px solid rgba(0,0,0,0.2); margin-top: 5px; padding-top: 5px;"><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">รวม: </span><span class="apexcharts-tooltip-text-y-value">' + total.toFixed(1) + ' คะแนน</span></div></div></div>';
                }
                
                return html;
            }
        }
    };
    
    // ล้าง container ก่อน render
    const chartContainer = document.querySelector("#comparisonChart");
    if (chartContainer && chartContainer.innerHTML && chartContainer.innerHTML.includes('ไม่มีข้อมูล')) {
        chartContainer.innerHTML = '';
    }
    
    chart = new ApexCharts(chartContainer, options);
    chart.render();
}

// Load chart data from API
async function loadChartData() {
    if (chartLoading) {
        return; // Already loading
    }
    
    chartLoading = true;
    
    try {
        // ไม่แสดง loading state เพื่อไม่ให้มีข้อความใดแสดงก่อนกราฟ
        const chartContainer = document.getElementById('comparisonChart');
        chartContainer.innerHTML = ''; // ล้าง container ว่างเปล่า
        
        const response = await fetch('/admin/chart-comparison-data');
        const result = await response.json();
        
        if (result.success && result.data) {
            comparisonData = result.data;
            availableYears = result.available_years || [];
            productTypes = result.product_types || [];
            surveys = result.surveys || [];
            
            // Set years and currentYearIndex
            years = availableYears;
            currentYearIndex = 0; // เริ่มจากปีล่าสุด
            
            // Update year info display
            if (years.length > 0) {
                document.getElementById('yearInfo').textContent = `ปี ${years[currentYearIndex]}`;
            }
            
            console.log('Chart data loaded:', {
                years: years.length,
                productTypes: productTypes.length,
                surveys: surveys.length
            });
        } else {
            throw new Error(result.message || 'ไม่สามารถโหลดข้อมูลกราฟได้');
        }
    } catch (error) {
        console.error('Error loading chart data:', error);
        throw error;
    } finally {
        chartLoading = false;
    }
}

// Initialize comparison chart
function initializeComparisonChart() {
    if (years.length === 0 || !comparisonData) {
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลกราฟ</p>
            </div>
        `;
        return;
    }
    
    const currentYear = years[currentYearIndex];
    const yearData = comparisonData[currentYear];
    
    if (!yearData || Object.keys(yearData).length === 0) {
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลสำหรับปี ${currentYear}</p>
            </div>
        `;
        return;
    }
    
    // Prepare data for current year only
    const categories = Object.keys(yearData);
    
    // สร้าง series จาก surveys ที่มีข้อมูลจริงในปีนี้
    const series = [];
    const usedSurveys = new Set();
    
    // วนลูปเพื่อหา surveys ที่มีข้อมูลในปีนี้
    categories.forEach(category => {
        Object.keys(yearData[category] || {}).forEach(surveyName => {
            if (!usedSurveys.has(surveyName)) {
                usedSurveys.add(surveyName);
            }
        });
    });
    
    // สร้าง series สำหรับแต่ละ survey และคำนวณ max value
    let maxValue = 0;
    usedSurveys.forEach(surveyName => {
        const data = categories.map(category => {
            const value = yearData[category] && yearData[category][surveyName] 
                ? parseFloat(yearData[category][surveyName]) 
                : 0;
            // หาค่าสูงสุดจากข้อมูลทั้งหมด
            if (value > maxValue) {
                maxValue = value;
            }
            return value;
        });
        series.push({
            name: surveyName,
            data: data
        });
    });
    
    // คำนวณผลรวมสูงสุด (สำหรับ stacked bar)
    let maxTotal = 0;
    categories.forEach((category, index) => {
        let total = 0;
        series.forEach(s => {
            total += s.data[index] || 0;
        });
        if (total > maxTotal) {
            maxTotal = total;
        }
    });
    
    // กำหนด max ของ xaxis โดยเพิ่ม padding 20% หรืออย่างน้อย 10
    const xaxisMax = Math.ceil(Math.max(maxTotal, maxValue) * 1.2);
    const finalXaxisMax = Math.max(xaxisMax, 10); // อย่างน้อย 10
    
    // ถ้าไม่มีข้อมูลเลย
    if (series.length === 0) {
        // ล้าง chart ออกก่อน (ถ้ามี)
        if (chart) {
            chart.destroy();
            chart = null;
        }
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลสำหรับปี ${currentYear}</p>
            </div>
        `;
        return;
    }
    
    // ล้างข้อความ "ไม่มีข้อมูล" ออกก่อน (ถ้ามี)
    const chartContainer = document.getElementById('comparisonChart');
    if (chartContainer && chartContainer.innerHTML && chartContainer.innerHTML.includes('ไม่มีข้อมูล')) {
        chartContainer.innerHTML = '';
    }
    
    const options = {
        series: series,
        chart: {
        type: 'bar',
            height: 500,
            width: '100%',
            stacked: true,
            toolbar: {
                show: true
            },
            zoom: {
                enabled: true
            },
            parentHeightOffset: 0
        },
        plotOptions: {
            bar: {
                horizontal: true,
                columnWidth: '55%',
                endingShape: 'rounded',
                dataLabels: {
                    position: 'center', // แสดงที่กึ่งกลางของแต่ละ segment
                    hideOverflowingLabels: false // ไม่ซ่อน label แม้จะเกิน bar
                }
            }
        },
        dataLabels: {
            enabled: true,
            formatter: function (val, opts) {
                // แสดงค่าเฉพาะเมื่อค่ามากกว่า 0
                if (val && val > 0) {
                    return val.toFixed(1);
                }
                return '';
            },
            style: {
                fontSize: '12px',
                fontWeight: 600,
                colors: ['#000']
            },
            offsetX: 0,
            offsetY: 0,
            background: {
                enabled: true,
                opacity: 0.8,
                borderRadius: 4,
                padding: 4
            },
            dropShadow: {
                enabled: true,
                top: 1,
                left: 1,
                blur: 1,
                opacity: 0.45
                }
        },
        stroke: {
            show: true,
            width: 1,
            colors: ['transparent']
        },
        xaxis: {
            categories: categories,
            title: {
                text: 'คะแนนเฉลี่ย'
            },
            min: 0,
            max: finalXaxisMax,
            tickAmount: 10, // จำนวน tick marks
            labels: {
                formatter: function(val) {
                    return val.toFixed(1);
                },
                style: {
                    fontSize: '11px'
                }
            }
        },
        yaxis: {
            title: {
                text: 'ประเภทผลิตภัณฑ์'
            },
            labels: {
                maxWidth: 200,
                style: {
                    fontSize: '11px'
                }
            }
        },
        fill: {
            opacity: 1
        },
        colors: chartColors,
                legend: {
            position: 'top',
            horizontalAlign: 'left',
            offsetX: 40,
            itemMargin: {
                horizontal: 10,
                vertical: 5
            },
            fontSize: '12px',
            fontFamily: 'inherit'
        },
        tooltip: {
                shared: true,
                intersect: false,
                y: {
                    formatter: function (val, opts) {
                        // แสดงค่าของแต่ละ series
                        if (opts && opts.seriesIndex !== undefined) {
                            return opts.seriesName + ': ' + val.toFixed(1) + " คะแนน";
                        }
                        return val.toFixed(1) + " คะแนน";
                    }
                },
                custom: function({series, seriesIndex, dataPointIndex, w}) {
                    // สร้าง tooltip แบบ custom เพื่อแสดงผลรวมของแต่ละ bar
                    // ตั้งค่า title จาก product type (category) ที่ถูก hover
                    const category = w.globals.labels[dataPointIndex] || '';
                    const titleHtml = category ? `<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;">${category}</div>` : '';
                    let html = titleHtml;
                    let total = 0;
                    
                    series.forEach((s, idx) => {
                        const value = s[dataPointIndex];
                        if (value && value > 0) {
                            total += value;
                            html += '<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: ' + (idx + 1) + '; display: flex; flex-direction: column;"><span class="apexcharts-tooltip-marker" style="background-color: ' + w.globals.colors[idx] + ';"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">' + w.globals.seriesNames[idx] + ': </span><span class="apexcharts-tooltip-text-y-value">' + value.toFixed(1) + ' คะแนน</span></div></div></div>';
                        }
                    });
                    
                    if (series.length > 1) {
                        html += '<div class="apexcharts-tooltip-series-group" style="order: ' + (series.length + 1) + '; border-top: 1px solid rgba(0,0,0,0.2); margin-top: 5px; padding-top: 5px;"><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">รวม: </span><span class="apexcharts-tooltip-text-y-value">' + total.toFixed(1) + ' คะแนน</span></div></div></div>';
                    }
                    
                    return html;
            }
        }
    };
    
    chart = new ApexCharts(document.querySelector("#comparisonChart"), options);
    chart.render();

    // Update year info
    document.getElementById('yearInfo').textContent = `ปี ${currentYear}`;
}

// Scroll chart function
function scrollChart(direction) {
    // ตรวจสอบว่ามีการเลือกแบบประเมินหรือไม่
    const surveySelect = document.getElementById('surveySelect');
    const selectedValue = surveySelect ? surveySelect.value : '';
    
    // ถ้าเลือกแบบประเมินแล้ว ให้โหลด question chart
    if (selectedValue && selectedSurveyId) {
        // เปลี่ยนปี index
        if (years.length === 0) {
            return;
        }
        
        let previousIndex = currentYearIndex;
        // สลับทิศทาง: ซ้าย = ปีถัดไป (index เพิ่ม), ขวา = ปีก่อนหน้า (index ลด)
        if (direction === 'left' && currentYearIndex < years.length - 1) {
        currentYearIndex++;
        } else if (direction === 'right' && currentYearIndex > 0) {
            currentYearIndex--;
        } else {
            return;
        }
        
        // อัพเดท year info
        const currentYear = years[currentYearIndex];
        document.getElementById('yearInfo').textContent = `ปี ${currentYear}`;
        
        // โหลด question chart ใหม่
        loadQuestionChart();
        return;
    }
    
    // ถ้ายังไม่เลือกแบบประเมิน ไม่แสดงข้อมูลใดๆ
    if (!selectedValue) {
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">กรุณาเลือกแบบประเมินเพื่อดูกราฟ</p>
            </div>
        `;
        
        // ถ้ามี chart อยู่แล้ว ให้ destroy
        if (chart) {
            chart.destroy();
            chart = null;
        }
        
        return;
    }
    
    // ถ้ายังไม่เลือกแบบประเมิน ไม่ต้องทำอะไรต่อ (ควรจะไม่ถึงตรงนี้เพราะตรวจสอบไปแล้ว)
    // แต่เพื่อความปลอดภัย ให้ตรวจสอบอีกครั้ง
    if (!selectedValue) {
        return;
    }
    
    // ตรวจสอบว่ามีข้อมูลปีหรือไม่ (กราฟเดิม - ควรจะไม่ถึงตรงนี้เพราะต้องเลือกแบบประเมินก่อน)
    if (years.length === 0 || !comparisonData) {
        console.warn('No chart data available');
        return;
    }
    
    // เปลี่ยนปี index
    // สลับทิศทาง: ซ้าย = ปีถัดไป (index เพิ่ม), ขวา = ปีก่อนหน้า (index ลด)
    let previousIndex = currentYearIndex;
    if (direction === 'left' && currentYearIndex < years.length - 1) {
        currentYearIndex++;
    } else if (direction === 'right' && currentYearIndex > 0) {
        currentYearIndex--;
    } else {
        return; // No more years to scroll
    }
    
    // อัพเดท year info ทันที
    const currentYear = years[currentYearIndex];
    document.getElementById('yearInfo').textContent = `ปี ${currentYear}`;
    
    // ตรวจสอบข้อมูลของปีที่เลือก
    const yearData = comparisonData[currentYear];
    
    // ถ้าไม่มีข้อมูลสำหรับปีนี้
    if (!yearData || Object.keys(yearData).length === 0) {
        // ถ้า chart มีอยู่แล้ว ให้ destroy มัน
        if (chart) {
            chart.destroy();
            chart = null;
        }
        
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลสำหรับปี ${currentYear}</p>
            </div>
        `;
        return;
    }
    
    const categories = Object.keys(yearData);
    
    // สร้าง series จาก surveys ที่มีข้อมูลจริงในปีนี้
    const series = [];
    const usedSurveys = new Set();
    
    // วนลูปเพื่อหา surveys ที่มีข้อมูลในปีนี้
    categories.forEach(category => {
        Object.keys(yearData[category] || {}).forEach(surveyName => {
            if (!usedSurveys.has(surveyName)) {
                usedSurveys.add(surveyName);
            }
        });
    });
    
    // สร้าง series สำหรับแต่ละ survey และคำนวณ max value
    let maxValue = 0;
    usedSurveys.forEach(surveyName => {
        const data = categories.map(category => {
            const value = yearData[category] && yearData[category][surveyName] 
                ? parseFloat(yearData[category][surveyName]) 
                : 0;
            // หาค่าสูงสุดจากข้อมูลทั้งหมด
            if (value > maxValue) {
                maxValue = value;
            }
            return value;
        });
        series.push({
            name: surveyName,
            data: data
        });
    });
    
    // คำนวณผลรวมสูงสุด (สำหรับ stacked bar)
    let maxTotal = 0;
    categories.forEach((category, index) => {
        let total = 0;
        series.forEach(s => {
            total += s.data[index] || 0;
        });
        if (total > maxTotal) {
            maxTotal = total;
        }
    });
    
    // กำหนด max ของ xaxis โดยเพิ่ม padding 20% หรืออย่างน้อย 10
    const xaxisMax = Math.ceil(Math.max(maxTotal, maxValue) * 1.2);
    const finalXaxisMax = Math.max(xaxisMax, 10); // อย่างน้อย 10
    
    // ถ้าไม่มี series เลย
    if (series.length === 0) {
        if (chart) {
            chart.destroy();
            chart = null;
        }
        
        document.getElementById('comparisonChart').innerHTML = `
            <div class="text-center p-5">
                <i class="bi bi-info-circle text-info" style="font-size: 3rem;"></i>
                <p class="mt-3 text-muted">ไม่มีข้อมูลสำหรับปี ${currentYear}</p>
            </div>
        `;
        return;
    }
    
    // ล้างข้อความ "ไม่มีข้อมูล" ออกก่อน (ถ้ามี)
    const chartContainer = document.getElementById('comparisonChart');
    if (chartContainer && chartContainer.innerHTML && chartContainer.innerHTML.includes('ไม่มีข้อมูล')) {
        chartContainer.innerHTML = '';
    }
    
    // ถ้า chart ยังไม่มี ให้สร้างใหม่
    if (!chart) {
        const options = {
            series: series,
            chart: {
                type: 'bar',
                height: 500,
                width: '100%',
                stacked: true,
                toolbar: {
                    show: true
                },
                zoom: {
                    enabled: true
                },
                parentHeightOffset: 0
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val.toFixed(1);
                },
                style: {
                    fontSize: '11px',
                    colors: ['#000']
                }
            },
            stroke: {
                show: true,
                width: 1,
                colors: ['transparent']
            },
            xaxis: {
                categories: categories,
                title: {
                    text: 'คะแนนเฉลี่ย'
                },
                min: 0,
                max: finalXaxisMax,
                tickAmount: 10, // จำนวน tick marks
                labels: {
                    formatter: function(val) {
                        return val.toFixed(1);
                    },
                    style: {
                        fontSize: '11px'
                    }
                }
            },
            yaxis: {
                title: {
                    text: 'ประเภทผลิตภัณฑ์'
                },
                labels: {
                    maxWidth: 200,
                    style: {
                        fontSize: '11px'
                    }
                }
            },
            fill: {
                opacity: 1
            },
            colors: chartColors,
            legend: {
                position: 'top',
                horizontalAlign: 'left',
                offsetX: 40,
                itemMargin: {
                    horizontal: 10,
                    vertical: 5
                },
                fontSize: '12px',
                fontFamily: 'inherit'
            },
            tooltip: {
                shared: true,
                intersect: false,
                y: {
                    formatter: function (val, opts) {
                        // แสดงค่าของแต่ละ series
                        if (opts && opts.seriesIndex !== undefined) {
                            return opts.seriesName + ': ' + val.toFixed(1) + " คะแนน";
                        }
                        return val.toFixed(1) + " คะแนน";
                    }
                },
                custom: function({series, seriesIndex, dataPointIndex, w}) {
                    // สร้าง tooltip แบบ custom เพื่อแสดงผลรวมของแต่ละ bar
                    // ตั้งค่า title จาก product type (category) ที่ถูก hover
                    const category = w.globals.labels[dataPointIndex] || '';
                    const titleHtml = category ? `<div class="apexcharts-tooltip-title" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;">${category}</div>` : '';
                    let html = titleHtml;
                    let total = 0;
                    
                    series.forEach((s, idx) => {
                        const value = s[dataPointIndex];
                        if (value && value > 0) {
                            total += value;
                            html += '<div class="apexcharts-tooltip-series-group apexcharts-active" style="order: ' + (idx + 1) + '; display: flex; flex-direction: column;"><span class="apexcharts-tooltip-marker" style="background-color: ' + w.globals.colors[idx] + ';"></span><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">' + w.globals.seriesNames[idx] + ': </span><span class="apexcharts-tooltip-text-y-value">' + value.toFixed(1) + ' คะแนน</span></div></div></div>';
                        }
                    });
                    
                    if (series.length > 1) {
                        html += '<div class="apexcharts-tooltip-series-group" style="order: ' + (series.length + 1) + '; border-top: 1px solid rgba(0,0,0,0.2); margin-top: 5px; padding-top: 5px;"><div class="apexcharts-tooltip-text" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: bold;"><div class="apexcharts-tooltip-y-group"><span class="apexcharts-tooltip-text-y-label">รวม: </span><span class="apexcharts-tooltip-text-y-value">' + total.toFixed(1) + ' คะแนน</span></div></div></div>';
                    }
                    
                    return html;
                }
            }
        };
        
        // ล้าง container ก่อน render ใหม่ (เพื่อป้องกันข้อความ "ไม่มีข้อมูล" ค้างอยู่)
        const chartContainer = document.querySelector("#comparisonChart");
        if (chartContainer && chartContainer.innerHTML && chartContainer.innerHTML.includes('ไม่มีข้อมูล')) {
            chartContainer.innerHTML = '';
        }
        
        chart = new ApexCharts(chartContainer, options);
        chart.render();
    } else {
        // ถ้า chart มีอยู่แล้ว ให้ update
        // ล้างข้อความ "ไม่มีข้อมูล" ออกก่อน (ถ้ามี)
        const chartContainer = document.getElementById('comparisonChart');
        if (chartContainer && chartContainer.innerHTML && chartContainer.innerHTML.includes('ไม่มีข้อมูล')) {
            chartContainer.innerHTML = '';
        }
    
        // ถ้าเลือกแบบประเมินแล้ว ให้โหลด question chart ใหม่
        if (selectedSurveyId) {
            loadQuestionChart();
        } else {
            // คำนวณ max value สำหรับ update (ใช้ค่า maxValue และ maxTotal จากข้างบน)
            const updateXaxisMax = Math.ceil(Math.max(maxTotal, maxValue) * 1.2);
            const finalUpdateXaxisMax = Math.max(updateXaxisMax, 10);
    
    chart.updateOptions({
        series: series,
        xaxis: {
                    categories: categories,
                    min: 0,
                    max: finalUpdateXaxisMax,
                    tickAmount: 10,
                    labels: {
                        formatter: function(val) {
                            return val.toFixed(1);
                        },
                        style: {
                            fontSize: '11px'
                        }
                    }
                },
                chart: {
                    width: '100%',
                    parentHeightOffset: 0
                }
            });
        }
    }
}

// Generate mock data for 500 reports
function generateMockData() {
    const data = {};
    const agencies = ['SQUAT', 'บริษัท A', 'บริษัท B', 'บริษัท C', 'บริษัท D', 'บริษัท E'];
    const productTypes = ['ระบบซอฟต์ต์แวร์', 'Mobile Application', 'Web Application', 'Desktop Application'];
    const testItems = [
        'ประสิทธิภาพ (Performance efficiency)',
        'ความปลอดภัย (Security)',
        'การใช้งาน (Usability)',
        'ความเสถียร (Reliability)',
        'การบำรุงรักษา (Maintainability)',
        'การทดสอบ (Testability)'
    ];
    
    for (let i = 1; i <= 500; i++) {
        const requestCode = `R60-${i.toString().padStart(3, '0')}`;
        const agencyIndex = Math.floor(Math.random() * agencies.length);
        const productTypeIndex = Math.floor(Math.random() * productTypes.length);
        const testItemIndex = Math.floor(Math.random() * testItems.length);
        
        // Generate random scores and response rates
        const surveysSent = Math.floor(Math.random() * 5) + 1; // 1-5
        const responses = Math.floor(Math.random() * 20) + 5; // 5-24
        const responseRate = Math.floor((responses / (surveysSent * 10)) * 100); // 50-100%
        const averageScore = (Math.random() * 4 + 6).toFixed(1); // 6.0-10.0
        
        let level = 'ปานกลาง';
        if (averageScore >= 8.5) level = 'ดีเยี่ยม';
        else if (averageScore >= 7.0) level = 'ดี';
        else if (averageScore < 6.0) level = 'ต้องปรับปรุง';
        
        data[requestCode] = {
            requestCode: requestCode,
            agencyName: agencies[agencyIndex],
            productName: `ผลิตภัณฑ์ ${i}`,
            productType: productTypes[productTypeIndex],
            testItems: testItems[testItemIndex],
            surveysSent: surveysSent,
            responses: responses,
            responseRate: responseRate,
            averageScore: parseFloat(averageScore),
            level: level
        };
    }
    
    return data;
}

// Mock survey data for history
const surveyHistoryData = {
    'R60-001': {
        requestCode: 'R60-001',
        surveys: [
            {
                id: 'survey-1',
                name: 'แบบประเมินความพึงพอใจ',
                description: 'ประเมินความพึงพอใจของลูกค้า',
                questions: 5,
                sentDate: '2024-01-15',
                respondentName: 'นาย สมชาย ใจดี',
                totalScore: 8.5,
                maxScore: 10
            },
            {
                id: 'survey-2',
                name: 'แบบประเมินคุณภาพบริการ',
                description: 'ประเมินคุณภาพการให้บริการ',
                questions: 3,
                sentDate: '2024-01-20',
                respondentName: 'นาย สมชาย ใจดี',
                totalScore: 7.2,
                maxScore: 10
            }
        ]
    },
    'R60-002': {
        requestCode: 'R60-002',
        surveys: [
            {
                id: 'survey-3',
                name: 'แบบประเมินความปลอดภัย',
                description: 'ประเมินความปลอดภัยของระบบ',
                questions: 4,
                sentDate: '2024-01-25',
                respondentName: 'นาง สมหญิง รักงาน',
                totalScore: 9.1,
                maxScore: 10
            }
        ]
    }
};

// Mock response detail data (รายละเอียดการตอบแบบประเมินของคนๆ เดียว)
const responseDetailData = {
    'survey-1': {
        surveyName: 'แบบประเมินความพึงพอใจ',
        userName: 'นาย สมชาย ใจดี',
        agencyName: 'SQUAT',
        responseDate: '2024-01-16 10:30:00',
        totalScore: 8.5,
        maxScore: 10,
        percentage: 85,
        level: 'ดีเยี่ยม',
        questions: [
            {
                id: 1,
                questionText: 'คุณพึงพอใจกับคุณภาพของผลิตภัณฑ์มากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 2,
                questionText: 'คุณพึงพอใจกับความรวดเร็วในการให้บริการมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 3,
                questionText: 'คุณพึงพอใจกับความชัดเจนในการสื่อสารมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 4,
                questionText: 'คุณพึงพอใจกับความพร้อมในการให้คำแนะนำมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'ปานกลาง',
                score: 2,
                maxScore: 4,
                notes: 'ต้องการการปรับปรุงในส่วนของการให้คำแนะนำที่ชัดเจนกว่านี้'
            },
            {
                id: 5,
                questionText: 'คุณพึงพอใจกับความสะดวกในการติดต่อมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 6,
                questionText: 'คุณพึงพอใจกับความตรงต่อเวลามากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 7,
                questionText: 'คุณพึงพอใจกับความครบถ้วนของข้อมูลมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 8,
                questionText: 'คุณพึงพอใจกับความยืดหยุ่นในการให้บริการมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'ปานกลาง',
                score: 2,
                maxScore: 4,
                notes: 'ควรมีการปรับปรุงในส่วนของความยืดหยุ่น'
            },
            {
                id: 9,
                questionText: 'คุณพึงพอใจกับความปลอดภัยของข้อมูลมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 10,
                questionText: 'คุณพึงพอใจกับความคุ้มค่าของบริการมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 11,
                questionText: 'คุณพึงพอใจกับความสะดวกในการใช้งานมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 12,
                questionText: 'คุณพึงพอใจกับความรวดเร็วในการแก้ไขปัญหามากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 13,
                questionText: 'คุณพึงพอใจกับความชัดเจนของเอกสารมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 14,
                questionText: 'คุณพึงพอใจกับความพร้อมในการให้การสนับสนุนมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มาก',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 15,
                questionText: 'คุณพึงพอใจกับภาพรวมของการให้บริการมากน้อยเพียงใด?',
                questionType: 'rating',
                answer: 'มากที่สุด',
                score: 4,
                maxScore: 4,
                notes: ''
            }
        ]
    },
    'survey-2': {
        surveyName: 'แบบประเมินคุณภาพบริการ',
        userName: 'นาย สมชาย ใจดี',
        agencyName: 'SQUAT',
        responseDate: '2024-01-21 11:45:00',
        totalScore: 7.2,
        maxScore: 10,
        percentage: 72,
        level: 'ดี',
        questions: [
            {
                id: 1,
                questionText: 'คุณคิดว่าคุณภาพของผลิตภัณฑ์เป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 2,
                questionText: 'คุณคิดว่าความรวดเร็วในการให้บริการเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดีมาก',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 3,
                questionText: 'คุณคิดว่าความชัดเจนในการสื่อสารเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ปานกลาง',
                score: 2,
                maxScore: 4,
                notes: 'ควรปรับปรุงการสื่อสารให้ชัดเจนกว่านี้'
            },
            {
                id: 4,
                questionText: 'คุณคิดว่าความพร้อมในการให้คำแนะนำเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 5,
                questionText: 'คุณคิดว่าความสะดวกในการติดต่อเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดีมาก',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 6,
                questionText: 'คุณคิดว่าความตรงต่อเวลาเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 7,
                questionText: 'คุณคิดว่าความครบถ้วนของข้อมูลเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ปานกลาง',
                score: 2,
                maxScore: 4,
                notes: 'ต้องการข้อมูลที่ครบถ้วนกว่านี้'
            },
            {
                id: 8,
                questionText: 'คุณคิดว่าความยืดหยุ่นในการให้บริการเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 9,
                questionText: 'คุณคิดว่าความปลอดภัยของข้อมูลเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดีมาก',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 10,
                questionText: 'คุณคิดว่าความคุ้มค่าของบริการเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            },
            {
                id: 11,
                questionText: 'คุณคิดว่าความสะดวกในการใช้งานเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดีมาก',
                score: 4,
                maxScore: 4,
                notes: ''
            },
            {
                id: 12,
                questionText: 'คุณคิดว่าความรวดเร็วในการแก้ไขปัญหาเป็นอย่างไร?',
                questionType: 'rating',
                answer: 'ดี',
                score: 3,
                maxScore: 4,
                notes: ''
            }
        ]
        }
};

// Real data for reports
let reportData = [];

// Load report table data with pagination
function loadReportTable() {
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = '<tr><td colspan="6" class="text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดข้อมูล...</td></tr>';

    // Fetch real data from API
    fetch('/admin/reports-api')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                reportData = data.data;
                updateReportTable();
                updateStatistics();
            } else {
                showReportError(data.message || 'เกิดข้อผิดพลาดในการโหลดข้อมูล');
            }
        })
        .catch(error => {
            console.error('Error loading reports:', error);
            showReportError('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
        });
}

// Update statistics cards
function updateStatistics() {
    let totalSurveysSent = 0;
    let totalResponses = 0;
    
    reportData.forEach(data => {
        totalSurveysSent += data.surveys_sent || 0;
        totalResponses += data.responses || 0;
    });
    
    document.getElementById('totalSurveysSent').textContent = totalSurveysSent.toLocaleString('th-TH');
    document.getElementById('totalResponses').textContent = totalResponses.toLocaleString('th-TH');
}

// Update report table with real data
function updateReportTable() {
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = '';

    if (reportData.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted"><i class="bi bi-inbox"></i> ไม่มีข้อมูลรายงาน</td></tr>';
        return;
    }

    // Show only first 10 items initially
    const displayData = reportData.slice(0, 10);
    displayData.forEach(data => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><strong>${data.request_code || 'N/A'}</strong></td>
            <td>${data.agency_name || 'N/A'}</td>
            <td>${data.product_name || 'N/A'}</td>
            <td>${data.product_type || 'N/A'}</td>
            <td>${data.test_items || 'N/A'}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-outline-primary btn-sm" onclick="viewDetails(${data.service_id})" title="ดูรายละเอียดทั้งหมด">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-outline-info btn-sm" onclick="viewFilteredDetails(${data.service_id})" title="ดูตามตัวกรอง">
                        <i class="bi bi-funnel"></i>
                    </button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
    
    // Add "Show More" button
    if (reportData.length > 10) {
        const showMoreRow = document.createElement('tr');
        showMoreRow.innerHTML = `
            <td colspan="6" class="text-center">
                <button class="btn btn-outline-primary" onclick="showAllTableData()">
                    <i class="bi bi-arrow-down"></i> แสดงข้อมูลทั้งหมด (` + reportData.length + ` รายการ)
                </button>
            </td>
        `;
        tbody.appendChild(showMoreRow);
    }
}

// Show report error
function showReportError(message) {
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-danger"><i class="bi bi-exclamation-triangle"></i> ${message}</td></tr>`;
}

// Show all table data
function showAllTableData() {
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = '';

    reportData.forEach(data => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><strong>${data.request_code || 'N/A'}</strong></td>
            <td>${data.agency_name || 'N/A'}</td>
            <td>${data.product_name || 'N/A'}</td>
            <td>${data.product_type || 'N/A'}</td>
            <td>${data.test_items || 'N/A'}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-outline-primary btn-sm" onclick="viewDetails(${data.service_id})" title="ดูรายละเอียดทั้งหมด">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-outline-info btn-sm" onclick="viewFilteredDetails(${data.service_id})" title="ดูตามตัวกรอง">
                        <i class="bi bi-funnel"></i>
                    </button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
}

// View details function - Show survey history modal
function viewDetails(serviceId) {
    const data = reportData.find(item => item.service_id === serviceId);
    if (data) {
        // Store serviceId globally for use in cancel function
        window.currentServiceId = serviceId;
        
        // Update modal title and request code
        document.getElementById('modalRequestCode').textContent = data.request_code;
        
        // Load sent surveys (all surveys, no filter)
        loadSentSurveys(serviceId);
        
        // Show modal
        const surveyDetailModal = new bootstrap.Modal(document.getElementById('surveyDetailModal'));
        surveyDetailModal.show();
    }
}

// View filtered details function - Show only surveys matching current filters
function viewFilteredDetails(serviceId) {
    const data = reportData.find(item => item.service_id === serviceId);
    if (data) {
        // Store serviceId globally for use in cancel function
        window.currentServiceId = serviceId;
        
        // Get current filter values
        const surveyNameFilter = document.getElementById('surveyNameFilter').value.trim();
        const statusFilter = document.getElementById('statusFilter').value.trim();
        
        // Update modal title and request code
        document.getElementById('modalRequestCode').textContent = data.request_code;
        
        // Load filtered surveys
        loadFilteredSurveys(serviceId, surveyNameFilter, statusFilter);
        
        // Show modal
        const surveyDetailModal = new bootstrap.Modal(document.getElementById('surveyDetailModal'));
        surveyDetailModal.show();
    }
}

// Load sent surveys for the request (all surveys, no filter)
function loadSentSurveys(serviceId) {
    loadFilteredSurveys(serviceId, '', '');
}

// Load filtered surveys for the request
function loadFilteredSurveys(serviceId, surveyNameFilter = '', statusFilter = '') {
    const surveysList = document.getElementById('sentSurveysList');
    surveysList.innerHTML = '<div class="col-12 text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดข้อมูลแบบประเมิน...</div>';
    
    // Fetch real survey data from API
    fetch(`/admin/survey-details/${serviceId}`)
        .then(response => response.json())
        .then(data => {
            if (data.success && data.data.length > 0) {
                // Filter surveys based on current filter values
                let filteredSurveys = data.data;
                
                // Filter by survey name if specified
                if (surveyNameFilter) {
                    filteredSurveys = filteredSurveys.filter(survey => 
                        survey.Survey_Name && survey.Survey_Name.trim() === surveyNameFilter
                    );
                }
                
                // Filter by status if specified
                if (statusFilter) {
                    filteredSurveys = filteredSurveys.filter(survey => 
                        survey.status && survey.status.toLowerCase() === statusFilter.toLowerCase()
                    );
                }
                
                // If no surveys match the filter, show message
                if (filteredSurveys.length === 0) {
                    let filterMessage = 'ไม่มีแบบประเมินที่ตรงกับตัวกรองที่เลือก';
                    if (surveyNameFilter || statusFilter) {
                        filterMessage += ' (';
                        const filterParts = [];
                        if (surveyNameFilter) {
                            filterParts.push(`แบบประเมิน: ${surveyNameFilter}`);
                        }
                        if (statusFilter) {
                            const statusText = getStatusText(statusFilter);
                            filterParts.push(`สถานะ: ${statusText}`);
                        }
                        filterMessage += filterParts.join(', ') + ')';
                    }
                    
                    surveysList.innerHTML = `
                        <div class="col-12">
                            <div class="alert alert-info text-center">
                                <i class="bi bi-info-circle"></i> ${filterMessage}
                            </div>
                        </div>
                    `;
                    return;
                }
                
                // Process each survey to get correct max_score from response details
                const surveyPromises = filteredSurveys.map(survey => {
                    // ถ้ามี response_id ให้ดึงข้อมูล details เพื่อคำนวณ max_score ที่ถูกต้อง
                    if (survey.response_id && survey.status === 'completed') {
                        return fetch(`/admin/response-details/by-response/${survey.response_id}`)
                            .then(response => response.json())
                            .then(detailsData => {
                                // คำนวณ max_score จาก details
                                let calculatedMaxScore = 0;
                                if (detailsData.success && detailsData.data && detailsData.data.details) {
                                    const details = Array.isArray(detailsData.data.details) 
                                        ? detailsData.data.details 
                                        : Object.values(detailsData.data.details);
                                    
                                    details.forEach(detail => {
                                        if (detail.question_type === 'rating' && detail.max_score > 0) {
                                            calculatedMaxScore += detail.max_score;
                                        }
                                    });
                                }
                                
                                // ใช้ calculatedMaxScore ถ้ามีค่า ถ้าไม่มีใช้ max_score จาก backend
                                survey.calculated_max_score = calculatedMaxScore > 0 ? calculatedMaxScore : survey.max_score;
                                return survey;
                            })
                            .catch(error => {
                                console.warn('Error fetching response details for survey:', survey.Survey_ID, error);
                                // ถ้าไม่สามารถดึง details ได้ให้ใช้ max_score จาก backend
                                survey.calculated_max_score = survey.max_score;
                                return survey;
                            });
                    } else {
                        // ถ้ายังไม่มี response ใช้ max_score จาก backend
                        survey.calculated_max_score = survey.max_score;
                        return Promise.resolve(survey);
                    }
                });
                
                // รอให้ทุก promise เสร็จก่อนแสดงผล
                Promise.all(surveyPromises).then(surveys => {
                    // Show filter info if filters are applied
                    let filterInfoHtml = '';
                    if (surveyNameFilter || statusFilter) {
                        const filterParts = [];
                        if (surveyNameFilter) {
                            filterParts.push(`<span class="badge bg-primary">แบบประเมิน: ${surveyNameFilter}</span>`);
                        }
                        if (statusFilter) {
                            const statusText = getStatusText(statusFilter);
                            filterParts.push(`<span class="badge bg-info">สถานะ: ${statusText}</span>`);
                        }
                        filterInfoHtml = `
                            <div class="col-12 mb-3">
                                <div class="alert alert-light border">
                                    <i class="bi bi-funnel-fill"></i> <strong>แสดงเฉพาะ:</strong> ${filterParts.join(' ')}
                                    <span class="text-muted">(${surveys.length} รายการ)</span>
                                </div>
                            </div>
                        `;
                    }
                    
                    surveysList.innerHTML = filterInfoHtml + surveys.map(survey => `
                    <div class="col-md-6 mb-3">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-title">${survey.Survey_Name} 
                                <span class="badge bg-secondary">Version ${survey.survey_version || 1}</span></h6>

                                <p class="card-text text-muted">${survey.Survey_Description || 'ไม่มีคำอธิบาย'}</p>
                                <div class="row mb-2">
                                    <div class="col-6">
                                        <small class="text-muted">สถานะ: <span class="badge ${getStatusBadgeClass(survey.status)}">${getStatusText(survey.status)}</span></small>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted">ส่งเมื่อ: ${formatDate(survey.sent_date)}</small>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-6">
                                        <small class="text-primary">
                                            <i class="bi bi-person"></i> ผู้ตอบ: ${survey.respondent_name || 'ไม่ทราบชื่อ'}
                                        </small>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-success">
                                            <i class="bi bi-star"></i> คะแนน: ${survey.total_score && survey.calculated_max_score && !isNaN(survey.total_score) && !isNaN(survey.calculated_max_score) ? 
                                                `${parseFloat(survey.total_score).toFixed(0)}/${parseFloat(survey.calculated_max_score).toFixed(0)}` : '0/0'}
                                        </small>
                                    </div>
                                </div>
                                <div class="row mb-2">
                                    <div class="col-6">
                                        <small class="text-info">
                                            <i class="bi bi-tag"></i> Response ID: ${survey.response_id || 'N/A'}
                                        </small>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-warning">
                                            <i class="bi bi-hash"></i> Invitation ID: ${survey.Invitation_ID}
                                        </small>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    ${(survey.status === 'completed') ? 
                                        `<button class=\"btn btn-primary btn-sm\" onclick=\"viewResponseHistoryByResponse(${survey.response_id || 'null'}, '${survey.Survey_Name}', ${survey.Survey_ID}, ${survey.Customer_ID || 'null'}, ${survey.Invitation_ID})\">\n                                            <i class=\"bi bi-list-check\"></i> เรียกดู\n                                        </button>` :
                                        survey.status === 'sent' ?
                                        `<button class="btn btn-danger btn-sm" onclick="cancelSurveyInvitation(${survey.Invitation_ID}, '${survey.Survey_Name}')">\n                                            <i class="bi bi-x-circle"></i> ยกเลิกการส่งแบบประเมิน\n                                        </button>` :
                                        survey.status === 'cancelled' ?
                                        `<span class="text-danger"><i class="bi bi-x-circle"></i> ยกเลิกแล้ว</span>` :
                                        `<span class="text-muted">${survey.status === 'completed' ? 'ไม่มี Response ID' : 'ยังไม่เสร็จสิ้น'}</span>`
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');
                });
            } else {
                surveysList.innerHTML = `
                    <div class="col-12">
                        <div class="alert alert-info text-center">
                            <i class="bi bi-info-circle"></i> ไม่มีแบบประเมินที่ส่งสำหรับรหัสคำขอนี้
                        </div>
                    </div>
                `;
            }
        })
        .catch(error => {
            console.error('Error loading survey details:', error);
            surveysList.innerHTML = `
                <div class="col-12">
                    <div class="alert alert-danger text-center">
                        <i class="bi bi-exclamation-triangle"></i> เกิดข้อผิดพลาดในการโหลดข้อมูลแบบประเมิน
                    </div>
                </div>
            `;
        });
}

// Helper functions
function getStatusBadgeClass(status) {
    switch(status) {
        case 'completed': return 'bg-success';
        case 'sent': return 'bg-primary';
        case 'expired': return 'bg-warning';
        case 'cancelled': return 'bg-danger';
        default: return 'bg-secondary';
    }
}

function getStatusText(status) {
    switch(status) {
        case 'completed': return 'เสร็จสิ้น';
        case 'sent': return 'รอตอบ';
        case 'expired': return 'หมดอายุ';
        case 'cancelled': return 'ยกเลิกแล้ว';
        default: return 'ไม่ทราบ';
    }
}

function formatDate(dateString) {
    if (!dateString) return 'ไม่ทราบ';
    const date = new Date(dateString);
    return date.toLocaleDateString('th-TH');
}

// View response history using Response_ID (แม่นยำสุด)
function viewResponseHistoryByResponse(responseId, surveyName, surveyId, customerId, invitationId) {
    // Update modal title
    document.getElementById('modalSurveyName').textContent = surveyName;
    
    // Load response history with robust fallback
    loadResponseHistoryWithFallback(responseId, surveyId, customerId, invitationId);
    
    // Close current modal and show response modal
    const surveyDetailModal = bootstrap.Modal.getInstance(document.getElementById('surveyDetailModal'));
    surveyDetailModal.hide();
    
    const surveyResponseDetailModal = new bootstrap.Modal(document.getElementById('surveyResponseDetailModal'));
    surveyResponseDetailModal.show();
    
}

// Load response history with fallback chain: by-response -> by-invitation -> by-survey+customer
function loadResponseHistoryWithFallback(responseId, surveyId, customerId, invitationId) {
    const tbody = document.getElementById('responseDetailTableBody');
    tbody.innerHTML = '<tr><td colspan="5" class="text-center"><i class="bi bi-hourglass-split"></i> กำลังโหลดข้อมูล...</td></tr>';
    
    // Helper to render
    const renderData = (data) => {
        // Log เฉพาะเมื่อสำเร็จ หรือเมื่อจำเป็นสำหรับ debug
        if (data && data.success) {
            console.log('response-details payload (success):', data);
        } else if (data && !data.success) {
            // Log เฉพาะเมื่อไม่สำเร็จ (สำหรับ debug fallback chain)
            console.warn('response-details payload (failed):', data.message || 'Unknown error');
        }
        
        if (!data) {
            console.error('No data received');
            return false;
        }
        if (!data.success) {
            // ไม่ต้อง log error อีกครั้ง เพราะ log ไว้ข้างบนแล้ว
            return false;
        }
        if (!data.data) {
            console.error('No data.data in response');
            return false;
        }
        
        // ตรวจสอบว่า details เป็น array หรือ object
        let details = [];
        if (data.data.details) {
            if (Array.isArray(data.data.details)) {
                details = data.data.details;
            } else if (typeof data.data.details === 'object') {
                // ถ้าเป็น object ให้แปลงเป็น array
                details = Object.values(data.data.details);
            }
        }
        console.log('details array:', details, 'length:', details.length, 'original:', data.data.details);
        
        tbody.innerHTML = '';
        
        // ถ้าไม่มี details ให้แสดงข้อความ ไม่ใช่ return false
        if (details.length === 0) {
            console.warn('No details found in response');
            const emptyRow = document.createElement('tr');
            emptyRow.innerHTML = `
                <td colspan="5" class="text-center text-muted">
                    <i class="bi bi-info-circle"></i> ไม่มีรายละเอียดคำตอบสำหรับรายการนี้
                </td>
            `;
            tbody.appendChild(emptyRow);
            
            // แสดงข้อมูล response ถ้ามี
            if (data.data && data.data.response) {
                const responseRow = document.createElement('tr');
                responseRow.className = 'table-info';
                responseRow.innerHTML = `
                    <td colspan="5" class="text-center">
                        <small>Response ID: ${data.data.response.Response_ID || 'N/A'}</small>
                    </td>
                `;
                tbody.appendChild(responseRow);
            }
            return true; // Return true เพื่อบอกว่า render สำเร็จ แม้จะไม่มี details
        }
                
                // คำนวณคะแนนรวม (เฉพาะ rating เท่านั้น)
                let totalScore = 0;
                let totalMaxScore = 0;
                
        details.forEach((detail, index) => {
                    const row = document.createElement('tr');
                    let scoreDisplay = '0/0';
                    if (detail.question_type === 'rating' && detail.max_score > 0) {
                        const currentScore = detail.score && !isNaN(detail.score) ? parseFloat(detail.score) : 0;
                        scoreDisplay = `${currentScore}/${detail.max_score}`;
                        totalScore += currentScore;
                        totalMaxScore += detail.max_score;
                    } else {
                        scoreDisplay = '-';
                    }
                    row.innerHTML = `
                        <td>${index + 1}</td>
                        <td>${detail.question_text || 'ไม่มีคำถาม'}</td>
                        <td>${detail.answer_choice || detail.answer_text || 'ไม่มีคำตอบ'}</td>
                        <td><strong>${scoreDisplay}</strong></td>
                        <td>${detail.notes || ''}</td>
                    `;
                    tbody.appendChild(row);
                });
                
                const totalRow = document.createElement('tr');
                totalRow.className = 'table-info fw-bold';
                totalRow.innerHTML = `
                    <td colspan="3" class="text-end">
                        <i class="bi bi-calculator"></i> <strong>คะแนนรวม : </strong>
                    </td>
                    <td><strong>${totalScore}/${totalMaxScore}</strong></td>
                    <td></td>
                `;
                tbody.appendChild(totalRow);
                
        if (data.data && data.data.response && data.data.response.feedback) {
                    const feedbackRow = document.createElement('tr');
                    feedbackRow.className = 'table-warning';
                    feedbackRow.innerHTML = `
                        <td colspan="4" class="text-center">
                            <i class="bi bi-chat-text"></i> <strong>ข้อเสนอแนะ:</strong>
                        </td>
                        <td class="text-start">${data.data.response.feedback}</td>
                    `;
                    tbody.appendChild(feedbackRow);
                }
        return true;
    };
                
    const showNoData = () => {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="5" class="text-center text-muted">
                            <i class="bi bi-info-circle"></i> ไม่มีข้อมูลการตอบแบบประเมิน
                        </td>
                    </tr>
                `;
    };

    // ลบ tryBySurveyCustomer() ออกเพราะมันจะดึง Response ล่าสุดแทน Response ที่ต้องการ
    // ถ้าไม่มี responseId และ invitationId แล้ว แสดงว่าไม่มีข้อมูล

    const tryByInvitation = () => {
        if (surveyId && invitationId) {
            fetch(`/admin/response-details/by-invitation/${surveyId}/${invitationId}`)
                .then(r => r.json())
                .then(d => { if (!renderData(d)) showNoData(); })
                .catch(() => showNoData());
        } else {
            showNoData();
        }
    };

    // เรียงลำดับ: by-response (แม่นยำสุด) -> by-invitation (fallback)
    if (responseId) {
        // ถ้ามี responseId ให้ใช้ by-response (แม่นยำสุด)
        fetch(`/admin/response-details/by-response/${responseId}`)
            .then(r => r.json())
            .then(d => { 
                if (!renderData(d)) {
                    // ถ้า by-response ไม่สำเร็จ และมี invitationId ให้ลอง by-invitation
                    if (surveyId && invitationId) {
                        tryByInvitation();
                    } else {
                        showNoData();
                    }
                }
            })
            .catch(() => {
                // ถ้า by-response error และมี invitationId ให้ลอง by-invitation
                if (surveyId && invitationId) {
                    tryByInvitation();
                } else {
                    showNoData();
                }
            });
    } else if (surveyId && invitationId) {
        // ถ้าไม่มี responseId แต่มี invitationId ให้ลอง by-invitation
        tryByInvitation();
    } else {
        // ถ้าไม่มี responseId และ invitationId แล้ว แสดงว่าไม่มีข้อมูล
        showNoData();
    }
}

// Cancel survey invitation
function cancelSurveyInvitation(invitationId, surveyName) {
    if (confirm(`คุณแน่ใจหรือไม่ที่จะยกเลิกการส่งแบบประเมิน "${surveyName}"?\n\nการยกเลิกนี้จะไม่สามารถกู้คืนได้`)) {
        // Show loading state
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="bi bi-hourglass-split"></i> กำลังยกเลิก...';
        button.disabled = true;
        
        // Send cancel request to API
        fetch(`/admin/cancel-survey-invitation/${invitationId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('ยกเลิกการส่งแบบประเมินเรียบร้อยแล้ว');
                // Reload the survey list
                const serviceId = window.currentServiceId; // You might need to store this
                if (serviceId) {
                    loadSentSurveys(serviceId);
                }
            } else {
                alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถยกเลิกการส่งแบบประเมินได้'));
            }
        })
        .catch(error => {
            console.error('Error canceling survey invitation:', error);
            alert('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
        })
        .finally(() => {
            // Reset button state
            button.innerHTML = originalText;
            button.disabled = false;
        });
    }
}

// Go back to survey details modal
function goBackToSurveyDetails() {
    // Close current modal (Survey Response Detail Modal)
    const surveyResponseDetailModal = bootstrap.Modal.getInstance(document.getElementById('surveyResponseDetailModal'));
    surveyResponseDetailModal.hide();
    
    // Show Survey Detail Modal
    const surveyDetailModal = new bootstrap.Modal(document.getElementById('surveyDetailModal'));
    surveyDetailModal.show();
}

// View response detail
function viewResponseDetail(responseId) {
    alert(`ดูรายละเอียดการตอบ ID: ${responseId}\n\n` +
          `ในระบบจริงจะแสดง:\n` +
          `- คำถามและคำตอบแต่ละข้อ\n` +
          `- คะแนนแต่ละคำถาม\n` +
          `- ข้อคิดเห็นเพิ่มเติม\n` +
          `- ข้อมูลผู้ตอบ`);
}

// Get badge class based on level
function getLevelBadgeClass(level) {
    switch(level) {
        case 'ดีเยี่ยม': return 'bg-success';
        case 'ดี': return 'bg-primary';
        case 'ปานกลาง': return 'bg-warning';
        case 'ต้องปรับปรุง': return 'bg-danger';
        default: return 'bg-secondary';
    }
}

// Apply filters
function applyFilters() {
    const searchTerm = document.getElementById('searchFilter').value.trim();
    
    console.log('Applying search filter:', searchTerm);
    
    // Filter the data based on the search term
    filterReportData();
}

// Filter report data based on search criteria
function filterReportData() {
    const searchTerm = document.getElementById('searchFilter').value.trim().toLowerCase();
    const surveyNameFilter = document.getElementById('surveyNameFilter').value.trim().toLowerCase();
    const statusFilter = document.getElementById('statusFilter').value.trim().toLowerCase();
    
    // Filter the data - search across all fields
    const filteredData = reportData.filter(data => {
        // Filter 1: ค้นหาจากข้อมูลพื้นฐาน (รหัสคำขอ, หน่วยงาน, ผลิตภัณฑ์, ฯลฯ)
        let matchesBasicSearch = true;
        if (searchTerm) {
            const requestCode = (data.request_code || '').toLowerCase();
            const agencyName = (data.agency_name || '').toLowerCase();
            const productName = (data.product_name || '').toLowerCase();
            const productType = (data.product_type || '').toLowerCase();
            const testItems = (data.test_items || '').toLowerCase();
            
            matchesBasicSearch = requestCode.includes(searchTerm) ||
                                agencyName.includes(searchTerm) ||
                                productName.includes(searchTerm) ||
                                productType.includes(searchTerm) ||
                                testItems.includes(searchTerm);
        }
        
        // Filter 2: ค้นหาจากชื่อแบบประเมิน (exact match เพราะเป็น dropdown)
        let matchesSurveyName = true;
        if (surveyNameFilter) {
            const surveyNames = data.survey_names || [];
            matchesSurveyName = surveyNames.some(name => 
                name && name.toLowerCase() === surveyNameFilter
            );
        }
        
        // Filter 3: ค้นหาจากสถานะ
        let matchesStatus = true;
        if (statusFilter) {
            const statuses = data.statuses || [];
            matchesStatus = statuses.some(status => 
                status && status.toLowerCase() === statusFilter
            );
        }
        
        // ต้องตรงกับทุกเงื่อนไขที่ระบุ
        return matchesBasicSearch && matchesSurveyName && matchesStatus;
    });
    
    // Update table with filtered data
    updateReportTableWithData(filteredData);
    
    // Update statistics with filtered data
    updateStatisticsWithData(filteredData);
}

// Update statistics with specific data
function updateStatisticsWithData(data) {
    let totalSurveysSent = 0;
    let totalResponses = 0;
    
    data.forEach(item => {
        totalSurveysSent += item.surveys_sent || 0;
        totalResponses += item.responses || 0;
    });
    
    document.getElementById('totalSurveysSent').textContent = totalSurveysSent.toLocaleString('th-TH');
    document.getElementById('totalResponses').textContent = totalResponses.toLocaleString('th-TH');
}

// Update report table with specific data
function updateReportTableWithData(data) {
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = '';

    if (data.length === 0) {
        tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted"><i class="bi bi-search"></i> ไม่พบข้อมูลที่ตรงกับเงื่อนไขการค้นหา</td></tr>';
        return;
    }

    // Show only first 10 items initially
    const displayData = data.slice(0, 10);
    displayData.forEach(data => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><strong>${data.request_code || 'N/A'}</strong></td>
            <td>${data.agency_name || 'N/A'}</td>
            <td>${data.product_name || 'N/A'}</td>
            <td>${data.product_type || 'N/A'}</td>
            <td>${data.test_items || 'N/A'}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-outline-primary btn-sm" onclick="viewDetails(${data.service_id})" title="ดูรายละเอียดทั้งหมด">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-outline-info btn-sm" onclick="viewFilteredDetails(${data.service_id})" title="ดูตามตัวกรอง">
                        <i class="bi bi-funnel"></i>
                    </button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
    
    // Add "Show More" button if there are more than 10 items
    if (data.length > 10) {
        const showMoreRow = document.createElement('tr');
        showMoreRow.innerHTML = `
            <td colspan="6" class="text-center">
                <button class="btn btn-outline-primary" onclick="showAllFilteredData()">
                    <i class="bi bi-arrow-down"></i> แสดงข้อมูลทั้งหมด (` + data.length + ` รายการ)
                </button>
            </td>
        `;
        tbody.appendChild(showMoreRow);
    }
}

// Show all filtered data
function showAllFilteredData() {
    const searchTerm = document.getElementById('searchFilter').value.trim().toLowerCase();
    const surveyNameFilter = document.getElementById('surveyNameFilter').value.trim().toLowerCase();
    const statusFilter = document.getElementById('statusFilter').value.trim().toLowerCase();
    
    // ถ้าไม่มี filter ใดๆ ให้แสดงข้อมูลทั้งหมด
    if (!searchTerm && !surveyNameFilter && !statusFilter) {
        showAllTableData();
        return;
    }
    
    // Filter the data - search across all fields
    const filteredData = reportData.filter(data => {
        // Filter 1: ค้นหาจากข้อมูลพื้นฐาน
        let matchesBasicSearch = true;
        if (searchTerm) {
            const requestCode = (data.request_code || '').toLowerCase();
            const agencyName = (data.agency_name || '').toLowerCase();
            const productName = (data.product_name || '').toLowerCase();
            const productType = (data.product_type || '').toLowerCase();
            const testItems = (data.test_items || '').toLowerCase();
            
            matchesBasicSearch = requestCode.includes(searchTerm) ||
                                agencyName.includes(searchTerm) ||
                                productName.includes(searchTerm) ||
                                productType.includes(searchTerm) ||
                                testItems.includes(searchTerm);
        }
        
        // Filter 2: ค้นหาจากชื่อแบบประเมิน (exact match เพราะเป็น dropdown)
        let matchesSurveyName = true;
        if (surveyNameFilter) {
            const surveyNames = data.survey_names || [];
            matchesSurveyName = surveyNames.some(name => 
                name && name.toLowerCase() === surveyNameFilter
            );
        }
        
        // Filter 3: ค้นหาจากสถานะ
        let matchesStatus = true;
        if (statusFilter) {
            const statuses = data.statuses || [];
            matchesStatus = statuses.some(status => 
                status && status.toLowerCase() === statusFilter
            );
        }
        
        // ต้องตรงกับทุกเงื่อนไขที่ระบุ
        return matchesBasicSearch && matchesSurveyName && matchesStatus;
    });
    
    // Show all filtered data
    const tbody = document.getElementById('reportTableBody');
    tbody.innerHTML = '';

    filteredData.forEach(data => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><strong>${data.request_code || 'N/A'}</strong></td>
            <td>${data.agency_name || 'N/A'}</td>
            <td>${data.product_name || 'N/A'}</td>
            <td>${data.product_type || 'N/A'}</td>
            <td>${data.test_items || 'N/A'}</td>
            <td>
                <div class="btn-group" role="group">
                    <button class="btn btn-outline-primary btn-sm" onclick="viewDetails(${data.service_id})" title="ดูรายละเอียดทั้งหมด">
                        <i class="bi bi-eye"></i>
                    </button>
                    <button class="btn btn-outline-info btn-sm" onclick="viewFilteredDetails(${data.service_id})" title="ดูตามตัวกรอง">
                        <i class="bi bi-funnel"></i>
                    </button>
                </div>
            </td>
        `;
        tbody.appendChild(row);
    });
}

// Clear all filters
function clearFilters() {
    document.getElementById('searchFilter').value = '';
    document.getElementById('surveyNameFilter').value = '';
    document.getElementById('statusFilter').value = '';
    
    // Reset to show all data
    updateReportTableWithData(reportData);
    updateStatistics();
}

// Export functions
function exportToExcel() {
    // แสดง loading
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i> กำลังส่งออก...';
    
    // ตรวจสอบว่าเลือกแบบประเมินใน dropdown หรือไม่
    const surveySelect = document.getElementById('surveySelect');
    let exportUrl = '/admin/export-excel';
    const params = [];
    
    if (surveySelect && surveySelect.value) {
        const selectedValue = surveySelect.value; // format: "Survey_ID_version"
        const [surveyId, surveyVersion] = selectedValue.split('_');
        
        if (surveyId && surveyVersion) {
            params.push(`survey_id=${surveyId}`);
            params.push(`survey_version=${surveyVersion}`);
        } else if (surveyId) {
            params.push(`survey_id=${surveyId}`);
        }
    }
    
    // เพิ่มปีที่เลือก (ถ้ามีการเลือกปี)
    if (years.length > 0 && currentYearIndex >= 0 && currentYearIndex < years.length) {
        const currentYear = years[currentYearIndex];
        params.push(`year=${currentYear}`);
    }
    
    // สร้าง URL พร้อม parameters
    if (params.length > 0) {
        exportUrl += '?' + params.join('&');
    }
    
    // ดาวน์โหลดไฟล์ Excel
    window.location.href = exportUrl;
    
    // รอสักครู่แล้วคืนสถานะปุ่ม
    setTimeout(() => {
        btn.disabled = false;
        btn.innerHTML = originalText;
    }, 2000);
}

function exportToPDF() {
    alert('กำลังส่งออกข้อมูลเป็น PDF...');
    // Here you would implement PDF export functionality
}

// Clear date range function
function clearDateRange() {
    document.getElementById('dateStart').value = '';
    document.getElementById('dateEnd').value = '';
    // โหลดกราฟใหม่เมื่อล้างช่วงวันที่
    const surveySelect = document.getElementById('surveySelect');
    if (surveySelect && surveySelect.value) {
        loadQuestionChart();
    }
}

// Initialize page
document.addEventListener('DOMContentLoaded', function() {
    initializeCharts();
    
    // Add real-time search functionality for basic search
    const searchInput = document.getElementById('searchFilter');
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            // Debounce the search to avoid too many calls
            clearTimeout(window.searchTimeout);
            window.searchTimeout = setTimeout(() => {
                filterReportData();
            }, 300);
        });
    }
    
    // Add change event for survey name filter (dropdown)
    const surveyNameFilter = document.getElementById('surveyNameFilter');
    if (surveyNameFilter) {
        surveyNameFilter.addEventListener('change', function() {
            filterReportData();
        });
    }
    
    // Add change event for status filter
    const statusFilter = document.getElementById('statusFilter');
    if (statusFilter) {
        statusFilter.addEventListener('change', function() {
            filterReportData();
        });
    }
});
</script>
@endsection