@push('styles')
    <style>
        .casino {
            width: 280px !important;
            height: 140px;
        }

        .star {
            width: 16px !important;
            height: 16px;
        }

        .border-btn {
            border-radius: 12px;
            background-color: white;
            margin-top: 20px;
        }

        .social {
            width: 30px !important;
            height: 30px;
        }

        .socials {
            justify-content: end;
            margin-top: 8px;
        }

        .menu {
            border: 1px solid #F5E6C5;
        }

        .jump {
            text-decoration: none;
            font-weight: 600;
            color: black;
            font-size: 18px;
            padding-block: 4px;
        }

        .jump i {
            color: #000000;
            width: 24px !important;
            height: 24px;
        }

        .jump-active {
            text-decoration: none;
            font-weight: bold;
            color: white;
            font-size: 18px;
            padding-block: 4px;
            border-radius: 16px;
            background-color: #5B2C6F;
        }

        .jump-active i {
            color: white;
            width: 24px !important;
            height: 24px;
        }

        .games {
            padding: 5px;
            background: #FFFFFF;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
            border-radius: 5px;
            text-align: center;
        }

        .game_name {
            font-size: 16px;
            font-weight: bold;
        }

        .provider {
            width: 24px !important;
            height: 24px;
        }

        .provider_name {
            font-size: 16px;
            font-weight: bold;
            white-space: pre-line;
        }

        .bonus {
            padding: 12px 16px;
            border: 1px solid rgba(202, 202, 202, 0.3);
            box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
            border-radius: 12px;
            display: flex;
            align-items: center;
        }

        .exclusive {
            padding: 3px 10px;
            background: linear-gradient(90deg, #C49000 0%, #FFE4B5 100%);
            border-radius: 30px;
        }

        .diamond {
            width: 20px !important;
            height: 20px;
        }

        .exclusive span {
            font-size: 12px;
            font-weight: 700;
        }

        .free {
            padding: 4px 12px;
            background: rgba(112, 197, 226, 0.1);
            box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
        }

        .free span {
            font-size: 12px;
            font-weight: 700;
            color: #1F5E73;
        }

        .welcome {
            padding: 4px 12px;
            background: rgba(247, 231, 206, 0.3);
            box-shadow: inset 0px 3px 4px rgba(0, 0, 0, 0.2);
            border-radius: 20px;
        }

        .welcome span {
            font-size: 12px;
            font-weight: 700;
            color: #A26769;
        }

        .method {
            padding: 4px 12px;
            border: 1px solid #D9D9D9;
            border-radius: 6px;
        }

        .block {
            padding-inline: 5px;
            margin-top: 12px;
        }

        .currency {
            border: 1px solid;
            border-image: linear-gradient(31deg, rgba(108, 52, 131, 0.3) 0%, rgba(108, 52, 131, 0.8) 100%) 1;
            padding: 4px 15px;
            text-align: center;
        }

        .currency span {
            color: #3E1D4C;
            font-size: 14px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .money {
            padding-inline: 5px;
        }

        .feedback {
            width: 20px !important;
            height: 20px;
        }

        @media (max-width : 991px) {
            .owner {
                text-align: center;
            }

            .socials {
                justify-content: center;
            }

            .owner_details {
                margin-top: 12px;
            }
        }

        @media (max-width : 767px) {
            .details {
                text-align: center;
            }

            .rating {
                justify-content: center;
            }

            .owner {
                text-align: center;
            }

            .socials {
                justify-content: center;
            }

            .owner_details {
                margin-top: 12px;
            }
        }

        @media (max-width : 472px) {
            .border-btn {
                font-size: 13px;
            }

            .social {
                width: 25px !important;
                height: 25px;
            }

            .socials {
                margin-top: 2px;
            }
        }
    </style>
@endpush
<div>

    <!-- Breadcrumb -->
    <section class="brdcrumb">
        <div class="container">
            <ul class="mb-0">
                <li><a href="{{ url('/') }} }}" title="Home">Home</a></li>
                <li><a href="#" title="Forum">Forum</a></li>
                <li><a href="{{ url('casino-listing') }} }}" title="Casino">Casino</a></li>
                <li>{{ $casino->casino_name }}</li>
            </ul>
        </div>
    </section>
    <!-- Breadcrumb -->


    <!-- Page Content  -->
    <section class="mt-3">
        <div class="container">
            @if (session()->has('success'))
                <div class="alert alert-success alert-dismissible fade show mt-2" role="alert" id="flashMessage">
                    {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif


            <div class="row">
                <div class="col-xl-10 col-lg-9">
                    <div class="row">
                        <div class="col-xl-3 col-lg-4 col-md-4 text-center">

                            <img src="{{ $casino->image }}" alt="{{ $casino->casino_name }}"
                                title="{{ $casino->casino_name }}" class="img-fluid casino" >
                        </div>
                        <div class="col-xl-9 col-lg-8 col-md-8 details">
                            <span class="fs-2 fw-bold">{{ $casino->casino_name }}</span>
                            <div class="d-flex gap-1 align-items-center rating">

                            </div>
                            <button type="button" class="border-btn" title="Visit Casino"
                                onclick="location.href='casino-listing.html'">
                                <i class="fa-solid fa-arrow-up-right-from-square" style="color: #6c3483;"></i>
                                Visit Casino
                            </button>
                            <button type="button" class="border-btn" title="Edit Listing">
                                <i class="fa-solid fa-pen-to-square" style="color: #6c3483;"></i>
                                Edit Listing
                            </button>
                            <button type="button" class="border-btn" title="Claim Listing"
                                onclick="location.href='claim-casino.html'">
                                <i class="fa-solid fa-file-pen" style="color: #6c3483;"></i>
                                Claim Listing
                            </button>
                        </div>
                    </div>
                </div>


                <div class="col-xl-2 col-lg-3 text-end owner_details">
                    <div class="row">
                        <span class="owner">Owned by</span>
                        <span class="fs-4 fw-bold owner">{{ $casino->user->name }}</span>
                        <div class="d-flex gap-2 socials">

                        </div>
                        <div class="d-flex gap-2 socials">
                            @auth
                                <!-- User is logged in: Open Review Modal -->
                                <button type="button" class="purple-btn rounded-3 my-2" data-bs-toggle="modal"
                                    data-bs-target="#reviewModal">
                                    Write a Review
                                </button>
                            @else
                                <!-- User is NOT logged in: Open Login Modal (Livewire) -->
                                <button type="button" class="purple-btn rounded-3 my-2" data-bs-toggle="modal"
                                    data-bs-target="#LoginModal">
                                    Write a Review
                                </button>

                            @endauth

                            <!-- Livewire Review Form (Review Modal के अंदर use होगा) -->
                            <div>
                                @livewire('loginmodal') <!-- Your separate modal -->
                            </div>
                            <div wire:ignore>
                                @livewire('review-form', ['casinoId' => $casino->id])
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="mt-3">
        <div class="container menu">
            <div class="row">
                <div class="col-xl-3 col-lg-3 px-0">
                    <div class="bg-form p-4 h-100">
                        <div class="row gap-2">
                            <a wire:click.prevent="setTab('overview')"
                                class="{{ $activeTab == 'overview' ? 'jump-active' : 'jump' }}">
                                <i class="fa-solid fa-house"></i> Overview
                            </a>
                            <a wire:click.prevent="setTab('bonuses')"
                                class="{{ $activeTab == 'bonuses' ? 'jump-active' : 'jump' }}">
                                <i class="fa-solid fa-gift"></i> Bonuses
                            </a>
                            <a wire:click.prevent="setTab('games')"
                                class="{{ $activeTab == 'games' ? 'jump-active' : 'jump' }}">
                                <i class="fa-solid fa-dice"></i> Games
                            </a>
                            <a wire:click.prevent="setTab('payments')"
                                class="{{ $activeTab == 'payments' ? 'jump-active' : 'jump' }}">
                                <i class="fa-solid fa-wallet"></i> Payment Methods
                            </a>
                            <a wire:click.prevent="setTab('reviews')"
                                class="{{ $activeTab == 'reviews' ? 'jump-active' : 'jump' }}">
                                <i class="fa-solid fa-comments"></i> Reviews
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-9 p-4">
                    {{-- Overview --}}
                    @if ($activeTab == 'overview')
                        <span class="fs-3 fw-bold">All About ({{ $casino->casino_name }})</span>
                        <p>{{ $casino->short_desc }}
                        </p>
                        <div class="row">
                            <div class="col-xl-6 mt-4">
                                <div class="d-flex justify-content-between">
                                    <div class="headings">
                                        <i class="fa-solid fa-dice" style="color: #000000;"></i>
                                        <span class="fs-5 fw-bold">Games</span>
                                    </div>
                                    <button type="button" class="purple-btn" title="View All">View All</button>
                                </div>
                                <div class="row mt-2">
                                    @foreach ($casino->games as $game)
                                        <div class="col-xl-4 col-lg-3 col-md-4 col-6">
                                            <div class="games">
                                                <img src="{{ $game->image }}" class="img-fluid w-100 rounded-2 mb-1">
                                                <span class="game_name">Coin Craze Jackpot</span>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class="col-xl-6 mt-4">
                                <div class="d-flex justify-content-between">
                                    <div class="headings">
                                        <img src="{{ asset('assets/images/responsible.png') }}"
                                            class="img-fluid provider" alt="Game provider" >

                                        <span class="fs-5 fw-bold">Game Providers</span>
                                    </div>
                                    <button type="button" class="purple-btn" title="View All">View All</button>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-xl-4 col-lg-3 col-md-4 col-6">
                                        <div class="games">
                                            <img src="{{ asset('assets/images/quickspin.jpg') }}"
                                                class="img-fluid w-100 rounded-2 mb-1" >
                                            <span class="provider_name">Provider
                                                Name</span>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lg-3 col-md-4 col-6">
                                        <div class="games">
                                            <img src="{{ asset('assets/images/quickspin.jpg') }}"
                                                class="img-fluid w-100 rounded-2 mb-1" >
                                            <span class="provider_name">Provider
                                                Name</span>
                                        </div>
                                    </div>
                                    <div class="col-xl-4 col-lg-3 col-md-4 col-6">
                                        <div class="games">
                                            <img src="{{ asset('assets/images/quickspin.jpg') }}"
                                                class="img-fluid w-100 rounded-2 mb-1" >
                                            <span class="provider_name">Provider
                                                Name</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 mt-5">
                                <div class="d-flex justify-content-between">
                                    <div class="headings">
                                        <i class="fa-solid fa-gift" style="color: #000000;"></i>
                                        <span class="fs-5 fw-bold">Bonuses</span>
                                    </div>
                                    <button type="button" class="purple-btn" title="View All">View All</button>
                                </div>
                                <div class="row mt-2">
                                    @foreach ($casino->bonuses as $bonus)
                                        <div class="col-12">
                                            <div class="bonus">
                                                <div class="row w-100">
                                                    <div class="d-flex justify-content-start gap-2 mb-2">
                                                        @foreach ($bonus->types as $ty)
                                                            <div class="exclusive">
                                                                <span>{{ $ty }}</span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                    <span class="fs-5"><strong>{{ $bonus->title }}</strong> </span>
                                                </div>
                                                <i class="fa-solid fa-chevron-right fa-lg"
                                                    style="color: #000000;"></i>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>
                            </div>
                            <div class="col-xl-6 mt-5">
                                <div class="d-flex justify-content-between">
                                    <div class="headings">
                                        <i class="fa-solid fa-wallet" style="color: #000000;"></i>
                                        <span class="fs-5 fw-bold">Payment Methods</span>
                                    </div>
                                    <button type="button" class="purple-btn" title="View All">View All</button>
                                </div>
                                <div class="row mb-3">
                                    @foreach ($casino->bonuses as $bonus)
                                        <div class="col-md-2 col-sm-3 col-3 block">
                                            <div class="method">
                                                <img src="{{ asset('assets/images/visa_small.png') }}"
                                                    class="img-fluid w-100" >
                                            </div>
                                        </div>
                                    @endforeach
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ asset('assets/images/visa_small.png') }}"
                                                class="img-fluid w-100" >
                                        </div>
                                    </div>
                                </div>
                                <span class="fs-6 fw-semibold">Accepted Currencies</span>
                                <div class="row">
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-4 mt-2 money">
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mt-5">
                                <div>
                                    <i class="fa-solid fa-comments" style="color: #000000;"></i>
                                    <span class="fs-5 fw-bold">Overall User Feedback</span>
                                </div>
                                <div class="row mt-2">
                                    <div class="col-lg-6 mt-2">
                                        <span class="fw-bold">What users liked about the Casino</span>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/like (4).png') }}"
                                                class="img-fluid feedback" alt="Liked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/like (4).png') }}"
                                                class="img-fluid feedback" alt="Liked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/like (4).png') }}"
                                                class="img-fluid feedback" alt="Liked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                    </div>
                                    <div class="col-lg-6 mt-2">
                                        <span class="fw-bold">What users disliked about the Casino</span>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/dislike.png') }}"
                                                class="img-fluid feedback" alt="Disliked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/dislike.png') }}"
                                                class="img-fluid feedback" alt="Disliked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                        <div class="d-flex align-items-center mt-2 gap-2">
                                            <img src="{{ asset('assets/images/dislike.png') }}"
                                                class="img-fluid feedback" alt="Disliked" >
                                            <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                adipiscing elit.</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                    {{-- Bonuses --}}
                    @if ($activeTab == 'bonuses')
                        <span class="fs-3 fw-bold">Casino Bonuses</span>
                        <p>{{ $casino->bonus_short_desc }}
                        </p>

                        @foreach ($casino->bonuses as $bonus)
                            <div class="col-12">
                                <div class="bonus">
                                    <div class="row w-100">
                                        <div class="col-md-8 pe-4">
                                            {{-- <div class="exclusive">
                                            <img src="./assets/images/diamond.png" class="img-fluid diamond"
                                                alt="Exclusive">
                                            <span>Exclusive</span>
                                        </div> --}}

                                            <span class="fs-4"><strong>{{ $bonus->title }}</strong> </span>
                                            <div class="features mt-1 mb-2">
                                                <div class="d-flex justify-content-start gap-2">
                                                    @foreach ($bonus->types as $ty)
                                                        <div class="free">
                                                            <span>{{ $ty }}</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                                <div class="expire">
                                                    <i class="fa-solid fa-hourglass-half" style="color: #000000;"></i>
                                                    <span>Expires in :
                                                        <strong>{{ remainingDays(\Carbon\Carbon::parse($bonus->end_date)->format('Y-m-d')) > 0 ? remainingDays(\Carbon\Carbon::parse($bonus->end_date)->format('Y-m-d')) . ' days' : 'Expired' }}</strong></span>
                                                </div>

                                            </div>
                                            <div class="details my-2">
                                                <i class="fa-notdog fa-solid fa-list fa-lg me-1"
                                                    style="color: #000000;"></i>
                                                <span>Bonus Details</span>
                                            </div>
                                            <div class="d-flex px-3 gap-2">
                                                {{ CommonHelper::addNoFollowToExternalLinks($bonus->description) }}
                                            </div>
                                            {{-- <div class="d-flex px-3 gap-2">
                                                <img src="./assets/images/pointing-right (1).png"
                                                    class="img-fluid right">
                                                <span class="fw-semibold">Lorem ipsum dolor sit amet, consectetur
                                                    adipiscing
                                                    elit.</span>
                                            </div> --}}
                                            {{-- <div class="text-center mt-2">
                                                <span class="read">Read More</span>
                                                <i class="fa-solid fa-chevron-down" style="color: #3e1d4c;"></i>
                                            </div> --}}
                                        </div>
                                        <div class="col-md-4 mt-1">
                                            <span class="fs-14">To claim the bonus, use this promo code :</span>
                                            <div class="promo mt-1">
                                                <span class="fw-semibold">{{ $bonus->promo_code }}</span>
                                                <div class="copy">
                                                    <i class="fa-regular fa-copy fa-flip-horizontal"
                                                        style="color: #ffffff;"></i>
                                                </div>
                                            </div>
                                            <div class="mt-5 buttons">
                                                <button type="button" class="purple-btn w-100 mt-2">Claim Bonus
                                                    Now</button>
                                                <button type="button" class="purple-btn w-100 mt-2">View Other
                                                    Casinos</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @endif

                    {{-- Games --}}
                    @if ($activeTab == 'games')
                        <span class="fs-3 fw-bold">Casino Games</span>
                        <p>{{ $casino->game_short_desc }}
                        </p>
                        <div class="row">
                            @foreach ($casino->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">
                                        <span class="heart-icon px-1 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 }}" class="gamecard-img-top"
                                                alt="{{ $game->name }}"  />

                                            <div class="hover-overlay">
                                                <a href="#" class="purple-btn game-btn" title="Play Now">Play
                                                    Now</a>
                                            </div>
                                        </div>
                                        <div class="bg-card-gradient">
                                            <div class="gamecard-body text-center pt-3 pb-0">
                                                <span class=" h5 px-4 d-block">{{ $game->name }}</span>
                                                <div class="d-flex justify-content-center my-2 gap-2">
                                                    {{-- <div class="free">
                                                        <span>Free Spins</span>
                                                    </div>
                                                    <div class="welcome">
                                                        <span>Welcome Bonus</span>
                                                    </div> --}}
                                                    @foreach ($game->types as $ty)
                                                        <div class="free">
                                                            <span>{{ $ty }}</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                        </div>



                    @endif

                    {{-- Payment Methods --}}
                    @if ($activeTab == 'payments')
                        <span class="fs-3 fw-bold">Payment Methods</span>
                        <p>{{ $casino->payment_short_desc }}
                        </p>

                        <div class="col-12 mt-3">
                            <div class="row mb-4">
                                @foreach ($casino->paymentinfo as $payment)
                                    <div class="col-md-2 col-sm-3 col-3 block">
                                        <div class="method">
                                            <img src="{{ $payment->payment_method->image }}" class="img-fluid w-100" >
                                        </div>
                                        <div class="currency">
                                            <span>inr</span>
                                        </div>
                                    </div>
                                @endforeach

                            </div>

                        </div>
                    @endif

                    {{-- Reviews --}}
                    @if ($activeTab == 'reviews')
                        <span class="fs-3 fw-bold">User Reviews</span>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper vitae ex vitae
                            ultrices. Suspendisse potenti.
                        </p>
                        <div class="col-12 mt-3">
                            <div class="review">
                                <div class="row align-items-center">
                                    <div class="col-xl-2 text-center">
                                        <img src="./assets/images/user-test.jpg" class="img-fluid user"
                                            alt="User" >
                                        <div class="col mt-2">
                                            <span class="fs-5 fw-bold d-block">Username</span>
                                            <span>Beginner</span>
                                            <img src="./assets/images/flag.jpg" class="img-fluid flag"
                                                alt="Country" >
                                        </div>
                                    </div>
                                    <div class="col-xl-10">
                                        <div class="d-flex justify-content-between">
                                            <div class="d-flex align-items-center gap-1">
                                                <span class="small text-muted">Rated : </span>
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/dull star.png" class="img-fluid small_star"
                                                    alt="Rating" >
                                            </div>
                                            <span class="small text-muted">Posted on :
                                                <strong>01/08/2025</strong></span>
                                        </div>
                                        <hr class="my-2">
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus
                                            aliquet
                                            sem a euismod. Vivamus viverra lacinia magna. Praesent ut mauris dictum,
                                            fringilla purus finibus, aliquet leo.
                                        </span>
                                        <div class="text-center mt-2">
                                            <span class="read">Read More</span>
                                            <i class="fa-solid fa-chevron-down" style="color: #3e1d4c;"></i>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users liked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users disliked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="review">
                                <div class="row align-items-center">
                                    <div class="col-xl-2 text-center">
                                        <img src="./assets/images/user-test.jpg" class="img-fluid user"
                                            alt="User" >
                                        <div class="col mt-2">
                                            <span class="fs-5 fw-bold d-block">Username</span>
                                            <span>Beginner</span>
                                            <img src="./assets/images/flag.jpg" class="img-fluid flag"
                                                alt="Country" >
                                        </div>
                                    </div>
                                    <div class="col-xl-10">
                                        <div class="d-flex justify-content-between">
                                            <div class="d-flex align-items-center gap-1">
                                                <span class="small text-muted">Rated : </span>
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/dull star.png" class="img-fluid small_star"
                                                    alt="Rating" >
                                            </div>
                                            <span class="small text-muted">Posted on :
                                                <strong>01/08/2025</strong></span>
                                        </div>
                                        <hr class="my-2">
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus
                                            aliquet
                                            sem a euismod. Vivamus viverra lacinia magna. Praesent ut mauris dictum,
                                            fringilla purus finibus, aliquet leo.
                                        </span>
                                        <div class="text-center mt-2">
                                            <span class="read">Read More</span>
                                            <i class="fa-solid fa-chevron-down" style="color: #3e1d4c;"></i>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users liked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users disliked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mt-3">
                            <div class="review">
                                <div class="row align-items-center">
                                    <div class="col-xl-2 text-center">
                                        <img src="./assets/images/user-test.jpg" class="img-fluid user"
                                            alt="User" >
                                        <div class="col mt-2">
                                            <span class="fs-5 fw-bold d-block">Username</span>
                                            <span>Beginner</span>
                                            <img src="./assets/images/flag.jpg" class="img-fluid flag"
                                                alt="Country" >
                                        </div>
                                    </div>
                                    <div class="col-xl-10">
                                        <div class="d-flex justify-content-between">
                                            <div class="d-flex align-items-center gap-1">
                                                <span class="small text-muted">Rated : </span>
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/bright star.png"
                                                    class="img-fluid small_star" alt="Rating" >
                                                <img src="./assets/images/dull star.png" class="img-fluid small_star"
                                                    alt="Rating" >
                                            </div>
                                            <span class="small text-muted">Posted on :
                                                <strong>01/08/2025</strong></span>
                                        </div>
                                        <hr class="my-2">
                                        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus
                                            aliquet
                                            sem a euismod. Vivamus viverra lacinia magna. Praesent ut mauris dictum,
                                            fringilla purus finibus, aliquet leo.
                                        </span>
                                        <div class="text-center mt-2">
                                            <span class="read">Read More</span>
                                            <i class="fa-solid fa-chevron-down" style="color: #3e1d4c;"></i>
                                        </div>
                                        <div class="row mt-2">
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users liked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/like (4).png" class="img-fluid feedback"
                                                        alt="Liked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                            <div class="col-md-6 mt-2">
                                                <span class="fw-bold">What users disliked about the Casino</span>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                                <div class="d-flex mt-2 gap-2 align-items-center">
                                                    <img src="./assets/images/dislike.png" class="img-fluid feedback"
                                                        alt="Disliked" >
                                                    <span class="fs-14 fw-semibold">Lorem ipsum dolor sit amet,
                                                        consectetur
                                                        adipiscing elit.</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>

    <!-- faqs -->
    @if (!empty($casino->faqs))
        <section class="py-3">
            <div class="container">
                <div class="row">
                    <div class="col-xl-10 mx-auto text-center">
                        <span class="d-block h2 mb-2 fw-bold text-center">Frequently Asked Questions</span>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xl-5 text-center">
                        <div>
                            <img src="{{ asset('assets/images/home-faq.webp') }}" alt="faq" class="img-fluid"
                                width="300" height="auto"  />
                        </div>
                        <div class="row">
                            <div class="col-xl-10 mx-auto mt-3">
                                <div class="bdr-purple p-2 text-center  rounded-3">
                                    <span class="d-block fw-bold ">Have any further questions?</span>
                                    <a href="{{ url('contact') }}" title="contact us"
                                        class="purple-btn small-btn rounded-2 mt-2">Contact us</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-7 mt-2">
                        <div class="accordion-container">
                            <div class="accordion" id="purpleAccordion">
                                @foreach (json_decode($casino->faqs) as $index => $faq)
                                    <div class="accordion-item">
                                        <h2 class="accordion-header fs-author border-0 w-100 text-start" id="heading{{ $index }}">
                                            <button class="accordion-button {{ $index != 0 ? 'collapsed' : '' }}"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#collapse{{ $index }}"
                                                aria-expanded="{{ $index == 0 ? 'true' : 'false' }}"
                                                aria-controls="collapse{{ $index }}">
                                                {{ $faq->question ?? '' }}
                                            </button>
                                        </h2>
                                        <div id="collapse{{ $index }}"
                                            class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}"
                                            aria-labelledby="heading{{ $index }}"
                                            data-bs-parent="#purpleAccordion">
                                            <div class="accordion-body">
                                                {{ $faq->answer ?? '' }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
    <!-- Faqs -->

    <!-- Content -->
    <section>
        <div class="container">
            <div class="row">
                <div class="col-12 top-border bg-card-gradient">
                    <div class="details-page py-3">
                        {{ CommonHelper::addNoFollowToExternalLinks($casino->description) }}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Content -->
    <!-- Page Content -->
</div>