@extends('frontend.layouts.UserMain')

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

<style>
    /* Base style for all tabs */
    .tab-link {
      position: relative;
      text-decoration: none;
    }

    /* Hover effect */
    .tab-link:hover {
      color: #ff0000; /* red color on hover */
    }

    .tab-link.selected::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      bottom: -13px;
      background-color: #ff0000; /* red color */
    }
  </style>
@section('content')


<section class="flex-1 w-full relative">
    <div class="flex items-start w-full">
        <!-- ===right-all-content/main-wrapper== -->
        <div class="flex-1 bg-white">
            <!-- =header-section= -->

            @include('frontend.user.layouts.header')

            <style>
                @media (max-width: 768px) {
                    .w-full.mt-5 {
                        margin-top: 90px !important;
                    }
                }

            </style>
            <div class="w-full mt-5"></div>

            @php

            if($user->userDetails){
                if($user->userDetails->length_id != null){
                    $length=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->length_id)->first();
                }else{
                    $length=null;
                }
            }
            else{
                $length=null;
            }


            if($user->relation_status_id != null){
                $relationStatus=App\Models\ProfileAttributeMeta::where('id', $user->relation_status_id)->first();
            }
            else{
                $relationStatus=null;
            }

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


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

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


            if($user->userDetails){
                if($user->userDetails->body_type_id != null){
                    $body_type=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->body_type_id)->first();
                }
                else{
                    $body_type=null;
                }
            }
            else{
                $body_type=null;
            }

            if($user->userDetails){
                if($user->userDetails->hair_color_id != null){
                    $hair_color=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->hair_color_id)->first();
                }
                else{
                    $hair_color=null;
                }
            }
            else{
                $hair_color=null;
            }

            if($user->userDetails){
                if($user->userDetails->appearance_id != null){
                    $appearance=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->appearance_id)->first();
                }
                else{
                    $appearance=null;
                }
            }
            else{
                $appearance=null;
            }

            if($user->userDetails){
                if($user->userDetails->clothing_style_id != null){
                    $clothing_style=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->clothing_style_id)->first();
                }
                else{
                    $clothing_style=null;
                }
            }
            else{
                $clothing_style=null;
            }

            if($user->userDetails){
                if($user->userDetails->intelligence_id != null){

                    $intelligence=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->intelligence_id)->first();

                }
                else{
                    $intelligence=null;
                }
            }
            else{
                $intelligence=null;
            }

            if($user->userDetails){
                if($user->userDetails->languages != null){
                    $language=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->languages)->first();
                }
                else{
                    $language=null;
                }
            }
            else{
                $language=null;
            }

            if($user->userDetails){
                if($user->userDetails->sports != null){
                    $sports=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->sports)->first();
                }
                else{
                    $sports=null;
                }
            }
            else{
                $sports=null;
            }

            if($user->userDetails){
                if($user->userDetails->music != null){
                    $music=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->music)->first();
                }
                else{
                    $music=null;
                }
            }
            else{
                $music=null;
            }

            if($user->userDetails){
                if($user->userDetails->kitchen != null){
                    $kitchen=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->kitchen)->first();
                }
                else{
                    $kitchen=null;
                }
            }
            else{
                $kitchen=null;
            }

            if($user->userDetails){
                if($user->userDetails->reading != null){
                    $reading=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->reading)->first();
                }
                else{
                    $reading=null;
                }
            }
            else{
                $reading=null;
            }

            if($user->userDetails){
                if($user->userDetails->tv_shows != null){
                    $tv_shows=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->tv_shows)->first();
                }
                else{
                    $tv_shows=null;
                }
            }
            else{
                $tv_shows=null;
            }

            if($user->userDetails){
                if($user->userDetails->diploma_id != null){
                    $diploma=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->diploma_id)->first();
                }
                else{
                    $diploma=null;
                }
            } else{
                $diploma=null;
            }

            if($user->userDetails){
                if($user->userDetails->working_sector_id != null){

                    $working_sector=App\Models\ProfileAttributeMeta::where('id', $user->userDetails->working_sector_id)->first();

                }
                else{
                    $working_sector=null;
                }
            }
            else{
                $working_sector=null;
            }


            if($user->userDetails){
                if($user->userDetails->known_languages != null){
                    $known_languages = $user->userDetails->known_languages
                    ? App\Models\ProfileAttributeMeta::whereIn('id', explode(',', $user->userDetails->known_languages))
                        ->where('attribute_id', '19')
                        ->pluck('name')
                        ->implode(', ')
                    : null;
                }
                else{
                    $known_languages=null;
                }
            }
            else{
                $known_languages=null;
            }


            @endphp

            <div class="container mx-auto grid grid-cols-1 md:grid-cols-12 gap-6">
                <!-- First Column: Profile Card -->
                <div class="md:col-span-3 bg-white rounded-lg p-6">
                    <div class="text-center">
                        @php
                            $profileImageData = getProfileImage($user);
                            $isLiked = $likedProfiles->contains('id', $user->id);
                        
                        @endphp
                        <h1 class="text-lg font-bold">{{$user->name}}</h1>
                        {{-- <p class="text-gray-500">Female, 18, United States, New York</p> --}}
                        <p class="text-gray-500">{{$user->gender}}, {{$user->age}} {{ translate('Years Old') }} {{ $countryNames ?? '' }}</p>
                        <div class="relative w-40 h-40 mx-auto mb-4 mt-1">
                            <!-- Profile Image -->
                            <img 
                                src="{{ $profileImageData['image_url'] }}" 
                                alt="Profile Picture" 
                                class="w-full h-full rounded-lg {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}"
                            >
                            
                            <!-- Icon Overlay (conditionally shown) -->
                            @if($profileImageData['is_blurred'])
                            <div 
                                class="ask-for-image-link absolute inset-0 flex justify-center items-center"
                                data-user-id="{{ $user->id }}"
                                data-image-id="{{ $profileImageData['image_url'] }}"
                            >
                                <svg 
                                    xmlns="http://www.w3.org/2000/svg" 
                                    style="width: 40px; height: 40px;" 
                                    viewBox="0 0 576 512"
                                >
                                    <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>
                        
                        <a href="{{ route('messenger', ['id' => $user->id]) }}" class="block w-full bg-blue-color text-white py-2 mt-2 font-semibold text-sm rounded-lg duration-300 hover:bg-red-color text-center">
                            {{ translate('Send Message') }}
                        </a>
                        @if ($isLiked)
                        @else
                        <a href="#send-wink" data-id="{{ $user->id }}" class="favourite_button block w-full bg-blue-color text-white py-2 mt-2 font-semibold text-sm rounded-lg duration-300 hover:bg-red-color text-center">
                            {{ translate('Send Wink') }}
                        </a>    
                        @endif
                      

                        @if($CheckBlock==null)
                            <a href="javascript:void(0);" class="text-sm text-gray-400 mt-2 inline-block"
                            onclick="confirmDelete('{{ route('blockPartner', $user->id) }}', {{ $user->id }})">{{ translate('Block User') }}</a>
                        @else
                            <a  href="#" class="text-sm text-gray-400 mt-2 inline-block  rounded-[5px] text-black">{{ translate('Blocked User') }}</a>
                        @endif

                    </div>
                </div>

                <!-- Second Column: Details -->
                <div class="md:col-span-3 bg-white rounded-lg shadow-md p-6">

                    <h2 class="text-lg font-bold mb-4">{{ translate('Profile Details') }}</h2>
                    <div class="text-sm text-gray-600 space-y-2">
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                                    class="text-sm font-semibold truncate">{{ translate('Relation
                                    Status') }}</h4>
                                <p
                                    class="text-sm font-normal truncate">{{$relationStatus->name ?? '' }}</p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                            class="text-sm font-semibold truncate">{{ translate('Religion') }}</h4>
                        <p
                            class="text-sm font-normal truncate">{{$religion->name ?? '' }}</p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                                    class="text-sm font-semibold truncate">{{ translate('Cast') }}</h4>
                                <p
                                    class="text-sm font-normal truncate">{{$cast->name ?? 'N/A' }}</p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                                    class="text-sm font-semibold truncate">{{ translate('Sub Cast') }}</h4>
                                <p
                                    class="text-sm font-normal truncate">{{$sub_cast->name ?? 'N/A' }}</p>
                        </div>
                    </div>


                    <h2 class="text-lg font-bold mb-4 mt-7">{{ translate('Education & Career') }}</h2>
                    <div class="text-sm text-gray-600 space-y-2">
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Diploma') }}</h4>
                            <p class="text-sm font-normal truncate">{{$diploma->name ?? 'N/A'}}</p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Working Sector') }}</h4>
                            <p class="text-sm font-normal truncate">{{$working_sector->name ?? 'N/A'}}</p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Known Languages') }}</h4>
                            <p class="text-sm font-normal truncate">{{$known_languages ?? 'N/A'}}</p>
                        </div>

                    </div>
                </div>

                <!-- Third Column: About Me and Interests -->
                <div class="md:col-span-6 bg-white rounded-lg shadow-md p-6">
                    <div class="flex items-center justify-between mb-4">
                        <!-- Left Side: Heading -->
                        <h2 class="text-lg font-bold">{{ translate('About Me') }}</h2>

                        <!-- Right Side: Buttons -->
                        <div class="flex space-x-2 ml-auto">
                            <a href="#" class="flex items-center py-[6px] px-3 gap-1 bg-yellow-color rounded-[5px] text-black">
                                <span class=" text-base"><i class="ri-star-line"></i></span>
                                @if($userpackage)
                                    <span class="text-sm font-semibold">{{ translate('Vip Member') }}</span>
                                @else
                                    <span class="text-sm font-semibold">{{ translate('Free Member') }}</span>
                                @endif
                            </a>
                            <a href="#" class="flex items-center py-[6px] px-3 gap-1 bg-[#2BA346] rounded-[5px] text-white">
                                <span class="text-base"><i class="ri-verified-badge-line"></i></span>
                                <span class="text-sm font-semibold">
                                    @if($user->email_verified_at !== null)
                                        {{ translate('Verified') }}
                                    @else
                                        {{ translate('Unverified') }}
                                    @endif
                                </span>
                            </a>
                        </div>
                    </div>


                    <p class="text-sm text-gray-600 mb-4">
                        @php
                            $words = explode(' ', $user->short_description);
                            $chunks = array_chunk($words, 50);
                        @endphp

                        @foreach ($chunks as $chunk)
                            {{ implode(' ', $chunk) }}<br>
                        @endforeach
                    </p>


                    <h2 class="text-lg font-bold mb-4">{{ translate('Personal Attitude & Behaviour') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-600">
                        @if($userDetails && $userDetails->personal_attitude)


                            @foreach ($attitudeArray as $attitudeId)
                                @php
                                    // Fetch the attitude name based on the ID
                                    $personalAttitude = App\Models\ProfileAttributeMeta::find($attitudeId);
                                @endphp

                                @if ($personalAttitude)
                                    <div class="flex items-center border-b-[1px] border-b-[#dee2e6] space-x-2">
                                        <svg width="17" height="17" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <circle cx="10" cy="10" r="9" stroke="#1A73E8" stroke-width="2" fill="none" />
                                            <path d="M7 10.5L9 12.5L13 8" stroke="#1A73E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <span>{{ $personalAttitude->name }}</span>
                                    </div>
                                @endif
                            @endforeach
                        @else
                            <div class="flex items-center border-b-[1px] border-b-[#dee2e6] space-x-2">
                                {{ translate('N/A') }}
                            </div>
                        @endif
                    </div>


                    {{-- <h2 class="text-lg font-bold mb-4">{{ translate('Personal Attitude & Behaviour') }}</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-600">
                        <div class="flex items-center border-b-[1px] border-b-[#dee2e6] space-x-2">
                            <svg width="17" height="17" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="10" cy="10" r="9" stroke="#1A73E8" stroke-width="2" fill="none" />
                                <path d="M7 10.5L9 12.5L13 8" stroke="#1A73E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span>Attibute</span>
                        </div>
                        <div class="flex items-center border-b-[1px] border-b-[#dee2e6] space-x-2">
                            <svg width="17" height="17" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <circle cx="10" cy="10" r="9" stroke="#1A73E8" stroke-width="2" fill="none" />
                                <path d="M7 10.5L9 12.5L13 8" stroke="#1A73E8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                            <span>Attibute</span>
                        </div>
                    </div> --}}

                    <h2 class="text-lg font-bold mb-4 mt-5">{{ translate('What do i look like') }}?</h2>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm text-gray-600">
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold">{{ translate('Length') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if($length)
                                    {{$length->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Eye Color') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if(isset($eye_color))
                                    {{ $eye_color->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Body Type') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if($body_type)
                                    {{ $body_type->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Hair Color') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if($hair_color)
                                    {{ $hair_color->name}}
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Weight') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if($user->userDetails)
                                    @if($user->userDetails->weight)
                                        {{$user->userDetails->weight}}
                                    @else
                                        N/A
                                    @endif
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4 class="text-sm font-semibold truncate">{{ translate('Appearance') }}</h4>
                            <p class="text-sm font-normal truncate">
                                @if($user->userDetails)
                                    @if($user->userDetails->appearance_id)
                                        {{ $appearance->name}}
                                    @else
                                        N/A
                                    @endif
                                @else
                                    N/A
                                @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                            class="text-sm font-semibold truncate">{{ translate('Clothing Styles') }}</h4>
                        <p
                            class="text-sm font-normal truncate">
                            @if($user->userDetails)
                            @if($user->userDetails->clothing_style_id)
                            {{ $clothing_style->name}}
                            @else
                                N/A
                            @endif
                            @else
                                N/A
                            @endif
                        </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                                    class="text-sm font-semibold truncate">{{ translate('Intelligence') }}</h4>
                                <p
                                    class="text-sm font-normal truncate">
                                    @if($user->userDetails)
                                    @if($user->userDetails->intelligence_id)
                                    {{ $intelligence->name}}
                                    @else
                                        N/A
                                    @endif

                                    @else
                                    N/A
                                @endif
                                </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                                class="text-sm font-semibold truncate">{{ translate('Languages') }}</h4>
                            <p
                                class="text-sm font-normal truncate">
                                @if($user->userDetails)
                                @if($user->userDetails->language)
                                {{ $language->name}}
                                @else
                                    N/A
                                @endif
                                @else
                                N/A
                            @endif
                            </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                            class="text-sm font-semibold truncate">{{ translate('Drink') }}</h4>
                        <p class="text-sm font-normal truncate">
                            @if ($user->userDetails)
                            @if($user->userDetails->drinking)
                            {{ $user->userDetails->drinking }}
                            @else
                                N/A
                            @endif
                            @else
                            N/A
                            @endif

                        </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                            class="text-sm font-semibold truncate">{{ translate('Going Out') }}</h4>
                        <p
                            class="text-sm font-normal truncate">
                            @if ($user->userDetails)
                            @if($user->userDetails->going_out)
                            {{ $user->userDetails->going_out }}
                            @else
                                N/A
                            @endif
                            @else
                            N/A
                            @endif
                          </p>
                        </div>
                        <div class="flex justify-between border-b-[1px] border-b-[#dee2e6]">
                            <h4
                            class="text-sm font-semibold truncate">{{ translate('Smoke') }}</h4>
                        <p
                            class="text-sm font-normal truncate">
                            @if ($user->userDetails)
                            @if($user->userDetails->smoke)
                            {{ $user->userDetails->smoke }}
                            @else
                                N/A
                            @endif
                            @else
                            N/A
                            @endif
                        </p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</section>

@endsection


@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const tabLinks = document.querySelectorAll('.tab-link');
        const tabContents = document.querySelectorAll('.tab-content');

        tabLinks.forEach(link => {
            link.addEventListener('click', function (event) {
                event.preventDefault();

                const targetSection = this.getAttribute('data-section');

                // Hide all sections
                tabContents.forEach(content => content.classList.add('hidden'));

                // Show the target section
                document.getElementById(targetSection).classList.remove('hidden');
            });
        });
    });
</script>
<script src="https://cdn.tailwindcss.com"></script>


<script>
    // Get all tabs
    const tabs = document.querySelectorAll('.tab-link');

    // Add click event listener to each tab
    tabs.forEach(tab => {
      tab.addEventListener('click', function(event) {
        event.preventDefault(); // Prevent default link behavior

        // Remove 'selected' class from all tabs
        tabs.forEach(tab => tab.classList.remove('selected'));

        // Add 'selected' class to the clicked tab
        this.classList.add('selected');
      });
    });
  </script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    function confirmDelete(url, id) {
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, Block it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                window.location.href = `${url}`;
            }
        });
    }
</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>
    $(document).ready(function() {
        $('.favourite_button').on('click', function(event) {
       
            event.preventDefault(); 

            var matchId = $(this).data('id');
            // var matchId = $(this).closest('a').data('id');
            
            var $button = $(this); 
           

            // Send AJAX request
            $.ajax({
                url: '{{ route('favourite.toggle') }}', // Your route here
                type: 'POST',
                data: {
                    id: matchId,
                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                
                    if (response.limit) {
                      
                        Swal.fire({
                            title: "Limit Reached!",
                            text: 'You have reached the daily like limit of 5',
                            icon: "error",
                            confirmButtonText: "OK",
                            customClass: {
                                confirmButton: 'black-ok-button' 
                            }
                        });
                        
                       
                    } else {
                       
                        Swal.fire({
                            icon: 'success',
                            title: response.message,
                            confirmButtonText: 'OK',
                            customClass: {
                                confirmButton: 'black-ok-button' 
                            }
                        });
                        $button.hide();
                    }
                },
                error: function(xhr) {
                  
                    swal({
                        title: "Error!",
                        text: "An error occurred. Please try again.",
                        icon: "error",
                        button: "OK",
                    });
                }
            });
        });
    });
</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>