@extends('admin.dashboard')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">จัดการแบบประเมิน</h5>
                    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createSurveyModal">
                        <i class="bi bi-plus-circle"></i> สร้างแบบประเมินใหม่
                    </button>
                </div>
                <div class="card-body">
                    <!-- Statistics Cards -->
                    <div class="row mb-4">
                        <div class="col-md-3">
                            <div class="card bg-primary text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 class="mb-0">{{ $surveys->count() }}</h4>
                                            <p class="mb-0">แบบประเมินทั้งหมด</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="bi bi-clipboard-data fs-1"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-success text-white">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <h4 class="mb-0">{{ $surveys->where('status', 'active')->count() }}</h4>
                                            <p class="mb-0">แบบประเมินที่ใช้งาน</p>
                                        </div>
                                        <div class="align-self-center">
                                            <i class="bi bi-check-circle fs-1"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Surveys Table -->
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ชื่อแบบประเมิน</th>
                                    <th>คำอธิบาย</th>
                                    <th>จำนวนคำถาม</th>
                                    <th>สถานะ</th>
                                    <th>วันที่สร้าง</th>
                                    <th>การจัดการ</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($surveys as $survey)
                                <tr>
                                    <td>{{ $survey->Survey_Name }}</td>
                                    <td>{{ $survey->Survey_Description ?: 'ไม่มีคำอธิบาย' }}</td>
                                    <td>{{ $survey->questions->count() }}</td>
                                    <td>
                                        <span class="badge bg-{{ $survey->status === 'active' ? 'success' : 'secondary' }}">
                                            {{ $survey->status === 'active' ? 'ใช้งาน' : 'ร่าง' }}
                                        </span>
                                    </td>
                                    <td>{{ $survey->DtmIns->format('Y-m-d') }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary" onclick="editSurvey({{ $survey->Survey_ID }})">
                                            <i class="bi bi-pencil"></i> แก้ไข
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" onclick="deleteSurvey({{ $survey->Survey_ID }})">
                                            <i class="bi bi-trash"></i> ลบ
                                        </button>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="6" class="text-center">ไม่มีแบบประเมิน</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Survey Modal -->
<div class="modal fade" id="createSurveyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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>
            <form id="createSurveyForm">
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">ชื่อแบบประเมิน</label>
                        <input type="text" class="form-control" id="surveyName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">คำอธิบาย</label>
                        <textarea class="form-control" id="surveyDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">สถานะ</label>
                        <select class="form-select" id="surveyStatus">
                            <option value="draft">ร่าง</option>
                            <option value="active">ใช้งาน</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">คำถาม</label>
                        <div id="questionsContainer"></div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="addQuestionBtn">
                            <i class="bi bi-plus"></i> เพิ่มคำถาม
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="submit" class="btn btn-primary" id="saveSurveyBtn">บันทึก</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Survey Modal -->
<div class="modal fade" id="editSurveyModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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>
            <form id="editSurveyForm">
                <div class="modal-body">
                    <input type="hidden" id="editSurveyId">
                    <div class="mb-3">
                        <label class="form-label">ชื่อแบบประเมิน</label>
                        <input type="text" class="form-control" id="editSurveyName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">คำอธิบาย</label>
                        <textarea class="form-control" id="editSurveyDescription" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">สถานะ</label>
                        <select class="form-select" id="editSurveyStatus">
                            <option value="draft">ร่าง</option>
                            <option value="active">ใช้งาน</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">คำถาม</label>
                        <div id="editQuestionsContainer"></div>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="addEditQuestionBtn">
                            <i class="bi bi-plus"></i> เพิ่มคำถาม
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">ยกเลิก</button>
                    <button type="submit" class="btn btn-primary" id="updateSurveyBtn">อัปเดต</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Question Template -->
<template id="questionTemplate">
    <div class="question-item border rounded p-3 mb-3">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0 question-number">คำถามที่ 1</h6>
            <div>
                <button type="button" class="btn btn-sm btn-outline-danger remove-question">
                    <i class="bi bi-trash"></i>
                </button>
            </div>
        </div>
        <div class="mb-3">
            <label class="form-label">ข้อความคำถาม</label>
            <input type="text" class="form-control question-text" placeholder="กรอกข้อความคำถาม">
        </div>
        <div class="row mb-3">
            <div class="col-md-6">
                <label class="form-label">ประเภทคำถาม</label>
                <select class="form-select question-type">
                    <option value="text">ข้อความ</option>
                    <option value="rating">Rating</option>
                    <option value="multiple_choice">ตัวเลือกหลายข้อ</option>
                    <option value="yes_no">ใช่/ไม่ใช่</option>
                </select>
            </div>
            <div class="col-md-6">
                <div class="form-check mt-4">
                    <input class="form-check-input question-required" type="checkbox">
                    <label class="form-check-label">จำเป็นต้องตอบ</label>
                </div>
            </div>
        </div>
        <div class="options-container" style="display: none;">
            <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"></div>
            <button type="button" class="btn btn-outline-success btn-sm add-option mb-3" style="display: none;">เพิ่มตัวเลือก</button>
        </div>
    </div>
</template>

<script>
// ===== SIMPLE EDIT FUNCTIONS =====

function editSurvey(surveyId) {
    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 = '';
    
    // 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';
            
            // Load questions
            if (data.questions && data.questions.length > 0) {
                loadQuestionsForEdit(data.questions);
            }
        })
        .catch(error => {
            console.error('Error loading survey:', error);
            alert('เกิดข้อผิดพลาดในการโหลดข้อมูล');
        });
}

