@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-edit me-2"></i>
            แก้ไขคำถาม
        </h1>
        <a href="{{ route('admin.question-groups.edit', $question->questionGroup) }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-1"></i>
            กลับไปกลุ่มคำถาม
        </a>
    </div>

    <!-- Edit Question Form -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-question-circle me-2"></i>
                แก้ไขข้อมูลคำถาม - {{ $question->questionGroup->name }}
            </h6>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ route('admin.questions.update', $question) }}">
                @csrf
                @method('PUT')
                
                <div class="row">
                    <div class="col-md-8">
                        <div class="mb-3">
                            <label for="question_text" class="form-label">คำถาม <span class="text-danger">*</span></label>
                            <textarea class="form-control @error('question_text') is-invalid @enderror" 
                                      id="question_text" 
                                      name="question_text" 
                                      rows="3" 
                                      placeholder="กรอกคำถาม เช่น: 4.2.1.1 วิธีการติดตั้ง หมายรวมถึง"
                                      required>{{ old('question_text', $question->question_text) }}</textarea>
                            @error('question_text')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            
                            <!-- Live Preview สำหรับเลขข้อ -->
                            <div id="question-preview" class="mt-2" style="display: none;">
                                <div class="card border-info">
                                    <div class="card-header bg-info text-white py-2">
                                        <small><i class="fas fa-eye me-1"></i>ตัวอย่างการแสดงผล</small>
                                    </div>
                                    <div class="card-body py-2">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <strong>เลขข้อ:</strong>
                                                <div id="preview-number" class="text-primary"></div>
                                            </div>
                                            <div class="col-md-9">
                                                <strong>ข้อกำหนด:</strong>
                                                <div id="preview-content" class="text-dark"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="description" class="form-label">คำอธิบายเพิ่มเติม</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="3" 
                                      placeholder="กรอกคำอธิบายเพิ่มเติม (ถ้ามี)">{{ old('description', $question->description) }}</textarea>
                            @error('description')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="question_type" class="form-label">ประเภทคำตอบ <span class="text-danger">*</span></label>
                                    <select class="form-select @error('question_type') is-invalid @enderror" 
                                            id="question_type" 
                                            name="question_type" 
                                            required>
                                        @php
                                            $currentType = old('question_type', $question->question_type);
                                            // Debug: แสดงค่าที่ถูกส่งมา
                                            echo "<!-- Debug: question_type = " . var_export($question->question_type, true) . " -->";
                                            echo "<!-- Debug: currentType = " . var_export($currentType, true) . " -->";
                                        @endphp
                                        <option value="yes_no" {{ $currentType == 'yes_no' ? 'selected' : '' }}>ใช่/ไม่ใช่ (Yes/No)</option>
                                        <option value="multiple_choice" {{ $currentType == 'multiple_choice' ? 'selected' : '' }}>ตัวเลือก (Multiple Choice)</option>
                                        <option value="text" {{ $currentType == 'text' ? 'selected' : '' }}>ข้อความ (Text)</option>
                                        <option value="" {{ $currentType === null || $currentType === '' ? 'selected' : '' }}>ไม่มี</option>
                                    </select>
                                    @error('question_type')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                    <small class="form-text text-muted">เลือกประเภทคำตอบที่ต้องการ</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="use_in_evaluation" class="form-label">ใช้ในการประเมิน</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" 
                                               id="use_in_evaluation" 
                                               name="use_in_evaluation" 
                                               value="1" 
                                               {{ old('use_in_evaluation') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="use_in_evaluation">
                                            ใช้คำถามนี้ในการประเมินผล
                                        </label>
                                    </div>
                                    <small class="form-text text-muted">คำถามนี้จะถูกนำมาคำนวณผลการประเมิน</small>
                                </div>
                            </div>
                        </div>

                        <!-- Choice Options for Multiple Choice Questions -->
                        <div id="choice_options_container" class="mb-3" style="display: {{ $question->question_type === 'multiple_choice' ? 'block' : 'none' }};">
                            <label class="form-label">ตัวเลือก <span class="text-danger">*</span></label>
                            <div id="choices_container">
                                @if($question->question_type === 'multiple_choice' && $question->choices)
                                    @foreach(json_decode($question->choices) as $index => $choice)
                                    <div class="choice-item mb-2">
                                        <div class="input-group">
                                            <span class="input-group-text">{{ $index + 1 }}</span>
                                            <input type="text" 
                                                   class="form-control choice-input" 
                                                   name="choices[]" 
                                                   value="{{ $choice }}"
                                                   placeholder="กรอกตัวเลือกที่ {{ $index + 1 }}">
                                            <button type="button" class="btn btn-outline-danger remove-choice-btn">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    @endforeach
                                @else
                                    <div class="choice-item mb-2">
                                        <div class="input-group">
                                            <span class="input-group-text">1</span>
                                            <input type="text" 
                                                   class="form-control choice-input" 
                                                   name="choices[]" 
                                                   placeholder="กรอกตัวเลือกที่ 1">
                                            <button type="button" class="btn btn-outline-danger remove-choice-btn">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="choice-item mb-2">
                                        <div class="input-group">
                                            <span class="input-group-text">2</span>
                                            <input type="text" 
                                                   class="form-control choice-input" 
                                                   name="choices[]" 
                                                   placeholder="กรอกตัวเลือกที่ 2">
                                            <button type="button" class="btn btn-outline-danger remove-choice-btn">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                    </div>
                                @endif
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" id="add-choice-btn">
                                <i class="fas fa-plus me-1"></i>
                                เพิ่มตัวเลือก
                            </button>
                            <small class="form-text text-muted">กรอกตัวเลือกสำหรับคำถามแบบตัวเลือก</small>
                        </div>
                    </div>
                    
                    <div class="alert alert-info col-md-4">
                        <i class="fas fa-info-circle me-1"></i>
                        <strong>หมายเหตุ:</strong>
                        <ul class="mb-0 mt-2">
                            <li>ใช้การลากในหน้าแก้ไขกลุ่มคำถามเพื่อกำหนดความสัมพันธ์แม่-ลูก</li>
                            <li>เงื่อนไขการเชื่อมต่อ (AND/OR) จะแสดงในหน้าแก้ไขกลุ่มคำถาม</li>
                        </ul>
                    </div>

                    
                </div>

                <div class="d-flex justify-content-end gap-2">
                    <a href="{{ route('admin.question-groups.edit', $question->questionGroup) }}" class="btn btn-secondary">
                        <i class="fas fa-times me-1"></i>
                        ยกเลิก
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save me-1"></i>
                        บันทึกการเปลี่ยนแปลง
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const questionTypeSelect = document.getElementById('question_type');
    const choiceOptionsContainer = document.getElementById('choice_options_container');
    const addChoiceBtn = document.getElementById('add-choice-btn');
    const choicesContainer = document.getElementById('choices_container');
    const questionTextArea = document.getElementById('question_text');
    const questionPreview = document.getElementById('question-preview');
    const previewNumber = document.getElementById('preview-number');
    const previewContent = document.getElementById('preview-content');

    // Show/hide choice options based on question type
    questionTypeSelect.addEventListener('change', function() {
        const selectedType = this.value;
        const useInEvaluationCheckbox = document.getElementById('use_in_evaluation');
        const choiceInputs = document.querySelectorAll('.choice-input');
        
        if (selectedType === 'multiple_choice') {
            choiceOptionsContainer.style.display = 'block';
            // multiple_choice ไม่ใช้ในการประเมินเสมอ
            useInEvaluationCheckbox.checked = false;
            useInEvaluationCheckbox.disabled = true;
            // เพิ่ม hidden input เพื่อส่งค่า 0
            addHiddenInput('use_in_evaluation', '0');
            // เพิ่ม required ให้ choice inputs
            choiceInputs.forEach(input => {
                input.required = true;
            });
        } else if (selectedType === 'text') {
            choiceOptionsContainer.style.display = 'none';
            // text ไม่ใช้ในการประเมินเสมอ
            useInEvaluationCheckbox.checked = false;
            useInEvaluationCheckbox.disabled = true;
            // เพิ่ม hidden input เพื่อส่งค่า 0
            addHiddenInput('use_in_evaluation', '0');
            // ลบ required จาก choice inputs
            choiceInputs.forEach(input => {
                input.required = false;
            });
        } else if (selectedType === 'yes_no') {
            choiceOptionsContainer.style.display = 'none';
            // yes_no สามารถเลือกใช้ในการประเมินได้
            useInEvaluationCheckbox.disabled = false;
            // ลบ hidden input ถ้ามี
            removeHiddenInput('use_in_evaluation');
            // ลบ required จาก choice inputs
            choiceInputs.forEach(input => {
                input.required = false;
            });
        } else if (selectedType === '') { // ไม่มี
            choiceOptionsContainer.style.display = 'none';
            // ไม่มี สามารถเลือกใช้ในการประเมินได้
            useInEvaluationCheckbox.disabled = false;
            // ลบ hidden input ถ้ามี
            removeHiddenInput('use_in_evaluation');
            // ลบ required จาก choice inputs
            choiceInputs.forEach(input => {
                input.required = false;
            });
        }
    });

    // Add new choice option
    function addChoice() {
        const choiceItems = document.querySelectorAll('.choice-item');
        const newIndex = choiceItems.length + 1;
        
        const newChoiceItem = document.createElement('div');
        newChoiceItem.className = 'choice-item mb-2';
        newChoiceItem.innerHTML = `
            <div class="input-group">
                <span class="input-group-text">${newIndex}</span>
                <input type="text" 
                       class="form-control choice-input" 
                       name="choices[]" 
                       placeholder="กรอกตัวเลือกที่ ${newIndex}">
                <button type="button" 
                        class="btn btn-outline-danger remove-choice-btn">
                    <i class="fas fa-trash"></i>
                </button>
            </div>
        `;
        
        choicesContainer.appendChild(newChoiceItem);
        updateChoiceNumbers();
        updateRemoveButtons();
        
        // เพิ่ม required ถ้าประเภทคำถามเป็น multiple_choice
        const questionType = document.getElementById('question_type').value;
        if (questionType === 'multiple_choice') {
            const newInput = newChoiceItem.querySelector('.choice-input');
            newInput.required = true;
        }
    }

    // Remove choice option
    function removeChoice(button) {
        const choiceItem = button.closest('.choice-item');
        choiceItem.remove();
        updateChoiceNumbers();
        updateRemoveButtons();
    }

    // Update choice numbers
    function updateChoiceNumbers() {
        const choiceItems = document.querySelectorAll('.choice-item');
        choiceItems.forEach((item, index) => {
            const numberSpan = item.querySelector('.input-group-text');
            numberSpan.textContent = index + 1;
            
            const input = item.querySelector('.choice-input');
            input.placeholder = `กรอกตัวเลือกที่ ${index + 1}`;
        });
    }

    // Show/hide remove buttons based on number of choices
    function updateRemoveButtons() {
        const choiceItems = document.querySelectorAll('.choice-item');
        const removeButtons = document.querySelectorAll('.remove-choice-btn');
        
        removeButtons.forEach(button => {
            if (choiceItems.length > 2) {
                button.style.display = 'block';
            } else {
                button.style.display = 'none';
            }
        });
    }

    // Event listeners
    addChoiceBtn.addEventListener('click', addChoice);
    
    // Event delegation for remove buttons
    choicesContainer.addEventListener('click', function(e) {
        if (e.target.closest('.remove-choice-btn')) {
            removeChoice(e.target.closest('.remove-choice-btn'));
        }
    });

    // Live preview for question text
    questionTextArea.addEventListener('input', function() {
        const text = this.value;
        let previewNumberText = '';
        let previewContentText = '';

        // Extract number and content - รองรับรูปแบบ: 1.2, 1.2.3, 1.2.3.4, 1.2.3.4.5, etc.
        const numberMatch = text.match(/^(\d+(?:\.\d+)*)\s*(.+)$/);
        if (numberMatch) {
            previewNumberText = numberMatch[1]; // แสดงเฉพาะเลขข้อ ไม่มีคำว่า "ข้อ"
            previewContentText = numberMatch[2];
        } else {
            previewNumberText = '';
            previewContentText = text;
        }

        previewNumber.textContent = previewNumberText;
        previewContent.textContent = previewContentText;

        if (previewNumberText || previewContentText) {
            questionPreview.style.display = 'block';
        } else {
            questionPreview.style.display = 'none';
        }
    });

    // Initial setup
    updateRemoveButtons();
    
    // เรียกใช้ event listener ครั้งแรกเพื่อตั้งค่าตามประเภทคำถามปัจจุบัน
    questionTypeSelect.dispatchEvent(new Event('change'));
    
    // ตั้งค่าเริ่มต้นสำหรับ checkbox ตามประเภทคำถามที่ถูกบันทึก
    const currentQuestionType = questionTypeSelect.value;
    const useInEvaluationCheckbox = document.getElementById('use_in_evaluation');
    
    // Debug: แสดงค่าที่ถูกส่งมา
    console.log('Current question type:', currentQuestionType);
    console.log('Question type from database:', '{{ $question->question_type }}');
    
    if (currentQuestionType === 'multiple_choice' || currentQuestionType === 'text') {
        useInEvaluationCheckbox.checked = false;
        useInEvaluationCheckbox.disabled = true;
        addHiddenInput('use_in_evaluation', '0');
    } else {
        useInEvaluationCheckbox.disabled = false;
        removeHiddenInput('use_in_evaluation');
    }
});

// ฟังก์ชันเพิ่ม hidden input
function addHiddenInput(name, value) {
    // ลบ hidden input เดิมถ้ามี
    removeHiddenInput(name);
    
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = name;
    hiddenInput.value = value;
    hiddenInput.id = 'hidden_' + name;
    
    document.querySelector('form').appendChild(hiddenInput);
}

// ฟังก์ชันลบ hidden input
function removeHiddenInput(name) {
    const hiddenInput = document.getElementById('hidden_' + name);
    if (hiddenInput) {
        hiddenInput.remove();
    }
}
</script>
@endsection