@extends('frontend.layouts.UserMain')

<title>{{ translate('Humsafar - Location') }}</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 pb-[60px] flex items-start gap-5 mt-6 relative flex-col-reverse sm:flex-row">
                <!-- =left-part= -->
                <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">

                            @foreach($matches as $match)
                            @php

                            $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 profile" data-id="{{ $match->id }}" data-lat="{{ $match->latitude }}" data-lng="{{ $match->longitude }}">
                                <picture>
                                    <img src="{{ $profileImageData['image_url'] }}" alt="image" class="w-full group-hover:scale-105 duration-300 {{ $profileImageData['is_blurred'] ? 'blur-image' : '' }}" loading="lazy">
                                </picture>
                                <h5 class="absolute left-5 bottom-5 text-white text-base font-normal capitalize">{{ $match->first_name }} {{ $match->last_name }}</h5>
                                @if($profileImageData['is_blurred'])
                                <a style="margin-left:35px; margin-top: 50px;" 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="{{ $match->id }}"
                                data-image-id="{{ $profileImageData['image_url'] }}">
                                    <i class="fas fa-image"></i> Ask for Image
                                </a>
                                  @endif
                            </a>
                        @endforeach



                        </div>
                    </div>

                    <!-- Pagination -->
                    @if($matches!=null)
                        <div class="flex items-center justify-center gap-4 py-7 lg:pt-20 lg:pb-8">
                            {{ $matches->links() }}
                        </div>
                    @endif
                </div>
                <!-- =right-part= -->

                <!-- Map Section -->
                <div class="w-full h-[300px] sm:w-[250px] sm:h-[600px] md:w-[300px] lg:w-[350px] 2xl:w-[400px] xl:h-[700px] sm:sticky right-0 top-0 before:rounded-[5px] flex flex-col items-center justify-center sm:block">

                    <!-- Search Input and Distance Dropdown -->
                    <div class="mt-4 relative w-full px-2">
                        <input
                            type="text"
                            id="locationInput"
                            placeholder="Search for a location"
                            class="border p-2 rounded rounded-lg w-full sm:w-auto"
                        />
                        <!-- Dropdown -->
                        <div class="flex flex-col sm:flex-row items-center justify-between mb-4">
                            <label for="distanceSelect" class="text-sm font-semibold mb-2 sm:mb-0 sm:mr-2">
                                Select Distance:
                            </label>
                            <select id="distanceSelect" class="border p-2 rounded rounded-lg w-1/2 sm:w-auto">
                                <option value="50" selected>50 miles</option>
                                <option value="10">10 miles</option>
                                <option value="25">25 miles</option>
                                <option value="100">100 miles</option>
                            </select>
                        </div>
                        <div id="suggestionsss" class="absolute z-10 bg-white border border-gray-300 w-full hidden"></div>
                    </div>

                    <!-- Map -->
                    <div id="map" class="w-full h-full rounded-lg sm:h-full"></div>
                </div>


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

@endsection


@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Include Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

<!-- Include Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>


<script>

var nearbyUsersRoute = "{{ route('users.nearby') }}";
    var map = L.map('map').setView([0, 0], 2); // Set the initial view to coordinates (0, 0) and zoom level 2

    // Add OpenStreetMap tile layer
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Marker variable
    var marker;

    // Function to fetch location suggestions
    document.getElementById('locationInput').addEventListener('input', function() {
        var location = this.value;
        var suggestionsDiv = document.getElementById('suggestionsss');
        suggestionsDiv.innerHTML = ''; // Clear previous suggestions

        if (location.length > 2) { // Start searching after 2 characters
            fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(location)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.length > 0) {
                        suggestionsDiv.classList.remove('hidden'); // Show suggestions
                        data.forEach(item => {
                            var suggestionItem = document.createElement('div');
                            suggestionItem.textContent = item.display_name;
                            suggestionItem.classList.add('p-2', 'cursor-pointer', 'hover:bg-gray-200');
                            suggestionItem.onclick = function() {
                                selectLocation(item);
                            };
                            suggestionsDiv.appendChild(suggestionItem);
                        });
                    } else {
                        suggestionsDiv.classList.add('hidden'); // Hide suggestions if no results
                    }
                })
                .catch(error => {
                    console.error('Error fetching location:', error);
                });
        } else {
            suggestionsDiv.classList.add('hidden'); // Hide suggestions if input is too short
        }
    });

    // Function to select a location from suggestions
  // Function to select a location from suggestions
