@extends('admin.dashboard')

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-question-circle"></i> จัดการแบบประเมิน</h2>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSurveyModal">
        <i class="bi bi-plus-circle"></i> สร้างแบบประเมินใหม่
    </button>
</div>

<!-- Statistics Cards -->
<div class="row mb-4 justify-content-center">
    <div class="col-md-6">
        <div class="card stat-card ">
            <div class="card-body text-center">
                <h3 class="card-title">{{ $surveys->count() }}</h3>
                <p class="card-text">แบบประเมินทั้งหมด</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card stat-card ">
            <div class="card-body text-center">
                <h3 class="card-title">{{ $surveys->where('status', 'active')->count() }}</h3>
                <p class="card-text">แบบประเมินที่ใช้งาน</p>
            </div>
        </div>
    </div>
</div>


<!-- Surveys Table -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">รายการแบบประเมิน</h5>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th class="text-center">ลำดับ</th>
                        <th class="text-center">ชื่อแบบประเมิน</th>
                        <th class="text-center">เวอร์ชัน</th>
                        <th class="text-center">คำถาม</th>
                        <th class="text-center">ผู้ตอบ</th>
                        <th class="text-center">ส่งให้</th>
                        <th class="text-center">สถานะ</th>
                        <th class="text-center">วันที่สร้าง</th>
                        <th class="text-center">วันที่แก้ไข</th>
                        <th class="text-center">จัดการ</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($surveys as $index => $survey)
                    <tr>
                        <td class="text-center">{{ $index + 1 }}</td>
                        <td >
                            <strong>{{ $survey->Survey_Name }}</strong>
                            @if($survey->Survey_Description)
                                <br><small class="text-muted">{{ $survey->Survey_Description }}</small>
                            @endif
                        </td>
                        <td class="text-center">
                            <span class="text-black">{{ $survey->survey_version ?? 1 }}</span>
                        </td>
                        <td class="text-center"><span class="text-black">{{ $survey->questions->count() }} คำถาม</span></td>
                        <td class="text-center">
                            @if($survey->response_count > 0)
                                <span class="text-black">{{ $survey->response_count }} คน</span>
                            @else
                                <span class="text-black">0 คน</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($survey->invitation_count > 0)
                                <span class="text-black">{{ $survey->invitation_count }} คน</span>
                            @else
                                <span class="text-black">ยังไม่ส่ง</span>
                            @endif
                        </td>
                        <td class="text-center">
                            @if($survey->status == 'active')
                                <span class="badge bg-success">ใช้งาน</span>
                            @elseif($survey->status == 'draft')
                                <span class="badge bg-warning">ร่าง</span>
                            @else
                                <span class="badge bg-secondary">ไม่ใช้งาน</span>
                            @endif
                        </td>
                        <td class="text-center">{{ $survey->DtmIns->copy()->addYears(543)->format('d/m/Y') }}</td>
                        <td class="text-center">{{ $survey->DtmUdp->copy()->addYears(543)->format('d/m/Y')}}</td>
                        <td class="text-center">
                            <div class="btn-group" role="group">
                                <button class="btn btn-sm btn-outline-primary" title="แก้ไข" onclick="editSurvey({{ $survey->Survey_ID }})">
                                    <i class="bi bi-pencil"></i>
                                </button>

                                <button class="btn btn-sm btn-outline-info" title="ดูเวอร์ชัน" onclick="viewVersions({{ $survey->Survey_ID }})">
                                    <i class="bi bi-clock-history"></i>
                                </button>

                                <button class="btn btn-sm btn-outline-warning" title="อัปเดตเวอร์ชัน" onclick="incrementVersion({{ $survey->Survey_ID }}, this)">
                                    <i class="bi bi-arrow-repeat"></i>
                                </button>

                                <button class="btn btn-sm btn-outline-danger" title="ลบ" onclick="deleteSurvey({{ $survey->Survey_ID }})">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="12" class="text-center text-muted py-4">
                            <i class="bi bi-inbox"></i> ยังไม่มีแบบประเมิน
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Create Survey Modal -->
<div class="modal fade" id="createSurveyModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">สร้างแบบประเมินใหม่</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="createSurveyForm">
                    <!-- Survey Basic Info -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary"><i class="bi bi-info-circle"></i> ข้อมูลแบบประเมิน</h6>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="surveyName" class="form-label">ชื่อแบบประเมิน</label>
                                <input type="text" class="form-control" id="surveyName" placeholder="กรุณากรอกชื่อแบบประเมิน" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="surveyStatus" class="form-label">สถานะ</label>
                                <select class="form-select" id="surveyStatus">
                                    <option value="draft">ร่าง</option>
                                    <option value="active">ใช้งาน</option>
                                    <option value="inactive">ไม่ใช้งาน</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="surveyDescription" class="form-label">คำอธิบาย</label>
                                <textarea class="form-control" id="surveyDescription" rows="3" placeholder="กรุณากรอกคำอธิบายแบบประเมิน"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="hasSuggestions" checked>
                                <label class="form-check-label" for="hasSuggestions">
                                    <strong>ต้องการข้อเสนอแนะ</strong>
                                    <small class="text-muted d-block">แสดงช่องข้อเสนอแนะให้ผู้ตอบกรอก</small>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Questions Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="text-primary"><i class="bi bi-question-circle"></i> คำถามในแบบประเมิน</h6>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="addQuestionBtn">
                                    <i class="bi bi-plus-circle"></i> เพิ่มคำถาม
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Questions Container -->
                    <div id="questionsContainer">
                        <!-- Questions will be added here dynamically -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                <button type="button" class="btn btn-primary" id="saveSurveyBtn">สร้างแบบประเมิน</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Survey Modal -->
<div class="modal fade" id="editSurveyModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">แก้ไขแบบประเมิน</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editSurveyForm">
                    <input type="hidden" id="editSurveyId">
                    <!-- Survey Basic Info -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary"><i class="bi bi-info-circle"></i> ข้อมูลแบบประเมิน</h6>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editSurveyName" class="form-label">ชื่อแบบประเมิน</label>
                                <input type="text" class="form-control" id="editSurveyName" placeholder="กรุณากรอกชื่อแบบประเมิน" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="editSurveyStatus" class="form-label">สถานะ</label>
                                <select class="form-select" id="editSurveyStatus">
                                    <option value="draft">ร่าง</option>
                                    <option value="active">ใช้งาน</option>
                                    <option value="inactive">ไม่ใช้งาน</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="mb-3">
                                <label for="editSurveyDescription" class="form-label">คำอธิบาย</label>
                                <textarea class="form-control" id="editSurveyDescription" rows="3" placeholder="กรุณากรอกคำอธิบายแบบประเมิน"></textarea>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="editHasSuggestions">
                                <label class="form-check-label" for="editHasSuggestions">
                                    <strong>ต้องการข้อเสนอแนะ</strong>
                                    <small class="text-muted d-block">แสดงช่องข้อเสนอแนะให้ผู้ตอบกรอก</small>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Questions Section -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="text-primary"><i class="bi bi-question-circle"></i> คำถามในแบบประเมิน</h6>
                                <button type="button" class="btn btn-outline-primary btn-sm" id="addEditQuestionBtn" style="display: none;">
                                    <i class="bi bi-plus-circle"></i> เพิ่มคำถาม
                                </button>
                            </div>
                            <div id="editModeRestriction" class="alert alert-info" style="display: none;">
                                <i class="bi bi-info-circle"></i> <strong>หมายเหตุ:</strong> การแก้ไขแบบประเมินปกติไม่อนุญาตให้ลบ/เพิ่มคำถาม, เปลี่ยนประเภทคำถาม, เพิ่ม/ลบตัวเลือก rating และ multiple_choice,เปลี่ยนข้อบังคับของคำถาม
                            </div>
                        </div>
                    </div>

                    <!-- Edit Questions Container -->
                    <div id="editQuestionsContainer">
                        <!-- Questions will be loaded here dynamically -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                <button type="button" class="btn btn-primary" id="updateSurveyBtn">บันทึกการแก้ไข</button>
            </div>
        </div>
    </div>
</div>

<!-- Version History Modal -->
<div class="modal fade" id="versionHistoryModal" tabindex="-1" aria-labelledby="versionHistoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="versionHistoryModalLabel">
                    <i class="bi bi-clock-history"></i> ประวัติเวอร์ชันแบบประเมิน
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="versionHistoryLoading" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">กำลังโหลด...</span>
                    </div>
                    <p class="mt-2 text-muted">กำลังโหลดประวัติเวอร์ชัน...</p>
                </div>
                <div id="versionHistoryContent" style="display: none;">
                    <h6 class="mb-3" id="versionHistorySurveyName"></h6>
                    <div class="list-group" id="versionsList">
                        <!-- Versions will be loaded here -->
                    </div>
                </div>
                <div id="versionHistoryError" style="display: none;" class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i> <span id="versionHistoryErrorMessage"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
            </div>
        </div>
    </div>
</div>

