@extends('admin.layouts.master')
@section('page-title', 'الرئيسية')

@section('content')
    <div class="container-fluid px-1">

        <div id="map" style="width: 100%; height: 77vh"></div>

    </div>

@endsection

@section('scripts')


    <script>
        let map;
        const markers = {}; // نخزن الماركرات حسب driver_id

        function initMap() {
            const center = { lat: 34.8896, lng: 35.8866 };
            map = new google.maps.Map(document.getElementById("map"), {
                center: center,
                zoom: 13,
            });

            fetchAndUpdateMarkers();
            setInterval(fetchAndUpdateMarkers, 5000);
        }

        function fetchAndUpdateMarkers() {
            fetch('/driver-locations-json')
                .then(response => response.json())
                .then(data => {
                    const onlineDriverIds = [];

                    data.forEach(driverLoc => {
                        const id = driverLoc.driver_id;
                        onlineDriverIds.push(id);

                        const position = {
                            lat: parseFloat(driverLoc.latitude),
                            lng: parseFloat(driverLoc.longitude),
                        };

                        if (markers[id]) {
                            markers[id].setPosition(position);
                        } else {
                            const marker = new google.maps.Marker({
                                position: position,
                                map: map,
                                title: driverLoc.driver?.name || 'بدون اسم',
                            });

                            const infoWindow = new google.maps.InfoWindow({
                                content: `<strong>${driverLoc.driver?.name || 'بدون اسم'}</strong>`,
                            });

                            marker.addListener('click', () => {
                                infoWindow.open(map, marker);
                            });

                            markers[id] = marker;
                        }
                    });

                    // 🔥 حذف الماركرات يلي أصحابها ما عادوا أونلاين
                    Object.keys(markers).forEach(id => {
                        if (!onlineDriverIds.includes(parseInt(id))) {
                            markers[id].setMap(null); // إزالة من الخريطة
                            delete markers[id]; // حذف من الذاكرة
                        }
                    });
                });
        }
    </script>

    <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCj8w1kd45k_nALjOjbRTBJfLMxDdfHlx0&callback=initMap"
        async defer>
    </script>




@endsection