<!--

=========================================================
* Now UI Dashboard - v1.5.0
=========================================================

* Product Page: https://www.creative-tim.com/product/now-ui-dashboard
* Copyright 2019 Creative Tim (http://www.creative-tim.com)

* Designed by www.invisionapp.com Coded by www.creative-tim.com

=========================================================

* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

-->

<?php
    //var_dump($penerima_bansos);
?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <link rel="apple-touch-icon" sizes="76x76" href="../assets/img/apple-icon.png">
  <link rel="icon" type="image/png" href="../assets/img/favicon.png">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <title>
   {{ $app_name }}
  </title>
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
  <!--     Fonts and icons     -->
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <!-- CSS Files -->
  <link href="../vendor/nowui/assets/css/bootstrap.min.css" rel="stylesheet" />
  <link href="../vendor/nowui/assets/css/now-ui-dashboard.css?v=1.5.0" rel="stylesheet" />
  <!-- CSS Just for demo purpose, don't include it in your project -->
  <link href="../vendor/nowui/assets/demo/demo.css" rel="stylesheet" />
</head>

<body class="">
  <?php
    //var_dump($jumlah_penerima_bansos_by_jk);
  ?>
  <div class="wrapper ">
    <div class="sidebar" data-color="orange">
      <!--
        Tip 1: You can change the color of the sidebar using: data-color="blue | green | orange | red | yellow"
    -->
      <div class="logo">
        <a href="http://www.creative-tim.com" class="simple-text logo-mini">
          SB
        </a>
        <a href="http://www.creative-tim.com" class="simple-text logo-normal">
          {{ $app_name }}
        </a>
      </div>
      <div class="sidebar-wrapper" id="sidebar-wrapper">
        <ul class="nav">
          <li class="active ">
            <a href="https://bjb.city/simpul-bansos">
              <i class="now-ui-icons design_app"></i>
              <p>Dashboard</p>
            </a>
          </li>
          <!--<li>-->
          <!--  <a href="./icons.html">-->
          <!--    <i class="now-ui-icons education_atom"></i>-->
          <!--    <p>Icons</p>-->
          <!--  </a>-->
          <!--</li>-->
          <!--<li>-->
          <!--  <a href="./map.html">-->
          <!--    <i class="now-ui-icons location_map-big"></i>-->
          <!--    <p>Maps</p>-->
          <!--  </a>-->
          <!--</li>-->
          <!--<li>-->
          <!--  <a href="./notifications.html">-->
          <!--    <i class="now-ui-icons ui-1_bell-53"></i>-->
          <!--    <p>Notifications</p>-->
          <!--  </a>-->
          <!--</li>-->
          <!--<li>-->
          <!--  <a href="./user.html">-->
          <!--    <i class="now-ui-icons users_single-02"></i>-->
          <!--    <p>User Profile</p>-->
          <!--  </a>-->
          <!--</li>-->
          <li>
            <a href="./tables.html">
              <i class="now-ui-icons design_bullet-list-67"></i>
              <p>Tentang</p>
            </a>
          </li>
          <li>
            <a href="https://siapkk.banjarbarukota.go.id/admin">
              <i class="now-ui-icons  users_single-02"></i>
              <p>1 LOGIN</p>
            </a>
          </li>
         
        </ul>
      </div>
    </div>
    <div class="main-panel" id="main-panel">
      <!-- Navbar -->
      <nav class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
        <div class="container-fluid">
          <div class="navbar-wrapper">
            <div class="navbar-toggle">
              <button type="button" class="navbar-toggler">
                <span class="navbar-toggler-bar bar1"></span>
                <span class="navbar-toggler-bar bar2"></span>
                <span class="navbar-toggler-bar bar3"></span>
              </button>
            </div>
            <a class="navbar-brand" href="#pablo">Dashboard</a>
          </div>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
            <span class="navbar-toggler-bar navbar-kebab"></span>
          </button>
          <!--<div class="collapse navbar-collapse justify-content-end" id="navigation">-->
          <!--  <form>-->
          <!--    <div class="input-group no-border">-->
          <!--      <input type="text" value="" class="form-control" placeholder="Search...">-->
          <!--      <div class="input-group-append">-->
          <!--        <div class="input-group-text">-->
          <!--          <i class="now-ui-icons ui-1_zoom-bold"></i>-->
          <!--        </div>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--  </form>-->
          <!--  <ul class="navbar-nav">-->
          <!--    <li class="nav-item">-->
          <!--      <a class="nav-link" href="#pablo">-->
          <!--        <i class="now-ui-icons media-2_sound-wave"></i>-->
          <!--        <p>-->
          <!--          <span class="d-lg-none d-md-block">Stats</span>-->
          <!--        </p>-->
          <!--      </a>-->
          <!--    </li>-->
          <!--    <li class="nav-item dropdown">-->
          <!--      <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
          <!--        <i class="now-ui-icons location_world"></i>-->
          <!--        <p>-->
          <!--          <span class="d-lg-none d-md-block">Some Actions</span>-->
          <!--        </p>-->
          <!--      </a>-->
          <!--      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">-->
          <!--        <a class="dropdown-item" href="#">Action</a>-->
          <!--        <a class="dropdown-item" href="#">Another action</a>-->
          <!--        <a class="dropdown-item" href="#">Something else here</a>-->
          <!--      </div>-->
          <!--    </li>-->
          <!--    <li class="nav-item">-->
          <!--      <a class="nav-link" href="#pablo">-->
          <!--        <i class="now-ui-icons users_single-02"></i>-->
          <!--        <p>-->
          <!--          <span class="d-lg-none d-md-block">Account</span>-->
          <!--        </p>-->
          <!--      </a>-->
          <!--    </li>-->
          <!--  </ul>-->
          <!--</div>-->
        </div>
      </nav>
      <!-- End Navbar -->
      <div class="panel-header panel-header-lg">
        <canvas id="bigDashboardChart"></canvas>
      </div>
      <div class="content">
        <div class="row">
          <div class="col-lg-4">
            <div class="card card-chart">
              <div class="card-header">
                <h5 class="card-category">Kelurahan Sungai Ulin</h5>
                <h4 class="card-title">Jumlah Pendududuk</h4>
                <!--<div class="dropdown">-->
                <!--  <button type="button" class="btn btn-round btn-outline-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">-->
                <!--    <i class="now-ui-icons loader_gear"></i>-->
                <!--  </button>-->
                <!--  <div class="dropdown-menu dropdown-menu-right">-->
                <!--    <a class="dropdown-item" href="#">Action</a>-->
                <!--    <a class="dropdown-item" href="#">Another action</a>-->
                <!--    <a class="dropdown-item" href="#">Something else here</a>-->
                <!--    <a class="dropdown-item text-danger" href="#">Remove Data</a>-->
                <!--  </div>-->
                <!--</div>-->
              </div>
              <div class="card-body">
                <h1>{{ $jumlah_warga_sungai_ulin }}</h1>
              </div>
              <!--<div class="card-footer">-->
              <!--  <div class="stats">-->
              <!--    <i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated-->
              <!--  </div>-->
              <!--</div>-->
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="card card-chart">
              <div class="card-header">
                <h5 class="card-category">Kelurahan Sungai Ulin</h5>
                <h4 class="card-title">Jumlah Penerima Bansos</h4>
                <!--<div class="dropdown">-->
                <!--  <button type="button" class="btn btn-round btn-outline-default dropdown-toggle btn-simple btn-icon no-caret" data-toggle="dropdown">-->
                <!--    <i class="now-ui-icons loader_gear"></i>-->
                <!--  </button>-->
                <!--  <div class="dropdown-menu dropdown-menu-right">-->
                <!--    <a class="dropdown-item" href="#">Action</a>-->
                <!--    <a class="dropdown-item" href="#">Another action</a>-->
                <!--    <a class="dropdown-item" href="#">Something else here</a>-->
                <!--    <a class="dropdown-item text-danger" href="#">Remove Data</a>-->
                <!--  </div>-->
                <!--</div>-->
              </div>
              <div class="card-body">
                  <h1>{{ $jumlah_penerima_bansos }}</h1>
                <div class="chart-area">
                  <canvas id="lineChartExampleWithNumbersAndGrid"></canvas>
                </div>
              </div>
              <!--<div class="card-footer">-->
              <!--  <div class="stats">-->
              <!--    <i class="now-ui-icons arrows-1_refresh-69"></i> Just Updated-->
              <!--  </div>-->
              <!--</div>-->
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="card card-chart">
              <div class="card-header">
                <h5 class="card-category">Kelurahan Sungai Ulin</h5>
                <h4 class="card-title">Per Jenis Kelamin</h4>
              </div>
              <div class="card-body">
                <div class="chart-area">
                  <canvas id="barChartSimpleGradientsNumbers"></canvas>
                </div>
              </div>
              <!--<div class="card-footer">-->
              <!--  <div class="stats">-->
              <!--    <i class="now-ui-icons ui-2_time-alarm"></i> Last 7 days-->
              <!--  </div>-->
              <!--</div>-->
            </div>
          </div>
        </div>
        <div class="row">
          <!--<div class="col-md-6">-->
          <!--  <div class="card  card-tasks">-->
          <!--    <div class="card-header ">-->
          <!--      <h5 class="card-category">Backend development</h5>-->
          <!--      <h4 class="card-title">Tasks</h4>-->
          <!--    </div>-->
          <!--    <div class="card-body ">-->
          <!--      <div class="table-full-width table-responsive">-->
          <!--        <table class="table">-->
          <!--          <tbody>-->
          <!--            <tr>-->
          <!--              <td>-->
          <!--                <div class="form-check">-->
          <!--                  <label class="form-check-label">-->
          <!--                    <input class="form-check-input" type="checkbox" checked>-->
          <!--                    <span class="form-check-sign"></span>-->
          <!--                  </label>-->
          <!--                </div>-->
          <!--              </td>-->
          <!--              <td class="text-left">Sign contract for "What are conference organizers afraid of?"</td>-->
          <!--              <td class="td-actions text-right">-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-info btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Edit Task">-->
          <!--                  <i class="now-ui-icons ui-2_settings-90"></i>-->
          <!--                </button>-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-danger btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Remove">-->
          <!--                  <i class="now-ui-icons ui-1_simple-remove"></i>-->
          <!--                </button>-->
          <!--              </td>-->
          <!--            </tr>-->
          <!--            <tr>-->
          <!--              <td>-->
          <!--                <div class="form-check">-->
          <!--                  <label class="form-check-label">-->
          <!--                    <input class="form-check-input" type="checkbox">-->
          <!--                    <span class="form-check-sign"></span>-->
          <!--                  </label>-->
          <!--                </div>-->
          <!--              </td>-->
          <!--              <td class="text-left">Lines From Great Russian Literature? Or E-mails From My Boss?</td>-->
          <!--              <td class="td-actions text-right">-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-info btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Edit Task">-->
          <!--                  <i class="now-ui-icons ui-2_settings-90"></i>-->
          <!--                </button>-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-danger btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Remove">-->
          <!--                  <i class="now-ui-icons ui-1_simple-remove"></i>-->
          <!--                </button>-->
          <!--              </td>-->
          <!--            </tr>-->
          <!--            <tr>-->
          <!--              <td>-->
          <!--                <div class="form-check">-->
          <!--                  <label class="form-check-label">-->
          <!--                    <input class="form-check-input" type="checkbox" checked>-->
          <!--                    <span class="form-check-sign"></span>-->
          <!--                  </label>-->
          <!--                </div>-->
          <!--              </td>-->
          <!--              <td class="text-left">Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit-->
          <!--              </td>-->
          <!--              <td class="td-actions text-right">-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-info btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Edit Task">-->
          <!--                  <i class="now-ui-icons ui-2_settings-90"></i>-->
          <!--                </button>-->
          <!--                <button type="button" rel="tooltip" title="" class="btn btn-danger btn-round btn-icon btn-icon-mini btn-neutral" data-original-title="Remove">-->
          <!--                  <i class="now-ui-icons ui-1_simple-remove"></i>-->
          <!--                </button>-->
          <!--              </td>-->
          <!--            </tr>-->
          <!--          </tbody>-->
          <!--        </table>-->
          <!--      </div>-->
          <!--    </div>-->
          <!--    <div class="card-footer ">-->
          <!--      <hr>-->
          <!--      <div class="stats">-->
          <!--        <i class="now-ui-icons loader_refresh spin"></i> Updated 3 minutes ago-->
          <!--      </div>-->
          <!--    </div>-->
          <!--  </div>-->
          <!--</div>-->
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-category"></h5>
                <h4 class="card-title"> Daftar Penerima Bansos</h4>
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table">
                    <thead class=" text-primary">
                      <th>
                        NIK
                      </th>
                      <th>
                        Nama
                      </th>
                      <th>
                        Alamat
                      </th>
                      <th class="text-right">
                        Umur
                      </th>
                    </thead>
                    <tbody>
                    @foreach($penerima_bansos as $pd)
                      <tr>
                        <td>
                          {{ $pd->nik }}
                        </td>
                        <td>
                          {{ $pd->nama_lgkp }}
                        </td>
                        <td>
                          {{ $pd->alamat2 . ' RT.' . $pd->rt . ' RW.' . $pd->rw }}
                        </td>
                        <td class="text-right">
                          {{ $pd->umur }}
                        </td>
                      </tr>
                    @endforeach
                    </tbody>
                  </table>
                  <br/>
                	Halaman : {{ $penerima_bansos->currentPage() }} <br/>
                	Jumlah Data : {{ $penerima_bansos->total() }} <br/>
                	Data Per Halaman : {{ $penerima_bansos->perPage() }} <br/>
                 
                 
                	{{ $penerima_bansos->links() }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer class="footer">
        <div class=" container-fluid ">
          <nav>
            <ul>
              <li>
                <a href="https://www.creative-tim.com">
                  {{ $app_name }}
                </a>
              </li>
              <li>
                <a href="http://presentation.creative-tim.com">
                  About Us
                </a>
              </li>
              <li>
                <a href="http://blog.creative-tim.com">
                  Blog
                </a>
              </li>
            </ul>
          </nav>
          <div class="copyright" id="copyright">
            &copy; <script>
              document.getElementById('copyright').appendChild(document.createTextNode(new Date().getFullYear()))
            </script>, Designed by <a href="https://www.invisionapp.com" target="_blank">{{ $app_name }}</a>. Coded by <a href="https://www.creative-tim.com" target="_blank">Wahyu Indraman</a>.
          </div>
        </div>
      </footer>
    </div>
  </div>
  <!--   Core JS Files   -->
  <script src="../vendor/nowui/assets/js/core/jquery.min.js"></script>
  <script src="../vendor/nowui/assets/js/core/popper.min.js"></script>
  <script src="../vendor/nowui/assets/js/core/bootstrap.min.js"></script>
  <script src="../vendor/nowui/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
  <!--  Google Maps Plugin    -->
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
  <!-- Chart JS -->
  <script src="../vendor/nowui/assets/js/plugins/chartjs.min.js"></script>
  <!--  Notifications Plugin    -->
  <script src="../vendor/nowui/assets/js/plugins/bootstrap-notify.js"></script>
  <!-- Control Center for Now Ui Dashboard: parallax effects, scripts for the example pages etc -->
  <script src="../vendor/nowui/assets/js/now-ui-dashboard.min.js?v=1.5.0" type="text/javascript"></script><!-- Now Ui Dashboard DEMO methods, don't include it in your project! -->
  <script src="../vendor/nowui/assets/demo/demo.js"></script>
  <script src="../vendor/gauge/gauge.min.js"></script>
  <script>
    var penerima_bansos_jk = {!! json_encode($jumlah_penerima_bansos_by_jk->toArray(), JSON_HEX_TAG) !!};
    console.log(penerima_bansos_jk[0].laki);
    $(document).ready(function() {
      // Javascript method's body can be found in assets/js/demos.js
     // demo.initDashboardPageCharts();
         ctx = document.getElementById('lineChartExampleWithNumbersAndGrid').getContext("2d");
         var e = document.getElementById("barChartSimpleGradientsNumbers").getContext("2d");

        gradientFill = ctx.createLinearGradient(0, 170, 0, 50);
        gradientFill.addColorStop(0, "rgba(128, 182, 244, 0)");
        gradientFill.addColorStop(1, hexToRGB('#2CA8FF', 0.6));
    
        var a = {
          type: "bar",
          data: {
            labels: ["Laki-laki", "Perempuan"],
            datasets: [{
              label: "Penerima bansos",
              backgroundColor: gradientFill,
              borderColor: "#2CA8FF",
              pointBorderColor: "#FFF",
              pointBackgroundColor: "#2CA8FF",
              pointBorderWidth: 2,
              pointHoverRadius: 4,
              pointHoverBorderWidth: 1,
              pointRadius: 4,
              fill: true,
              borderWidth: 1,
              data: [penerima_bansos_jk[0].laki, penerima_bansos_jk[0].perempuan]
            }]
          },
          options: {
            maintainAspectRatio: false,
            legend: {
              display: false
            },
            tooltips: {
              bodySpacing: 4,
              mode: "nearest",
              intersect: 0,
              position: "nearest",
              xPadding: 10,
              yPadding: 10,
              caretPadding: 10
            },
            responsive: 1,
            scales: {
              yAxes: [{
                gridLines: 0,
                gridLines: {
                  zeroLineColor: "transparent",
                  drawBorder: false
                }
              }],
              xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                  display: false
                },
                gridLines: {
                  zeroLineColor: "transparent",
                  drawTicks: false,
                  display: false,
                  drawBorder: false
                }
              }]
            },
            layout: {
              padding: {
                left: 0,
                right: 0,
                top: 15,
                bottom: 15
              }
            }
          }
        };
    
        var viewsChart = new Chart(e, a);

    });
    
    // var g1 = loadGauge('lineChartExampleWithNumbersAndGrid',0);
    
    // function loadGauge(elemid,setval){
    //     var opts = {
    //       angle: -0.2, // The span of the gauge arc
    //       lineWidth: 0.2, // The line thickness
    //       radiusScale: 0.88, // Relative radius
    //       pointer: {
    //         length: 0.77, // // Relative to gauge radius
    //         strokeWidth: 0.035, // The thickness
    //         color: '#000000' // Fill color
    //       },
    //       limitMax: false,     // If false, max value increases automatically if value > maxValue
    //       limitMin: false,     // If true, the min value of the gauge will be fixed
    //       colorStart: '#6F6EA0',   // Colors
    //       colorStop: '#C0C0DB',    // just experiment with them
    //       strokeColor: '#EEEEEE',  // to see which ones work best for you
    //       generateGradient: true,
    //       highDpiSupport: true,     // High resolution support
          
    //     };
    //     var target = document.getElementById(elemid); // your canvas element
    //     var gauge = new Donut(target).setOptions(opts); // create sexy gauge!
    //     gauge.maxValue = 3000; // set max gauge value
    //     gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
    //     gauge.animationSpeed = 32; // set animation speed (32 is default value)
    //     gauge.set(setval); // set actual value
        
    //     return gauge;
    // }
    
    // setTimeout(() => { g1.set(1000) }, 3000);
    // setTimeout(() => { g1.set(2000) }, 6000);
    // setTimeout(() => { g1.set(3000) }, 9000);
    
    
  </script>
</body>

</html>