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

@section("title")
    Statistik
@endsection


@push('css')
<style>
.header-clear-medium {
  padding-top: calc(70px + (env(safe-area-inset-top))*0.8) !important;
}
.card-statistik{
  height: 300px;
}
.button-active{
  background-color: #04186c !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="container-fluid px-4">

  <div class="row">

    <div class="col-md-4 px-1" >
      <div class="card mb-4 px-0">
        <!-- 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">Filter</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-statistik">

            <div class="row mb-4">
              <div class="col-6 p-1">
                <div class="form-group">
                  <label for="">Start Date</label>
                  <input type="date" class="form-control rounded-round" name="filterstartdate" id="filterstartdate" placeholder="Start Date"/>
                </div>

              </div>
              <div class="col-6 p-1">
                <div class="form-group">
                  <label for="">End Date</label>
                  <input type="date" class="form-control rounded-round" name="filterenddate" id="filterenddate" placeholder="End Date"/>
                </div>
              </div>
            </div>

            <div class="d-flex justify-content-center">
              <div class="col-8 p-0">
                <div class="form-group">
                  <a href="#" class="btn button-active btn-m btn-full mb-1 rounded-xs text-uppercase font-900 shadow-s bg-blue-light filterklinik" data-klinik="0" style="padding: 7px!important; width: 100%!important;">All</a>
                </div>
              </div>
            </div>
            @foreach ($klinik as $value)
            <div class="d-flex justify-content-center">
              <div class="col-8 p-0">
                <div class="form-group">
                  <a href="#" class="btn btn-m btn-full mb-1 rounded-xs text-uppercase font-900 shadow-s bg-blue-light filterklinik" data-klinik="{{$value->id}}" style="padding: 7px!important; width: 100%!important;">{{$value->nama}}</a>
                </div>
              </div>
            </div>
            @endforeach

            <!-- <div class="d-flex justify-content-center">
              <div class="col-8 p-0">
                <div class="form-group">
                  <a href="#" class="btn btn-m btn-full mb-3 rounded-xs text-uppercase font-900 shadow-s bg-blue-light" style="padding: 7px!important; width: 100%!important;">Filter</a>
                </div>
              </div>
            </div> -->
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1" >
      <div class="card mb-4 px-0">
        <!-- 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">Klinik</h6>

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

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Usia Pasien</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-statistik" style="overflow-y: scroll;">
          <table class="table">
            <thead>
              <th>Usia</th>
              <th>Jumlah</th>
            </thead>
            <tbody class="statistik-usia">

            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Diagnosis</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-statistik" style="overflow-y: scroll;">
          <div class="chart-diagnosis">
            <canvas id="horizontalChart" style="height: auto !important; max-width: 100%;"></canvas>

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Tindakan</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-tindakan card-statistik" style="overflow-y: scroll;">
          <div class="chart-tindakan">
            <canvas id="horizontalChartTindakan" style="height: auto !important; max-width: 100%;"></canvas>

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Total Tindakan</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-tindakan card-statistik" style="overflow-y: scroll;">
          <div class="chart-total_tindakan">
            <canvas id="horizontalChartTotalTindakan" style="height: auto !important; max-width: 100%;"></canvas>

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Kontrol</h6>

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

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Pendapatan</h6>

        </div>
        <!-- Card Body -->
        <div class="card-body card-statistik" style="overflow-y: scroll;">
          <div class="chart-pendapatan">
            <canvas id="horizontalChartPendapatan" style="height: auto !important; max-width: 100%;"></canvas>

          </div>
        </div>
      </div>
    </div>

    <div class="col-md-4 px-1">
      <div class="card mb-4 px-0">
        <!-- 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">Wilayah</h6>

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

          </div>
        </div>
      </div>
    </div>

  </div>


</div>
@endsection


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

var today = new Date();

var startdate = "";
var enddate = "";
var klinik_id = 0;

var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();

today = yyyy + '-' + mm + '-' + dd;

var totalTindakanChart
var tindakanChart
var diagnosisChart
var wilayahChart
var controlChart

statistikPasien (klinik_id, startdate, enddate)
statistikDiagnosis (klinik_id, startdate, enddate)
statistikControl (klinik_id, startdate, enddate)
statistikPendapatan (klinik_id, startdate, enddate)
statistikWilayah (klinik_id, startdate, enddate)
statistikUsia (klinik_id, startdate, enddate)
statistikTindakan (klinik_id, startdate, enddate)
statistikTotalTindakan (klinik_id, startdate, enddate)

$('#filterstartdate').change(function(){
    startdate = $("#filterstartdate").val()

    statistikPasien (klinik_id, startdate, enddate)
    statistikDiagnosis (klinik_id, startdate, enddate)
    statistikControl (klinik_id, startdate, enddate)
    statistikPendapatan (klinik_id, startdate, enddate)
    statistikWilayah (klinik_id, startdate, enddate)
    statistikUsia (klinik_id, startdate, enddate)
    statistikTotalTindakan (klinik_id, startdate, enddate)
    statistikTindakan (klinik_id, startdate, enddate)
});

$('#filterenddate').change(function(){
    enddate = $("#filterenddate").val()

    statistikPasien (klinik_id, startdate, enddate)
    statistikDiagnosis (klinik_id, startdate, enddate)
    statistikControl (klinik_id, startdate, enddate)
    statistikPendapatan (klinik_id, startdate, enddate)
    statistikWilayah (klinik_id, startdate, enddate)
    statistikUsia (klinik_id, startdate, enddate)
    statistikTotalTindakan (klinik_id, startdate, enddate)
    statistikTindakan (klinik_id, startdate, enddate)
});

$('.filterklinik').click(function(){
    klinik_id = $(this).attr("data-klinik")

    $('.filterklinik').removeClass("button-active")
    $(this).addClass("button-active")

    statistikPasien (klinik_id, startdate, enddate)
    statistikDiagnosis (klinik_id, startdate, enddate)
    statistikControl (klinik_id, startdate, enddate)
    statistikPendapatan (klinik_id, startdate, enddate)
    statistikWilayah (klinik_id, startdate, enddate)
    statistikUsia (klinik_id, startdate, enddate)
    statistikTotalTindakan (klinik_id, startdate, enddate)
    statistikTindakan (klinik_id, startdate, enddate)

});

$(document).ready(function(){
  $(".chart-total_tindakan").on("click", "canvas#horizontalChartTotalTindakan", function(evt){
			var activePoints = totalTindakanChart.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
			var label = totalTindakanChart.data.labels[firstPoint._index];
			var value = totalTindakanChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
			if (firstPoint !== undefined)
			   window.location.href = "/dashboard/statistik/totalTindakan/"+label+"/"+klinik_id
  });


$(".chart-tindakan").on("click", "canvas#horizontalChartTindakan", function(evt){
			var activePoints = tindakanChart.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
			var label = tindakanChart.data.labels[firstPoint._index];
			var value = tindakanChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
			if (firstPoint !== undefined)
			   window.location.href = "/dashboard/statistik/tindakan/"+label+"/"+klinik_id
});

$(".chart-diagnosis").on("click", "canvas#horizontalChart", function(evt){
			var activePoints = diagnosisChart.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
			var label = diagnosisChart.data.labels[firstPoint._index];
			var value = diagnosisChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
			if (firstPoint !== undefined)
			   window.location.href = "/dashboard/statistik/diagnosis/"+label+"/"+klinik_id
});

$(".chart-kontrol").on("click", "canvas#horizontalChartControl", function(evt){
			var activePoints = controlChart.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
			var label = controlChart.data.labels[firstPoint._index];
			var value = controlChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
			if (firstPoint !== undefined)
			   window.location.href = "/dashboard/statistik/control/"+label+"/"+klinik_id
});

$(".chart-wilayah").on("click", "canvas#horizontalChartWilayah", function(evt){
			var activePoints = wilayahChart.getElementsAtEvent(evt);
			var firstPoint = activePoints[0];
			var label = wilayahChart.data.labels[firstPoint._index];
			var value = wilayahChart.data.datasets[firstPoint._datasetIndex].data[firstPoint._index];
			if (firstPoint !== undefined)
			   window.location.href = "/dashboard/statistik/wilayah/"+label+"/"+klinik_id
});
});
function statistikUsia () {
  $.ajax({
        url: "{{route('dashboard.statistik.statistikUsia')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
        method: "GET",
        success: function(data) {
          let html = ""

          $.each(data.data, function(k,v){
            link = "https://klinik.olviadental.id/dashboard/statistik/usia/"+k+"/"+klinik_id;
            html += `
            <tr>
              <td><a href="`+link+`">`+data.usia[k]+`</a></td>
              <td>`+v+`</td>
            </tr>
            `
          })

          $(".statistik-usia").html(html)
        }
  })
}

function statistikPasien () {
  $('#barChart').remove(); // this is my <canvas> element
  $('.chart-pasien').append('<canvas id="barChart" style="min-height: 250px; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikPasien')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {


            var areaChartData = {
              labels  :  data.label,
              datasets: [
                {
                  label               : 'Pasien',
                  backgroundColor     : [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                  ],
                  borderColor         : [
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barChartCanvas = $('#barChart').get(0).getContext('2d')
            var barChartData = $.extend(true, {}, areaChartData)

            var barChartOptions = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
              },
              legend: {
                display: false
             },
            }

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

          }
    })

}

function statistikDiagnosis (klinik_id, startdate, enddate) {
  $('#horizontalChart').remove(); // this is my <canvas> element
  $('.chart-diagnosis').append('<canvas id="horizontalChart" style="height: 1500px !important; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikDiagnosis')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartData = {
              labels  :  data.label,
              datasets: [
                {
                  axis                : 'y',
                  label               : 'Diagnosis',
                  backgroundColor     : [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                  ],
                  borderColor         : [
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvas = $('#horizontalChart').get(0).getContext('2d')
            var barHorizontalChartData = $.extend(true, {}, areaHorizontalChartData)

            var barHorizontalChartOptions = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
              },
              legend: {
                display: false
               },
              indexAxis: 'y',
              // tooltips: {
              //     enabled: false // <-- this option disables tooltips
              // },
              hover: {
                  mode: null // <-- this option disables tooltips
              }
            }

            diagnosisChart = new Chart(barHorizontalChartCanvas, {
              type: 'horizontalBar',
              data: barHorizontalChartData,
              options: barHorizontalChartOptions
            })
          }
    })

}

