@extends('frontend.layouts.app')

@section('content')
    <div class="dashboard-section py-5">
        <div class="container-fluid">

            <div class="row">

                {{-- Sidebar --}}
                <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>

                {{-- Content --}}
                <div class="col-lg-9 col-xl-10">

                    <div class="card border-0 shadow-sm rounded-4">

                        <div class="card-body p-4">

                            <h3 class="fw-bold mb-2">
                                My Games
                            </h3>

                            <p class="text-muted mb-4">
                                View all contests you have joined.
                            </p>

                            @forelse($games as $game)
                                @php
                                    $contest = $game->contest;

                                    $result = \App\Models\QuizResult::where('contest_id', $contest->id)
                                        ->where('user_id', auth()->id())
                                        ->first();
                                @endphp

                                <div class="card border mb-4">

                                    <div class="card-body">

                                        <div class="row align-items-center">

                                            <div class="col-lg-2">

                                                <img src="{{ asset('storage/' . $contest->banner) }}"
                                                    class="img-fluid rounded" alt="{{ $contest->title }}">

                                            </div>

                                            <div class="col-lg-7">

                                                <h5 class="fw-bold mb-3">
                                                    {{ $contest->title }}
                                                </h5>

                                                <p class="mb-2">
                                                    <strong>Category :</strong>
                                                    {{ $contest->category->name ?? '-' }}
                                                </p>

                                                <p class="mb-2">
                                                    <strong>Entry Fee :</strong>
                                                    ₹{{ $contest->entry_fee }}
                                                </p>
                                                @if (now()->between($contest->quiz_start_time, $contest->quiz_end_time))
                                                    <p class="mb-2">
                                                        <strong>Status :</strong>

                                                        <span class="badge bg-warning">
                                                            Live
                                                        </span>

                                                    </p>
                                                @elseif(now()->lt($contest->quiz_start_time))
                                                    <p class="mb-2">
                                                        <strong>Status :</strong>

                                                        <span class="badge bg-info">
                                                            Upcoming
                                                        </span>

                                                    </p>
                                                @elseif($result)
                                                    <p class="mb-2">
                                                        <strong>Status :</strong>

                                                        <span class="badge bg-success">
                                                            Completed
                                                        </span>

                                                    </p>

                                                    <p class="mb-2">
                                                        <strong>Score :</strong>

                                                        {{ $result->score }}

                                                    </p>

                                                    <p class="mb-0">
                                                        <strong>Rank :</strong>

                                                        #{{ $result->rank ?? '--' }}

                                                    </p>
                                                @else
                                                    <p class="mb-2">
                                                        <strong>Status :</strong>

                                                        <span class="badge bg-danger">
                                                            Missed
                                                        </span>

                                                    </p>
                                                @endif

                                            </div>

                                            <div class="col-lg-3 text-lg-end mt-3 mt-lg-0">

                                                @if (now()->between($contest->quiz_start_time, $contest->quiz_end_time))
                                                    <a href="{{ route('quiz.start', $contest->id) }}"
                                                        class="btn btn-warning">
                                                        Start Quiz
                                                    </a>
                                                @elseif($result)
                                                    <a href="{{ route('dashboard.my-games.show', $contest->id) }}"
                                                        class="btn btn-primary">
                                                    View Result
                                                    </a>
                                                @elseif(now()->lt($contest->quiz_start_time))
                                                    <a href="{{ route('contest.details', $contest->id) }}"
                                                        class="btn btn-info">
                                                        View Details
                                                    </a>
                                                @else
                                                    <a href="{{ route('contest.details', $contest->id) }}"
                                                        class="btn btn-outline-secondary">
                                                        View Contest
                                                    </a>
                                                @endif

                                            </div>

                                        </div>

                                    </div>

                                </div>
                            @empty

                                <div class="text-center py-5">

                                    <img src="{{ asset('public/frontend/assets/img/empty.svg') }}" alt="" width="150"
                                        class="mb-3">

                                    <h5 class="fw-bold">
                                        No Games Found
                                    </h5>

                                    <p class="text-muted mb-4">
                                        You haven't joined any contests yet.
                                    </p>

                                    <a href="{{ route('home') }}" class="btn btn-primary">

                                        Browse Contests

                                    </a>

                                </div>
                            @endforelse

                            <div class="mt-4">

                                {{ $games->links() }}

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </div>

    {{-- Mobile Sidebar --}}

    <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