{{ define "content" }}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{.Title}}</title>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.tailwindcss.com"></script>
    <script
      type="text/javascript"
      src="https://www.gstatic.com/charts/loader.js"
    ></script>
  </head>
  <body class="bg-gray-50">
    <!-- Full Width Container -->
    <div class="min-h-screen w-full flex flex-col">
      <!-- Main Dashboard Content -->
      <div class="w-full">
        <!-- Stats Grid - Full Width -->
        <div
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 bg-white border-b border-gray-200"
        >
          <!-- Active Volunteers -->
          <div
            class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
            onclick="focusMap()"
          >
            <div class="flex items-center">
              <div
                class="w-12 h-12 bg-blue-50 flex items-center justify-center"
              >
                <i class="fas fa-users text-blue-600 text-lg"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600 mb-1">
                  Active Volunteers
                </p>
                <p class="text-2xl font-bold text-gray-900">
                  {{.VolunteerCount}}
                </p>
              </div>
            </div>
          </div>

          <!-- Addresses Visited -->
          <div
            class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
            onclick="updateChart('visitors')"
          >
            <div class="flex items-center">
              <div
                class="w-12 h-12 bg-blue-50 flex items-center justify-center"
              >
                <i class="fas fa-map-marker-alt text-blue-600 text-lg"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600 mb-1">
                  Addresses Visited
                </p>
                <p class="text-2xl font-bold text-gray-900">
                  {{.ValidatedCount}}
                </p>
              </div>
            </div>
          </div>

          <!-- Total Donations -->
          <div
            class="border-r border-gray-200 p-8 hover:bg-gray-50 transition-colors cursor-pointer"
            onclick="updateChart('revenue')"
          >
            <div class="flex items-center">
              <div
                class="w-12 h-12 bg-blue-50 flex items-center justify-center"
              >
                <i class="fas fa-dollar-sign text-blue-600 text-lg"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600 mb-1">Donation</p>
                <p class="text-2xl font-bold text-gray-900">
                  ${{.TotalDonations}}
                </p>
              </div>
            </div>
          </div>

          <!-- Houses Left -->
          <div
            class="p-8 hover:bg-gray-50 transition-colors cursor-pointer"
            onclick="updateChart('conversion')"
          >
            <div class="flex items-center">
              <div
                class="w-12 h-12 bg-blue-50 flex items-center justify-center"
              >
                <i class="fas fa-percentage text-blue-600 text-lg"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600 mb-1">
                  Houses Left
                </p>
                <p class="text-2xl font-bold text-gray-900">
                  {{.HousesLeftPercent}}%
                </p>
              </div>
            </div>
          </div>
        </div>

        <!-- Map Section - Full Width -->
        <div class="bg-white w-full">
          <div class="px-8 py-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-6">
              Location Analytics
            </h3>
            <div id="map" class="w-full h-[850px] border border-gray-200"></div>
          </div>
        </div>
      </div>
    </div>

    <script>
      let map;

      function focusMap() {
        // Center map example
        map.setCenter({ lat: 43.0896, lng: -79.0849 }); // Niagara Falls
        map.setZoom(12);
      }

      function initMap() {
        const niagaraFalls = { lat: 43.0896, lng: -79.0849 };

        map = new google.maps.Map(document.getElementById("map"), {
          zoom: 12,
          center: niagaraFalls,
        });

        new google.maps.Marker({
          position: niagaraFalls,
          map,
          title: "Niagara Falls",
        });
      }

      // Google Charts
      google.charts.load("current", { packages: ["corechart", "line"] });
      google.charts.setOnLoadCallback(drawAnalyticsChart);

      function drawAnalyticsChart() {
        var data = new google.visualization.DataTable();
        data.addColumn("string", "Time");
        data.addColumn("number", "Visitors");
        data.addColumn("number", "Revenue");

        data.addRows([
          ["Jan", 4200, 32000],
          ["Feb", 4800, 38000],
          ["Mar", 5200, 42000],
          ["Apr", 4900, 39000],
          ["May", 5800, 45000],
          ["Jun", 6200, 48000],
        ]);

        var options = {
          title: "Performance Over Time",
          backgroundColor: "transparent",
          hAxis: { title: "Month" },
          vAxis: { title: "Value" },
          colors: ["#3B82F6", "#10B981"],
          chartArea: {
            left: 60,
            top: 40,
            width: "90%",
            height: "70%",
          },
          legend: { position: "top", alignment: "center" },
        };

        var chart = new google.visualization.LineChart(
          document.getElementById("analytics_chart")
        );
        chart.draw(data, options);
      }

      function updateChart(type) {
        drawAnalyticsChart();
      }
    </script>

    <script
      async
      defer
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap"
    ></script>
  </body>
</html>
{{ end }}