<!-- Version Detail Modal -->
<div class="modal fade" id="versionDetailModal" tabindex="-1" aria-labelledby="versionDetailModalLabel" 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="versionDetailModalLabel">
                    <i class="bi bi-file-text"></i> รายละเอียดเวอร์ชัน
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="versionDetailLoading" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">กำลังโหลด...</span>
                    </div>
                    <p class="mt-2 text-muted">กำลังโหลดรายละเอียดเวอร์ชัน...</p>
                </div>
                <div id="versionDetailContent" style="display: none;">
                    <!-- Version Info -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-body">
                                    <h6 class="text-primary mb-3">
                                        <i class="bi bi-info-circle"></i> ข้อมูลเวอร์ชัน
                                    </h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>เวอร์ชัน:</strong> <span id="versionNumber" class="badge bg-secondary"></span></p>
                                            <p class="mb-2"><strong>วันที่สร้าง:</strong> <span id="versionDate"></span></p>
                                            <p class="mb-2"><strong>สถานะ:</strong> <span id="versionStatusBadge"></span></p>
                                        </div>
                                        <div class="col-md-6">
                                            <p class="mb-2"><strong>ชื่อแบบประเมิน:</strong> <span id="versionName"></span></p>
                                            <p class="mb-2"><strong>คำอธิบาย:</strong> <span id="versionDescription"></span></p>
                                            <p class="mb-2"><strong>มีข้อเสนอแนะ:</strong> <span id="versionHasSuggestions"></span></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Questions List -->
                    <div class="row mb-4">
                        <div class="col-12">
                            <h6 class="text-primary mb-3">
                                <i class="bi bi-question-circle"></i> คำถาม (<span id="versionQuestionsCount">0</span> คำถาม)
                            </h6>
                            <div id="versionQuestionsList" class="list-group">
                                <!-- Questions will be loaded here -->
                            </div>
                        </div>
                    </div>
                </div>
                <div id="versionDetailError" style="display: none;" class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle"></i> <span id="versionDetailErrorMessage"></span>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ปิด</button>
            </div>
        </div>
    </div>
</div>

<!-- Question Template (Hidden) -->
<template id="questionTemplate">
    <div class="question-item card mb-3" data-question-index="">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">คำถาม <span class="question-number">1</span></h6>
                <div>
                    <button type="button" class="btn btn-sm btn-outline-secondary move-up" title="ย้ายขึ้น">
                        <i class="bi bi-arrow-up"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary move-down" title="ย้ายลง">
                        <i class="bi bi-arrow-down"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger remove-question" title="ลบคำถาม">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="mb-3">
                        <label class="form-label">ข้อความคำถาม</label>
                        <textarea class="form-control question-text" rows="2" placeholder="กรุณากรอกคำถาม..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">ข้อความช่วยเหลือ</label>
                        <textarea class="form-control question-help" rows="2" placeholder="กรุณากรอกข้อความช่วยเหลือ..."></textarea>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">ประเภทคำถาม</label>
                        <select class="form-select question-type">
                            <option value="rating">Rating</option>
                            <option value="multiple_choice">ตัวเลือกหลายข้อ</option>
                            <option value="yes_no">ใช่/ไม่ใช่</option>
                            <option value="text">ข้อความ</option>
                        </select>
                    </div>
                </div>
            </div>
            
            <!-- Options Container (for multiple choice, rating, etc.) -->
            <div class="options-container" style="display: none;">
                
                
                <!-- Rating Options Count Input (only for rating type) -->
                <div class="rating-count-container" style="display: none;">
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label class="form-label">จำนวนตัวเลือก Rating</label>
                            <input type="number" class="form-control rating-count" min="2" max="10" placeholder="เช่น 4">
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-outline-success btn-sm generate-rating-options" style="margin-top: 32px;">
                                <i class="bi bi-gear"></i> สร้างตัวเลือก Rating
                            </button>
                        </div>
                    </div>
                </div>
                
                <div class="options-list">
                    <!-- Options will be added here dynamically -->
                </div>
                <button type="button" class="btn btn-outline-success btn-sm add-option mb-3" id="add-option-btn" style="display: none;">เพิ่มตัวเลือก</button>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-check">
                         <input class="form-check-input question-required" type="checkbox" id="questionRequired{{ $index ?? '' }}" checked>
                         <label class="form-check-label" for="questionRequired{{ $index ?? '' }}">
                            คำถามบังคับ
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
console.log('JavaScript loaded successfully');
let questionIndex = 0;

// Add question button
document.getElementById('addQuestionBtn').addEventListener('click', function() {
    console.log('Add question button clicked');
    addQuestion();
});

// Add question function
function addQuestion() {
    // Clear any existing questions from previous surveys first
    const existingQuestions = document.querySelectorAll('.question-item');
    existingQuestions.forEach(question => {
        if (!question.closest('#createSurveyModal')) {
            question.remove();
        }
    });
    
    questionIndex++;
    const template = document.getElementById('questionTemplate');
    const clone = template.content.cloneNode(true);
    
    // Set question number
    clone.querySelector('.question-number').textContent = questionIndex;
    clone.querySelector('.question-item').setAttribute('data-question-index', questionIndex);
    
    // Set unique ID for checkbox
    const checkbox = clone.querySelector('.question-required');
    const label = clone.querySelector('.form-check-label');
    if (checkbox && label) {
        const uniqueId = `questionRequired${questionIndex}`;
        checkbox.id = uniqueId;
        label.setAttribute('for', uniqueId);
    }
    
    // Add to container
    document.getElementById('questionsContainer').appendChild(clone);
    
    // Add event listeners for the new question
    addQuestionEventListeners(questionIndex);
    
    // Trigger change event for default rating type to show rating count input
    const questionItem = document.querySelector(`[data-question-index="${questionIndex}"]`);
    if (questionItem) {
    const questionTypeSelect = questionItem.querySelector('.question-type');
        if (questionTypeSelect && questionTypeSelect.value === 'rating') {
        const event = new Event('change');
        questionTypeSelect.dispatchEvent(event);
        }
    }

    updateQuestionNumbers();
}

// Generate rating options function
function generateRatingOptions(questionItem) {
    const optionsList = questionItem.querySelector('.options-list');
    const ratingCount = questionItem.querySelector('.rating-count').value;
    
    if (!ratingCount || ratingCount < 2) {
        alert('กรุณากรอกจำนวนตัวเลือก Rating อย่างน้อย 2 ตัวเลือก');
        return;
    }
    
    optionsList.innerHTML = '';
    
    // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
    const isCreateModal = questionItem.closest('#createSurveyModal');
    const isVersionUpdate = !!window.editVersionMode;
    // แสดงปุ่มลบถ้าอยู่ใน modal สร้างใหม่หรือเป็น version update
    const removeButtonStyle = (isCreateModal || isVersionUpdate) ? '' : 'style="display: none;"';
    
    for (let i = 1; i <= ratingCount; i++) {
        const optionDiv = document.createElement('div');
        optionDiv.className = 'input-group mb-2 option-item';
        optionDiv.innerHTML = `
            <span class="input-group-text bg-light">คะแนน: ${i}</span>
            <input type="text" class="form-control" placeholder="กรอกข้อความสำหรับตัวเลือก ${i}" value="">
            <input type="hidden" value="${i}">
            <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyle}>ลบ</button>
        `;
        optionsList.appendChild(optionDiv);
    }
    
    // เรียก applyEditModeRestrictions เพื่อตั้งค่า restrictions (เฉพาะใน modal แก้ไข)
    if (!isCreateModal && !isVersionUpdate) {
        setTimeout(() => {
            applyEditModeRestrictions();
        }, 50);
    }
}

// Event delegation for generate rating options button
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('generate-rating-options')) {
        const questionItem = e.target.closest('.question-item');
        if (!questionItem) return;
        
        // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
        const isCreateModal = questionItem.closest('#createSurveyModal');
        
        // ถ้าอยู่ใน modal สร้างใหม่ ให้อนุญาตใช้งาน
        // ถ้าอยู่ใน modal แก้ไข ให้ตรวจสอบว่าอนุญาตหรือไม่
        if (!isCreateModal && !window.editVersionMode) {
            alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้เพิ่มตัวเลือก rating กรุณาใช้อัปเดตเวอร์ชันแทน');
            return;
        }
        
        generateRatingOptions(questionItem);
    }
});

// Event delegation for rating count input
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('rating-count')) {
        const questionItem = e.target.closest('.question-item');
        if (!questionItem) return;
        
        // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
        const isCreateModal = questionItem.closest('#createSurveyModal');
        
        // ถ้าอยู่ใน modal สร้างใหม่ ให้อนุญาตใช้งาน
        // ถ้าอยู่ใน modal แก้ไข ให้ตรวจสอบว่าอนุญาตหรือไม่
        if (!isCreateModal && !window.editVersionMode) {
            alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้เพิ่มตัวเลือก rating กรุณาใช้อัปเดตเวอร์ชันแทน');
            // Reset กลับเป็นค่าเดิม
            const optionsList = questionItem.querySelector('.options-list');
            const currentCount = optionsList ? optionsList.querySelectorAll('.option-item').length : 0;
            e.target.value = currentCount;
            return;
        }
        
        const ratingCount = e.target.value;
        if (ratingCount && ratingCount >= 2) {
            // Only generate if there are no existing options
            const optionsList = questionItem.querySelector('.options-list');
            if (optionsList && optionsList.children.length === 0) {
                generateRatingOptions(questionItem);
            }
        }
    }
});

