@push('css')
  <link rel="stylesheet" type="text/css" href="{{ asset('modules/cabbooking/css/vendors/leaflet/leaflet.min.css') }}">
@endpush

@php
  $apiKey = !empty($settings['location']['google_map_api_key']) ? $settings['location']['google_map_api_key'] : env('GOOGLE_MAP_API_KEY');
  if (empty($apiKey)) {
      $apiKey = env('GOOGLE_MAP_API_KEY');
  }
@endphp

@push('scripts')
  @if(!empty($apiKey))
    <script src="https://maps.googleapis.com/maps/api/js?key={{ $apiKey }}&libraries=places,geometry,drawing"></script>
  @else
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAP_API_KEY') }}&libraries=places,geometry,drawing"></script>
  @endif

  <script>
    (function ($) {
      "use strict";
      let map;
      let markers = [];
      const locations = @json($locations);
      const driverId = {{ $driver?->id ?? 'null' }};
      const defaultImage = '{{ asset('images/user.png') }}';

      function initialize() {
        const mapElement = document.getElementById("map_canvas");
        if (!mapElement) return;

        const driver = Array.isArray(locations) ? locations.find(d => d.id === driverId) : null;
        let defaultLat = 21.1702;
        let defaultLng = 72.8311;

        if (driver && driver.lat && driver.lng && !isNaN(parseFloat(driver.lat)) && !isNaN(parseFloat(driver.lng))) {
          defaultLat = parseFloat(driver.lat);
          defaultLng = parseFloat(driver.lng);
        } else if (Array.isArray(locations) && locations.length > 0 && locations[0].lat && locations[0].lng && !isNaN(parseFloat(locations[0].lat)) && !isNaN(parseFloat(locations[0].lng))) {
          defaultLat = parseFloat(locations[0].lat);
          defaultLng = parseFloat(locations[0].lng);
        }

        const mapOptions = {
          zoom: 13,
          center: new google.maps.LatLng(defaultLat, defaultLng),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          overviewMapControl: true
        };

        map = new google.maps.Map(mapElement, mapOptions);
        addMarkers(locations);
      }

      function getVehicleIcon(vehicleImage) {
        return {
          url: vehicleImage || defaultImage,
          scaledSize: new google.maps.Size(35, 60)
        };
      }

      function addMarkers(locs) {
        if (!map || !Array.isArray(locs)) return;
        markers.forEach(marker => marker.setMap(null));
        markers = [];

        locs.forEach(location => {
          if (location && location.lat && location.lng && !isNaN(parseFloat(location.lat)) && !isNaN(parseFloat(location.lng))) {
            let marker = new google.maps.Marker({
              position: new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lng)),
              map: map,
              icon: getVehicleIcon(location.vehicle_image || location.image),
              title: location.name || 'Driver'
            });

            markers.push(marker);
          }
        });
      }

      function loadMapWhenReady() {
        if (typeof google !== 'undefined' && typeof google.maps !== 'undefined') {
          initialize();
        } else {
          setTimeout(loadMapWhenReady, 100);
        }
      }

      $(document).ready(function () {
        loadMapWhenReady();
      });
    })(jQuery);
  </script>
@endpush