@extends('layouts.app')
@section('title', $exam->title . ' - 作答中')
@section('content')
@php $questions = $exam->questions; $total = $questions->count(); @endphp

<div class="max-w-6xl mx-auto" x-data="examApp()" x-init="startTimer()">
    <form action="{{ route('answers.submit', $exam) }}" method="POST" x-ref="examForm" id="examForm">
        @csrf

        {{-- 所有題目的 hidden inputs（含未作答的） --}}
        @foreach($questions as $i => $q)
            <input type="hidden" name="answers[{{ $i }}][question_id]" value="{{ $q->id }}">
            <input type="hidden" :name="'answers[{{ $i }}][answer]'" :value="answers[{{ $i }}] || ''">
        @endforeach

        <div class="flex gap-4">
            {{-- ====== 左側：題目區 ====== --}}
            <div class="flex-1 min-w-0">
                {{-- 頂部資訊列 --}}
                <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 px-5 py-3 mb-4 flex items-center justify-between">
                    <div class="min-w-0">
                        <h1 class="font-bold text-gray-900 dark:text-white text-sm truncate" title="{{ $exam->title }}">{{ $exam->title }}</h1>
                        <div class="flex gap-2 mt-1">
                            @if($exam->subject)<span class="px-2 py-0.5 text-xs font-bold rounded-full bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">{{ $exam->subject->name }}</span>@endif
                            <span class="text-xs text-gray-400">共 {{ $total }} 題</span>
                        </div>
                    </div>
                    {{-- 倒數計時 --}}
                    <div class="flex items-center gap-2 px-3 py-1.5 rounded-lg flex-shrink-0"
                         :class="timeWarning ? 'bg-red-100 dark:bg-red-900/30' : 'bg-gray-100 dark:bg-slate-800'">
                        <svg class="w-5 h-5" :class="timeWarning ? 'text-red-600 animate-pulse' : 'text-gray-500'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        <span class="font-mono text-lg font-bold" :class="timeWarning ? 'text-red-600 dark:text-red-400' : 'text-gray-700 dark:text-gray-300'" x-text="timeDisplay"></span>
                    </div>
                </div>

                {{-- 題目卡片 --}}
                @foreach($questions as $i => $question)
                <div x-show="current === {{ $i }}" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-x-4" x-transition:enter-end="opacity-100 translate-x-0"
                     class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">

                    {{-- 題號 + 標記 --}}
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <span class="w-10 h-10 rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 flex items-center justify-center text-white font-bold">{{ $i + 1 }}</span>
                            <div class="flex gap-2">
                                <span class="px-2 py-0.5 text-xs rounded-full font-medium bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400">
                                    {{ match($question->question_type) { 'multiple_choice' => '選擇題', 'true_false' => '是非題', 'fill_blank' => '填充題', 'essay' => '問答題', default => '簡答題' } }}
                                </span>
                                <span class="px-2 py-0.5 text-xs rounded-full font-medium {{ $question->difficulty === 1 ? 'bg-green-100 text-green-700' : ($question->difficulty === 3 ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                                    {{ $question->difficulty_label }}
                                </span>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-xs text-gray-400">{{ $question->points ?? 1 }} 分</span>
                            <button type="button" @click="toggleMark({{ $i }})"
                                    class="flex items-center gap-1 px-2.5 py-1.5 rounded-lg text-xs font-medium transition-colors"
                                    :class="marked.has({{ $i }}) ? 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400' : 'bg-gray-100 text-gray-500 dark:bg-slate-800 dark:text-gray-400 hover:bg-amber-50'">
                                <svg class="w-4 h-4" :fill="marked.has({{ $i }}) ? 'currentColor' : 'none'" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
                                <span x-text="marked.has({{ $i }}) ? '已標記' : '標記'"></span>
                            </button>
                        </div>
                    </div>

                    {{-- 題目內容 --}}
                    <div class="text-gray-900 dark:text-white text-base leading-relaxed mb-6 whitespace-pre-line">{{ $question->question_text }}</div>

                    {{-- 題目圖片 --}}
                    @if($question->image_path)
                    <div class="mb-6">
                        <img src="{{ asset('storage/' . $question->image_path) }}" alt="題目圖片" class="max-w-full rounded-lg border border-gray-200 dark:border-slate-700 shadow-sm cursor-pointer hover:shadow-md transition-shadow" onclick="window.open(this.src, '_blank')">
                    </div>
                    @endif

                    {{-- 選項 --}}
                    @if($question->question_type === 'multiple_choice' && $question->options)
                    <div class="space-y-2">
                        @foreach($question->options as $key => $optionText)
                        <label class="flex items-center gap-3 p-3.5 rounded-lg border-2 cursor-pointer transition-all"
                               :class="answers[{{ $i }}] === '{{ $key }}' ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20 shadow-sm' : 'border-gray-200 dark:border-slate-700 hover:border-blue-300'"
                               @click="setAnswer({{ $i }}, '{{ $key }}')">
                            <span class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 transition-colors"
                                  :class="answers[{{ $i }}] === '{{ $key }}' ? 'bg-blue-600 text-white' : 'bg-gray-200 dark:bg-slate-700 text-gray-600 dark:text-gray-300'">{{ $key }}</span>
                            <span class="text-gray-700 dark:text-gray-300">{{ $optionText }}</span>
                        </label>
                        @endforeach
                    </div>

                    @elseif($question->question_type === 'true_false')
                    <div class="flex gap-4">
                        <button type="button" @click="setAnswer({{ $i }}, 'O')"
                                class="flex-1 flex items-center justify-center gap-2 p-5 rounded-lg border-2 transition-all"
                                :class="answers[{{ $i }}] === 'O' ? 'border-green-500 bg-green-50 dark:bg-green-900/20 shadow-sm' : 'border-gray-200 dark:border-slate-700 hover:border-green-300'">
                            <span class="text-2xl font-bold" :class="answers[{{ $i }}] === 'O' ? 'text-green-600' : 'text-gray-400'">O</span>
                            <span class="text-gray-600 dark:text-gray-400">正確</span>
                        </button>
                        <button type="button" @click="setAnswer({{ $i }}, 'X')"
                                class="flex-1 flex items-center justify-center gap-2 p-5 rounded-lg border-2 transition-all"
                                :class="answers[{{ $i }}] === 'X' ? 'border-red-500 bg-red-50 dark:bg-red-900/20 shadow-sm' : 'border-gray-200 dark:border-slate-700 hover:border-red-300'">
                            <span class="text-2xl font-bold" :class="answers[{{ $i }}] === 'X' ? 'text-red-600' : 'text-gray-400'">X</span>
                            <span class="text-gray-600 dark:text-gray-400">錯誤</span>
                        </button>
                    </div>

                    @else
                    <textarea rows="4" @input="setAnswer({{ $i }}, $event.target.value)" :value="answers[{{ $i }}] || ''"
                              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"
                              placeholder="請輸入您的答案..."></textarea>
                    @endif
                </div>
                @endforeach

                {{-- 上一題 / 下一題 --}}
                <div class="flex items-center justify-between mt-4">
                    <button type="button" @click="prev()" :disabled="current === 0"
                            :class="current === 0 ? 'opacity-30 cursor-not-allowed' : 'hover:bg-gray-300 dark:hover:bg-slate-600'"
                            class="flex items-center gap-2 px-5 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium transition-colors">
                        <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="M15 19l-7-7 7-7"/></svg>
                        上一題
                    </button>
                    <span class="text-sm text-gray-500 dark:text-gray-400">第 <span x-text="current + 1" class="font-bold"></span> / {{ $total }} 題</span>
                    <template x-if="current < {{ $total - 1 }}">
                        <button type="button" @click="next()"
                                class="flex items-center gap-2 px-5 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors">
                            下一題
                            <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="M9 5l7 7-7 7"/></svg>
                        </button>
                    </template>
                    <template x-if="current === {{ $total - 1 }}">
                        <button type="button" @click="showSubmitConfirm = true"
                                class="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
                            交卷
                            <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="M5 13l4 4L19 7"/></svg>
                        </button>
                    </template>
                </div>
            </div>

            {{-- ====== 右側：題號面板 ====== --}}
            <div class="hidden lg:block w-64 flex-shrink-0">
                <div class="sticky top-4 space-y-4">
                    {{-- 計時器 --}}
                    <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4 text-center">
                        <p class="text-xs text-gray-400 mb-1">作答時間</p>
                        <p class="font-mono text-2xl font-bold" :class="timeWarning ? 'text-red-600' : 'text-gray-800 dark:text-white'" x-text="timeDisplay"></p>
                    </div>

                    {{-- 題號導覽 --}}
                    <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4">
                        <p class="text-xs font-bold text-gray-500 dark:text-gray-400 mb-3 uppercase tracking-wider">答題狀態</p>
                        <div class="grid grid-cols-5 gap-1.5">
                            @foreach($questions as $i => $q)
                            <button type="button" @click="goTo({{ $i }})"
                                    class="w-full aspect-square rounded-lg text-xs font-bold flex items-center justify-center transition-all relative"
                                    :class="{
                                        'ring-2 ring-blue-500 ring-offset-1': current === {{ $i }},
                                        'bg-blue-600 text-white': answers[{{ $i }}] && current !== {{ $i }},
                                        'bg-gray-100 dark:bg-slate-800 text-gray-500 dark:text-gray-400 hover:bg-gray-200': !answers[{{ $i }}] && current !== {{ $i }},
                                        'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300': current === {{ $i }} && !answers[{{ $i }}],
                                        'bg-blue-700 text-white ring-2 ring-blue-500 ring-offset-1': current === {{ $i }} && answers[{{ $i }}],
                                    }">
                                {{ $i + 1 }}
                                <span x-show="marked.has({{ $i }})" class="absolute -top-1 -right-1 w-3 h-3 bg-amber-400 rounded-full border-2 border-white dark:border-slate-900"></span>
                            </button>
                            @endforeach
                        </div>
                        {{-- 圖例 --}}
                        <div class="mt-4 space-y-1.5 text-xs text-gray-500 dark:text-gray-400">
                            <div class="flex items-center gap-2"><span class="w-4 h-4 rounded bg-blue-600"></span> 已作答</div>
                            <div class="flex items-center gap-2"><span class="w-4 h-4 rounded bg-gray-100 dark:bg-slate-800 border border-gray-300 dark:border-slate-600"></span> 未作答</div>
                            <div class="flex items-center gap-2"><span class="w-4 h-4 rounded bg-gray-200 relative"><span class="absolute -top-0.5 -right-0.5 w-2 h-2 bg-amber-400 rounded-full"></span></span> 已標記</div>
                        </div>
                    </div>

                    {{-- 統計 --}}
                    <div class="bg-white dark:bg-slate-900 rounded-xl shadow border border-gray-100 dark:border-slate-800 p-4 space-y-2 text-sm">
                        <div class="flex justify-between"><span class="text-gray-500">已作答</span><span class="font-bold text-blue-600" x-text="answeredCount + ' / {{ $total }}'"></span></div>
                        <div class="flex justify-between"><span class="text-gray-500">已標記</span><span class="font-bold text-amber-600" x-text="marked.size"></span></div>
                        <div class="flex justify-between"><span class="text-gray-500">未作答</span><span class="font-bold text-gray-600" x-text="{{ $total }} - answeredCount"></span></div>
                        <div class="w-full bg-gray-200 dark:bg-slate-700 rounded-full h-2 mt-2">
                            <div class="bg-blue-600 h-2 rounded-full transition-all" :style="'width:' + (answeredCount/{{ $total }}*100) + '%'"></div>
                        </div>
                    </div>

                    {{-- 交卷按鈕 --}}
                    <button type="button" @click="showSubmitConfirm = true"
                            class="w-full py-3 bg-gradient-to-r from-green-600 to-emerald-600 text-white font-bold rounded-xl hover:shadow-lg transition-all text-center">
                        交卷
                    </button>
                </div>
            </div>
        </div>

        {{-- 手機版底部工具列 --}}
        <div class="lg:hidden fixed bottom-0 left-0 right-0 bg-white/95 dark:bg-slate-900/95 backdrop-blur border-t border-gray-200 dark:border-slate-700 px-4 py-3 z-40 flex items-center justify-between">
            <button type="button" @click="prev()" :disabled="current===0" class="p-2 rounded-lg bg-gray-200 dark:bg-slate-700" :class="current===0&&'opacity-30'">
                <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" 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"/></svg>
            </button>
            <button type="button" @click="showNav = !showNav" class="px-3 py-1.5 bg-gray-100 dark:bg-slate-800 rounded-lg text-sm font-bold text-gray-700 dark:text-gray-300">
                <span x-text="(current+1) + ' / {{ $total }}'"></span>
                <span class="text-xs text-gray-400 ml-1" x-text="'(已答 ' + answeredCount + ')'"></span>
            </button>
            <div class="flex gap-2">
                <button type="button" @click="toggleMark(current)" class="p-2 rounded-lg" :class="marked.has(current) ? 'bg-amber-100 text-amber-600' : 'bg-gray-200 dark:bg-slate-700 text-gray-500'">
                    <svg class="w-5 h-5" :fill="marked.has(current)?'currentColor':'none'" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
                </button>
                <button type="button" @click="current < {{ $total - 1 }} ? next() : showSubmitConfirm = true"
                        class="p-2 rounded-lg" :class="current === {{ $total - 1 }} ? 'bg-green-600 text-white' : 'bg-blue-600 text-white'">
                    <svg x-show="current < {{ $total - 1 }}" 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="M9 5l7 7-7 7"/></svg>
                    <svg x-show="current === {{ $total - 1 }}" 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="M5 13l4 4L19 7"/></svg>
                </button>
            </div>
        </div>

        {{-- 手機版題號面板（彈出） --}}
        <div x-show="showNav" x-transition x-cloak @click.self="showNav=false"
             class="lg:hidden fixed inset-0 bg-black/50 z-50 flex items-end">
            <div class="w-full bg-white dark:bg-slate-900 rounded-t-2xl p-5 max-h-[60vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-bold text-gray-900 dark:text-white">答題狀態</h3>
                    <button @click="showNav=false" class="text-gray-400 text-xl">&times;</button>
                </div>
                <div class="grid grid-cols-8 gap-2 mb-4">
                    @foreach($questions as $i => $q)
                    <button type="button" @click="goTo({{ $i }}); showNav=false"
                            class="aspect-square rounded-lg text-xs font-bold flex items-center justify-center relative"
                            :class="answers[{{ $i }}] ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-slate-800 text-gray-500'">
                        {{ $i + 1 }}
                        <span x-show="marked.has({{ $i }})" class="absolute -top-0.5 -right-0.5 w-2.5 h-2.5 bg-amber-400 rounded-full border-2 border-white dark:border-slate-900"></span>
                    </button>
                    @endforeach
                </div>
                <div class="flex gap-4 text-xs text-gray-500 mb-4">
                    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-blue-600"></span> 已答 <span x-text="answeredCount"></span></span>
                    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-gray-200 dark:bg-slate-700"></span> 未答 <span x-text="{{ $total }}-answeredCount"></span></span>
                    <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-amber-400"></span> 標記 <span x-text="marked.size"></span></span>
                </div>
                <button type="button" @click="showSubmitConfirm=true; showNav=false" class="w-full py-3 bg-green-600 text-white font-bold rounded-xl">交卷</button>
            </div>
        </div>
    </form>

    {{-- 交卷確認 --}}
    <div x-show="showSubmitConfirm" x-transition x-cloak @click.self="showSubmitConfirm=false"
         class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl p-6 w-full max-w-md">
            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">確認交卷</h3>
            <div class="space-y-2 mb-4 text-sm">
                <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
                    <span class="text-gray-500">已作答</span>
                    <span class="font-bold text-blue-600" x-text="answeredCount + ' 題'"></span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
                    <span class="text-gray-500">未作答</span>
                    <span class="font-bold" :class="({{ $total }}-answeredCount)>0 ? 'text-red-600' : 'text-green-600'" x-text="({{ $total }}-answeredCount) + ' 題'"></span>
                </div>
                <div class="flex justify-between py-2 border-b border-gray-100 dark:border-slate-800">
                    <span class="text-gray-500">已標記待檢查</span>
                    <span class="font-bold text-amber-600" x-text="marked.size + ' 題'"></span>
                </div>
            </div>
            <p x-show="{{ $total }} - answeredCount > 0" class="text-sm text-red-600 dark:text-red-400 mb-4">
                還有 <span x-text="{{ $total }}-answeredCount" class="font-bold"></span> 題尚未作答，確定要交卷嗎？
            </p>
            <div class="flex gap-3">
                <button type="button" @click="showSubmitConfirm=false" class="flex-1 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">繼續作答</button>
                <button type="button" @click="submitExam()" class="flex-1 py-2.5 bg-green-600 text-white rounded-lg font-bold hover:bg-green-700">確定交卷</button>
            </div>
        </div>
    </div>
