@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="">By Expert Reviews</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">Your Casino Playground</span>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt nesciunt quaerat sed, unde
                        magnam non maxime nisi vel, aspernatur voluptatibus totam error sequi molestiae iste in
                        assumenda ipsa id! Quo.</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"
                            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"
                            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-12 mt-1 pb-3 text-center">
                            <span class="h3 fw-bold ">Top Rated Online Casinos</span>
                        </div>
                        <div class="col-xl-5">
                            <div class="d-flex align-items-center flex-wrap casino-tabs">
                                <a href="#"
                                wire:click.prevent="switchTab('expert')"
                                class="text-decoration-none text-dark casino-tab {{ $activeTab == 'expert' ? 'active' : '' }}">
                                    <i class="fa-solid fa-jedi"></i> By Expert Reviews
                                </a>

                                <a href="#"
                                wire:click.prevent="switchTab('user')"
                                class="text-decoration-none text-dark casino-tab {{ $activeTab == 'user' ? 'active' : '' }}">
                                    <i class="fa-solid fa-bahai"></i> By User Reviews
                                </a>
                            </div>
                        </div>

                        <div class="col-xl-7">
                            <div class="row my-2 my-xl-0">
                                <div class="col-xl-4 col-md-4">
                                    <div>
                                        <select wire:model.defer="rating" class="form-select prf-int" aria-label="Default select example">
                                            <option value="">Choose Star Rating</option>
                                            <option value="1">One</option>
                                            <option value="2">Two</option>
                                            <option value="3">Three</option>
                                            <option value="4">Four</option>
                                            <option value="5">Five</option>
                                        </select>
                                    </div>
                                </div>

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

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

            <div class="row pt-2">
                @if ($topCasinos->count() > 0)
                    @foreach ($topCasinos as $casino)
                    <div class="col-xl-3 col-md-6 col-12 card-group p-2">
                        <div class="card">
                            <div>
                                <img src="{{ $casino->image }}" class="img-card" alt="{{ $casino->casino_name }}" width="80" height="80">
                                <span class="d-block fw-bold h3 mb-0 pt-2 text-center">{{ $casino->casino_name }}</span>
                                <!-- <p class="text-muted small lh-sm two-line-text mt-2 mb-0 text-center">{{ $casino->title }}</p> -->
                                <p id="shortText{{ $casino->id }}" class="text-muted small lh-sm two-line-text mt-2 mb-0 text-center">
                                    {{ Str::limit($casino->title, 50) }}
                                </p>

                                <p id="fullText{{ $casino->id }}" class="text-muted small lh-sm mt-2 mb-0 text-center d-none">
                                    {{ $casino->title }}
                                </p>
                                <!-- <button type="button" title="Read More" class="bg-transparent border-0  fs-12 text-underline mx-auto d-block">Read More</button> -->
                                 <button type="button"
                                        class="bg-transparent border-0 fs-12 text-underline mx-auto d-block"
                                        onclick="toggleText({{ $casino->id }})">
                                    Read More
                                </button>
                            </div>

                            <div class="card-footer bg-transparent border-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div class="text-center">
                                        <span class="fw-semibold small d-block mb-1">{{ $activeTab == 'expert' ? 'Expert' : 'User' }} Rating</span>
                                        @php
                                            $rating = $casino->highest_rating ?? 0; // 0 if null
                                        @endphp
                                        <span class="d-flex fs-12 text-warning">
                                        @for ($i = 1; $i <= 5; $i++)
                                            @if ($i <= $rating)
                                                <i class="fa-solid fa-star mx-1"></i> <!-- filled star -->
                                            @else
                                                <i class="fa-regular fa-star mx-1"></i> <!-- empty star -->
                                            @endif
                                        @endfor
                                        </span>
                                    </div>
                                    <a href="#" class="border-hover-btn small-btn rounded-2"
                                        title="Visit Casino">Visit Casino</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <p>No casinos found.</p>
                @endif
                <div class="col-12">
                    <div class="text-center">
                        @if ($topCasinos->count() >= $perPage)
                            <button type="button" class="purple-btn"
                                    wire:click="loadMore"
                                    title="Load More">
                                Load More
                            </button>
                        @endif
                    </div>
                </div>
            </div>

            <div class="row pt-2">
                <div class="col-12 mt-1 pb-3">
                    <span class="h3 fw-bold "><i class="fa-solid fa-users me-2"></i>Casino-Wise Reviews From Players</span>
                </div>
                @if ($casinoWiseReviews->count() > 0)
                    @foreach ($casinoWiseReviews as $review)
                    <div class="col-12 card-group p-2">
                        <div class="card box-shadow-md purple-bdr">
                            <div class="row align-items-center">
                                <div class="col-xl-2">
                                    <div class="text-center lh-sm py-2">
                                        <i class="fa-solid fa-circle-user big-icon"></i>
                                        <span class="d-block fw-semibold mt-2">{{$review->user->name}}</span>
                                        <span class="small d-block">Beginner</span>
                                        <span class="d-block"><img src="https://flagpedia.net/data/flags/h80/in.png"
                                                class="rounded-circle m-2" width="20" height="20"
                                                alt="country" /></span>
                                    </div>
                                </div>

                                <div class="col-xl-10 py-2">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div class="d-flex">
                                            <img src="{{ $review->casino->image }}" alt="{{$review->casino->casino_name}}" width="50" height="50" />

                                            <div class="ms-2">
                                                <span class="fw-semibold h5 mb-0 d-block">{{$review->casino->casino_name}}</span>
                                                <div class="d-flex align-items-center">
                                                    <span class="small">Rated:</span>
                                                    @php
                                                        $rating = $review->rating ?? 0;
                                                    @endphp
                                                    <span class="d-flex fs-12 ms-1 text-warning">
                                                    @for ($i = 1; $i <= 5; $i++)
                                                        @if ($i <= $rating)
                                                            <i class="fa-solid fa-star mx-1"></i> <!-- filled star -->
                                                        @else
                                                            <i class="fa-regular fa-star mx-1"></i> <!-- empty star -->
                                                        @endif
                                                    @endfor
                                                    </span>
                                                </div>

                                                <div class="d-flex align-items-center">
                                                    <span class="small">Posted on:</span>
                                                    <span class="d-flex fs-12 fw-bold ms-1">{{ \Carbon\Carbon::parse($review->created_at)->format('d/m/Y') }}</span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="d-flex align-self-baseline me-2">
                                            <a href="#" class="purple-btn small-btn rounded-2"
                                                title="View All Casino">View All Casino</a>
                                        </div>
                                    </div>
                                    <p class="small text-muted mt-2">{{$review->comment}}</p>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <span class="h6 fw-semibold d-block">What They Liked</span>
                                            <ul class="list-unstyled small">
                                                <li><i class="fa-solid fa-thumbs-up text-success me-1"></i> Lorem ipsum
                                                    dolor sit amet, consectetur adipiscing elit.</li>
                                                <li><i class="fa-solid fa-thumbs-up text-success me-1"></i> Lorem ipsum
                                                    dolor sit.</li>
                                                <li><i class="fa-solid fa-thumbs-up text-success me-1"></i> Lorem ipsum
                                                    dolor sit amet.</li>
                                            </ul>
                                        </div>

                                        <div class="col-md-6">
                                            <span class="h6 fw-semibold d-block">What They Disliked</span>
                                            <ul class="list-unstyled small">
                                                <li><i class="fa-solid fa-thumbs-down text-danger me-1"></i> Lorem ipsum
                                                    dolor sit amet, consectetur adipiscing elit.</li>
                                                <li><i class="fa-solid fa-thumbs-down text-danger me-1"></i> Lorem ipsum
                                                    dolor sit.</li>
                                                <li><i class="fa-solid fa-thumbs-down text-danger me-1"></i> Lorem ipsum
                                                    dolor sit amet.</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
                @else
                    <p>No data found.</p>
                @endif

                <div class="col-12 text-center my-2">
                    @if ($casinoWiseReviews->count() >= $reviewPerPage)
                        <button type="button"
                                class="purple-btn"
                                wire:click="loadMoreReviews"
                                title="Load More Reviews">
                            Load More Reviews
                        </button>
                    @endif
                </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-solid fa-star mx-1"></i>
                            <i class="fa-solid 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: 80%"></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: 30%"></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: 25%"></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: 4%"></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' => 'review'])
    </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">
                        {!! $seo->description !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Content -->
    <!-- Page Content -->

</div>
@push('scripts')
<script>
function toggleText(id) {
    document.getElementById('shortText'+id).classList.toggle('d-none');
    document.getElementById('fullText'+id).classList.toggle('d-none');
}
</script>
@endpush