@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">

            <h4 class="page-title">Selamat Datang Di Desa - </h4>
            <ol class="breadcrumb">
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 col-lg-3">
            <div class="widget-bg-color-icon card-box fadeInDown animated">
                <div class="bg-icon bg-icon-info pull-left">
                    <i class="fa fa-users text-info"></i>
                </div>
                <div class="text-right">
                    <h3 class="text-dark"><b class="counter"></b></h3>
                    <p class="text-muted"><b>Total Penduduk</b></p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-bg-color-icon card-box">
                <div class="bg-icon bg-icon-pink pull-left">
                    <i class="fa  fa-female text-pink"></i>
                </div>
                <div class="text-right">
                    <h3 class="text-dark"><b class="counter"></b></h3>
                    <p class="text-muted"><b>Penduduk Wanita</b></p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-bg-color-icon card-box">
                <div class="bg-icon bg-icon-purple pull-left">
                    <i class="fa fa-male text-purple"></i>
                </div>
                <div class="text-right">
                    <h3 class="text-dark"><b class="counter"></b></h3>
                    <p class="text-muted"><b>Penduduk Pria</b></p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-md-6 col-lg-3">
            <div class="widget-bg-color-icon card-box">
                <div class="bg-icon bg-icon-success pull-left">
                    <i class="md md-remove-red-eye text-success"></i>
                </div>
                <div class="text-right">
                    <h3 class="text-dark"><b class="counter"></b></h3>
                    <p class="text-muted"><b>Kepala Keluarga</b></p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="card-box">
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Urutkan <span class="m-l-5"><i class="fa  fa-sort"></i></span></button>
                    <ul class="tahunDataMiskin dropdown-menu drop-menu-right" role="menu">
                        
                    </ul>
                </div>
                <h4 class="text-dark header-title m-t-0">Grafik Data Penduduk Tidak Mampu</h4>
                <canvas id="dataMiskin" height="322"></canvas>
            </div>
        </div>
        <div class="col-lg-12">
            <div class="card-box">
                
                <div class="btn-group pull-right m-t-15">
                    <button type="button" class="btn btn-default dropdown-toggle waves-effect waves-light" data-toggle="dropdown" aria-expanded="false">Urutkan <span class="m-l-5"><i class="fa  fa-sort"></i></span></button>
                    <ul class="tahunDataPekerjaan dropdown-menu drop-menu-right" role="menu">
                        
                    </ul>
                </div>
                <h4 class="text-dark header-title m-t-0">Grafik Jumlah Penduduk Berdasarkan Pekerjaan</h4>
                <canvas id="barPenduduk" height="322"></canvas>
            </div>
        </div>
    </div>
    <!-- <div class="row">
        
    </div> -->
    <script type="text/javascript">
        var labels = [];
        var data = [];
        var backgroundColor = [];
        var hoverBackgroundColor = [];
        var dataChart = {
            labels: labels,
            datasets: [
                {
                    data: data,
                    backgroundColor: backgroundColor,
                    hoverBackgroundColor: hoverBackgroundColor,
                    hoverBorderColor: "#fff"
                }
            ]
        };

        function generateChart(ctx, type, options = null) {
            new Chart(ctx, {
                type: type, 
                data: {
                    labels : labels,
                    datasets : [
                        {
                            data : data,
                            backgroundColor : backgroundColor,
                            hoverBackgroundColor : hoverBackgroundColor,
                            hoverBorderColor : '#fff'
                        }
                    ]
                }, 
                options: options
            });
        }

        var barLabels = [];
        var barLabelsHroup = [];
        var dataSetForBars = [];
        var dataSetForBarsGroup = [];
        var backgroundColorBar = [];
        var backgroundColorBarGroup = [];
        var UselessDataSet = new Array();
        var UselessDataSetGroup = new Array();
        var tahunBar = null;
        var useless;
        var chartGroup = '';
        var publicResponse = '';
        var publicResponseGroup = '';

        function generateChartBar(ctx) {
            useless = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels : barLabels,
                    datasets : UselessDataSet,
                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                        // display : false
                    },
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true,
                            ticks: {
                              beginAtZero: true,
                              callback: function(value) {if (value % 1 === 0) {return value;}}
                            }
                        }]
                    }
                }
            });
        }

        function generateChartBarGroup(ctx) {
            chartGroup = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels : barLabelsHroup,
                    datasets : UselessDataSetGroup,
                },
                options: {
                    // title: {
                    //     display: true,
                    //     text: 'Jumlah Penduduk Tidak Mampu'
                    // },
                    
                    barValueSpacing: 20,
                    responsive: true,
                    scales: {
                        yAxes: [{
                            ticks: {
                                min: 0,
                            }
                        }]
                    }
                }
            });
        }

        function uraiJSONBarChart(response) {
            barLabels = [];
            UselessDataSet = [];
            var dusun = response.data.dusun;
            for (var i = 0; i < dusun.length; i++) {
                barLabels[i] = dusun[i].dusun; 
            }
            var pekerjaan = response.data.pekerjaan;
            for (var j = 0; j < pekerjaan.length; j++) {
                var obj = new Object();
                obj.label = pekerjaan[j].label;
                obj.backgroundColor = pekerjaan[j].color;
                obj.data = pekerjaan[j].data;
                UselessDataSet.push(obj);
            }
        }

        function uraiJSONBarChartGroup(response) {
            barLabelsHroup = [];
            UselessDataSetGroup = [];
            var dusun = response.data.bulan;
            for (var i = 0; i < dusun.length; i++) {
                barLabelsHroup[i] = dusun[i]; 
            }
            var jml = response.data.data;
            for (var j = 0; j < jml.length; j++) {
                var obj = new Object();
                obj.label = jml[j].label;
                obj.backgroundColor = jml[j].color;
                obj.data = jml[j].data;
                UselessDataSetGroup.push(obj);
            }
        }

        function chartBar(ctxBar) {
            $.ajax({
                url : "{{route('ajax-pekerjaan')}}",
                type : 'POST',
                data : {
                    tahun : null,
                    _token : '{{csrf_token()}}'
                },
                datatype : 'JSON',
            }).done(function(response) {
                publicResponse = response;
                uraiJSONBarChart(response);
                $('.tahunDataPekerjaan').html('');
                if (response.data.tahun.length > 0) {
                    for (var i = 0; i < response.data.tahun.length; i++) {
                        $('.tahunDataPekerjaan').append('<li><a href="javascript:;" class="tahunBtn" data-tahun="'+response.data.tahun[i]+'">'+response.data.tahun[i]+'</a></li>');
                    }
                }
                
                generateChartBar(ctxBar);
            }).fail(function(data) {
                
            });
        }

        function groupBar(ctxGroup) {
            $.ajax({
                url : "{{route('ajax-penduduk-tidak-mampu')}}",
                type : 'POST',
                data : {
                    tahun : 2019,
                    _token : '{{csrf_token()}}',
                    tahun : tahunBar
                },
                datatype : 'JSON',
            }).done(function(response) {
                publicResponseGroup = response;
                uraiJSONBarChartGroup(response);
                $('.tahunDataMiskin').html('');
                if (response.data.tahun.length > 0) {
                    for (var i = 0; i < response.data.tahun.length; i++) {
                        $('.tahunDataMiskin').append('<li><a href="javascript:;" class="tahunBtn" data-tahun="'+response.data.tahun[i]+'">'+response.data.tahun[i]+'</a></li>');
                    }
                }
                generateChartBarGroup(ctxGroup)
            }).fail(function(data) {
                
            });
        }

        $(document).ready(function() {
            var ctxBar = $('#barPenduduk').get(0).getContext('2d');
            var ctxGroup = $('#dataMiskin').get(0).getContext('2d');
            var containerBar = $('#barPenduduk').parent();
            var containerGroup = $('#dataMiskin').parent();
            $('#barPenduduk').attr('width', $(containerBar).width());
            $('#dataMiskin').attr('width', $(containerGroup).width());
            
            chartBar(ctxBar);
            groupBar(ctxGroup);
            

            $(window).on('resize', function() {
                uraiJSONBarChart(publicResponse);
                uraiJSONBarChartGroup(publicResponseGroup);
                generateChartBar(ctxBar);
                generateChartBarGroup(ctxGroup)
            });

            $('.tahunDataMiskin').on('click', '.tahunBtn', function() {
                tahunBar = $(this).data('tahun');
                chartGroup.destroy()
                groupBar(ctxGroup);
            })
            $('.tahunDataPekerjaan').on('click', '.tahunBtn', function() {
                tahunBar = $(this).data('tahun');
                useless.destroy()
                chartBar(ctxBar);
            })
        })
    </script>
</div> 
@endsection