@extends('template_front.index')
<!-- @section('title','Welcome') -->
<!-- @section('description','Website Resmi Desa Nepo Barru Sulawesi Selatan') -->

@section('content')
<section class="product-one">
        <div class="container">
            <div class="block-title text-center">
                <h4>Data Grafik Jenis Kelamin</h4>
                <div class="col-xl-12 col-lg-12">
                    <canvas id="barPenduduk" height="322"></canvas>
                </div>
            </div>
        </div>
    </section> 

<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_jenis_kelamin')}}",
                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) {
                
            });
        }

        $(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>
    
</script>


@endsection