@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Dashboard') }}</title>


@section('content')

<section  class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <div class="flex-1 bg-white">
            @include('frontend.user.layouts.header')

            <!-- ===middle-all-content=== -->
            <div class="w-full px-6 pb-[60px] xl:pb-32">
                <div style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>
                @foreach($pages as $page)
                <div class="text-black mt-5">
                    <h3 class="text-[22px] sm:text-2xl lg:text-3xl xl:text-[36px] font-semibold mb-2">{{ translate('Search profiles') }}</h3>
                    <p class="text-xs md:text-sm xl:mt-0 lg:text-base font-normal">{!! $page->content !!}</p>
                </div>
                @endforeach
                <style>
                    @media (max-width: 768px) {
                    .text-black.mt-5 {
                        margin-top: 90px !important;
                    }
                    }
                </style>

                            <!-- =button-wrapper= -->
                            <div
                                class="flex pb-6 gap-2.5 items-center justify-between flex-wrap mt-3">
                                <!-- =left-button= -->
                                <div class="flex items-center gap-2 flex-wrap">
                                    <!-- =item= -->
                                    {{-- <div class="flex items-center gap-2">
                                        <!-- =check-toggle= -->
                                        <button
                                            class="dashbord_check_toggle small">
                                            <input type="checkbox" name="check"
                                                id="check8">
                                            <label for="check8"></label>
                                        </button>
                                        <!-- =text= -->
                                        <span
                                            class="text-black text-sm font-semibold whitespace-nowrap">Featured</span>
                                    </div> --}}

                                    <!-- =item= -->
                                    <div class="flex items-center gap-2">
                                        <!-- =check-toggle= -->
                                        <button
                                            class="dashbord_check_toggle small">
                                            <input type="checkbox" name="check"
                                                id="check9">
                                            <label for="check9"></label>
                                        </button>
                                        <!-- =text= -->
                                        <span
                                            class="text-black text-sm font-semibold whitespace-nowrap">{{ translate('Online') }}</span>
                                    </div>

                                    <!-- =item= -->
                                    {{-- <div class="flex items-center gap-2">
                                        <!-- =check-toggle= -->
                                        <button
                                            class="dashbord_check_toggle small">
                                            <input type="checkbox" name="check"
                                                id="check10">
                                            <label for="check10"></label>
                                        </button>
                                        <!-- =text= -->
                                        <span
                                            class="text-black text-sm font-semibold whitespace-nowrap">Video</span>
                                    </div> --}}

                                    <!-- =item= -->
                                    {{-- <button class="flex items-center gap-2">
                                        <!-- =icon= -->
                                        <span>
                                            <svg width="17" height="17"
                                                viewBox="0 0 20 20" fill="none"
                                                xmlns="http://www.w3.org/2000/svg">
                                                <g
                                                    clip-path="url(#clip0_98_14663)">
                                                    <path
                                                        d="M11.6711 20C11.4908 20 11.3154 19.9415 11.1711 19.8333L7.83779 17.3333C7.7343 17.2557 7.65029 17.1551 7.59244 17.0393C7.53458 16.9236 7.50446 16.796 7.50446 16.6667V11.9833L1.65779 5.40583C1.24256 4.9374 0.971442 4.35901 0.877026 3.7402C0.78261 3.12138 0.868913 2.48846 1.12556 1.91751C1.38221 1.34656 1.79829 0.861882 2.32378 0.521721C2.84927 0.181561 3.46181 0.000395349 4.08779 0L15.9211 0C16.547 0.000734209 17.1594 0.182199 17.6847 0.522589C18.21 0.862978 18.6258 1.34781 18.8822 1.91882C19.1386 2.48983 19.2246 3.12273 19.1299 3.74146C19.0353 4.36018 18.764 4.93841 18.3486 5.40667L12.5045 11.9833V19.1667C12.5045 19.3877 12.4167 19.5996 12.2604 19.7559C12.1041 19.9122 11.8921 20 11.6711 20ZM9.17113 16.25L10.8378 17.5V11.6667C10.838 11.4626 10.913 11.2657 11.0486 11.1133L17.1053 4.29917C17.3072 4.0709 17.439 3.7892 17.4848 3.48788C17.5306 3.18655 17.4885 2.87842 17.3634 2.60046C17.2384 2.32251 17.0358 2.08655 16.78 1.92091C16.5241 1.75527 16.2259 1.66699 15.9211 1.66667H4.08779C3.78317 1.66713 3.48514 1.75546 3.22946 1.92105C2.97378 2.08665 2.7713 2.3225 2.6463 2.60029C2.5213 2.87809 2.47909 3.18605 2.52473 3.48723C2.57037 3.78842 2.70193 4.07004 2.90363 4.29833L8.96113 11.1133C9.09647 11.2659 9.17119 11.4627 9.17113 11.6667V16.25Z"
                                                        fill="#19B7EA" />
                                                </g>
                                                <defs>
                                                    <clippath
                                                        id="clip0_98_14663">
                                                        <rect width="20"
                                                            height="20"
                                                            fill="white"
                                                            transform="translate(0.00390625)" />
                                                    </clippath>
                                                </defs>
                                            </svg>
                                        </span>
                                        <!-- =text= -->
                                        <span
                                            class="text-black text-sm font-semibold whitespace-nowrap">More
                                            Filters</span>
                                    </button> --}}
                                </div>
                                <!-- =right-button= -->
                                {{-- <div class="flex items-center gap-2">
                                    <!-- =item= -->
                                    <select name="filter" id="filter"
                                        class="bg-transparent border-none outline-none text-black text-sm font-semibold cursor-pointer hover:text-red-color duration-300">
                                        <option value="Most Relevant">Most
                                            Relevant</option>
                                        <option value="Most Relevant">Most
                                            Relevant</option>
                                        <option value="Most Relevant">Most
                                            Relevant</option>
                                        <option value="Most Relevant">Most
                                            Relevant</option>
                                    </select>
                                    <!-- =item= -->
                                    <button
                                        class="text-xl text-black font-semibold duration-300 hover:text-red-color">
                                        <i class="ri-layout-grid-line"></i>
                                    </button>
                                    <!-- =item= -->
                                    <button
                                        class="text-xl text-black font-semibold duration-300 hover:text-red-color">
                                        <i class="ri-list-unordered"></i>
                                    </button>
                                    <!-- =item= -->
                                    <button
                                        class="text-xl text-black font-semibold duration-300 hover:text-red-color">
                                        <i class="ri-map-pin-line"></i>
                                    </button>
                                </div> --}}
                            </div>
                            <!-- =image-gallery-wrapper= -->
                            <div class="grid grid-cols-1 place-items-center xs:place-items-start min-[450px]:grid-cols-2 min-[550px]:grid-cols-3 min-[700px]:grid-cols-4 md:grid-cols-5 2xl:grid-cols-6 gap-7">
                                <!-- =item= -->
                                @forelse($filteredUsers as $match)
                                @php
                                    $isLiked = $likedProfiles->contains('id', $match->id);
                                    $profileImageData = getProfileImage($match);
                                @endphp
                                <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                                   class="text-center text-black max-w-[400px] w-full user-card relative">
                                    <picture>
                                        <img style="border-radius:20px;"
                                            src="{{ $profileImageData['image_url'] }}"
                                            alt="image"
                                            loading="lazy"
                                            class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                    </picture>

                                    @if($profileImageData['is_blurred'])
                                    <div style="margin-top: -100px; margin-left:60px;"
                                    class="ask-for-image-link absolute flex items-center justify-center"
                                         data-user-id="{{ $match->id }}"
                                         data-image-id="{{ $profileImageData['image_url'] }}">
                                        <svg xmlns="http://www.w3.org/2000/svg"
                                             class="w-10 h-10 sm:w-12 sm:h-12 text-blue-500"
                                             viewBox="0 0 576 512">
                                            <!-- Font Awesome Free Icon -->
                                            <path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
                                        </svg>
                                    </div>
                                    @endif

                                    <h5 class="text-lg font-semibold py-1 whitespace-nowrap overflow-hidden text-ellipsis">{{ $match->name }}</h5>

                                    <p class="text-[#737c96] text-xs font-medium whitespace-nowrap overflow-hidden text-ellipsis">
                                        {{ $match->age }} {{ translate('Years Old') }},
                                        {{ $match->userDetails->country->name ?? '' }},
                                        {{ $match->userDetails->city->name ?? '' }}
                                    </p>

                                    <div class="flex items-center justify-center gap-2.5 pt-1">
                                        <button class="favourite_button {{ $isLiked ? 'active' : '' }}" 
                                                data-favourite-button 
                                                data-id="{{ $match->id }}">
                                            <i class="ri-heart-line"></i>
                                        </button>
                                        <button
                                            class="flex items-center justify-center w-8 h-8 rounded-full border-[1px] border-blue-color text-lg text-blue-color font-medium duration-300 hover:bg-blue-color hover:text-white">
                                            <i class="ri-message-3-line"></i>
                                        </button>
                                    </div>
                                </a>

                                @empty
                                <p class="text-center text-gray-500 text-lg font-semibold py-8 whitespace-nowrap">
                                    {{ translate('No data found for the current filters.') }}
                                </p>
                                @endforelse
                            </div>



                            <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                                @if ($filteredUsers->onFirstPage())
                                    <span class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</span>
                                @else
                                    <a href="{{ $filteredUsers->previousPageUrl() }}" class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</a>
                                @endif

                                <a href="#" class="rounded-full w-10 h-10 flex items-center justify-center bg-blue-color text-white font-semibold text-sm duration-300 hover:bg-red-color">{{ $filteredUsers->currentPage() }}</a>

                                @if ($filteredUsers->hasMorePages())
                                    <a href="{{ $filteredUsers->nextPageUrl() }}" class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</a>
                                @else
                                    <span class="text-black text-sm font-semibold duration-300 hover:text-red-color">{{ translate('Next') }}</span>
                                @endif
                            </div>



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

