@extends("backend.layout.master")

@section("title")
    Dashboard - Tracking System
@endsection

@section ('content')

<div class="content-wrapper">
  <!-- Content Header (Page header) -->
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6">
          <h1 class="m-0">Dashboard</h1>
        </div><!-- /.col -->
        <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">Dashboard</li>
          </ol>
        </div><!-- /.col -->
      </div><!-- /.row -->
    </div><!-- /.container-fluid -->
  </div>
  <!-- /.content-header -->

  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <!-- Small boxes (Stat box) -->
      <div class="row">
        <div class="col-lg-2 col-6">
          <!-- small box -->
          <div class="small-box bg-info">
            <div class="inner">
              <h3>{{ 0}}</h3>

              <p>Paket</p>
            </div>
            <div class="icon">
              <i class="ion ion-bag"></i>
            </div>
            <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-2 col-6">
          <!-- small box -->
          <div class="small-box bg-success">
            <div class="inner">
              <h3>{{ 0}}</h3>

              <p>Clients</p>
            </div>
            <div class="icon">
              <i class="ion ion-person-add"></i>
            </div>
            <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <div class="col-lg-2 col-6">
          <!-- small box -->
          <div class="small-box bg-warning">
            <div class="inner">
              <h3>{{0}}</h3>

              <p>Client Aktif</p>
            </div>
            <div class="icon">
              <i class="ion ion-stats-bars"></i>
            </div>
            <a href="" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
          </div>
        </div>
        <!-- ./col -->
        <!-- ./col -->
      </div>
      <div class="row">
        <div class="col-md-12">
          <!-- AREA CHART -->
          <!-- <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Order</h3>

              <div class="card-tools">

              </div>
            </div>
            <div class="card-body">
              <div class="chart">
                <canvas id="areaChart" style="min-height: 250px; height: 500px; max-height: 500px; max-width: 100%;"></canvas>
              </div>
            </div>
          </div> -->
          <!-- /.card -->
          <!-- /.card -->

        </div>
      </div>
      <!-- /.row -->
      <!-- Main row -->

      <!-- /.row (main row) -->
    </div><!-- /.container-fluid -->
  </section>
  <!-- /.content -->
</div>

@endsection

@push('js')
<script type="text/javascript">
@if (session('success'))
  toastr.success("{{ session('success') }}")
@endif
        uniChart()
        function uniChart(){
          $.ajax({
              url : "",
              method : "get",
              success : function(reply){
                console.log(reply.data);
                  displayChart(reply);
              }
          });
        }

        function displayChart(result){
          let order = result.order;
          let data = result.data;

          var ctx = document.getElementById('areaChart');
          var myChart = new Chart(ctx, {
              type: 'line',
              data: {
                  labels: result.months,
                  datasets: [{
                      label: order[1],
                      data: data[1],
                      // backgroundColor: 'rgba(255, 99, 132, 0.2)',
                      borderColor: 'rgba(255, 99, 132, 1)',
                      borderWidth: 1
                  },{
                      label: order[2],
                      data: data[2],
                      // backgroundColor: 'rgba(54, 162, 235, 0.2)',
                      borderColor:  'rgba(54, 162, 235, 1)',
                      borderWidth: 1
                  },{
                      label: order[3],
                      data: data[3],
                      // backgroundColor: 'rgba(54, 162, 235, 0.2)',
                      borderColor:  'rgba(100, 100, 100, 1)',
                      borderWidth: 1

                  },{
                      label: order[4],
                      data: data[4],
                      // backgroundColor: 'rgba(255, 206, 86, 0.2)',
                      borderColor: 'rgba(255, 206, 86, 1)',
                      borderWidth: 1
                  }
                ]
              },
              options: {
                      legend: {
                          position: 'chartArea'
                      }
              }
          });
        }



</script>
@endpush