@extends('layout/main')
@section('title','Poliklinik')

@section('Sidebar')
    @include('layout/sidebar')
@endsection

@section('Content')
<section class="fdb-block py-3" style="background-image: url({{ asset('img/shapes/9.svg') }});">
    <div class="container-fluid">
        @include('layout/topbar')
        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">
                {{ $Sesi->NamaPoli }}
                @foreach ($KunjunganPerHari as $data)
                    <span class="badge badge-info">{{ $data->Jumlah }}</span>
                @endforeach
            </h1>
            <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm">{{ date('d F Y') }}</a>
        </div>

        @if(Session::has('alertSuccess'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong>{{ Session::get('alertSuccess') }}</strong> {{ $Dokter->FirstName }}.
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        @endif
        <!-- Content Row -->

        <div class="row">
            {{-- Card Pasien --}}
        </div>

        <div class="row">

            <!-- Pie Chart -->
            <div class="col-xl-3 col-lg-5">
                <div class="card shadow mb-4 d-none">
                    <img src="{{ asset('img/undraw_profile_pic_ic5t.svg') }}" class="card-img-top" alt="...">
                    <div class="card-body">
                      <p class="card-text">{{ $Dokter->FirstName }}</p>
                    </div>
                </div>

                <!-- Card Jumlah Pasien BPJS -->
                <div class="col-lg-12 mb-4 zoom" id="CardChartBPJS">
                    <div class="card bg-primary text-white shadow">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-uppercase mb-1">Pasien BPJS</div>
                                    @foreach ($TotalKunjunganBPJS as $data)
                                        <div class="h5 mb-0 font-weight-bold">{{ $data->Jumlah }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Jumlah Pasien Non BPJS -->
                <div class="col-lg-12 mb-4 zoom" id="CardChartNonBPJS">
                    <div class="card bg-success text-white shadow">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-uppercase mb-1">Pasien Non BPJS</div>
                                    @foreach ($TotalKunjunganNonBPJS as $data)
                                        <div class="h5 mb-0 font-weight-bold">{{ $data->Jumlah }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Jumlah Pasien Baru -->
                <div class="col-lg-12 mb-4 zoom" id="CardChartPasienBaru">
                    <div class="card bg-orange text-white shadow" style="background-color: rgb(249, 106, 39)">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-uppercase mb-1">Pasien Baru</div>
                                    <div class="row no-gutters align-items-center">
                                        <div class="col-auto">
                                            @foreach ($TotalPasienBaru as $data)
                                                <div class="h5 mb-0 font-weight-bold">{{ $data->Jumlah }}</div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Card Jumlah Pasien Rujuk Ranap -->
                <div class="col-lg-12 mb-4 zoom" id="CardChartPasienRujuk">
                    <div class="card bg-warning text-white shadow">
                        <div class="card-body">
                            <div class="row no-gutters align-items-center">
                                <div class="col mr-2">
                                    <div class="text-xs font-weight-bold text-uppercase mb-1">Rujuk Rawat Inap</div>
                                    @foreach ($PasienRujukan as $data)
                                        <div class="h5 mb-0 font-weight-bold">{{ $data->RujukInap }}</div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Area Chart -->
            <div class="col-xl-9 col-lg-7">
                <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">
                        <h6 class="m-0 font-weight-bold text-primary">Grafik Kunjungan Poliklinik Tahun {{ date('Y') }}</h6>
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">
                        <div class="tab-content" id="pills-tabContent">
                            <div class="chart-area">
                                <canvas id="myAreaChart"></canvas>
                                <canvas id="PasienBPJSAreaChart" class="d-none"></canvas>
                                <canvas id="PasienNonBPJSAreaChart" class="d-none"></canvas>
                                <canvas id="PasienBaruAreaChart" class="d-none"></canvas>
                                <canvas id="PasienRujukRanapAreaChart" class="d-none"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@section('Ajax')
    <script>
        $(document).ready(function() {
            // Set new default font family and font color to mimic Bootstrap's default styling
            Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
            Chart.defaults.global.defaultFontColor = '#858796';

            function number_format(number, decimals, dec_point, thousands_sep) {
                // *     example: number_format(1234.56, 2, ',', ' ');
                // *     return: '1 234,56'
                number = (number + '').replace(',', '').replace(' ', '');
                var n = !isFinite(+number) ? 0 : +number,
                    prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                    sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                    dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                    s = '',
                    toFixedFix = function(n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                    };
                // Fix for IE parseFloat(0.55).toFixed(0) = 0;
                s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
                if (s[0].length > 3) {
                    s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
                }
                if ((s[1] || '').length < prec) {
                    s[1] = s[1] || '';
                    s[1] += new Array(prec - s[1].length + 1).join('0');
                }
                return s.join(dec);
            }

            // Area Chart
            AllAreaChart();
            function AllAreaChart(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/poliklinik/chartkunjunganbytahun') }}',
                    dataType: 'json',
                    success:function(data) {
                        var ctx = document.getElementById("myAreaChart");
                        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        var Label = [];
                        var Jumlah = [];
                        var LabelPenjamin = [];
                        var JumlahPenjamin = [];
                        var JumlahBaru = [];
                        var JumlahRujuk = [];

                        for(var i in data.TotalKunjungan){
                            var bulan = data.TotalKunjungan[i].Bulan;
                            Jumlah.push(data.TotalKunjungan[i].Jumlah);
                            JumlahPenjamin.push(data.TotalKunjunganPenjamin[i].Jumlah);
                            JumlahBaru.push(data.TotalKujunganBaru[i].Jumlah);
                            JumlahRujuk.push(data.TotalKunjunganRujuk[i].RujukInap);

                        }
                        var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data:
                            {
                                labels: months.slice(0, bulan),
                                datasets: [{
                                label: "Pasien BPJS",
                                lineTension: 0.3,
                                backgroundColor: "rgba(78, 115, 223, 0.05)",
                                borderColor: "rgba(78, 115, 223, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                                pointBorderColor: "rgba(78, 115, 223, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: Jumlah,
                            },
                            {
                                label: "Pasien Non BPJS",
                                lineTension: 0.3,
                                backgroundColor: "rgba(28, 200, 138, 0.05)",
                                borderColor: "rgba(28, 200, 138, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(28, 200, 138, 1)",
                                pointBorderColor: "rgba(28, 200, 138, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(28, 200, 138, 1)",
                                pointHoverBorderColor: "rgba(28, 200, 138, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahPenjamin,
                            },
                            {
                                label: "Pasien Baru",
                                lineTension: 0.3,
                                backgroundColor: "rgba(249, 106, 39, 0.05)",
                                borderColor: "rgba(249, 106, 39, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(249, 106, 39, 1)",
                                pointBorderColor: "rgba(249, 106, 39, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(249, 106, 39, 1)",
                                pointHoverBorderColor: "rgba(249, 106, 39, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahBaru,
                            },
                            {
                                label: "Pasien Rujuk Rawat Inap",
                                lineTension: 0.3,
                                backgroundColor: "rgba(246, 194, 62, 0.05)",
                                borderColor: "rgba(246, 194, 62, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(246, 194, 62, 1)",
                                pointBorderColor: "rgba(246, 194, 62, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(246, 194, 62, 1)",
                                pointHoverBorderColor: "rgba(246, 194, 62, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahRujuk,
                            },
                            ],
                        },
                        options: {
                            maintainAspectRatio: false,
                            layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                            },
                            scales: {
                            xAxes: [{
                                time: {
                                unit: 'date'
                                },
                                gridLines: {
                                display: false,
                                drawBorder: false
                                },
                                ticks: {
                                maxTicksLimit: 7
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return number_format(value);
                                }
                                },
                                gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                                }
                            }],
                            },
                            legend: {
                            display: false
                            },
                            tooltips: {
                              backgroundColor: "rgb(255,255,255)",
                              bodyFontColor: "#858796",
                              titleMarginBottom: 10,
                              titleFontColor: '#6e707e',
                              titleFontSize: 14,
                              borderColor: '#dddfeb',
                              borderWidth: 1,
                              xPadding: 15,
                              yPadding: 15,
                              displayColors: true,
                              intersect: true,
                              mode: 'index',
                              caretPadding: 10,
                              callbacks: {
                                label: function(tooltipItem, chart) {
                                  var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                                  return datasetLabel + ' : ' + number_format(tooltipItem.yLabel);
                                }
                              }
                            },
                        }
                        });
                    }
                });
            }

            // Pasien BPJS Area Chart
            BPJSAreaChart();
            function BPJSAreaChart(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/poliklinik/chartkunjunganbytahun') }}',
                    dataType: 'json',
                    success:function(data) {
                        var ctx = document.getElementById("PasienBPJSAreaChart");
                        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        var Label = [];
                        var Jumlah = [];
                        var LabelPenjamin = [];
                        var JumlahPenjamin = [];
                        for(var i in data.TotalKunjungan){
                            var bulan = data.TotalKunjungan[i].Bulan;
                            Jumlah.push(data.TotalKunjungan[i].Jumlah);
                            JumlahPenjamin.push(data.TotalKunjunganPenjamin[i].Jumlah);
                        }
                        var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data:
                            {
                                labels: months.slice(0, bulan),
                                datasets: [{
                                label: "Pasien BPJS",
                                lineTension: 0.3,
                                backgroundColor: "rgba(78, 115, 223, 0.05)",
                                borderColor: "rgba(78, 115, 223, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                                pointBorderColor: "rgba(78, 115, 223, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: Jumlah,
                            }
                            ],
                        },
                        options: {
                            maintainAspectRatio: false,
                            layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                            },
                            scales: {
                            xAxes: [{
                                time: {
                                unit: 'date'
                                },
                                gridLines: {
                                display: false,
                                drawBorder: false
                                },
                                ticks: {
                                maxTicksLimit: 7
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return number_format(value);
                                }
                                },
                                gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                                }
                            }],
                            },
                            legend: {
                            display: false
                            },
                            // tooltips: {
                            //   backgroundColor: "rgb(255,255,255)",
                            //   bodyFontColor: "#858796",
                            //   titleMarginBottom: 10,
                            //   titleFontColor: '#6e707e',
                            //   titleFontSize: 14,
                            //   borderColor: '#dddfeb',
                            //   borderWidth: 1,
                            //   xPadding: 15,
                            //   yPadding: 15,
                            //   displayColors: false,
                            //   intersect: false,
                            //   mode: 'index',
                            //   caretPadding: 10,
                            //   callbacks: {
                            //     label: function(tooltipItem, chart) {
                            //       var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                            //       return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                            //     }
                            //   }
                            // },
                        }
                        });
                    }
                });
            }

            // Pasien Non BPJS Area Chart
            NonBPJSAreaChart();
            function NonBPJSAreaChart(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/poliklinik/chartkunjunganbytahun') }}',
                    dataType: 'json',
                    success:function(data) {
                        var ctx = document.getElementById("PasienNonBPJSAreaChart");
                        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        var Label = [];
                        var Jumlah = [];
                        var LabelPenjamin = [];
                        var JumlahPenjamin = [];
                        for(var i in data.TotalKunjungan){
                            var bulan = data.TotalKunjungan[i].Bulan;
                            Jumlah.push(data.TotalKunjungan[i].Jumlah);
                            JumlahPenjamin.push(data.TotalKunjunganPenjamin[i].Jumlah);
                        }
                        var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data:
                            {
                                labels: months.slice(0, bulan),
                                datasets: [
                            {
                                label: "Pasien Per Penjamin",
                                lineTension: 0.3,
                                backgroundColor: "rgba(28, 200, 138, 0.05)",
                                borderColor: "rgba(28, 200, 138, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(28, 200, 138, 1)",
                                pointBorderColor: "rgba(28, 200, 138, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(28, 200, 138, 1)",
                                pointHoverBorderColor: "rgba(28, 200, 138, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahPenjamin,
                            },
                            ],
                        },
                        options: {
                            maintainAspectRatio: false,
                            layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                            },
                            scales: {
                            xAxes: [{
                                time: {
                                unit: 'date'
                                },
                                gridLines: {
                                display: false,
                                drawBorder: false
                                },
                                ticks: {
                                maxTicksLimit: 7
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return number_format(value);
                                }
                                },
                                gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                                }
                            }],
                            },
                            legend: {
                            display: false
                            },
                            // tooltips: {
                            //   backgroundColor: "rgb(255,255,255)",
                            //   bodyFontColor: "#858796",
                            //   titleMarginBottom: 10,
                            //   titleFontColor: '#6e707e',
                            //   titleFontSize: 14,
                            //   borderColor: '#dddfeb',
                            //   borderWidth: 1,
                            //   xPadding: 15,
                            //   yPadding: 15,
                            //   displayColors: false,
                            //   intersect: false,
                            //   mode: 'index',
                            //   caretPadding: 10,
                            //   callbacks: {
                            //     label: function(tooltipItem, chart) {
                            //       var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                            //       return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                            //     }
                            //   }
                            // },
                        }
                        });
                    }
                });
            }

            // Pasien Baru Area Chart
            PasienBaruAreaChart();
            function PasienBaruAreaChart(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/poliklinik/chartkunjunganbytahun') }}',
                    dataType: 'json',
                    success:function(data) {
                        var ctx = document.getElementById("PasienBaruAreaChart");
                        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        var Label = [];
                        var JumlahBaru = [];
                        for(var i in data.TotalKunjungan){
                            var bulan = data.TotalKunjungan[i].Bulan;
                            JumlahBaru.push(data.TotalKujunganBaru[i].Jumlah);
                        }
                        var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data:
                            {
                                labels: months.slice(0, bulan),
                                datasets: [
                            {
                                label: "Pasien Baru",
                                lineTension: 0.3,
                                backgroundColor: "rgba(249, 106, 39, 0.05)",
                                borderColor: "rgba(249, 106, 39, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(249, 106, 39, 1)",
                                pointBorderColor: "rgba(249, 106, 39, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(249, 106, 39, 1)",
                                pointHoverBorderColor: "rgba(249, 106, 39, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahBaru,
                            },
                            ],
                        },
                        options: {
                            maintainAspectRatio: false,
                            layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                            },
                            scales: {
                            xAxes: [{
                                time: {
                                unit: 'date'
                                },
                                gridLines: {
                                display: false,
                                drawBorder: false
                                },
                                ticks: {
                                maxTicksLimit: 7
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return number_format(value);
                                }
                                },
                                gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                                }
                            }],
                            },
                            legend: {
                            display: false
                            },
                            // tooltips: {
                            //   backgroundColor: "rgb(255,255,255)",
                            //   bodyFontColor: "#858796",
                            //   titleMarginBottom: 10,
                            //   titleFontColor: '#6e707e',
                            //   titleFontSize: 14,
                            //   borderColor: '#dddfeb',
                            //   borderWidth: 1,
                            //   xPadding: 15,
                            //   yPadding: 15,
                            //   displayColors: false,
                            //   intersect: false,
                            //   mode: 'index',
                            //   caretPadding: 10,
                            //   callbacks: {
                            //     label: function(tooltipItem, chart) {
                            //       var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                            //       return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                            //     }
                            //   }
                            // },
                        }
                        });
                    }
                });
            }

            // Pasien Baru Area Chart
            PasienRujukAreaChart();
            function PasienRujukAreaChart(){
                $.ajax({
                    type:'GET',
                    url:'{{ url('/poliklinik/chartkunjunganbytahun') }}',
                    dataType: 'json',
                    success:function(data) {
                        var ctx = document.getElementById("PasienRujukRanapAreaChart");
                        var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
                        var Label = [];
                        var JumlahRujuk = [];
                        for(var i in data.TotalKunjungan){
                            var bulan = data.TotalKunjungan[i].Bulan;
                            JumlahRujuk.push(data.TotalKunjunganRujuk[i].RujukInap);
                        }
                        var myLineChart = new Chart(ctx, {
                        type: 'line',
                        data:
                            {
                                labels: months.slice(0, bulan),
                                datasets: [
                            {
                                label: "Pasien Rujuk Rawat Inap",
                                lineTension: 0.3,
                                backgroundColor: "rgba(246, 194, 62, 0.05)",
                                borderColor: "rgba(246, 194, 62, 1)",
                                pointRadius: 3,
                                pointBackgroundColor: "rgba(246, 194, 62, 1)",
                                pointBorderColor: "rgba(246, 194, 62, 1)",
                                pointHoverRadius: 3,
                                pointHoverBackgroundColor: "rgba(246, 194, 62, 1)",
                                pointHoverBorderColor: "rgba(246, 194, 62, 1)",
                                pointHitRadius: 10,
                                pointBorderWidth: 2,
                                data: JumlahRujuk,
                            },
                            ],
                        },
                        options: {
                            maintainAspectRatio: false,
                            layout: {
                            padding: {
                                left: 10,
                                right: 25,
                                top: 25,
                                bottom: 0
                            }
                            },
                            scales: {
                            xAxes: [{
                                time: {
                                unit: 'date'
                                },
                                gridLines: {
                                display: false,
                                drawBorder: false
                                },
                                ticks: {
                                maxTicksLimit: 7
                                }
                            }],
                            yAxes: [{
                                ticks: {
                                maxTicksLimit: 5,
                                padding: 10,
                                // Include a dollar sign in the ticks
                                callback: function(value, index, values) {
                                    return number_format(value);
                                }
                                },
                                gridLines: {
                                color: "rgb(234, 236, 244)",
                                zeroLineColor: "rgb(234, 236, 244)",
                                drawBorder: false,
                                borderDash: [2],
                                zeroLineBorderDash: [2]
                                }
                            }],
                            },
                            legend: {
                            display: false
                            },
                            // tooltips: {
                            //   backgroundColor: "rgb(255,255,255)",
                            //   bodyFontColor: "#858796",
                            //   titleMarginBottom: 10,
                            //   titleFontColor: '#6e707e',
                            //   titleFontSize: 14,
                            //   borderColor: '#dddfeb',
                            //   borderWidth: 1,
                            //   xPadding: 15,
                            //   yPadding: 15,
                            //   displayColors: false,
                            //   intersect: false,
                            //   mode: 'index',
                            //   caretPadding: 10,
                            //   callbacks: {
                            //     label: function(tooltipItem, chart) {
                            //       var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                            //       return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                            //     }
                            //   }
                            // },
                        }
                        });
                    }
                });
            }




            // Card Button Pasien BPJS
            $('#CardChartBPJS').hover(function(){
                $("#myAreaChart").addClass("d-none");
                $("#PasienBPJSAreaChart").removeClass("d-none");
            }, function(){
                $("#PasienBPJSAreaChart").addClass("d-none");
                $("#myAreaChart").removeClass("d-none");
            });

            // Card Button Pasien Non BPJS
            $('#CardChartNonBPJS').hover(function(){
                $("#myAreaChart").addClass("d-none");
                $("#PasienNonBPJSAreaChart").removeClass("d-none");
            }, function(){
                $("#PasienNonBPJSAreaChart").addClass("d-none");
                $("#myAreaChart").removeClass("d-none");
            });

            // Card Button Pasien Baru
            $('#CardChartPasienBaru').hover(function(){
                $("#myAreaChart").addClass("d-none");
                $('#PasienBaruAreaChart').removeClass("d-none");
            }, function(){
                $("#PasienBaruAreaChart").addClass("d-none");
                $("#myAreaChart").removeClass("d-none");
            });

            // Card Button Pasien Rujuk Ranap
            $('#CardChartPasienRujuk').hover(function(){
                $("#myAreaChart").addClass("d-none");
                $('#PasienRujukRanapAreaChart').removeClass("d-none");
            }, function(){
                $("#PasienRujukRanapAreaChart").addClass("d-none");
                $("#myAreaChart").removeClass("d-none");
            });



        });
    </script>
@endsection