</section>
@endsection


@push('scripts')

{{-- <script>

        $(document).ready(function() {
        $('.favourite_button').on('click', function(event) {
        event.preventDefault();

        const likedUserId = $(this).data('liked-user-id');
        const button = $(this);
        alert(likedUserId);

        $.ajax({
        url: '{{ route("like.toggle") }}',
        type: 'POST',
        data: {
            liked_user_id: likedUserId,
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(response) {
            if (response.status === 'liked') {
                button.addClass('liked');
                button.find('i').removeClass('ri-heart-line').addClass('ri-heart-fill');
            } else if (response.status === 'unliked') {
                button.removeClass('liked');
                button.find('i').removeClass('ri-heart-fill').addClass('ri-heart-line');
            }
        },
        error: function(xhr, status, error) {
            console.error("Error toggling like status:", error);
        }
        });
        });
        });


</script> --}}





<script src="https://cdn.ably.com/lib/ably.min-1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const currentUserId = {{ auth()->id() }};
        const notificationContainer = document.getElementById('notification-container');

        // Initialize Ably
        const ably = new Ably.Realtime('{{ env('ABLY_KEY') }}');
        const notificationChannel = ably.channels.get(`notifications.${currentUserId}`);

        console.log(`Subscribed to Ably channel: notifications.${currentUserId}`);

        // Function to format the time based on the user's local timezone
        function formatTime(createdAt) {
            const createdTime = new Date(createdAt);
            return createdTime.toLocaleTimeString([], {
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false // Removes AM/PM
            });
        }

        // Function to get relative time (like "x minutes ago")
        function getTimeAgo(createdAt) {
          
            const createdTime = new Date(createdAt);
            const now = new Date();
            const secondsAgo = Math.floor((now - createdTime) / 1000);

            if (secondsAgo < 60) {
                return `${secondsAgo} seconds ago`;
            } else if (secondsAgo < 3600) {
                const minutesAgo = Math.floor(secondsAgo / 60);
                return `${minutesAgo} minutes ago`;
            } else if (secondsAgo < 86400) {
                const hoursAgo = Math.floor(secondsAgo / 3600);
                return `${hoursAgo} hours ago`;
            } else {
                const daysAgo = Math.floor(secondsAgo / 86400);
                return `${daysAgo} days ago`;
            }
        }

        // Function to create notification element
        function createNotificationElement(notification) {
            const formattedTime = formatTime(notification.created_at); // Call formatTime
            const timeAgo = getTimeAgo(notification.created_at); // Call getTimeAgo

            const notificationElement = document.createElement('div');
            notificationElement.classList.add('notification-item');

            const closeButton = document.createElement('span');
            closeButton.textContent = '×';
            closeButton.classList.add('close-btn');
            closeButton.onclick = function () {
                markAsRead(notification.id);
                notificationElement.remove();
            };

            notificationElement.innerHTML = `
                <p style="color: white; font-size:14px; padding-right:20px;">${notification.message}</p>
                <span style="color: white; font-size: 0.8em;">
                    ${formattedTime} (${timeAgo})
                </span>
            `;

            notificationElement.appendChild(closeButton);
            return notificationElement;
        }

        // Mark notification as read
        function markAsRead(notificationId) {
            axios.patch(`{{ url('/notifications/') }}/${notificationId}/read`)
                .then(response => {
                    console.log('Notification marked as read:', response.data);
                })
                .catch(error => console.error("Error marking notification as read:", error));
        }

        // Handle new notifications from Ably channel
        notificationChannel.subscribe('new-notification', (message) => {
            // Convert the created_at time to a JavaScript Date object
            const createdAt = new Date(message.data.created_at);

            // Format the created_at time based on the user's local timezone
            const formattedTime = createdAt.toLocaleString([], {
                weekday: 'short',
                year: 'numeric',
                month: 'short',
                day: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric',
                hour12: true // This will show AM/PM if you need it
            });

            console.log("New notification received:", message.data);

            const newNotification = createNotificationElement(message.data);
            notificationContainer.appendChild(newNotification);

            setTimeout(() => {
                markAsRead(message.data.id);  // Mark notification as read
                newNotification.remove();      // Remove notification element
            }, 10000);  // 10 seconds
        });

        // Fetch existing notifications from API
        axios.get('{{ route('notifications.index') }}')
            .then(response => {
                const notifications = response.data.notifications;

                if (!Array.isArray(notifications)) {
                    throw new Error("Notifications data is not an array");
                }

                notifications.forEach(notification => {
                    if (notification && notification.id) {
                        const existingNotification = createNotificationElement(notification);
                        notificationContainer.appendChild(existingNotification);

                        // Automatically mark as read and close after 10 seconds
                        setTimeout(() => {
                            markAsRead(notification.id);  // Mark notification as read
                            existingNotification.remove(); // Remove notification element
                        }, 10000);  // 10 seconds
                    } else {
                        console.error("Invalid notification data", notification);
                    }
                });
            })
            .catch(error => {
                console.error("Error fetching notifications:", error);
            });
    });
