@extends('layouts.app')

@section('title', 'Question Bank')

@push('styles')
<style>
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
    .modal-content { background: var(--card-bg); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; }
    .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--card-border); display: flex; align-items: center; justify-content: space-between; }
    .modal-body { padding: 24px; }
    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--card-border); display: flex; justify-content: flex-end; gap: 8px; }
    .form-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-primary); margin-bottom: 4px; }
    .form-input { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-input:focus { border-color: var(--primary-light); }
    .form-select { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); }
    .form-select:focus { border-color: var(--primary-light); }
    .form-textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--card-border); border-radius: 6px; font-size: 14px; outline: none; transition: border-color 0.15s; background: var(--card-bg); color: var(--text-primary); resize: vertical; min-height: 80px; }
    .form-textarea:focus { border-color: var(--primary-light); }
    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; border: none; cursor: pointer; transition: all 0.15s; text-decoration: none; }
    .btn-primary { background: var(--primary); color: white; }
    .btn-primary:hover { background: var(--primary-dark); }
    .btn-outline { background: transparent; border: 1px solid var(--card-border); color: var(--text-primary); }
    .btn-outline:hover { background: #F5F3F1; }
    .btn-danger { background: var(--danger); color: white; }
    .btn-danger:hover { background: #B91C1C; }
    .btn-sm { padding: 4px 10px; font-size: 13px; }
    .subject-btn { padding: 6px 16px; font-size: 13px; font-weight: 500; border: 1px solid var(--card-border); border-radius: 20px; cursor: pointer; transition: all 0.15s; background: transparent; color: var(--text-muted); }
    .subject-btn.active { background: var(--primary); border-color: var(--primary); color: white; }
    .subject-btn:hover:not(.active) { background: #F5F3F1; }
    .option-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .option-row input[type="radio"] { accent-color: var(--primary); }
    [x-cloak] { display: none !important; }
    .pagination .page-link, .pagination .page-item.disabled span {
        padding: 6px 12px; border: 1px solid #E8E4E0; border-radius: 6px; font-size: 13px; color: #1C1917; background: white; margin: 0 2px;
    }
    .pagination .page-item.active .page-link { background: #8B5E3C; color: white; border-color: #8B5E3C; }
    .pagination .page-item.disabled span { opacity: 0.5; cursor: not-allowed; }
</style>
@endpush

@section('content')

<div x-data="{ open: false, questionType: 'mcq', subjectFilter: 'All', delModal: false, delId: null, openDelete(id) { delId = id; delModal = true; }, closeDelete() { delModal = false; delId = null; } }">
    <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px;">
        <div>
            <h1 style="font-family: 'Fraunces', serif; font-size: 24px; font-weight: 600;">Question bank</h1>
            <p style="font-size: 13px; color: var(--text-muted);">Total: {{ count($questions) }} questions</p>
        </div>
        <div style="display: flex; gap: 8px;">
            <a href="{{ route('question-bank.export', request()->query()) }}" class="btn btn-outline">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                Export CSV
            </a>
            <button @click="open = true" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                Add question
            </button>
        </div>
    </div>

    <div class="flex flex-wrap items-center gap-3 mb-6">
        <form method="GET" action="{{ url()->current() }}" class="flex gap-2 flex-1 min-w-[200px]">
            <input type="text" name="search" value="{{ request('search') }}" placeholder="Search questions..." class="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:ring-2 focus:ring-[var(--primary)] focus:border-transparent">
            <select name="subject" onchange="this.form.submit()" class="px-3 py-2 border border-gray-200 rounded-lg text-sm">
                <option value="">All Subjects</option>
                @foreach($subjects as $subject)
                    <option value="{{ $subject }}" {{ request('subject') == $subject ? 'selected' : '' }}>{{ $subject }}</option>
                @endforeach
            </select>
            <button type="submit" class="px-4 py-2 bg-[var(--primary)] text-white rounded-lg text-sm hover:bg-[var(--primary-dark)]">Search</button>
        </form>
        @if(request()->anyFilled(['search', 'subject']))
            <a href="{{ url()->current() }}" class="text-sm text-[var(--primary)] hover:underline">Clear</a>
        @endif
    </div>

    <div style="display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap;">
        <button @click="subjectFilter = 'All'" class="subject-btn" :class="{ 'active': subjectFilter === 'All' }">All</button>
        @foreach ($subjects as $subject)
            <button @click="subjectFilter = '{{ $subject }}'" class="subject-btn" :class="{ 'active': subjectFilter === '{{ $subject }}' }">{{ $subject }}</button>
        @endforeach
    </div>

    <div style="background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden;">
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse; font-size: 14px;">
                <thead>
                    <tr style="background: #FAFAF8;">
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Question</th>
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Subject</th>
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Type</th>
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Difficulty</th>
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Marks</th>
                        <th style="text-align: left; padding: 10px 16px; font-weight: 500; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($questions as $question)
                        <tr style="border-top: 1px solid var(--card-border);" x-show="subjectFilter === 'All' || subjectFilter === '{{ $question->subject }}'">
                            <td style="padding: 12px 16px; max-width: 300px;">
                                <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">{{ $question->question_text }}</div>
                            </td>
                            <td style="padding: 12px 16px;">{{ $question->subject }}</td>
                            <td style="padding: 12px 16px;">
                                <span style="display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
                                    @if($question->question_type == 'mcq') background: #DBEAFE; color: #2563EB;
                                    @elseif($question->question_type == 'short') background: #FEF3C7; color: #D97706;
                                    @elseif($question->question_type == 'long') background: #FCE7F3; color: #DB2777;
                                    @else background: #F5F3F1; color: var(--text-muted);
                                    @endif">{{ $question->question_type }}</span>
                            </td>
                            <td style="padding: 12px 16px;">
                                <span style="display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500;
                                    @if($question->difficulty == 'easy') background: #D1FAE5; color: #059669;
                                    @elseif($question->difficulty == 'medium') background: #FEF3C7; color: #D97706;
                                    @else background: #FEE2E2; color: #DC2626;
                                    @endif">{{ $question->difficulty }}</span>
                            </td>
                            <td style="padding: 12px 16px; font-weight: 600;">{{ $question->marks }}</td>
                            <td style="padding: 12px 16px;">
                                <div style="display: flex; gap: 6px;">
                                    <button @click="openDelete({{ $question->id }})" class="btn btn-danger btn-sm">Delete</button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding: 32px 16px; text-align: center; color: var(--text-muted);">No questions found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    @if(method_exists($questions, 'links'))
    <div class="mt-6">
        {{ $questions->appends(request()->query())->links() }}
    </div>
    @endif

    <div x-show="open" x-cloak class="modal-overlay" x-on:click.self="open = false" x-transition>
        <div class="modal-content">
            <div class="modal-header">
                <h3 style="font-size: 16px; font-weight: 600;">Add question</h3>
                <button @click="open = false" style="background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </button>
            </div>
            <form method="POST" action="{{ route('question-bank.store') }}">
                @csrf
                <div class="modal-body">
                    <div style="display: grid; gap: 16px;">
                        <div>
                            <label class="form-label">Question text</label>
                            <textarea name="question_text" required class="form-textarea" placeholder="Enter the question..."></textarea>
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;">
                            <div>
                                <label class="form-label">Subject</label>
                                <input type="text" name="subject" required class="form-input" placeholder="e.g. Mathematics">
                            </div>
                            <div>
                                <label class="form-label">Type</label>
                                <select name="question_type" x-model="questionType" class="form-select" required>
                                    <option value="mcq">MCQ</option>
                                    <option value="short">Short</option>
                                    <option value="long">Long</option>
                                </select>
                            </div>
                            <div>
                                <label class="form-label">Difficulty</label>
                                <select name="difficulty" class="form-select" required>
                                    <option value="easy">Easy</option>
                                    <option value="medium">Medium</option>
                                    <option value="hard">Hard</option>
                                </select>
                            </div>
                        </div>
                        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
                            <div>
                                <label class="form-label">Marks</label>
                                <input type="number" name="marks" required class="form-input" placeholder="5">
                            </div>
                            <div>
                                <label class="form-label">Topic</label>
                                <input type="text" name="topic" class="form-input" placeholder="e.g. Algebra">
                            </div>
                        </div>

                        <div x-show="questionType === 'mcq'" x-transition>
                            <label class="form-label" style="margin-bottom: 8px;">Options (mark correct one)</label>
                            <div id="options-container">
                                <div class="option-row">
                                    <input type="radio" name="correct_answer" value="0">
                                    <input type="text" name="options[]" class="form-input" placeholder="Option A" required>
                                </div>
                                <div class="option-row">
                                    <input type="radio" name="correct_answer" value="1">
                                    <input type="text" name="options[]" class="form-input" placeholder="Option B" required>
                                </div>
                                <div class="option-row">
                                    <input type="radio" name="correct_answer" value="2">
                                    <input type="text" name="options[]" class="form-input" placeholder="Option C">
                                </div>
                                <div class="option-row">
                                    <input type="radio" name="correct_answer" value="3">
                                    <input type="text" name="options[]" class="form-input" placeholder="Option D">
                                </div>
                            </div>
                        </div>

                        <div x-show="questionType !== 'mcq'" x-transition>
                            <label class="form-label">Correct answer</label>
                            <textarea name="correct_answer" class="form-textarea" placeholder="Enter the correct answer..."></textarea>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" @click="open = false" class="btn btn-outline">Cancel</button>
                    <button type="submit" class="btn btn-primary">Save</button>
                </div>
            </form>
        </div>
    </div>

    <div x-show="delModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center">
        <div class="fixed inset-0 bg-black/50" @click="closeDelete()"></div>
        <div class="relative bg-white rounded-xl shadow-xl p-6 w-full max-w-sm mx-4">
            <h3 class="text-lg font-semibold mb-2">Confirm Delete</h3>
            <p class="text-gray-600 text-sm mb-6">Are you sure? This cannot be undone.</p>
            <div class="flex justify-end gap-3">
                <button @click="closeDelete()" class="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50">Cancel</button>
                <form method="POST" x-bind:action="'/question-bank/' + delId" style="display:inline">
                    @csrf @method('DELETE')
                    <button type="submit" class="px-4 py-2 text-sm text-white bg-red-600 rounded-lg hover:bg-red-700">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>

@endsection

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>