{% extends 'base.html' %}

{% load static %}
{% load humanize %}

{% block content %}
<main class="content">
  <div class="container-fluid p-0">

    <!-- Dashboard Header -->
    <div class="mb-3">
      <h1 class="h3 d-inline align-middle">
        User Dashboard -
        {{ logged_user_profile.user.first_name|upper }}
        {{ logged_user_profile.middle_name|upper }}
        ({{ logged_user_profile.user.username }})
        {{ today }}
      </h1>
    </div>

    <!-- Summary Cards -->
    <div class="row">
      <div class="col-12">

        <div class="row">
          <div class="col-md-3 mb-3">
            <div class="card h-100" style="background-color: rgb(253, 206, 58);">
              <div class="card-body d-flex flex-column">
                <div class="row">
                  <div class="col mt-0">
                    <h3 class="card-title text-black">Active Devices</h3>
                  </div>
                  <div class="col-auto">
                    <div class="stat text-primary">
                      <i class="align-middle" data-feather="pocket"></i>
                    </div>
                  </div>
                </div>
                <h1 class="mt-1 mb-1 text-black fw-bold">{{proucts}}</h1>
                <div class="mt-auto">
                  <span class="text-black">Up to now</span>
                </div>
              </div>
            </div>
          </div>
        
          <div class="col-md-3 mb-3">
            <div class="card h-100" style="background-color: rgb(253, 206, 58);">
              <div class="card-body d-flex flex-column">
                <div class="row">
                  <div class="col mt-0">
                    <h3 class="card-title text-black">Registered Devices</h3>
                  </div>
                  <div class="col-auto">
                    <div class="stat text-primary">
                      <i class="align-middle" data-feather="plus-circle"></i>
                    </div>
                  </div>
                </div>
                <h1 class="mt-1 mb-1 text-black fw-bold">{{customerdevices}}</h1>
                <div class="mt-auto">
                  <span class="text-black">Up to now</span>
                </div>
              </div>
            </div>
          </div>
        
          <div class="col-md-3 mb-3">
            <div class="card h-100" style="background-color: rgb(253, 206, 58);">
              <div class="card-body d-flex flex-column">
                <div class="row">
                  <div class="col mt-0">
                    <h3 class="card-title text-black">Registered Customers</h3>
                  </div>
                  <div class="col-auto">
                    <div class="stat text-primary">
                      <i class="align-middle" data-feather="minus-circle"></i>
                    </div>
                  </div>
                </div>
                <h1 class="mt-1 mb-1 text-black fw-bold">{{active_customer}}</h1>
                <div class="mt-auto">
                  <span class="text-black">Up to now</span>
                </div>
              </div>
            </div>
          </div>
        
          <div class="col-md-3 mb-3">
            <div class="card h-100" style="background-color: rgb(253, 206, 58);">
              <div class="card-body d-flex flex-column">
                <div class="row">
                  <div class="col mt-0">
                    <h3 class="card-title text-black">Most Used Crop</h3>
                  </div>
                  <div class="col-auto">
                    <div class="stat text-primary">
                      <i class="align-middle" data-feather="inbox"></i>
                    </div>
                  </div>
                </div>
                <h1 class="mt-1 mb-1 text-black fw-bold">{{ most_used_crop.crop_type }}</h1>
                <div class="mt-auto">
                  <span class="text-black">Up to now</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        

      </div>
    </div>

    <!-- Charts Row -->
    <div class="row mt-4">
      <!-- Product Bar Chart Card -->
      <div class="col-md-6 mb-3">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Products</h5>
            <canvas id="productChart" style="height: 400px;"></canvas>
          </div>
        </div>
      </div>
    
      <!-- Leaflet Map Card -->
      <div class="col-md-6">
        <div class="card h-100">
          <div class="card-body">
            <h5 class="card-title">Customer Device Locations</h5>
            <div id="map" style="height: 400px;"></div>
            <div class="mt-2 text-muted">
              Uncategorized results (no GPS): <strong>{{ uncategorized_results_count|default:0 }}</strong>
            </div>
          </div>

        </div>
      </div>
    </div>
    

    <!-- Customer & Results Line Chart -->
    <div class="row mt-4">
      <div class="col-12 bg-white">
        <form method="get" class="m-3">
          <label for="year">Select Year:</label>
          <select name="year" id="year" onchange="this.form.submit()">
            {% for y in years %}
              <option value="{{ y }}" {% if y == year %}selected{% endif %}>{{ y }}</option>
            {% endfor %}
          </select>
        </form>
        <canvas id="myChart" height="100"></canvas>
      </div>
    </div>

  </div>
</main>

<!-- Scripts -->

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.3.0/dist/chart.umd.min.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
  integrity="sha256-VtZM3CfwY1yMYw73x+Z45u2WTf9yy+o9cxwqzS+3vDQ="
  crossorigin=""
/>
<script
  src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
  integrity="sha256-o9N1j/JrO4wY7y8SxZVvVqYkC9nThvR5C8UHDWQEcxo="
  crossorigin=""
></script>


<script>
  // Line Chart: Customers & Results
  const ctxLine = document.getElementById('myChart').getContext('2d');
  const months = {{ months|safe }};
  const customerData = {{ customer_data|safe }};
  const resultData = {{ result_data|safe }};

  new Chart(ctxLine, {
    type: 'line',
    data: {
      labels: months,
      datasets: [
        {
          label: 'Customer Devices',
          data: customerData,
          borderColor: 'blue',
          backgroundColor: 'rgba(54, 162, 235, 0.2)',
          fill: true,
          tension: 0.3
        },
        {
          label: 'Results',
          data: resultData,
          borderColor: 'orange',
          backgroundColor: 'rgba(255, 159, 64, 0.2)',
          fill: true,
          tension: 0.3
        }
      ]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { position: 'top' },
        title: {
          display: true,
          text: `Customer Device & Results Data for {{ year }}`
        }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });

  // Bar Chart: Products
  const ctxBar = document.getElementById('productChart').getContext('2d');
  const productLabels = {{ product_labels|safe }};
  const productCounts = {{ product_counts|safe }};

  new Chart(ctxBar, {
    type: 'bar',
    data: {
      labels: productLabels,
      datasets: [{
        label: 'Number of Devices',
        data: productCounts,
        backgroundColor: '#22C55E', 

      }]
    },
    options: {
      responsive: true,
      plugins: {
        legend: { display: true, position: 'top' },
        title: { display: true, text: 'Registered Devices' }
      },
      scales: {
        y: { beginAtZero: true }
      }
    }
  });
</script>

<!-- Leaflet.js -->
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // init map centered on europe
    const map = L.map("map").setView([54.5260, 15.2551], 4);
  
    // tiles
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution: "&copy; OpenStreetMap contributors",
      maxZoom: 18
    }).addTo(map);
  
    // backend data
    const points = {{ city_map_points|safe }};
    const uncategorized = {{ uncategorized_results_count|default:0 }};
  
    const markers = [];
    points.forEach(p => {
      if (typeof p.lat === "number" && typeof p.lon === "number") {
        const m = L.marker([p.lat, p.lon]).addTo(map);
        m.bindPopup(`<strong>${p.city}</strong><br/>Devices: ${p.devices}`);
        markers.push(m);
      }
    });
  
    // fit bounds if we have markers
    if (markers.length > 0) {
      const group = L.featureGroup(markers);
      map.fitBounds(group.getBounds().pad(0.2));
    }
  
    // optional footer note in console (or display elsewhere)
    if (uncategorized > 0) {
      console.log("Uncategorized results (no GPS):", uncategorized);
    }
  });
  </script>
  

{% endblock %}