@extends('layouts.admin')

@section('content')
<div class="content">

  <div class="card">
    <div class="card-header">
      <h6 class="card-title">@lang('keyword.customer')@lang('keyword.list')</h6>
    </div>
    <div class="table-responsive  p-3">
      <table class="table text-nowrap" id="users_table">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>No</th>
            <th>@lang('keyword.profile-picture')</th>
            <th>@lang('keyword.name')</th>
            <th>@lang('keyword.phone-number')</th>
            <th>@lang('keyword.status')</th>
            <th>@lang('keyword.created_at')</th>
            <th class="text-center" style="width: 20px;">@lang('keyword.action')</th>
          </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>

<script type="text/javascript">
$(document).ready(function(){
   var table = $('#users_table').DataTable({
    'dom': 'f<"bulkAction float-left row">ltip',
    'processing': true,
    'severSide': true,

    'ajax':{
      url: '/users/data',
      dataSrc: 'data',
    },
    language: {
      "paginate": {
      "first":      "@lang('keyword.first')",
      "last":       "@lang('keyword.latest')",
      "next":       "@lang('keyword.next')",
      "previous":   "@lang('keyword.previous')"
    },
    "search": '@lang('keyword.search') : ',
    "zeroRecords":    "@lang('keyword.no-result')",
    "lengthMenu":     "បង្ហាញ  _MENU_  @lang('keyword.report')",
    "info":           "បង្ហាញ _START_ ទៅ _END_ នៃ _TOTAL_ @lang('keyword.report')",
    "infoEmpty":      "គ្មានទិន្នន័យ",
    },
    'columns': [
      {
        data: 'check',
        width: '10px'
      },
      {
        data: 'id',
        width: '20px'
      },
      {
        data: 'profile',
        class: 'text-center',
        width: '20px'
      },
      {
        data: 'name'
      },
      {
        data: 'phone_number'
      },
      {
        data: 'status'
      },
      {
        data: 'created_at'
      },
      {
        class: 'text-center',
        data: 'action'
      }
    ],
    "aoColumnDefs": [ {
               "aTargets": [ 0,2,3,5 ],
               "mRender": function ( data, type, full ) {
                return $("<div/>").html(data).text();
                }
      } ]
    // 'order': [[1, 'desc']]
  });
  $('div.bulkAction.float-left.row').html('<label class="col-form-label col-6">@lang('keyword.action'): </label><select class="custom-select col-lg" id="bulkAction"><option>@lang('keyword.choose')</option><option>@lang('keyword.delete')</option><option>@lang('keyword.enable')</option><option>@lang('keyword.disable')</option><select>');
  $('#bulkAction').on('change',function(){
    if($(this).val() == "@lang('keyword.delete')"){
      var selected = [];
      if(confirm('Are you sure to delete all selected users?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('users.deleteAll') }}',
            method: 'get',
            data: {data:selected},
            success: function(){
              table.ajax.reload(null, false);
              var selected = [];
              $('#checkAll').prop('checked',false);

            },
            error: function(response){
              console.log('Error'+JSON.stringify(response));
            }
          })
        }
      }
    }
    if($(this).val() == "@lang('keyword.enable')"){
      var selected = [];
      if(confirm('Are you sure to enable all selected users?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('users.enableAll') }}',
            method: 'get',
            data: {data:selected},
            success: function(){
              table.ajax.reload(null, false);
              var selected = [];
              $('#checkAll').prop('checked',false);

            },
            error: function(response){
              console.log('Error'+JSON.stringify(response));
            }
          })
        }
      }
    }
    if($(this).val() == "@lang('keyword.disable')"){
      var selected = [];
      if(confirm('Are you sure to disable all selected users?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
          console.log(selected);
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('users.disableAll') }}',
            method: 'get',
            data: {data:selected},
            success: function(){
              $('#users_table').DataTable().ajax.reload(null, false);
              var selected = [];
              $('#checkAll').prop('checked',false);
            },
            error: function(response){
              // console.log('Error'+JSON.stringify(response));
            }
          })
        }
      }
    }
    $(this).val("@lang('keyword.choose')");
  });
  $('#checkAll').on('change',function(){
    $('#users_table input:checkbox').prop('checked',$(this).is(":checked"));
  });
})
</script>
<style media="screen">
  div.bulkAction{
    width: 15%;
    margin-left: 20px;
  }
</style>
@endsection