{% extends 'backoffice/base.html' %}


      {% block title %} Tableau de bord Ecolux BTP {% endblock  %}
      {% block content %}
      {% block dashcontent %}

      <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

      <script>
      document.getElementById('tb').classList.add('is-active')
      </script>
      <section class="section is-title-bar" >

          <div class="level">
            <div class="level-left">
              <div class="level-item">
                <ul >
                  <li style="font-size: 15px !important; ">AZ</li>
                  <li style="font-size: 15px !important; ">Tableau de bord</li>
                </ul>
              </div>
            </div>
            <div class="level-right">
              <div class="level-item">
                    <div class="select is-small">
                      <select disabled>
                        <option> Année {{current_year}}</option>
                      </select>
                    </div>
              </div>
            </div>
          </div>

      </section>

  <section class="section is-main-section">

    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    Clients
                  </h3>
                  <h3 class="title ">
                    {{customers_count}} 
                  </h3>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">

                  <span class="icon has-text-info is-large"><i class="mdi mdi-file-document-edit-outline mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    Prestations
                  </h3>
                  <h3 class="title">
                    {{prestations_count}}
                  </h3>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">
                  <span class="icon has-text-info is-large"><i class="mdi mdi-cash mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tile is-parent">
        <div class="card tile is-child">
          <div class="card-content">
            <div class="level is-mobile">
              <div class="level-item">
                <div class="is-widget-label">
                  <h3 class="subtitle is-spaced">
                    Employés
                  </h3>
                  <h3 class="title">
                    {{employees_count}}
                  </h3>
                </div>
              </div>
              <div class="level-item has-widget-icon">
                <div class="is-widget-icon">
                  <span class="icon has-text-info   is-large"><i class="mdi mdi-account mdi-48px"></i></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    
    <div class="columns is-flex is-flex-wrap-wrap">

      {% for chart in charts  %}
        {% if chart.type == "bar" %}
          <div class="column {% if chart.options.width == 'half'  %}is-6-desktop {% else %} is-12-desktop {% endif %} is-12-mobile is-half-tablet">

            <div class="card" style="height:480px">
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon"><i class="mdi mdi-finance"></i></span>
                  {{ chart.title }}
                </p>
                <a href="#" class="card-header-icon">
                  <span class="icon"><i class="mdi mdi-reload"></i></span>
                </a>
              </header>
              <div class="card-content p-0" style="height:100%; width:100%">
                <div id="{{chart.id}}" style="height:100%; width:100%"></div>
                <script>
                  var chartDom = document.getElementById('{{chart.id}}');
                  var myChart = echarts.init(chartDom);
                  var option;

                  option = {
                    tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                        type: 'shadow'
                      }
                    },
                    grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                    },
                    xAxis: [

                      {% for datax in chart.options.datax  %}
                          {
                            type: 'category',
                            data: [
                              {% for x in datax.data %}
                                  '{{ x }}'{% if not loop.last %}, {% endif %}
                              {% endfor %}
                            ],
                            axisTick: {
                              alignWithLabel: true
                            }
                          }
                      {% endfor %}
                      
                    ],
                    yAxis: [
                      {
                        type: 'value'
                      }
                    ],
                    series: [
                      {% for datay in chart.options.datay %}
                      {
                        name: '{{datay.name}}',
                        type: 'bar',
                        barWidth: '60%',
                        data: [
                          {% for y in datay.data %}
                              {{ y }}{% if not loop.last %}, {% endif %}
                          {% endfor %}
                        ]
                      }
                      {% endfor %}
                    ]
                  };

                  option && myChart.setOption(option);
                </script>
              </div>
            </div>

          </div>
        {% endif %}
      {% endfor %}




    </div>

    


  </section>
   

  
      {% endblock dashcontent %}
      {% endblock content %}