@extends('website.layouts.app')

@section('content')
    <section id="hero_banner"
        style="background: url('{{ asset($data->section_one_image) }}'); background-size: cover; background-position: center;">
        <div class="container-fluid banner_h d-flex align-items-center max_width">
            <div class="row w-100 justify-content-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="content_banner pt-5">
                                <h2>{{ $data->section_one_heading }}</h2>
                                <p>{{ strip_tags($data->section_one_description) }}
                                </p>
                                @if (!Auth::check())
                                    <div class="navbar-buttons" style="display: block !important">
                                        <a data-bs-toggle="modal" data-bs-target="#registerModal"
                                            class="btn bttn1 rounded-pill fontbtnnb">
                                            {{ $data->section_one_button_text }}
                                        </a>
                                    </div>
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{--
    <span class="book_offer">
        <a href="" data-bs-toggle="modal" data-bs-target="#bookListModal">
            Book Now
        </a>
    </span> --}}
    {{-- @foreach ($bookCovers as $cover)
    @if (isUserOnline($cover->user_id))
        <span class="text-success">Online</span>
    @else
        <span class="text-muted">Offline</span>
    @endif
@endforeach --}}

    {{-- @foreach ($bookCovers as $profile)
        <div class="profile-box">
            <p>{{ $profile->real_name }}</p>
<p>{{ $profile->nickname}}</p>
<p>{{ $profile->user?->email }}</p>

            @php $user = $profile->user; @endphp

            @if ($user && $user->isOnline())
                <span class="text-success">Online</span>
            @elseif ($user && $user->last_seen)
                <span class="text-muted">Offline - Last seen: {{ $user->last_seen->diffForHumans() }}</span>
            @else
                <span class="text-muted">Offline - Last seen: N/A</span>
            @endif
        </div>
    @endforeach --}}






    {{-- @if (isUserOnline($userId))
    <span class="text-success">Online</span>
@else
    <span class="text-muted">
        Offline
        @if (Cache::has('user-last-seen-' . $userId))
            (Last seen {{ \Carbon\Carbon::parse(Cache::get('user-last-seen-' . $userId))->diffForHumans() }})
        @endif
    </span>
@endif

@if (isUserOnline($userId))
    <span class="text-success">Online</span>
@else
    <span class="text-muted">Offline</span>
@endif --}}





    <section id="book-slider">
        <div class="container-fluid max_width">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row d-flex justify-content-center align-items-center my-md-4 my-3">
                        <div class="row d-flex justify-content-end align-items-center my-md-4 my-3">
                            <div class="col-lg-3 col-md-4 col-12 px-0">
                                <div class="search-title text-start text-lg-end text-md-end pt-md-2 me-md-4">
                                    <h6>{{ $data->search_filter_heading }}</h6>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-6 col-12 px-0">
                                <div class="search_country_index text-lg-end text-md-end text-end">
                                    <select id="CountryMain" class="form-select">
                                         @php
                                            $countries = [
                                                            'Afghanistan' => 'Afghanistan',
                                                            'Albania' => 'Albania',
                                                            'Algeria' => 'Algeria',
                                                            'Andorra' => 'Andorra',
                                                            'Angola' => 'Angola',
                                                            'Antigua and Barbuda' => 'Antigua and Barbuda',
                                                            'Argentina' => 'Argentina',
                                                            'Armenia' => 'Armenia',
                                                            'Australia' => 'Australia',
                                                            'Austria' => 'Austria',
                                                            'Azerbaijan' => 'Azerbaijan',
                                                            'Bahamas' => 'Bahamas',
                                                            'Bahrain' => 'Bahrain',
                                                            'Bangladesh' => 'Bangladesh',
                                                            'Barbados' => 'Barbados',
                                                            'Belarus' => 'Belarus',
                                                            'Belgium' => 'Belgium',
                                                            'Belize' => 'Belize',
                                                            'Benin' => 'Benin',
                                                            'Bhutan' => 'Bhutan',
                                                            'Bolivia' => 'Bolivia',
                                                            'Bosnia and Herzegovina' => 'Bosnia and Herzegovina',
                                                            'Botswana' => 'Botswana',
                                                            'Brazil' => 'Brazil',
                                                            'Brunei' => 'Brunei',
                                                            'Bulgaria' => 'Bulgaria',
                                                            'Burkina Faso' => 'Burkina Faso',
                                                            'Burundi' => 'Burundi',
                                                            'Cabo Verde' => 'Cabo Verde',
                                                            'Cambodia' => 'Cambodia',
                                                            'Cameroon' => 'Cameroon',
                                                            'Canada' => 'Canada',
                                                            'Central African Republic' => 'Central African Republic',
                                                            'Chad' => 'Chad',
                                                            'Chile' => 'Chile',
                                                            'China' => 'China',
                                                            'Colombia' => 'Colombia',
                                                            'Comoros' => 'Comoros',
                                                            'Congo (Congo-Brazzaville)' => 'Congo (Congo-Brazzaville)',
                                                            'Costa Rica' => 'Costa Rica',
                                                            'Croatia' => 'Croatia',
                                                            'Cuba' => 'Cuba',
                                                            'Cyprus' => 'Cyprus',
                                                            'Czechia' => 'Czechia',
                                                            'Democratic Republic of the Congo' =>
                                                                'Democratic Republic of the Congo',
                                                            'Denmark' => 'Denmark',
                                                            'Djibouti' => 'Djibouti',
                                                            'Dominica' => 'Dominica',
                                                            'Dominican Republic' => 'Dominican Republic',
                                                            'Ecuador' => 'Ecuador',
                                                            'Egypt' => 'Egypt',
                                                            'El Salvador' => 'El Salvador',
                                                            'Equatorial Guinea' => 'Equatorial Guinea',
                                                            'Eritrea' => 'Eritrea',
                                                            'Estonia' => 'Estonia',
                                                            'Eswatini' => 'Eswatini',
                                                            'Ethiopia' => 'Ethiopia',
                                                            'Fiji' => 'Fiji',
                                                            'Finland' => 'Finland',
                                                            'France' => 'France',
                                                            'Gabon' => 'Gabon',
                                                            'Gambia' => 'Gambia',
                                                            'Georgia' => 'Georgia',
                                                            'Germany' => 'Germany',
                                                            'Ghana' => 'Ghana',
                                                            'Greece' => 'Greece',
                                                            'Grenada' => 'Grenada',
                                                            'Guatemala' => 'Guatemala',
                                                            'Guinea' => 'Guinea',
                                                            'Guinea-Bissau' => 'Guinea-Bissau',
                                                            'Guyana' => 'Guyana',
                                                            'Haiti' => 'Haiti',
                                                            'Honduras' => 'Honduras',
                                                            'Hungary' => 'Hungary',
                                                            'Iceland' => 'Iceland',
                                                            'India' => 'India',
                                                            'Indonesia' => 'Indonesia',
                                                            'Iran' => 'Iran',
                                                            'Iraq' => 'Iraq',
                                                            'Ireland' => 'Ireland',
                                                            'Israel' => 'Israel',
                                                            'Italy' => 'Italy',
                                                            'Jamaica' => 'Jamaica',
                                                            'Japan' => 'Japan',
                                                            'Jordan' => 'Jordan',
                                                            'Kazakhstan' => 'Kazakhstan',
                                                            'Kenya' => 'Kenya',
                                                            'Kiribati' => 'Kiribati',
                                                            'Kuwait' => 'Kuwait',
                                                            'Kyrgyzstan' => 'Kyrgyzstan',
                                                            'Laos' => 'Laos',
                                                            'Latvia' => 'Latvia',
                                                            'Lebanon' => 'Lebanon',
                                                            'Lesotho' => 'Lesotho',
                                                            'Liberia' => 'Liberia',
                                                            'Libya' => 'Libya',
                                                            'Liechtenstein' => 'Liechtenstein',
                                                            'Lithuania' => 'Lithuania',
                                                            'Luxembourg' => 'Luxembourg',
                                                            'Madagascar' => 'Madagascar',
                                                            'Malawi' => 'Malawi',
                                                            'Malaysia' => 'Malaysia',
                                                            'Maldives' => 'Maldives',
                                                            'Mali' => 'Mali',
                                                            'Malta' => 'Malta',
                                                            'Marshall Islands' => 'Marshall Islands',
                                                            'Mauritania' => 'Mauritania',
                                                            'Mauritius' => 'Mauritius',
                                                            'Mexico' => 'Mexico',
                                                            'Micronesia' => 'Micronesia',
                                                            'Moldova' => 'Moldova',
                                                            'Monaco' => 'Monaco',
                                                            'Mongolia' => 'Mongolia',
                                                            'Montenegro' => 'Montenegro',
                                                            'Morocco' => 'Morocco',
                                                            'Mozambique' => 'Mozambique',
                                                            'Myanmar' => 'Myanmar',
                                                            'Namibia' => 'Namibia',
                                                            'Nauru' => 'Nauru',
                                                            'Nepal' => 'Nepal',
                                                            'Netherlands' => 'Netherlands',
                                                            'New Zealand' => 'New Zealand',
                                                            'Nicaragua' => 'Nicaragua',
                                                            'Niger' => 'Niger',
                                                            'Nigeria' => 'Nigeria',
                                                            'North Korea' => 'North Korea',
                                                            'North Macedonia' => 'North Macedonia',
                                                            'Norway' => 'Norway',
                                                            'Oman' => 'Oman',
                                                            'Pakistan' => 'Pakistan',
                                                            'Palau' => 'Palau',
                                                            'Palestine' => 'Palestine',
                                                            'Panama' => 'Panama',
                                                            'Papua New Guinea' => 'Papua New Guinea',
                                                            'Paraguay' => 'Paraguay',
                                                            'Peru' => 'Peru',
                                                            'Philippines' => 'Philippines',
                                                            'Poland' => 'Poland',
                                                            'Portugal' => 'Portugal',
                                                            'Qatar' => 'Qatar',
                                                            'Romania' => 'Romania',
                                                            'Russia' => 'Russia',
                                                            'Rwanda' => 'Rwanda',
                                                            'Saint Kitts and Nevis' => 'Saint Kitts and Nevis',
                                                            'Saint Lucia' => 'Saint Lucia',
                                                            'Saint Vincent and the Grenadines' =>
                                                                'Saint Vincent and the Grenadines',
                                                            'Samoa' => 'Samoa',
                                                            'San Marino' => 'San Marino',
                                                            'Sao Tome and Principe' => 'Sao Tome and Principe',
                                                            'Saudi Arabia' => 'Saudi Arabia',
                                                            'Senegal' => 'Senegal',
                                                            'Serbia' => 'Serbia',
                                                            'Seychelles' => 'Seychelles',
                                                            'Sierra Leone' => 'Sierra Leone',
                                                            'Singapore' => 'Singapore',
                                                            'Slovakia' => 'Slovakia',
                                                            'Slovenia' => 'Slovenia',
                                                            'Solomon Islands' => 'Solomon Islands',
                                                            'Somalia' => 'Somalia',
                                                            'South Africa' => 'South Africa',
                                                            'South Korea' => 'South Korea',
                                                            'South Sudan' => 'South Sudan',
                                                            'Spain' => 'Spain',
                                                            'Sri Lanka' => 'Sri Lanka',
                                                            'Sudan' => 'Sudan',
                                                            'Suriname' => 'Suriname',
                                                            'Sweden' => 'Sweden',
                                                            'Switzerland' => 'Switzerland',
                                                            'Syria' => 'Syria',
                                                            'Taiwan' => 'Taiwan',
                                                            'Tajikistan' => 'Tajikistan',
                                                            'Tanzania' => 'Tanzania',
                                                            'Thailand' => 'Thailand',
                                                            'Timor-Leste' => 'Timor-Leste',
                                                            'Togo' => 'Togo',
                                                            'Tonga' => 'Tonga',
                                                            'Trinidad and Tobago' => 'Trinidad and Tobago',
                                                            'Tunisia' => 'Tunisia',
                                                            'Turkey' => 'Turkey',
                                                            'Turkmenistan' => 'Turkmenistan',
                                                            'Tuvalu' => 'Tuvalu',
                                                            'Uganda' => 'Uganda',
                                                            'Ukraine' => 'Ukraine',
                                                            'United Arab Emirates' => 'United Arab Emirates',
                                                            'United Kingdom' => 'United Kingdom',
                                                            'United States' => 'United States',
                                                            'Uruguay' => 'Uruguay',
                                                            'Uzbekistan' => 'Uzbekistan',
                                                            'Vanuatu' => 'Vanuatu',
                                                            'Vatican City' => 'Vatican City',
                                                            'Venezuela' => 'Venezuela',
                                                            'Vietnam' => 'Vietnam',
                                                            'Yemen' => 'Yemen',
                                                            'Zambia' => 'Zambia',
                                                            'Zimbabwe' => 'Zimbabwe',
                                                        ];
                                                    @endphp

                                        <option value="">Select Country</option>
                                        @foreach ($countries as $code => $name)
                                            <option value="{{ $code }}">{{ $name }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-7">
                            <div class="top-title">

                                <h4 class="mb-0">{{ $data->second_section_heading }}</h4>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6 col-5">
                            <div class="view_all text-lg-end text-md-end text-end">
                                <a href="" data-bs-toggle="modal" data-bs-target="#bookListModal" class="">
                                    {{ $data->second_section_button_text }} <i
                                        class="fa-solid fa-angle-right ms-4"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-xxl-10 col-lg-10 col-md-12 col-12">
                    <div id="list-book" class="owl-carousel owl-theme">
                        @foreach ($bookCovers as $cover)
                            <div class="item" data-country="{{ $cover->country }}">
                                <div class="card border-0">
                                    <a href="javascript:void(0);" data-bs-toggle="modal"
                                        data-bs-target="#bookModal{{ $cover->id }}">
                                        <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                            class="book-img img-fluid" alt="Book Cover" />
                                    </a>
                                    <div class="card-body py-1 px-0">
                                        <p class="card-text text-center pt-1">
                                            {{ \Illuminate\Support\Str::words($cover->short_description, 15, '...') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>


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


    <section id="section_3rd">
        <div class="container-fluid max_width pt-md-4 pt-3 pb-2">
            <div class="row d-flex justify-content-center align-items-center pt-2">
                <div class="col-xxl-11 col-lg-11 col-md-12 col-12">
                    <div class="row equal-height">
                        <!-- Left Image Column -->
                        <div class="col-lg-6 col-md-6 px-0">
                            <div class="image_3rdsec h-100">
                                <img src="{{ asset($data->third_section_image) }}" class="img-fluid" alt="" />
                            </div>
                        </div>

                        <!-- Right Content Column -->
                        <div class="col-lg-6 col-md-6 backg d-flex justify-content-center align-items-center">
                            <div class="col-lg-9 col-md-10 py-md-4 py-3">
                                <div class="content3rdsec pe-xxl-5 pe-xl-4">
                                    <h2>{{ $data->third_section_heading }}</h2>
                                    <p>
                                        {{ $data->third_section_description }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- End Right -->
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section id="slider-search">
        <div class="container-fluid">
            <!-- ModalToggle1bookdetails -->
            @foreach ($bookCovers as $cover)
                <div class="modal fade" id="bookModal{{ $cover->id }}" tabindex="-1"
                    aria-labelledby="bookModalLabel{{ $cover->id }}" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>

                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>{{ $cover->short_description }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <!-- <div class="col-lg-6">
                                                                                                            <button class="back-btn " data-bs-target="#exampleModalToggle"
                                                                                                            data-bs-toggle="modal">Back</button>
                                                                                                            </div> -->
                                    <div class="col-lg-12 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal2{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>




                <!-- ModalToggle2 -->
                <div class="modal fade" id="bookModal2{{ $cover->id }}" tabindex="-1"
                    aria-labelledby="bookModalLabel{{ $cover->id }}" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>Intrigued?</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal3{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- ModalToggle3 -->
                <div class="modal fade" id="bookModal3{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel3" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>Would you like to unpack the book?</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="modal-footer">
                                                                                                    <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back</button>
                                                                                                </div> -->
                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal2{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal4{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle4 -->
                <div class="modal fade" id="bookModal4{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel3" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <h6>{{ $cover->book_name ?? 'Book Name' }}</h6>
                                                    <span class="">Author:
                                                        {{ $cover->author_name ?? 'Author Name' }}</span>
                                                </div>
                                                <div class="row d-flex justify-content-center align-items-center mt-4">
                                                    <div class="col-6">
                                                        <div class="whis-list">
                                                            <a href="#"><i class="fa-regular fa-heart me-3"></i></a>
                                                            <span class="like-count"
                                                                id="like-count-book-{{ $cover->id }}">
                                                                {{ $cover->book_likes }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="col-6 text-center">
                                                            <button type="button" class="back-btn like-btn"
                                                                data-id="{{ $cover->id }}" data-type="book">
                                                                Like
                                                            </button>

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

                                <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 col-6">
                                            <button class="back-btn" data-bs-target="#bookModal3{{ $cover->id }}"
                                                data-bs-toggle="modal">
                                                Back
                                            </button>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-6 text-end">
                                            <button class="back-btn" data-bs-target="#bookModal5{{ $cover->id }}"
                                                data-bs-toggle="modal">
                                                Next
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <!-- ModalToggle5 -->
                <div class="modal fade" id="bookModal5{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel5" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>
                                                        Would you like to know the person who read this
                                                        book?
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal4{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal6{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle6 -->
                <div class="modal fade" id="bookModal6{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel6" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <h5>{{ $cover->nickname ?? ' Name' }}</h5>
                                                    <span>{{ $cover->country ?? 'Country' }}</span>
                                                </div>
                                                <div class="content_book mt-lg-5 mt-md-4 mt-3">
                                                    <h5>{{ $cover->book_name ?? 'Book Name' }}</h5>
                                                    <span>Author: {{ $cover->author_name ?? 'Author Name' }}</span>
                                                </div>
                                                <div class="row d-flex justify-content-center align-items-center mt-4">
                                                    <div class="col-6">
                                                        <div class="whis-list">
                                                            <a href="#"><i class="fa-regular fa-heart me-3"></i></a>
                                                            <span class="like-count"
                                                                id="like-count-profile-{{ $cover->id }}">
                                                                {{ $cover->prfile_likes }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <button type="button" class="back-btn like-btn"
                                                            data-id="{{ $cover->id }}" data-type="profile">
                                                            Like
                                                        </button>

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

                            <div class="modal-footer pt-md-3 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal5{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal7{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle7 -->
                <div class="modal fade" id="bookModal7{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel7" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>Would you like to talk to nickname?</p>
                                                    <!-- <span>Author: Claudia Alves</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal6{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal8{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle8 -->
                <div class="modal fade" id="bookModal8{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel8" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-10 col-lg-10 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div
                                            class="row d-flex justify-content-center align-items-center gx-5 pt-md-3 gy-4">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img_subcription text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <!-- <div class="content_book pt-3 pt-lg-0">
                                                                                                                                        <img src="assets/images/Frame 427319595.png" alt="">
                                                                                                                                    </div> -->

                                                <div class="membership mb-4">
                                                    <div class="row d-flex justify-content-center align-items-start">
                                                        <div class="col-lg-12">
                                                            <div class="member-card">
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <div class="member-tile">
                                                                            <h4>Free</h4>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6 text-end">
                                                                        <div class="view_all">
                                                                            <a href=""> Start Trial</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="member-detail">
                                                                        <div class="member-time mb-3">
                                                                            <span> Free Trail For 1 Months</span>
                                                                        </div>
                                                                        <p class="mb-0">
                                                                            Enjoy 2 free profile views and discover
                                                                            surprise book pairings—no fees, no
                                                                            commitment. Start your reading adventure
                                                                            today!
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="membership">
                                                    <div class="row d-flex justify-content-center align-items-start">
                                                        <div class="col-lg-`12">
                                                            <div class="member-card">
                                                                <div class="row">
                                                                    <div class="col-6">
                                                                        <div class="member-tile">
                                                                            <h4>Subscription Plan</h4>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-6 text-end">
                                                                        <div class="view_all">
                                                                            <a href=""> Get Started</a>
                                                                        </div>
                                                                    </div>
                                                                    <div class="member-detail">
                                                                        <div class="member-time mb-3">
                                                                            <span> 12 Month Subscription Plan</span>
                                                                        </div>
                                                                        <p class="mb-0">
                                                                            Get a full year of surprise book pairings,
                                                                            unlimited profile views, and exclusive
                                                                            perks—all at the best value. Dive into a
                                                                            year of discovery!
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-md-5 pt-3 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal7{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal9{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle9 -->
                <div class="modal fade" id="bookModal9{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel9" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>Payment done!</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal8{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal10{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle10 -->
                <div class="modal fade" id="bookModal10{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel10" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <p>Talk to Nickname</p>
                                                    <!-- <span>Author: Claudia Alves</span> -->
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer mb-1 mb-md-3 border-0 d-block pt-0">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal9{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal11{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle11 -->
                <div class="modal fade" id="bookModal11{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel11" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <!-- Chat Box -->
                                                    <div class="chat-box mb-3 p-3 border rounded bg-light"
                                                        id="chat-box-{{ $cover->user_id }}"
                                                        style="height: 250px; overflow-y: auto;">
                                                        <!-- Messages will appear here -->
                                                    </div>

                                                    <!-- Input Group -->
                                                    @php
                                                        $isSelf = auth()->check() && auth()->id() == $cover->user_id;
                                                    @endphp

                                                    <!-- Input Group -->
                                                    <div class="input-group">
                                                        <input type="text" class="form-control chat-input"
                                                            data-receiver="{{ $cover->user_id }}"
                                                            placeholder="{{ $isSelf ? 'You cannot message yourself.' : 'Type your message...' }}"
                                                            {{ !auth()->check() || $isSelf ? 'disabled' : '' }}>

                                                        <button class="btn back-btn p-2 send-bttn"
                                                            data-receiver="{{ $cover->user_id }}"
                                                            data-authenticated="{{ auth()->check() ? '1' : '0' }}"
                                                            {{ $isSelf ? 'disabled' : '' }}>
                                                            Send
                                                        </button>
                                                    </div>


                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                </div>
                            </div>
                            <style>

                            </style>
                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal10{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    {{-- <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#bookModal12{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div> --}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- ModalToggle12 -->
                {{-- <div class="modal fade" id="bookModal12{{ $cover->id }}" aria-hidden="true"
                    aria-labelledby="exampleModalToggleLabel12" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="row d-flex justify-content-center align-items-center">
                                    <div class="col-xxl-7 col-lg-7 col-md-11 col-12">
                                        <div class="top-title">
                                            <p class="text-muted">Modal for book ID: {{ $cover->id }}</p>
                                            <h2 class="mb-4 mt-2">Blind Date with a Book</h2>
                                        </div>
                                        <div class="row d-flex justify-content-center align-items-center gx-5 pt-md-3">
                                            <div class="col-lg-5 col-md-5 col-12">
                                                <div class="detail_book_img text-lg-end">
                                                    <img src="{{ asset('website/uploads/profile_images/' . $cover->profile_photo) }}"
                                                        alt="Book" class="img-fluid w-100" />
                                                </div>
                                            </div>
                                            <div class="col-lg-7 col-md-7 col-12">
                                                <div class="content_book pt-3 pt-lg-0">
                                                    <h5>{{ $cover->real_name ?? ' Name' }}</h5>
                                                    <span>{{ $cover->country ?? 'Country' }}</span>
                                                </div>
                                                <div class="content_book mt-lg-5 mt-md-4 mt-3">
                                                    <h5>{{ $cover->book_name ?? 'Book Name' }}</h5>
                                                    <span>Author: {{ $cover->author_name ?? 'Author Name' }}</span>
                                                </div>
                                                <div class="row d-flex justify-content-center align-items-center mt-4">
                                                    <div class="col-6">
                                                        <div class="whis-list">
                                                            <a href="#"><i class="fa-regular fa-heart me-3"></i></a>
                                                            <span class="like-count"
                                                                id="like-count-profile-{{ $cover->id }}">
                                                                {{ $cover->profile_likes }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <div class="col-6">
                                                        <button type="button" class="back-btn like-btn"
                                                            data-id="{{ $cover->id }}" data-type="profile">
                                                            Like
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer pt-0 border-0 d-block mb-1 mb-md-3">
                                <div class="row">
                                    <div class="col-lg-6 col-md-6 col-6">
                                        <button class="back-btn" data-bs-target="#bookModal11{{ $cover->id }}"
                                            data-bs-toggle="modal">
                                            Back
                                        </button>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-6 text-end">
                                        <button class="back-btn" data-bs-target="#exampleModalToggle13"
                                            data-bs-toggle="modal">
                                            Next
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div> --}}
            @endforeach
            <div class="modal fade" id="bookListModal" tabindex="-1" aria-labelledby="bookListModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <!-- <div class="modal-header">
                                                                                                                              <h5 class="modal-title mb-4" id="exampleModalLabel">Register For Exclusive Offers</h5>
                                                                                                                              <button type="button" class="btn-close mb-4" data-bs-dismiss="modal" aria-label="Close"></button>
                                                                                                                            </div> -->
                        <div class="modal-body pb-0">
                            <div class="row d-flex justify-content-center align-items-center mt-3 mb-4">
                                <div class="col-xxl-11 col-lg-11 col-md-11 col-12">
                                    <div class="top-title mb-2">
                                        <h2 class="mb-4">Blind Date with a Book</h2>
                                    </div>
                                    <div class="row d-flex justify-content-center align-items-center my-4">
                                        <div class="col-lg-5 col-md-4 col-12">
                                            <div class="top-title text-start text-lg-end text-md-end">
                                                <h6 class="mb-md-0 mb-2">Search by Location</h6>
                                            </div>
                                        </div>
                                        <div class="col-lg-7 col-md-7 col-12">
                                            <div class="search_country text-lg-end text-md-end text-end">
                                                <select id="CountryModal" class="form-select">
                                                    <option value="">Select Country</option>
                                                    @foreach ($countries as $country)
                                                        <option value="{{ $country }}">{{ $country }}
                                                        </option>
                                                    @endforeach
                                                </select>

                                            </div>
                                        </div>
                                    </div>
                                    <div id="book-search" class="owl-carousel owl-theme py-2">
                                        @foreach ($bookCovers as $cover)
                                            <div class="item " data-country="{{ $cover->country }}">
                                                <div class="card border-0">
                                                    <a href=""data-bs-target="#bookModal{{ $cover->id }}"
                                                        data-bs-toggle="modal">
                                                        <img src="{{ asset('website/uploads/book_covers/' . $cover->book_cover) }}"
                                                            class="book-img img-fluid" alt="Book Cover" />
                                                    </a>

                                                    <div class="card-body py-1 px-0">
                                                        <p class="card-text text-center pt-1">
                                                            {{ \Illuminate\Support\Str::words($cover->short_description, 15, '...') }}
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection