@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Premium Matches') }}</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')

            <div class="w-full px-6 pt-[60px] pb-[60px]">
                <div style="z-index: 999;" id="notification-container" class="fixed top-25 right-5 space-y-4 z-50"></div>
                <div class="text-black mt-7">
                    <h3 class="text-[22px] sm:text-2xl lg:text-3xl xl:text-[36px] font-semibold mb-4">{{ translate('Premium Matches') }}</h3>
                </div>

                <style>
                    @media (max-width: 768px) {
                    .text-black.mt-7 {
                        margin-top: 90px !important;
                    }
                    }
                </style>

                <div class="w-full px-1 pt-[20px] mt-6">

                    <div class="flex pb-6 gap-2.5 items-center justify-between flex-wrap">
                        <!-- =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> --}}

                        </div>
                        <!-- =right-button= -->
                        <div class="flex items-center gap-2">
                            <!-- =item= -->
                           
                            <!-- =item= -->
                            <button id="grid_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle4') == 'grid' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-layout-grid-line"></i>
                        </button>
                            <!-- =item= -->
                            <button id="list_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle4') == 'list' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-list-unordered"></i>
                        </button>

                        <button id="map_btn"
                            class="text-xl font-semibold duration-300 {{ session('GridStyle4') == 'map_view' ? 'text-red-color' : 'text-black' }}">
                            <i class="ri-map-pin-line"></i>
                        </button>
                        </div>
                    </div>


                    @if (session('GridStyle4') == 'grid')
                    <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">


                         @if ($premiumMatches->isEmpty())
                         <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                         @else
                         @foreach ($premiumMatches as $match)
                          @php
                            $isLiked = $likedProfiles->contains('id', $match->id);
                            $profileImageData = getProfileImage($match);
                          @endphp
                        <!-- =item= -->

                            <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                               class="text-center text-black max-w-[400px] w-full "
                               data-id="{{ encrypt($match->id) }}"
                               data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">

                               <picture>
                                   <img style="border-radius:20px;"
                                       src="{{ $profileImageData['image_url'] }}"
                                       alt="image" loading="lazy"
                                       class="w-full {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }} ">
                               </picture>
                               @if($profileImageData['is_blurred'])
                               <div style="margin-top: -100px; margin-left:60px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                   <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><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>
                           @endforeach
                           @endif

                    </div>
                    @endif


                    @if (session('GridStyle4') == 'list')
                    <div id="list_view"  class="w-full flex flex-col gap-5 2xl:gap-0">

                        @if ($premiumMatches->isEmpty())
                            <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                        @else
                        @foreach($premiumMatches as $match)
                            @php
                                $isLiked = $likedProfiles->contains('id', $match->id);
                                $profileImageData = getProfileImage($match);
                            @endphp
                        <!-- =item= -->

                        <div class="w-full">
                            <!-- =content= -->
                            <div
                                class="flex gap-3.5 sm:gap-5 items-center">
                                <picture>
                                    <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                                        class="text-center text-black max-w-[400px] w-full "
                                        data-id="{{ encrypt($match->id) }}"
                                        data-package="{{ auth()->user()->userPackage ? 'true' : 'false' }}">
                                    <img
                                        style="border-radius:20px;"
                                        src="{{ $profileImageData['image_url'] }}"
                                        alt="image" loading="lazy"
                                        class="w-full rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                    </a>
                                    </picture>
                                        @if($profileImageData['is_blurred'])
                                        <div style="margin-left:65px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><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

                                <div class="text-black w-full">
                                    <!-- =upper-text= -->
                                    <div
                                        class="flex items-center gap-3.5 justify-between flex-wrap">
                                        <div
                                            class="flex items-start md:items-center gap-3.5">
                                            <span
                                                class="min-w-[14px] h-3.5 bg-red-color"></span>
                                            <h3
                                                class="flex items-center font-medium gap-2.5 flex-wrap">
                                                <a href="#"
                                                    class="text-xs md:text-base lg:text-[20px] duration-300 hover:text-red-color font-semibold whitespace-nowrap overflow-hidden text-ellipsis">{{ $match->first_name }} {{ $match->last_name }}</a>
                                                <span
                                                    class="text-xs md:text-base lg:text-lg font-normal whitespace-nowrap overflow-hidden text-ellipsis">{{ $match->age }} {{ translate('Years Old') }}, {{$match->userDetails->country->name ?? '' }}, {{ $match->userDetails->city->name ?? '' }}</span>
                                            </h3>
                                        </div>

                                    </div>
                                    <p
                                        class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">
                                       {{$match->short_description}}</p>

                                    <div
                                        class="w-full 2xl:block">
                                        @php
                                             if($match->relation_status_id != null){
                                            $relationStatus=App\Models\ProfileAttributeMeta::where('id', $match->relation_status_id)->first();
                                        }
                                        else{
                                            $relationStatus=null;
                                        }

                                        if($user->religion_id != null){
                                            $religion=App\Models\ProfileAttributeMeta::where('id', $match->religion_id)->first();
                                        }
                                        else{
                                            $religion=null;
                                        }
                                        @endphp

                                        <div
                                            class="flex items-center gap-8 mt-3">
                                            <h4
                                                class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Relation') }}</h4>
                                            <div
                                                class="flex items-center gap-8">
                                                <p
                                                    class="text-xs md:text-sm font-normal">:</p>
                                                    @if ($relationStatus)
                                                    <p
                                                    class="text-xs md:text-sm font-normal">{{$relationStatus->name}}</p>
                                                    @else
                                                    <p
                                                    class="text-xs md:text-sm font-normal">-</p>
                                                    @endif

                                            </div>
                                        </div>
                                        <!-- =item= -->
                                        <div
                                            class="flex items-center gap-8 mt-3">
                                            <h4
                                                class="text-xs md:text-sm font-medium w-[100px]">{{ translate('Religious') }}</h4>
                                            <div
                                                class="flex items-center gap-8">
                                                <p
                                                    class="text-xs md:text-sm font-normal">:</p>
                                                    @if ($religion)
                                                    <p
                                                    class="text-xs md:text-sm font-normal">{{$religion->name}}</p>
                                                    @else
                                                    <p
                                                    class="text-xs md:text-sm font-normal">-</p>
                                                    @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>



                                </div>
                            </div>
                            <!-- =small-device-description= -->
                            <p
                                class="text-xs md:text-sm font-normal text-black mt-3 xs:hidden">{{$match->short_description}}</p>
                            {{-- <div class="w-full mt-3 2xl:hidden">
                                <!-- =item= -->
                                <div class="flex items-center gap-8">
                                    <h4
                                        class="text-xs md:text-sm font-medium w-[100px]">Relatie
                                        status</h4>
                                    <div
                                        class="flex items-center gap-8">
                                        <p
                                            class="text-xs md:text-sm font-normal">:</p>
                                        <p
                                            class="text-xs md:text-sm font-normal">Single
                                            - nooit getrouwd</p>
                                    </div>
                                </div>
                                <!-- =item= -->
                                <div
                                    class="flex items-center gap-8 mt-3">
                                    <h4
                                        class="text-xs md:text-sm font-medium w-[100px]">Religie</h4>
                                    <div
                                        class="flex items-center gap-8">
                                        <p
                                            class="text-xs md:text-sm font-normal">:</p>
                                        <p
                                            class="text-xs md:text-sm font-normal">Hindoe</p>
                                    </div>
                                </div>
                            </div> --}}
                        </div>

                        @endforeach
                       @endif
                    </div>
                    @endif


                    @if (session('GridStyle4') == 'list' || session('GridStyle3') == 'grid')
                    @if ($premiumMatches->isEmpty())
                    @else
                    <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                        @if ($premiumMatches->onFirstPage())
                            <span class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</span>
                        @else
                            <a href="{{ $premiumMatches->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">{{ $matches->currentPage() }}</a>

                        @if ($premiumMatches->hasMorePages())
                            <a href="{{ $premiumMatches->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>
                    @endif
                    @endif


                    @if (session('GridStyle4') == 'map_view')
                    <div class="w-full px-1 pt-[60px] flex items-start gap-5 relative flex-col-reverse sm:flex-row">
                    <div class="w-full sm:flex-1">


                        <div class="w-full sm:h-[600px] sm:overflow-y-auto customize_scrollbar sm:pr-2">
                            <div
                                class="grid grid-cols-1 min-[450px]:grid-cols-2 gap-5 min-[650px]:grid-cols-3 sm:grid-cols-2 xl:grid-cols-3">

                                @if ($premiumMatches->isEmpty())
                                <p class="text-center text-gray-500 w-full text-sm">{{ translate('No profiles found') }}</p>
                                @else
                                @foreach($premiumMatches as $match)
                                    @php
                                        $isLiked = $likedProfiles->contains('id', $match->id);
                                        $profileImageData = getProfileImage($match);
                                    @endphp



                                <a href="{{ route('partner_profile', ['id' => encrypt($match->id)]) }}"
                                    class="relative rounded-[5px] overflow-hidden max-w-[400px] group w-full"
                                    data-latitude="{{ $match->latitude }}"
                                    data-longitude="{{ $match->longitude }}"
                                    data-name="{{ $match->first_name }} {{ $match->last_name }}"
                                    onclick="showUserLocation(this)">
                                    <picture>
                                        <img src="{{ $profileImageData['image_url'] }}"
                                            alt="image"
                                            class="w-full {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}"
                                            loading="lazy">
                                    </picture>
                                    @if($profileImageData['is_blurred'])
                                        <div style="margin-top: -107px; margin-left:65px;" class="ask-for-image-link absolute top-2 left-2" data-user-id="{{ $match->id }}" data-image-id="{{ $profileImageData['image_url'] }}">
                                            <svg xmlns="http://www.w3.org/2000/svg" style="width:40px;" viewBox="0 0 576 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><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="absolute left-0 right-0 flex items-center justify-center bottom-5 text-white text-md font-semibold capitalize profile-link whitespace-nowrap overflow-hidden text-ellipsis">
                                        {{ $match->first_name }} {{ $match->last_name }}
                                    </h5>
                                </a>
                                    <style>
                                        /* Mobile responsiveness */
                                        @media (max-width: 768px) {
                                            .ask-for-image-link svg {
                                                width: 30px; /* Adjust the icon size for smaller screens */
                                            }
                                        }
                                    </style>
                                @endforeach
                                @endif


                            </div>
                        </div>
                        <!-- ==pages== -->
                        <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                            @if ($premiumMatches->onFirstPage())
                                <span class="text-black text-sm font-normal duration-300 hover:text-red-color">{{ translate('Previous') }}</span>
                            @else
                                <a href="{{ $premiumMatches->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">{{ $matches->currentPage() }}</a>

                            @if ($premiumMatches->hasMorePages())
                                <a href="{{ $premiumMatches->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>
                    <!-- =right-part= -->
                    <div
                    class="w-full h-[300px] sm:w-[250px] sm:h-[400px] md:w-[300px] md:h-[500px] lg:w-[350px] lg:h-[600px] xl:w-[400px] xl:h-[700px] sm:sticky right-0 top-0 rounded-[5px] flex items-center justify-center sm:block">
                    <div id="map" class="w-full h-full rounded-lg"></div>
                    <style>
                        #map {
                            z-index: 1;
                            position: relative; /* Ensure z-index applies */
                        }
                    </style>
                </div>
                </div>
               @endif



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

