@extends('template.master')

@section('title', 'Dashboard TKPK - Home')
@section('description', 'Meta Description - Deskripsi setiap view dalam website')

@section('body')

        <!-- Content wrapper -->
        <div class="content-wrapper">
          <!-- Content -->

          <div class="container-xxl flex-grow-1 container-p-y">
            <h4 class="fw-bold py-3 mb-4"><span class="text-muted fw-light">Pages/</span> Dashboard</h4>

            <div class="card">
                <div class="card-header d-flex">
                    <i class="bx bx-pie-chart-alt-2 icon-sub"></i>
                    <div>
                      <h5 class="card-title mb-0">P3KE</h5>
                      <small class="text-muted">Pensasaran Percepatan Penghapusan Kemiskinan Ekstrem</small>
                    </div>
                  
                  </div>
                  <div class="card-body">
                    <div class="row mb-3">
                      <button onclick="getWidgetNow();" class="btn btn-primary d-none" id="refreshwidget">Refresh Data</button>
                        <!-- Complex Headers -->
                        <div class="col-lg-4">
                            <div class="card-cuaca d-flex">
                                <div>
                                  <i class="bx bx-group icon-card"></i>   
                                </div>
                                
                                <div>
                                    <h4>Jumlah P3KE</h4>
                                    <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_jpke" style="width:148px;">
                                    <h2 id="jumlah_pke" class="d-none">-</h2>
                                    <span>Orang</span>
                                </div>
                            </div>
                        </div>
    
                        <div class="col-lg-4">
                            <div class="card-cuaca d-flex">
                                <div>
                                    <i class="bx bx-group icon-card"></i>   
                                </div>
                                <div>
                                  <h4>Jumlah P3KE (KK)</h4>
                                  <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_kkke" style="width:148px;">
                                  <h2 id="jumlah_kkke" class="d-none">-</h2>
                                  <span>Keluarga</span>
                                </div>
                            </div>
                                    
                        </div>
                        <div class="col-lg-4">
                            <div class="card-cuaca d-flex">
                                <div>
                                    <i class="bx bx-group icon-card"></i>   
                                </div>
                                <div>
                                  <h4>Jumlah P3KE (Individu)</h4>
                                  <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_ikke" style="width:148px;">
                                  <h2 id="jumlah_ikke" class="d-none">-</h2>
                                  <span>Individu</span>
                                  
                              </div>
                            </div>
                        </div>
    
                    </div> 
                  </div>
              
            </div>
            
            <div class="row">
              <div class="col-lg-6 mb-4 mt-5">
                <div class="card">
                  <div class="card-header d-flex">
                    <i class='bx bx-map-alt icon-sub'></i>
                    <div>
                      <h5 class="card-title mb-0">Peta Penyebaran P3KE</h5>
                    </div>
                  
                  </div>
                  <div class="card-body d-flex justify-content-center">
                        <div id="map-box">
                            <div id="up"></div>                            
                            <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_mapsebaran" style="width:148px;">
                            <button onclick="refreshmapsebaran();" class="btn btn-primary d-none" id="refreshmap">Refresh Data</button>
                            <div id="mapcontainer" width="100"></div>
                        </div>
                        <div id="side-box">
                            <input type="checkbox" id="chkDataLabels" checked='checked' />
                            <label for="chkDataLabels">Data labels</label>
                          
                        </div>
                  </div>
                </div>

                <div class="card mb-4 mt-5">
                  <div class="card-header d-flex justify-content-between">
                      <div class="d-flex">
                          <i class='bx bx-donate-heart icon-sub'></i>
                          <h5 class="card-title mb-0 align-self-center">Penerimaan Bantuan Sosial</h5>
                      </div>
                      <select id="select2Basic" class="select2 form-select" data-allow-clear="true" style="width:200px;">
                          <option value="AK">Program Nasional</option>
                          <option value="HI">Program Kota Bandung</option>
                          <option value="CA">Program CSR</option>
                      </select>
                  </div>
                  <div class="card-body">
                    <div id="container2"></div>
                  </div>
                </div>

                <div class="card mb-4 ">
                  <div class="card-header d-flex">
                    <i class='bx bx-group icon-sub'></i>
                      <div>
                          <h5 class="card-title mb-0 align-self-center">PPKS dan PSKS</h5>
                          <small class="text-muted">Pemerlu Pelayanan Kesejahteraan Sosial & Potensi dan Sumber Kesejahteraan Sosial</small>
                      </div>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="card-cuaca d-flex">
                          <div>
                              <h4>Jumlah PPKS</h4>
                              <h2 style="margin-bottom: 5px;">10.000 Jiwa</h2>
                              <p>50% dari Jumlah Penduduk</p>
                          </div>
                        </div>
                      </div>
                      <div class="col-md-6">
                        <div class="card-cuaca d-flex">
                          <div>
                              <h4>Jumlah PSKS</h4>
                              <h2 style="margin-bottom: 5px;">10.000 Jiwa</h2>
                              <p>50% dari Jumlah Penduduk</p>
                          </div>
                        </div>
                      </div>
                    </div>
                    
                  </div>
                </div>
                <div class="card mb-4 ">
                  <div class="card-header d-flex">
                    <i class="bx bx-home-circle icon-sub"></i>
                    <div>
                      <h5 class="card-title mb-0">Jumlah LKS</h5>
                      <small class="text-muted">Lembaga Kesejahteraan Sosial</small>
                    </div>
                  </div>
                  <div class="card-body">
                    <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_lks" style="width:148px;">
                    <button onclick="refreshlks();" class="btn btn-primary d-none" id="refreshlks">Refresh Data</button>
                    <div class="row mb-3 d-none" id="data_lks">
                        <!-- Complex Headers -->
                        
                    </div> 
                  </div>
                </div> 
              </div>

              <div class="col-lg-6 mb-4 mt-5">
                <div class="card mb-4">
                  <div class="card-header d-flex justify-content-between">
                      <div class="d-flex">
                          <i class='bx bx-bar-chart-alt-2 icon-sub'></i>
                          <h5 class="card-title mb-0 align-self-center">10 Kecamatan dengan Angka Kemiskinan Ekstrem Tertinggi</h5>
                      </div>
                  </div>
                  <div class="card-body">
                    <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_statis" style="width:148px;">
                    <button onclick="refreshmodul();" class="btn btn-primary d-none" id="refreshda">Refresh Data</button>
                    <div id="chartkemiskinan"></div>
                  </div>
                </div>

                <div class="card mb-4">
                  <div class="card-header d-flex justify-content-between">
                      <div class="d-flex">
                          <i class='bx bx-bar-chart-alt-2 icon-sub'></i>
                          <h5 class="card-title mb-0 align-self-center">10 Kecamatan dengan Angka Kemiskinan Ekstrem Desil 1 Tertinggi</h5>
                      </div>
                  </div>
                  <div class="card-body">
                    <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_statisdesilkec" style="width:148px;">
                    <button onclick="refreshmoduldesilkec();" class="btn btn-primary d-none" id="refreshdesilkec">Refresh Data</button>
                    <div id="chartkemiskinankecamatan"></div>
                  </div>
                </div>

                <div class="card mb-4">
                  <div class="card-header d-flex justify-content-between">
                      <div class="d-flex">
                          <i class='bx bx-bar-chart-alt-2 icon-sub'></i>
                          <h5 class="card-title mb-0 align-self-center">10 Kelurahan dengan Angka Kemiskinan Ekstrem Desil 1 Tertinggi</h5>
                      </div>
                  </div>
                  <div class="card-body">
                    <img src="{{asset('assets/img/loader.gif')}}" alt="loading" id="loader_statisdesilkel" style="width:148px;">
                    <button onclick="refreshmoduldesilkel();" class="btn btn-primary d-none" id="refreshdesilkel">Refresh Data</button>
                    <div id="chartkemiskinankelurahan"></div>
                  </div>
                </div>
               
                
              </div>
            </div>
          
          
          </div>
          

          </div>
          <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
      