function statistikTindakan (klinik_id, startdate, enddate) {
  $('#horizontalChartTindakan').remove(); // this is my <canvas> element
  $('.chart-tindakan').append('<canvas id="horizontalChartTindakan" style="height: 1500px !important; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikTindakan')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartDataTindakan = {
              labels  :  data.label,
              datasets: [
                {
                  axis                : 'y',
                  label               : 'Tindakan',
                  backgroundColor     : [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                  ],
                  borderColor         : [
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvasTindakan = $('#horizontalChartTindakan').get(0).getContext('2d')
            var barHorizontalChartDataTindakan = $.extend(true, {}, areaHorizontalChartDataTindakan)

            var barHorizontalChartOptionsTindakan = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                        return "Rp. " + tooltipItem.xLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                    }
                }
            },
              scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
              },
              legend: {
                display: false
               },
              indexAxis: 'y',
              // tooltips: {
              //     enabled: false // <-- this option disables tooltips
              // },
              hover: {
                  mode: null // <-- this option disables tooltips
              }
            }

            tindakanChart = new Chart(barHorizontalChartCanvasTindakan, {
              type: 'horizontalBar',
              data: barHorizontalChartDataTindakan,
              options: barHorizontalChartOptionsTindakan
            })
          }
    })

}

function statistikTotalTindakan (klinik_id, startdate, enddate) {
  $('#horizontalChartTotalTindakan').remove(); // this is my <canvas> element
  $('.chart-total_tindakan').append('<canvas id="horizontalChartTotalTindakan" style="height: 1500px !important; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikTotalTindakan')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartDataTotalTindakan = {
              labels  :  data.label,
              datasets: [
                {
                  axis                : 'y',
                  label               : 'Total Tindakan',
                  backgroundColor     : [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                  ],
                  borderColor         : [
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvasTotalTindakan = $('#horizontalChartTotalTindakan').get(0).getContext('2d')
            var barHorizontalChartDataTotalTindakan = $.extend(true, {}, areaHorizontalChartDataTotalTindakan)

            var barHorizontalChartOptionsTotalTindakan = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
              },
              legend: {
                display: false
               },
              indexAxis: 'y',
              // tooltips: {
              //     enabled: false // <-- this option disables tooltips
              // },
              hover: {
                  mode: null // <-- this option disables tooltips
              }
            }

            totalTindakanChart = new Chart(barHorizontalChartCanvasTotalTindakan, {
              type: 'horizontalBar',
              data: barHorizontalChartDataTotalTindakan,
              options: barHorizontalChartOptionsTotalTindakan
            })
          }
    })

}