// Event delegation for add option button
document.addEventListener('click', function(e) {
    if (e.target.classList.contains('add-option')) {
        const questionItem = e.target.closest('.question-item');
        if (!questionItem) return;
        
        // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
        const isCreateModal = questionItem.closest('#createSurveyModal');
        
        // ถ้าอยู่ใน modal สร้างใหม่ ให้อนุญาตใช้งาน
        // ถ้าอยู่ใน modal แก้ไข ให้ตรวจสอบว่าอนุญาตหรือไม่
        if (!isCreateModal && !window.editVersionMode) {
            alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้เพิ่มตัวเลือก กรุณาใช้อัปเดตเวอร์ชันแทน');
            return;
        }
        
        addOption(questionItem);
    }
});

// Add event listener for generate rating options button
function addQuestionEventListeners(index) {
    const questionItem = document.querySelector(`[data-question-index="${index}"]`);
    
    if (!questionItem) {
        console.error('Question item not found for index:', index);
        return;
    }
    
    // Question type change
    const questionTypeSelect = questionItem.querySelector('.question-type');
    if (questionTypeSelect) {
        questionTypeSelect.addEventListener('change', function() {
        const optionsContainer = questionItem.querySelector('.options-container');
        const optionsList = questionItem.querySelector('.options-list');
        const addOptionBtn = questionItem.querySelector('.add-option');
        const ratingCountContainer = questionItem.querySelector('.rating-count-container');
        
        if (this.value === 'multiple_choice') {
            // Clear existing options and show empty multiple choice options
            optionsList.innerHTML = `
            <label class="form-label">ตัวเลือกคำตอบ</label>
                <div class="input-group mb-2 option-item">
                    <input type="text" class="form-control" placeholder="ตัวเลือก 1">
                    <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)">ลบ</button>
                </div>
            `;
            optionsContainer.style.display = 'block';
            addOptionBtn.style.display = 'inline-block'; // Show add option button
            ratingCountContainer.style.display = 'none'; // Hide rating count input
        } else if (this.value === 'rating') {
            // Show rating count input
            ratingCountContainer.style.display = 'block';
            optionsContainer.style.display = 'block';
            addOptionBtn.style.display = 'none'; // Hide add option button for rating
            optionsList.innerHTML = ''; // Clear existing options
        } else {
            optionsContainer.style.display = 'none';
            addOptionBtn.style.display = 'none'; // Hide add option button
            ratingCountContainer.style.display = 'none'; // Hide rating count input
        }
    });
    }
    
    // Generate rating options button - handled by event delegation
    
    // Add option button - handled by event delegation
    
    // Remove question button
    const removeBtn = questionItem.querySelector('.remove-question');
    if (removeBtn) {
        removeBtn.addEventListener('click', function() {
        questionItem.remove();
        updateQuestionNumbers();
    });
    }
    
    // Move up button
    const moveUpBtn = questionItem.querySelector('.move-up');
    if (moveUpBtn) {
        moveUpBtn.addEventListener('click', function() {
        const prev = questionItem.previousElementSibling;
        if (prev) {
            questionItem.parentNode.insertBefore(questionItem, prev);
            updateQuestionNumbers();
        }
    });
    }
    
    // Move down button
    const moveDownBtn = questionItem.querySelector('.move-down');
    if (moveDownBtn) {
        moveDownBtn.addEventListener('click', function() {
        const next = questionItem.nextElementSibling;
        if (next) {
            questionItem.parentNode.insertBefore(next, questionItem);
            updateQuestionNumbers();
        }
    });
    }
}

// Add option function
function addOption(questionItem) {
    const optionsList = questionItem.querySelector('.options-list');
    const optionCount = optionsList.children.length;
    
    // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
    const isCreateModal = questionItem.closest('#createSurveyModal');
    const isVersionUpdate = !!window.editVersionMode;
    // แสดงปุ่มลบถ้าอยู่ใน modal สร้างใหม่หรือเป็น version update
    const removeButtonStyle = (isCreateModal || isVersionUpdate) ? '' : 'style="display: none;"';
    
    const optionDiv = document.createElement('div');
    optionDiv.className = 'input-group mb-2 option-item';
    optionDiv.innerHTML = `
        <input type="text" class="form-control" placeholder="ตัวเลือก ${optionCount + 1}">
        <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyle}>ลบ</button>
    `;
    optionsList.appendChild(optionDiv);
    
    // อัพเดทหมายเลขตัวเลือกทั้งหมด
    updateOptionNumbers(questionItem);
    
    // เรียก applyEditModeRestrictions เพื่อตั้งค่า restrictions (เฉพาะใน modal แก้ไข)
    if (!isCreateModal && !isVersionUpdate) {
        setTimeout(() => {
            applyEditModeRestrictions();
        }, 50);
    }
}

// Remove option function
function removeOption(button) {
    const questionItem = button.closest('.question-item');
    if (!questionItem) return;
    
    // ตรวจสอบว่าอยู่ใน modal สร้างใหม่หรือไม่
    const isCreateModal = questionItem.closest('#createSurveyModal');
    
    // ถ้าอยู่ใน modal สร้างใหม่ ให้อนุญาตใช้งาน
    // ถ้าอยู่ใน modal แก้ไข ให้ตรวจสอบว่าอนุญาตหรือไม่
    if (!isCreateModal && !window.editVersionMode) {
        const questionType = questionItem?.querySelector('.question-type')?.value;
        
        // ไม่อนุญาตให้ลบตัวเลือกสำหรับ rating และ multiple_choice
        if (questionType === 'rating' || questionType === 'multiple_choice') {
            alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้ลบตัวเลือก กรุณาใช้อัปเดตเวอร์ชันแทน');
            return;
        }
    }
    
    button.parentElement.remove();
    
    // อัพเดทหมายเลขตัวเลือกทั้งหมด
    if (questionItem) {
        updateOptionNumbers(questionItem);
    }
}

// Update option numbers function
function updateOptionNumbers(questionItem) {
    const optionItems = questionItem.querySelectorAll('.option-item');
    console.log('Updating option numbers for', optionItems.length, 'options'); // เพิ่ม debug log
    
    optionItems.forEach((option, index) => {
        const input = option.querySelector('input[type="text"]');
        if (input) {
            input.placeholder = `ตัวเลือก ${index + 1}`;
            console.log('Updated option', index + 1, 'placeholder'); // เพิ่ม debug log
        }
    });
}

// Update question numbers
function updateQuestionNumbers() {
    const questions = document.querySelectorAll('.question-item');
    questions.forEach((question, index) => {
        question.querySelector('.question-number').textContent = index + 1;
    });
}

// Save survey button
document.getElementById('saveSurveyBtn').addEventListener('click', function() {
    // Clear any existing questions from previous surveys
    const existingQuestions = document.querySelectorAll('.question-item');
    existingQuestions.forEach(question => {
        if (!question.closest('#createSurveyModal')) {
            question.remove();
        }
    });
    
    // Validate required fields
    const surveyName = document.getElementById('surveyName').value.trim();
    if (!surveyName) {
        alert('กรุณากรอกชื่อแบบประเมิน');
        return;
    }

    // Collect survey data
    const surveyData = {
        name: surveyName,
        description: document.getElementById('surveyDescription').value.trim(),
        status: document.getElementById('surveyStatus').value,
        has_suggestions: document.getElementById('hasSuggestions').checked,
        questions: []
    };
    
    // Collect questions data - only from create modal
    const questionItems = document.querySelectorAll('#createSurveyModal .question-item');
    if (questionItems.length === 0) {
        alert('กรุณาเพิ่มคำถามอย่างน้อย 1 คำถาม');
        return;
    }

    let hasValidQuestions = false;
    let validationError = false;
    
    for (let index = 0; index < questionItems.length; index++) {
        const item = questionItems[index];
        const questionText = item.querySelector('.question-text').value.trim();
        if (!questionText) {
            alert(`กรุณากรอกคำถามที่ ${index + 1}`);
            validationError = true;
            break;
        }

        const questionData = {
            text: questionText,
            type: item.querySelector('.question-type').value,
            required: item.querySelector('.question-required').checked,
            help_text: item.querySelector('.question-help') ? item.querySelector('.question-help').value.trim() : '',
            options: []
        };
        
        // Collect options for multiple choice and rating
        if (questionData.type === 'multiple_choice' || questionData.type === 'rating') {
        const optionItems = item.querySelectorAll('.option-item');
            
            // Validation for multiple choice
            if (questionData.type === 'multiple_choice') {
                // 1.1 Check if option text is empty
                for (let optionIndex = 0; optionIndex < optionItems.length; optionIndex++) {
                    const option = optionItems[optionIndex];
                    const input = option.querySelector('input[type="text"]');
                    const value = input ? input.value.trim() : '';
                    if (!value) {
                        alert(`กรุณากรอกข้อความในตัวเลือกที่ ${optionIndex + 1} ของคำถามที่ ${index + 1}`);
                        validationError = true;
                        break;
                    }
                    questionData.options.push(value);
                }
                
                if (validationError) break;
                
                // 1.2 Check if options count is less than or equal to 1
                if (questionData.options.length <= 1) {
                    alert(`คำถามที่ ${index + 1} (Multiple Choice) ต้องมีตัวเลือกอย่างน้อย 2 ตัวเลือก`);
                    validationError = true;
                    break;
                }
            }
            
            // Validation for rating
            if (questionData.type === 'rating') {
                // 2.1 Check if no options exist
                if (optionItems.length === 0) {
                    alert(`คำถามที่ ${index + 1} (Rating) ต้องมีตัวเลือก`);
                    validationError = true;
                    break;
                }
                
                // 2.2 Check if option text is empty
                for (let optionIndex = 0; optionIndex < optionItems.length; optionIndex++) {
                    const option = optionItems[optionIndex];
                    const input = option.querySelector('input[type="text"]');
                    const value = input ? input.value.trim() : '';
                    if (!value) {
                        alert(`กรุณากรอกข้อความในตัวเลือกที่ ${optionIndex + 1} ของคำถามที่ ${index + 1} (Rating)`);
                        validationError = true;
                        break;
                    }
                    questionData.options.push(value);
                }
                
                if (validationError) break;
            }
        }
        
        surveyData.questions.push(questionData);
        hasValidQuestions = true;
    }
    
    if (validationError) {
        return;
    }

    if (!hasValidQuestions) {
        alert('กรุณาเพิ่มคำถามที่ถูกต้อง');
        return;
    }
    
    // Show loading state
    const saveBtn = document.getElementById('saveSurveyBtn');
    const originalText = saveBtn.innerHTML;
    saveBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> กำลังบันทึก...';
    saveBtn.disabled = true;

    // Send data to server
    fetch('/admin/surveys', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(surveyData)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('สร้างแบบประเมินเรียบร้อยแล้ว!');
            // Reset form
            document.getElementById('createSurveyForm').reset();
            document.getElementById('questionsContainer').innerHTML = '';
            questionIndex = 0;
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('createSurveyModal'));
            modal.hide();
            // Reload page to show new survey
            location.reload();
        } else {
            alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถสร้างแบบประเมินได้'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
    })
    .finally(() => {
        // Reset button state
        saveBtn.innerHTML = originalText;
        saveBtn.disabled = false;
    });
});

