@extends('layouts.adminmonevpkam')

@section('content')

<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
  <h1>
    Dashboard
    <small>Control panel</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
    <li class="active">Dashboard</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
    @include('dashboards._filterpus')   
    <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">Grafik</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="chart-report" style="width:100%;height:{{ $chartheight }}"></div>
                </div><!-- /.box-body -->
                <div class="box-footer">
                   
                </div><!-- /.box-footer-->
            </div><!-- /.box -->
        </div><!-- /.col -->
        <div class='col-xs-12'>
            <!-- Box -->
            <div class="box box-primary">
                <div class="box-header with-border" style="text-align: center;">
                    <h3 class="box-title" >REKAPITULASI PENGAWASAN KUALITAS AIR MINUM</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="table-report" >
                       <table  class="table table-condensed table-hover table-bordered responsive" id="data"  style="width: 100%">
                            <thead  style="font-size: 1em" bgcolor="#d4e6f7">
                              <tr>
                                <th rowspan="3" style="text-align:center">NO.</th>
                                <th rowspan="3" style="text-align:center">PUSKESMAS</th>       
                                <th rowspan="3" style="text-align:center">JUMLAH BASELINE SARANA</th> 
                                <th colspan="2" style="text-align:center">INSPEKSI KESEHATAN LINGKUNGAN (IKL)</th> 
                                <th colspan="3" style="text-align:center">PEMERIKSAAN</th>
                              </tr>
                              <tr>
                                <th style="text-align:center">&Sigma; SARANA DI IKL</th>
                                <th style="text-align:center">&Sigma; SARANA DGN RESIKO R+S</th>
                                <th style="text-align:center">&Sigma; SARANA DIAMBIL SAMPEL</th>
                                <th style="text-align:center">&Sigma; SARANA MEMENUHI SYARAT</th>
                                <th style="text-align:center">&Sigma; SARANA TIDAK MEMENUHI SYARAT</th>
                              </tr>
                              <tr>
                                <th style="text-align:center">Jumlah IKL</th>
                                <th style="text-align:center">Jumlah R+S</th>
                                <th style="text-align:center">Jumlah Sampel </th>
                                <th style="text-align:center">Jumlah OK</th>
                                <th style="text-align:center">Jumlah Not OK</th>
                              </tr>
                            </thead>
                            <tbody style="font-size: 1em">
                                    @php ($counter = 1) 
                                    @foreach($rekap_pkams as $row)
                                        <tr>
                                            <td>{{$counter}}</td>
                                            @foreach($row as $rekap)
                                            <td> {{ $rekap }}   </td>
                                            @endforeach
                                        </tr>
                                        @php ($counter++)   
                                    @endforeach
                            </tbody>
                        </table>
                    </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 type="text/javascript" src="{{ asset('bower_components/AdminLTE/plugins/highcharts/highcharts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bower_components/AdminLTE/plugins/highcharts/drilldown.js') }}"></script>
    <script type="text/javascript">
    
    $(function () {
        $('#chart-report').highcharts(
            {!! json_encode($yourFirstChart) !!}
        );
    })


    $('#data').DataTable({
       dom: 'Bfrtip',
          buttons: [
            'csv', 'excel', 'pdf'
        ],
      "iDisplayLength": 50,
      "autoWidth": true,
        "language": {
        "decimal": ",",
        "thousands": "."
    }
    });

    $(".periodeSearch").select2({
      data:['2018','2017','2016','2015']
    });

    $(".provSearch").select2({
      Multiple:true,
      placeholder: {
        id: '0', // the value of the option
        text: 'PILIH PROVINSI'
      }
    });
  
     $(".kabSearch").select2({
      Multiple:true,
      placeholder: {
        id: '0', // the value of the option
        text: 'PILIH KABUPATEN'
      }
    });

    $(".pusSearch").select2({
      Multiple:true,
      placeholder: {
        id: '0', // the value of the option
        text: 'SELURUH PUSKESMAS'
      }
    }); 

    $.get('/wilayahs/loadDataProvinsi', function(data) {
                     //success data
                     $('.provSearch').empty();
                     $('.provSearch').append('<option>PILIH PROVINSI</option>');
                     $.each(data, function(index, Obj) {

                         $('.provSearch').append('<option value='+ Obj.idprovinsi + '>'+ Obj.namaprovinsi + '</option>');

                     }); 
                    
                 });
     

     $('.provSearch').on('change', function (evt) {
          var idprov = $('.provSearch').val();
          
          $.get('/wilayahs/provinsi-dropdown?idprovinsi=' + idprov, function(data) {
                         //success data
                         $('.kabSearch').empty();
                         $('.kabSearch').append('<option>PILIH KABUPATEN</option>');
                         $.each(data, function(index, Obj) {
                             $('.kabSearch').append('<option value='+ Obj.idkabupaten + '>'+ Obj.namakabupaten + '</option>');
                         }); 
                        
                     });
       });


       $('.kabSearch').on('change', function (evt) {
          var idkab = $('.kabSearch').val();
          $.get('/wilayahs/loadKabupatenPuskesmas?idkabupaten=' + idkab, function(data) {
                         //success data
                         $('.pusSearch').empty();
                         $('.pusSearch').append('<option>SELURUH PUSKESMAS</option>');
                         $.each(data, function(index, Obj) {
                             $('.pusSearch').append('<option value='+ Obj.idpuskesmas + '>'+ Obj.namapuskesmas + '</option>');
                         }); 
                        
                     });
       });

      </script>
@endsection