@extends('layouts.app')

@push('action')
    <li class="nav-item ms-3">
        @can('user-create')
        <a class="btn btn-success btn-icon"  href="{{ route('users.create') }}">
        <i class="bi bi-check-circle"></i>New</a>
        @endcan
    </li>
@endpush

@section('contents')
    <div class="content ">
        <div class="mb-4">
            <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{url('dashboard')}}">
                            <i class="bi bi-globe2 small me-2"></i> Dashboard
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Users</li>
                </ol>
            </nav>
        </div>
        <div class="table-responsive">

            <table id="orders" class="table table-striped table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th>Sl No</th>
                    <th>Name</th>                                       
                    <th>Email</th>
                    <th>Roles</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection
@push('script')
<script >
    //listing
    if ($("#orders").length) {
        var i = 1;
        $("#orders").DataTable({
            "processing": true,
            "lengthChange": true,
            "serverSide": true,
            "dom": '<"dt-buttons"Bf><"clear">lirtp',
            "paging": true,
            "scrollX": false,
            // "responsive":true,
            'stateSave': true,
            "autoWidth": false,
            "ajax": {
                url: "{{ route('user.list') }}",
            },
                columns: [
                {
                    "data": "id", render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: 'name', name: 'name', orderable: true, searchable:true },
                { data: 'email', name: 'email', orderable: true, searchable:true },
                { data: 'roles', name: 'roles', orderable: true, searchable:true },
                { data: 'action', name: 'action'},
              
            ],
            initComplete: function () {
                this.api().columns().every(function () {
                    var column = this;
                    var input = document.createElement("input");
                    $(input).appendTo($(column.footer()).empty())
                        .on('change', function () {
                            column.search($(this).val(), false, false, true).draw();
                        });
                });
            },
            "fnDrawCallback": function (oSettings) {
                $(".btn-delete").click(function () {
                    swal({
                        title: "Are you sure want to delete ?",
                        icon: "warning",
                        buttons: true,
                        dangerMode: true,
                    }).then((willDelete) => {
                        if (willDelete) {
                            var user = $(this).data('value');
                            delete_user(user);
                        }
                    });
                });
            },
            buttons: [
                {
                    extend: "copy",
                    className: "btn-sm"
                },
                {
                    extend: "csv",
                    className: "btn-sm"
                },
                {
                    extend: "excel",
                    className: "btn-sm"
                },
                {
                    extend: "pdfHtml5",
                    className: "btn-sm"
                },
                {
                    extend: "print",
                    className: "btn-sm"
                },
            ]
        });
    }

     //Delete
    function delete_user(id) {
               var urlS = "{{ url('users') }}/:id";
               var url = urlS.replace(':id', id);
               $.ajax({
                   url: url,
                   data: {
                       "_token": "{{ csrf_token() }}",
                   },
                   type: 'DELETE',
                   success: function (response) {
                       if (response) {
                           $('#orders').DataTable().ajax.reload();
                           if (response.status == 200) {
                               swal(response.message, {
                                   icon: "success",
                                   timer: 2000,
                               });
                           } else{
                                swal(response.message, {
                                   icon: "error",
                                   timer: 4000,
                               });
                           }
                       }
                   },
                  error: function (data) {
                    if (data) {
                        if (data.status == 403) {
                            swal({
                            text: 'you dont have the permission for this action ',
                            icon: "error",
                            timer: 5000,
                        });
                        } else{
                             swal(data.message, {
                                icon: "error",
                                timer: 4000,
                            });
                        }
                    }
                   },
               });

           }

            //Edit 
             function edit_user(id)
             {
                 var urlS = "{{ url('users') }}/:id/edit";
                 var url = urlS.replace(':id', id);
                 $.ajax({
                     success: function (response) {
                         if (response) {
                            window.location.href = url;
                         }

                     },
                        error: function (data) {
                          if (data) {
                              if (data.status == 403) {
                                  swal({
                                  text: 'you dont have the permission for this action ',
                                  icon: "error",
                                  timer: 5000,
                              });
                              } else{
                                   swal(data.message, {
                                      icon: "error",
                                      timer: 4000,
                                  });
                              }
                          }
                         },
                 });
             }
</script>
@endpush