// Edit survey function
function editSurvey(surveyId, isVersionUpdate = false) {
    console.log('Edit survey ID:', surveyId);
    
    // Show modal first
    const editModal = new bootstrap.Modal(document.getElementById('editSurveyModal'));
    editModal.show();
    
    // Clear previous data
    document.getElementById('editSurveyForm').reset();
    document.getElementById('editQuestionsContainer').innerHTML = '';

    // Mark mode (normal edit vs version update)
    window.editVersionMode = !!isVersionUpdate;
    const header = document.querySelector('#editSurveyModal .modal-title');
    const addQuestionBtn = document.getElementById('addEditQuestionBtn');
    const restrictionAlert = document.getElementById('editModeRestriction');
    
    if (header) {
        if (window.editVersionMode) {
            header.innerHTML = 'แก้ไขแบบประเมิน <span class="badge bg-warning text-dark ms-2">อัปเดตเวอร์ชันเมื่อบันทึก</span>';
        } else {
            header.textContent = 'แก้ไขแบบประเมิน';
        }
    }
    
    // แสดง/ซ่อนปุ่มและข้อความจำกัดสำหรับการแก้ไขปกติ
    const statusField = document.getElementById('editSurveyStatus');
    const statusLabel = statusField?.closest('.mb-3')?.querySelector('label');
    
    if (window.editVersionMode) {
        // Version update: อนุญาตให้ทำทุกอย่าง แต่ไม่ให้เปลี่ยน status
        if (addQuestionBtn) addQuestionBtn.style.display = 'inline-block';
        if (restrictionAlert) restrictionAlert.style.display = 'none';
        // Disable status field และแสดงข้อความบอกว่าไม่อนุญาตให้เปลี่ยน
        if (statusField) {
            statusField.disabled = true;
            statusField.style.cursor = 'not-allowed';
            if (statusLabel) {
                statusLabel.style.opacity = '0.6';
                // เพิ่มข้อความ hint (ถ้ายังไม่มี)
                let hint = document.getElementById('statusHint');
                if (!hint) {
                    hint = document.createElement('small');
                    hint.className = 'text-muted d-block ';
                    hint.id = 'statusHint';
                    statusLabel.after(hint);
                }
            }
        }
    } else {
        // Normal edit: จำกัดการเปลี่ยนแปลง
        if (addQuestionBtn) addQuestionBtn.style.display = 'none';
        if (restrictionAlert) restrictionAlert.style.display = 'block';
        // Enable status field
        if (statusField) {
            statusField.disabled = false;
            statusField.style.cursor = '';
            if (statusLabel) {
                statusLabel.style.opacity = '';
                // ลบ hint ถ้ามี
                const hint = document.getElementById('statusHint');
                if (hint) hint.remove();
            }
        }
    }
    
    // Fetch survey data
    fetch(`/admin/surveys/${surveyId}`)
        .then(response => response.json())
        .then(data => {
            console.log('Survey data loaded:', data);
            
            // Fill basic info
            document.getElementById('editSurveyId').value = data.Survey_ID;
            document.getElementById('editSurveyName').value = data.Survey_Name || '';
            document.getElementById('editSurveyDescription').value = data.Survey_Description || '';
            document.getElementById('editSurveyStatus').value = data.status || 'draft';
            document.getElementById('editHasSuggestions').checked = data.has_suggestions || false;
            
            // Load questions
            if (data.questions && data.questions.length > 0) {
                loadQuestionsForEdit(data.questions);
                
                // หลังโหลดคำถามเสร็จ ให้ตั้งค่า UI restrictions
                setTimeout(() => {
                    applyEditModeRestrictions();
                }, 100);
            } else {
                applyEditModeRestrictions();
            }
        })
        .catch(error => {
            console.error('Error loading survey:', error);
            alert('เกิดข้อผิดพลาดในการโหลดข้อมูล');
        });
}

// Load questions for edit
function loadQuestionsForEdit(questions) {
    console.log('loadQuestionsForEdit called with:', questions);
    const container = document.getElementById('editQuestionsContainer');
    container.innerHTML = '';
    
    if (questions && questions.length > 0) {
        questions.forEach((question, index) => {
            console.log(`Loading question ${index + 1}:`, question);
            addEditQuestion(question, index + 1);
        });
    } else {
        console.log('No questions to load');
    }
}

