@include('master.header')
<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-flex align-items-center justify-content-between">
                        <h4 class="mb-0">{{$config['title']}}</h4>

                        <div class="page-title-right">
                            <ol class="breadcrumb m-0">
                                @foreach($config['breadcrumbs'] ?? array() as $item)
                                <li class="breadcrumb-item"><a
                                        href="{{ $item['url'] ?? '#' }}">{{ $item['title'] ?? '' }}</a></li>
                                @endforeach
                            </ol>
                        </div>

                    </div>
                </div>
            </div>

            
          
            <div class="row">
                <div class="col-sm-12 col-lg-12">
                    <div class="card">
                    <div class="card-header justify-content-between">
                        <div class="header-title">
                        <div class="row">
                            <div class="col-sm-6 col-lg-6">
                            <h4 class="card-title">{{$config['title']}} </h4>
                            </div>
                            <div class="col-sm-6 col-lg-6">
                            <a href="{{ route('item.create') }}" class="btn btn-primary float-end">
                                <i class="bx bx-plus"></i> Tambah
                            </a>
                            </div>
                        </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                        <table id="dt" class="table table-bordered w-100">
                            <thead>
                                <tr>
                                    <th>Rekening</th>
                                    <th>Merek</th>
                                    <th>Nama</th>
                                    <th>Jenis Satuan</th>
                                    <th>Satuan 1</th>
                                    <th>Satuan 2</th>
                                    <th>Satuan 3</th>
                                    <th>Spesifikasi</th>
                                    <th>Deskripsi</th>
                                    <th>Klasifikasi</th>
                                    <th class="text-center">Action</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                        </div>
                    </div>
                    </div>
                </div>
                </div>

            
        </div> 
    </div>
@include('master.footer')
    <script>
      $(document).ready(function () {
        $('#dt').dataTable({

          responsive: true,
          serverSide: true,
          processing: true,
          lengthMenu: [
                [ 10, 25, 50, -1 ],
                [ '10', '25', '50', 'All' ]
            ],
          ajax: {
            url: `{{ route('item.index') }}`
          },
          columns: [
            {
              data: 'rekening_id',
              name: 'rekening_id',
              render: function(data, type, row, meta){
                if (row.rekening.parent.parent6.parent5.parent4.parent3.parent2.parents == null) {
                    return row.rekening.parent.parent6.parent5.parent4.parent3.parent2.no+ '.' +row.rekening.parent.parent6.parent5.parent4.parent3.no+ '.' +row.rekening.parent.parent6.parent5.parent4.no + '.' +row.rekening.parent.parent6.parent5.no+ '.' +row.rekening.parent.parent6.no+ '.' + row.rekening.parent.no;
                }else{
                    return row.rekening.parent.parent6.parent5.parent4.parent3.parent2.parents.no+ '.' + row.rekening.parent.parent6.parent5.parent4.parent3.parent2.no + '.'+row.rekening.parent.parent6.parent5.parent4.parent3.no+ '.' +row.rekening.parent.parent6.parent5.parent4.no + '.' +row.rekening.parent.parent6.parent5.no+ '.' +row.rekening.parent.parent6.no+ '.' + row.rekening.parent.no;
                }
              }
            },
            {
              data: 'merk.nama',
              name: 'merk.nama'
            },
            {
              data: 'nama',
              name: 'nama'
            },
            {
              data: 'jenissatuan.jenis_satuan',
              name: 'jenissatuan.jenis_satuan'
            },
            {
              data: 'satuan1.uraian',
              name: 'satuan1.uraian'
            },
            {
              data: 'satuan2.uraian',
              name: 'satuan2.uraian',
              defaultContent : ''
            },
            {
              data: 'satuan3.uraian',
              name: 'satuan3.uraian',
              defaultContent : ''
            },
            {
              data: 'spesifikasi',
              name: 'spesifikasi',
              defualtContent : '',
              render: function(data)
              {
                let json = JSON.parse(data.replace(/&quot;/g,'"'));
                        let spesifikasi = [];
                        Object.keys(json).forEach(key => {
                            spesifikasi.push(`${key}:${json[key]}`);
                        });
                        return spesifikasi.join(', ');
              }
            },
            {
              data: 'deskripsi',
              name: 'deskripsi',
              defaultContent : ''
            },
            {
              data: 'klasifikasi',
              name: 'klasifikasi',
              defaultContent : ''
            },
            {
              data: 'action',
              name: 'action',
              className: "text-center",
              orderable: false,
              searchable: false
            },
          ],
          rowCallback : function(row, data) {
            let api = this.api();
            $(row).find('.btn-delete').click(function(){
              let pk = $(this).data('id'),
                url = `{{ route("item.index") }}/` + pk;
              Swal.fire({
                title   : "Anda Yakin ?",
                text    : "Data tidak dapat dikembalikan setelah di hapus!",
                icon    : "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Ya, Hapus!",
                cancelButtonText: "Tidak, Batalkan",
              }).then((result) => {
                if (result.value) {
                  $.ajax({
                    url: url,
                    type: "DELETE",
                    data: {
                      _token  : '{{ csrf_token() }}',
                      _method : 'DELETE'
                    },
                    error   : function(response){
                      toastr.error(response, 'Failed !');
                    },
                    success : function(response) {
                      if (response.status === "success") {
                        toastr.success(response.message, 'Success !');
                        api.draw();
                      } else {
                        toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                      }
                    }
                  });
                }
              });
            });
          }
        });
      });
    </script>
   </body>
</html>