@extends('layouts.guestmonevpkam')
@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('guests._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" style="font-size: 1.1em"><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-bordered table-hover 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">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">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) 
                                    <tr>
                                    <td>{{$counter}}</td>
                                    <td>Nasional</td>                                 
                                    @foreach($rekap_pkams as $row)
                                            <td> {{ $row }}   </td> 
                                            
                                    @endforeach
                                    @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