// Add question for edit
function addEditQuestion(questionData = null, questionNumber = null) {
    console.log('addEditQuestion called with:', questionData, questionNumber);
    const template = document.getElementById('questionTemplate');
    const clone = template.content.cloneNode(true);
    
    const questionIndex = questionNumber || (document.querySelectorAll('#editQuestionsContainer .question-item').length + 1);
    
    // Hide move-up and move-down buttons
    const moveUpBtn = clone.querySelector('.move-up');
    const moveDownBtn = clone.querySelector('.move-down');
    if (moveUpBtn) moveUpBtn.style.display = 'none';
    if (moveDownBtn) moveDownBtn.style.display = 'none';
    
    // Set question number
    clone.querySelector('.question-number').textContent = questionIndex;
    clone.querySelector('.question-item').setAttribute('data-question-index', questionIndex);
    
    // Set unique ID for checkbox
    const checkbox = clone.querySelector('.question-required');
    const label = clone.querySelector('.form-check-label');
    if (checkbox && label) {
        const uniqueId = `questionRequired${questionIndex}`;
        checkbox.id = uniqueId;
        label.setAttribute('for', uniqueId);
    }

    // Fill question data if provided
    if (questionData) {
        console.log('Filling question data:', questionData);
        const questionItem = clone.querySelector('.question-item');
        const questionTypeSelect = clone.querySelector('.question-type');
        
        clone.querySelector('.question-text').value = questionData.question_text || '';
        
        // เก็บประเภทคำถามเดิมไว้ก่อนเพื่อใช้ในการ validate
        if (questionItem) {
            questionItem.setAttribute('data-original-type', questionData.question_type || 'rating');
        }
        
        // Set value ของ question-type โดยไม่ trigger change event
        // (event listener ยังไม่ถูก add อยู่แล้ว ดังนั้นจะไม่ trigger)
        if (questionTypeSelect) {
            questionTypeSelect.value = questionData.question_type || 'rating';
        }
        
        clone.querySelector('.question-required').checked = questionData.required || false;
        clone.querySelector('.question-help').value = questionData.help_text || '';
        
        // Handle options
        
        // Convert options to array if it's a string or ensure it's an array
        let options = questionData.options;
        if (typeof options === 'string') {
            try {
                options = JSON.parse(options);
            } catch (e) {
                console.error('Error parsing options JSON:', e);
                options = [];
            }
        }
        if (!Array.isArray(options)) {
            options = [];
        }
        
        if (options && options.length > 0) {
            const optionsContainer = clone.querySelector('.options-container');
            const optionsList = clone.querySelector('.options-list');
            const addOptionBtn = clone.querySelector('.add-option');
            const ratingCountContainer = clone.querySelector('.rating-count-container');
            
            if (questionData.question_type === 'multiple_choice') {
                optionsContainer.style.display = 'block';
                addOptionBtn.style.display = 'inline-block';
                ratingCountContainer.style.display = 'none';
                
                optionsList.innerHTML = '<label class="form-label">ตัวเลือกคำตอบ</label>';
                const isVersionUpdate = !!window.editVersionMode;
                const removeButtonStyle = isVersionUpdate ? '' : 'style="display: none;"';
                
                options.forEach((option, index) => {
                    const optionDiv = document.createElement('div');
                    optionDiv.className = 'input-group mb-2 option-item';
                    optionDiv.innerHTML = `
                        <input type="text" class="form-control" placeholder="ตัวเลือก ${index + 1}" value="${option}">
                        <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyle}>ลบ</button>
                    `;
                    optionsList.appendChild(optionDiv);
                });
            } else if (questionData.question_type === 'rating') {
                console.log('Processing rating question with options:', options);
                
                // Show the options container
                optionsContainer.style.display = 'block';
                ratingCountContainer.style.display = 'block';
                addOptionBtn.style.display = 'none';
                
                // Create completely new HTML for rating options
                const isVersionUpdate = !!window.editVersionMode;
                const removeButtonStyle = isVersionUpdate ? '' : 'style="display: none;"';
                let ratingOptionsHTML = '';
                if (options && options.length > 0) {
                    options.forEach((option, index) => {
                        ratingOptionsHTML += `
                            <div class="input-group mb-2 option-item">
                                <span class="input-group-text bg-light">คะแนน: ${index + 1}</span>
                                <input type="text" class="form-control" placeholder="กรอกข้อความสำหรับตัวเลือก ${index + 1}" value="${option}">
                                <input type="hidden" value="${index + 1}">
                                <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyle}>ลบ</button>
                            </div>
                        `;
                    });
                }
                
                // Replace the entire options container with new HTML
                const newOptionsHTML = `
                    <div class="options-container" style="display: block !important;">
                        <div class="rating-count-container" style="display: block !important;">
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <label class="form-label">จำนวนตัวเลือก Rating</label>
                                    <input type="number" class="form-control rating-count" min="2" max="10" placeholder="เช่น 4" value="${options.length}">
                                </div>
                                <div class="col-md-6">
                                    <button type="button" class="btn btn-outline-success btn-sm generate-rating-options" style="margin-top: 32px;">
                                        <i class="bi bi-gear"></i> สร้างตัวเลือก Rating
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="options-list" style="display: block !important;">
                            ${ratingOptionsHTML}
                        </div>
                        <button type="button" class="btn btn-outline-success btn-sm add-option mb-3" style="display: none;">เพิ่มตัวเลือก</button>
                    </div>
                `;
                
                // Find and replace the options container
                const oldOptionsContainer = clone.querySelector('.options-container');
                if (oldOptionsContainer) {
                    oldOptionsContainer.outerHTML = newOptionsHTML;
                }
                
                console.log('Rating question setup complete with', options.length, 'options');
                
                // Don't add to container here - will be added later
            } else if (questionData.question_type === 'multiple_choice') {
                // Handle multiple choice questions
                const optionsContainer = clone.querySelector('.options-container');
                const optionsList = clone.querySelector('.options-list');
                const addOptionBtn = clone.querySelector('.add-option');
                const ratingCountContainer = clone.querySelector('.rating-count-container');
                
                if (optionsContainer) optionsContainer.style.display = 'block';
                if (ratingCountContainer) ratingCountContainer.style.display = 'none';
                if (addOptionBtn) addOptionBtn.style.display = 'inline-block';
                
                optionsList.innerHTML = '<label class="form-label">ตัวเลือกคำตอบ</label>';
                const isVersionUpdateEdit = !!window.editVersionMode;
                const removeButtonStyleEdit = isVersionUpdateEdit ? '' : 'style="display: none;"';
                
                if (options && options.length > 0) {
                    options.forEach((option, index) => {
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'input-group mb-2 option-item';
                        optionDiv.innerHTML = `
                            <input type="text" class="form-control" placeholder="ตัวเลือก ${index + 1}" value="${option}">
                            <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyleEdit}>ลบ</button>
                        `;
                        optionsList.appendChild(optionDiv);
                    });
                } else {
                    // Add default option
                    const optionDiv = document.createElement('div');
                    optionDiv.className = 'input-group mb-2 option-item';
                    optionDiv.innerHTML = `
                        <input type="text" class="form-control" placeholder="ตัวเลือก 1">
                        <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyleEdit}>ลบ</button>
                    `;
                    optionsList.appendChild(optionDiv);
                }
                
                // Don't add to container here - will be added later
            } else {
                // Handle text and yes_no questions - hide options
                const optionsContainer = clone.querySelector('.options-container');
                const addOptionBtn = clone.querySelector('.add-option');
                const ratingCountContainer = clone.querySelector('.rating-count-container');
                
                if (optionsContainer) optionsContainer.style.display = 'none';
                if (addOptionBtn) addOptionBtn.style.display = 'none';
                if (ratingCountContainer) ratingCountContainer.style.display = 'none';
                
                // Don't add to container here - will be added later
            }
            
            // Event listeners will be added later
                
            
        }
    }
    
    // Add to container (only once)
    console.log('Adding question to container...');
    document.getElementById('editQuestionsContainer').appendChild(clone);
    console.log('Question added to container successfully');
    
    // Add event listeners for buttons - use the actual DOM element
    const questionElement = document.querySelector(`#editQuestionsContainer [data-question-index="${questionIndex}"]`);
    console.log('Question element found:', questionElement);
    if (questionElement) {
        addEditQuestionEventListeners(questionElement, questionIndex);
        
        // ใช้ applyEditModeRestrictions เพื่อตั้งค่า restrictions หลังจากเพิ่มคำถาม
        setTimeout(() => {
            applyEditModeRestrictions();
            
            // หลังจาก apply restrictions แล้ว ให้ mark ว่า initial load เสร็จแล้ว
            // โดยการ trigger change event ครั้งหนึ่งเพื่อให้ data-initial-loading ถูกลบ
            // แต่ถ้าไม่ใช่ version update จะ return ทันที
            const questionTypeSelect = questionElement.querySelector('.question-type');
            if (questionTypeSelect) {
                // trigger change event เพื่อ mark ว่า initial load เสร็จแล้ว
                // แต่จะไม่ trigger alert เพราะ data-initial-loading ยังเป็น true อยู่
                const event = new Event('change', { bubbles: false });
                questionTypeSelect.dispatchEvent(event);
            }
        }, 50);
    } else {
        console.error('Question element not found in DOM!');
    }
    
    // Trigger change event for default rating type to show rating count input
    // แต่ไม่ trigger ถ้าไม่ใช่ version update เพราะจะ trigger alert
    const questionItem = document.querySelector(`#editQuestionsContainer [data-question-index="${questionIndex}"]`);
    if (questionItem) {
        const questionTypeSelect = questionItem.querySelector('.question-type');
        if (questionTypeSelect && questionTypeSelect.value === 'rating') {
            // ตรวจสอบว่าเป็น version update หรือไม่ก่อน trigger
            if (window.editVersionMode) {
                const event = new Event('change');
                questionTypeSelect.dispatchEvent(event);
            } else {
                // ถ้าไม่ใช่ version update ให้แสดง UI ของ rating โดยตรงโดยไม่ trigger event
                const optionsContainer = questionItem.querySelector('.options-container');
                const ratingCountContainer = questionItem.querySelector('.rating-count-container');
                const addOptionBtn = questionItem.querySelector('.add-option');
                const optionsList = questionItem.querySelector('.options-list');
                
                if (optionsContainer) optionsContainer.style.display = 'block';
                if (ratingCountContainer) ratingCountContainer.style.display = 'block';
                if (addOptionBtn) addOptionBtn.style.display = 'none';
                if (optionsList) optionsList.style.display = 'block';
            }
        }
    }

    updateEditQuestionNumbers();
    
    console.log('Question setup complete for question', questionIndex);
}