@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if($userpackage != null)
<script>
    let nextPageUrl = "{{ $matches->nextPageUrl() }}";

    document.getElementById('loadMore').addEventListener('click', function(e) {
    e.preventDefault();

    if (!nextPageUrl) return;

    fetch(nextPageUrl)
    .then(response => response.text())
    .then(data => {
    let parser = new DOMParser();
    let doc = parser.parseFromString(data, 'text/html');

    // Extract new profiles
    let newProfiles = doc.querySelector('#profileGrid').innerHTML;
    document.getElementById('profileGrid').innerHTML += newProfiles;

    // Update nextPageUrl or hide the button if no more pages
    let nextPageLink = doc.querySelector('#loadMore');
    if (nextPageLink) {
    nextPageUrl = nextPageLink.getAttribute('href');
    } else {
    document.getElementById('loadMore').style.display = 'none';
    }
    });
    });

</script>
@endif



@php
    $usersWithLocation = $premiumMatches->filter(function ($match) {
        return $match->latitude && $match->longitude;
    });
@endphp


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
    // Initialize Leaflet Map
    let map = L.map('map').setView([0, 0], 2); // Default center and zoom

    // Add OpenStreetMap layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '© OpenStreetMap'
    }).addTo(map);

    // Add user markers with location
    let markers = [];
    @foreach($usersWithLocation as $user)
        markers.push({
            name: "{{ $user->name }}",
            latitude: "{{ $user->latitude }}",
            longitude: "{{ $user->longitude }}"
        });
    @endforeach

    // Loop through all markers and add them to the map
    markers.forEach(user => {
        L.marker([user.latitude, user.longitude]).addTo(map)
            .bindPopup(`<b>${user.name}</b>`)
            .openPopup();
    });

    // Center map around all markers
    if (markers.length > 0) {
        let group = L.featureGroup(markers.map(m => L.marker([m.latitude, m.longitude])));
        map.fitBounds(group.getBounds());
    }
</script>



<script>
    // Grid Button Click
    document.getElementById('grid_btn').addEventListener('click', function () {
        updateSession('grid');
    });

    // List Button Click
    document.getElementById('list_btn').addEventListener('click', function () {
        updateSession('list');
    });

    document.getElementById('map_btn').addEventListener('click', function () {
        updateSession('map_view');
    });



    // Function to Update Session
    function updateSession(style) {
        fetch("{{ route('updateGridStyle4') }}", {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ GridStyle4: style })
        }).then(response => {
            if (response.ok) {
                location.reload(); // Reload to apply changes
            }
        });
    }
</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>

<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>


@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>