@extends('layouts/layoutMaster')

@section('title', __('locale.Drivers On Map'))

<!-- Vendor Styles -->
@section('vendor-style')
  @vite(['resources/assets/vendor/libs/leaflet/leaflet.scss'])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
  @vite(['resources/assets/vendor/libs/leaflet/leaflet.js'])
@endsection

@section('content')
  <div class="row gy-6">

    <!-- Drivers Control -->
    <div class="col-12">
      <div class="card">
        <h5 class="card-header">{{ __('locale.Drivers') }}</h5>
        <div class="card-body">
          <div class="leaflet-map" id="layerControl"></div>
        </div>
      </div>
    </div>
    <!-- /Drivers Control -->
  </div>
@endsection
<!-- Page Scripts -->
@section('page-script')
  @vite([])
  <script>
    const driversData = @json($drivers); // from Laravel controller
    document.addEventListener('DOMContentLoaded', function() {
      const map = L.map('layerControl').setView([20.5937, 78.9629], 5); // Default India center

      // Base tile layer
      const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap'
      }).addTo(map);

      // Custom driver icon
      const carActiveIcon = L.icon({
        iconUrl: `${baseUrl}assets/img/carActive.png`, // active car icon
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      });

      const carInactiveIcon = L.icon({
        iconUrl: `${baseUrl}assets/img/car.png`, // inactive car icon
        iconSize: [32, 32],
        iconAnchor: [16, 32],
        popupAnchor: [0, -32]
      });

      const driversData = @json($drivers); // Laravel-passed driver data

      if (Array.isArray(driversData) && driversData.length > 0) {
        const driverMarkers = [];

        driversData.forEach(driver => {
          if (driver.latitude && driver.longitude) {
            const driverIcon = driver.is_active == 1 ? carActiveIcon : carInactiveIcon;
            const marker = L.marker([driver.latitude, driver.longitude], {
                icon: driverIcon
              })
              .bindPopup(`
              <strong>${driver.name}</strong><br>
               <small>${driver.phone ?? ''}</small><br>
              <small>${driver.email ?? ''}</small>
            `);
            driverMarkers.push(marker);
          }
        });

        const driversLayer = L.layerGroup(driverMarkers).addTo(map);

        // Adjust map to fit all markers
        const group = new L.featureGroup(driverMarkers);
        map.fitBounds(group.getBounds().pad(0.2));
      } else {
        // If no drivers, use current location
        map.locate({
          setView: true,
          maxZoom: 16
        });

        map.on('locationfound', function(e) {
          L.marker(e.latlng).addTo(map)
            .bindPopup('You are here').openPopup();
        });

        map.on('locationerror', function() {
          alert('Unable to access your location. Showing default center.');
        });
      }
    });
  </script>
@endsection