@include('Admin.layouts.app')
@include('Admin.layouts.sidebar')
@section('title', 'Map Users')

<style>
    #map {
        height: 600px;
        width: 100%;
    }
</style>

<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-body">
            <div id="map"></div>
        </div>
    </div>
</div>

@include('Admin.layouts.footer')
@include('Admin.layouts.modal')

<!-- Load the Google Maps JavaScript API -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAi_huwUKKdn4NQ9OVEitIinkR2Me8ncbU"></script>

<script>
    function initMap() {
        // Center map initially
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 6,
            center: { lat: 23.8859, lng: 45.0792 } // Saudi Arabia Center
        });

        var users = @json($users);

        users.forEach(function(user) {
            if (user.latitude && user.longitude) {
                var marker = new google.maps.Marker({
                    position: { lat: parseFloat(user.latitude), lng: parseFloat(user.longitude) },
                    map: map,
                    title: user.name
                });

                // Add InfoWindow (popup)
                var infowindow = new google.maps.InfoWindow({
                    content: `<strong>${user.name}</strong>`
                });

                marker.addListener('click', function() {
                    infowindow.open(map, marker);
                });
            }
        });
    }

    // Initialize map after the page loads
    window.onload = initMap;
</script>