@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="{{ makeUrl('/') }}" 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="noreferrer nofollow 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">
                    </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">
                    </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="#" wire:click.prevent="$set('type','all')"
                                    class="casino-tab {{ $type == 'all' ? 'active' : '' }}">All Casinos</a>
                                <a href="#" wire:click.prevent="$set('type','top')"
                                    class="casino-tab {{ $type == 'top' ? 'active' : '' }}">Top Rated</a>
                                <a href="#" wire:click.prevent="$set('type','new')"
                                    class="casino-tab {{ $type == 'new' ? 'active' : '' }}">New Casinos</a>
                                <a href="#" wire:click.prevent="$set('type','most')"
                                    class="casino-tab {{ $type == 'most' ? 'active' : '' }}">Most Visited</a>

                            </div>
                        </div>

                        <div class="col-xl-5">
                            <div class="row my-2 my-xl-0">
                                <div class="col-xl-4 col-md-4">
                                    <div>
                                        <select class="form-control" wire:model="country_id">
                                            <option value="">Select Country</option>
                                            @foreach ($countries as $country)
                                                <option value="{{ $country->id }}">{{ $country->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-5">
                                    <div>
                                        <input type="text" id="location" class="prf-int" wire:model="search"
                                            placeholder="Search By Name">
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-3">

                                    <button type="button" class="purple-btn rounded-2 ms-1" wire:click="applyFilters">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </button>
                                    <a href="#" class="purple-btn rounded-2 mx-1" title="Reset"><i
                                            class="fa-solid fa-retweet" wire:click="resetFilters"></i><span
                                            class="d-none">Reset</span></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            @if ($casinos->count() > 0)
                <div class="row pt-2">
                    @foreach ($casinos as $casino)

                        <div class="col-xl-4 col-md-6 col-12 casino-group p-2">
                            <div
                                class="bg-card-gradient overflow-hidden bg-white position-relative rounded-3 p-3 box-shadow-md">
                                @if ($casino->is_featured == 2)
                                    <div class="ribbon premiumbg"><span>Premium</span></div>
                                @elseif($casino->is_featured == 1)
                                    <div class="ribbon featurebg"><span>Featured</span></div>
                                @elseif($casino->is_featured == 0 && $casino->created_at->isToday())
                                    <div class="ribbon"><span>NEW</span></div>
                                @endif

                                <div class="d-flex align-items-center mb-2">
                                    <div>

                                        <img src="{{ $casino->image }}" alt="{{ $casino->casino_name }}" loading="lazy"
                                            title="{{ $casino->casino_name }}" class="casino-logo me-2" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                    </div>
                                    <div>
                                        <span class="mb-0 h5 d-block mb-1">{{ $casino->casino_name }}</span>
                                    </div>
                                </div>

                                <p class="text-center mb-2 fw-medium">{{ $casino->title }}</p>

                                <div class="d-flex mt-2 flex-wrap gap-2 justify-content-center">
                                    @foreach ($casino->types as $key => $val)
                                        <span class="tag highlight{{ $key + 1 }}">{{ $val }}</span>
                                    @endforeach
                                </div>

                                @if (!empty($casino->payment_logos) && count($casino->payment_logos) > 0)
                                    <div class="my-3">
                                        <span class="mt-2 mb-2 d-block fw-medium small">Payment Methods</span>
                                        <div class="payment-icons">
                                            @foreach ($casino->payment_logos as $pm)
                                                <img src="{{ $pm['image'] }}" alt="{{ $pm['name'] }}" loading="lazy"
                                                    title="{{ $pm['name'] }}" style="width:35px;" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';">
                                            @endforeach
                                        </div>
                                    </div>
                                @endif

                                <div class="dropdown mb-3 text-center">
                                    <button
                                        class="btn box-shadow-md rounded-3 py-0 small btn-sm dropdown-toggle text-center"
                                        type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                        See Countries where the casino is available
                                    </button>
                                    <ul class="dropdown-menu">
                                        @foreach ($casino->countries as $country)
                                            <li><a class="dropdown-item" href="#">{{ $country }}</a></li>
                                        @endforeach
                                    </ul>
                                </div>

                                <div class="d-flex justify-content-between align-items-end">
                                    <a href="{{ url('casino-details/' . $casino->slug) }}"
                                        class="purple-btn rounded-2 py-1 w-50 mx-1">
                                        Read Review
                                    </a>
                                    <a href="{{ $casino->casino_url }}"
                                        class="border-btn rounded-2 py-1 w-50 mx-1" target="_blank" rel="noopener noreffer nofollow">Visit Casino</a>
                                    <a href="{{ url('claim-casino/' . $casino->slug) }}"
                                        class="border-btn rounded-2 py-1 w-50 mx-1">Claim Listing</a>
                                </div>
                            </div>
                        </div>
                    @endforeach

                    @if ($casinos->hasMorePages())
                        <div class="text-center my-3">
                            <button wire:click="loadMore" class="purple-btn">Load More</button>
                        </div>
                    @endif
                </div>
            @else
                <p class="text-center">No Casinos Found</p>
            @endif
        </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>

        <div class="modal fade" id="reviewModal" tabindex="-1" aria-labelledby="reviewModalLabel"
            aria-hidden="true" style="display: none;">
            <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>
    </section> -->
    <div wire:ignore>
        @livewire('faqs', ['page' => 'casino-listing'])
    </div>
    <!-- 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>