@extends('layouts.master')

@section('title', 'Dashboard Page')

@section('content-header','DASHBOARD')

@section('plugin-styles')
<!-- ChartJS -->
<link rel="stylesheet" href="{{asset('plugins/chart.js/Chart.min.css')}}">
@endsection

@section('content')
<!-- Default box -->
<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-chart-bar text-primary"></i> Grafik Proses</h3>
        <div class="card-tools">
            <button type="button" class="btn btn-tool text-info" id="btRefresh"><i class="fas fa-sync-alt"></i></button>
        </div>
    </div>
    <div class="card-body">
        <canvas id="chartProses" style="max-height: 600px; max-width: 100%;"></canvas>
    </div>
    <!-- /.card-body -->
    {{-- <div class="card-footer">
        Footer
    </div> --}}
    <!-- /.card-footer-->
</div>
<!-- /.card -->
@endsection

@section('plugin-scripts')
<script src="{{asset('plugins/daterangepicker/moment.min.js')}}"></script>
<!-- ChartJS -->
<script src="{{asset('plugins/chart.js/Chart.bundle.min.js')}}"></script>
<script src="{{asset('plugins/chart.js/plugins/datalabels/chartjs-plugin-datalabels.min.js')}}"></script>
@endsection

@section('custom-script')
<script type="text/javascript">
    $(function() {
        'use strict';
        var chartColors = {
            red: 'rgba(255, 99, 132, 0.6)',
            orange: 'rgba(255, 159, 64, 0.6)',
            blue: 'rgba(54, 162, 235, 0.6)',
            green: 'rgba(75, 192, 192, 0.6)',
            purple: 'rgba(153, 102, 255, 0.6)',
            yellow: 'rgba(255, 205, 86, 0.6)',
            grey: 'rgba(201, 203, 207, 0.6)'
        };
        var barChartData = {
            labels: ['ENTRY DATA', 'MOBILE', 'ALOKASI', 'CETAK', 'SERAH KEMENAG'],
            datasets: [
                {
                    label: 'KOTA SURABAYA',
                    backgroundColor: chartColors.orange,
                    data: [
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                }, {
                    label: 'KABUPATEN SIDOARJO',
                    backgroundColor: chartColors.blue,
                    data: [
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                }, {
                    label: 'KABUPATEN MOJOKERTO',
                    backgroundColor: chartColors.green,
                    data: [
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                }, {
                    label: 'KOTA MOJOKERTO',
                    backgroundColor: chartColors.purple,
                    data: [
                        0,
                        0,
                        0,
                        0,
                        0
                    ]
                }]
        };

        var chartProses = new Chart($("#chartProses"), {
            type: 'bar',
            data: barChartData,
            options: {
                title: {
                    display: true,
                    text: 'Proses Paspor Haji ' + moment().year()
                },
                tooltips: {
                    mode: 'index',
                    intersect: false
                },
                responsive: true,
                scales: {
                    xAxes: [{
                        stacked: true,
                    }],
                    yAxes: [{
                        stacked: true
                    }]
                }
            }
        });

        function getChartValue() {
            $.ajax({
                url: '{{ url('ajax/data-chart') }}',
                type: 'POST',
            })
            .done(function(dt) {
                barChartData.label = dt.label;
                barChartData.datasets = dt.datasets;
                chartProses.update();
            })
            .fail(function() {
                console.log("error");
            });
            
        }

        getChartValue();

        $("#btRefresh").on('click', function(event) {
            event.preventDefault();
            getChartValue();
        });
    });
</script>
@endsection