function statistikControl (klinik_id, startdate, enddate) {
  $('#horizontalChartControl').remove(); // this is my <canvas> element
  $('.chart-kontrol').append('<canvas id="horizontalChartControl" style="min-height: 250px; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikControl')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartDataControl = {
              labels  :  data.label,
              datasets: [
                {
                  label               : 'Control',
                  backgroundColor     : [
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                  ],
                  borderColor         : [
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvasControl = $('#horizontalChartControl').get(0).getContext('2d')
            var barHorizontalChartDataControl = $.extend(true, {}, areaHorizontalChartDataControl)

            var barHorizontalChartOptionsControl = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],

              },
              legend: {
                display: false
               },
            }

            controlChart = new Chart(barHorizontalChartCanvasControl, {
              type: 'bar',
              data: barHorizontalChartDataControl,
              options: barHorizontalChartOptionsControl
            })
          }
    })

}

function statistikPendapatan (klinik_id, startdate, enddate) {

  $('#horizontalChartPendapatan').remove(); // this is my <canvas> element
  $('.chart-pendapatan').append('<canvas id="horizontalChartPendapatan" style="height: 400px !important; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikPendapatan')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartDataPendapatan = {
              labels  :  data.label,
              datasets: [
                {
                  axis                : 'y',
                  label               : 'Pendapatan',
                  backgroundColor     : [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(201, 203, 207, 0.2)'
                  ],
                  borderColor         : [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(201, 203, 207)'
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvasPendapatan = $('#horizontalChartPendapatan').get(0).getContext('2d')
            var barHorizontalChartDataPendapatan = $.extend(true, {}, areaHorizontalChartDataPendapatan)

            var barHorizontalChartOptionsPendapatan = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              tooltips: {
                callbacks: {
                    label: function(tooltipItem) {
                        return "Rp. " + tooltipItem.xLabel.toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');
                    }
                }
            },
              scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
              },
              legend: {
                display: false
               },
              indexAxis: 'y',
            }

            new Chart(barHorizontalChartCanvasPendapatan, {
              type: 'horizontalBar',
              data: barHorizontalChartDataPendapatan,
              options: barHorizontalChartOptionsPendapatan
            })
          }
    })

}

