@extends('layouts.app')

@section('content')
    <div class="col-md-8">
        <div class="box box-primary">
            <div class="box-header with-border">
                <form class="form-horizontal">
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-group">
                            <label for="list_desa" class="col-sm-4 control-label">{{ config('setting.sebutan_desa') }}</label>
                            <div class="col-sm-8">
                                <input type="hidden" id="profil_id" value="{{ $profil->id }}">
                                <select class="form-control" id="list_desa">
                                    <option value="Semua">Semua {{ config('setting.sebutan_desa') }}</option>
                                    
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-sm-12">
                        <div class="form-group">
                            <label for="list_year" class="col-sm-4 control-label">Tahun</label>
                            <div class="col-sm-8">
                                <select class="form-control" id="list_year">
                                    <option value="Semua">Semua</option>
                                    
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- /.row -->
        <div class="row">
            <div class="col-md-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#penduduk" data-toggle="tab">Penduduk/Perorangan</a></li>
                        <li><a href="#keluarga" data-toggle="tab">Keluarga/KK</a></li>
                    </ul>

                    <div class="tab-content">
                        <div class="active tab-pane" id="penduduk">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="chart_bantuan_penduduk"
                                        style="width: 100%; height: 500px; overflow: hidden; text-align: left;"></div>
                                </div>
                                <div id="tabel_bantuan_penduduk" class="col-md-12">

                                </div>
                            </div>
                        </div>
                        <div class="tab-pane" id="keluarga">
                            <div class="row">
                                <div class="col-md-12">
                                    <div id="chart_bantuan_keluarga"
                                        style="width: 100%; height: 500px; overflow: hidden; text-align: left;"></div>
                                </div>
                                <div id="tabel_bantuan_keluarga" class="col-md-12">

                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- /.nav-tabs-custom -->
                </div>
            </div>
        </div>
    </div>
@endsection

@include('partials.asset_amcharts')
@include('partials.asset_select2')

@push('scripts')
    <script>
        $(function() {
            generateDropdownYear('#list_year')
            $(document).on('websiteDataLoaded', function(event, websiteData) {
                if (websiteData.desa) {
                            var desaSelect = $('#list_desa');                                                                        
                            websiteData.desa.forEach(function(item) {
                                desaSelect.append(`<option value='${item.desa_id}'>${item.nama}</option>`);
                            });
                            
                        desaSelect.select2();
                }
            })


            // Change Dashboard when Lsit Desa changed
            $('#list_desa,#list_year').on('change', function(e) {
                var did = $('#list_desa').find(":selected").val();
                var year = $('#list_year').find(":selected").text();

                change_das_bantuan(did, year);
            });

            $('#list_year').trigger('change')
        });

        function change_das_bantuan(did, year) {
            $.ajax('{!! route('api.statistik.program-bantuan.chart-penduduk') !!}', {
                beforeSend: function() {
                    $('#chart_bantuan_penduduk').html(
                        '<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>');
                },
                data: {
                    did: did,
                    y: year
                }
            }).done(function(data) {
                if (data.length) {
                    create_chart_bantuan_penduduk(data);
                } else {
                    $('#chart_bantuan_penduduk').html('<div class="text-center">Data Tidak Ditemukan</div>');
                }

            });

            $.ajax('{!! route('api.statistik.program-bantuan.chart-keluarga') !!}', {
                beforeSend: function() {
                    $('#chart_bantuan_keluarga').html(
                        '<div class="text-center"><i class="fa fa-spinner fa-spin fa-3x fa-fw"></i></div>');
                },
                data: {
                    did: did,
                    y: year
                }
            }).done(function(data) {
                if (data.length) {
                    create_chart_bantuan_keluarga(data);
                } else {
                    $('#chart_bantuan_keluarga').html('<div class="text-center">Data Tidak Ditemukan</div>');
                }
            });
        }

        function create_chart_bantuan_penduduk(data) {
            var chart_bantuan_penduduk = AmCharts.makeChart("chart_bantuan_penduduk", {
                "hideCredits": true,
                "type": "pie",
                "theme": "light",
                "dataProvider": data,
                "valueField": "value",
                "titleField": "program",
                "outlineAlpha": 0.4,
                "depth3D": 15,
                "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                "angle": 30,
                "export": {
                    "enabled": true,
                    "pageOrigin": false,
                    "fileName": "Peserta Program Bantuan Penduduk/Perorangan",
                },
                "allLabels": [{
                    "text": "Peserta Program Bantuan Penduduk/Perorangan",
                    "align": "center",
                    "bold": true,
                    "size": 20,
                    "y": -4
                }],
                "legend": {
                    "position": "bottom",
                    "marginRight": 20,
                    "autoMargins": false,
                    "valueWidth": 120
                },
                "marginTop": 50,
                "numberFormatter": {
                    "precision": -1,
                    "decimalSeparator": ",",
                    "thousandsSeparator": "."
                }
            });
        }

        function create_chart_bantuan_keluarga(data) {
            var chart_bantuan_keluarga = AmCharts.makeChart("chart_bantuan_keluarga", {
                "hideCredits": true,
                "type": "pie",
                "theme": "light",
                "dataProvider": data,
                "valueField": "value",
                "titleField": "program",
                "outlineAlpha": 0.4,
                "depth3D": 15,
                "balloonText": "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
                "angle": 30,
                "export": {
                    "enabled": true,
                    "pageOrigin": false,
                    "fileName": "Peserta Program Bantuan Keluarga/KK",
                },
                "allLabels": [{
                    "text": "Peserta Program Bantuan Keluarga/KK",
                    "align": "center",
                    "bold": true,
                    "size": 20,
                    "y": -4
                }],
                "legend": {
                    "position": "bottom",
                    "marginRight": 20,
                    "autoMargins": false,
                    "valueWidth": 120
                },
                "marginTop": 50,
                "numberFormatter": {
                    "precision": -1,
                    "decimalSeparator": ",",
                    "thousandsSeparator": "."
                }
            });
        }
    </script>
@endpush