@extends('layouts.admin')
@section('title', '編輯題目 #' . $question->id)
@section('content')
<div class="max-w-3xl">
    <a href="{{ route('admin.questions.show', $question) }}" class="text-sm text-gray-500 dark:text-gray-400 hover:text-blue-600 mb-6 inline-block">&larr; 返回題目詳情</a>

    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6" x-data="{ qtype: '{{ $question->question_type }}' }">
        <form action="{{ route('admin.questions.update', $question) }}" method="POST" enctype="multipart/form-data">
            @csrf @method('PUT')
            <div class="space-y-5">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">考試科目</label>
                        <select name="subject_id" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            <option value="">-- 未分類 --</option>
                            @foreach($subjects as $sub)<option value="{{ $sub->id }}" {{ $question->subject_id == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>@endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">所屬考試</label>
                        <select name="exam_id" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            <option value="">-- 不歸屬任何考試 --</option>
                            @foreach($exams as $e)<option value="{{ $e->id }}" {{ $question->exam_id == $e->id ? 'selected' : '' }}>{{ $e->title }}</option>@endforeach
                        </select>
                    </div>
                </div>

                {{-- 公開狀態 --}}
                @if(auth()->user()->isAdmin() || $question->isOwnedBy(auth()->user()))
                <div class="flex items-center gap-3 p-3 rounded-lg {{ $question->is_public ? 'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800' : 'bg-gray-50 dark:bg-slate-800 border border-gray-200 dark:border-slate-700' }}">
                    <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">公開狀態：</span>
                    @if($question->is_public)
                        <span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">公用題庫</span>
                    @else
                        <span class="px-2.5 py-0.5 text-xs font-bold rounded-full bg-gray-200 text-gray-600 dark:bg-slate-700 dark:text-gray-400">私有</span>
                    @endif
                    <form action="{{ route('admin.questions.toggle_public', $question) }}" method="POST" class="ml-auto">
                        @csrf
                        <button class="px-3 py-1 text-xs font-medium rounded-lg transition-colors {{ $question->is_public ? 'bg-orange-100 text-orange-700 hover:bg-orange-200' : 'bg-green-100 text-green-700 hover:bg-green-200' }}">
                            {{ $question->is_public ? '轉為私有' : '轉為公開' }}
                        </button>
                    </form>
                </div>
                @endif

                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題目文字 *</label>
                    <textarea name="question_text" rows="4" required class="w-full px-4 py-3 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">{{ old('question_text', $question->question_text) }}</textarea>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題型 *</label>
                        <select name="question_type" x-model="qtype" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            <option value="multiple_choice">選擇題</option>
                            <option value="short_answer">簡答題</option>
                            <option value="essay">問答題</option>
                            <option value="true_false">是非題</option>
                            <option value="fill_blank">填充題</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">難度</label>
                        <select name="difficulty" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            <option value="1" {{ $question->difficulty === 1 ? 'selected' : '' }}>簡單</option>
                            <option value="2" {{ $question->difficulty === 2 ? 'selected' : '' }}>中等</option>
                            <option value="3" {{ $question->difficulty === 3 ? 'selected' : '' }}>困難</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">配分</label>
                        <input type="number" name="points" value="{{ old('points', $question->points ?? 1) }}" min="1" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">正確答案</label>
                        <input type="text" name="correct_answer" value="{{ old('correct_answer', $question->correct_answer) }}" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                    </div>
                </div>

                {{-- 題目圖片 --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">題目圖片</label>
                    @if($question->image_path)
                    <div class="mb-2 flex items-start gap-3">
                        <img src="{{ asset('storage/' . $question->image_path) }}" alt="題目圖片" class="max-h-40 rounded-lg border border-gray-200 dark:border-slate-700">
                        <label class="flex items-center gap-2 text-sm text-red-500 cursor-pointer">
                            <input type="checkbox" name="remove_image" value="1" class="rounded text-red-500"> 移除圖片
                        </label>
                    </div>
                    @endif
                    <input type="file" name="image" accept="image/*"
                           class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white text-sm file:mr-4 file:py-1 file:px-3 file:rounded-lg file:border-0 file:text-sm file:bg-blue-100 file:text-blue-700 dark:file:bg-blue-900/30 dark:file:text-blue-400 file:cursor-pointer">
                    <p class="mt-1 text-xs text-gray-400">支援 JPG、PNG、GIF 格式，上傳新圖片將取代現有圖片</p>
                </div>

                <!-- 選擇題選項 -->
                <div x-show="qtype === 'multiple_choice'">
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">選項</label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        @foreach(['A','B','C','D'] as $opt)
                        <div class="flex items-center gap-2">
                            <span class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 dark:bg-slate-700 text-sm font-bold text-gray-600 dark:text-gray-300">{{ $opt }}</span>
                            <input type="text" name="options[{{ $opt }}]" value="{{ old('options.' . $opt, $question->options[$opt] ?? '') }}" placeholder="選項 {{ $opt }}"
                                   class="flex-1 px-3 py-2 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500 text-sm">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="flex gap-3 mt-6">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">更新題目</button>
                <a href="{{ route('admin.questions.show', $question) }}" class="px-6 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">取消</a>
            </div>
        </form>
    </div>
</div>
@endsection