// Add event listeners for edit question buttons
function addEditQuestionEventListeners(clone, questionIndex) {
    console.log('Adding event listeners for question', questionIndex);
    
    // Remove question button
    const removeBtn = clone.querySelector('.remove-question');
    console.log('Remove button found:', removeBtn);
    if (removeBtn) {
        removeBtn.addEventListener('click', function() {
            // ตรวจสอบว่าอนุญาตให้ลบคำถามหรือไม่
            if (!window.editVersionMode) {
                alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้ลบคำถาม กรุณาใช้อัปเดตเวอร์ชันแทน');
                return;
            }
            
            console.log('Remove question clicked');
            if (confirm('คุณแน่ใจหรือไม่ที่จะลบคำถามนี้?')) {
                clone.remove();
                updateEditQuestionNumbers();
                console.log('Question removed successfully');
            } else {
                console.log('Question removal cancelled');
            }
        });
        console.log('Remove button event listener added');
    } else {
        console.error('Remove button not found!');
        // Try alternative selectors
        const altRemoveBtn = clone.querySelector('button[title="ลบคำถาม"]');
        console.log('Alternative remove button found:', altRemoveBtn);
        if (altRemoveBtn) {
            altRemoveBtn.addEventListener('click', function() {
                console.log('Remove question clicked (alternative)');
                if (confirm('คุณแน่ใจหรือไม่ที่จะลบคำถามนี้?')) {
                    clone.remove();
                    updateEditQuestionNumbers();
                    console.log('Question removed successfully');
                } else {
                    console.log('Question removal cancelled');
                }
            });
        }
    }
    
    // Move up button
    // const moveUpBtn = clone.querySelector('.move-up');
    // console.log('Move up button found:', moveUpBtn);
    // if (moveUpBtn) {
    //     moveUpBtn.addEventListener('click', function() {
    //         console.log('Move up clicked');
    //         const prev = clone.previousElementSibling;
    //         if (prev) {
    //             clone.parentNode.insertBefore(clone, prev);
    //             updateEditQuestionNumbers();
    //         }
    //     });
    //     console.log('Move up button event listener added');
    // } else {
    //     console.error('Move up button not found!');
    //     // Try alternative selectors
    //     const altMoveUpBtn = clone.querySelector('button[title="ย้ายขึ้น"]');
    //     console.log('Alternative move up button found:', altMoveUpBtn);
    //     if (altMoveUpBtn) {
    //         altMoveUpBtn.addEventListener('click', function() {
    //             console.log('Move up clicked (alternative)');
    //             const prev = clone.previousElementSibling;
    //             if (prev) {
    //                 clone.parentNode.insertBefore(clone, prev);
    //                 updateEditQuestionNumbers();
    //             }
    //         });
    //     }
    // }
    
    // // Move down button
    // const moveDownBtn = clone.querySelector('.move-down');
    // console.log('Move down button found:', moveDownBtn);
    // if (moveDownBtn) {
    //     moveDownBtn.addEventListener('click', function() {
    //         console.log('Move down clicked');
    //         const next = clone.nextElementSibling;
    //         if (next) {
    //             clone.parentNode.insertBefore(next, clone);
    //             updateEditQuestionNumbers();
    //         }
    //     });
    //     console.log('Move down button event listener added');
    // } else {
    //     console.error('Move down button not found!');
    //     // Try alternative selectors
    //     const altMoveDownBtn = clone.querySelector('button[title="ย้ายลง"]');
    //     console.log('Alternative move down button found:', altMoveDownBtn);
    //     if (altMoveDownBtn) {
    //         altMoveDownBtn.addEventListener('click', function() {
    //             console.log('Move down clicked (alternative)');
    //             const next = clone.nextElementSibling;
    //             if (next) {
    //                 clone.parentNode.insertBefore(next, clone);
    //                 updateEditQuestionNumbers();
    //             }
    //         });
    //     }
    // }
    
    // Question type change
    const questionTypeSelect = clone.querySelector('.question-type');
    if (questionTypeSelect) {
        // ใช้ flag เพื่อป้องกันการ trigger alert เมื่อกำลังโหลดข้อมูล
        // เก็บ flag ไว้ใน question item เพื่อไม่ให้ trigger ซ้ำ
        const questionItem = clone.querySelector('.question-item');
        if (questionItem) {
            questionItem.setAttribute('data-initial-loading', 'true');
        }
        
        questionTypeSelect.addEventListener('change', function(e) {
            const questionItem = this.closest('.question-item');
            const isInitialLoading = questionItem?.getAttribute('data-initial-loading') === 'true';
            
            // ถ้ายังอยู่ในโหมด initial loading ให้ข้ามการตรวจสอบ
            if (isInitialLoading) {
                // Mark ว่า initial load เสร็จแล้ว
                if (questionItem) {
                    questionItem.removeAttribute('data-initial-loading');
                }
                // ถ้าไม่ใช่ version update ให้ไม่ทำอะไร (UI ถูก set แล้วใน loadQuestionsForEdit)
                if (!window.editVersionMode) {
                    return;
                }
                // ถ้าเป็น version update ให้ดำเนินการต่อ
            }
            
            // ตรวจสอบว่าอนุญาตให้เปลี่ยนประเภทคำถามหรือไม่ (เฉพาะเมื่อ user เปลี่ยนเอง)
            if (!window.editVersionMode) {
                // Reset กลับเป็นค่าเดิมโดยไม่แสดง alert
                const originalType = questionItem?.getAttribute('data-original-type');
                if (originalType) {
                    // Set flag ชั่วคราวเพื่อไม่ให้ trigger event อีก
                    if (questionItem) {
                        questionItem.setAttribute('data-initial-loading', 'true');
                    }
                    this.value = originalType;
                    // Remove flag หลังจาก set value
                    setTimeout(() => {
                        if (questionItem) {
                            questionItem.removeAttribute('data-initial-loading');
                        }
                    }, 10);
                }
                return;
            }
            
            console.log('Question type changed to:', this.value);
            const optionsContainer = clone.querySelector('.options-container');
            const ratingCountContainer = clone.querySelector('.rating-count-container');
            const addOptionBtn = clone.querySelector('.add-option');
            const optionsList = clone.querySelector('.options-list');
            
            if (this.value === 'rating') {
                if (optionsContainer) optionsContainer.style.display = 'block';
                if (ratingCountContainer) ratingCountContainer.style.display = 'block';
                if (addOptionBtn) addOptionBtn.style.display = 'none';
                if (optionsList) optionsList.style.display = 'block';

                // Check if this is a switch back to rating from multiple_choice
                // If optionsList contains multiple choice options (no "คะแนน:" labels), clear them
                const existingOptions = optionsList.querySelectorAll('.option-item');
                let hasRatingOptions = false;
                
                existingOptions.forEach(option => {
                    const ratingLabel = option.querySelector('.input-group-text');
                    if (ratingLabel && ratingLabel.textContent.includes('คะแนน:')) {
                        hasRatingOptions = true;
                    }
                });
                
                // If no rating options found, clear the list to prepare for rating options
                if (!hasRatingOptions && existingOptions.length > 0) {
                    optionsList.innerHTML = '';
                }

                // Don't clear options list for rating - preserve existing data
                // The rating options will be generated by the generateRatingOptions function
            } else if (this.value === 'multiple_choice') {
                if (optionsContainer) optionsContainer.style.display = 'block';
                if (ratingCountContainer) ratingCountContainer.style.display = 'none';
                if (addOptionBtn) addOptionBtn.style.display = 'inline-block';
                
                // Check if this is initial loading and options already exist
                // If so, don't clear existing options
                if (isInitialLoading && optionsList) {
                    const existingOptions = optionsList.querySelectorAll('.option-item');
                    if (existingOptions.length > 0) {
                        // Options already loaded, don't reset
                        return;
                    }
                }
                
                // Clear and reset options list for multiple choice (only if no existing options)
                if (optionsList) {
                    const isVersionUpdateType = !!window.editVersionMode;
                    const removeButtonStyleType = isVersionUpdateType ? '' : 'style="display: none;"';
                    
                    // Check if options already exist
                    const existingOptions = optionsList.querySelectorAll('.option-item');
                    if (existingOptions.length === 0) {
                        // No options exist, add default
                        optionsList.innerHTML = '<label class="form-label">ตัวเลือกคำตอบ</label>';
                        // Add default option
                        const optionDiv = document.createElement('div');
                        optionDiv.className = 'input-group mb-2 option-item';
                        optionDiv.innerHTML = `
                            <input type="text" class="form-control" placeholder="ตัวเลือก 1">
                            <button class="btn btn-outline-danger" type="button" onclick="removeOption(this)" ${removeButtonStyleType}>ลบ</button>
                        `;
                        optionsList.appendChild(optionDiv);
                    }
                }
            } else {
                if (optionsContainer) optionsContainer.style.display = 'none';
                if (ratingCountContainer) ratingCountContainer.style.display = 'none';
                if (addOptionBtn) addOptionBtn.style.display = 'none';
            }
        });
    }
}

// Update question numbers for edit modal
function updateEditQuestionNumbers() {
    const questions = document.querySelectorAll('#editQuestionsContainer .question-item');
    questions.forEach((question, index) => {
        question.querySelector('.question-number').textContent = index + 1;
    });
}

// Add question button for edit modal
document.getElementById('addEditQuestionBtn').addEventListener('click', function() {
    // อนุญาตให้เพิ่มคำถามเฉพาะในโหมด version update
    if (!window.editVersionMode) {
        alert('การแก้ไขแบบประเมินปกติไม่อนุญาตให้เพิ่มคำถาม กรุณาใช้อัปเดตเวอร์ชันแทน');
        return;
    }
    addEditQuestion();
});

