@extends('frontend.layouts.app')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-3 col-xl-2 mb-4">
                    <button class="dashboard-menu-btn d-lg-none" type="button" data-bs-toggle="offcanvas"
                        data-bs-target="#dashboardSidebar">
                        <i class="fa-solid fa-bars"></i>
                        <span>Menu</span>
                    </button>

                    <div class="d-none d-lg-block">
                        @include('frontend.dashboard.sidebar')
                    </div>
                </div>

                <div class="col-lg-9 col-xl-10">
                    <div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
                        <img src="{{ asset('storage/' . $contest->banner) }}" class="w-100"
                            style="max-height:350px;object-fit:contain;background:#f8f9fa;" alt="{{ $contest->title }}">

                        <div class="card-body">
                            <h3 class="fw-bold">{{ $contest->title }}</h3>
                            <p class="text-muted mb-0">{{ $contest->category->name ?? '-' }}</p>
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6 col-xl-3">
                            <div class="card border-0 shadow-sm rounded-4 text-center h-100">
                                <div class="card-body">
                                    <small class="text-muted">Final Rank</small>
                                    <h3 class="fw-bold text-primary mt-2">#{{ $result->rank ?? '--' }}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="card border-0 shadow-sm rounded-4 text-center h-100">
                                <div class="card-body">
                                    <small class="text-muted">Score</small>
                                    <h3 class="fw-bold text-success mt-2">{{ $result->score ?? '--' }}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="card border-0 shadow-sm rounded-4 text-center h-100">
                                <div class="card-body">
                                    <small class="text-muted">Prize Won</small>
                                    <h3 class="fw-bold text-warning mt-2">
                                        &#8377;{{ number_format($prize->amount ?? 0, 2) }}
                                    </h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-xl-3">
                            <div class="card border-0 shadow-sm rounded-4 text-center h-100">
                                <div class="card-body">
                                    <small class="text-muted">Wallet</small>
                                    @if ($prize)
                                        <div class="badge bg-success mt-2">Credited</div>
                                    @else
                                        <div class="badge bg-secondary mt-2">Not Won</div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Performance Summary</h5>
                        </div>

                        <div class="card-body">
                            @if ($result)
                                <div class="row">
                                    <div class="col-md-4 mb-3"><strong>Correct:</strong> {{ $result->correct_answers }}</div>
                                    <div class="col-md-4 mb-3"><strong>Wrong:</strong> {{ $result->wrong_answers }}</div>
                                    <div class="col-md-4 mb-3"><strong>Unanswered:</strong> {{ $result->unanswered }}</div>
                                    <div class="col-md-4 mb-3"><strong>Percentage:</strong> {{ $result->percentage }}%</div>
                                    <div class="col-md-4 mb-3"><strong>Time:</strong> {{ gmdate('H:i:s', $result->time_taken) }}</div>
                                    <div class="col-md-4 mb-3">
                                        <strong>Submitted:</strong> {{ $result->submitted_at?->format('d M Y h:i A') }}
                                    </div>
                                </div>
                            @else
                                <p class="text-muted mb-0">Quiz result will appear here after the user completes the contest.</p>
                            @endif
                        </div>
                    </div>

                    <div class="card border-0 shadow-sm rounded-4 mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">Leaderboard Preview</h5>
                        </div>

                        <div class="card-body">
                            @if ($leaderboard->count() > 0)
                                <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>Prize</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($leaderboard as $player)
                                                <tr @if (auth()->id() == $player->user_id) class="table-warning fw-bold" @endif>
                                                    <td>#{{ $player->rank ?? '--' }}</td>
                                                    <td>
                                                        {{ $player->user->name ?? '-' }}
                                                        @if (auth()->id() == $player->user_id)
                                                            <span class="badge bg-primary ms-1">You</span>
                                                        @endif
                                                    </td>
                                                    <td>{{ $player->score }}</td>
                                                    <td>
                                                        @if ($player->prizeAssignment)
                                                            <span class="text-success fw-bold">
                                                                &#8377;{{ number_format($player->prizeAssignment->amount, 2) }}
                                                            </span>
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <p class="text-muted mb-0">Leaderboard will appear after ranks are generated.</p>
                            @endif
                        </div>
                    </div>

                    <div class="d-flex gap-2 flex-wrap">
                        @if ($result)
                            <a href="{{ route('quiz.result', $contest->id) }}" class="btn btn-primary">
                                <i class="fa-solid fa-circle-check me-1"></i> View Quiz Result
                            </a>
                        @endif

                        <a href="{{ route('contest.leaderboard', $contest->id) }}" class="btn btn-warning">
                            <i class="fa-solid fa-trophy me-1"></i> View Full Leaderboard
                        </a>

                        <a href="{{ route('dashboard.my-games') }}" class="btn btn-outline-secondary">
                            Back to My Games
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="dashboardSidebar">
        <div class="offcanvas-header">
            <h5>Dashboard Menu</h5>
            <button class="btn-close" data-bs-dismiss="offcanvas"></button>
        </div>

        <div class="offcanvas-body">
            @include('frontend.dashboard.sidebar')
        </div>
    </div>
@endsection