</script>











<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Attach click event to the ask-for-image link
        const askLinks = document.querySelectorAll('.ask-for-image-link');

        askLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();

                // Get the user_id and image_id from the data attributes of the clicked link
                const userId = this.getAttribute('data-user-id');
                const imageId = this.getAttribute('data-image-id');

                // SweetAlert2 confirmation prompt
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You are requesting to see this user's image.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Yes, ask for image',
                    cancelButtonText: 'Cancel',
                    customClass: {
                        confirmButton: 'swal-btn-yes',
                        cancelButton: 'swal-btn-cancel',
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Send the data to the server via AJAX
                        fetch('{{ route('storeImageRequest') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            },
                            body: JSON.stringify({
                                user_id: userId,
                                image_id: imageId
                            })
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.success) {
                                // Show success message with SweetAlert2
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Request Sent!',
                                    text: 'Your request has been sent successfully.',
                                });
                            } else {
                                // Show error message
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Something went wrong',
                                    text: 'Please try again later.',
                                });
                            }
                        })
                        .catch(error => {
                            // Handle any errors
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'There was an issue processing your request.',
                            });
                        });
                    }
                });
            });
        });
    });
</script>




@endpush
<style>
    .blur-image {
    filter: blur(10px);
    transition: filter 0.3s ease;
}
.blur-image:hover {
    filter: blur(10px);
    cursor: not-allowed;
}
/* Custom styling for the Yes button */
.swal-btn-yes {
    background-color: black !important;
    color: white !important;
    border: 1px solid black !important;
}

/* Custom styling for the Cancel button */
.swal-btn-cancel {
    background-color: grey !important;
    color: white !important;
    border: 1px solid grey !important;
}


.notification-item {
        background-color: #3576AF;
        padding: 10px;
        margin-bottom: 5px;
        border-radius: 5px;
        position: relative;
    }
    .close-btn {
        position: absolute;
        top: -6px;
        font-size: 21px;
        right: 3px;
        cursor: pointer;
        color: rgb(245 245 245);
    }

</style>