function selectLocation(item) {
    var lat = item.lat;
    var lon = item.lon;
  // Get the selected distance

    // Set the map view to the selected location
    map.setView([lat, lon], 13);

    // If a marker already exists, remove it
    if (marker) {
        map.removeLayer(marker);
    }

    // Add a new draggable marker
    marker = L.marker([lat, lon], { draggable: true }).addTo(map);
    marker.bindPopup(`Location: ${item.display_name}<br>Latitude: ${lat}<br>Longitude: ${lon}`).openPopup();

    // Log the latitude and longitude
    console.log(`Latitude: ${lat}, Longitude: ${lon}`);

    // Clear the input and hide suggestions
    document.getElementById('locationInput').value = item.display_name;
    document.getElementById('suggestionsss').classList.add('hidden');

    // Update latitude and longitude on marker drag
    marker.on('dragend', function(e) {
        var position = marker.getLatLng();
        console.log(`New Latitude: ${position.lat}, New Longitude: ${position.lng}`);
        marker.setPopupContent(`Location: ${item.display_name}<br>Latitude: ${position.lat}<br>Longitude: ${position.lng}`).openPopup();

        // Make AJAX call to fetch users within 1 km of the new position
        fetchUsersWithinRadius(position.lat, position.lng);
    });

    // Make AJAX call to fetch users within 1 km of the selected position
    fetchUsersWithinRadius(lat, lon);
}

function fetchUsersWithinRadius(lat, lon) {
    var selectedDistance = document.getElementById('distanceSelect').value;
    fetch(`${nearbyUsersRoute}?lat=${lat}&lng=${lon}&distance=${selectedDistance}`)
        .then(response => response.json())
        .then(data => {
            // Clear existing users
            const userContainer = document.querySelector('.grid');
            userContainer.innerHTML = '';

            // Populate the user container with new users

            // Populate the user container with new users
            data.users.forEach(user => {
                const userElement = document.createElement('a');
                userElement.href = `{{ route('partner_profile', ['id' => ':id']) }}`.replace(':id', user.id);
                userElement.className = 'relative rounded-[5px] overflow-hidden max-w-[400px] group w-full profile';
                userElement.setAttribute('data-id', user.id);
                userElement.setAttribute('data-lat', user.latitude);
                userElement.setAttribute('data-lng', user.longitude);

                console.log(user);

                // Create the inner HTML structure
                userElement.innerHTML = `
                    <picture>
                        <img src="${user.image_url}" alt="image" class="w-full group-hover:scale-105 duration-300 ${user.is_blurred ? 'blur-image' : ''}" loading="lazy">
                    </picture>
                    <h5 class="absolute left-5 bottom-5 text-white text-base font-normal capitalize">${user.first_name} ${user.last_name}</h5>
                    ${user.is_blurred ? `
                        <a style="margin-left:35px; margin-top: 50px;" 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="${user.id}"
                        data-image-id="${user.image_url}">
                            <i class="fas fa-image"></i> Ask for Image
                        </a>
                    ` : ''}
                `;

                // Append the user element to the container
                userContainer.appendChild(userElement);
            });
        })
        .catch(error => {
            console.error('Error fetching nearby users:', error);
        });
}

    // Hide suggestions when clicking outside
    document.addEventListener('click', function(event) {
        var suggestionsDiv = document.getElementById('suggestionsss');
        if (!event.target.closest('#locationInput')) {
            suggestionsDiv.classList.add('hidden');
        }
    });
</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>




<style>
    .blur-image {
   filter: blur(10px);
   transition: filter 0.3s ease;
}
.blur-image:hover {
   filter: blur(10px);
   cursor: not-allowed;
}

   .swal-black-button {
   background-color: black !important;
   color: white !important;
   border: none !important;
   margin: 4px !important;
   padding: 10px 20px !important;
   font-size: 16px !important;
   border-radius: 5px !important;
   box-shadow: none !important;
   cursor: pointer;
}

.swal-black-button:hover {
   background-color: #333 !important;
}

/* 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;
}

#suggestionsss {
        max-height: 200px;
        overflow-y: auto;
        position: sticky;
    }
    .footer{
        margin-top: 100px !important;
    }
</style>

<style>
    @media (max-width: 640px) {
    #map {
        height: 400px; /* Adjust map height for mobile */
    }
    #distanceSelect {
        width: 100%; /* Ensure dropdown spans full width */
    }
    }
</style>

@endpush