{{-- resources/views/questions/edit.blade.php --}}

@extends('layouts.app')

@section('content')
<div class="max-w-2xl mx-auto">
    <!-- Header -->
    <div class="mb-8">
        <div class="flex items-center mb-4">
            <a href="{{ route('questions.index', $survey) }}" class="text-slate-600 hover:text-slate-900 mr-4">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </a>
            <h1 class="text-2xl font-bold text-slate-900">Edit Pertanyaan</h1>
        </div>
        <p class="text-slate-600">Survey: {{ $survey->title }}</p>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-6">
        <form id="question-form" action="{{ route('questions.update', [$survey, $question]) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="space-y-6">
                <div>
                    <label for="question_text" class="block text-sm font-medium text-slate-700 mb-2">
                        Pertanyaan <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           name="question_text" 
                           id="question_text"
                           value="{{ old('question_text', $question->question_text) }}" 
                           class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('question_text') border-red-300 @enderror" 
                           placeholder="Masukkan pertanyaan"
                           required>
                    @error('question_text')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="question_type" class="block text-sm font-medium text-slate-700 mb-2">
                        Jenis Pertanyaan <span class="text-red-500">*</span>
                    </label>
                    <select name="question_type" 
                            id="question_type" 
                            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors @error('question_type') border-red-300 @enderror" 
                            required>
                        <option value="">Pilih jenis pertanyaan</option>
                        <option value="text" {{ old('question_type', $question->question_type) == 'text' ? 'selected' : '' }}>Teks</option>
                        <option value="radio" {{ old('question_type', $question->question_type) == 'radio' ? 'selected' : '' }}>Radio Button</option>
                        <option value="checkbox" {{ old('question_type', $question->question_type) == 'checkbox' ? 'selected' : '' }}>Checkbox</option>
                    </select>
                    @error('question_type')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex items-center">
                    <input type="checkbox" 
                           name="is_required" 
                           value="1" 
                           id="is_required"
                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded"
                           {{ old('is_required', $question->is_required) ? 'checked' : '' }}>
                    <label for="is_required" class="ml-2 block text-sm text-slate-700">
                        Wajib diisi
                    </label>
                </div>

                <!-- Pilihan jawaban (khusus radio/checkbox) -->
                <div id="options-section" class="{{ in_array(old('question_type', $question->question_type), ['radio','checkbox']) ? '' : 'hidden' }}">
                    <label class="block text-sm font-medium text-slate-700 mb-2">Pilihan Jawaban</label>
                    <div id="options-list"></div>
                    <button type="button" id="add-option" class="mt-2 px-3 py-1 bg-blue-500 text-white rounded">Tambah Opsi</button>
                    <input type="hidden" name="options" id="options-json">
                </div>

                <div class="flex items-center justify-end space-x-4 pt-6 border-t border-slate-100">
                    <a href="{{ route('questions.index', $survey) }}" 
                       class="px-4 py-2 text-slate-700 bg-slate-100 hover:bg-slate-200 rounded-lg font-medium transition-colors duration-200">
                        Batal
                    </a>
                    <button type="submit" 
                            class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-medium transition-colors duration-200">
                        Simpan Perubahan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
const optionsSection = document.getElementById('options-section');
const optionsList = document.getElementById('options-list');
const optionsJson = document.getElementById('options-json');
const questionType = document.getElementById('question_type');
const form = document.getElementById('question-form');

// Inisialisasi dari PHP
@php
    $optionsArray = $question->options_array;
    if (!is_array($optionsArray) || empty($optionsArray)) {
        $optionsArray = [''];
    }
@endphp

const existingOptions = {!! json_encode($optionsArray) !!};

function renderOptions(options) {
    optionsList.innerHTML = '';
    (options.length ? options : ['']).forEach((val, idx) => {
        const row = document.createElement('div');
        row.className = 'flex items-center mb-2';
        row.innerHTML = `
            <input type="text" class="form-input flex-1 mr-2" value="${val}" placeholder="Opsi ${idx+1}">
            <button type="button" class="remove-option px-2 py-1 bg-red-500 text-white rounded" ${options.length === 1 ? 'disabled' : ''}>-</button>
        `;
        optionsList.appendChild(row);
    });
    updateOptionsJson();
}

function updateOptionsJson() {
    const values = Array.from(optionsList.querySelectorAll('input[type=text]'))
        .map(i => i.value.trim()).filter(Boolean);
    optionsJson.value = JSON.stringify(values);
}

optionsList.addEventListener('input', updateOptionsJson);
optionsList.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-option')) {
        if (optionsList.children.length > 1) {
            e.target.parentElement.remove();
            updateOptionsJson();
        }
    }
});
document.getElementById('add-option').onclick = function() {
    renderOptions([...Array.from(optionsList.querySelectorAll('input[type=text]')).map(i => i.value), '']);
};

questionType.addEventListener('change', function() {
    if (['radio','checkbox'].includes(this.value)) {
        optionsSection.classList.remove('hidden');
        if (optionsList.children.length === 0) renderOptions(['']);
    } else {
        optionsSection.classList.add('hidden');
        optionsList.innerHTML = '';
        optionsJson.value = '';
    }
});

form.addEventListener('submit', function(e) {
    if (['radio','checkbox'].includes(questionType.value)) {
        updateOptionsJson();
        if (optionsJson.value === '[]') {
            e.preventDefault();
            alert('Minimal harus ada 1 pilihan jawaban.');
        }
    }
});

// Render awal
renderOptions(existingOptions);
</script>
@endsection