@extends('layout.master')

@push('plugin-styles')
<link href="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.css') }}" rel="stylesheet" />
<link href="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
<nav class="page-breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">User Management</a></li>
    <li class="breadcrumb-item active" aria-current="page">Users List</li>
  </ol>
</nav>
<div style="margin-bottom: 10px">
  <a href="{{route('users.create')}}" class="btn btn-success">Add User</a>
</div>
<div class="row">
  <div class="col-md-12 grid-margin stretch-card">
    <div class="card">
      <div class="card-body">
        <h6 class="card-title">User List</h6>
        <div class="table-responsive">
          <table id="dataTableUsers" class="table">
            <thead>
              <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Created_at</th>
                <th>Action</th>
              </tr>
            </thead>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('plugin-scripts')
  <script src="{{ asset('assets/plugins/datatables-net/jquery.dataTables.js') }}"></script>
  <script src="{{ asset('assets/plugins/datatables-net-bs5/dataTables.bootstrap5.js') }}"></script>
  <script src="{{ asset('assets/plugins/sweetalert2/sweetalert2.min.js') }}"></script>
@endpush

@push('custom-scripts')
  <script src="{{ asset('assets/js/data-table.js') }}"></script>
  <script>
    $(function() {
'use strict';

$(function() {
  var table = $('#dataTableUsers').DataTable({
    "aLengthMenu": [
      [10, 30, 50, -1],
      [10, 30, 50, "All"]
    ],
    "iDisplayLength": 10,
    "language": {
      search: ""
    },
    "dom": '<"html5buttons">lfrtip',
    "processing": true,
     "serverSide": true,
     "ajax": '{{route("admin.users.json")}}',
     "columns": [
        { data:'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
        { data: 'name', name: 'name'},
        { data: 'email', name: 'email'},
        { data: 'role', name: 'role'},
        { data: 'created_at', name: 'created_at'},
        { data: 'action', name: 'action'},
     ],
  });
  $('#dataTableUsers').each(function() {
    var datatable = $(this);
    // SEARCH - Add the placeholder for Search and Turn this into in-line form control
    var search_input = datatable.closest('.dataTables_wrapper').find('div[id$=_filter] input');
    search_input.attr('placeholder', 'Search');
    search_input.removeClass('form-control-sm');
    // LENGTH - Inline-Form control
    var length_sel = datatable.closest('.dataTables_wrapper').find('div[id$=_length] select');
    length_sel.removeClass('form-control-sm');
  });
  
@if (Session::get('message'))
const Toast = Swal.mixin({
      toast: true,
      position: 'top-end',
      showConfirmButton: false,
      timer: 3000
    });
    
    Toast.fire({
      icon: 'success',
      title: '{{Session::get('message')}}'
    })
@endif

});
});
function hapusUsers(e)
  {
    $.ajaxSetup({
    headers: {
    'X-CSRF-TOKEN': '{{csrf_token()}}'
    }
    });
      Swal.fire({
          title             : "Apakah Anda Yakin ?",
          text              : "Data Yang Sudah Dihapus Tidak Bisa Dikembalikan!",
          icon              : "warning",
          showCancelButton  : true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor : "#d33",
          confirmButtonText : "Ya, Tetap Hapus!"
      }).then((result) => {
          if (result.value) {
              $.ajax({
                  url    : e,
                  type   : "delete",
                  success: function(data) {
                    $('#dataTableUsers').DataTable().ajax.reload();
                    const Toast = Swal.mixin({
                      toast: true,
                      position: 'top-end',
                      showConfirmButton: false,
                      timer: 3000
                    });
                    
                    Toast.fire({
                      icon: 'success',
                      title: data
                    })
                  }
              })
          }
      })
  }
</script>
@endpush