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

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

{% block content %}

<div class="container-fluid py-4">
    <!-- [ 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>
{% endblock content %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var products = JSON.parse('{{ products | tojson | safe }}');
    var names = products.map(p => p.name);
    var prices = products.map(p => p.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_js %}