@push('link_script')
    <script src="{{ asset('assets/js/plugins/apexcharts.min.js') }}"></script>
@endpush
@push('script')
    @include('admin.dashboard.includes.table_activity')
    @if (auth()->user()->hasRole('user'))
        @include('admin.dashboard.includes.table_riwayat')
    @endif
    <script>
        var tbSeoSpamLog = $('#table-seo-spam-log').DataTable({
            language: {
                processing: '<div class="m-2 spinner-border text-success" role="status"></div>'
            },
            scrollX: !0,
            "aLengthMenu": [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('seo-spam-log.datatables') }}",
                cache: true
            },
            search: {
                "regex": true
            },
            "order": [
                [0, "desc"]
            ],
            columns: [{
                    data: null,
                    className: 'text-center w-10',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'keyword',
                    name: 'keyword',
                    orderable: false,
                },
                {
                    data: 'user_agent',
                    name: 'user_agent',
                    orderable: false,
                },
                {
                    data: 'ip_address',
                    name: 'ip_address',
                    orderable: false,
                },
                {
                    data: 'request_uri',
                    name: 'request_uri',
                    orderable: false,
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: null,
                    name: null,
                    render: function(data, type, row) {
                        return `-`;
                    },
                },
            ],
            initComplete: function() {
                var api = this.api();

                api.columns([1, 2, 3, 4]).every(function() {
                    var that = this;
                    var input = $(
                            '<input type="text" class="form-control form-control-sm" placeholder="Cari...">'
                        )
                        .appendTo($(that.header()))
                        .on('keyup change', function() {
                            var value = this.value;
                            if (that.search() !== value) {
                                that.search(value).draw();
                            }
                        });
                });
            }
        });

        tbSeoSpamLog.on('draw', function(e, obj) {
            var start = obj.oAjaxData.start;
            var no = start + 1;
            tbSeoSpamLog.column(0).nodes().each(function(cell, i) {
                cell.innerHTML = i + no;
            })
        });

        var tbKeywords = $('#table-keywords-spam').DataTable({
            language: {
                processing: '<div class="m-2 spinner-border text-success" role="status"></div>'
            },
            scrollX: !0,
            "aLengthMenu": [
                [10, 25, 50, 100, 200, -1],
                [10, 25, 50, 100, 200, "All"]
            ],
            processing: true,
            serverSide: true,
            ajax: {
                url: "{{ route('keywords-spam.datatables') }}",
                cache: true
            },
            search: {
                "regex": true
            },
            "order": [
                [0, "desc"]
            ],
            columns: [{
                    data: null,
                    className: 'text-center w-10',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'keyword',
                    name: 'keyword',
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                },
                {
                    data: null,
                    name: null,
                    render: function(data, type, row) {
                        return `-`;
                    },
                },
            ],
            initComplete: function() {
                var api = this.api();

                api.columns([1]).every(function() {
                    var that = this;
                    var input = $(
                            '<input type="text" class="form-control form-control-sm" placeholder="Cari...">'
                        )
                        .appendTo($(that.header()))
                        .on('keyup change', function() {
                            var value = this.value;
                            if (that.search() !== value) {
                                that.search(value).draw();
                            }
                        });
                });
            }
        });

        tbKeywords.on('draw', function(e, obj) {
            var start = obj.oAjaxData.start;
            var no = start + 1;
            tbKeywords.column(0).nodes().each(function(cell, i) {
                cell.innerHTML = i + no;
            })
        });

        @if (auth()->user()->hasRole(['super_admin', 'admin']))

            'use strict';
            document.addEventListener('DOMContentLoaded', function() {
                // floatchart()
                barChart('yearly');
                barChartBerobat('yearly');

                document.getElementById('filter').addEventListener('change', function() {
                    const filter = this.value;
                    barChart(filter);
                });
                document.getElementById('filter-berobat').addEventListener('change', function() {
                    const filter = this.value;
                    barChartBerobat(filter);
                });
            });

            // let chartDonutBerita = null;

            // function floatchart() {
            //     (function() {
            //         fetch('/dashboard/category-chart', {
            //                 method: 'GET',
            //                 headers: {
            //                     'Content-Type': 'application/json',
            //                     'Accept': 'application/json',
            //                 },
            //             })
            //             .then(response => {
            //                 if (!response.ok) {
            //                     throw new Error('Network response was not ok ' + response.statusText);
            //                 }
            //                 return response.json();
            //             })
            //             .then(data => {

            //                 var totalBerita = data.series.reduce((acc, val) => acc + val, 0);
            //                 var options = {
            //                     chart: {
            //                         height: 300,
            //                         type: 'donut'
            //                     },
            //                     dataLabels: {
            //                         enabled: false
            //                     },
            //                     legend: {
            //                         show: true,
            //                         position: 'bottom'
            //                     },
            //                     plotOptions: {
            //                         pie: {
            //                             donut: {
            //                                 size: '65%'
            //                             }
            //                         }
            //                     },
            //                     labels: data.labels,
            //                     series: data.series,
            //                     tooltip: {
            //                         y: {
            //                             formatter: function(val) {
            //                                 return val + ' total berita';
            //                             }
            //                         }
            //                     }
            //                 };
            //                 if (chartDonutBerita) {
            //                     chartDonutBerita.updateOptions({
            //                         labels: data.labels,
            //                         series: data.series,
            //                     }, true, true);
            //                 } else {
            //                     chartDonutBerita = new ApexCharts(document.querySelector('#category-donut-chart'),
            //                         options);
            //                     chartDonutBerita.render();
            //                 }

            //             })
            //             .catch(error => {
            //                 console.error('There was a problem with the fetch operation:', error);
            //             });


            //     })();
            // }

            let chartBarBerita = null;

            function barChart(filter = 'yearly') {
                (function() {
                    document.getElementById('loading-chart').style.display = 'block';
                    document.getElementById('chart-bar-berita').style.display = 'none';
                    fetch('/dashboard/berita-chart?filter=' + filter, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                            },
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok ' + response.statusText);
                            }
                            return response.json();
                        })
                        .then(data => {
                            var getData = data.data;

                            document.getElementById('chart-bar-berita').style.display = 'block';

                            var options = {
                                chart: {
                                    type: 'bar',
                                    height: 210,
                                    toolbar: {
                                        show: false
                                    }
                                },
                                plotOptions: {
                                    bar: {
                                        columnWidth: '70%',
                                        borderRadius: 2
                                    }
                                },
                                fill: {
                                    opacity: [1, 0.4]
                                },
                                stroke: {
                                    show: true,
                                    width: 3,
                                    colors: ['transparent']
                                },
                                dataLabels: {
                                    enabled: true
                                },
                                legend: {
                                    position: 'top',
                                    horizontalAlign: 'right',
                                    show: true,
                                    fontFamily: `'Public Sans', sans-serif`,
                                    offsetX: 10,
                                    offsetY: 10,
                                    labels: {
                                        useSeriesColors: false
                                    },
                                    markers: {
                                        width: 10,
                                        height: 10,
                                        radius: '50%',
                                        offsexX: 2,
                                        offsexY: 2
                                    },
                                    itemMargin: {
                                        horizontal: 15,
                                        vertical: 5
                                    }
                                },
                                colors: getData.colors,
                                series: [{
                                    name: 'Berita',
                                    data: getData.series
                                }],
                                grid: {
                                    borderColor: '#00000010'
                                },
                                yaxis: {
                                    show: false
                                },
                                xaxis: {
                                    categories: getData.labels
                                }
                            };

                            if (chartBarBerita) {
                                chartBarBerita.updateOptions({
                                    xaxis: {
                                        categories: getData.labels
                                    },
                                    series: [{
                                        name: 'Berita',
                                        data: getData.series
                                    }],
                                    colors: getData.colors
                                }, true, true);
                            } else {
                                chartBarBerita = new ApexCharts(document.querySelector('#chart-bar-berita'),
                                    options);
                                chartBarBerita.render();
                            }

                        })
                        .finally(() => {
                            document.getElementById('loading-chart').style.display = 'none';
                            document.getElementById('chart-bar-berita').style.display = 'block';
                        })
                        .catch(error => {
                            console.error('There was a problem with the fetch operation:', error);
                        });
                })();
            }

            let chartBarBerobat = null;

            function barChartBerobat(filter = 'yearly') {
                (function() {
                    document.getElementById('loading-chart-berobat').style.display = 'block';
                    document.getElementById('chart-bar-berobat').style.display = 'none';
                    fetch('/dashboard/berobat-chart?filter=' + filter, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                            },
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok ' + response.statusText);
                            }
                            return response.json();
                        })
                        .then(data => {
                            var getData = data.data;

                            document.getElementById('chart-bar-berobat').style.display = 'block';

                            var options = {
                                chart: {
                                    type: 'bar',
                                    height: 210,
                                    toolbar: {
                                        show: false
                                    }
                                },
                                plotOptions: {
                                    bar: {
                                        columnWidth: '70%',
                                        borderRadius: 2
                                    }
                                },
                                fill: {
                                    opacity: [1, 0.4]
                                },
                                stroke: {
                                    show: true,
                                    width: 3,
                                    colors: ['transparent']
                                },
                                dataLabels: {
                                    enabled: true,
                                    formatter: function(val) {
                                        return Number.isInteger(val) ? val : Math.round(val);
                                    }
                                },
                                legend: {
                                    position: 'top',
                                    horizontalAlign: 'right',
                                    show: true,
                                    fontFamily: `'Public Sans', sans-serif`,
                                    offsetX: 10,
                                    offsetY: 10,
                                    labels: {
                                        useSeriesColors: false
                                    },
                                    markers: {
                                        width: 10,
                                        height: 10,
                                        radius: '50%',
                                        offsexX: 2,
                                        offsexY: 2
                                    },
                                    itemMargin: {
                                        horizontal: 15,
                                        vertical: 5
                                    }
                                },
                                colors: getData.colors,
                                series: [{
                                    name: 'Jumlah kontrol pasien',
                                    data: getData.series
                                }],
                                grid: {
                                    borderColor: '#00000010'
                                },
                                yaxis: {
                                    show: false,
                                    labels: {
                                        formatter: function(val) {
                                            return parseInt(val) + ' orang';
                                        }
                                    }
                                },
                                xaxis: {
                                    categories: getData.labels
                                }
                            };

                            if (chartBarBerobat) {
                                chartBarBerobat.updateOptions({
                                    xaxis: {
                                        categories: getData.labels
                                    },
                                    series: [{
                                        name: 'Jumlah kontrol pasien',
                                        data: getData.series
                                    }],
                                    colors: getData.colors
                                }, true, true);
                            } else {
                                chartBarBerobat = new ApexCharts(document.querySelector('#chart-bar-berobat'),
                                    options);
                                chartBarBerobat.render();
                            }

                        })
                        .finally(() => {
                            document.getElementById('loading-chart-berobat').style.display = 'none';
                            document.getElementById('chart-bar-berobat').style.display = 'block';
                        })
                        .catch(error => {
                            console.error('There was a problem with the fetch operation:', error);
                        });
                })();
            }
        @endif
    </script>
@endpush