@extends('backend.template')
@section('main') 

    <div class="pagetitle">
      <h1>Setting</h1><br>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item">Setting</li>
          <li class="breadcrumb-item active">List User</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->
<style>
  br {
   display: block !important;
   margin-top: 5px 0 !important;
}
</style>
    <section class="section">
      <div class="row">
        <div class="col-lg-12">

        @if(Session::has('gagal'))
`       <div class="alert alert-danger">
        {{Session::get('gagal')}}
        </div>
        @endif

        @if(Session::has('sukses'))
        <div class="alert alert-success">
        {{Session::get('sukses')}}
        </div>
        @endif
        
          <div class="card">
            <div class="card-body table-responsive">
              <h5 class="card-title" >List User</h5>
              <!-- <span>Pertanyaan Pengusaha Yang Masuk</span> -->
              <div class="text-right">
              <a href="{{route('user.add')}}" class="btn btn-primary btn-sm"><i class="ri-add-box-fill"></i> Add</a>
              </div>
              <!-- Table with stripped rows -->
              <form method="post" action="{{route('user.delete_all')}}" id="form-delete">
                      @csrf
                      <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
                      <thead>
                      <tr>
                      <th width="8px;"><input id="check-all" type="checkbox"></th>
                      <th width="8px;" >No</th>
                      <th>Name</th>
                      <th>Username</th>
                      <th>Email</th>
                      <th>Group</th>
                      <th style="width:10px;">Active</th>
                      <th style="width:12px;">Action</th>
                      </tr>
                      </thead>
                      <tbody>
                        
                      </tbody>
                    </table>
                    </form>
              <!-- End Table with stripped rows -->
          </form>
            </div>
          </div>

        </div>
      </div>
    </section>
       
<style>
.toolbar {
    float:left;
}
.sorting_disabled
{
   background-image:none !important;
}
th.th-td-center, td.th-td-center { text-align: center; }
th.th-center { text-align: center; }
</style>
@endsection       

@section('footer_scripts')
<link rel="stylesheet" type="text/css" href="{{asset('assets_backend/css/bootstrap_3.3.7.css')}}"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap.min.css"/>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap.min.js"></script>
<script>
  $(document).ready(function(){
  $.ajaxSetup({
          headers: {
              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
  });
  var table = $('#datatable-responsive').DataTable({
        dom: '<"toolbar"><l>Bfrtip',
        processing: true,
        serverSide: true,
        destroy: true,
        ordering: false,
        initComplete:   function()  //Adding Custom button in Tools
        {
        $("div.toolbar").html('<button type="button" style="float:left;border:none;margin-right:10px;" onclick="delete_all()" class="badge bg-danger"><i class="bi bi-trash me-1"></i> Delete All</button>');
        },
        ajax: '{{route('users.jsondata')}}',
        columns:[ 
            {data:'x', name:'Check All',orderable: false},               
            {data:'No', name:'No'},
            {data: 'name', name:'name'},
            {data: 'username', name:'username'},
            {data: 'email', name:'email'},
            {data: 'group_name', name:'group_name'},
            {data: 'active', name:'active',className: 'th-td-center'},
            {data: 'action', name: 'action',className: 'th-td-center'}
        ],
       
        "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
         var index = iDisplayIndex +1;
        $('td:eq(1)',nRow).html(index);
        return nRow;
       },

       columnDefs: [{
        targets: [0],
        orderable: false
    }]

    });

    $(document).on('click','.btn-delete',function(e){
    e.preventDefault();
    var table   = $('#basic-datatables').DataTable();
    var href    = $(this).attr('href');
    var id      = $(this).data('id');
    
    swal({
						title: 'Anda Yakin ?',
						text: "Sistem Akan Menghapus data ini !",
						type: 'warning',
						buttons:{
							confirm: {
								text : 'Ya',
								className : 'btn btn-success'
							},
							cancel: {
								visible: true,
								className: 'btn btn-danger'
							}
						}
					}).then((Delete) => {
						if (Delete) {
							$.ajax({
                            type: "delete",
                            url: "{{route('user.delete')}}",
                            data: {id:id},
                            success: function (data) {
                              $('#datatable-responsive').DataTable().ajax.reload()
                                swal('Data berhasil dihapus !', {
                                buttons: {        			
                                    confirm: {
                                        className : 'btn btn-success'
                                    }
                                },
                            });
                            }         
                        });
						} else {
							swal.close();
						}
					});
        
    });

  });

    //Checkbox all
    $(document).ready(function(){ 
    $("#check-all").click(function(){ 
      if($(this).is(":checked")) 
        $(".check-item").prop("checked", true); 
      else
        $(".check-item").prop("checked", false); 
    });
    
    
     

  });

  function delete_all(){
         swal({
						title: 'Anda Yakin ?',
						text: "Sistem Akan Menghapus data ini !",
						type: 'warning',
						buttons:{
							confirm: {
								text : 'Ya',
								className : 'btn btn-success'
							},
							cancel: {
								visible: true,
								className: 'btn btn-danger'
							}
						}
					}).then((Delete) => {
						if (Delete) {
                                $("#form-delete").submit(); // Submit form
                                return true;
                                table.ajax.reload();
                               
						} else {
							swal.close();
                            $(this).find('button[type="submit"]').prop( 'disabled', true );
                            return false;
						}
					});       
    }
</script>
@endsection