@extends('frontend.layouts.app')

@section('content')
    <section class="main-banner" style="background-image: url('{{ asset('frontend/assets/img/bg/course-bg.jpg') }}');">
        <div class="container">
            <div class="row">
                <div class="col-xl-12 text-center z-1 position-relative wow fadeInUp">
                    <h2>Explore Games</h2>
                    <p>
                        <a href="#">Home</a> <i class='bx bx-chevrons-right'></i> Games
                    </p>
                </div>
            </div>
        </div>

        <img src="{{ asset('frontend/assets/img/shapes/hsmile.svg') }}" alt="img" class="blshape">
        <img src="{{ asset('frontend/assets/img/shapes/hstart.svg') }}" alt="img" class="brshape">
        <div class="bbig_shape"></div>
    </section>

    <style>
        /* ---- Enhanced Game Card Styling (scoped to this page) ---- */
        .games_section .contest-card {
            position: relative;
            background: #fff;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.06);
            box-shadow: 0 4px 18px rgba(20, 20, 43, 0.06);
            transition: transform .35s ease, box-shadow .35s ease;
        }

        .games_section .contest-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(20, 20, 43, 0.14);
        }

        .games_section .contest-image {
            overflow: hidden;
        }

        .games_section .contest-image img {
            transition: transform .5s ease;
        }

        .games_section .contest-card:hover .contest-image img {
            transform: scale(1.08);
        }

        .games_section .contest-image::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%);
            pointer-events: none;
        }

        .games_section .status-badge {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 2;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .5px;
            padding: 6px 14px;
            border-radius: 30px;
            backdrop-filter: blur(4px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
        }

        .games_section .status-badge.is-live {
            background: #ff3b3b;
            color: #fff;
            animation: pulseLive 1.6s infinite;
        }

        .games_section .status-badge.is-upcoming {
            background: #ffb800;
            color: #22222a;
        }

        .games_section .status-badge.is-ended {
            background: rgba(34, 34, 42, .75);
            color: #fff;
        }

        @keyframes pulseLive {
            0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, .5); }
            70% { box-shadow: 0 0 0 9px rgba(255, 59, 59, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
        }

        .games_section .contest-category-chip {
            position: absolute;
            left: 14px;
            bottom: 14px;
            z-index: 2;
            font-size: 12px;
            font-weight: 600;
            color: #fff;
            background: rgba(255, 255, 255, .18);
            border: 1px solid rgba(255, 255, 255, .35);
            padding: 5px 12px;
            border-radius: 30px;
            backdrop-filter: blur(6px);
        }

        .games_section .contest-body h4 {
            font-size: 19px;
            font-weight: 700;
            line-height: 1.35;
            min-height: 52px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .games_section .prize-entry-row {
            background: linear-gradient(135deg, rgba(255, 184, 0, .08), rgba(255, 59, 59, .05));
            border-radius: 12px;
            padding: 14px 16px;
            margin-top: 16px;
        }

        .games_section .prize-entry-row .label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: .5px;
            color: #8a8a99;
            font-weight: 600;
        }

        .games_section .prize-entry-row .value {
            font-size: 18px;
            font-weight: 800;
        }

        .games_section .prize-entry-row .divider {
            width: 1px;
            background: rgba(0, 0, 0, .08);
        }

        .games_section .meta-chip {
            border: 1px solid rgba(0, 0, 0, .07);
            border-radius: 10px;
            padding: 10px 6px;
            text-align: center;
            transition: background .25s ease, border-color .25s ease;
        }

        .games_section .contest-card:hover .meta-chip {
            border-color: rgba(255, 184, 0, .35);
            background: rgba(255, 184, 0, .05);
        }

        .games_section .meta-chip small {
            display: block;
            font-size: 10.5px;
            color: #9b9bab;
            text-transform: uppercase;
            letter-spacing: .4px;
            margin-bottom: 3px;
        }

        .games_section .meta-chip strong {
            font-size: 13.5px;
        }

        .games_section .contest-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            padding: 12px;
            font-weight: 700;
            font-size: 14.5px;
            text-decoration: none;
            transition: filter .2s ease, transform .2s ease;
        }

        .games_section .contest-btn:hover {
            filter: brightness(1.06);
            transform: translateY(-2px);
        }

        .games_section .play-btn {
            background: linear-gradient(135deg, #ff3b3b, #ff6a3d);
            color: #fff;
        }

        .games_section .upcoming-btn {
            background: linear-gradient(135deg, #ffb800, #ff9d00);
            color: #22222a;
        }

        .games_section .completed-btn {
            background: #22222a;
            color: #fff;
        }

        /* Filter panel */
        .games_section .filter-panel {
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(20, 20, 43, .06);
            border: 1px solid rgba(0, 0, 0, .05);
            position: sticky;
            top: 20px;
        }

        .games_section .filter-panel .form-control {
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, .1);
            padding: 10px 12px;
        }

        .games_section .filter-panel .form-control:focus {
            border-color: #ffb800;
            box-shadow: 0 0 0 3px rgba(255, 184, 0, .15);
        }

        .games_section .pagination {
            margin-bottom: 0;
            --bs-pagination-padding-x: .7rem;
            --bs-pagination-padding-y: .4rem;
            --bs-pagination-font-size: .9rem;
            --bs-pagination-border-radius: .5rem;
        }
    </style>

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

                <div class="col-xl-3 col-lg-4 mb-4 wow fadeInLeft">
                    <div class="filter-panel contact-form p-4">
                        <div class="section-title mb-4">
                            <span>Filter Options</span>
                            <h3 class="h4">Refine Games</h3>
                        </div>

                        <form action="{{ url()->current() }}" method="GET" id="filter-form">
                            <div class="mb-3">
                                <label class="form-label fw-bold">Search</label>
                                <div class="input-group">
                                    <input type="text" name="search" class="form-control" placeholder="Search quizzes..." value="{{ request('search') }}">
                                    <button class="btn btn-warning" type="submit" style="border-radius: 0 10px 10px 0;"><i class="fa-solid fa-magnifying-glass"></i></button>
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Category</label>
                                <select name="category" class="form-control"
                                    onchange="document.getElementById('filter-form').submit();">
                                    <option value="">All Categories</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ request('category') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="mb-3">
                                <label class="form-label fw-bold">Quiz Status</label>
                                <select name="status" class="form-control"
                                    onchange="document.getElementById('filter-form').submit();">
                                    <option value="">All Statuses</option>
                                    <option value="0" {{ request('status') === '0' ? 'selected' : '' }}>
                                        Upcoming</option>
                                    <option value="1" {{ request('status') === '1' ? 'selected' : '' }}>Live
                                    </option>
                                    <option value="2" {{ request('status') === '2' ? 'selected' : '' }}>Ended
                                    </option>
                                </select>
                            </div>

                            <div class="mb-4">
                                <label class="form-label fw-bold">Entry Fee</label>
                                <select name="entry" class="form-control"
                                    onchange="document.getElementById('filter-form').submit();">
                                    <option value="">All Types</option>
                                    <option value="free" {{ request('entry') === 'free' ? 'selected' : '' }}>Free Entry
                                    </option>
                                    <option value="paid" {{ request('entry') === 'paid' ? 'selected' : '' }}>Paid Entry
                                    </option>
                                </select>
                            </div>

                            <div class="col-12">
                                <a href="{{ url()->current() }}"
                                    class="bg-btn text-center d-block w-100 py-2 text-decoration-none text-white"
                                    style="font-size: 14px;">Reset Filters</a>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="col-xl-9 col-lg-8 wow fadeInRight">
                    <div class="row">

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

                                $status = 'Completed';
                                $badgeClass = 'is-ended';
                                $buttonClass = 'completed-btn';
                                $buttonText = 'Leaderboard';
                                $buttonIcon = 'fa-trophy';

                                if (now()->between($game->quiz_start_time, $game->quiz_end_time)) {
                                    $status = 'LIVE';
                                    $badgeClass = 'is-live';
                                    $buttonClass = 'play-btn';
                                    $buttonText = 'Play Now';
                                    $buttonIcon = 'fa-play';
                                } elseif (now()->lt($game->quiz_start_time)) {
                                    $status = 'UPCOMING';
                                    $badgeClass = 'is-upcoming';
                                    $buttonClass = 'upcoming-btn';
                                    $buttonText = 'View Details';
                                    $buttonIcon = 'fa-eye';
                                }
                            @endphp

                            <div class="col-lg-4 col-md-6 mb-4">
                                <div class="contest-card h-100">

                                    <div class="contest-image position-relative">
                                        <img src="{{ asset('storage/' . $game->banner) }}" class="w-100"
                                            style="height:220px;object-fit:cover;" alt="{{ $game->title }}">

                                        <span class="status-badge {{ $badgeClass }}">{{ $status }}</span>

                                        <span class="contest-category-chip">
                                            <i class="fa-solid fa-shapes me-1"></i>{{ $game->category->name }}
                                        </span>
                                    </div>

                                    <div class="contest-body p-4">
                                        <h4>{{ $game->title }}</h4>

                                        <div class="prize-entry-row d-flex align-items-center">
                                            <div class="flex-fill text-center">
                                                <span class="label d-block">Prize Pool</span>
                                                <span class="value text-warning">₹{{ number_format($totalPrize) }}</span>
                                            </div>
                                            <div class="divider mx-3" style="height: 34px;"></div>
                                            <div class="flex-fill text-center">
                                                <span class="label d-block">Entry Fee</span>
                                                <span class="value text-success">
                                                    @if ($game->entry_fee > 0)
                                                        ₹{{ number_format($game->entry_fee) }}
                                                    @else
                                                        FREE
                                                    @endif
                                                </span>
                                            </div>
                                        </div>

                                        <div class="row g-2 mt-3">
                                            <div class="col-6">
                                                <div class="meta-chip">
                                                    <small><i class="fa-solid fa-circle-question me-1"></i>Questions</small>
                                                    <strong>{{ $game->questions->count() }}</strong>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="meta-chip">
                                                    <small><i class="fa-solid fa-users me-1"></i>Players</small>
                                                    <strong>{{ $game->max_participants ?? 'Unlimited' }}</strong>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="meta-chip">
                                                    <small><i class="fa-solid fa-calendar-days me-1"></i>Starts</small>
                                                    <strong>{{ \Carbon\Carbon::parse($game->quiz_start_time)->format('d M') }}</strong>
                                                </div>
                                            </div>

                                            <div class="col-6">
                                                <div class="meta-chip">
                                                    <small><i class="fa-solid fa-clock me-1"></i>Time</small>
                                                    <strong>{{ \Carbon\Carbon::parse($game->quiz_start_time)->format('h:i A') }}</strong>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="mt-4">
                                            @if (now()->between($game->quiz_start_time, $game->quiz_end_time))
                                                <a href="{{ route('quiz.start', $game->id) }}"
                                                    class="contest-btn play-btn w-100">
                                                    <i class="fa-solid {{ $buttonIcon }} me-2"></i>{{ $buttonText }}
                                                </a>
                                            @elseif(now()->lt($game->quiz_start_time))
                                                <a href="{{ route('contest.details', $game->id) }}"
                                                    class="contest-btn upcoming-btn w-100">
                                                    <i class="fa-solid {{ $buttonIcon }} me-2"></i>{{ $buttonText }}
                                                </a>
                                            @else
                                                <a href="{{ route('contest.leaderboard', $game->id) }}"
                                                    class="contest-btn completed-btn w-100">
                                                    <i class="fa-solid {{ $buttonIcon }} me-2"></i>{{ $buttonText }}
                                                </a>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            </div>

                        @empty

                            <div class="col-12">
                                <div class="text-center py-5">
                                    <img src="{{ asset('frontend/assets/img/empty.svg') }}" width="180" class="mb-4">
                                    <h3 class="fw-bold">No Games Available</h3>
                                    <p class="text-muted">There are no games matching your filters.</p>
                                    <a href="{{ route('games') }}" class="theme-btn">View All Games</a>
                                </div>
                            </div>
                        @endforelse

                    </div>

                    <div class="mt-5 d-flex justify-content-center">
                        {{ $games->links('pagination::bootstrap-5') }}
                    </div>

                </div>
            </div>
        </div>
    </section>
@endsection