// Function to apply restrictions based on edit mode
function applyEditModeRestrictions() {
    const isVersionUpdate = !!window.editVersionMode;
    
    // หา elements ทั้งหมดใน edit modal
    const questionItems = document.querySelectorAll('#editQuestionsContainer .question-item');
    
    questionItems.forEach((item) => {
        // 1. ปุ่มลบคำถาม
        const removeBtn = item.querySelector('.remove-question');
        if (removeBtn) {
            if (isVersionUpdate) {
                removeBtn.style.display = 'inline-block';
                removeBtn.disabled = false;
            } else {
                removeBtn.style.display = 'none';
                removeBtn.disabled = true;
            }
        }
        
        // 2. Dropdown ประเภทคำถาม
        const questionTypeSelect = item.querySelector('.question-type');
        if (questionTypeSelect) {
            if (isVersionUpdate) {
                questionTypeSelect.disabled = false;
                questionTypeSelect.style.cursor = 'pointer';
            } else {
                questionTypeSelect.disabled = true;
                questionTypeSelect.style.cursor = 'not-allowed';
                questionTypeSelect.style.backgroundColor = '#f5f5f5';
            }
        }
        
        // 3. Rating count input และปุ่ม generate
        const ratingCountInput = item.querySelector('.rating-count');
        const generateRatingBtn = item.querySelector('.generate-rating-options');
        
        if (ratingCountInput) {
            if (isVersionUpdate) {
                ratingCountInput.disabled = false;
                ratingCountInput.style.cursor = 'pointer';
            } else {
                ratingCountInput.disabled = true;
                ratingCountInput.style.cursor = 'not-allowed';
                ratingCountInput.style.backgroundColor = '#f5f5f5';
            }
        }
        
        if (generateRatingBtn) {
            if (isVersionUpdate) {
                generateRatingBtn.style.display = 'inline-block';
                generateRatingBtn.disabled = false;
            } else {
                generateRatingBtn.style.display = 'none';
                generateRatingBtn.disabled = true;
            }
        }
        
        // 4. ปุ่มเพิ่มตัวเลือก (สำหรับ multiple choice)
        const addOptionBtn = item.querySelector('.add-option');
        if (addOptionBtn) {
            const questionType = item.querySelector('.question-type')?.value;
            
            if (isVersionUpdate) {
                // Version update: อนุญาตให้เพิ่มตัวเลือกสำหรับ multiple choice
                if (questionType === 'multiple_choice') {
                    addOptionBtn.style.display = 'inline-block';
                    addOptionBtn.disabled = false;
                } else {
                    // สำหรับ rating ไม่ควรมีปุ่มเพิ่มตัวเลือกอยู่แล้ว
                    addOptionBtn.style.display = 'none';
                }
            } else {
                // Normal edit: ไม่อนุญาตให้เพิ่มตัวเลือก
                addOptionBtn.style.display = 'none';
                addOptionBtn.disabled = true;
            }
        }
        
        // 5. ปุ่มลบตัวเลือก (สำหรับ rating และ multiple_choice)
        const questionType = item.querySelector('.question-type')?.value;
        if (questionType === 'rating' || questionType === 'multiple_choice') {
            const optionItems = item.querySelectorAll('.option-item');
            optionItems.forEach((optionItem) => {
                const removeOptionBtn = optionItem.querySelector('button[onclick*="removeOption"], button.btn-outline-danger');
                if (removeOptionBtn) {
                    if (isVersionUpdate) {
                        removeOptionBtn.style.display = 'inline-block';
                        removeOptionBtn.disabled = false;
                    } else {
                        removeOptionBtn.style.display = 'none';
                        removeOptionBtn.disabled = true;
                    }
                }
            });
        }
        
        // 6. Checkbox คำถามบังคับ (question-required)
        const questionRequiredCheckbox = item.querySelector('.question-required');
        if (questionRequiredCheckbox) {
            if (isVersionUpdate) {
                questionRequiredCheckbox.disabled = false;
                questionRequiredCheckbox.style.cursor = 'pointer';
            } else {
                questionRequiredCheckbox.disabled = true;
                questionRequiredCheckbox.style.cursor = 'not-allowed';
            }
        }
    });
}

