@extends('layouts.admin')

@section('content')
<div class="p-6">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-ink-900">Question Paper Details</h1>
        <div class="flex gap-3">
            <a href="{{ route('admin.question-papers.edit', $questionPaper) }}" class="text-indigo-600 hover:text-indigo-800">Edit</a>
            <a href="{{ route('admin.question-papers.index') }}" class="text-graphite-400 hover:text-ink-600">&larr; Back</a>
        </div>
    </div>

    <div class="bg-white shadow rounded p-6 mb-6">
        <dl class="grid grid-cols-2 gap-4">
            <div>
                <dt class="text-sm font-medium text-graphite-400">Subject</dt>
                <dd class="mt-1 text-sm text-ink-900">{{ $questionPaper->subject->name ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-graphite-400">Exam</dt>
                <dd class="mt-1 text-sm text-ink-900">{{ $questionPaper->subject->exam->name ?? '-' }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-graphite-400">Version</dt>
                <dd class="mt-1 text-sm text-ink-900">{{ $questionPaper->version_label }}</dd>
            </div>
            <div>
                <dt class="text-sm font-medium text-graphite-400">Status</dt>
                <dd class="mt-1 text-sm">
                    <span class="px-2 py-1 text-xs font-medium rounded-full
                        {{ $questionPaper->status === 'active' ? 'bg-green-100 text-green-800' : ($questionPaper->status === 'draft' ? 'bg-yellow-100 text-yellow-800' : 'bg-paper-100 text-ink-900') }}">
                        {{ ucfirst($questionPaper->status) }}
                    </span>
                </dd>
            </div>
        </dl>
    </div>

    <div class="bg-white shadow rounded p-6 mb-6">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-lg font-semibold text-ink-900">Questions</h2>
            <button onclick="document.getElementById('add-question-form').classList.toggle('hidden')" class="bg-seal-blue-700 text-white px-4 py-2 rounded text-sm hover:bg-seal-blue-700/90">Add Question</button>
        </div>

        <div id="add-question-form" class="hidden mb-6 p-4 bg-paper-50 rounded border border-graphite-400/30">
            <form action="{{ route('admin.questions.store') }}" method="POST" class="space-y-4">
                @csrf
                <input type="hidden" name="question_paper_id" value="{{ $questionPaper->id }}">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-ink-600 mb-1">Question Number *</label>
                        <input type="number" name="question_number" required min="1"
                            class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm focus:ring-seal-blue-700 focus:border-seal-blue-700"
                            value="{{ old('question_number') }}">
                        @error('question_number') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-ink-600 mb-1">Question Type *</label>
                        <select name="question_type" required class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm focus:ring-seal-blue-700 focus:border-seal-blue-700">
                            <option value="long" {{ old('question_type') == 'long' ? 'selected' : '' }}>Long Answer</option>
                            <option value="short" {{ old('question_type') == 'short' ? 'selected' : '' }}>Short Answer</option>
                            <option value="mcq" {{ old('question_type') == 'mcq' ? 'selected' : '' }}>MCQ</option>
                        </select>
                        @error('question_type') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Question Text *</label>
                    <textarea name="text" rows="3" required class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm focus:ring-seal-blue-700 focus:border-seal-blue-700">{{ old('text') }}</textarea>
                    @error('text') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Max Marks *</label>
                    <input type="number" name="max_marks" required min="0" step="0.5"
                        class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm focus:ring-seal-blue-700 focus:border-seal-blue-700"
                        value="{{ old('max_marks') }}">
                    @error('max_marks') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Model Answer Text</label>
                    <textarea name="model_answer_text" rows="3" class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm focus:ring-seal-blue-700 focus:border-seal-blue-700">{{ old('model_answer_text') }}</textarea>
                    @error('model_answer_text') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-ink-600 mb-1">Rubric JSON</label>
                    <textarea name="rubric_json" rows="3" class="w-full border border-graphite-400/50 rounded px-3 py-2 text-sm font-mono focus:ring-seal-blue-700 focus:border-seal-blue-700">{{ old('rubric_json') }}</textarea>
                    @error('rubric_json') <p class="text-redpen-600 text-xs mt-1">{{ $message }}</p> @enderror
                </div>
                <div class="flex justify-end gap-3">
                    <button type="button" onclick="document.getElementById('add-question-form').classList.add('hidden')" class="px-4 py-2 border border-graphite-400/50 rounded text-ink-600 hover:bg-paper-50 text-sm">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-seal-blue-700 text-white rounded hover:bg-seal-blue-700/90 text-sm">Add Question</button>
                </div>
            </form>
        </div>

        <table class="min-w-full divide-y divide-graphite-400/30">
            <thead class="bg-paper-50">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">#</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Text</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Max Marks</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-graphite-400 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-graphite-400/30">
                @forelse($questionPaper->questions as $question)
                    <tr>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $question->question_number }}</td>
                        <td class="px-4 py-3 text-sm">
                            <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-800">{{ ucfirst($question->question_type) }}</span>
                        </td>
                        <td class="px-4 py-3 text-sm text-ink-900 max-w-md truncate">{{ Str::limit($question->text, 100) }}</td>
                        <td class="px-4 py-3 text-sm text-ink-900">{{ $question->max_marks }}</td>
                        <td class="px-4 py-3 text-sm">
                            <a href="{{ route('admin.questions.edit', $question) }}" class="text-indigo-600 hover:text-indigo-800 mr-3">Edit</a>
                            <form action="{{ route('admin.questions.destroy', $question) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-800">Delete</button>
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="5" class="px-4 py-3 text-sm text-graphite-400 text-center">No questions added yet.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection