<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
        Books Pair
        <?php if(isset($pageTitle)): ?>
            - <?php echo e($pageTitle); ?>

        <?php endif; ?>
    </title>
    <!-- CSRF Token -->
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
        integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"
        integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css"
        integrity="sha512-OTcub78R3msOCtY3Tc6FzeDJ8N9qvQn1Ph49ou13xgA9VsH9+LRxoFU6EqLhW4+PKRfU+/HReXmSZXHEkpYoOA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="icon" href="<?php echo e(asset('website/images/Group 427319199.svg')); ?>" type="image/svg+xml">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">

    <link rel="stylesheet" href="<?php echo e(asset('website/css/style.css')); ?>" />

</head>

<!-- Registration Modal -->
<div class="modal fade" id="registerModal" tabindex="-1" aria-labelledby="registerLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="login_background py-3">
                    <!-- Toast container -->
                    <div id="toast-container" style="position: absolute; top: 20px; right: 20px; z-index: 9999"></div>

                    <div class="top-title">
                        <h2 class="mb-4">Create Account</h2>
                    </div>

                    <form id="registerForm" method="POST" action="<?php echo e(route('register.store')); ?>" novalidate>
                        <?php echo csrf_field(); ?>
                        <div class="row d-flex justify-content-center align-items-center">
                            <!-- Email Field -->
                            <div class="mb-lg-4 mb-3 col-xl-11 col-lg-11 col-md-12 col-12">
                                <label for="email" class="label-text mb-1">Email</label>
                                <input type="text" name="email" id="email"
                                    class="form-control <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                    placeholder="Enter your email" value="<?php echo e(old('email')); ?>">
                                <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <small class="text-danger"><?php echo e($message); ?></small>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            <!-- Password Field -->
                            <div class="mb-lg-4 mb-1 col-xl-11 col-lg-11 col-md-12 col-12">
                                <div class="password-container position-relative">
                                    <label for="password" class="label-text mb-1">Password</label>
                                    <img src="<?php echo e(asset('website/images/lock.svg')); ?>" alt="" />
                                    <div class="divider">|</div>
                                    <input type="password" name="password" id="password"
                                        class="form-control ps-5 <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                        placeholder="Password">
                                    <i class="fa-regular fa-eye-slash toggle-password" data-target="password"></i>
                                    <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <small class="text-danger"><?php echo e($message); ?></small>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                            </div>

                            <!-- Confirm Password Field -->
                            <div class="mb-lg-2 mb-1 col-xl-11 col-lg-11 col-md-12 col-12">
                                <div class="password-container position-relative">
                                    <label for="confirmpassword" class="label-text mb-1">Confirm Password</label>
                                    <img src="<?php echo e(asset('website/images/lock.svg')); ?>" alt="" />
                                    <div class="divider">|</div>
                                    <input type="password" name="confirmpassword" id="confirmpassword"
                                        class="form-control ps-5 <?php $__errorArgs = ['confirmpassword'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                        placeholder="Confirm Password">
                                    <i class="fa-regular fa-eye-slash toggle-password"
                                        data-target="confirmpassword"></i>
                                    <?php $__errorArgs = ['confirmpassword'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <small class="text-danger"><?php echo e($message); ?></small>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                            </div>

                            <!-- Terms Checkbox -->
                            <div class="col-xl-11 col-lg-11 col-md-12 col-12 mx-auto pb-lg-1">
                                <div class="form-check d-flex gap-2 justify-content-start align-items-center">
                                    <input class="form-check-input <?php $__errorArgs = ['terms'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>" type="checkbox"
                                        name="terms" id="termsCheckbox" <?php echo e(old('terms') ? 'checked' : ''); ?>>
                                    <label class="form-check-label" for="termsCheckbox">
                                        I agree to the <a href="<?php echo e(route('website.termandcondition')); ?>">Terms &
                                            Conditions</a>
                                    </label>
                                    <?php $__errorArgs = ['terms'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <small class="text-danger d-block"><?php echo e($message); ?></small>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                            </div>

                            <!-- Submit Button -->
                            <div class="col-xl-11 col-lg-11 col-md-12 col-12 mx-auto my-4">
                                <div class="login_btn">
                                    <button type="submit" class="btn btn-primary w-100">Agree & Create
                                        Account</button>
                                </div>
                            </div>

                            <!-- Login Link -->
                            <div class="mb-lg-2 col-xl-10 col-lg-11 col-md-12 col-12 mx-auto">
                                <div class="login_up text-center">
                                    <span>Have an Account ? Login
                                        <a class="text-decoration-none" href="#" data-bs-toggle="modal"
                                            data-bs-target="#signUpModal">
                                            here!
                                        </a></span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- LogIN Modal -->
<div class="modal fade" id="signUpModal" tabindex="-1" aria-labelledby="signUpLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <div class="login_background py-3">
                    <div class="top-title">
                        <h2 class="mb-4">Login to Books Pair</h2>
                    </div>

                    <!-- Toast container (add this at the top of your modal) -->
                    <div id="toast-container" style="position: absolute; top: 20px; right: 20px; z-index: 9999"></div>

                    <form id="loginForm" method="POST">
                        <?php echo csrf_field(); ?>
                        <div class="row d-flex justify-content-center align-items-center">
                            <!-- Email -->
                            <div class="mb-lg-4 mb-3 col-xl-11">
                                <label for="email" class="label-text mb-1">Email</label>
                                <input type="text" name="email" id="emails" class="form-control"
                                    placeholder="Enter your email" value="<?php echo e(old('email')); ?>">
                                <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                    <small class="text-danger"><?php echo e($message); ?></small>
                                <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                            </div>

                            <!-- Password -->
                            <div class="mb-lg-2 mb-1 col-xl-11">
                                <div class="password-container position-relative">
                                    <label for="password" class="label-text mb-1">Password</label>
                                    <img src="<?php echo e(asset('website/images/lock.svg')); ?>" alt="">
                                    <div class="divider">|</div>
                                    <input type="password" name="password" id="passwordd" class="form-control ps-5"
                                        placeholder="Password">
                                    <i class="fa-regular fa-eye-slash toggle-password" data-target="passwordd"></i>
                                    <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                        <small class="text-danger"><?php echo e($message); ?></small>
                                    <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                                </div>
                            </div>

                            <!-- Forgot password -->
                            <div class="col-xl-11 mx-auto pb-lg-1">
                                <div class="forget_btn text-start">
                                    <a style="cursor: pointer;" data-bs-toggle="modal"
                                        data-bs-target="#forgotPasswordModal" class="forget">Forgot Password ?</a>
                                </div>
                            </div>

                            <!-- Login Button -->
                            <div class="col-xl-11 mx-auto my-4">
                                <div class="login_btn">
                                    <button type="submit" class="btn btn-primary w-100">Login</button>
                                </div>
                            </div>

                            <!-- Register Link -->
                            <div class="mb-lg-2 col-xl-10 mx-auto">
                                <div class="login_up text-center">
                                    <span>Don't have any account? Create Account
                                        <a class="text-decoration-none" href="#" data-bs-toggle="modal"
                                            data-bs-target="#registerModal">here!</a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Forget Email-->
<!-- Forgot Password Modal -->
<div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                <h5 class="mb-3">Forgot Your Password?</h5>

                <form method="POST" id="forgotPasswordForm" action="<?php echo e(route('password.email')); ?>">
                    <?php echo csrf_field(); ?>
                    <div class="mb-3">
                        <label for="forgot_email">Email</label>
                        <input type="email" class="form-control" name="email" id="forgot_email" required>
                    </div>
                    <button type="submit" class="btn btn-primary w-100">Send Reset Link</button>
                </form>
                <div id="forgot-message" class="mt-2 text-success" style="display:none;"></div>
            </div>
        </div>
    </div>
</div>

<!-- Reset Password Modal -->




<body>
    <?php echo $__env->make('website.layouts.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    <?php echo $__env->yieldContent('content'); ?>

    <?php echo $__env->make('website.layouts.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"
        integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/toastify-js"></script>

    <script>
        $(document).ready(function() {
            if (window.location.hash === "#chats") {
                $('#v-pills-6-tab').click(); // activate tab

                // Remove the hash from the URL without reloading
                history.replaceState(null, null, window.location.pathname);
            }
        });
    </script>

    <script>
        $(document).on('submit', '#profilform', function(e) {
            e.preventDefault();
            let form = $(this);
            let formData = new FormData(this);

            // Get the existing file paths from hidden inputs or data attributes
            let existingProfilePhoto = $('#profile_preview').data('existing-photo') || '';
            let existingBookCover = $('#book_cover_preview').data('existing-cover') || '';

            // Append these to the form data
            formData.append('existing_profile_photo', existingProfilePhoto);
            formData.append('existing_book_cover', existingBookCover);

            // Explicitly append files only if they're selected
            let profilePhoto = $('#profile_photo')[0].files[0];
            let bookCover = $('#book_cover_input')[0].files[0];

            if (profilePhoto) formData.append('profile_photo', profilePhoto);
            if (bookCover) formData.append('book_cover', bookCover);

            let submitBtn = form.find('button[type="submit"]');
            submitBtn.prop('disabled', true).text('Processing...');

            // Clear previous errors
            $('.is-invalid').removeClass('is-invalid');
            $('.invalid-feedback').remove();
            if (!$('#ageCheckbox').is(':checked')) {
                showToast('You must confirm you are 18 years old.', 'error');
                submitBtn.prop('disabled', false).text('Submit');
                return;
            }
            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    submitBtn.prop('disabled', false).text('Submit');

                    if (response.success) {
                        // Store the success message in sessionStorage
                        sessionStorage.setItem('successMessage', response.message);

                        // Reload the page after showing the toast
                        showToast(response.message, 'success');
                        setTimeout(() => {
                            window.location.reload();
                        }, 2000);
                    } else {
                        showToast(response.message || 'Operation failed', 'warning');
                    }
                },
                error: function(xhr) {
                    submitBtn.prop('disabled', false).text('Submit');

                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        Object.keys(errors).forEach(field => {
                            // Skip showing errors for file fields if they exist
                            if ((field === 'profile_photo' && existingProfilePhoto) ||
                                (field === 'book_cover' && existingBookCover)) {
                                return;
                            }

                            let input = $(`[name="${field}"]`);
                            input.addClass('is-invalid');
                            let feedback = input.next('.invalid-feedback');
                            if (feedback.length === 0) {
                                input.after(
                                    `<div class="invalid-feedback">${errors[field][0]}</div>`
                                );
                            } else {
                                feedback.text(errors[field][0]);
                            }
                            showToast(errors[field][0], 'error');
                        });
                    } else if (xhr.status === 401) {
                        showToast('You must be logged in.', 'error');
                    } else if (xhr.status === 500) {
                        // Show the actual server error message
                        let errorMsg = xhr.responseJSON && xhr.responseJSON.message ?
                            xhr.responseJSON.message :
                            'An error occurred. Please try again.';
                        showToast(errorMsg, 'error');
                    } else {
                        showToast('An error occurred. Please try again.', 'error');
                    }
                }
            });
        });


        function showToast(message, type = 'success') {
            Toastify({
                text: message,
                duration: 5000, // Longer duration for error messages
                gravity: "top",
                position: "right",
                backgroundColor: type === 'error' ? "#dc3545" : "#28a745",
                stopOnFocus: true
            }).showToast();
        }
    </script>


    

    <script></script>

    <script>
        $(document).ready(function() {
            // Handle all start trial forms by ID prefix
            $(document).on('submit', 'form[id^="start-trial-formd-"]', function(e) {
                e.preventDefault();

                const form = $(this);
                const button = form.find('button[type="submit"]');
                const coverId = form.attr('id').split('start-trial-formd-')[1]; // Extract ID
                const currentModalId = '#bookModal8' + coverId;
                const nextModalId = '#bookModal9' + coverId;
                const expiryTextContainer = $(nextModalId + ' .content_book');

                let trialStarted = false; // global variable

                $.ajax({
                    url: "<?php echo e(route('start.trial')); ?>",
                    type: "POST",
                    data: form.serialize(),
                    beforeSend: function() {
                        button.prop('disabled', true).text('Please wait...');
                    },
                    success: function(response) {
                        showToast(response.message, 'success');
                        trialStarted = true;
                        // alert(response.start);
                        const startFormatted = response.start;
                        const expiryFormatted = response.expiry;
                        expiryTextContainer.html(`
                        <p>Your trial started on: <strong>${startFormatted}</strong></p>
                        <p>Your trial expires on: <strong>${expiryFormatted}</strong></p>
                    `);

                        const currentModal = bootstrap.Modal.getInstance(document.querySelector(
                            currentModalId));
                        currentModal.hide();

                        const nextModalEl = document.querySelector(nextModalId);
                        const nextModal = new bootstrap.Modal(nextModalEl);
                        nextModal.show();

                        // Track if user closes modal without clicking Next/Back
                        nextModalEl.addEventListener('hidden.bs.modal', function() {
                            if (!userNavigatedModal) {
                                console.log('User closed modal without navigating.');
                                window.location.href = '/profile#chats';
                            }
                            userNavigatedModal = false;
                        });

                        // ✅ Enable chat inputs
                        $('.chat-input').each(function() {
                            const isSelf = $(this).attr('data-receiver') ==
                                "<?php echo e(auth()->id()); ?>";
                            if (!isSelf) {
                                $(this).prop('disabled', false).attr('placeholder',
                                    'Type your message...');
                            }
                        });

                        $('.send-bttn').each(function() {
                            const isSelf = $(this).attr('data-receiver') ==
                                "<?php echo e(auth()->id()); ?>";
                            if (!isSelf) {
                                $(this).prop('disabled', false);
                            }
                        });
                    },

                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.message || 'An error occurred.';
                        showToast(errorMsg, 'error');
                        button.prop('disabled', false).text('Start Trial');
                    }
                });


            });

            // Toast function
            function showToast(message, type = 'success') {
                Toastify({
                    text: message,
                    duration: 3000,
                    close: true,
                    gravity: "top",
                    position: "right",
                    backgroundColor: type === 'error' ? "#dc3545" : "#28a745",
                    stopOnFocus: true
                }).showToast();
            }

            // Format Y-m-d to "Month Day, Year"
            function formatDate(dateStr) {
                const options = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                };
                return new Date(dateStr).toLocaleDateString('en-US', options);
            }
        });
    </script>




    <script>
        function showToast(message, type = 'success') {
            Toastify({
                text: message,
                duration: 3000,
                close: true,
                gravity: "top",
                position: "right",
                backgroundColor: type === 'success' ? "#28a745" : "#dc3545",
                stopOnFocus: true
            }).showToast();
        }
    </script>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            <?php if(session('success')): ?>
                showToast("<?php echo e(session('success')); ?>", 'success');
            <?php endif; ?>

            <?php if(session('error')): ?>
                showToast("<?php echo e(session('error')); ?>", 'error');
            <?php endif; ?>
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const fields = [{
                    textareaId: 'short_description',
                    counterId: 'shortDescriptionCount'
                },
                {
                    textareaId: 'favorite_quotes',
                    counterId: 'favoriteQuotesCount'
                }
            ];

            fields.forEach(({
                textareaId,
                counterId
            }) => {
                const textarea = document.getElementById(textareaId);
                const counter = document.getElementById(counterId);

                function updateCount() {
                    counter.textContent = `${textarea.value.length} / 100`;
                }

                if (textarea && counter) {
                    textarea.addEventListener('input', updateCount);
                    updateCount(); // initial count
                }
            });
        });
    </script>


    <script>
        $(document).ready(function() {
            let currentChatUserId = null;
            let lastMessageTime = null;

            // Search conversations
            $('.search-box input').on('keyup', function() {
                const searchTerm = $(this).val().toLowerCase();
                $('.conversation-item').each(function() {
                    const text = $(this).text().toLowerCase();
                    $(this).toggle(text.includes(searchTerm));
                });
            });

            // Open conversation
            $('.conversation-item').click(function() {
                currentChatUserId = $(this).data('user-id');
                const userName = $(this).find('h6').text();

                // Update UI
                $('#chat-user-name').text('Chat with ' + userName);
                $('#chat-container').show();
                $('.conversation-item').removeClass('active');
                $(this).addClass('active');

                // Load messages
                loadMessages(currentChatUserId);
            });

            // Close chat
            $('#close-chat').click(function() {
                $('#chat-container').hide();
                $('.conversation-item').removeClass('active');
                currentChatUserId = null;
            });

            // Send message
            $('.send-btn').click(function() {
                if (!currentChatUserId) return;

                const message = $('.chat-input').val().trim();
                if (!message) return;

                $.post("/chat/send", {
                        _token: "<?php echo e(csrf_token()); ?>",
                        receiver_id: currentChatUserId,
                        message: message
                    })
                    .done(function() {
                        $('.chat-input').val('');
                        loadMessages(currentChatUserId);
                    })
                    .fail(function() {
                        showToast('Failed to send message');
                    });
            });

            // Load messages for a specific user
            function loadMessages(userId) {
                $.get(`/chat/messages/${userId}`)
                    .done(function(data) {
                        const chatBox = $('#chat-box');
                        chatBox.empty();

                        // Track the newest message time
                        let newestTime = null;

                        data.forEach(msg => {
                            const isMine = msg.sender_id == <?php echo e(auth()->id()); ?>;
                            const senderName = isMine ? 'You' : (msg.sender.profile?.nickname || msg
                                .sender.name || 'User');

                            const alignClass = isMine ? 'text-end text-success' :
                                'text-start text-primary';
                            const messageTime = new Date(msg.created_at);

                            // Highlight new messages (received in last 5 minutes)
                            const isNew = !isMine && messageTime > new Date(Date.now() - 5 * 60 * 1000);
                            const highlightClass = isNew ? 'bg-light-yellow' : '';

                            chatBox.append(
                                `<div class="${alignClass} mb-2 ${highlightClass} p-2 rounded">
                        <strong>${senderName}:</strong> ${msg.message}
                        <br>
                        <small class="text-muted">${messageTime.toLocaleTimeString()}</small>
                    </div>`
                            );

                            // Track the newest message
                            if (!newestTime || messageTime > newestTime) {
                                newestTime = messageTime;
                            }
                        });

                        // Store the newest message time
                        lastMessageTime = newestTime;

                        chatBox.scrollTop(chatBox.prop("scrollHeight"));
                    })
                    .fail(function() {
                        showToast('Failed to load messages');
                    });
            }

            // Auto-refresh conversations every 10 seconds
            setInterval(function() {
                if (currentChatUserId) {
                    loadMessages(currentChatUserId);
                }

                // Refresh conversation list periodically
                refreshConversationList();
            }, 10000);

            // Refresh conversation list
            function refreshConversationList() {
                $.get("/chat/conversations")
                    .done(function(data) {
                        // You would need to implement this endpoint
                        // to return updated conversation list HTML
                    })
                    .fail(function() {
                        console.log('Failed to refresh conversations');
                    });
            }

            // Enter key to send message
            $('.chat-input').keypress(function(e) {
                if (e.which == 13) {
                    $('.send-btn').click();
                }
            });
        });
    </script>


    <script>
        // Toast function
        function showToast(message, type = 'success') {
            Toastify({
                text: message,
                duration: 3000,
                close: true,
                gravity: "top",
                position: "right",
                backgroundColor: type === 'success' ? "#28a745" : "#dc3545",
                stopOnFocus: true
            }).showToast();
        }

        // Handle form submission with AJAX
        // document.getElementById('loginForm').addEventListener('submit', function(e) {
        //     e.preventDefault();

        //     const form = e.target;
        //     const formData = new FormData(form);

        //     fetch(form.action, {
        //             method: 'POST',
        //             body: formData,
        //             headers: {
        //                 'Accept': 'application/json',
        //                 'X-Requested-With': 'XMLHttpRequest'
        //             }
        //         })
        //         .then(response => {
        //             if (!response.ok) {
        //                 return response.json().then(err => Promise.reject(err));
        //             }
        //             return response.json();
        //         })
        //         .then(data => {
        //             if(data.notVerified == 'false'){
        //                 alert("Not Verified");
        //             }
        //             // if (data.success) {
        //             //     showToast(data.message, 'success');
        //             //     // Redirect after a short delay
        //             //     setTimeout(() => {
        //             //         window.location.href = data.redirect || '/profile';
        //             //     }, 1500);
        //             // }
        //         })
        //         .catch(error => {
        //             if (error.message) {
        //                 showToast(error.message, 'error');
        //             } else {
        //                 showToast('An error occurred. Please try again.', 'error');
        //             }
        //         });
        // });
        $(document).on("submit", "#loginForm", function(event) {
            event.preventDefault();
            var data = new FormData(this);
            $("button[type=submit]").prop('disabled', true);
            $.ajax({
                url: '<?php echo e(route('login.submit')); ?>',
                type: 'post',
                data: data,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response) {
                    if (response.success == true) {
                        $(".error").removeClass('invalid-feedback').html('');
                        $("input, select").removeClass('is-invalid');
                        showToast(response.message, "success");
                        $('#loginForm')[0].reset();
                        $(".dropify-clear").click();
                        $("button[type=submit]").prop('disabled', false);
                        setTimeout(() => {
                            window.location.href = response.redirect || '/profile';
                        }, 1000);
                    }
                    if (response.success == false) {
                        // alert("False");
                        showToast(response.message, 'error'); // ✅ show error toast
                        $("button[type=submit]").prop('disabled', false);
                        if (response.notVerified == false) {
                            // Open email verification page in a new tab with email as query param
                            let email = encodeURIComponent(response.useremail); // safely encode email
                            let url = `https://blinddate.gcc-demo.com/email/verify?email=${email}`;
                            window.open(url, '_blank');
                        }
                        // toastr.error(response.message, "Required");
                        // let errors = response['errors'];
                        // $("button[type=submit]").prop('disabled', false);
                        // $(".error").removeClass('invalid-feedback').html('');
                        // $("input, select").removeClass('is-invalid');
                        // $.each(errors, function(key, value) {
                        //     $(`#${key}`).addClass('is-invalid')
                        //         .siblings('p')
                        //         .addClass('invalid-feedback')
                        //         .html(value);
                        // });
                    }
                },
                error: function(jqXHR, exception) {
                    let message = "Please Try Again...";

                    if (jqXHR.responseJSON && jqXHR.responseJSON.message) {
                        message = jqXHR.responseJSON.message;
                    }

                    showToast(message, "error");
                    $("button[type=submit]").prop('disabled', false);
                }
            });
        });
        // Display server-side flash messages (for non-AJAX submissions)
        // <?php if(session('toast')): ?>
        //     document.addEventListener('DOMContentLoaded', function() {
        //         showToast("<?php echo e(session('toast.message')); ?>", "<?php echo e(session('toast.type')); ?>");
        //     });
        // <?php endif; ?>

        //Registration

        // Toast notification function
        function showToast(message, type = 'success') {
            Toastify({
                text: message,
                duration: 5000,
                close: true,
                gravity: "top",
                position: "right",
                backgroundColor: type === 'success' ? "#28a745" : "#dc3545",
                stopOnFocus: true
            }).showToast();
        }

        // Handle form submission with AJAX
        document.getElementById('registerForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const form = e.target;
            const formData = new FormData(form);

            fetch(form.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(err => Promise.reject(err));
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        // Close modal after 2 seconds
                        setTimeout(() => {
                            var modal = bootstrap.Modal.getInstance(document.getElementById(
                                'registerModal'));
                            modal.hide();
                            // Optionally redirect or show login modal
                            // document.getElementById('signUpModal').modal('show');
                        }, 2000);
                    }
                })
                .catch(error => {
                    if (error.errors) {
                        // Handle validation errors
                        Object.values(error.errors).forEach(messages => {
                            messages.forEach(message => {
                                showToast(message, 'error');
                            });
                        });
                    } else if (error.message) {
                        showToast(error.message, 'error');
                    } else {
                        showToast('An error occurred. Please try again.', 'error');
                    }
                });
        });

        // Display server-side flash messages (for non-AJAX submissions)
        <?php if(session('toast')): ?>
            document.addEventListener('DOMContentLoaded', function() {
                showToast("<?php echo e(session('toast.message')); ?>", "<?php echo e(session('toast.type')); ?>");
            });
        <?php endif; ?>
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const contactForm = document.getElementById('contactForm');
            const submitBtn = document.getElementById('submitBtn');

            if (contactForm) {
                contactForm.addEventListener('submit', function(e) {
                    e.preventDefault();

                    const formData = new FormData(contactForm);

                    submitBtn.disabled = true;
                    submitBtn.innerHTML = 'Submitting...';

                    fetch(contactForm.action, {
                            method: 'POST',
                            body: formData,
                            headers: {
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                return response.json().then(err => Promise.reject(err));
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                showToast(data.message, 'success');
                                contactForm.reset();
                            }
                        })
                        .catch(error => {
                            if (error.errors) {
                                Object.values(error.errors).forEach(messages => {
                                    messages.forEach(message => {
                                        showToast(message, 'error');
                                    });
                                });
                            } else {
                                showToast('An error occurred. Please try again.', 'error');
                            }
                        })
                        .finally(() => {
                            submitBtn.disabled = false;
                            submitBtn.innerHTML = 'Submit';
                        });
                });
            }

            // Flash message toast
            <?php if(session('toast')): ?>
                showToast("<?php echo e(session('toast.message')); ?>", "<?php echo e(session('toast.type')); ?>");
            <?php endif; ?>
        });
    </script>


    <script>
        // Toast notification function
        function showToast(message, type = 'error') {
            Toastify({
                text: message,
                duration: 3000,
                close: true,
                gravity: "top",
                position: "right",
                backgroundColor: type === 'error' ? "#dc3545" : "#28a745",
                stopOnFocus: true
            }).showToast();
        }

        // Authentication check
        function isAuthenticated() {
            return <?php echo auth()->check() ? 'true' : 'false'; ?>;
        }

        // Load messages function
        // Load messages function
        function loadMessages(receiverId) {
            if (!isAuthenticated()) return;

            $.get(`/chat/messages/${receiverId}`)

                .done(function(data) {
                    const chatBox = $(`#chat-box-${receiverId}`);
                    chatBox.empty();

                    data.forEach(msg => {
                        const isMine = msg.sender_id == <?php echo e(auth()->id()); ?>;
                        const senderName = isMine ? 'You' : (msg.sender?.profile?.nickname || 'Unknown');

                        const alignClass = isMine ? 'text-end text-success' : 'text-start text-primary';

                        chatBox.append(
                            `<div class="${alignClass}"><strong>${senderName}:</strong> ${msg.message}</div>`
                        );
                    });

                    chatBox.scrollTop(chatBox.prop("scrollHeight"));
                })
                .fail(function() {
                    showToast('Failed to load messages. Please try again.');
                });
        }

        // Send message handler
        $(document).on('click', '.send-bttn', function() {
            const btn = $(this);
            const receiverId = btn.data('receiver');

            if (!isAuthenticated()) {
                showToast('Please login to send messages');
                return;
            }

            const input = $(`.chat-input[data-receiver="${receiverId}"]`);
            const message = input.val().trim();

            if (!message) {
                showToast('Message cannot be empty');
                return;
            }

            $.post("/chat/send", {
                    _token: "<?php echo e(csrf_token()); ?>",
                    receiver_id: receiverId,
                    message: message
                })
                .done(function(response) {
                    if (response.success) {
                        $('.chat-input').val('');
                        loadMessages(receiverId);
                    } else {
                        showToast('Failed to send message');
                    }
                })
                .fail(function() {
                    showToast('Failed to send message. Please try again.');
                });
        });

        // Auto-refresh if authenticated
        if (isAuthenticated()) {
            // Load initial messages
            $('.chat-box').each(function() {
                const receiverId = $(this).attr('id').split('-')[2];
                loadMessages(receiverId);
            });

            // Set up periodic refresh
            setInterval(function() {
                $('.chat-box').each(function() {
                    const receiverId = $(this).attr('id').split('-')[2];
                    loadMessages(receiverId);
                });
            }, 5000);
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const form = document.getElementById('updatePasswordForm');
            if (!form) return; // Exit if form is not found

            form.addEventListener('submit', function(e) {
                e.preventDefault();

                const formData = new FormData(form);
                const submitBtn = form.querySelector('button[type="submit"]');

                // Disable button during submission
                submitBtn.disabled = true;
                submitBtn.innerHTML = 'Updating...';

                fetch(form.action, {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        }
                    })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(err => Promise.reject(err));
                        }
                        return response.json();
                    })
                    .then(data => {
                        if (data.success) {
                            showToast(data.message, 'success');
                            form.reset();
                        }
                    })
                    .catch(error => {
                        if (error.errors) {
                            // Handle validation errors
                            Object.values(error.errors).forEach(messages => {
                                messages.forEach(message => {
                                    showToast(message, 'error');
                                });
                            });
                        } else if (error.message) {
                            showToast(error.message, 'error');
                        }
                    })
                    .finally(() => {
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = 'Update Password';
                    });
            });

            // Display server-side flash messages
            <?php if(session('toast')): ?>
                showToast("<?php echo e(session('toast.message')); ?>", "<?php echo e(session('toast.type')); ?>");
            <?php endif; ?>
        });
    </script>
    <script>
        $(document).on("submit", "#verificationSend", function(event) {
            event.preventDefault();
            var data = new FormData(this);
            $("button[type=submit]").prop('disabled', true);
            $.ajax({
                url: '<?php echo e(route('verification.send')); ?>',
                type: 'post',
                data: data,
                contentType: false,
                processData: false,
                dataType: 'json',
                success: function(response) {
                    if (response.status == true) {
                        // alert("Success");

                        showToast(response.message, 'success');
                        setTimeout(() => {
                            window.location.reload();
                            $("button[type=submit]").prop('disabled', false);
                        }, 2000);
                    }
                    if (response.status == false) {
                        // alert("Failed");
                        showToast(response.message, 'warning');
                        setTimeout(() => {
                            window.location.reload();
                            $("button[type=submit]").prop('disabled', false);
                        }, 2000);
                    }
                },
                error: function(jqXHR, exception) {
                    // alert("Failed");
                    showToast('Please Try Again...', 'Error');
                    $("button[type=submit]").prop('disabled', false);
                    // toastr.error("Please Try Again...", "Error");
                    // $("button[type=submit]").prop('disabled', false);
                }
            });
        });
    </script>


    

    <script>
        // Like button handler
        $(document).on('click', '.like-btn', function() {
            const profileId = $(this).data('id');
            const type = $(this).data('type');
            const button = $(this);

            $.ajax({
                url: "<?php echo e(route('like.profile')); ?>",
                method: 'POST',
                data: {
                    _token: '<?php echo e(csrf_token()); ?>',
                    profile_id: profileId,
                    type: type
                },
                success: function(response) {
                    let countSelector = `#like-count-${response.type}-${response.id}`;
                    let buttonSelector =
                        `.like-btn[data-id="${response.id}"][data-type="${response.type}"]`;

                    if (response.status === 'liked' || response.status === 'already_liked') {
                        $(countSelector).text(response.likes ?? ''); // Update count if available

                        // Hide the like button
                        if (response.hide) {
                            $(buttonSelector).hide();
                        }

                        // Show message
                        let toastType = response.status === 'liked' ? 'success' : 'info';
                        showToast(response.message, toastType);
                    }
                },

                error: function(xhr) {
                    if (xhr.status === 401) {
                        showToast('Please login to like', 'error');
                    } else {
                        showToast('An error occurred. Please try again.', 'error');
                    }
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // Main Page Filter
            $('#CountryMain').on('change', function() {
                var selectedCountry = $(this).val();

                $('#list-book .item').each(function() {
                    var country = $(this).data('country');
                    if (selectedCountry === '' || country === selectedCountry) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });

                $('#list-book').trigger('refresh.owl.carousel');
            });

            // Modal Filter
            $('#CountryModal').on('change', function() {
                var selectedCountry = $(this).val();

                $('#book-search .item').each(function() {
                    var country = $(this).data('country');
                    if (selectedCountry === '' || country === selectedCountry) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });

                $('#book-search').trigger('refresh.owl.carousel');
            });
        });
    </script>

    

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            tooltipTriggerList.forEach(function(tooltipTriggerEl) {
                new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const logoutBtn = document.getElementById('confirmLogoutBtn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', function() {
                    window.location.href = "/logout";
                });
            }
        });
    </script>


    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const toggleIcons = document.querySelectorAll('.toggle-password');

            toggleIcons.forEach(icon => {
                icon.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);

                    if (input.type === 'password') {
                        input.type = 'text';
                        this.classList.remove('fa-eye-slash');
                        this.classList.add('fa-eye');
                    } else {
                        input.type = 'password';
                        this.classList.remove('fa-eye');
                        this.classList.add('fa-eye-slash');
                    }
                });
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            // console.log("jQuery is working!");
            const $profileInput = $('#profile_photo');
            const defaultImg = '<?php echo e(asset('website/images/big-dp.png')); ?>';
            const $previewImg = $('#profile_preview');

            // Open file dialog on click
            $('.trigger-upload').on('click', function() {
                $profileInput.click();
            });

            // Live preview on image select
            $profileInput.on('change', function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $previewImg.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });

            // Handle delete
            $('.delete-photo').on('click', function() {
                if (!confirm('Are you sure you want to delete your profile photo?')) return;

                $.ajax({
                    url: "<?php echo e(route('delete.profile.photo')); ?>", // define this route in web.php
                    type: "POST",
                    data: {
                        _token: '<?php echo e(csrf_token()); ?>'
                    },
                    success: function(response) {
                        if (response.success) {
                            $profileInput.val('');
                            $previewImg.attr('src', defaultImg);
                        } else {
                            alert('Failed to delete image. Try again.');
                        }
                    },
                    error: function() {
                        alert('Server error occurred.');
                    }
                });
            });
        });
    </script>
    <script>
        $(document).ready(function() {
            const bookCoverInput = $('#book_cover_input');
            const bookCoverPreview = $('#book_cover_preview');

            // Trigger input when clicking on the area
            $('#dropArea').on('click', function() {
                bookCoverInput.click();
            });

            // Show preview when a file is selected
            bookCoverInput.on('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        bookCoverPreview.attr('src', e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
        });
    </script>

    <script>
        $(document).ready(function() {
            $("#list-book").owlCarousel({
                loop: false,
                margin: 50,
                nav: true,
                responsive: {
                    0: {
                        items: 1,
                    },
                    600: {
                        items: 3,
                    },
                    1000: {
                        items: 4,
                    },
                },
            });
        });
        $(document).ready(function() {
            $("#book-search").owlCarousel({
                loop: false,
                margin: 30,
                nav: true,
                navText: [
                    // Left Arrow
                    `<button class="owl-prev">
         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 512 512">
          <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L9.4 233.4z"/>
        </svg>
      </button>`,

                    // Right Arrow (flipped path)
                    `<button class="owl-next">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 512 512">
          <path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h370.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/>
        </svg>

      </button>`,
                ],
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 4
                    },
                },
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const countrySelect = document.getElementById("CountryMain");
            const owl = $('#list-book');
            const allItems = $('#list-book .item').clone(); // backup of all items
            const noBooksMessage = document.getElementById("no-books-message");

            function refreshOwl(itemsToShow) {
                owl.trigger('destroy.owl.carousel');
                owl.html('');
                if (itemsToShow.length > 0) {
                    noBooksMessage.style.display = 'none';
                    owl.append(itemsToShow);
                    owl.owlCarousel({
                        loop: false,
                        margin: 15,
                        nav: true,
                        dots: false,
                        responsive: {
                            0: {
                                items: 1
                            },
                            600: {
                                items: 2
                            },
                            1000: {
                                items: 4
                            }
                        }
                    });
                } else {
                    noBooksMessage.style.display = 'block';
                }
            }

            countrySelect.addEventListener("change", function() {
                const selectedCountry = this.value;

                if (selectedCountry === "") {
                    refreshOwl(allItems.clone());
                } else {
                    let filteredItems = [];
                    allItems.each(function() {
                        if ($(this).data('country') === selectedCountry) {
                            filteredItems.push($(this).clone());
                        }
                    });

                    refreshOwl(filteredItems);
                }
            });
        });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const modalCountrySelect = document.getElementById("CountryModal");
            const modalOwl = $('#book-search');
            const modalAllItems = $('#book-search .item').clone(); // Backup all items
            const noBooksModalMessage = document.getElementById("no-books-modal-message");

            function refreshModalOwl(itemsToShow) {
                modalOwl.trigger('destroy.owl.carousel');
                modalOwl.html('');

                if (itemsToShow.length > 0) {
                    noBooksModalMessage.style.display = 'none';
                    modalOwl.append(itemsToShow);
                    modalOwl.owlCarousel({
                        loop: false,
                        margin: 15,
                        nav: true,
                        dots: false,
                        navText: [
                            // Left Arrow
                            `<button class="owl-prev">
         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 512 512">
          <path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 288H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H109.3l73.4-73.4c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L9.4 233.4z"/>
        </svg>
      </button>`,

                            // Right Arrow (flipped path)
                            `<button class="owl-next">
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 512 512">
          <path d="M502.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L402.7 224H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h370.7l-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/>
        </svg>

      </button>`,
                        ],
                        responsive: {
                            0: {
                                items: 1
                            },
                            600: {
                                items: 2
                            },
                            1000: {
                                items: 4
                            }
                        }
                    });
                } else {
                    noBooksModalMessage.style.display = 'block';
                }
            }

            // Initial setup (optional if you auto-show modal with full list)
            refreshModalOwl(modalAllItems.clone());

            modalCountrySelect.addEventListener("change", function() {
                const selectedCountry = this.value;

                if (selectedCountry === "") {
                    refreshModalOwl(modalAllItems.clone());
                } else {
                    const filteredItems = modalAllItems.filter(function() {
                        return $(this).data('country') === selectedCountry;
                    }).clone();

                    refreshModalOwl(filteredItems);
                }
            });
        });
    </script>
<?php /**PATH /home2/gccdemo/public_html/repositories/blinddate/resources/views/website/layouts/app.blade.php ENDPATH**/ ?>