@extends("backend.layout-sticky.master")

@section("title")
    Jumlah Pasien
@endsection


@push('css')
<style>
.header-clear-medium {
  padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
}
</style>
@endpush

@section ('back')
<a href="#" data-back-button="" class="header-icon header-icon-1"><i class="fas fa-arrow-left"></i></a>
@endsection

@section ('content')
<div class="col-xl-6 col-lg-5">
  <div class="card shadow mb-4">
      <!-- Card Header - Dropdown -->
      <div
          class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-info text-white">
          <h6 class="m-0 font-weight-bold text-white">Pasien</h6>

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

        </div>
      </div>
  </div>
</div>
@endsection


@push("js")
<script src="{{asset('adminlte/plugins/chart.js/Chart.min.js')}}"></script>
<script type="text/javascript">

$(function () {
$.ajax({
      url: "{{route('dashboard.chart')}}",
      method: "GET",
      success: function(data) {
        console.log(data);
        var areaChartData = {
          labels  :  data.label,
          datasets: [
            {
              label               : 'Pasien',
              backgroundColor     : 'rgba(60,141,188,0.9)',
              borderColor         : 'rgba(60,141,188,0.8)',
              pointRadius          : false,
              pointColor          : '#3b8bba',
              pointStrokeColor    : 'rgba(60,141,188,1)',
              pointHighlightFill  : '#fff',
              pointHighlightStroke: 'rgba(60,141,188,1)',
              data                : data.data
            },
            // {
            //   label               : 'Total Pasien',
            //   backgroundColor     : 'rgba(210, 214, 222, 1)',
            //   borderColor         : 'rgba(210, 214, 222, 1)',
            //   pointRadius         : false,
            //   pointColor          : 'rgba(210, 214, 222, 1)',
            //   pointStrokeColor    : '#c1c7d1',
            //   pointHighlightFill  : '#fff',
            //   pointHighlightStroke: 'rgba(220,220,220,1)',
            //   data                :  data.data
            // },
          ]
        }
        var barChartCanvas = $('#barChart').get(0).getContext('2d')
        var barChartData = $.extend(true, {}, areaChartData)
        // var temp0 = areaChartData.datasets[0]
        // var temp1 = areaChartData.datasets[1]
        // barChartData.datasets[0] = temp1
        // barChartData.datasets[1] = temp0

        var barChartOptions = {
          responsive              : true,
          maintainAspectRatio     : false,
          datasetFill             : false
        }

        new Chart(barChartCanvas, {
          type: 'bar',
          data: barChartData,
          options: barChartOptions
        })
      }
})

})
</script>

@endpush("js")