@if(Auth::user()->userTypeId==1)
    @include('user-web.layouts.head')
    @include('user-web.layouts.header')
@else
    @include('business.layouts.head')
    @include('business.layouts.header')
@endif
<style>
    .carousel-control-next-icon, .carousel-control-prev-icon {
    width: 20px !important;
    height: 20px !important;
    background-position: center !important;
    background-size: 12px !important;
    background-color: #000000;
    border-radius: 60px;
    border: 1px solid #000;
}
.carousel-control-prev {
    left: -3px !important;
}
.gm-style .gm-style-iw-c {
    max-width: 220px !important;
    padding-top: 40px !important;
}
.carousel-inner {
    width: calc(100% - 50px) !important;
    margin: 0 auto;
}
.gm-style-iw-chr {
    position: absolute;
    top: 0;
    right: 0;
}



</style>

<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://maps.googleapis.com/maps/api/js?key={{env('GOOGLE_API_KEY')}}&libraries=places&callback=initMap" async defer></script>
<script type="text/javascript">
$(document).ready(function(){
   getLocation();
   $('.clearAll').click(function(){
        window.location.href="env('APPLICATION_URL')hapiverse/public/places";
   });
});

var map;

function initMap() {
    lat_=$('#latitude').val();
    long_=$('#longitude').val();
    var myLatLng = {lat: -25.363, lng: 131.044};

    var pyrmont = {
        lat: parseFloat(lat_),
        lng: parseFloat(long_)
    };
    // console.log(pyrmont);
    if (navigator.geolocation) {
        try {
            navigator.geolocation.getCurrentPosition(function(showPosition) {
                 console.log(showPosition.coords.latitude);
                 console.log(showPosition.coords.longitude);
                pyrmont = {
                    lat: showPosition.coords.latitude,
                    lng: showPosition.coords.longitude
                };
            });
        } catch (err) {

        }
    }

    map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 9,
        draggable: true,
    });

    var marker = new google.maps.Marker({
        position: pyrmont,
        map: map,
        title: 'Hello World!'
    });

    // Add a click event listener to add new markers
    map.addListener('click', function(e) {
        var description = prompt("Enter place name for this marker:");
        if (description !== null) {
            var modal = document.getElementById('imageModal');
            modal.style.display = 'block';
        }


        var modal = document.getElementById('imageModal');
        var closeBtn = document.getElementsByClassName('close')[0];
        var imageInput = document.getElementById('imageInput');
        var addMarkerBtn = document.getElementById('addMarkerBtn');

        closeBtn.onclick = function() {
            modal.style.display = 'none';
        };


        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        };

        addMarkerBtn.onclick = function() {
            if (imageInput.files.length > 0) {
                var files = imageInput.files;
                var formData = new FormData();

                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    formData.append('images[]', file);
                }


                formData.append('latitude', e.latLng.lat());
                formData.append('longitude', e.latLng.lng());
                formData.append('address', description);

                // Send FormData with Axios
                axios.post('/markers', formData, {
                    headers: {
                        'Content-Type': 'multipart/form-data', // Important for uploading files
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                }).then(response => {
                    // Optionally, you can handle the response here
                }).catch(error => {
                    console.error('Error saving marker:', error);
                    // Handle error if needed
                });

                // Hide the modal
                modal.style.display = 'none';

                // Clear the input for the next use
                imageInput.value = '';
            } else {
                alert('Please select at least one image.');
            }
        };


    });
    var currentUserId = document.getElementById('filters_app').dataset.userId;
    var imagePath = document.getElementById('filters_app').dataset.img;

    setTimeout(function() {
    // Fetch and display existing markers from the backend
    axios.get('/markers')
        .then(response => {
            response.data.forEach(markerData => {
                var marker = new google.maps.Marker({
                    position: { lat: parseFloat(markerData.latitude), lng: parseFloat(markerData.longitude) },
                    map: map,
                    title: markerData.address
                });

                var infoWindowContent = `<div>${markerData.address}</div>`;
                if (markerData.images && markerData.images.length > 0) {



                    const uniqueCarouselId = `carousel-${markerData.placeId}`; // Unique ID for each carousel
                    infoWindowContent += `<div id="${uniqueCarouselId}" class="carousel slide" data-ride="carousel">`;
                    infoWindowContent += '<div class="carousel-inner">';

                    markerData.images.forEach((image, index) => {

                        const imagePathFull = `${imagePath}/${image}`; // Full path to the image
                        infoWindowContent += `<div class="carousel-item ${index === 0 ? 'active' : ''}">
                            <span data-fullimage="${imagePathFull}" data-lightbox="lightbox-${markerData.placeId}" data-title="${markerData.address}">
                                <img src="${imagePathFull}" class="d-block w-100" alt="Image ${index + 1}">
                            </span>
                        </div>`;
                    });

                    infoWindowContent += '</div>'; // Closing carousel-inner
                    infoWindowContent += `<a class="carousel-control-prev" href="#${uniqueCarouselId}" role="button" data-slide="prev">`;
                    infoWindowContent += '<span class="carousel-control-prev-icon" aria-hidden="true"></span>';
                    infoWindowContent += '<span class="sr-only">Previous</span>';
                    infoWindowContent += '</a>';
                    infoWindowContent += `<a class="carousel-control-next" href="#${uniqueCarouselId}" role="button" data-slide="next">`;
                    infoWindowContent += '<span class="carousel-control-next-icon" aria-hidden="true"></span>';
                    infoWindowContent += '<span class="sr-only">Next</span>';
                    infoWindowContent += '</a>';
                    infoWindowContent += '</div>'; // Closing carousel div
                }



                if (markerData.userId == currentUserId) {
                    console.log('marker data',markerData);
                    infoWindowContent += `<br><button data-placeId="${markerData.placeId}" class="share_location_with_friends">Share with Friends</button>`;
                }

                var infoWindow = new google.maps.InfoWindow({
                    content: infoWindowContent
                });

                // Open the info window on marker click
                marker.addListener('click', function() {
                    infoWindow.open(map, marker);

                });
            });
        })
        .catch(error => {
            console.error('Error fetching markers:', error);
        });
    },3000);

    var service = new google.maps.places.PlacesService(map);
    var radius=4000;
    @if(session()->has('distance'))
        radius='{{@Session::get("distance")}}';
    @endif
    console.log(radius);
    service.nearbySearch({
            location: pyrmont,
            radius: radius,
            type: ['hospital']
        },
        function(results, status, pagination) {
            if (status !== 'OK') return;
            $('.getHospitals').click(function(){
                createMarkers(results);
                getNextPage = pagination.hasNextPage && function() {
                    pagination.nextPage();
                };
            });
        });


}