// Update survey button
document.getElementById('updateSurveyBtn').addEventListener('click', function() {
    // Validate required fields
    const surveyName = document.getElementById('editSurveyName').value.trim();
    if (!surveyName) {
        alert('กรุณากรอกชื่อแบบประเมิน');
        return;
    }

    // Collect survey data
    const surveyData = {
        name: surveyName,
        description: document.getElementById('editSurveyDescription').value.trim(),
        status: document.getElementById('editSurveyStatus').value,
        has_suggestions: document.getElementById('editHasSuggestions').checked,
        questions: [],
        // ส่ง flag ให้ backend ทราบว่าเป็นโหมดอัปเดตเวอร์ชันหรือไม่
        is_version_update: !!window.editVersionMode
    };
    
    // Collect questions data
    const questionItems = document.querySelectorAll('#editQuestionsContainer .question-item');
    if (questionItems.length === 0) {
        alert('กรุณาเพิ่มคำถามอย่างน้อย 1 คำถาม');
        return;
    }
    
    // ถ้าไม่ใช่ version update ตรวจสอบว่าจำนวนคำถามไม่เปลี่ยน
    if (!window.editVersionMode) {
        // เก็บจำนวนคำถามเดิมไว้ก่อน (ต้อง fetch จาก server อีกครั้ง หรือเก็บไว้ในตัวแปร)
        // สำหรับตอนนี้ validate ใน backend จะทำหน้าที่นี้
    }

    let hasValidQuestions = false;
    let validationError = false;
    
    for (let index = 0; index < questionItems.length; index++) {
        const item = questionItems[index];
        const questionText = item.querySelector('.question-text').value.trim();
        if (!questionText) {
            alert(`กรุณากรอกคำถามที่ ${index + 1}`);
            validationError = true;
            break;
        }

        const questionData = {
            text: questionText,
            type: item.querySelector('.question-type').value,
            required: item.querySelector('.question-required').checked,
            help_text: item.querySelector('.question-help') ? item.querySelector('.question-help').value.trim() : '',
            options: []
        };
        
        // Collect options for multiple choice and rating
        if (questionData.type === 'multiple_choice' || questionData.type === 'rating') {
            const optionItems = item.querySelectorAll('.option-item');
            
            // Validation for multiple choice
            if (questionData.type === 'multiple_choice') {
                // 1.1 Check if option text is empty
                for (let optionIndex = 0; optionIndex < optionItems.length; optionIndex++) {
                    const option = optionItems[optionIndex];
                    const input = option.querySelector('input[type="text"]');
                    const value = input ? input.value.trim() : '';
                    if (!value) {
                        alert(`กรุณากรอกข้อความในตัวเลือกที่ ${optionIndex + 1} ของคำถามที่ ${index + 1}`);
                        validationError = true;
                        break;
                    }
                    questionData.options.push(value);
                }
                
                if (validationError) break;
                
                // 1.2 Check if options count is less than or equal to 1
                if (questionData.options.length <= 1) {
                    alert(`คำถามที่ ${index + 1} (Multiple Choice) ต้องมีตัวเลือกอย่างน้อย 2 ตัวเลือก`);
                    validationError = true;
                    break;
                }
            }
            
            // Validation for rating
            if (questionData.type === 'rating') {
                // 2.1 Check if no options exist
                if (optionItems.length === 0) {
                    alert(`คำถามที่ ${index + 1} (Rating) ต้องมีตัวเลือก`);
                    validationError = true;
                    break;
                }
                
                // 2.2 Check if option text is empty
                for (let optionIndex = 0; optionIndex < optionItems.length; optionIndex++) {
                    const option = optionItems[optionIndex];
                    const input = option.querySelector('input[type="text"]');
                    const value = input ? input.value.trim() : '';
                    if (!value) {
                        alert(`กรุณากรอกข้อความในตัวเลือกที่ ${optionIndex + 1} ของคำถามที่ ${index + 1} (Rating)`);
                        validationError = true;
                        break;
                    }
                    questionData.options.push(value);
                }
                
                if (validationError) break;
            }
        }
        
        surveyData.questions.push(questionData);
        hasValidQuestions = true;
    }
    
    if (validationError) {
        return;
    }

    if (!hasValidQuestions) {
        alert('กรุณาเพิ่มคำถามที่ถูกต้อง');
        return;
    }
    
    // Show loading state
    const updateBtn = document.getElementById('updateSurveyBtn');
    const originalText = updateBtn.innerHTML;
    updateBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> กำลังบันทึก...';
    updateBtn.disabled = true;

    const surveyId = document.getElementById('editSurveyId').value;

    // Send data to server
    fetch(`/admin/surveys/${surveyId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify(surveyData)
    })
    .then(async (response) => {
        const raw = await response.text();
        let data;
        try {
            data = raw ? JSON.parse(raw) : {};
        } catch (e) {
            console.error('Non-JSON response:', raw);
            throw new Error('Server Error: ' + (response.status || '') + ' ' + (response.statusText || '')); 
        }
        return { ok: response.ok, status: response.status, data };
    })
    .then(({ ok, status, data }) => {
        if (ok && data && data.success) {
            alert('แก้ไขแบบประเมินเรียบร้อยแล้ว!');
            // Close modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('editSurveyModal'));
            modal.hide();
            // Reload page to show updated survey (รวมถึงเวอร์ชันที่เพิ่มแล้วถ้ามี)
            location.reload();
        } else {
            const message = (data && (data.message || data.error)) ? (data.message || data.error) : 'ไม่สามารถแก้ไขแบบประเมินได้';
            alert('เกิดข้อผิดพลาด: ' + message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
    })
    .finally(() => {
        // Reset button state
        updateBtn.innerHTML = originalText;
        updateBtn.disabled = false;
    });
});

// Delete survey function
function deleteSurvey(surveyId) {
    if (confirm('คุณแน่ใจหรือไม่ที่จะลบแบบประเมินนี้?')) {
        fetch(`/admin/surveys/${surveyId}`, {
            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('ลบแบบประเมินเรียบร้อยแล้ว!');
                location.reload();
            } else {
                alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถลบแบบประเมินได้'));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
        });
    }
}

// Increment survey version
function incrementVersion(surveyId, btn) {
    // แสดงฟอร์มแก้ไขก่อน และตั้งค่าโหมดอัปเดตเวอร์ชัน
    editSurvey(surveyId, true);
}

// Helper function: แปลงวันที่จาก ค.ศ. เป็น พ.ศ. (เพิ่ม 543 ปี)
function convertToBuddhistYear(dateString) {
    if (!dateString) return 'ไม่ทราบวันที่';
    
    // แยกส่วนวันที่และเวลา (ถ้ามี)
    const parts = dateString.split(' ');
    const datePart = parts[0]; // "2024-01-15"
    const timePart = parts[1] || ''; // "10:30:00" หรือ ""
    
    // แยกปี เดือน วัน
    const [year, month, day] = datePart.split('-');
    
    // แปลงปีจาก ค.ศ. เป็น พ.ศ.
    const buddhistYear = parseInt(year) + 543;
    
    // รวมกลับเป็นรูปแบบเดิม
    const buddhistDate = `${day}/${month}/${buddhistYear}`;
    
    // ถ้ามีเวลาให้รวมกลับ
    return timePart ? `${buddhistDate} ${timePart}` : buddhistDate;
}

// View versions function
function viewVersions(surveyId) {
    const modal = new bootstrap.Modal(document.getElementById('versionHistoryModal'));
    modal.show();

    // Reset modal state
    document.getElementById('versionHistoryLoading').style.display = 'block';
    document.getElementById('versionHistoryContent').style.display = 'none';
    document.getElementById('versionHistoryError').style.display = 'none';
    document.getElementById('versionsList').innerHTML = '';

    // Fetch version history
    fetch(`/admin/surveys/${surveyId}/versions`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('versionHistoryLoading').style.display = 'none';
        
        if (data.success && data.data) {
            const versions = data.data.versions || [];
            const surveyName = data.data.survey_name || 'แบบประเมิน';
            const currentVersion = data.data.current_version || 1;

            document.getElementById('versionHistorySurveyName').textContent = surveyName;
            document.getElementById('versionHistoryContent').style.display = 'block';

            if (versions.length === 0) {
                document.getElementById('versionsList').innerHTML = `
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> ยังไม่มีประวัติเวอร์ชัน
                    </div>
                `;
                return;
            }

            // Render version list
            versions.forEach(version => {
                const versionItem = document.createElement('div');
                versionItem.className = `list-group-item list-group-item-action ${version.is_current ? 'active' : ''} `;
                versionItem.innerHTML = `
                    <div class="d-flex w-100 justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">
                                Version ${version.version || 'N/A'}
                                ${version.is_current ? '<span class="badge bg-success ms-2">ปัจจุบัน</span>' : ''}
                            </h6>
                            <p class="mb-1 text-muted">
                                <small><i class="bi bi-calendar"></i> ${convertToBuddhistYear(version.snapshot_at)}</small>
                            </p>
                            <p class="mb-0">
                                <small class="text-muted">
                                    <i class="bi bi-question-circle"></i> ${version.questions ? version.questions.length : 0} คำถาม
                                </small>
                            </p>
                        </div>
                        <button class="btn btn-sm btn-outline-primary" onclick="viewVersionDetail(${surveyId}, ${version.version})">
                            <i class="bi bi-eye"></i> ดูรายละเอียด
                        </button>
                    </div>
                `;
                document.getElementById('versionsList').appendChild(versionItem);
            });
        } else {
            document.getElementById('versionHistoryError').style.display = 'block';
            document.getElementById('versionHistoryErrorMessage').textContent = data.message || 'เกิดข้อผิดพลาดในการโหลดประวัติเวอร์ชัน';
        }
    })
    .catch(error => {
        console.error('Error loading version history:', error);
        document.getElementById('versionHistoryLoading').style.display = 'none';
        document.getElementById('versionHistoryError').style.display = 'block';
        document.getElementById('versionHistoryErrorMessage').textContent = 'เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์';
    });
}

// View version detail function
function viewVersionDetail(surveyId, version) {
    const historyModal = bootstrap.Modal.getInstance(document.getElementById('versionHistoryModal'));
    if (historyModal) {
        historyModal.hide();
    }

    const detailModal = new bootstrap.Modal(document.getElementById('versionDetailModal'));
    detailModal.show();

    // Reset modal state
    document.getElementById('versionDetailLoading').style.display = 'block';
    document.getElementById('versionDetailContent').style.display = 'none';
    document.getElementById('versionDetailError').style.display = 'none';
    document.getElementById('versionQuestionsList').innerHTML = '';

    // Fetch version data
    fetch(`/admin/surveys/${surveyId}/version/${version}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('versionDetailLoading').style.display = 'none';
        
        if (data.success && data.data) {
            const versionData = data.data;
            
            // Fill version info
            document.getElementById('versionNumber').textContent = `v${versionData.version || 'N/A'}`;
            document.getElementById('versionDate').textContent = convertToBuddhistYear(versionData.snapshot_at);
            document.getElementById('versionName').textContent = versionData.survey?.name || 'ไม่ระบุชื่อ';
            document.getElementById('versionDescription').textContent = versionData.survey?.description || 'ไม่มีคำอธิบาย';
            
            // Status badge
            const statusBadge = document.getElementById('versionStatusBadge');
            const status = versionData.survey?.status || 'draft';
            if (status === 'active') {
                statusBadge.innerHTML = '<span class="badge bg-success">ใช้งาน</span>';
            } else if (status === 'draft') {
                statusBadge.innerHTML = '<span class="badge bg-warning">ร่าง</span>';
            } else {
                statusBadge.innerHTML = '<span class="badge bg-secondary">ไม่ใช้งาน</span>';
            }

            // Has suggestions
            const hasSuggestions = versionData.survey?.has_suggestions || false;
            document.getElementById('versionHasSuggestions').innerHTML = hasSuggestions 
                ? '<span class="badge bg-info">ใช่</span>' 
                : '<span class="badge bg-secondary">ไม่</span>';

            // Questions
            const questions = versionData.questions || [];
            document.getElementById('versionQuestionsCount').textContent = questions.length;

            if (questions.length === 0) {
                document.getElementById('versionQuestionsList').innerHTML = `
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i> ไม่มีคำถามในเวอร์ชันนี้
                    </div>
                `;
            } else {
                questions.forEach((question, index) => {
                    const questionItem = document.createElement('div');
                    questionItem.className = 'list-group-item';
                    
                    let optionsHtml = '';
                    if (question.options && question.options.length > 0) {
                        if (question.type === 'rating') {
                            optionsHtml = `<div class="mt-2"><strong>ตัวเลือก:</strong><ul class="mb-0 mt-1">`;
                            question.options.forEach((opt, optIdx) => {
                                const optionText = typeof opt === 'object' && opt.text ? opt.text : opt;
                                const optionValue = typeof opt === 'object' && opt.value ? opt.value : (optIdx + 1);
                                optionsHtml += `<li>${optionValue}: ${optionText}</li>`;
                            });
                            optionsHtml += `</ul></div>`;
                        } else {
                            optionsHtml = `<div class="mt-2"><strong>ตัวเลือก:</strong><ul class="mb-0 mt-1">`;
                            question.options.forEach(opt => {
                                const optionText = typeof opt === 'object' && opt.text ? opt.text : opt;
                                optionsHtml += `<li>${optionText}</li>`;
                            });
                            optionsHtml += `</ul></div>`;
                        }
                    }

                    const typeLabels = {
                        'rating': 'Rating',
                        'multiple_choice': 'Multiple Choice',
                        'yes_no': 'Yes/No',
                        'text': 'Text'
                    };

                    questionItem.innerHTML = `
                        <div class="d-flex w-100 justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <h6 class="mb-1">
                                    คำถามที่ ${question.order || (index + 1)}
                                    <span class="badge bg-secondary ms-2">${typeLabels[question.type] || question.type}</span>
                                    ${question.required ? '<span class="badge bg-danger ms-1">จำเป็น</span>' : ''}
                                </h6>
                                <p class="mb-1">${question.text || 'ไม่มีข้อความคำถาม'}</p>
                                ${question.help_text ? `<p class="mb-1 text-muted"><small><i class="bi bi-info-circle"></i> ${question.help_text}</small></p>` : ''}
                                ${optionsHtml}
                            </div>
                        </div>
                    `;
                    document.getElementById('versionQuestionsList').appendChild(questionItem);
                });
            }

            document.getElementById('versionDetailContent').style.display = 'block';
        } else {
            document.getElementById('versionDetailError').style.display = 'block';
            document.getElementById('versionDetailErrorMessage').textContent = data.message || 'เกิดข้อผิดพลาดในการโหลดรายละเอียดเวอร์ชัน';
        }
    })
    .catch(error => {
        console.error('Error loading version detail:', error);
        document.getElementById('versionDetailLoading').style.display = 'none';
        document.getElementById('versionDetailError').style.display = 'block';
        document.getElementById('versionDetailErrorMessage').textContent = 'เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์';
    });
}
</script>

<style>
/* ทำให้พื้นหลัง list-group-item-action จางลง */
.list-group-item-action {
    background-color: rgba(248, 249, 250, 0.5) !important;
    transition: background-color 0.15s ease-in-out;
}

.list-group-item-action:hover {
    background-color: rgba(248, 249, 250, 0.8) !important;
}

.list-group-item-action.active {
    background-color: rgba(13, 110, 253, 0.15) !important;
    color: #0d6efd;
}

.list-group-item-action.active:hover {
    background-color: rgba(13, 110, 253, 0.25) !important;
}
</style>
@endsection