@extends('layouts.self-paced-dashboard')

@section('title', 'Questions — ' . $course->title)
@section('page-title', 'Exam Questions')
@section('page-subtitle', $course->title)

@section('hero-actions')
    @can('manage self-paced exams')
    <a href="{{ route('self-paced.dashboard.exams.create', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white text-indigo-700 font-semibold text-sm rounded-lg hover:bg-indigo-50 transition shadow">
        <i class="fas fa-plus"></i> Add Question
    </a>
    <a href="{{ route('self-paced.dashboard.exams.import', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-file-csv"></i> Import CSV
    </a>
    <a href="{{ route('self-paced.dashboard.exams.settings', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-cog"></i> Exam Settings
    </a>
    @endcan
    <a href="{{ route('self-paced.dashboard.courses.show', $course) }}"
       class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white text-sm font-medium rounded-lg transition border border-white/30">
        <i class="fas fa-arrow-left"></i> Back to Course
    </a>
@endsection

@section('content')
<div x-data="courseExamIndex()" x-init="init()">

    {{-- Breadcrumb --}}
    <nav class="flex items-center gap-2 text-xs text-gray-400 mb-4">
        <a href="{{ route('self-paced.dashboard.index') }}" class="hover:text-indigo-600 transition">Dashboard</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <a href="{{ route('self-paced.dashboard.exams.index') }}" class="hover:text-indigo-600 transition">Exams</a>
        <i class="fas fa-chevron-right text-[10px]"></i>
        <span class="text-gray-600 font-medium">{{ Str::limit($course->title, 50) }}</span>
    </nav>

    {{-- Stats row --}}
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-5">
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3">
            <span class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-clipboard-question text-indigo-600"></i>
            </span>
            <div>
                <p class="text-xs text-gray-400">Total Questions</p>
                <p class="text-lg font-bold text-gray-800">{{ $questions->total() }}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3">
            <span class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-list-ol text-purple-600"></i>
            </span>
            <div>
                <p class="text-xs text-gray-400">Per Attempt</p>
                <p class="text-lg font-bold text-gray-800">{{ $course->exam_questions_per_attempt ?? '—' }}</p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3">
            <span class="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-stopwatch text-amber-600"></i>
            </span>
            <div>
                <p class="text-xs text-gray-400">Time Limit</p>
                <p class="text-lg font-bold text-gray-800">{{ $course->exam_time_limit ?? '—' }} <span class="text-xs font-normal text-gray-400">min</span></p>
            </div>
        </div>
        <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 flex items-center gap-3">
            <span class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
                <i class="fas fa-percent text-green-600"></i>
            </span>
            <div>
                <p class="text-xs text-gray-400">Pass Score</p>
                <p class="text-lg font-bold text-gray-800">{{ $course->passing_score ?? 70 }}%</p>
            </div>
        </div>
    </div>

    {{-- Question bank vs per-attempt notice --}}
    @if($course->exam_questions_per_attempt && $questions->total() < $course->exam_questions_per_attempt)
    <div class="bg-amber-50 border border-amber-200 rounded-xl p-4 mb-5 flex items-start gap-3">
        <i class="fas fa-exclamation-triangle text-amber-500 mt-0.5 flex-shrink-0"></i>
        <div>
            <p class="text-sm font-semibold text-amber-800">Not enough questions</p>
            <p class="text-xs text-amber-700 mt-0.5">
                You have {{ $questions->total() }} question(s) but the exam requires {{ $course->exam_questions_per_attempt }} per attempt.
                Add more questions or reduce the "Questions Per Attempt" in
                <a href="{{ route('self-paced.dashboard.exams.settings', $course) }}" class="underline font-medium">Exam Settings</a>.
            </p>
        </div>
    </div>
    @endif

    {{-- Search --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5">
        <div class="flex flex-col sm:flex-row gap-3">
            <div class="relative flex-1">
                <span class="absolute inset-y-0 left-3 flex items-center text-gray-400 pointer-events-none">
                    <i class="fas fa-search text-sm"></i>
                </span>
                <input type="text"
                       x-model="search"
                       @input.debounce.400ms="fetchQuestions()"
                       placeholder="Search questions…"
                       class="w-full pl-9 pr-4 py-2 text-sm border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-300 focus:border-indigo-400 transition">
            </div>
            <button @click="clearSearch()"
                    x-show="search"
                    x-cloak
                    class="inline-flex items-center gap-1.5 px-3 py-2 text-sm text-gray-500 hover:text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
                <i class="fas fa-times text-xs"></i> Clear
            </button>
        </div>
    </div>

    {{-- Table Card --}}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">

        <div x-show="loading" x-cloak class="flex items-center justify-center py-16">
            <i class="fas fa-spinner fa-spin text-indigo-400 text-2xl"></i>
        </div>

        <div x-show="!loading" x-cloak>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr>
                            <th class="bg-indigo-50 text-indigo-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide w-10">#</th>
                            <th class="bg-purple-50 text-purple-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Question</th>
                            <th class="bg-blue-50 text-blue-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Course</th>
                            <th class="bg-green-50 text-green-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Correct Answer</th>
                            <th class="bg-amber-50 text-amber-700 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Active</th>
                            <th class="bg-gray-50 text-gray-600 font-semibold text-left px-4 py-3 text-xs uppercase tracking-wide">Actions</th>
                        </tr>
                    </thead>
                    <tbody id="course-exams-tbody" class="divide-y divide-gray-50">
                        @include('self-paced.dashboard.exams.partials.table', ['questions' => $questions])
                    </tbody>
                </table>
            </div>

            @if($questions->hasPages())
            <div class="px-4 py-3 border-t border-gray-100" id="course-exams-pagination">
                {{ $questions->links() }}
            </div>
            @endif
        </div>
    </div>

    {{-- Delete Confirmation Modal --}}
    <div x-show="deleteModal.open"
         x-cloak
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100">
        <div class="absolute inset-0 bg-black/40" @click="deleteModal.open = false"></div>
        <div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden z-10">
            <div class="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-red-600 to-red-700 rounded-t-2xl">
                <h3 class="text-base font-semibold text-white flex items-center gap-2">
                    <i class="fas fa-trash"></i> Delete Question
                </h3>
                <button type="button" @click="deleteModal.open = false" class="text-white/80 hover:text-white transition">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="p-6">
                <p class="text-sm text-gray-500 mb-3">This action cannot be undone.</p>
                <p class="text-sm text-gray-600 mb-5">
                    Are you sure you want to delete: <strong x-text="deleteModal.title"></strong>?
                </p>
                <div class="flex gap-3 justify-end">
                    <button @click="deleteModal.open = false"
                            class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition">
                        Cancel
                    </button>
                    <button @click="submitDelete()"
                            class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition">
                        <i class="fas fa-trash mr-1.5"></i> Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection

@push('scripts')
<script>
function courseExamIndex() {
    return {
        search: '',
        loading: false,
        deleteModal: { open: false, id: null, title: '' },

        init() {
            const params = new URLSearchParams(window.location.search);
            this.search = params.get('search') || '';
        },

        fetchQuestions(page) {
            this.loading = true;
            const params = new URLSearchParams();
            if (this.search) params.set('search', this.search);
            if (page) params.set('page', page);

            axios.get('{{ route('self-paced.dashboard.exams.course-questions', $course) }}?' + params.toString(), {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => {
                document.getElementById('course-exams-tbody').innerHTML = res.data.html;
                const pag = document.getElementById('course-exams-pagination');
                if (pag && res.data.pagination) pag.innerHTML = res.data.pagination;
            })
            .catch(() => {})
            .finally(() => { this.loading = false; });
        },

        clearSearch() {
            this.search = '';
            this.fetchQuestions();
        },
    };
}

function confirmExamDelete(id, title) {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    comp.deleteModal = { open: true, id, title };
}

function submitDelete() {
    const comp = Alpine.$data(document.querySelector('[x-data]'));
    const form = document.getElementById('delete-exam-form-' + comp.deleteModal.id);
    if (form) form.submit();
}
</script>
@endpush
