@extends('frontend.layouts.app')

@section('title', 'Advance Search Results')

@section('content')

    <!-- Main Content -->

    <section class="mt-[8rem]">
        @if (session('searchFields'))
            <div class="flex justify-center mb-4">
                <div class="alert bg-[#FFEBED] text-red-800 text-lg px-6 py-2 rounded-lg shadow-md inline-block mb-2">
                    <div class="flex items-center space-x-2">
                        <!-- Icon -->
                        <svg class="w-[40px] h-6 text-red-800" fill="#9b1c1c" xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 512 512">
                            <path
                                d="M3.9 54.9C10.5 40.9 24.5 32 40 32l432 0c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9 320 448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6l0-79.1L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z" />
                        </svg>
                        <!-- Message -->
                        <span>
                            <strong>Filters Applied:</strong> {{ session('searchFields') }}
                        </span>
                    </div>
                </div>
            </div>
        @endif
        <div class="max-w-[1320px] relative mx-auto bg-[#FFEBED] lg:p-12 p-5 lg:pt-8">
            <div class="min-h-screen p-4 pb-5 rounded-lg bg_odani">
                <section>
                    <div class="text-sm font-semibold">
                        Advance Search Profile Result
                    </div>

                    <div class="mt-2 mb-4 border-t-[1px] border-black"></div>
                    <div
                        class="flex items-center justify-center max-w-full mx-auto mb-4 rounded-full sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl">
                        @include('_message')
                    </div>
                    <div class="relative grid grid-cols-1 lg:grid-cols-3 gap-x-5">
                        @forelse ($results as $result)
                            <div class="relative p-4 mb-4 res_card">
                                <img src="{{ $result->favourite_id ? url('assets/image/liked.png') : url('assets/image/like.png') }}"
                                    alt="" class="w-[20px] cursor-pointer absolute top-[14px] right-[14px]"
                                    onclick="openModal({{ $result->userId }})">
                                <div class="flex gap-3">
                                    @if (!empty($userPhotos[$result->userId]))
                                        <img src="{{ $userPhotos[$result->userId] }}" alt="Profile Photo"
                                            class="w-[130px] border-white border-[6px]">
                                    @else
                                        <img src="{{ url('Images/user.png') }}" alt="Default Profile"
                                            class="w-[130px] border-white border-[6px]">
                                    @endif

                                    <!-- User Information -->
                                    <ul class="flex flex-col gap-3 mt-6 text-sm lg:mt-4">
                                        <li><strong>Name :</strong> {{ $result->name ?? 'N/A' }}</li>
                                        <li><strong>Age :</strong> {{ $result->age ?? 'N/A' }} Yrs
                                        </li>
                                        <li><strong>Gender :</strong> {{ $result->gender ?? 'N/A' }}
                                        </li>
                                        <li><a href="{{ url('search/partner/profile/' . Crypt::encrypt($result->userId) . '/details') }}"
                                                class="text-[#385FFD] underline">View Profile</a></li>
                                    </ul>
                                </div>
                            </div>
                        @empty
                            <div class="py-4 text-center text-gray-500">No results found.</div>
                        @endforelse
                    </div>
                </section>
                <div class="px-4 py-2">
                    {{ $results->links() }}
                </div>
                <div class="grid p-3 mt-5 place-content-center">
                    <a class="bg-[#F42C56] text-white p-3 text-center px-8 rounded-lg"
                        href="{{ url('user/partner/search') }}">Back to Search</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Confirmation Modal -->
    <div id="confirmationModal"
        class="fixed inset-0 z-50 flex items-center justify-center hidden bg-gray-800 bg-opacity-50">
        <div class="w-full max-w-full p-4 ml-2 mr-2 bg-white rounded-md sm:w-1/3 md:w-1/4 lg:w-1/4 sm:mx-4">
            <h3 class="mb-4 text-lg font-semibold">Confirm adding to Favorites?</h3>
            <div class="flex justify-center gap-4">
                <button id="cancelButton" class="p-3 px-8 text-center text-white bg-gray-500 rounded-lg">Cancel</button>
                <button id="confirmButton" class="bg-[#F42C56] text-white p-3 text-center px-8 rounded-lg">Confirm</button>
            </div>
        </div>
    </div>



    @push('scripts')
        <script>
            let receiverId = null;

            function openModal(id) {
                receiverId = id; // Store the receiver ID
                document.getElementById('confirmationModal').classList.remove('hidden');
            }

            document.getElementById('confirmButton').onclick = function() {
                if (receiverId) {
                    fetch('{{ route('favourites.store') }}', {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            },
                            body: JSON.stringify({
                                user_id: '{{ Auth::id() }}',
                                favourite_id: receiverId,
                            }),
                        })
                        .then(response => response.json())
                        .then(data => {
                            document.getElementById('confirmationModal').classList.add('hidden');

                            if (data.success) {
                                window.location.reload();
                            } else {
                                window.location.reload();
                            }
                        })
                        .catch(error => {
                            console.error("Error:", error);
                            document.getElementById('confirmationModal').classList.add('hidden');
                            alert("An error occurred. Please try again.");
                        });
                }
            };

            document.getElementById('cancelButton').onclick = function() {
                document.getElementById('confirmationModal').classList.add('hidden');
            };
        </script>
    @endpush

@endsection