@extends('layouts.admin')

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

  <div class="card">
    <div class="card-header">
      @if(\Illuminate\Support\Facades\Session::has('success'))
        <div class="alert alert-success">
          <span class="text-success">{{ Session::get('success') }}</span>
        </div>
      @endisset
      <div class="row">
        <div class="col-sm-6">
          <h6 class="card-title">ផលិតផលទាំងអស់</h6>
        </div>
        <div class="col-sm-6 text-right">
          <a href="{{ route('admin.product.add') }}" class="btn btn-primary"><i class="icon-plus-circle2"></i> បង្កើតផលិតផលថ្មី</a>
        </div>
      </div>
    </div>
    <div class="table-responsive  p-3">
      <table class="table text-nowrap" id="products_table">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>No</th>
            <th>រូបភាព</th>
            <th>ឈ្មោះផលិតផល</th>
            <th>លេខកូដ</th>
            <th>តម្លៃ</th>
            <th>ក្រុមផលិតផល</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 = $('#products_table').DataTable({
    'dom': 'f<"bulkAction float-left row">ltip',
    'processing': true,
    'severSide': true,

    'ajax':{
      url: 'products/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: 'photo',
        class: 'text-center',
        width: '20px'
      },
      {
        data: 'title'
      },
      {
        data: 'code'
      },
      {
        data: 'price'
      },
      {
        data: 'groupName'
      },
      {
        data: 'status'
      },
      {
        data: 'created_at'
      },
      {
        class: 'text-center',
        data: 'action'
      }
    ],
    "aoColumnDefs": [ {
               "aTargets": [ 0,2,3,7 ],
               "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 products?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('products.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 products?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('products.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 products?')){
        $('.selected_checkbox:checked').each(function(){
          selected.push($(this).attr('id'));
          console.log(selected);
        })
        if(selected.length>0){
          $.ajax({
            url: '{{ route('products.disableAll') }}',
            method: 'get',
            data: {data:selected},
            success: function(){
              $('#products_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(){
    $('#products_table input:checkbox').prop('checked',$(this).is(":checked"));
  });
})
</script>
<style media="screen">
  div.bulkAction{
    width: 15%;
    margin-left: 20px;
  }
</style>
@endsection