@extends('frontend.layouts.UserMain')

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

@section('content')

{{-- <style>
    .dashbord_navigation_menu {
     /* width: 100%; */
     /* max-width: 100%; */
     gap: 15px;
     }
     .dashbord_navigation_menu li {
         font-size: 16px; /* Default size for larger screens */
         line-height: 1.5; /* Ensures even vertical spacing */
         white-space: nowrap; /* Prevents text from wrapping */
     }

     @media (max-width: 768px) {
         .dashbord_navigation_menu li {
             font-size: 14px; /* Smaller size for smaller screens */
         }
     }
 </style> --}}

<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">

        <!-- ===right-all-content/main-wrapper== -->
        <div class="left_navigation_part" data-screen-small-wrapper2>
            <ul class="w-full flex flex-col gap-2.5">


                <!-- Recvied -->
                <li id="recviedBtn" class="bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M5 10l3 3L15 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold ">{{ translate('Recvied') }}</p>
                    </a>
                </li>

                <!-- Accepted -->
                <li id="acceptedBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Accepted') }}</p>
                    </a>
                </li>

                <!-- Sent -->
                <li id="sentBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M21 12L12 21L3 12H9V3H15V12H21Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Sent') }}</p>
                    </a>
                </li>

                <!-- Request -->
                <li id="requestBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 2V22M12 2L8 6M12 2L16 6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Request') }}</p>
                    </a>
                </li>

                <!-- Trash -->
                <li id="trashBtn" class="duration-300 hover:bg-[rgba(53,118,175,0.10)] rounded-[5px]">
                    <a href="#" class="w-full p-3 gap-2.5 h-[46px] flex items-center whitespace-nowrap">
                        <span>
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M3 6H5H21" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                <path d="M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V18C19 18.5523 18.5523 19 18 19H6C5.44772 19 5 18.5523 5 18V6" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </span>
                        <p class="text-xs font-semibold text-black">{{ translate('Trash') }}</p>
                    </a>
                </li>

                <button class="small_navigation_button" data-screen-small-button2>
                    <span class="active"><i
                            class="ri-menu-3-line"></i></span>
                    <span
                        class="close duration-300 hover:-rotate-90"><i
                            class="ri-close-large-line"></i></span>
                </button>

            </ul>
        </div>

        <div class="flex-1 bg-white">
            <!-- =header-section= -->
            @include('frontend.user.layouts.header')


            {{-- <div class="flex items-start justify-between relative"> --}}


                <!-- recviedDiv -->
                <div id="recviedDiv" class="w-full px-6 pb-[60px] xl:pb-32">


                    @foreach ($like_notifications as $like_notification)
                    @php
                      $profileImageData = getProfileImage($like_notification->requestToUser);

                      if($like_notification->requestToUser->userDetails){
                        if($like_notification->requestToUser->userDetails->languages != null){

                            $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->requestToUser->userDetails->languages)->first();

                        }
                        else{
                            $language=null;
                        }
                            } else{
                            $language=null;
                        }

                    @endphp

                    <div class="flex flex-col w-full p-5 gap-5 pb-10 lg:pb-20">
                        <div class="border border-gray-300 rounded-[5px]">
                            <div class="border border-gray-300">
                                <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                    <div class="flex flex-col gap-1">
                                        <div class="text-sm font-semibold">You recived an like from {{$like_notification->requestToUser->name}}</div>
                                    </div>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ formatDate($like_notification->created_at)}}</p>
                                </div>
                            </div>
                            <div style="padding: 15px;" class="flex items-center gap-5">
                                <div class="w-16 h-16 rounded-full">
                                    <picture>
                                        <img src="{{ $profileImageData['image_url'] }}" alt="image" loading="lazy" class="w-f rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                    </picture>
                                </div>
                                @if($profileImageData['is_blurred'])
                                    <a style="margin-top: -65px; margin-left: 20px;" href="#" class="ask-for-image-link absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 rounded-[5px] text-white text-xs sm:text-sm font-semibold hover:bg-opacity-70 transition-all"
                                    data-user-id="{{ $like_notification->requestToUser->id }}"
                                    data-image-id="{{ $profileImageData['image_url'] }}">
                                        <i class="fas fa-image"></i> Ask for Image
                                    </a>
                                 @endif
                                <div class="text-black w-full">
                                    <!-- =upper-text= -->
                                    <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                        <div class="flex flex-col gap-1">
                                            <div class="lg-sm font-semibold text-black">{{$like_notification->requestToUser->name}}<span class="text-sm text-gray-400 ml-2">&#x2705;</span></div>
                                            <div class="text-sm text-green-500"><span class="text-gray-400">&#x2709;</span> Online 1d ago</div>
                                        </div>
                                    </div>


                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ $like_notification->requestToUser->age }} Years Old|@if($like_notification->requestToUser->userDetails)
                                        @if($like_notification->requestToUser->userDetails->language)
                                        {{ $language->name}}
                                        @else
                                            N/A
                                        @endif
                                        @else
                                        N/A
                                    @endif</p>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">✉ Hi, it is nice connecting with you. I liked your profile and would like to take this forward.</p>

                                </div>
                                @if ($like_notification->status==null)
                                <div class="my-3 text-[13px] font-normal ">Share Invited you to conected
                                    <a href="{{ route('accept_like_request', ['id' => ($like_notification->id)]) }}" class="mt-2 bg-gren hover:bg-gray-100 text-[13px] font-normal py-2 px-4 border border-gray-300 rounded-[5px]  shadow">Accept</a>
                                    <a href="{{ route('decline_like_request', ['id' => ($like_notification->id)]) }}" class="mt-2 bg-white hover:bg-gray-100 text-[13px] font-normal py-2 px-4 border border-gray-300 rounded-[5px]  shadow">Decline</a>
                                </div>
                                @endif

                            </div>

                            <div class="flex gap-3 mb-3 mt-5 mr-10">
                                <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->requestToUser->id)]) }}" class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">View my Profile</a>
                                <button class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">Report This Profile</button>
                            </div>
                        </div>
                    </div>
                    @endforeach


                </div>

                <div style="display: none;" id="acceptedDiv" class="w-full px-6 pb-[60px] xl:pb-32">


                    @foreach ($accept_likes as $like_notification)
                    @php
                      $profileImageData = getProfileImage($like_notification->requestToUser);

                      if($like_notification->requestToUser->userDetails){
                        if($like_notification->requestToUser->userDetails->languages != null){

                            $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->requestToUser->userDetails->languages)->first();

                        }
                        else{
                            $language=null;
                        }
                            } else{
                            $language=null;
                        }

                    @endphp

                    <div class="flex flex-col w-full p-5 gap-5 pb-10 lg:pb-20">
                        <div class="border border-gray-300 rounded-[5px]">
                            <div class="border border-gray-300">
                                <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                    <div class="flex flex-col gap-1">
                                        <div class="text-sm font-semibold">You recived an like from {{$like_notification->requestToUser->name}}</div>
                                    </div>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ formatDate($like_notification->created_at)}}</p>
                                </div>
                            </div>
                            <div style="padding: 15px;" class="flex items-center gap-5">
                                <div class="w-16 h-16 rounded-full">
                                    <picture>
                                        <img src="{{ $profileImageData['image_url'] }}" alt="image" loading="lazy" class="w-f rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                    </picture>
                                </div>
                                @if($profileImageData['is_blurred'])
                                    <a style="margin-top: -65px; margin-left: 20px;" href="#" class="ask-for-image-link absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 rounded-[5px] text-white text-xs sm:text-sm font-semibold hover:bg-opacity-70 transition-all"
                                    data-user-id="{{ $like_notification->requestToUser->id }}"
                                    data-image-id="{{ $profileImageData['image_url'] }}">
                                        <i class="fas fa-image"></i> Ask for Image
                                    </a>
                                 @endif
                                <div class="text-black w-full">
                                    <!-- =upper-text= -->
                                    <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                        <div class="flex flex-col gap-1">
                                            <div class="lg-sm font-semibold text-black">{{$like_notification->requestToUser->name}}<span class="text-sm text-gray-400 ml-2">&#x2705;</span></div>
                                            <div class="text-sm text-green-500"><span class="text-gray-400">&#x2709;</span> Online 1d ago</div>
                                        </div>
                                    </div>


                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ $like_notification->requestToUser->age }} Years Old|@if($like_notification->requestToUser->userDetails)
                                        @if($like_notification->requestToUser->userDetails->language)
                                        {{ $language->name}}
                                        @else
                                            N/A
                                        @endif
                                        @else
                                        N/A
                                    @endif</p>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">✉ Hi, it is nice connecting with you. I liked your profile and would like to take this forward.</p>

                                </div>
                                @if ($like_notification->status==1)
                                <div class="my-3 text-[13px] font-normal ">
                                    <a href="{{route('messenger', ['id' => $like_notification->requestToUser->id]) }}"
                                        class="py-2.5 px-4 sm:px-5 rounded-[5px] bg-blue-color text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap text-sm">{{ translate('Send
                                        Message') }}</a>

                                </div>
                                @endif

                            </div>

                            <div class="flex gap-3 mb-3 mt-5 mr-10">
                                <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->requestToUser->id)]) }}" class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">View my Profile</a>
                                <button class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">Report This Profile</button>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>

                <div style="display: none;" id="sentDiv" class="w-full px-6 pb-[60px] xl:pb-32">
                    @foreach ($my_likes_requests as $like_notification)
                    @php

                      $profileImageData = getProfileImage($like_notification->myrequestToUser);

                      if($like_notification->myrequestToUser->userDetails){
                        if($like_notification->myrequestToUser->userDetails->languages != null){

                            $language=App\Models\ProfileAttributeMeta::where('id', $like_notification->myrequestToUser->userDetails->languages)->first();

                        }
                        else{
                            $language=null;
                        }
                            } else{
                            $language=null;
                        }

                    @endphp

                    <div class="flex flex-col w-full p-5 gap-5 pb-10 lg:pb-20">
                        <div class="border border-gray-300 rounded-[5px]">
                            <div class="border border-gray-300">
                                <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                    <div class="flex flex-col gap-1">
                                        <div class="text-sm font-semibold">You recived an like from {{$like_notification->myrequestToUser->name}}</div>
                                    </div>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ formatDate($like_notification->created_at)}}</p>
                                </div>
                            </div>
                            <div style="padding: 15px;" class="flex items-center gap-5">
                                <div class="w-16 h-16 rounded-full">
                                    <picture>
                                        <img src="{{ $profileImageData['image_url'] }}" alt="image" loading="lazy" class="w-f rounded-[5px] {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}">
                                    </picture>
                                </div>
                                @if($profileImageData['is_blurred'])
                                    <a style="margin-top: -45px; margin-left: 20px;" href="#" class="ask-for-image-link absolute inset-0 flex justify-center items-center bg-black bg-opacity-50 rounded-[5px] text-white text-xs sm:text-sm font-semibold hover:bg-opacity-70 transition-all"
                                    data-user-id="{{ $like_notification->myrequestToUser->id }}"
                                    data-image-id="{{ $profileImageData['image_url'] }}">
                                        <i class="fas fa-image"></i> Ask for Image
                                    </a>
                                 @endif
                                <div class="text-black w-full">
                                    <!-- =upper-text= -->
                                    <div class="flex items-center gap-3.5 justify-between flex-wrap">
                                        <div class="flex flex-col gap-1">
                                            <div class="lg-sm font-semibold text-black">{{$like_notification->myrequestToUser->name}}<span class="text-sm text-gray-400 ml-2">&#x2705;</span></div>
                                            <div class="text-sm text-green-500"><span class="text-gray-400">&#x2709;</span> Online 1d ago</div>
                                        </div>
                                    </div>


                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">{{ $like_notification->myrequestToUser->age }} Years Old|@if($like_notification->myrequestToUser->userDetails)
                                        @if($like_notification->myrequestToUser->userDetails->language)
                                        {{ $language->name}}
                                        @else
                                            N/A
                                        @endif
                                        @else
                                        N/A
                                    @endif</p>
                                    <p class="my-3 text-[13px] font-normal hidden xs:block xs:max-w-[550px] md:max-w-none">✉ Hi, it is nice connecting with you. I liked your profile and would like to take this forward.</p>

                                </div>



                                @if ($like_notification->status == 1)
                                <div class="my-3 text-[13px] font-normal ">
                                    <a href="{{ route('messenger', ['id' => $like_notification->myrequestToUser->id]) }}"
                                       class="py-2.5 px-4 sm:px-5 rounded-[5px] bg-blue-color text-white font-semibold duration-300 hover:bg-red-color whitespace-nowrap text-sm">
                                        {{ translate('Send Message') }}
                                    </a>
                                </div>
                                @elseif ($like_notification->status == '0')

                                    <a style="background: red;" href="#"
                                    class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white">
                                        <span class="text-sm font-semibold">Decline</span>
                                    </a>

                                    @elseif ($like_notification->status == null )

                                        <a href="#"
                                        class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black">
                                            <span class="text-sm font-semibold">Pending</span>
                                        </a>
                                        @endif


                            </div>

                            <div class="flex gap-3 mb-3 mt-5 mr-10">
                                <a href="{{ route('partner_profile', ['id' => encrypt($like_notification->myrequestToUser->id)]) }}" class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">View my Profile</a>
                                <button class="bg-white hover:bg-gray-100 text-sm font-semibold py-2 px-4 border border-gray-300 rounded-[5px]  shadow">Report This Profile</button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>


                <div style="display: none;" id="requestDiv" class="w-full px-6 pb-[60px] xl:pb-32">

                </div>


                <div style="display: none;" id="trashDiv" class="w-full px-6 pb-[60px] xl:pb-32">

                </div>

            {{-- </div> --}}


        </div>


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