@endsection
@section('jquery')
<script>
  $(document).ready(function() {
    $('#refreshda').hide();
    $('#refreshdesilkec').hide();
    $('#refreshdesilkel').hide();
    $('#refreshmap').hide();
    $('#refreshlks').hide();
    refreshmodul();
    refreshmoduldesilkec();
    refreshmoduldesilkel();
    refreshmapsebaran();
    refreshlks();
    getWidgetNow();
  });

  function getnilai(nilai){
      var rep = [];
      for(var i = 0; i < nilai.length; i++){
          rep[i] = parseInt(nilai[i].replace(/,/gi, ""));
      }      
      return rep;
  }

  function getWidgetNow(){
    let nf = new Intl.NumberFormat('en-US');
    $('#loader_jpke').show();
    $('#loader_kkke').show();
    $('#loader_ikke').show(); 
    $('#jumlah_pke').addClass('d-none');
    $('#jumlah_kkke').addClass('d-none');
    $('#jumlah_ikke').addClass('d-none');
    // total
    $.ajax({
        url: "{{route('api.getwidget')}}",
        data: "jenis=",
        method: "GET",
        cache: false,
        beforesend: function(){
          $('#loader_jpke').show();
        },
        success: function(json) {  
          if (json.status == 200){
            $('#loader_jpke').hide();
            $('#jumlah_pke').removeClass('d-none');
            $('#jumlah_pke').html(nf.format(json.data[0].jumlah));
          } else {
            $('#refreshwidget').removeClass('d-none');
            $('#jumlah_pke').removeClass('d-none');
            $('#loader_jpke').hide();
          }
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#refreshwidget').removeClass('d-none');
          $('#jumlah_pke').removeClass('d-none');
          $('#loader_jpke').hide();
        }
    });
    // kepkel
    $.ajax({
        url: "{{route('api.getwidget')}}",
        data: "jenis=kepkel",
        method: "GET",
        cache: false,
        beforesend: function(){
          $('#loader_kkke').show();
        },
        success: function(json) {
          if (json.status == 200){
            $('#loader_kkke').hide();
            $('#jumlah_kkke').removeClass('d-none');
            $('#jumlah_kkke').html(nf.format(json.data[0].jumlah));
          } else {
            $('#refreshwidget').removeClass('d-none');
            $('#jumlah_kkke').removeClass('d-none');
            $('#loader_kkke').hide();
          }
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#refreshwidget').removeClass('d-none');
          $('#jumlah_kkke').removeClass('d-none');
          $('#loader_kkke').hide();
        }
    });
    // individu
    $.ajax({
        url: "{{route('api.getwidget')}}",
        data: "jenis=individu",
        method: "GET",
        cache: false,
        beforesend: function(){
          $('#loader_ikke').show(); 
        },
        success: function(json) {
          if (json.status == 200) {
            $('#loader_ikke').hide();
            $('#jumlah_ikke').removeClass('d-none');
            $('#jumlah_ikke').html(nf.format(json.data[0].jumlah));
          } else {
            $('#refreshwidget').removeClass('d-none');
            $('#jumlah_ikke').removeClass('d-none');
            $('#loader_ikke').hide();
          }
        },
        error: function (xhr, ajaxOptions, thrownError) {
          $('#refreshwidget').removeClass('d-none');
          $('#jumlah_ikke').removeClass('d-none');
          $('#loader_ikke').hide();
        }
    });
  }

  function refreshmodul() {
    $('#loader_statis').show();
    $('#refreshda').addClass('d-none');

    $.ajax({
      url: "{{route('api.getchart')}}",
      // data: "key=Jumlah Wilayah P3KE",
      type: "GET",
      dataType: "json",
      cache: false,
      beforeSend: function() {        
        $('#loader_statis').show();
        $('#refreshda').addClass('d-none');  
      },
      success: function(result){  
        $('#loader_statis').hide();        
        if (result.status == 200) {
          var dataseries = [];    
          var data = [];
          var dataa = [];
          var categories = [];
          var kecamatan = [];
          var name = [];
          var nilai = [];
          var nilai_individu = [];        
          for (let i = 0; i < result.data.length; i++) {  
            categories[i] = result.data[i].kecamatan;
            // name[i] = result.data[i].Jenis;   
            data[i] = result.data[i];       
          }
          function onlyUnique(value, index, array) {
            return array.indexOf(value) === index;
          }
          var kecamatan = categories.filter(onlyUnique);
          // var nama = name.filter(onlyUnique);

          for (let i = 0; i < kecamatan.length; i++) {          
            nilai[kecamatan[i]] = data[i].jumlah
            nilai_individu[i] = parseInt(nilai[kecamatan[i]])
          }

          dataseries = {
            name: ["jumlah"],
            data: nilai_individu
          };

          charts(kecamatan,dataseries);
          
        } else {
          $('#refreshda').removeClass('d-none');
          $('#loader_statis').hide();
        }
        
      },
      error: function (jqXHR, textStatus, error) {
        $('#refreshda').removeClass('d-none');
        $('#loader_statis').hide();
      },
    });
  }

  function refreshmoduldesilkec() {
    $('#loader_statisdesilkec').show();
    $('#refreshdesilkec').addClass('d-none');
    $.ajax({
      url: "{{route('api.getchartkecamatan')}}",
      // data: "key=Jumlah Desil Kecamatan P3KE",
      type: "GET",
      dataType: "json",      
      cache: false,
      beforeSend: function() {        
        $('#loader_statisdesilkec').show();
        $('#refreshdesilkec').addClass('d-none');  
      },
      success: function(result){  
        $('#loader_statisdesilkec').hide();
        if (result.status == 200) {
          var dataseries = [];    
          var data = [];
          var dataa = [];
          var categories = [];
          var kecamatan = [];
          var name = [];
          var nilai = [];
          var nilai_individu = [];        
          for (let i = 0; i < result.data.length; i++) {  
            categories[i] = result.data[i].kecamatan;              
            // name[i] = result.data[i].Jenis;   
            data[i] = result.data[i];       
          }
          function onlyUnique(value, index, array) {
            return array.indexOf(value) === index;
          }
          var kecamatan = categories.filter(onlyUnique);
          // var nama = name.filter(onlyUnique);

          for (let i = 0; i < kecamatan.length; i++) {          
            nilai[kecamatan[i]] = data[i].jumlah          
            nilai_individu[i] = parseInt(nilai[kecamatan[i]])          
          }        
                  
          dataseries = {
            name: ["jumlah"],
            data: nilai_individu
          };
          chartskecamatan(kecamatan,dataseries);
          
        } else {
          $('#loader_statisdesilkec').hide();
          $('#refreshdesilkec').removeClass('d-none');
        }
        
      },
      error: function (jqXHR, textStatus, error) {
        $('#loader_statisdesilkec').hide();
        $('#refreshdesilkec').removeClass('d-none');
      },
    });
  }

  function refreshmoduldesilkel() {
    $('#loader_statisdesilkel').show();
    $('#refreshdesilkel').addClass('d-none');
    $.ajax({
      url: "{{route('api.getchartkelurahan')}}",
      // data: "key=Jumlah Desil Kelurahan P3KE",
      type: "GET",
      dataType: "json",      
      cache: false,
      beforeSend: function() {        
        $('#loader_statisdesilkel').show();
        $('#refreshdesilkel').addClass('d-none');  
      },
      success: function(result){  
        $('#loader_statisdesilkel').hide();
        if (result.status == 200) {
          var dataseries = [];    
          var data = [];
          var dataa = [];
          var categories = [];
          var kecamatan = [];
          var name = [];
          var nilai = [];
          var nilai_individu = [];        
          for (let i = 0; i < result.data.length; i++) {  
            categories[i] = result.data[i].kelurahan;              
            // name[i] = result.data[i].Jenis;   
            data[i] = result.data[i];       
          }
          function onlyUnique(value, index, array) {
            return array.indexOf(value) === index;
          }
          var kecamatan = categories.filter(onlyUnique);
          // var nama = name.filter(onlyUnique);

          for (let i = 0; i < kecamatan.length; i++) {          
            nilai[kecamatan[i]] = data[i].jumlah          
            nilai_individu[i] = parseInt(nilai[kecamatan[i]])          
          }        
                  
          dataseries = {
            name: ["jumlah"],
            data: nilai_individu
          };
          chartskelurahan(kecamatan,dataseries);
          
        } else {
          $('#refreshdesilkel').removeClass('d-none');
          $('#loader_statisdesilkel').hide();
        }
        
      },
      error: function (jqXHR, textStatus, error) {
        $('#refreshdesilkel').removeClass('d-none');
        $('#loader_statisdesilkel').hide();
      },
    });
  }

  function refreshmapsebaran() {
    $('#loader_mapsebaran').show();
    $('#refreshmap').addClass('d-none');
    $.ajax({
      url: "{{route('api.getmapsebaran')}}",
      // data: "key=Jumlah Wilayah P3KE",
      type: "GET",
      dataType: "json",      
      cache: false,
      beforeSend: function() {        
        $('#loader_mapsebaran').show();
        $('#refreshmap').addClass('d-none');
      },
      success: function(result){  
        $('#loader_mapsebaran').hide();
        if (result.status == 200) {
          mapsebaran(result.data);
        } else {
          $('#refreshmap').removeClass('d-none');
          $('#loader_mapsebaran').hide();
        }
        
      },
      error: function (jqXHR, textStatus, error) {
        $('#refreshmap').removeClass('d-none');
        $('#loader_mapsebaran').hide();
      },
    });
  }

  function refreshlks() {
    $('#loader_lks').show();
    $('#refreshlks').addClass('d-none'); 
    $.ajax({
      url: "{{route('api.getlks')}}",
      data: "jenis=",
      type: "GET",
      dataType: "json",
      cache: false,
      beforeSend: function() {        
        $('#loader_lks').show();
        $('#refreshlks').addClass('d-none');  
      },
      success: function(result){  
        $('#loader_lks').hide();
        if (result.status == 200) {
          $('#data_lks').removeClass('d-none');
          document.getElementById("data_lks").innerHTML = result.data;
          
        } else {
          $('#refreshlks').removeClass('d-none');
          $('#loader_lks').hide();
        }
        
      },
      error: function (jqXHR, textStatus, error) {
        $('#refreshlks').removeClass('d-none');
        $('#loader_lks').hide();
      },
    });
  }

  function charts(categories,data){
    Highcharts.chart('chartkemiskinan', {
      chart: {
        type: 'bar'
      },
      title: {
        text: '',      
      },
      subtitle: {
        text: ''        
      },
      xAxis: {
        categories: categories,
        title: {
          text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
      },
      yAxis: {
        min: 0,
        title: {
          text: '',        
        },
        gridLineWidth: 0
      },
      plotOptions: {
        bar: {
          borderRadius: '50%',
          dataLabels: {
            enabled: true
          },
          groupPadding: 0.1
        }
      },
      legend: {      
        align: 'right',      
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
      },
      credits: {
          enabled: false
      },
      series: [data]
    });
  }

  function chartskecamatan(categories,data){
    Highcharts.chart('chartkemiskinankecamatan', {
      chart: {
        type: 'bar'
      },
      title: {
        text: '',      
      },
      subtitle: {
        text: ''        
      },
      xAxis: {
        categories: categories,
        title: {
          text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
      },
      yAxis: {
        min: 0,
        title: {
          text: '',        
        },
        gridLineWidth: 0
      },
      plotOptions: {
        bar: {
          borderRadius: '50%',
          dataLabels: {
            enabled: true
          },
          groupPadding: 0.1
        }
      },
      legend: {      
        align: 'right',      
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
      },
      credits: {
          enabled: false
      },
      series: [data]
    });
  }

  function chartskelurahan(categories,data){
    Highcharts.chart('chartkemiskinankelurahan', {
      chart: {
        type: 'bar'
      },
      title: {
        text: '',      
      },
      subtitle: {
        text: ''        
      },
      xAxis: {
        categories: categories,
        title: {
          text: null
        },
        gridLineWidth: 1,
        lineWidth: 0
      },
      yAxis: {
        min: 0,
        title: {
          text: '',        
        },
        gridLineWidth: 0
      },
      plotOptions: {
        bar: {
          borderRadius: '50%',
          dataLabels: {
            enabled: true
          },
          groupPadding: 0.1
        }
      },
      legend: {      
        align: 'right',      
        x: -40,
        y: 80,
        floating: true,
        borderWidth: 1,
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
        shadow: true
      },
      credits: {
          enabled: false
      },
      series: [data]
    });
  }

  function mapsebaran(data){
    Highcharts.getJSON("{{asset('assets/json/geojson/kota-bandung-kecamatan.geojson')}}", function (geojson) {
      // Initialize the chart
      Highcharts.mapChart('mapcontainer', {
        chart: {
          map: geojson
        },

        title: {
          text: ''
        },

        accessibility: {
          typeDescription: ''
        },

        mapNavigation: {
          enabled: true,
          buttonOptions: {
            verticalAlign: 'bottom'
          }
        },

        colorAxis: {
          tickPixelInterval: 100
        },

        series: [{
          data: data,
          keys: ['nama_kecamatan', 'value'],
          joinBy: 'nama_kecamatan',
          name: 'Jumlah P3KE',
          dataLabels: {
            enabled: true,
            format: '{point.properties.nama_kecamatan}'
          }
        }]
      });
    });
  }
</script>
@endsection