@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._filternas')    
    <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>Grafik</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">
                    <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 bgcolor="#d4e6f7">
                              <tr>
                                <th rowspan="3" style="text-align:center">NO.</th>
                                <th rowspan="3" style="text-align:center">NASIONAL</th>       
                                <th rowspan="3" style="text-align:center">JUMLAH 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">% IKL</th>
                                <th style="text-align:center">% R+S</th>
                                <th style="text-align:center">% Sampel </th>
                                <th style="text-align:center">% OK</th>
                                <th style="text-align:center">% Not OK</th>
                              </tr>
                            </thead>
                            <tbody>
                                    @php ($counter = 1) 
                                    <tr>
                                    <td>{{$counter}}</td>
                                    <td>Nasional</td>                                 
                                            <td> {{ $rekap_pkams[0] }}  </td> 
                                            <td> {{ $rekap_pkams[1] }} % </td> 
                                            <td> {{ $rekap_pkams[2] }} % </td> 
                                            <td> {{ $rekap_pkams[3] }} % </td> 
                                            <td> {{ $rekap_pkams[4] }} % </td>
                                            <td> {{ $rekap_pkams[5] }} % </td>
                                    @php ($counter++)
                                    </tr>   
                            </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'
        ]

        });

        $(".periodeSearch").select2({
          data:['2018','2017','2016','2015']
        });
    </script>
@endsection