@if (Route::currentRouteName() == "trackDrivers.index")
{{-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> --}}
<script type="module">
    let map;
    let vwi;
    let markers = [];
    const autoIcon = "{{ asset('icons/app_icons/vway_auto_pin.png') }}";
    const carIcon = "{{ asset('icons/app_icons/vway_car_pin.png') }}";
    const bikeIcon = "{{ asset('icons/app_icons/vway_bike_pin.png') }}";
    const truckIcon = "{{ asset('icons/app_icons/vway_lv_pin.png') }}";
    const actingIcon = "{{ asset('icons/app_icons/vway_acting_pin.png') }}";
    const icon =
        "{{ asset('icons/vway_map_100.png') }}";
    const icon1 =
        "{{ asset('icons/vway_map_50.svg') }}";
        
    function initMap() {
        let vwi = new google.maps.LatLng({{ $lat }}, {{ $lng }});
        // map centered to V Way Infotech
        map = new google.maps.Map(document.getElementById("map"), {
            center: vwi,
            zoom: 16,
        });

        const infoWindow = new google.maps.InfoWindow();

        const marker = new google.maps.Marker({
            map: map,
            position: new google.maps.LatLng({{ $lat }},{{ $lng }}),
            title: "Customer Location",
        });

        marker.addListener("click", () => {
            infoWindow.setContent(marker.getTitle());
            infoWindow.open(map, marker);
        });

        getDriverMarkers();
        setInterval(() => {
            getDriverMarkers();
        }, 15000);
    }

    // get driver location and add marker
    function getDriverMarkers(){
        console.log("getDriverMarkers() : Invoked!");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('api.getDriverLocations') }}",
            type: "POST",
            error: function(xhr, status, error) {
                console.log("Status : "+status);
                console.log("Error : "+error);
                console.log("XHR : "+xhr);
            },
            success: function(data){
                deleteMarkers();
                $("#totalDrivers").html(data.count);
                $.each(data.result, function(key, value){
                    let vehicleType = " (Auto) - ";
                    let iconValue = icon1;
                    if(value.vehicle_type_id == 1){
                        // auto
                        iconValue = autoIcon;
                    }
                    if(value.vehicle_type_id == 5){
                        // acting drivers
                        iconValue = actingIcon;
                    }
                    if(value.vehicle_type_id == 3){
                        // car
                        if(value.passenger_limit == 4){
                            vehicleType = " (Mini) - ";
                        }else if(value.passenger_limit == 5){
                            vehicleType = " (Sedan) - ";
                        }else{
                            vehicleType = " (XUV) - ";
                        }
                        iconValue = carIcon;
                    }
                    if(value.vehicle_type_id == 4){
                        // trucks
                        if(value.is_closed == 1){
                            vehicleType = " - "+value.max_weight+" kgs (Closed) - ";
                        }else{
                            vehicleType = " - "+value.max_weight+" kgs (Open) - ";
                        }
                        if(value.max_weight == 20){
                            iconValue = bikeIcon
                        }else{
                            iconValue = truckIcon;
                        }
                    }
                    let validity = "\n("+value.total_usage+"/"+value.validity_amount+") (Expiry On: "+value.package_expiry+")";
                    const infoWindow = new google.maps.InfoWindow();
                    const marker = new google.maps.Marker({
                        title: value.name+vehicleType+value.whatsapp_no+validity,
                        position: new google.maps.LatLng(value.latitude,value.longitude),
                        icon: iconValue,
                        map: map,
                    });

                    marker.addListener("click", () => {
                        infoWindow.setContent(marker.getTitle());
                        infoWindow.open(map, marker);
                    });

                    markers.push(marker);
                });
                console.log("Updating Drivers Locations!");
            }
        });
    }

    // Sets the map on all markers in the array.
    function setMapOnAll(map) {
        for (let i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    // Adds a marker to the map and push to the array.
    function addMarker(position) {
        const marker = new google.maps.Marker({
            position: position,
            map: map,
        });

        markers.push(marker);
    }

    // Removes the markers from the map, but keeps them in the array.
    function hideMarkers() {
        setMapOnAll(null);
    }

    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        hideMarkers();
        markers = [];
    }

    window.initMap = initMap;
</script>
@endif
@if (Route::currentRouteName() == "trackAssignedDriver.index")
{{-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> --}}
<script type="module">
    let map;
    let vwi;
    let markers = [];
    let driver;
    const icon =
        "{{ asset('icons/vway_map_100.png') }}";
    const icon1 =
        "{{ asset('icons/vway_map_50.svg') }}";
        
    function initMap() {
        let vwi = new google.maps.LatLng(11.0298881, 76.9604418);
        // map centered to V Way Infotech
        map = new google.maps.Map(document.getElementById("map"), {
            center: vwi,
            zoom: 16,
        });

        getDriverMarker();
        setInterval(() => {
            getDriverMarker();
        }, 5000);
    }

    // get driver locations and add marker
    function getDriverMarker(){
        console.log("getDriverMarker() : Invoked!");
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: "{{ route('api.trackDriver') }}",
            type: "POST",
            data: {
                id: "{{ $rideHistoryId }}",
            },
            error: function(xhr, status, error) {
                console.log("Status : "+status);
                console.log("Error : "+error);
                console.log("XHR : "+xhr);
            },
            success: function(data){
                console.log(data);
                $("#driverName").html(data.driver_name);
                deleteMarkers();
                const marker = new google.maps.Marker({
                    title: data.driver_name,
                    position: new google.maps.LatLng(data.d_latitude,data.d_longitude),
                    icon: icon1,
                    map: map,
                });
                markers.push(marker);
                setMapOnAll(map);
                map.setCenter(new google.maps.LatLng(data.d_latitude, data.d_longitude));
                console.log("Updating Driver Location!");
            }
        });
    }

    // Sets the map on all markers in the array.
    function setMapOnAll(map) {
        for (let i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
        }
    }

    // Adds a marker to the map and push to the array.
    function addMarker(position) {
        const marker = new google.maps.Marker({
            position: position,
            map: map,
        });

        markers.push(marker);
    }

    // Removes the markers from the map, but keeps them in the array.
    function hideMarkers() {
        setMapOnAll(null);
    }

    // Deletes all markers in the array by removing references to them.
    function deleteMarkers() {
        hideMarkers();
        markers = [];
    }

    window.initMap = initMap;
</script>
@endif