{% extends 'base.html' %}
{% block content %}
<h2>GIS Asset Map with Draw, Cluster & Export</h2>
<div id="map" style="height: 600px;"></div>
<button id="exportGeoJSON" class="btn btn-success mt-2">Export Drawn Shapes (GeoJSON)</button>
<button id="exportPDF" class="btn btn-secondary mt-2">Export Map as PDF</button>
<textarea id="geojsonOutput" class="form-control mt-3" rows="5" placeholder="Exported GeoJSON..."></textarea>
{% endblock %}
<div class="row text-center mb-4">
    <div class="col-md-4">
      <div class="card bg-primary text-white">
        <div class="card-body">
          <h5 class="card-title">Total Work Orders</h5>
          <h3 id="totalCount">0</h3>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card bg-warning text-dark">
        <div class="card-body">
          <h5 class="card-title">Open Tasks</h5>
          <h3 id="openCount">0</h3>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card bg-success text-white">
        <div class="card-body">
          <h5 class="card-title">Resolved Tasks</h5>
          <h3 id="resolvedCount">0</h3>
        </div>
      </div>
    </div>
  </div>
  
  <script>
  fetch("/api/gis/dashboard_counts")
    .then(res => res.json())
    .then(data => {
      document.getElementById("totalCount").innerText = data.total;
      document.getElementById("openCount").innerText = data.open;
      document.getElementById("resolvedCount").innerText = data.resolved;
    });
  </script>
  
{% block scripts %}
<!-- Leaflet & Plugins -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet-draw/dist/leaflet.draw.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>

<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet-draw/dist/leaflet.draw.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>
<script src="https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

<script>
  const map = L.map('map').setView([0.3, 37.6], 6);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
  }).addTo(map);

  // Marker cluster group
  const markers = L.markerClusterGroup();
  {% for asset in assets %}
    const marker = L.marker([{{ asset.latitude }}, {{ asset.longitude }}])
      .bindPopup("<strong>{{ asset.name }}</strong><br>Type: {{ asset.type }}");
    markers.addLayer(marker);
  {% endfor %}
  map.addLayer(markers);

  // Draw tool
  const drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);
  const drawControl = new L.Control.Draw({
    edit: { featureGroup: drawnItems },
    draw: {
      polygon: true,
      rectangle: true,
      marker: true,
      circle: false,
      polyline: false
    }
  });
  map.addControl(drawControl);

  // Capture new features
  map.on(L.Draw.Event.CREATED, function (e) {
    drawnItems.addLayer(e.layer);
  });

  // GeoJSON Export
  document.getElementById('exportGeoJSON').onclick = function () {
    const geojson = drawnItems.toGeoJSON();
    document.getElementById('geojsonOutput').value = JSON.stringify(geojson, null, 2);
  };

  // PDF Export
  document.getElementById('exportPDF').onclick = function () {
    html2canvas(document.getElementById("map")).then(canvas => {
      const { jsPDF } = window.jspdf;
      const pdf = new jsPDF();
      const imgData = canvas.toDataURL("image/png");
      const width = pdf.internal.pageSize.getWidth();
      const height = (canvas.height * width) / canvas.width;
      pdf.addImage(imgData, 'PNG', 0, 0, width, height);
      pdf.save("map_snapshot.pdf");
    });
  };
</script>
<h5 class="mt-5">Asset Distribution by County</h5>
<canvas id="assetPieChart" height="100"></canvas>

<script>
fetch("/api/gis/asset_breakdown?by=county")
  .then(res => res.json())
  .then(data => {
    const labels = data.map(i => i.label);
    const counts = data.map(i => i.count);

    new Chart(document.getElementById("assetPieChart"), {
      type: 'doughnut',
      data: {
        labels: labels,
        datasets: [{
          label: 'Assets by County',
          data: counts,
          backgroundColor: [
            '#007bff', '#28a745', '#ffc107', '#dc3545', '#6610f2', '#20c997'
          ],
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        plugins: {
          legend: { position: 'right' },
          title: {
            display: true,
            text: 'Assets by County'
          }
        }
      }
    });
  });
</script>

{% endblock %}