@extends('layout')

@section('content')
    @php
        $podium = collect($topThree)->keyBy('rank');
        $second = $podium->get(2);
        $first = $podium->get(1);
        $third = $podium->get(3);
    @endphp

    <section class="report-dashboard dashboard-red-theme">
        <header class="dashboard-header premium-hero report-hero">
            <div class="dashboard-hero-copy">
                <div class="brand-lockup">
                    <img class="brand-logo" src="{{ asset('images/neutro-pharma-logo.svg') }}" alt="Neutro Pharma logo">
                    <div>
                        <strong>Neutro Pharma (Pvt) Ltd.</strong>
                        <small>Periume Advance Result Report</small>
                    </div>
                </div>
                <p class="eyebrow">{{ $reportEyebrow }}</p>
                <h1>{{ $reportTitle }}</h1>
                <p class="muted">
                    @if ($isAllReport)
                        Review participant performance across every test.
                    @else
                        Saved results remain available here until the quiz is reset.
                    @endif
                </p>
            </div>

            <div class="admin-actions">
                <a class="secondary-button action-link" href="{{ route('admin.quiz', $quiz ? ['quiz' => $quiz->id] : []) }}">Back Dashboard</a>
                @if ($quiz)
                    <a class="secondary-button action-link" href="{{ route('quiz.join', ['quizSlug' => $quiz->slug]) }}">Participant Link</a>
                @endif
            </div>
        </header>

        <section class="card report-filter-card">
            <div>
                <p class="label">Report Filter</p>
                <h2>Select Test</h2>
            </div>
            <form method="GET" action="{{ route('admin.reports.index') }}" class="report-filter-form">
                <label for="reportQuiz">Test name</label>
                <select id="reportQuiz" name="quiz" onchange="this.form.submit()">
                    <option value="all" @selected($isAllReport)>All Tests</option>
                    @foreach ($reportQuizzes as $reportQuiz)
                        <option value="{{ $reportQuiz->id }}" @selected(! $isAllReport && $quiz && $quiz->id === $reportQuiz->id)>
                            {{ $reportQuiz->title }} ({{ $reportQuiz->questions_count }} questions)
                        </option>
                    @endforeach
                </select>
                <button class="secondary-button" type="submit">Apply</button>
            </form>
        </section>

        <section class="card status-card report-status-card">
            <div>
                <p class="label">Report Scope</p>
                <span class="pill">{{ $reportStatus }}</span>
            </div>
            <div>
                <p class="label">Tests</p>
                <strong class="big-number">{{ $summary['tests'] }}</strong>
            </div>
            <div>
                <p class="label">Questions</p>
                <strong class="big-number">{{ $summary['questions'] }}</strong>
            </div>
            <div>
                <p class="label">Participants</p>
                <strong class="big-number">{{ $summary['participants'] }}</strong>
            </div>
            <div>
                <p class="label">Accuracy</p>
                <strong class="big-number">{{ $summary['accuracy'] }}%</strong>
            </div>
            <div>
                <p class="label">Average Score</p>
                <strong class="big-number">{{ $summary['average_score'] }}</strong>
            </div>
        </section>

        <section class="card report-podium-card">
            <p class="label">Final Result</p>
            <h2>Top 3 Winners</h2>
            <div class="podium">
                @foreach ([[$second, 'second', '2nd'], [$first, 'first', '1st'], [$third, 'third', '3rd']] as [$item, $class, $label])
                    <div class="podium-box {{ $class }}">
                        <span>{{ $label }}</span>
                        <strong>{{ $item['name'] ?? 'Waiting' }}</strong>
                        <small>
                            @if (isset($item['score']))
                                {{ $item['score'] }} pts &middot; {{ $item['correct_ratio'] }}
                            @else
                                --
                            @endif
                        </small>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="card report-overall-card">
            <p class="label">Cumulative Score</p>
            <h2>Overall Leaderboard</h2>
            <ol class="overall-list report-list">
                @forelse ($overall as $item)
                    <li>
                        <span>
                            {{ $item['rank'] }}. {{ $item['name'] }}
                            @if ($isAllReport)
                                <small>{{ $item['test_title'] }}</small>
                            @endif
                        </span>
                        <span class="report-score-stack">
                            <strong>{{ $item['score'] }} pts</strong>
                            <em>{{ $item['correct_ratio'] }} correct</em>
                        </span>
                    </li>
                @empty
                    <li class="empty-state">No score yet.</li>
                @endforelse
            </ol>
        </section>

        <section class="card report-participants-card">
            <p class="label">Participants</p>
            <h2>Participant Scores</h2>
            <ul class="participant-list report-list">
                @forelse ($participantReports as $participant)
                    <li class="participant-item">
                        <span class="participant-index">{{ $loop->iteration }}</span>
                        <span>
                            {{ $participant['name'] }}
                            <small>{{ $participant['test_title'] }}</small>
                        </span>
                        <span class="report-score-stack">
                            <strong>{{ $participant['score'] }} pts</strong>
                            <em>{{ $participant['correct_ratio'] }} correct</em>
                        </span>
                    </li>
                @empty
                    <li class="empty-state">No participants yet.</li>
                @endforelse
            </ul>
        </section>

        <section class="card report-question-card">
            <p class="label">Question Report</p>
            <h2>Question Wise Result</h2>
            <div class="report-question-list">
                @forelse ($questionReports as $questionReport)
                    <article class="report-question-item">
                        <div class="report-question-heading">
                            <span>{{ $questionReport['sort_order'] }}</span>
                            <div>
                                <strong>{{ $questionReport['text'] }}</strong>
                                <small>
                                    @if ($isAllReport)
                                        {{ $questionReport['test_title'] }} &middot;
                                    @endif
                                    Correct: {{ $questionReport['correct_letter'] }}. {{ $questionReport['correct_text'] }} &middot; {{ $questionReport['accuracy'] }}% accuracy
                                </small>
                            </div>
                        </div>

                        <div class="report-option-grid">
                            @foreach ($questionReport['options'] as $option)
                                <div class="report-option @if ($option['is_correct']) is-correct @endif">
                                    <strong>{{ $option['letter'] }}</strong>
                                    <span>{{ $option['text'] }}</span>
                                    <em>{{ $option['count'] }}</em>
                                </div>
                            @endforeach
                        </div>

                        <div class="fastest-list">
                            <p class="label">Fastest Correct</p>
                            @forelse ($questionReport['fastest'] as $fastest)
                                <span>{{ $fastest['rank'] }}. {{ $fastest['name'] }} - {{ $fastest['response_ms'] }}ms, +{{ $fastest['score_awarded'] }}</span>
                            @empty
                                <span>No correct answer yet.</span>
                            @endforelse
                        </div>
                    </article>
                @empty
                    <p class="empty-state">No questions yet.</p>
                @endforelse
            </div>
        </section>
    </section>
@endsection

@push('vite')
    @vite(['resources/css/app.css'])
@endpush
