@extends('frontend.layouts.app')

@section('content')

    <!-- Breadcrumb Banner -->
    <section class="main-banner" style="background-image:url('{{ asset('frontend/assets/img/bg/course-bg.jpg') }}');">
        <div class="container">
            <div class="text-center text-white position-relative z-1">
                <h2>{{ $contest->title }} - Leaderboard</h2>
                <p>
                    <a href="{{ route('home') }}">Home</a> /
                    <a href="#">Contests</a> /
                    {{ $contest->title }}
                </p>
            </div>
        </div>
    </section>

    <section class="section-padding">
        <div class="container">
            <div class="row">

                <!-- Main Content Left Side: Podium & Table -->
                <div class="col-lg-7">

                    @php
                        $topThree = $leaderboard->take(3);
                    @endphp

                    <!-- Top 3 Podium Cards -->
                    @if ($topThree->count() > 0)
                        <div class="row mb-4">
                            @foreach ($topThree as $player)
                                <div class="col-md-4 mb-3">
                                    <div class="card border-0 shadow-sm text-center py-3">
                                        <div class="card-body">
                                            <h1 class="mb-2">
                                                @if ($player->rank == 1)
                                                    🥇
                                                @elseif($player->rank == 2)
                                                    🥈
                                                @elseif($player->rank == 3)
                                                    🥉
                                                @endif
                                            </h1>
                                            <h6 class="fw-bold text-truncate mb-1" title="{{ $player->user->name }}">
                                                {{ $player->user->name }}
                                            </h6>
                                            <p class="text-muted small mb-1">Rank #{{ $player->rank }}</p>
                                            <div class="badge bg-light text-dark mb-2 px-2 py-1">
                                                Score: {{ $player->score }}
                                            </div>
                                            <h5 class="text-success mb-0 fw-bold">
                                                ₹{{ number_format(optional($player->prizeAssignment)->amount ?? 0, 2) }}
                                            </h5>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif

                    <!-- Leaderboard Standings Card -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-body">
                            <h4 class="mb-3">Standings</h4>

                            <div class="table-responsive">
                                <table class="table table-hover align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Rank</th>
                                            <th>Player</th>
                                            <th>Score</th>
                                            <th>Correct</th>
                                            <th>Time</th>
                                            <th>Prize</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($leaderboard as $player)
                                            <tr
                                                @auth @if (auth()->id() == $player->user_id) class="table-warning fw-bold" @endif @endauth>
                                                <td><strong>#{{ $player->rank }}</strong></td>
                                                <td>
                                                    {{ $player->user->name }}
                                                    @auth
                                                        @if (auth()->id() == $player->user_id)
                                                            <span class="badge bg-primary ms-1">You</span>
                                                        @endif
                                                    @endauth
                                                </td>
                                                <td>{{ $player->score }}</td>
                                                <td>{{ $player->correct_answers }}</td>
                                                <td>{{ gmdate('H:i:s', $player->time_taken) }}</td>
                                                <td>
                                                    @if ($player->prizeAssignment)
                                                        <span
                                                            class="text-success fw-bold">₹{{ number_format($player->prizeAssignment->amount, 2) }}</span>
                                                    @else
                                                        -
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-muted text-center py-4">No submissions record
                                                    found.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            <!-- Pagination Alignment -->
                            <div class="mt-4">
                                {{ $leaderboard->links() }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar Right Side: Summary & Actions -->
                <div class="col-lg-5">

                    <!-- Banner Cover Image -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="bg-light d-flex justify-content-center align-items-center" style="height:300px;">
                            <img src="{{ asset('storage/' . $contest->banner) }}" class="img-fluid"
                                style="max-height:280px; object-fit:contain;" alt="{{ $contest->title }}">
                        </div>
                    </div>

                    <!-- Meta Summary Card -->
                    <div class="card shadow-sm border-0">
                        <div class="card-body">
                            <span class="badge bg-primary">
                                {{ $contest->category->name ?? 'General' }}
                            </span>
                            <span class="badge bg-dark float-end">Completed</span>

                            <h3 class="mt-3">{{ $contest->title }}</h3>

                            <table class="table mt-3">
                                <tr>
                                    <th>Total Participants</th>
                                    <td>{{ $leaderboard->total() }}</td>
                                </tr>
                                <tr>
                                    <th>Questions</th>
                                    <td>{{ $contest->questions_count ?? 0 }}</td>
                                </tr>
                                <tr>
                                    <th>Quiz Ends</th>
                                    <td>{{ $contest->quiz_end_time->format('d M Y h:i A') }}</td>
                                </tr>
                            </table>

                            <a href="{{ route('games') }}" class="btn btn-outline-secondary w-100 mt-2">
                                Back to Games
                            </a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>

@endsection