@extends('template.template')

@section('title', 'Dashboard')

@section('content')
    <div class="row">
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3 class="card-title">TOTAL PASIEN HARI INI</h3>
                    <div class="card-toolbar gap-2">
                        <span id="total_pasien_today" class="fs-2">N/A</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card card-bordered">
                        <div class="card-body">
                            <div id="total_pasien" style="height: 350px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header">
                    <h3 class="card-title">TOTAL PENDAPATAN HARI INI</h3>
                    <div class="card-toolbar gap-2">
                        <span id="total_fund_today" class="fs-2">N/A</span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card card-bordered">
                        <div class="card-body">
                            <div id="total_fund" style="height: 350px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('custom_js')
    <script>
        $(document).ready(function() {
            get_data();
        });

        function get_data() {
            get_total_pasien();
            get_total_fund();
        }

        function get_total_pasien() {
            $.ajax({
                url: "{{ url('/dashboard/get_total_pasien') }}",
                type: "GET",
                dataType: 'JSON',
                success: function(response) {
                    if (response.status) {
                        const data = response.data;
                        $('#total_pasien_today').html(data.total_today.total + ' Orang');

                        const categories = [];
                        const series = [];
                        const chart = data.chart;
                        chart.map(function(value){
                            categories.push(value.registrasi_tanggal);
                            series.push(value.total);
                        });
                        generate_Chart_total_pasien(categories, series)
                    }
                },
                error: function(xhr) {

                }
            });
        }

        function get_total_fund() {
            $.ajax({
                url: "{{ url('/dashboard/get_total_fund') }}",
                type: "GET",
                dataType: 'JSON',
                success: function(response) {
                    if (response.status) {
                        const data = response.data;
                        $('#total_fund_today').html('Rp' + data.total_today.total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."));

                        const categories = [];
                        const series = [];
                        const chart = data.chart;
                        chart.map(function(value){
                            categories.push(value.tanggal);
                            series.push(value.total);
                        });
                        generate_Chart_total_fund(categories, series)
                    }
                },
                error: function(xhr) {

                }
            });
        }

        function generate_Chart_total_pasien(categories, series) {
            var element = document.getElementById('total_pasien');

            var height = parseInt(KTUtil.css(element, 'height'));
            var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
            var borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
            var baseColor = KTUtil.getCssVariableValue('--kt-info');
            var lightColor = KTUtil.getCssVariableValue('--kt-info-light');

            // if (!element) {
            //     return;
            // }

            var options = {
                series: [{
                    name: 'Total Pasien',
                    data: series
                }],
                chart: {
                    fontFamily: 'inherit',
                    type: 'area',
                    height: height,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {

                },
                legend: {
                    show: false
                },
                dataLabels: {
                    enabled: false
                },
                fill: {
                    type: 'solid',
                    opacity: 1
                },
                stroke: {
                    curve: 'smooth',
                    show: true,
                    width: 3,
                    colors: [baseColor]
                },
                xaxis: {
                    categories: categories,
                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '12px'
                        }
                    },
                    crosshairs: {
                        position: 'front',
                        stroke: {
                            color: baseColor,
                            width: 1,
                            dashArray: 3
                        }
                    },
                    tooltip: {
                        enabled: true,
                        formatter: undefined,
                        offsetY: 0,
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '12px'
                        }
                    }
                },
                states: {
                    normal: {
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    },
                    hover: {
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    },
                    active: {
                        allowMultipleDataPointsSelection: false,
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    }
                },
                tooltip: {
                    style: {
                        fontSize: '12px'
                    },
                    y: {
                        formatter: function(val) {
                            return val + ' Orang'
                        }
                    }
                },
                colors: [lightColor],
                grid: {
                    borderColor: borderColor,
                    strokeDashArray: 4,
                    yaxis: {
                        lines: {
                            show: true
                        }
                    }
                },
                markers: {
                    strokeColor: baseColor,
                    strokeWidth: 3
                }
            };

            var chart = new ApexCharts(element, options);
            chart.render();
        }

        function generate_Chart_total_fund(categories, series) {
            var element = document.getElementById('total_fund');

            var height = parseInt(KTUtil.css(element, 'height'));
            var labelColor = KTUtil.getCssVariableValue('--kt-gray-500');
            var borderColor = KTUtil.getCssVariableValue('--kt-gray-200');
            var baseColor = KTUtil.getCssVariableValue('--kt-info');
            var lightColor = KTUtil.getCssVariableValue('--kt-info-light');

            // if (!element) {
            //     return;
            // }

            var options = {
                series: [{
                    name: 'Total Pendapatan',
                    data: series
                }],
                chart: {
                    fontFamily: 'inherit',
                    type: 'area',
                    height: height,
                    toolbar: {
                        show: false
                    }
                },
                plotOptions: {

                },
                legend: {
                    show: false
                },
                dataLabels: {
                    enabled: false
                },
                fill: {
                    type: 'solid',
                    opacity: 1
                },
                stroke: {
                    curve: 'smooth',
                    show: true,
                    width: 3,
                    colors: [baseColor]
                },
                xaxis: {
                    categories: categories,
                    axisBorder: {
                        show: false,
                    },
                    axisTicks: {
                        show: false
                    },
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '12px'
                        }
                    },
                    crosshairs: {
                        position: 'front',
                        stroke: {
                            color: baseColor,
                            width: 1,
                            dashArray: 3
                        }
                    },
                    tooltip: {
                        enabled: true,
                        formatter: undefined,
                        offsetY: 0,
                        style: {
                            fontSize: '12px'
                        }
                    }
                },
                yaxis: {
                    labels: {
                        style: {
                            colors: labelColor,
                            fontSize: '12px'
                        }
                    }
                },
                states: {
                    normal: {
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    },
                    hover: {
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    },
                    active: {
                        allowMultipleDataPointsSelection: false,
                        filter: {
                            type: 'none',
                            value: 0
                        }
                    }
                },
                tooltip: {
                    style: {
                        fontSize: '12px'
                    },
                    y: {
                        formatter: function(val) {
                            return 'Rp.' + val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                        }
                    }
                },
                colors: [lightColor],
                grid: {
                    borderColor: borderColor,
                    strokeDashArray: 4,
                    yaxis: {
                        lines: {
                            show: true
                        }
                    }
                },
                markers: {
                    strokeColor: baseColor,
                    strokeWidth: 3
                }
            };

            var chart = new ApexCharts(element, options);
            chart.render();
        }
    </script>
@endsection