@extends('admin.layout')
@section('title', 'Questions')
@section('subtitle', $questions->total() . ' total')

@section('content')
<div class="bg-white rounded-lg shadow-sm border border-slate-200 p-4 mb-4">
    <form method="GET" class="flex flex-wrap gap-3 items-end">
        <div class="flex-1 min-w-48">
            <label class="block text-xs text-slate-500 mb-1">Search question</label>
            <input type="text" name="search" value="{{ request('search') }}" class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm">
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1">Category</label>
            <select name="category_id" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All</option>
                @foreach ($categories as $c)
                    <option value="{{ $c->id }}" @selected(request('category_id') == $c->id)>{{ $c->label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1">Difficulty</label>
            <select name="difficulty" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All</option>
                <option value="easy" @selected(request('difficulty') === 'easy')>Easy</option>
                <option value="medium" @selected(request('difficulty') === 'medium')>Medium</option>
                <option value="hard" @selected(request('difficulty') === 'hard')>Hard</option>
            </select>
        </div>
        <div>
            <label class="block text-xs text-slate-500 mb-1">Active</label>
            <select name="is_active" class="rounded-md border border-slate-300 px-3 py-2 text-sm">
                <option value="">All</option>
                <option value="1" @selected(request('is_active') === '1')>Active only</option>
                <option value="0" @selected(request('is_active') === '0')>Inactive only</option>
            </select>
        </div>
        <button class="bg-slate-900 text-white px-4 py-2 rounded-md text-sm">Filter</button>
        <a href="{{ route('admin.questions.create') }}" class="ml-auto bg-emerald-600 text-white px-4 py-2 rounded-md text-sm">+ New Question</a>
    </form>
</div>

<div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-slate-50 border-b text-xs uppercase text-slate-500">
            <tr>
                <th class="text-left px-4 py-3">Question</th>
                <th class="text-left px-4 py-3">Category</th>
                <th class="text-left px-4 py-3">Difficulty</th>
                <th class="text-center px-4 py-3">Active</th>
                <th class="px-4 py-3"></th>
            </tr>
        </thead>
        <tbody class="divide-y">
            @forelse ($questions as $q)
                <tr class="hover:bg-slate-50">
                    <td class="px-4 py-3 max-w-xl">
                        <div class="font-medium">{{ $q->question }}</div>
                        <div class="text-xs text-slate-500 mt-1">
                            Correct: <span class="text-emerald-700">{{ $q->options[$q->correct_index] ?? '—' }}</span>
                        </div>
                    </td>
                    <td class="px-4 py-3">{{ $q->category->label ?? '—' }}</td>
                    <td class="px-4 py-3">
                        <span class="text-xs px-2 py-0.5 rounded-full
                        {{ $q->difficulty === 'easy' ? 'bg-emerald-100 text-emerald-700' :
                           ($q->difficulty === 'medium' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                            {{ $q->difficulty }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <form method="POST" action="{{ route('admin.questions.toggle', $q) }}" class="inline">
                            @csrf
                            <button class="text-lg">{{ $q->is_active ? '✅' : '⬜' }}</button>
                        </form>
                    </td>
                    <td class="px-4 py-3 text-right whitespace-nowrap">
                        <a href="{{ route('admin.questions.edit', $q) }}" class="text-blue-600 text-sm hover:underline">Edit</a>
                        <form method="POST" action="{{ route('admin.questions.destroy', $q) }}" class="inline ml-2" onsubmit="return confirm('Delete?')">
                            @csrf @method('DELETE')
                            <button class="text-red-600 text-sm hover:underline">Delete</button>
                        </form>
                    </td>
                </tr>
            @empty
                <tr><td colspan="5" class="px-4 py-8 text-center text-slate-500">No questions match.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">{{ $questions->links() }}</div>
@endsection