function loadQuestionsForEdit(questions) {
    console.log('Loading questions for edit:', questions);
    const container = document.getElementById('editQuestionsContainer');
    container.innerHTML = '';
    
    if (questions && questions.length > 0) {
        questions.forEach((question, index) => {
            console.log('Adding question', index + 1, ':', question);
            addEditQuestion(question, index + 1);
        });
    }
}

function addEditQuestion(questionData = null, questionNumber = null) {
    console.log('Adding edit question:', questionData, questionNumber);
    
    const template = document.getElementById('questionTemplate');
    const clone = template.content.cloneNode(true);
    
    const questionIndex = questionNumber || (document.querySelectorAll('#editQuestionsContainer .question-item').length + 1);
    
    // Set question number
    clone.querySelector('.question-number').textContent = `คำถามที่ ${questionIndex}`;
    clone.querySelector('.question-item').setAttribute('data-question-index', questionIndex);
    
    console.log('Question template cloned and configured');
    
    // Fill question data if provided
    if (questionData) {
        console.log('Filling question data:', questionData);
        clone.querySelector('.question-text').value = questionData.question_text || '';
        clone.querySelector('.question-type').value = questionData.question_type || 'rating';
        clone.querySelector('.question-required').checked = questionData.required || false;
        
        // Handle options
        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 = [];
        }
        
        // Handle different question types
        if (questionData.question_type === 'rating') {
            setupRatingQuestion(clone, options);
        } else if (questionData.question_type === 'multiple_choice') {
            setupMultipleChoiceQuestion(clone, options);
        } else {
            setupTextQuestion(clone);
        }
    } else {
        // No question data - add empty question
        setupTextQuestion(clone);
    }
    
    // Add to container
    console.log('Adding question to container...');
    document.getElementById('editQuestionsContainer').appendChild(clone);
    console.log('Question added to container successfully');
    
    // Add event listeners
    addEditQuestionEventListeners(clone, questionIndex);
    
    updateEditQuestionNumbers();
    
    console.log('Question setup complete for question', questionIndex);
}

function setupRatingQuestion(clone, options) {
    console.log('Setting up rating question with options:', options);
    
    const optionsContainer = clone.querySelector('.options-container');
    const optionsList = clone.querySelector('.options-list');
    const ratingCountContainer = clone.querySelector('.rating-count-container');
    const addOptionBtn = clone.querySelector('.add-option');
    
    // Show rating elements
    optionsContainer.style.display = 'block';
    ratingCountContainer.style.display = 'block';
    addOptionBtn.style.display = 'none';
    
    // Set rating count
    const ratingCountInput = clone.querySelector('.rating-count');
    if (ratingCountInput) {
        ratingCountInput.value = options.length || 2;
    }
    
    // Clear and add options
    optionsList.innerHTML = '';
    if (options && options.length > 0) {
        options.forEach((option, index) => {
            const optionDiv = document.createElement('div');
            optionDiv.className = 'input-group mb-2 option-item';
            optionDiv.innerHTML = `
                <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)">ลบ</button>
            `;
            optionsList.appendChild(optionDiv);
        });
    }
}

