@push('meta_data')
    <title>{{ $seo->seo_title ?? config('app.name') }}</title>
    <meta name="description" content="{{ $seo->meta_description ?? '' }}">
    <meta name="keywords" content="{{ $seo->meta_keywords ?? '' }}">

    {{-- Open Graph --}}
    <meta property="og:title" content="{{ $seo->seo_title ?? '' }}">
    <meta property="og:description" content="{{ $seo->meta_description ?? '' }}">
    {{--
    <meta property="og:image" content="{{ $seo->og_image ?? asset('default-og.png') }}"> --}}
    <meta property="og:type" content="website">
@endpush
<div>
    <!-- Brdcrumb -->
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="index.html" title="Home">Home</a></li>
                <li class="">{{ $seo->breadcrum ?? '' }}</li>
            </ul>
        </div>
    </section>
    <!-- Brdcrumb -->

    <!-- Page Content  -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-xl-10 mx-auto text-center">
                    <span class="h2 fw-semibold">{{ $seo->h1 ?? '' }}</span>
                    <p>{{ $seo->short_description ?? '' }}</p>
                </div>
            </div>

            <div class="row justify-content-center mb-3">
                <div class="col-xl-6 col-12 text-center col-lg-5">
                    <a href="#" class="bg-transparent border-0 w-100 p-0" title="Ads" target="_blank" rel="noopener">
                        <img class="h-auto w-100" width="450" height="98" loading="lazy"
                            src="https://d3iuzwoiyg9qa8.cloudfront.net/webadmin/storage/public/advertisByCountries/August2025/2rzeDL8jitqcgOkGl6x7fUscZUmtZf90ZwI8QwZV.png"
                            alt="banner" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                    </a>
                </div>
                <div class="col-xl-6 col-12 text-center col-lg-5">
                    <a href="#" class="bg-transparent border-0 w-100 p-0" title="Ads" target="_blank"
                        rel="noreferrer noopener nofollow">
                        <img class="h-auto w-100" width="450" height="98" loading="lazy"
                            src="https://d3iuzwoiyg9qa8.cloudfront.net/webadmin/storage/public/advertisByCountries/July2025/psPmiwbcOGxfnWuwRsA5xzXyZPHW3GT8hF7oKQX8.png"
                            alt="banner" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                    </a>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="d-flex align-items-center flex-wrap casino-tabs">
                                <a href="javascript:void(0)" wire:click="$set('filter','all')"
                                    class="text-decoration-none text-dark casino-tab {{ $filter === 'all' ? 'active' : '' }}">
                                    <i class="fa-solid fa-dice"></i> All Games
                                </a>

                                <a href="javascript:void(0)" wire:click="$set('filter','1')"
                                    class="text-decoration-none text-dark casino-tab {{ $filter === '1' ? 'active' : '' }}">
                                    <i class="fa-solid fa-comment-dollar"></i> Free Games
                                </a>

                                <a href="javascript:void(0)" wire:click="$set('filter','2')"
                                    class="text-decoration-none text-dark casino-tab {{ $filter === '2' ? 'active' : '' }}">
                                    <i class="fa-solid fa-fire"></i> Featured Games
                                </a>
                            </div>
                        </div>
                        <div class="col-xl-5">
                            <div class="row my-2 my-xl-0">
                                <div class="col-md-8">
                                    <div>
                                        <input type="text" class="prf-int w-100" placeholder="Search By Name"
                                            wire:model.debounce.500ms="search">
                                    </div>
                                </div>

                                <div class="col-md-4 d-flex">
                                    <button type="button" class="purple-btn rounded-2 me-1" wire:click="$refresh">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </button>
                                    <a href="javascript:void(0)" class="purple-btn rounded-2" wire:click="resetSearch">
                                        <i class="fa-solid fa-retweet"></i>
                                        <span class="d-none">Reset</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row my-2">

                <div>
                    <div class="row">
                        @foreach ($games as $game)

                            <div class="col-xl-3 col-md-6 col-12 p-1 card-group">
                                <div class="card box-shadow-md rounded-3 overflow-hidden cursor-pointer h-100">
                                    {{-- Example: अगर आप चाहें तो DB में कोई field रख सकते हैं is_new --}}
                                    @if ($game->is_new ?? true)
                                        <span class="badge-new">NEW</span>
                                    @endif

                                    <span class="heart-icon px-0 purple-btn small-btn rounded-2 bg-white">
                                        <i class="fa-regular fa-heart text-dark"></i>
                                    </span>

                                    <div class="position-relative">
                                        <img src="{{ $game->image ?? 'https://via.placeholder.com/300x200' }}"
                                            class="gamecard-img-top" loading="lazy" alt="{{ $game->name }}" />

                                        <div class="hover-overlay">
                                            <a href="{{ route('games', $game->id) }}" class="purple-btn game-btn">Play
                                                Now</a>
                                        </div>
                                    </div>

                                    <div class="bg-card-gradient">
                                        <div class="gamecard-body text-center pt-3 pb-0">
                                            @if ($game->game_category == 1)
                                                <div class="free-ribbon">
                                                    <span>FREE</span>
                                                </div>
                                            @endif

                                            @if ($game->game_category == 2)
                                                <span
                                                    class="border-btn small-btn me-2 feature-bg text-dark border-0 position-absolute feature end-0">Featured</span>
                                            @endif

                                            <span class="h5 px-4 mt-3 d-block">{{ $game->name }}</span>

                                            {{-- Tags --}}
                                            <div class="d-flex mt-2 flex-wrap gap-2 justify-content-center">
                                                @if (!empty($game->types))
                                                    @foreach ($game->types as $tag)
                                                        <span class="tag highlight1">{{ trim($tag) }}</span>
                                                    @endforeach
                                                @endif
                                            </div>
                                        </div>

                                        <div class="card-footer bg-transparent border-0 text-center py-3">
                                            <a href="{{ route('game-details', $game->alias) }}"
                                                class="border-btn rounded-2 small" title="view details">View
                                                Details</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>

                    {{-- Load More Button --}}
                    @if ($games->hasMorePages())
                        <div class="text-center mt-3">
                            <button wire:click="loadMore" class="btn btn-primary">
                                Load More
                            </button>
                        </div>
                    @endif
                </div>
            </div>

            <div class="row mb-3">
                <div class="py-2">
                    <span class="h4 d-block mb-0 fw-bold"><i class="fa-solid fa-hands-bubbles me-2"></i>Game
                        Providers</span>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>

                <div class="col-xl-2 col-lg-4 col-md-6 p-1">
                    <div class="card box-shadow-md">
                        <div class="p-2">
                            <div class="provider-logo-box">
                                <img src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                    alt="game" loading="lazy" />
                            </div>
                            <span class="d-block text-center h5 fw-bold mt-2 mb-1 one-line-text">Provider Name</span>
                            <span class="d-block small text-muted text-center">Total Games : <b>123</b></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <section>
        <div class="container">
            <div class="row border-bottom border-dark-subtle">
                <div class="col-xl-8">
                    <div class="row  my-2">
                        <span class="text-center h4 d-block mb-0 fw-bold">Leave a Comment</span>
                        <div class="col-md-6 col-12 p-1">
                            <label class="prf-lbl mb-1" for="name">Name:</label>
                            <input type="text" id="name" class="prf-int" placeholder="Name">
                        </div>

                        <div class="col-md-6 col-12 p-1">
                            <label class="prf-lbl mb-1" for="email">Email:</label>
                            <input type="email" id="email" class="prf-int" placeholder="Email">
                        </div>

                        <div class="col-12 p-1">
                            <label class="prf-lbl mb-1" for="comment">Comment:</label>
                            <textarea class="prf-int" name="comment" placeholder="Write your comment here"
                                rows="7"></textarea>
                        </div>

                        <div class="col-12 text-center">
                            <button type="button" class="purple-btn rounded-3 my-2">Post Comment</button>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div>
                        <span class="text-center h4 d-block mb-4 fw-bold">123 Reviews</span>
                        <span class="h6 mb-0 fw-medium text-center d-block">Overall Rating</span>
                    </div>

                    <div class="d-flex align-items-center mb-4 justify-content-center">
                        <span class="mb-0 me-2 h1 fw-bold">4</span>
                        <div class="d-flex align-items-center text-warning h6 mb-0">
                            <i class="fa-solid fa-star mx-1"></i>
                            <i class="fa-solid fa-star mx-1"></i>
                            <i class="fa-regular fa-star mx-1"></i>
                            <i class="fa-regular fa-star mx-1"></i>
                            <i class="fa-regular fa-star mx-1"></i>
                        </div>
                    </div>

                    <div>
                        <div class="d-flex align-items-center mb-2">
                            <span class="d-block h6 mb-0 me-1 fw-medium">5 <i
                                    class="fa-solid fa-star me-2 text-warning"></i></span>
                            <div class="progress flex-grow-1" role="progressbar" aria-label="Success example"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-purple-palm" style="width: 25%"></div>
                            </div>
                            <div class="ms-2 fw-medium">80</div>
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <span class="d-block h6 mb-0 me-1 fw-medium">4 <i
                                    class="fa-solid fa-star me-2 text-warning"></i></span>
                            <div class="progress flex-grow-1" role="progressbar" aria-label="Success example"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-purple-palm" style="width: 10%"></div>
                            </div>
                            <div class="ms-2 fw-medium">10</div>
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <span class="d-block h6 mb-0 me-1 fw-medium">3 <i
                                    class="fa-solid fa-star me-2 text-warning"></i></span>
                            <div class="progress flex-grow-1" role="progressbar" aria-label="Success example"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-purple-palm" style="width: 20%"></div>
                            </div>
                            <div class="ms-2 fw-medium">30</div>
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <span class="d-block h6 mb-0 me-1 fw-medium">2 <i
                                    class="fa-solid fa-star me-2 text-warning"></i></span>
                            <div class="progress flex-grow-1" role="progressbar" aria-label="Success example"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-purple-palm" style="width: 15%"></div>
                            </div>
                            <div class="ms-2 fw-medium">25</div>
                        </div>

                        <div class="d-flex align-items-center mb-2">
                            <span class="d-block h6 mb-0 me-1 fw-medium">1 <i
                                    class="fa-solid fa-star me-2 text-warning"></i></span>
                            <div class="progress flex-grow-1" role="progressbar" aria-label="Success example"
                                aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
                                <div class="progress-bar bg-purple-palm" style="width: 5%"></div>
                            </div>
                            <div class="ms-2 fw-medium">4</div>
                        </div>
                    </div>

                    <div class="text-center">
                        <button type="button" class="purple-btn rounded-3 my-2" data-bs-toggle="modal"
                            data-bs-target="#reviewModal">Write a Review</button>
                    </div>

                </div>
            </div>

            <div class="row mt-3">
                <div>
                    <span class="h5 mb-0 fw-bold "><i class="fa-regular fa-comments me-2"></i>Conversations You Can Be
                        a Part Of</span>
                </div>

                <div class="col-12 mt-2 border-bottom py-2">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div class="d-flex align-items-center">
                            <div class="">
                                <i class="fa-regular fa-circle-user me-2 font-big"></i>
                            </div>
                            <span class="fw-semibold h5 mb-0">User name</span>
                        </div>
                        <span class="small text-muted">Posted on:- 20/07/2025</span>
                    </div>
                    <p class="small mb-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam molestias
                        perferendis saepe magni molestiae minima quisquam reiciendis perspiciatis, sint tempore qui
                        exercitationem placeat, expedita omnis delectus nemo provident eaque culpa.</p>
                    <div class="interaction-icons">
                        <button class="bg-transparent border-0 text-muted"><i class="fa-solid fa-heart"></i> 6
                            likes</button>
                        <button class="bg-transparent border-0 text-muted" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapsecomment" aria-expanded="false" aria-controls="collapsecomment"><i
                                class="fa-solid fa-comment"></i> 6 comments</button>
                        <span><i class="fa-solid fa-share"></i> Share</span>
                    </div>

                    <div class="collapse" id="collapsecomment">
                        <div class="card border-0 card-body">
                            <div class="row">
                                <div class="col-12 p-1">
                                    <label class="prf-lbl mb-1" for="uname">Name:</label>
                                    <input type="text" id="uname" class="prf-int" placeholder="Name">
                                </div>
                                <div class="col-12 p-1">
                                    <label class="prf-lbl mb-1" for="comment">Comment:</label>
                                    <textarea class="prf-int" name="comment" id="comment"
                                        placeholder="Write your comment here" rows="4"></textarea>
                                </div>
                                <div class="col-12 text-end">
                                    <button type="button" class="purple-btn rounded-3 my-2">Post Comment</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 mt-2 border-bottom py-2">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div class="d-flex align-items-center">
                            <div class="">
                                <i class="fa-regular fa-circle-user me-2 font-big"></i>
                            </div>
                            <span class="fw-semibold h5 mb-0">User name</span>
                        </div>
                        <span class="small text-muted">Posted on:- 20/07/2025</span>
                    </div>
                    <p class="small mb-2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam molestias
                        perferendis saepe magni molestiae minima quisquam reiciendis perspiciatis, sint tempore qui
                        exercitationem placeat, expedita omnis delectus nemo provident eaque culpa.</p>
                    <div class="interaction-icons">
                        <button class="bg-transparent border-0 text-muted"><i class="fa-solid fa-heart"></i> 6
                            likes</button>
                        <button class="bg-transparent border-0 text-muted" type="button" data-bs-toggle="collapse"
                            data-bs-target="#collapsecomment" aria-expanded="false" aria-controls="collapsecomment"><i
                                class="fa-solid fa-comment"></i> 6 comments</button>
                        <span><i class="fa-solid fa-share"></i> Share</span>
                    </div>

                    <div class="collapse" id="collapsecomment">
                        <div class="card border-0 card-body">
                            <div class="row">
                                <div class="col-12 p-1">
                                    <label class="prf-lbl mb-1" for="uname">Name:</label>
                                    <input type="text" id="uname" class="prf-int" placeholder="Name">
                                </div>
                                <div class="col-12 p-1">
                                    <label class="prf-lbl mb-1" for="comment">Comment:</label>
                                    <textarea class="prf-int" name="comment" id="comment"
                                        placeholder="Write your comment here" rows="4"></textarea>
                                </div>
                                <div class="col-12 text-end">
                                    <button type="button" class="purple-btn rounded-3 my-2">Post Comment</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Review Modal -->
        <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header border-bottom-0 pb-0">
                        <span class="modal-title fs-5" id="reviewModalLabel">Write Review</span>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="my-1">
                            <input type="text" id="username" class="prf-int" placeholder="Name">
                        </div>

                        <div class="my-1">
                            <input type="email" id="email" class="prf-int" placeholder="Email Id">
                        </div>

                        <div class="my-1">
                            <textarea class="prf-int" name="reviewcomment" placeholder="Write your comment here"
                                rows="4"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-1">
                        <button type="button" class="border-btn rounded-3" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="purple-btn rounded-3">Submit</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- Review  Modal -->
    </section> --}}


    <!-- faqs -->
    <div wire:ignore>
        @livewire('faqs', ['page' => 'all-games'])
    </div>
    <!-- Faqs -->

    <!-- Content -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 top-border bg-card-gradient">
                    <div class="details-page py-3">
                                            </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Content -->
    <!-- Page Content  -->
</div>