@extends('template.master')

@section('title', 'Dashboard TKPK - Kodefikasi')
@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> Kodefikasi</h4>
            
            {{-- <div class="text-start mb-3">
              <button type="button" class="btn btn-primary"><i class='bx bx-download icon-export'></i>Export</button>
          </div> --}}
            <div class="card p-4">
              
                <div class="card-datatable text-nowrap">
                  <div class="card-header">
                    <ul class="nav nav-pills card-header-pills" role="tablist">
                      <li class="nav-item" style="margin-right: 10px">
                        <button
                          type="button"
                          class="nav-link active"
                          role="tab"
                          id="kecamatan"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-pills-within-card-active"
                          aria-controls="navs-pills-within-card-active"
                          aria-selected="true">
                          Kode Kecamatan
                        </button>
                      </li>
                      <li class="nav-item">
                        <button
                          type="button"
                          class="nav-link"
                          role="tab"
                          id="kelurahan"
                          data-bs-toggle="tab"
                          data-bs-target="#navs-pills-within-card-link"
                          aria-controls="navs-pills-within-card-link"
                          aria-selected="false">
                          Kode Kelurahan
                        </button>
                      </li>
                      </li>
                    </ul>
                  </div>
                  <div class="card-body">
                    <div class="tab-content p-0">
                      <div class="tab-pane fade show active" id="navs-pills-within-card-active" role="tabpanel">
                        <table id="kodefikasi" class="stripe" style="width:100%">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>Kode BPS</th>                                  
                                  <th>Nama Kecamatan</th>
                              </tr>
                          </thead>                            
                        </table>
                      </div>
                      <div class="tab-pane fade" id="navs-pills-within-card-link" role="tabpanel">
                        <table id="kodefikasi2" class="stripe" style="width:100%">
                          <thead>
                              <tr>
                                  <th>No</th>
                                  <th>Kode BPS Kecamatan</th>                                  
                                  <th>Nama Kecamatan</th>
                                  <th>Kode BPS Kelurahan</th>
                                  <th>Nama Kelurahan</th>
                              </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                 
                </div>
              </div>


          </div>

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


@endsection
@section('jquery')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script>  
  $(document).ready(function() {
    let table = new DataTable('#kodefikasi', {
      ordering: false,
      scrollX: true,
      "processing": true,
      ajax: {
        url: "{{route('api.getwilayah')}}",
        data: {
          "jenis" : "kecamatan",
        },
        type: "GET",
        dataType: "json",
      },
      columns: [
        { data: 'kd_kecamatan',
          render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
          } 
        },
        { data: 'kd_kecamatan'},
        { data: 'kecamatan' },          
      ],        
    })
    let table2 = new DataTable('#kodefikasi2', {
      ordering: false,
      scrollX: true,
      "processing": true,
      ajax: {
        url: "{{route('api.getwilayah')}}",
        data: {
          "jenis" : "kelurahan",
        },
        type: "GET",
        dataType: "json",
      },
      columns: [
        { data: 'kd_kecamatan',
          render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1;
          } 
        },
        { data: 'kd_kecamatan'},
        { data: 'kecamatan' },
        { data: 'kd_kelurahan'},
        { data: 'kelurahan' },
      ],        
    })

    $.fn.dataTable.ext.errMode = 'none';

    $('#kodefikasi')
    .on( 'error.dt', function ( e, settings, techNote, message ) {
        // console.log( 'An error has been reported by DataTables: ', message );
        table.ajax.reload();
    })
    .DataTable();

    $('#kodefikasi2')
    .on( 'error.dt', function ( e, settings, techNote, message ) {
        // console.log( 'An error has been reported by DataTables: ', message );
        table2.ajax.reload();
    })
    .DataTable();

    $('#kecamatan').on("click", function() {
      table.ajax.reload();
      table.columns.adjust().draw();
    });
    $('#kelurahan').on("click", function() {
      table2.ajax.reload();
      table2.columns.adjust().draw();
    });
  });  
</script>
@endsection