function setupMultipleChoiceQuestion(clone, options) {
    console.log('Setting up multiple choice question with options:', options);
    
    const optionsContainer = clone.querySelector('.options-container');
    const optionsList = clone.querySelector('.options-list');
    const ratingCountContainer = clone.querySelector('.rating-count-container');
    const addOptionBtn = clone.querySelector('.add-option');
    
    // Show multiple choice elements
    optionsContainer.style.display = 'block';
    ratingCountContainer.style.display = 'none';
    addOptionBtn.style.display = 'inline-block';
    
    // Clear and add options
    optionsList.innerHTML = '<label class="form-label">ตัวเลือกคำตอบ</label>';
    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)">ลบ</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)">ลบ</button>
        `;
        optionsList.appendChild(optionDiv);
    }
}

function setupTextQuestion(clone) {
    console.log('Setting up text question');
    
    const optionsContainer = clone.querySelector('.options-container');
    const ratingCountContainer = clone.querySelector('.rating-count-container');
    const addOptionBtn = clone.querySelector('.add-option');
    
    // Hide options elements
    optionsContainer.style.display = 'none';
    ratingCountContainer.style.display = 'none';
    addOptionBtn.style.display = 'none';
}

function addEditQuestionEventListeners(clone, questionIndex) {
    const questionTypeSelect = clone.querySelector('.question-type');
    if (questionTypeSelect) {
        questionTypeSelect.addEventListener('change', function() {
            const optionsContainer = clone.querySelector('.options-container');
            const ratingCountContainer = clone.querySelector('.rating-count-container');
            const addOptionBtn = clone.querySelector('.add-option');
            
            if (this.value === 'rating') {
                optionsContainer.style.display = 'block';
                ratingCountContainer.style.display = 'block';
                addOptionBtn.style.display = 'none';
            } else if (this.value === 'multiple_choice') {
                optionsContainer.style.display = 'block';
                ratingCountContainer.style.display = 'none';
                addOptionBtn.style.display = 'inline-block';
            } else {
                optionsContainer.style.display = 'none';
                ratingCountContainer.style.display = 'none';
                addOptionBtn.style.display = 'none';
            }
        });
    }
}

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() {
    addEditQuestion();
});

// Update survey button
document.getElementById('updateSurveyBtn').addEventListener('click', function(e) {
    e.preventDefault();
    
    const surveyId = document.getElementById('editSurveyId').value;
    const surveyName = document.getElementById('editSurveyName').value;
    const surveyDescription = document.getElementById('editSurveyDescription').value;
    const surveyStatus = document.getElementById('editSurveyStatus').value;
    
    // Collect questions
    const questions = [];
    const questionItems = document.querySelectorAll('#editQuestionsContainer .question-item');
    
    questionItems.forEach((item, index) => {
        const questionText = item.querySelector('.question-text').value;
        const questionType = item.querySelector('.question-type').value;
        const questionRequired = item.querySelector('.question-required').checked;
        
        let options = [];
        if (questionType === 'rating' || questionType === 'multiple_choice') {
            const optionInputs = item.querySelectorAll('.option-item input[type="text"]');
            optionInputs.forEach(input => {
                if (input.value.trim()) {
                    options.push(input.value.trim());
                }
            });
        }
        
        questions.push({
            text: questionText,
            type: questionType,
            required: questionRequired,
            options: options
        });
    });
    
    // Send update request
    fetch(`/admin/surveys/${surveyId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
        },
        body: JSON.stringify({
            name: surveyName,
            description: surveyDescription,
            status: surveyStatus,
            questions: questions
        })
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('อัปเดตแบบประเมินเรียบร้อยแล้ว!');
            location.reload();
        } else {
            alert('เกิดข้อผิดพลาด: ' + (data.message || 'ไม่สามารถอัปเดตแบบประเมินได้'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
    });
});

function deleteSurvey(surveyId) {
    if (confirm('คุณแน่ใจหรือไม่ที่จะลบแบบประเมินนี้?')) {
        fetch(`/admin/surveys/${surveyId}`, {
            method: 'DELETE',
            headers: {
                '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('เกิดข้อผิดพลาดในการเชื่อมต่อกับเซิร์ฟเวอร์');
        });
    }
}
</script>
@endsection