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

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

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

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

            <div class="row">
                <div class="col-xl-12">
                    <div class="row">
                        <div class="col-xl-7">
                            <div class="d-flex align-items-center flex-wrap casino-tabs">
                                <a href="#" wire:click.prevent="$set('filter','all')"
                                    class="casino-tab {{ $filter == 'all' ? 'active' : '' }}">
                                    <i class="fa-solid fa-gift"></i> All Bonuses
                                </a>
                                <a href="#" wire:click.prevent="$set('filter','active')"
                                    class="casino-tab {{ $filter == 'active' ? 'active' : '' }}">
                                    <i class="fa-solid fa-thumbs-up"></i> Active
                                </a>
                                <a href="#" wire:click.prevent="$set('filter','expired')"
                                    class="casino-tab {{ $filter == 'expired' ? 'active' : '' }}">
                                    <i class="fa-solid fa-medal"></i> Expired
                                </a>
                            </div>
                        </div>

                        <div class="col-xl-5">
                            <div class="row my-2 my-xl-0">
                                <div class="col-xl-8 col-md-7">
                                    <div>
                                        <input type="text" wire:model.defer="search" class="prf-int"
                                            placeholder="Search By Name">
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-5 my-2 my-md-0">
                                    <!-- Search Button -->
                                    <button type="button" class="purple-btn rounded-2" wire:click="searchBonus">
                                        <i class="fa-solid fa-magnifying-glass"></i>
                                    </button>

                                    <!-- Reset 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">

                @foreach ($bonuses as $bonus)
                    <div class="col-12 p-1">
                        <div class="card box-shadow-md p-3 bg-card-gradient">
                            <div class="row">
                                <div class="col-lg-8 col-md-7 col-12">
                                    {{-- <span class="border-btn small-btn me-2 exclusive-bg text-dark border-0"><i
                                            class="fa-solid fa-gem me-1"></i> Exclusive</span> --}}
                                    <p class="mt-2 h2 fw-bold">{{ $bonus->title }}</p>
                                    <div class="d-flex align-items-center justify-content-between mb-3">
                                        <div class="d-flex mt-2 flex-wrap gap-2">
                                            {{-- <span class="tag highlight1">Free Spins</span>
                                            <span class="tag highlight2">Welcome Bonus</span> --}}
                                            @foreach ($bonus->types as $key => $ty)
                                                <div class="tag highlight{{ $key + 1 }}">
                                                    <span>{{ $ty }}</span>
                                                </div>
                                            @endforeach
                                        </div>

                                        <div class="text-muted small">
                                            <i class="fa-solid fa-hourglass-start me-1"></i>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>
                                        </div>
                                    </div>

                                    <div class="">
                                        <span class="fw-bold mb-2 h5 d-block">
                                            <i class="fa-solid fa-file-lines me-1"></i>Bonus Details
                                        </span>
                                        {{ $bonus->description }}
                                    </div>
                                </div>



                                <div class="col-lg-4 col-md-5 col-12 mt-4 mt-md-0 text-center text-md-start">
                                    <div class="d-flex align-items-center">
                                        <img width="50" height="auto"
                                            src="https://www.casino.org/partner-images/nogro/ef5YQOKPbSwa3GzI_fuYfhDqnRg6FFEqq6n4s3N2RtY%3D?w=256&fm=webp&q=75"
                                            alt="Casino" loading="lazy" class="" onerror="this.onerror=null; this.src='{{ CommonHelper::imgFallback() }}';"/>
                                        <div class="ms-2">
                                            <span class="h5 fw-bold">{{ $bonus->casino->casino_name }}</span>
                                            <span class="d-flex text-warning small mt-1">
                                                <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>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="my-3">
                                        <p class="fs-12 fw-semibold">To claim the bonus, use this promo code:</p>
                                        <div class="promo-code-box">
                                            <input type="text" class="promo-code-input"
                                                value="{{ $bonus->promo_code }}" readolny />
                                            <button class="promo-code-button">
                                                <i class="fa-solid fa-copy"></i>
                                            </button>
                                        </div>
                                    </div>

                                    <div class="d-flex justify-content-md-start justify-content-center">
                                        <a href="#" class="purple-btn rounded-2 w-50 mx-1">Claim Bonus</a>
                                        <a href="#" class="purple-btn rounded-2 w-50 mx-1">Visit Casino</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                </div>
            </div>

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

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

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

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

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

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

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

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

    <!-- faqs -->
    <div wire:ignore>
        @livewire('faqs', ['page' => 'all-bonus'])
    </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>