{% extends "base.html" %}
{% block content %}
<div class="container mt-4">
    <h3>Work Order Hotspot Heatmap</h3>
    <div id="heatmap" style="height: 500px;"></div>
</div>
<script>
    
 
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet.heat/dist/leaflet-heat.js"></script>
  <script>
    const heatData = {{ hotspots|tojson }};
    const map = L.map('map').setView([0.5, 37.5], 6);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

    fetch("/maintenance_hotspots")
      .then(res => res.json())
      .then(data => {
        const heatData = data.map(d => [d.latitude, d.longitude, d.count]);
        L.heatLayer(heatData).addTo(map);
      });
  </script>
{% endblock %}