@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">Tambah 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.store', $survey) }}" method="POST">
            @csrf

            <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"
                           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"
                           value="{{ old('question_text') }}"
                           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') == 'text' ? 'selected' : '' }}>Teks</option>
                        <option value="radio" {{ old('question_type') == 'radio' ? 'selected' : '' }}>Radio Button</option>
                        <option value="checkbox" {{ old('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') ? '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-container" class="hidden">
                    <label class="block text-sm font-medium text-slate-700 mb-3">Pilihan Jawaban</label>
                    <div id="options-list" class="space-y-3"></div>
                    <button type="button" 
                            onclick="addOption()" 
                            class="mt-3 inline-flex items-center px-3 py-1.5 bg-emerald-50 text-emerald-700 rounded-lg text-sm font-medium hover:bg-emerald-100 transition-colors">
                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        Tambah Pilihan
                    </button>
                </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 Pertanyaan
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

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

    questionType.addEventListener('change', () => {
        if (['radio', 'checkbox'].includes(questionType.value)) {
            optionsContainer.classList.remove('hidden');
            if (optionsList.children.length === 0) {
                addOption();
            }
        } else {
            optionsContainer.classList.add('hidden');
            optionsList.innerHTML = '';
        }
    });

    function addOption(value = '') {
        const wrapper = document.createElement('div');
        wrapper.className = 'flex gap-2 items-center';

        const input = document.createElement('input');
        input.type = 'text';
        input.name = 'options[]';
        input.className = 'flex-1 px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors';
        input.placeholder = 'Isi pilihan jawaban...';
        input.value = value;

        const removeBtn = document.createElement('button');
        removeBtn.type = 'button';
        removeBtn.className = 'inline-flex items-center px-2 py-2 text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg transition-colors';
        removeBtn.innerHTML = `
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
            </svg>
        `;
        removeBtn.onclick = () => wrapper.remove();

        wrapper.appendChild(input);
        wrapper.appendChild(removeBtn);
        optionsList.appendChild(wrapper);
    }

    form.addEventListener('submit', (e) => {
        if (['radio', 'checkbox'].includes(questionType.value)) {
            const inputs = optionsList.querySelectorAll('input[type="text"]');
            if (inputs.length === 0 || Array.from(inputs).filter(i => i.value.trim()).length === 0) {
                e.preventDefault();
                alert('Minimal harus ada 1 pilihan jawaban.');
            }
        }
    });
</script>
@endsection