@extends('layouts.guestmonevpkam')

@section('content')

<div class="content-wrapper" style="background-color: #E2FEEF">
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    PETA PERSENTASE PENGAWASAN KUALITAS AIR MINUM
    <small>Control panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li class="active">Peta</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
<div class='row'>
      <div class='col-xs-12'>
               <!-- Box -->
                <div class="box box-primary" >
                    <div class="box-header with-border">
                        <h3 class="box-title"><b>Filter</b></h3>
                        <div class="box-tools pull-right">
                            <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                            <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                   <div class="box-body" >
                        {{ Form::open(array('url' => url('/reportpeta/'),'method' => 'get')) }}
                       <div class="" id="filter">
                                  <div class='form-group'> 

                                   {!! Form::select('filterperiode',[],null,['class'=>'form-control periodeSearch']) !!}
                                  </div>
                          </div>                  
                        
                    </div><!-- /.box-body 
                    <div class="box-footer">
                      <button type="submit"  class="btn btn-primary btn-flat">Proses</button>-->

                      {!! Form::close() !!}
                      <!-- </div> /.box-footer-->
                </div><!-- /.box -->
             </div>   
      </div>  

    <div class='row'>
        <div class='col-xs-12'>
            <!-- Box -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title" style="font-size: 1.1em">Peta Persentase Inspeksi Kesling</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                <div id="demo-wrapper">
                <div id="container"></div>
                </div><!-- /.box-body -->
                <div class="box-footer">
                   
                </div><!-- /.box-footer-->
            </div><!-- /.box -->
        </div><!-- /.col -->
        </div>
      </section>
    <!-- /.content -->
</div><!-- /.row -->
<!-- /.content-wrapper -->   
@endsection
@section('scripts') 
<script src="{{ asset('bower_components/AdminLTE/plugins/highcharts/highmaps.js') }}"></script>
<script src="{{ asset('bower_components/AdminLTE/plugins/highcharts/exporting.js') }}"></script>
<script src="{{ asset('bower_components/AdminLTE/plugins/highcharts/basemap.js') }}"></script>
    <script type="text/javascript">
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.

/*$..getJSON("http://localhost/monevpkamm/public/reportpeta/2018", function(json) {

console.log(json);

});*/
//console.log(data);
var objectPeta = setMap([]);
var arr_data = [];
function binding_data ($periode){
    //clear data sebelum ada data
   // if(arr_data.length > 0){
       /* while( objectPeta.series.length > 0){
            objectPeta.series[0].remove(true);
        }*/
        console.log('arr_data before load ajax',arr_data);

        if(arr_data.length>0){
            arr_data=[];
        }

        console.log('arr_data after remove',arr_data);


        var seriesLength = objectPeta.series.length;
        for(var i = seriesLength -1; i > -1; i--) {
            objectPeta.series[i].remove();
        }
    //}
   
    
    var url = "{{ url('/reportpeta/') }}"+"/"+$periode;
    
$.ajax({
    url: url,
    beforeSend: function(){
        objectPeta.showLoading('Loading ..');
    },
    method: 'GET',
    dataType: 'json',
    success: function (data) {
       //console.log('data',data);

       for (key in data) {
            if (data.hasOwnProperty(key)) {
                //console.log(key + " = " + user[key]);
                arr_data.push([key,data[key]]);
            }
        }    

        objectPeta.addSeries({data:arr_data, 
        name: 'Random data',
        cursor: 'pointer',
        allowPointSelect: true,
        states: {
            select: {
                color: 'black',
                borderColor:'black',
                
            
            },
            hover: {
                color: 'white',
                
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}',
           },
        tooltip: {
           valueSuffix: '%',
           footerFormat: 'Click for details',
           
        }});
        console.log('arr_data after load ajax',arr_data);
      //  objectPeta = setMap(arr_data);
           // objectPeta.series[0].update({ data: arr_data});
    },
  complete: function(){
    objectPeta.hideLoading();
  }
});

 
// Create the chart
}
//var url = "{{ url('/reportpeta/2018') }}";

