@extends('irban.irban-template')
@section('title', 'Irban')
@section('css')
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">Irban</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">Irban</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
          
        </div>
      </div>
    </div>


    <div class="row">
      <div class="col-xl-8 grid-margin stretch-card">
        <div class="card recent-revenue-card">
          <div class="card-body">
            <h6 class="card-title">Data Masuk Seminggu Terakhir</h6>
            <p class="mb-4 text-muted">Pengambilan data tercata dari kapan data masuk baik Pengaduan, Aspirasi atau Permintaan Informasi</p>
            <div class="row">
              <div class="col-md-12">
                <div id="barchart_material" class="google-charts"></div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="row">
              <div class="col-md-4">
                <div class="d-flex align-items-center justify-content-md-center mb-2 mb-md-0">
                  <i class="mdi mdi-flag-variant-outline icon-md mr-3 text-info"></i>
                  <div>
                    <p class="mb-1">Laporan Masuk</p>
                    <div class="d-flex align-items-center">
                      <h4 class="mb-0 mr-2 font-weight-bold">{{$laporanMasukMingguIni}}</h4>
                      <p class="tx-12 mb-0 text-{{$persentasePerbandinganLaporan > 0 ? 'info' : 'danger'}}">{{$persentasePerbandinganLaporan}}%</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="d-flex align-items-center justify-content-md-center mb-2 mb-md-0 mt-2 mt-md-0">
                  <i class="mdi mdi-target icon-md mr-3 text-danger"></i>
                  <div>
                    <p class="mb-1">Laporan Berhasil Ditutup</p>
                    <div class="d-flex align-items-center">
                      <h4 class="mb-0 mr-2 font-weight-bold">{{$persentaseMasukDanLaporanDitutup}}%</h4>
                      <p class="tx-12 mb-0 text-{{$persentasePerbandinganLaporanDitutup > 0 ? 'info' : 'danger'}}">{{$persentasePerbandinganLaporanDitutup}}%</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-md-4">
                <div class="d-flex align-items-center justify-content-md-center mt-2 mt-md-0">
                  <i class="mdi mdi-account-outline icon-md mr-3 text-success"></i>
                  <div>
                    <p class="mb-1">Peningkatan User</p>
                    <div class="d-flex align-items-center">
                      <h4 class="mb-0 mr-2 font-weight-bold">{{$userMingguIni}}</h4>
                      <p class="tx-12 mb-0 text-{{$persentasePerbandinganUserBaru > 0 ? 'success' : 'warning'}}">{{$persentasePerbandinganUserBaru}}%</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-xl-4">
        <div class="card-body">
          <p class="card-title">Laporan Terpopuler</p>
          <p class="mb-3 text-muted">Laporan dengan jumlah view yang paling banyak dalam 30 Hari Terakhir</p>
          <div>
            @foreach ($laporanPopulers as $laporan)
                
            <div class="d-flex justify-content-between mt-2">
              <a href="{{route('home.laporan.show',['slug'=>$laporan->slug])}}" target="_blank" class="text-muted">{{$laporan->judul}}</a>
              <span class="tx-12 font-weight-bold">{{number($laporan->views)}}</span>
            </div>
              <br />
<b>Notice</b>:  Undefined variable: laporan in <b>C:\xampp\htdocs\laporwbs\resources\views\irban\irban-home.blade.php</b> on line <b>94</b><br />
<br />
<b>Notice</b>:  Trying to get property 'total_dukungan' of non-object in <b>C:\xampp\htdocs\laporwbs\resources\views\irban\irban-home.blade.php</b> on line <b>94</b><br />
<br />
<b>Notice</b>:  Undefined variable: laporan in <b>C:\xampp\htdocs\laporwbs\resources\views\irban\irban-home.blade.php</b> on line <b>95</b><br />
<br />
<b>Notice</b>:  Trying to get property 'views' of non-object in <b>C:\xampp\htdocs\laporwbs\resources\views\irban\irban-home.blade.php</b> on line <b>95</b><br />
<br />
<b>Warning</b>:  Division by zero in <b>C:\xampp\htdocs\laporwbs\resources\views\irban\irban-home.blade.php</b> on line <b>97</b><br />
            <div class="progress progress-sm mt-2">
              <div class="progress-bar bg-{{colorBootstrap()}}" role="progressbar" style="width: {{$presentaseLaporan}}%" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
            </div>

            @endforeach
           
          </div>
        </div>
      </div>
    </div>
  </div>

@endsection

@section('script')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawChart);
      // packages: ['corechart']
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          {!!$kopData!!},
          {!!implode(',',$datas)!!}

        ]);

        var options = {
          chart: {
            // title: 'Data Masuk Seminggu Terakhir',
            // subtitle: 'Pengambilan data tercata dari kapan data masuk baik Pengaduan, Aspirasi atau Permintaan Informasi',
          },
          legend: { position: 'none'},
          // legend: { position: 'top', alignment: 'start' },
          bars: 'vertical', // Required for Material Bar Charts.
          // isStacked: true
        };

        var chart = new google.charts.Bar(document.getElementById('barchart_material'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }
    </script>
<script>
</script>
@endsection