   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->
  <%- include('../../partials/utils/mask.ejs') %>


  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', {title: "Drivers on map"}) %>

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: "Drivers on map" }
    ];
  %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>

    <div class="mt-4">
      <div class=" bg-white shadow-md rounded-lg ">
        <!-- <h4 class="text-lg font-semibold">Drivers on Map: </h4> -->
        <div class="overflow-x-auto mt-6">
          <div id="driversMap" style="height: 500px; width: 100%;"></div>
        </div>
      </div>
    </div>
  </div>
</main>

 
<script>
  async function loadDriversOnMap() {
    const drivers = <%- JSON.stringify(drivers) %>;

    const center = drivers.length > 0
      ? { lat: parseFloat(drivers[0].d_lat), lng: parseFloat(drivers[0].d_lng) }
      : { lat: 28.6139, lng: 77.2090 }; // fallback to Delhi

    const map = new google.maps.Map(document.getElementById("driversMap"), {
      center,
      zoom: 11,
    });

    const infoWindow = new google.maps.InfoWindow();
    const markers = [];

    drivers.forEach(driver => {
      const marker = new google.maps.Marker({
        position: {
          lat: parseFloat(driver.d_lat),
          lng: parseFloat(driver.d_lng),
        },
        title: driver.d_name,
      });

      const rating = Math.round(driver.d_rating || 0);
      let stars = '';
      for (let i = 1; i <= 5; i++) {
        stars += i <= rating ? '★' : '☆';
      }

      const content = `
        <div style="min-width: 200px">
          <strong>Name:</strong> ${maskName(driver.d_name)}<br>
          <strong>Phone:</strong> ${maskPhone(driver.d_phone) || "N/A"}<br>
          <strong>Rating:</strong> ${stars}<br>
          <strong>Status:</strong> ${driver.d_active == "1" ? '✅ Active' : '❌ Inactive'}
        </div>
      `;

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

      markers.push(marker);
    });

    // Cluster the markers
    new markerClusterer.MarkerClusterer({ map, markers });
  }
</script>

 

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

<%- footer %>