//initialisasi data ketika halaman pertama kali diload
binding_data(2018);

//console.log('intip objectPeta',objectPeta);
//console.log('objectPeta.series[0]',objectPeta.series[0]);


function setMap(_data){
return Highcharts.mapChart('container', {
    chart: {
        map: 'countries/id/id-all'
    },

    title: {
        //text: 'Highmaps basic demo'
        text: 'Peta Persentase Inspeksi Kesehatan lingkungan (Kesling) Seluruh Provinsi'
    },

    subtitle: {
        text: 'Source map: <a href="{{ asset('bower_components/AdminLTE/plugins/highcharts/basemap.js') }}">Indonesia</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },legend: {
                /*title: {
                    text: 'Individuals per km²',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
                },*/
                //align: 'left',
                //verticalAlign: 'bottom',
                //floating: true,
                //layout: 'vertical',
                valueDecimals: 0,
                //backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
                //symbolRadius: 0,
                //symbolHeight: 14
            },

    colorAxis: {
        //min: 10
        dataClasses: [{
            to: 25,
            color: "red"
        }, {
            from: 26,
            to: 50,
            color: "yellow"
        }, {
            from: 51,
            to: 75,
            color: "green"
        },{
            from: 76,
            to: 100,
            color: "blue"
        }]
    },
    
     /*plotOptions: {
            series: {
                point: {
                    events: {
                        click: function () {
                             location.href = '{{ url('/guests/getkabupaten') }}' ;
                            location.href = '{{ url('/guests/getkabupaten') }}' + this.name;
                        }
                    }
                }
            }
        },*/

    
    
            plotOptions: {
            series: {
                events: {
                    click: function (e) {
                        
                        var text = '<br>__________________________________________________________'+'<br><b style=" font-size:14px; font-weight: bold; font-family: arial; text-align: center;"> Data Inspeksi Kesling Provinsi ' + e.point.name + '</b> <br>_________________________________________________________ <br> <b style=" font-size:12px;"> Series : ' + this.name + '<br><b style="color:white; font-size:5px;">paragraf</b><br><b style=" font-size:15px; font-family: calibri;"> Prosentase Inspeksi kesling :' + e.point.value + '%' + '<br>	_________________________________________________________' 
                        if (!this.chart.clickLabel) {
                            this.chart.clickLabel = this.chart.renderer.label(text, 50, 270)
                                .css({
                                    width: '450px',
                                    color: 'black',
                                    
                                    
                                   
                                })
                                .add();
                        } else {
                            this.chart.clickLabel.attr({
                                text: text
                            });
                        }
                    }
                }
            }
        },

    
    
    series: [{
        data: _data,
        name: 'Random data',
        states: {
            hover: {
                color: 'white'
            }
        },
        dataLabels: {
            enabled: true,
            //format: '{point.name}'
            
        },
        tooltip: {
           // valueSuffix: '%'
        }
    }]
});

}


$(function() {
    $(".periodeSearch").select2({
          data:['2020','2019']
          /*data:[
            {id: 2019, text: '2019'},
            {id: 2018, text: '2018'},
            {id: 2017, text: '2017'},
            {id: 2016, text: '2016'},
            {id: 2015, text: '2015'}
          ]*/
    });

    
$('.periodeSearch').on('change', function(e){
    //$("#container").val($(".periodeSearch :selected").text());
    binding_data($(".periodeSearch").val());

    console.log($(".periodeSearch").val());
});

$.fn.selectOption = function(val){
        this.val(val)
        .find('option')
        .removeAttr('selected')
        .parent()
        .find('option[value="'+ val +'"]')
        .attr('selected', 'selected')
        .parent()
        .trigger('change');

        return this;
    };



  //  $(".periodeSearch").select2('data',{id: 2018, text: '2018'});
    $(".periodeSearch").val('2019').change();

});


    </script>
@endsection
@section('css') 
  <style>
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}


  
  
  </style>
@endsection