@extends('layouts.admin')
@section('title','Questions')
@section('page-title','Question Bank')

@section('content')
{{-- Header --}}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
    <div>
        <h5 class="fw-bold mb-0">Question Bank</h5>
        <small class="text-muted">{{ $questions->total() }} questions total</small>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ route('admin.questions.csv-import') }}" class="btn btn-outline-success">
            <i class="bi bi-upload me-1"></i>CSV Import
        </a>
        <a href="{{ route('admin.questions.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg me-1"></i>Add Question
        </a>
    </div>
</div>

{{-- Filters --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3">
        <form method="GET" action="{{ route('admin.questions.index') }}">
            <div class="row g-2 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">Subject</label>
                    <select name="subject_id" class="form-select form-select-sm">
                        <option value="">All Subjects</option>
                        @foreach($subjects as $subject)
                            <option value="{{ $subject->id }}" {{ request('subject_id') == $subject->id ? 'selected' : '' }}>
                                {{ $subject->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Difficulty</label>
                    <select name="difficulty" class="form-select form-select-sm">
                        <option value="">All</option>
                        <option value="easy"   {{ request('difficulty') == 'easy'   ? 'selected' : '' }}>Easy</option>
                        <option value="medium" {{ request('difficulty') == 'medium' ? 'selected' : '' }}>Medium</option>
                        <option value="hard"   {{ request('difficulty') == 'hard'   ? 'selected' : '' }}>Hard</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small fw-semibold mb-1">Year</label>
                    <input type="number" name="year" class="form-control form-control-sm"
                           value="{{ request('year') }}" placeholder="e.g. 2023">
                </div>
                <div class="col-md-3">
                    <label class="form-label small fw-semibold mb-1">Search</label>
                    <input type="text" name="search" class="form-control form-control-sm"
                           value="{{ request('search') }}" placeholder="Search question text...">
                </div>
                <div class="col-md-2 d-flex gap-1">
                    <button type="submit" class="btn btn-primary btn-sm flex-grow-1">
                        <i class="bi bi-search me-1"></i>Filter
                    </button>
                    <a href="{{ route('admin.questions.index') }}" class="btn btn-light btn-sm">
                        <i class="bi bi-x"></i>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- Questions Table --}}
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-dark">
                <tr>
                    <th style="width:40%">Question</th>
                    <th>Subject</th>
                    <th>Year</th>
                    <th class="text-center">Difficulty</th>
                    <th class="text-center">Status</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($questions as $question)
                <tr>
                    <td>
                        <div class="small" style="max-width:400px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
                            {!! Str::limit(strip_tags($question->question_text), 100) !!}
                        </div>
                        @if($question->question_image)
                            <span class="badge bg-info text-dark mt-1"><i class="bi bi-image me-1"></i>Has Image</span>
                        @endif
                        @if($question->has_instruction)
                            <span class="badge bg-warning text-dark mt-1"><i class="bi bi-paragraph me-1"></i>Has Passage</span>
                        @endif
                    </td>
                    <td>
                        <span class="badge bg-secondary">{{ $question->subject->code }}</span>
                        <div class="small text-muted">{{ $question->topic->name ?? '—' }}</div>
                    </td>
                    <td class="small">{{ $question->year ?? '—' }}</td>
                    <td class="text-center">
                        @php $dc = ['easy'=>'success','medium'=>'warning','hard'=>'danger'][$question->difficulty] @endphp
                        <span class="badge bg-{{ $dc }} text-{{ $question->difficulty=='medium'?'dark':'' }}">
                            {{ ucfirst($question->difficulty) }}
                        </span>
                    </td>
                    <td class="text-center">
                        @if($question->is_active)
                            <span class="badge bg-success">Active</span>
                        @else
                            <span class="badge bg-secondary">Draft</span>
                        @endif
                    </td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center gap-1">
                            <a href="{{ route('admin.questions.show', $question) }}" class="btn btn-sm btn-outline-secondary" title="Preview">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="{{ route('admin.questions.edit', $question) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                <i class="bi bi-pencil"></i>
                            </a>
                            <form method="POST" action="{{ route('admin.questions.destroy', $question) }}"
                                  onsubmit="return confirm('Delete this question?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger" title="Delete"><i class="bi bi-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="text-center py-5 text-muted">
                        <i class="bi bi-question-circle" style="font-size:2.5rem"></i>
                        <p class="mt-2">No questions found.
                            <a href="{{ route('admin.questions.create') }}">Add your first question</a> or
                            <a href="{{ route('admin.questions.csv-import') }}">import via CSV</a>.
                        </p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($questions->hasPages())
    <div class="card-footer bg-white border-top">
        {{ $questions->links() }}
    </div>
    @endif
</div>
@endsection