{% extends "layouts/base.html" %}
{% load static %}

{% block title %}Charts{% endblock title %}

{% block content %}

<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
      <div class="container-fluid">
          <div class="row mb-2">
              <div class="col-sm-6">
                  <h1>Charts</h1>
              </div>
              <div class="col-sm-6">
                  <ol class="breadcrumb float-sm-right">
                  <li class="breadcrumb-item"><a href="/">Home</a></li>
                  <li class="breadcrumb-item active"><a href="#">Charts</a></li>
                  </ol>
              </div>
          </div>
      </div>
  </section>
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">

        <!-- [ Main Content ] start -->
        <div class="row">
          <!-- [ Bar Chart ] start -->
          <div class="col-sm-12 col-md-6">
            <div class="card">
              <div class="card-header">
                <h5>Bar Chart</h5>
              </div>
              <div class="card-body text-center">
                <div id="bar-chart"></div>
              </div>
            </div>
          </div>
          <!-- [ Bar Chart ] end -->

          <!-- [ Pie Chart ] start -->
          <div class="col-sm-12 col-md-6">
            <div class="card">
              <div class="card-header">
                <h5>Pie Chart</h5>
              </div>
              <div class="card-body text-center">
                <div id="pie-chart"></div>
              </div>
            </div>
          </div>
          <!-- [ Pie Chart ] end -->
        </div>
        <!-- [ Main Content ] end -->
      </div>
    </section>
  </div>
{% endblock content %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var products = JSON.parse('{{ products|escapejs }}');
    var names = products.map(p => p.fields.name);
    var prices = products.map(p => p.fields.price);

    var barOptions = {
      chart: { type: 'bar', height: 350 },
      series: [{ name: 'Price', data: prices }],
      xaxis: { categories: names }
    };
    var barChart = new ApexCharts(document.querySelector("#bar-chart"), barOptions);
    barChart.render();

    var pieOptions = {
      chart: { type: 'pie', height: 350 },
      series: prices,
      labels: names
    };
    var pieChart = new ApexCharts(document.querySelector("#pie-chart"), pieOptions);
    pieChart.render();
  });
</script>
{% endblock extra_scripts %}