@extends('layouts.admin')

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

  <div class="card">
      <div class="card-header">
        <h6 class="card-title">@lang('keyword.merchant')@lang('keyword.list')</h6>
      </div>
      <div class="row p-3">
        <label for="" class="col-form-label col-sm-">@lang('keyword.province'):&nbsp; </label>
        <select class="custom-select w-25" name="select-province">
          <option value="">@lang('keyword.list')</option>
          @foreach ($provinces as $province)
            <option value="{{ $province->pro_id }}">{{ $province->province }}</option>
          @endforeach
        </select>
      </div>
      <hr>
    <div class="table-responsive  p-3">
      <table class="table text-nowrap" id="users_table">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>@lang('keyword.brand_code')</th>
            <th>@lang('keyword.profile-picture')</th>
            <th>@lang('keyword.owner')</th>
            <th>@lang('keyword.brand_name')</th>
            <th>@lang('keyword.address')</th>
            <th>@lang('keyword.primary_tel')</th>
{{--            <th>@lang('keyword.secondary_tel')</th>--}}
            <th>@lang('keyword.status')</th>
            <th class="text-center" style="width: 20px">@lang('keyword.action')</th>
          </tr>
        </thead>
        <tbody>

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

<script type="text/javascript">
$(document).ready(function(){
    $('select[name="select-province"]').on('change',function(){
      $(document).trigger('reDrawTable');
    })
    $(document).on('reDrawTable',function(e){
      $('#users_table').DataTable().ajax.reload();
      e.preventDefault();
    });
   $('#users_table').DataTable({
    'dom': 'f<"bulkAction float-left row">ltip',
    'processing': true,
    'severSide': true,
    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":      "គ្មានទិន្នន័យ",
    },
    'ajax':{
      url: '/merchants/data',
      dataSrc: 'data',
      method: 'post',
      data: function(d){
                d.pro_id = $('select[name="select-province"]').val();
                d._token = "{{ csrf_token() }}";
            }
    },
    'columns': [
      {
        data: 'check',
        width: '10px'
      },
      {
        width: '20px',
        data: 'code'
      },
      {
        data: 'profile',
        class: 'text-center',
        width: '20px'
      },
      {
        data: 'name'
      },
      {
        data: 'brand_name'
      },
      {
        data: 'address'
      },
      {
        data: 'pri_phone_number'
      },
      // {
      //   data: 'sec_phone_number'
      // },
      {
        data: 'status'
      },
      {
        width: '10px',
        class: 'text-center',
        data: 'action'
      }
    ],
    "aoColumnDefs": [ {
               "aTargets": [ 0,2,4,5,7 ],
               "mRender": function ( data, type, full ) {
                return $("<div/>").html(data).text();
                }
      } ],
    'order': [[1, 'decs']]
  });
  $('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 value="">@lang('keyword.choose')</option><option value="delete-all">@lang('keyword.delete')</option><option value="enable">@lang('keyword.enable')</option><option value="disable">@lang('keyword.disable')</option><select>');
  $('#checkAll').on('change',function(){
    $('#users_table input:checkbox').prop('checked',$(this).is(":checked"));
  });
  $('#bulkAction').on('change',function(){
    var selected = [];
    var lnk = $(this).val();
    if(lnk != '') {
        if(confirm('Are you sure want proceed this')){
            $('.selected_checkbox:checked').each(function(){
                selected.push($(this).attr('id'));
            })
            if(selected.length>0){
                $.ajax({
                    url: '/admin/merchants/'+lnk,
                    method: 'post',
                    data: {"_token":"{{ csrf_token() }}",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("");

  });
})
</script>
<style media="screen">
  div.bulkAction{
    width: 15%;
    margin-left: 20px;
  }
</style>
@endsection