@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">Data User </h4>
                              </div>
                              <div class="col-sm-6 col-lg-6">
                                 <a href="{{ route('users.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>Image</th>
                                 <th>Name</th>
                                 <th>Username</th>
                                 <th>Email</th>
                                 <th>Role</th>
                                 <th>Aktif</th>
                                 <th>Aksi</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,
         ajax: {
            url: `{{ route('users.index') }}`
         },
         lengthMenu: [
            [ 10, 25, 50, -1 ],
            [ '10', '25', '50', 'All' ]
      ],
         columns: [{
            data: 'image',
            name: 'image',
            render: function (data, type, full, meta) {
               if (data !== null) {
                  return `<img src="/storage/images/thumbnail/${data}" style="max-width:100px; max-height: 100px;">`
               }
               return `<img src="/images/no-content.svg" style="max-width:100px; max-height: 100px;">`
            },
         },
            {
               data: 'name',
               name: 'name'
            },
            {
               data: 'username',
               name: 'username'
            },
            {
               data: 'email',
               name: 'email'
            },
            {
               data: 'roles.name',
               name: 'roles.name'
            },
            {
               data: 'active',
               name: 'active',
               render: function (data, type, row, meta) {
                  if(data === 0){
                     return `<span class="badge bg-danger"> Tidak Aktif </span>`;
                  }else{
                     return `<span class="badge bg-success"> Aktif </span>`;
                  }
               },
            },
            {
               data: 'action',
               name: 'action',
               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("users.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 !');
                           }
                        }
                     });
                  }
               });
            });
            $(row).find('.btn-reset').click(function(){
               let url = $(this).data('url');
                  $.ajax({
                     url: url,
                     type: "GET",
                     error   : function(response){
                        toastr.error(response, 'Failed !');
                     },
                     success : function(response) {
                        if (response.status === "success") {
                           
                           toastr.success(response.message, 'Success !');
                           setTimeout(function(){  
                              location.reload();
                           }, 600)
                        } else {
                           toastr.error((response.message ? response.message : "Please complete your form"), 'Failed !');
                        }
                     }
                  });
            });
         }
      });
   });
</script>
   </body>
</html>