@endsection

@push('scripts')

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



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

    const acceptedBtn = document.getElementById('acceptedBtn');

    const sentBtn = document.getElementById('sentBtn');
    const requestBtn = document.getElementById('requestBtn');
    const trashBtn = document.getElementById('trashBtn');


    const recviedDiv = document.getElementById('recviedDiv');
    const acceptedDiv = document.getElementById('acceptedDiv');
    const sentDiv = document.getElementById('sentDiv');
    const requestDiv = document.getElementById('requestDiv');
    const trashDiv = document.getElementById('trashDiv');


    // Set the default active tab based on the session variable
    let activeTab = "{{ session('showTab', 'recvied') }}"; // Default to 'editProfile' if not set

    // Function to update the visibility of all sections
    function updateTabVisibility() {

        // Hide all sections
        recviedDiv.style.display = 'none';
        acceptedDiv.style.display = 'none';
        sentDiv.style.display = 'none';
        requestDiv.style.display = 'none';
        trashDiv.style.display = 'none';

        // Show the active section
        if (activeTab === 'recvied') {
            recviedDiv.style.display = 'block';
        } else if (activeTab === 'accepted') {
            acceptedDiv.style.display = 'block';
        } else if (activeTab === 'sent') {
            sentDiv.style.display = 'block';
        } else if (activeTab === 'request') {
            requestDiv.style.display = 'block';
        } else if (activeTab === 'trash') {
            trashDiv.style.display = 'block';
        }
    }

    // Function to update tab styles
    function updateTabStyles() {
        // Reset all button styles
        const allButtons = [recviedBtn, acceptedBtn, sentBtn, requestBtn, trashBtn];
        allButtons.forEach(btn => {
            btn.classList.remove('bg-[rgba(53,118,175,0.10)]');
            btn.classList.add('duration-300', 'hover:bg-[rgba(53,118,175,0.10)]');
        });

        // Highlight the active button
        if (activeTab === 'recvied') {
            recviedBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'accepted') {
            acceptedBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'sent') {
            sentBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'request') {
            requestBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        } else if (activeTab === 'trash') {
            trashBtn.classList.add('bg-[rgba(53,118,175,0.10)]');
        }
    }

    // Event listener for each button
    recviedBtn.addEventListener('click', function () {
        activeTab = 'recvied';
        updateTabVisibility();
        updateTabStyles();
    });

    acceptedBtn.addEventListener('click', function () {
        activeTab = 'accepted';
        updateTabVisibility();
        updateTabStyles();
    });

    sentBtn.addEventListener('click', function () {
        activeTab = 'sent';
        updateTabVisibility();
        updateTabStyles();
    });

    requestBtn.addEventListener('click', function () {
        activeTab = 'request';
        updateTabVisibility();
        updateTabStyles();
    });

    trashBtn.addEventListener('click', function () {
        activeTab = 'trash';
        updateTabVisibility();
        updateTabStyles();
    });

    // Initialize the tab visibility and styles
    updateTabVisibility();
    updateTabStyles();
    });
</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;
}

</style>