@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('title', __('dashboard.View Quiz'))
@section('page_heading', __('dashboard.View Quiz'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.show', $course->id) }}" class="text-muted text-hover-primary">{{ $course->name }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.quizzes.index', $course->id) }}" class="text-muted text-hover-primary">{{ __('dashboard.All Quizzes') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">{{ $quiz->title }}</li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.quizzes.edit', [$course->id, $quiz->id]) }}" class="btn btn-warning me-3">{{ __('dashboard.Edit') }}</a>
    <a href="{{ route($routePrefix . '.quiz-questions.index', $quiz->id) }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Manage Questions') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <div class="d-flex flex-column flex-lg-row">
            <div class="flex-lg-row-fluid me-lg-15">
                <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="card-header pt-7">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                            <i class="ki-outline ki-questionnaire-tablet fs-1 me-3"></i>
                            <h2 class="mb-0">{{ __('dashboard.Quiz Questions') }} ({{ $quiz->questions->count() }})</h2>
                        </div>
                         <div class="card-toolbar">
                             <span class="fw-bold text-gray-700">{{ __('dashboard.Total Marks') }}: {{ $quiz->total_marks }}</span>
                        </div>
                    </div>
                    <div class="card-body pt-5">
                         @forelse($quiz->questions as $quizQuestion)
                            <div class="mb-7 p-5 border border-dashed rounded">
                                <div class="d-flex flex-stack mb-3">
                                    <span class="text-gray-800 fw-bold fs-5">
                                        {{ $loop->iteration }}. {!! $quizQuestion->question->question_text !!}
                                    </span>
                                    <span class="badge badge-light-success">{{ $quizQuestion->score }} {{ __('dashboard.Marks') }}</span>
                                </div>
                                <div class="text-muted fs-7 mb-4">
                                    <span>{{ __('dashboard.Lesson') }}: {{ $quizQuestion->question->lesson->title ?? 'N/A' }}</span>
                                    <span class="mx-3">|</span>
                                    <span>{{ __('dashboard.Difficulty Level') }}: {{ $quizQuestion->question->difficultyLevel->name ?? 'N/A' }}</span>
                                </div>

                                <div class="bg-light p-4 rounded">
                                    <span class="fw-bold d-block mb-2">{{ __('dashboard.Correct Answer') }}:</span>
                                    @switch($quizQuestion->question->type)
                                        @case('MCQ')
                                            @php
                                                $mcq = $quizQuestion->question->mcqDetail;
                                                $choices = json_decode($mcq->choices, true);
                                            @endphp
                                            <span class="text-success fw-semibold">{{ $choices[$mcq->correct_choice] ?? 'N/A' }}</span>
                                            @break
                                        @case('T/F')
                                            <span class="text-success fw-semibold">{{ $quizQuestion->question->trueFalseDetail->correct_answer ? __('dashboard.True') : __('dashboard.False') }}</span>
                                            @break
                                        @case('Essay')
                                            <p class="text-success fw-semibold lh-lg">{!! nl2br(e($quizQuestion->question->essayDetail->essay_text)) !!}</p>
                                            @break
                                        @default
                                            <span class="text-muted">{{ __('dashboard.Answer type not supported for display.') }}</span>
                                    @endswitch
                                </div>
                            </div>
                        @empty
                            <div class="text-center text-gray-600 fw-semibold py-10">
                                <i class="ki-outline ki-abstract-11 fs-3x text-primary"></i>
                                <p class="mt-3 fs-5">{{ __('dashboard.No questions have been added to this quiz yet.') }}</p>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
            <div class="flex-column flex-lg-row-auto w-100 w-lg-300px w-xl-400px mb-10">
                <div class="rounded-[1.75rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
                    <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                            <h2>{{ __('dashboard.Summary') }}</h2>
                        </div>
                    </div>
                    <div class="card-body p-9">
                        <div class="d-flex flex-stack mb-5">
                           <div class="fw-bold text-gray-800 fs-4">{{ $quiz->title }}</div>
                           @if($quiz->is_published)
                                <span class="badge badge-light-success">{{ __('dashboard.Published') }}</span>
                            @else
                                <span class="badge badge-light-danger">{{ __('dashboard.Unpublished') }}</span>
                            @endif
                        </div>
                        <p class="text-gray-600 fw-semibold fs-6">{{ $quiz->description }}</p>
                        <div class="separator separator-dashed my-5"></div>
                        <div class="d-flex flex-stack">
                            <div class="fw-semibold text-gray-500">{{ __('dashboard.Start Time') }}</div>
                            <div class="text-gray-700 fw-bold">{{ $quiz->start_time->format('d M, Y - h:i A') }}</div>
                        </div>
                        <div class="separator separator-dashed my-3"></div>
                        <div class="d-flex flex-stack">
                            <div class="fw-semibold text-gray-500">{{ __('dashboard.End Time') }}</div>
                            <div class="text-gray-700 fw-bold">{{ $quiz->end_time->format('d M, Y - h:i A') }}</div>
                        </div>
                        <div class="separator separator-dashed my-3"></div>
                         <div class="d-flex flex-stack">
                            <div class="fw-semibold text-gray-500">{{ __('dashboard.Duration') }}</div>
                            <div class="text-gray-700 fw-bold">{{ $quiz->duration }} {{ __('dashboard.Minutes') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection