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

{% block content %}
{% include "pxy_dashboard/partials/dashboard/kpi_row.html" %}
<div class="row mb-3">
  <div class="col-md-8">
    <h4 class="page-title">Route Optimization</h4>
    <p class="text-muted">Optimization scenario: <strong>{{ scenario_name }}</strong></p>
  </div>
  <div class="col-md-4">
    <form method="get">
      <label for="subdivision" class="form-label">Select Subdivision</label>
      <select class="form-select" name="subdivision" id="subdivision" onchange="this.form.submit()">
        {% for s in subdivisions %}
          <option value="{{ s }}" {% if s == selected_subdivision %}selected{% endif %}>{{ s }}</option>
        {% endfor %}
      </select>
    </form>
  </div>
</div>

<div class="row">
  <div class="col-xl-12">
    <div class="card">
      <div class="card-header"><h4 class="header-title">Distance by Route (km)</h4></div>
      <div class="card-body"><div id="chart-distance" class="apex-charts" data-colors="#727cf5"></div></div>
    </div>
  </div>
  <div class="col-xl-12">
    <div class="card">
      <div class="card-header"><h4 class="header-title">Collected Load by Route (kg)</h4></div>
      <div class="card-body"><div id="chart-load" class="apex-charts" data-colors="#0acf97"></div></div>
    </div>
  </div>
  <div class="col-xl-12">
    <div class="card">
      <div class="card-header"><h4 class="header-title">Estimated Cost by Route (CLP)</h4></div>
      <div class="card-body"><div id="chart-cost" class="apex-charts" data-colors="#fa5c7c"></div></div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'dashboard/vendor/apexcharts/apexcharts.min.js' %}"></script>
<script>
  const routes = {{ route_data.routes|safe }};
  const distances = {{ route_data.distance_km|safe }};
  const loads = {{ route_data.load_kg|safe }};
  const costs = {{ route_data.cost_clp|safe }};

  new ApexCharts(document.querySelector("#chart-distance"), {
    chart: { type: "bar", height: 350 },
    series: [{ name: "Distance (km)", data: distances }],
    xaxis: { categories: routes, title: { text: "Route ID" } },
    colors: ["#727cf5"],
  }).render();

  new ApexCharts(document.querySelector("#chart-load"), {
    chart: { type: "bar", height: 350 },
    series: [{ name: "Load (kg)", data: loads }],
    xaxis: { categories: routes, title: { text: "Route ID" } },
    colors: ["#0acf97"],
  }).render();

  new ApexCharts(document.querySelector("#chart-cost"), {
    chart: { type: "bar", height: 350 },
    series: [{ name: "Cost (CLP)", data: costs }],
    xaxis: { categories: routes, title: { text: "Route ID" } },
    colors: ["#fa5c7c"],
  }).render();
</script>
{% endblock %}
