<?php $render('header', ['loggedUser'=>$loggedUser, 'title'=>$titlePage]); ?>
<?=$render('sidebar', [
  'loggedUser'=>$loggedUser, 
  'pageActive'=>$pageActive,
  'permissions'=>$permissions
]);?>

<!-- Content System -->
<div class="content-wrapper">
  <div class="pages">

    <div class="content-home">


        <div id="chartContainer" style="height: 420px; width: 100%;"></div>

        <hr style="margin: 10px 0; width: 100%">

        <div id="chartContainer2" style="height: 420px; width: 100%;"></div>



      <!-- <div class="compare-sales">
        <div class="top">
            <h4>Retiradas</h4>
        </div>

        <div class="center">
          <div class="box-left">
              <?php 
              $i = 0;
              while($i <= 100)  {
                  ?>

                  <div class="value-decreases">
                      <?= number_format(($i * $data['max']) / 100, 2, ',', '.'); ?>
                  </div>

                  <?php
                  $i = $i + 20;
                  }
              ?>
          </div>

          <div class="box-right">

              <?php foreach($data['graphic_this_year'] as $key => $item): ?>

                  <div class="column">
                      <div class="columns-items">
                          <div class="item this" style="height:<?= ($item['percente'] > 0)?$item['percente']."%":'1%'; ?>"></div>

                          <div class="item last" style="height:<?= ($data['graphic_last_year'][$key]['percente'] > 0)?$data['graphic_last_year'][$key]['percente']."%":'1%'; ?>"></div>
                      </div>

                      <div class="value<?= ($key == 11)?' end':''; ?>" id="<?= $key + 1; ?>">
                          <div class="v-this">
                              <?= number_format($item['value'], 2, ',', '.'); ?>
                          </div>
                          <div class="v-last">
                              <?= number_format($data['graphic_last_year'][$key]['value'], 2, ',', '.'); ?>
                          </div>                            
                      </div>

                      <div class="label">
                          <?= $data['months'][$key]; ?>
                      </div>
                      <span class="shost" id="<?= $key + 1; ?>"></span>
                  </div>

              <?php endforeach; ?>

          </div>
        </div>
          
        <div class="botton">
            <div class="this">
                <span></span>
                Este Ano
            </div>
            <div class="last">
                <span></span>
                Ano Passado
            </div>
        </div>
      </div> -->

    <!-- Total Pedidos -->

    <!-- <div class="compare-sales">
        <div class="top">
            <h4>Vendas</h4>
        </div>

        <div class="center">
            <div class="box-left">
                <?php 
                $i = 0;
                while($i <= 100)    {
                    ?>

                    <div class="value-decreases">
                        <?= number_format(($i * $data['max_sale']) / 100, 2, ',', '.'); ?>
                    </div>

                    <?php
                    $i = $i + 20;
                    }
                ?>
            </div>

            <div class="box-right">

                <?php foreach($data['graphic_sale_this_year'] as $key => $item): ?>

                    <div class="column">
                        <div class="columns-items">
                            <div class="item this" style="height:<?= ($item['percente'] > 0)?$item['percente']."%":'1%'; ?>"></div>

                            <div class="item last" style="height:<?= ($data['graphic_sale_last_year'][$key]['percente'] > 0)?$data['graphic_sale_last_year'][$key]['percente']."%":'1%'; ?>"></div>
                        </div>

                        <div class="value_sale<?= ($key == 11)?' end':''; ?>" id="<?= $key + 1; ?>">
                            <div class="v-this">
                                <?= number_format($item['value'], 2, ',', '.'); ?>
                            </div>
                            <div class="v-last">
                                <?= number_format($data['graphic_sale_last_year'][$key]['value'], 2, ',', '.'); ?>
                            </div>                            
                        </div>

                        <div class="label">
                            <?= $data['months'][$key]; ?>
                        </div>
                        <span class="shost_sale" id="<?= $key + 1; ?>"></span>
                    </div>

                <?php endforeach; ?>

            </div>
        </div>
        
        <div class="botton">
            <div class="this">
                <span></span>
                Este Ano
            </div>
            <div class="last">
                <span></span>
                Ano Passado
            </div>
        </div>
      </div>
    </div> -->

  </div>  		
</div>
<!-- Script charjs -->
<script>
    window.onload = function () {
        var arrayData1 = <?= $arrayData1 ?>;
        var arrayData2 = <?= $arrayData2 ?>;

        var arrayData3 = <?= $arrayData3 ?>;
        var arrayData4 = <?= $arrayData4 ?>;
     
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light1",
        title:{
            text: "Retiradas",
            fontFamily: 'arial',
            fontSize: 21
        },
        axisY:{
            includeZero: true
        },
        legend:{
            cursor: "pointer",
            verticalAlign: "bottom",
            horizontalAlign: "right",
            itemclick: toggleDataSeries
        },
        data: [{
            type: "column",
            name: "Este Ano",
            yValueFormatString: "R$ #,##0.#0",
            showInLegend: true,
            dataPoints: arrayData1
        },{
            type: "column",
            name: "Ano Passado",
            yValueFormatString: "R$ #,##0.#0",
            showInLegend: true,
            dataPoints: arrayData2
        }]
    });
    chart.render();    

    var chart2 = new CanvasJS.Chart("chartContainer2", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Vendas",
            fontFamily: 'arial',
            fontWeight: 'normal',
            fontSize: 21
        },
        axisY:{
            includeZero: true
        },
        legend:{
            cursor: "pointer",
            verticalAlign: "bottom",
            horizontalAlign: "right",
            itemclick: toggleDataSeries
        },
        data: [{
            type: "column",
            name: "Este Ano",
            yValueFormatString: "R$ #,##0.#0",
            showInLegend: true,
            dataPoints: arrayData3
        },{
            type: "column",
            name: "Ano Passado",
            yValueFormatString: "R$ #,##0.#0",
            showInLegend: true,
            dataPoints: arrayData4
        }]
    });
    chart2.render();

    function toggleDataSeries(e){
        if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
            e.dataSeries.visible = false;
        }
        else{
            e.dataSeries.visible = true;
        }
        chart.render();
    } 
}
</script>


<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<!-- Script charjs -->

<!-- /.content-system -->

<?=$render('footer');?>