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

{% block title %} Dashboard {% endblock %} 

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

{% block content %}

    <div class="row">

      <div class="col-12">
        <div class="card card-chart">
          <div class="card-header ">
            <div class="row">
              <div class="col-sm-6 text-left">
                <h5 class="card-category"> </h5>
                <h2 class="card-title">Total by Month</h2>
              </div>
              <div class="col-sm-6">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="0">
                    <input type="radio" name="options" checked>
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Carnet</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-single-02"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="1">
                    <input type="radio" class="d-none d-sm-none" name="options">
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Production</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-gift-2"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="2">
                    <input type="radio" class="d-none" name="options">
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Facturation</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-tap-02"></i>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="chart-area">
              <canvas id="chartBig1"></canvas>
            </div>
          </div>
        </div>
      </div>


    </div>
           <div class="col-12">
        <div class="card card-chart">
          <div class="card-header ">
            <div class="row">
              <div class="col-sm-6 text-left">
                <h5 class="card-category"></h5>
                <h2 class="card-title">Total By Country</h2>
              </div>
              <div class="col-sm-6">
                <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
                  <label class="btn btn-sm btn-primary btn-simple active" id="3">
                    <input type="radio" name="options" checked>
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Carnet</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-single-02"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="4">
                    <input type="radio" class="d-none d-sm-none" name="options">
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Production</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-gift-2"></i>
                    </span>
                  </label>
                  <label class="btn btn-sm btn-primary btn-simple" id="5">
                    <input type="radio" class="d-none" name="options">
                    <span class="d-none d-sm-block d-md-block d-lg-block d-xl-block">Facturation</span>
                    <span class="d-block d-sm-none">
                      <i class="tim-icons icon-tap-02"></i>
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div class="chart-area">
              <canvas id="CountryChart"></canvas>
            </div>
          </div>
        </div>
        </div>
    <div class="row">
      <div class="col-lg-4" hidden>
        <div class="card card-chart">
          <div class="card-header">
            <h5 class="card-category">Total Shipments</h5>
            <h3 class="card-title"><i class="tim-icons icon-bell-55 text-primary"></i> 763,215</h3>
          </div>
          <div class="card-body">
            <div class="chart-area">
              <canvas  id="chartLinePurple" ></canvas>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4" hidden>
        <div class="card card-chart">
          <div class="card-header">
            <h5 class="card-category">Completed Tasks</h5>
            <h3 class="card-title"><i class="tim-icons icon-send text-success"></i> 12,100K</h3>
          </div>
          <div class="card-body">
            <div class="chart-area">
              <canvas id="chartLineGreen"></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>







{% endblock content %}
<!-- Specific Page JS goes HERE  -->
{% block javascripts %}

  <script>

var chart_data = {{carnetp|safe}};
var chart_data1 = {{productionp|safe}};
var chart_data2 = {{factp|safe}};
var chart_data3={{c|safe}};
var chart_data4 = {{p|safe}};
var chart_data5 = {{f|safe}};

var chart_labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

var a={{countr|safe}};
var b={{c|safe}};
    $(document).ready(function() {

      // Javascript method's body can be found in assets/js/demos.js
      demo.initDashboardPageCharts();

    });
  </script>

{% endblock javascripts %}