{{ define "content" }}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interactive Dashboard</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-100">
    <div class="flex-1 flex flex-col overflow-hidden">
      <!-- Dashboard Content -->
      <div class="flex-1 overflow-auto">
        <!-- Top Stats Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
          <!-- Active Locations Card -->
          <div
            class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
            onclick="focusMap()"
          >
            <div class="flex items-center">
              <div
                class="w-14 h-14 bg-blue-100 flex items-center justify-center"
              >
                <i class="fas fa-map-marker-alt text-blue-600 text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">
                  Active Locations
                </p>
                <p class="text-2xl font-bold text-gray-900">24</p>
              </div>
            </div>
          </div>

          <!-- Total Visitors Card -->
          <div
            class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
            onclick="updateChart('visitors')"
          >
            <div class="flex items-center">
              <div
                class="w-14 h-14 bg-green-100 flex items-center justify-center"
              >
                <i class="fas fa-users text-green-600 text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Visitors</p>
                <p class="text-2xl font-bold text-gray-900">12,847</p>
              </div>
            </div>
          </div>

          <!-- Revenue Card -->
          <div
            class="bg-white border-r border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
            onclick="updateChart('revenue')"
          >
            <div class="flex items-center">
              <div
                class="w-14 h-14 bg-purple-100 flex items-center justify-center"
              >
                <i class="fas fa-dollar-sign text-purple-600 text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Revenue</p>
                <p class="text-2xl font-bold text-gray-900">$47,392</p>
              </div>
            </div>
          </div>

          <!-- Conversion Rate Card -->
          <div
            class="bg-white border-b border-gray-200 p-8 hover:shadow-md transition-shadow cursor-pointer"
            onclick="updateChart('conversion')"
          >
            <div class="flex items-center">
              <div
                class="w-14 h-14 bg-orange-100 flex items-center justify-center"
              >
                <i class="fas fa-percentage text-orange-600 text-xl"></i>
              </div>
              <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Conversion Rate</p>
                <p class="text-2xl font-bold text-gray-900">3.2%</p>
              </div>
            </div>
          </div>
        </div>

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

        <!-- Performance Metrics Chart - Full Width Bottom -->
        <div class="bg-white border-gray-200 p-8">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900">
              Performance Metrics
            </h3>
            <div class="flex items-center gap-2">
              <button
                onclick="updateChart('daily')"
                class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
              >
                Daily
              </button>
              <button
                onclick="updateChart('weekly')"
                class="px-3 py-1 text-sm bg-blue-600 text-white hover:bg-blue-700 transition-colors"
              >
                Weekly
              </button>
              <button
                onclick="updateChart('monthly')"
                class="px-3 py-1 text-sm border border-gray-300 hover:bg-gray-50 transition-colors"
              >
                Monthly
              </button>
            </div>
          </div>
          <div id="analytics_chart" class="w-full h-[400px]"></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 }}