</div>

<script>
function examApp() {
    return {
        current: 0,
        answers: {},
        marked: new Set(),
        showNav: false,
        showSubmitConfirm: false,
        seconds: 0,
        timerInterval: null,
        timeLimitSeconds: {{ ($exam->end_time ? now()->diffInSeconds($exam->end_time, false) : 0) }},

        get answeredCount() {
            return Object.values(this.answers).filter(v => v !== '' && v !== null && v !== undefined).length;
        },
        get timeWarning() {
            return this.timeLimitSeconds > 0 && (this.timeLimitSeconds - this.seconds) <= 300;
        },
        get timeDisplay() {
            let s = this.timeLimitSeconds > 0 ? Math.max(0, this.timeLimitSeconds - this.seconds) : this.seconds;
            let h = Math.floor(s / 3600);
            let m = Math.floor((s % 3600) / 60);
            let sec = s % 60;
            return (h > 0 ? h + ':' : '') + String(m).padStart(2, '0') + ':' + String(sec).padStart(2, '0');
        },

        startTimer() {
            this.timerInterval = setInterval(() => {
                this.seconds++;
                // 時間到自動交卷
                if (this.timeLimitSeconds > 0 && this.seconds >= this.timeLimitSeconds) {
                    clearInterval(this.timerInterval);
                    alert('時間到，自動交卷！');
                    this.submitExam();
                }
            }, 1000);
        },

        setAnswer(index, value) { this.answers[index] = value; },
        toggleMark(index) {
            if (this.marked.has(index)) this.marked.delete(index);
            else this.marked.add(index);
            // Force reactivity
            this.marked = new Set(this.marked);
        },

        prev() { if (this.current > 0) this.current--; },
        next() { if (this.current < {{ $total - 1 }}) this.current++; },
        goTo(index) { this.current = index; },

        submitExam() {
            clearInterval(this.timerInterval);
            document.getElementById('examForm').submit();
        },
    };
}
</script>
<style>
[x-cloak] { display: none !important; }
</style>
@endsection