function initMap2() {
    lat_=$('#latitude').val();
    long_=$('#longitude').val();
    var pyrmont = {
        lat: parseFloat(lat_),
        lng: parseFloat(long_)
    };
    if (navigator.geolocation) {
        try {
            navigator.geolocation.getCurrentPosition(function(position) {
                var pyrmont = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
            });
        } catch (err) {

        }
    }
    map = new google.maps.Map(document.getElementById('map'), {
        center: pyrmont,
        zoom: 30
    });


    var service = new google.maps.places.PlacesService(map);

    service.nearbySearch({
            location: pyrmont,
            radius: 4000,
            type: ['restaurant']
        },
        function(results, status, pagination) {
            if (status !== 'OK') return;
            $('.getResturants').click(function(){
                createMarkers(results);
                getNextPage = pagination.hasNextPage && function() {
                    pagination.nextPage();
                };
            });
        });
}
function createMarkers(places) {
    var bounds = new google.maps.LatLngBounds();
    var latlng = new google.maps.LatLng(23.8701334, 90.2713944);
    for (var i = 0, place; place = places[i]; i++) {
        var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(25, 25)
        };
        // var locations = [[new google.maps.LatLng(0, 0), places[i].name, 'Infowindow content for Marker 1']];
        var marker = new google.maps.Marker({
            map: map,
            title: place.name,
            position: place.geometry.location,
            draggable: true,
        });
        // console.log(place.geometry);
        var sunCircle = {
            strokeColor: "hwb(242deg 52% 23%)",
            strokeOpacity: 0.2,
            strokeWeight: 1,
            fillColor: "hwb(242deg 52% 23%)",
            fillOpacity: 0.15,
            map: map,
            center: latlng,
            radius: 4000 // in meters
        };
        cityCircle = new google.maps.Circle(sunCircle);
        cityCircle.bindTo('center', marker, 'position');
        var infoWindow = new google.maps.InfoWindow();
        bounds.extend(place.geometry.location);
        google.maps.event.addListener(marker, "click", function (e) {
            var location = e.latLng;
            alert(location);
            infoWindow.setContent("<div style ='width:200px;min-height:40px'> Latitude:" + location.lat() + "<br/> Longitude:" + location.lng() + "</div>");
            infoWindow.open(map, marker);
        });
    }
    map.fitBounds(bounds);
}
function getLocation(){
    if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    }
    else{

    }
}
function showPosition(position){

  lat=position.coords.latitude;
  lon=position.coords.longitude;

  latlon=new google.maps.LatLng(lat, lon)
  mapholder=document.getElementById('map')
  mapholder.style.height='250px';
  mapholder.style.width='100%';
  $('#latitude').val(lat);
  $('#longitude').val(lon);
  var myOptions={
  center:latlon,zoom:14,
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("map"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here how i can help you!",draggable: false});
}
function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation.");
            break;
        case error.POSITION_UNAVAILABLE:
            alert("Location information is unavailable.");
            break;
        case error.TIMEOUT:
            alert("The request to get user location timed out.");
            break;
        case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.");
            break;
    }
}





    // Add event listener to handle sharing
    document.getElementById('shareMarkerForm').addEventListener('submit', function(e) {
        e.preventDefault();

        var markerId = document.getElementById('markerIdToShare').value;
        var email = document.getElementById('shareWithEmail').value;

        // Send the sharing request to the backend
        axios.post('/share-marker', {
            marker_id: markerId,
            email: email
        }, {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        }).then(response => {
            alert('Marker shared successfully!');
        }).catch(error => {
            console.error('Error sharing marker:', error);
        });
    });

    // Function to open the share form with the selected marker ID
    function openShareForm(markerId) {

        document.getElementById('markerIdToShare').value = markerId;
        document.getElementById('shareMarkerForm').style.display = 'block';
    }

