@extends('template.master')

@section('title', 'Dashboard TKPK - Rekapitulasi Kesejahteraan')
@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> Rekapitulasi</h4>
            <div class="card p-4">
              
                <div class="card-datatable text-nowrap">
                  <table id="table_rekapsejahtera" class="display" style="width:100%">
                    <thead>
                        <tr>                            
                            <th rowspan="2">Kecamatan</th>
                            <th colspan="3">Keluarga</th>
                            <th colspan="3">Individu</th>
                        </tr>
                        <tr>                            
                            <th>Desil 1</th>
                            <th>Desil 2</th>
                            <th>Desil 3</th>
                            <th>Desil 1</th>
                            <th>Desil 2</th>
                            <th>Desil 3</th>
                        </tr>
                        <tr>
                            <th>Total</th>
                            <th id="desil1_total_kepkel">xxx</th>
                            <th id="desil2_total_kepkel">xxx</th>
                            <th id="desil3_total_kepkel">xxx</th>
                            <th id="desil1_total_indi">xxx</th>
                            <th id="desil2_total_indi">xxx</th>
                            <th id="desil3_total_indi">xxx</th>
                        </tr>
                        
                    </thead>
                      
                </table>
                </div>
              </div>


          </div>

          <div class="content-backdrop fade"></div>
        </div>
        <!-- Content wrapper -->
@endsection
@section('jquery')
<script>
  function commaSeparateNumber(val) {
    while (/(\d+)(\d{3})/.test(val.toString())) {
        val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
    }

    return val;
  }
  function getTotalDesil(){
    $.ajax({
      url: "{{route('api.gettablerekapsum')}}",
      data: "key=Jumlah Desil P3KE Table",
      type: "GET",
      dataType: "json",
      cache: false,
      success: function(data) {
        $('#desil1_total_kepkel').html(commaSeparateNumber(data[0]));
        $('#desil2_total_kepkel').html(commaSeparateNumber(data[1]));
        $('#desil3_total_kepkel').html(commaSeparateNumber(data[2]));
        $('#desil1_total_indi').html(commaSeparateNumber(data[3]));
        $('#desil2_total_indi').html(commaSeparateNumber(data[4]));
        $('#desil3_total_indi').html(commaSeparateNumber(data[5]));
      },
    })
  }
  $(document).ready(function() {        
    var table = new DataTable('#table_rekapsejahtera', {
      ordering: false,
      scrollX: true,
      "processing": true,
      ajax: {
        url: "{{route('api.gettablerekap')}}",
        // data: "key=",
        type: "GET",
        dataType: "json",
        cache: false,
      },
      columns: [
        { data: 'kecamatan' },
        { data: 'desil1_kepkel'},
        { data: 'desil2_kepkel' },
        { data: 'desil3_kepkel' },
        { data: 'desil1_individu' },
        { data: 'desil2_individu' },
        { data: 'desil3_individu' }
      ],
      "columnDefs": [
        {
            "render": function (data, type, row) {
                return commaSeparateNumber(data);
            },
            "targets": [1,2,3,4,5,6]
        },
      ]
    });
    getTotalDesil();
  });
</script>
@endsection