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

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

<!-- Specific CSS goes HERE -->
{% block stylesheets %}

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fontawesome-free/css/all.min.css') }}">
  <!-- fullCalendar -->
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fullcalendar/main.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fullcalendar-daygrid/main.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fullcalendar-timegrid/main.min.css') }}">
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/plugins/fullcalendar-bootstrap/main.min.css') }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ url_for('static', filename='assets/css/adminlte.min.css') }}">

{% endblock stylesheets %}

{% 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>Dynamic DT</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="{{ url_for('charts_blueprint.charts') }}">Charts</a></li>
                    </ol>
                </div>
            </div>
        </div>
      </section>

      <div class="content">
        <div class="container-fluid">
          <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>
        </div>
      </div>
    </div>

{% endblock content %}

{% block javascripts %}

  <!-- jQuery -->
  <script src="{{ url_for('static', filename='assets/plugins//jquery/jquery.min.js') }}"></script>
  <!-- Bootstrap 4 -->
  <script src="{{ url_for('static', filename='assets/plugins//bootstrap/js/bootstrap.bundle.min.js') }}"></script>
  <!-- AdminLTE App -->
  <script src="{{ url_for('static', filename='assets/js/adminlte.min.js') }}"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="{{ url_for('static', filename='assets/js/demo.js') }}"></script>

  <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 javascripts %}