</script>
<div class="main-content" >
    <section class="home">
        <div class="container">
            <div class="row">
                @if(Auth::user()->userTypeId==1)
                    @include('user-web.layouts.sidebar')
                @else
                    @include('business.layouts.sidebar')
                @endif
                <div class="col-lg-9">
                    <div class="card business-single-card" id="filters_app" data-user-id="{{ Auth::user()->getUserDetail->userId }}" data-img="{{asset('images')}}">
                        <div class="card-body">
                            <input type="hidden" id="latitude" value="{{ Auth::user()->getUserDetail->lat }}">
                            <input type="hidden" id="longitude" value="{{ Auth::user()->getUserDetail->long }}">
                            <div class="d-flex align-items-center gap-3 mb-3">
                            <button class="btn btn-primary btn-small  getHospitals" style="width: fit-content;" type="button" onclick="initMap()"><i class="fas fa-hospital me-2"></i>Hospitals</button>
                            <button class="btn btn-primary btn-small getResturants" style="width: fit-content;" type="button" onclick="initMap2()"><i class="fas fa-hospital me-2"></i>Resturants</button>
                            <button class="btn btn-primary btn-small" style="width: fit-content;" type="button" onclick="getLocation()"><i class="fas fa-hospital me-2"></i>Get Loc</button>
                            <button type="button" class="btn btn-primary btn-small" data-bs-toggle="modal" data-bs-target="#mapFilters">Map Filter</button>
                        </div>
                            <div id="map"></div>

                            <div id="imageModal" class="modal">
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <h2>Select an Image for the Marker</h2>
                                    <input type="file" id="imageInput" accept="image/*" multiple>
                                    <button id="addMarkerBtn">Add Marker</button>
                                </div>
                            </div>
                        </div>
                        <div class="modal fade" id="shareLocationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="shareLocationModalLabel">Share Location</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                                <div class="modal-body">
                                    <input type="hidden" id="markerIdToShare">
                                    <select class="friends_list form-control" id="friends_list"  name="friends_list">
                                        @foreach($friends as $friend)
                                        <option value="{{$friend->friend->userId}}">{{ $friend->friend->userName}}</option>
                                        @endforeach
                                    </select>
                                    <!-- <input type="email" id="shareWithEmail" placeholder="Friend's email" required> -->
                                </div>
                                <div class="modal-footer">
                                    <button type="button" id="share_location" class="btn btn-primary">Share Location</button>
                                </div>
                                </div>
                            </div>
                            </div>

                    </div>
                </div>

            </div>
        </div>
    </section>
</div>
@if(Auth::user()->userTypeId==1)
    @include('user-web.layouts.footer')
@else
    @include('business.layouts.footer')
@endif



<style>
#map {
  height: 350px !important;
  margin: 10px auto;
  width: 800px;
}
</style>
<div class="modal fade" id="mapFilters" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            <div class="modal-body">
                <div class="card shadow-none">
                    <form action="{{url('/placesStore')}}" method="POST">
                        @csrf
                        <div class="input-wrapper">
                            <input type="text" class="form-control" placeholder="Where are you going?">
                        </div>
                        <h3 class="card-title">Sort by</h3>
                        <div class="input-wrapper custom-btn-group mb-3">
                            <button type="button" class="btn btn-primary">Rating</button>
                            <button type="button" class="btn btn-primary">Distance</button>
                            <button type="button" class="btn btn-primary">Risk</button>
                        </div>
                        <h3 class="card-title">Rating</h3>
                        <div class="input-wrapper custom-btn-group mb-3">
                            <button type="button" class="btn btn-primary">3.0</button>
                            <button type="button" class="btn btn-primary">3.5</button>
                            <button type="button" class="btn btn-primary">4.0</button>
                            <button type="button" class="btn btn-primary">4.5</button>
                            <button type="button" class="btn btn-primary">5.0</button>
                        </div>
                        <h3 class="card-title">Distance in km</h3>
                        <div class="input-wrapper mb-3">
                            <div class="slider-box">
                                <input class="form-control" type="text" id="priceRange" name="distance" value="{{@Session::get('distance')}}">
                                <div id="price-range" class="slider"></div>
                            </div>
                        </div>
                        <h3 class="card-title">Covid Risk Score</h3>
                        <div class="input-wrapper mb-3">
                            <div class="slider-box">
                                <input class="form-control" type="text" id="covidRisk" >
                                <div id="covid-risk" class="slider"></div>
                            </div>
                        </div>
                        <div class="custom-btn-group">
                            <button class="btn btn-light w-100 clearAll" type="button">Clear all</button>
                            <button class="btn btn-primary w-100" type="submit" name="results" >View results</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>