@extends('layout')

@section('content')
    <section class="player-wrap">
        <header class="player-header card">
            <div>
                <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 Quiz</small>
                    </div>
                </div>
                <p class="eyebrow">Live Quiz</p>
                <h1>{{ $quiz->title }}</h1>
                <p class="muted">Participant: <strong>{{ $participant->name }}</strong></p>
            </div>
            <div>
                <p class="label">Your Score</p>
                <strong id="myScore" class="big-number">{{ $participant->score }}</strong>
            </div>
        </header>

        <section class="card player-question-card">
            <div class="question-topline">
                <span id="playerStatus" class="pill">{{ $isPlayable ? strtoupper($quiz->status) : 'INACTIVE' }}</span>
                <strong id="playerTimer">--</strong>
            </div>
            <h2 id="playerQuestion">
                {{ $isPlayable ? 'Waiting for admin to start the quiz...' : 'This test is currently inactive.' }}
            </h2>
            @if ($isPlayable && $quiz->status !== 'active')
                <p id="waitingHint" class="muted">Admin must select this same test in the dashboard and click Start Quiz.</p>
            @endif
            @unless ($isPlayable)
                <p class="muted">Please ask the admin to enable this exact test, then refresh this page.</p>
            @endunless
            <div id="playerOptions" class="answer-grid"></div>
            <div id="answerMessage" class="answer-message"></div>
        </section>

        <section class="card top-three-card">
            <p id="playerTopThreeLabel" class="label">{{ $quiz->status === 'finished' ? 'Final Result' : 'Fastest Correct Answers' }}</p>
            <h2 id="playerTopThreeTitle">{{ $quiz->status === 'finished' ? 'Final Top 3' : 'Live Top 3' }}</h2>
            <div id="topThree" class="podium">
                <div class="podium-box second"><span>2nd</span><strong>Waiting</strong></div>
                <div class="podium-box first"><span>1st</span><strong>Waiting</strong></div>
                <div class="podium-box third"><span>3rd</span><strong>Waiting</strong></div>
            </div>
        </section>
    </section>

    <script>
        window.quizApp = {!! \Illuminate\Support\Js::from([
            'quizUuid' => $quiz->uuid,
            'csrf' => csrf_token(),
            'csrfUrl' => route('csrf.token'),
            'sessionUuid' => $participant->session_uuid,
            'answerUrl' => route('quiz.answer', ['sessionUuid' => $participant->session_uuid]),
            'joinUrl' => route('quiz.join'),
            'isPlayable' => $isPlayable,
            'state' => $state,
            'topThree' => $topThree,
            'participant' => [
                'name' => $participant->name,
                'score' => $participant->score,
            ],
        ]) !!};
    </script>
@endsection

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