function statistikWilayah (klinik_id, startdate, enddate) {
  $('#horizontalChartWilayah').remove(); // this is my <canvas> element
  $('.chart-wilayah').append('<canvas id="horizontalChartWilayah" style="min-height: 250px; max-width: 100%;"></canvas>');

    $.ajax({
          url: "{{route('dashboard.statistik.statistikWilayah')}}?klinik_id="+klinik_id+"&startdate="+startdate+"&enddate="+enddate,
          method: "GET",
          success: function(data) {

            var areaHorizontalChartDataWilayah = {
              labels  :  data.label,
              datasets: [
                {
                  axis                : 'y',
                  label               : 'Wilayah',
                  backgroundColor     : [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(255, 159, 64, 0.2)',
                    'rgba(255, 205, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(201, 203, 207, 0.2)'
                  ],
                  borderColor         : [
                    'rgb(255, 99, 132)',
                    'rgb(255, 159, 64)',
                    'rgb(255, 205, 86)',
                    'rgb(75, 192, 192)',
                    'rgb(54, 162, 235)',
                    'rgb(153, 102, 255)',
                    'rgb(201, 203, 207)'
                  ],
                  borderWidth         : 1,
                  pointRadius         : false,
                  pointColor          : '#3b8bba',
                  pointStrokeColor    : 'rgba(60,141,188,1)',
                  pointHighlightFill  : '#fff',
                  pointHighlightStroke: 'rgba(60,141,188,1)',
                  data                : data.data
                },

              ]

            }
            var barHorizontalChartCanvasWilayah = $('#horizontalChartWilayah').get(0).getContext('2d')
            var barHorizontalChartDataWilayah = $.extend(true, {}, areaHorizontalChartDataWilayah)

            var barHorizontalChartOptionsWilayah = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : false,
              scales: {
                xAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }],
                yAxes: [{
                    stacked: true
                }]
              },
              legend: {
                display: false
               },
              indexAxis: 'y',
            }

            wilayahChart = new Chart(barHorizontalChartCanvasWilayah, {
              type: 'horizontalBar',
              data: barHorizontalChartDataWilayah,
              options: barHorizontalChartOptionsWilayah
            })
          }
    })

}
</script>

@endpush("js")