{% extends "pxy_dashboard/partials/base.html" %}
{% load static %}

{% block title %}Zone Definition{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'dashboard/vendor/apexcharts/apexcharts.css' %}">
{% endblock %}

{% block content %}

{% include "pxy_dashboard/partials/dashboard/kpi_row.html" %}
<div class="container mt-4">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="fw-bold">Pre-Operation · Zone Definition</h4>
    <form method="get" class="d-flex align-items-center">
      <label for="city-select" class="me-2 mb-0">Select City:</label>
      <select name="city" id="city-select" class="form-select" onchange="this.form.submit()">
        {% for city in cities %}
          <option value="{{ city }}" {% if city == selected_city %}selected{% endif %}>{{ city }}</option>
        {% endfor %}
      </select>
    </form>
  </div>

  {% if chart_data.zones %}
    <!-- Residuals by Zone -->
    <div class="card mb-4">
      <div class="card-header"><h5 class="mb-0">Waste Generation by Zone</h5></div>
      <div class="card-body">
        <div id="chart-residues"></div>
      </div>
    </div>

    <!-- Housing by Zone -->
    <div class="card mb-4">
      <div class="card-header"><h5 class="mb-0">Number of Households by Zone</h5></div>
      <div class="card-body">
        <div id="chart-housing"></div>
      </div>
    </div>
  {% endif %}

  {% if scatter_series %}
    <!-- Scatter Chart -->
    <div class="card mb-4">
      <div class="card-header"><h5 class="mb-0">Scatter: Waste vs Households (All Cities)</h5></div>
      <div class="card-body">
        <div id="scatter-plot"></div>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'dashboard/vendor/apexcharts/apexcharts.min.js' %}"></script>

<script>
  {% if chart_data.zones %}
    // Residue Bar Chart
    var options1 = {
      chart: { type: 'bar', stacked: true, height: 350 },
      series: [
        { name: 'Organic', data: {{ chart_data.gen_org|safe }} },
        { name: 'Inorganic', data: {{ chart_data.gen_inva|safe }} },
        { name: 'Other', data: {{ chart_data.gen_resto|safe }} }
      ],
      xaxis: { categories: {{ chart_data.zones|safe }} },
      title: { text: "Waste Generation per Zone" }
    };
    new ApexCharts(document.querySelector("#chart-residues"), options1).render();

    // Housing Chart
    var options2 = {
      chart: { type: 'bar', height: 350 },
      series: [{ name: 'Households', data: {{ viviendas_data.viviendas|safe }} }],
      xaxis: { categories: {{ viviendas_data.zones|safe }} },
      title: { text: "Number of Households per Zone" }
    };
    new ApexCharts(document.querySelector("#chart-housing"), options2).render();
  {% endif %}

  {% if scatter_series %}
    // Scatter Plot
    var options3 = {
      chart: { type: 'scatter', height: 400, zoom: { enabled: true } },
      series: [
        {
          name: 'Organic',
          data: {{ scatter_series.GEN_ORG|safe }},
        },
        {
          name: 'Inorganic',
          data: {{ scatter_series.GEN_INVA|safe }},
        },
        {
          name: 'Other',
          data: {{ scatter_series.GEN_RESTO|safe }},
        },
      ],
      xaxis: {
        title: { text: "Number of Households" }
      },
      yaxis: {
        title: { text: "Waste Generated (kg/day)" }
      },
      tooltip: {
        custom: function({ series, seriesIndex, dataPointIndex, w }) {
          var d = w.config.series[seriesIndex].data[dataPointIndex];
          return '<div class="p-2"><strong>' + d.city + '</strong><br/>Waste: ' + d.y + '<br/>Homes: ' + d.x + '</div>';
        }
      },
      title: {
        text: "Waste Generation vs Households by City"
      }
    };
    new ApexCharts(document.querySelector("#scatter-plot"), options3).render();
  {% endif %}
</script>
{% endblock %}
