@extends('layouts.admin')

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

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h6 class="card-title">@lang('keyword.laundry')@lang('keyword.list')</h6>
                    </div>
                    <div class="row form-group m-1">
                        <label for="" class="col-form-label col-sm-1">@lang('keyword.date-range'):&nbsp; </label>
                        <div id="reportrange" class="w-25 btn" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 25%">
                            <i class="icon-calendar5"></i>&nbsp;
                            <span></span> <i class="fa fa-caret-down"></i>
                        </div>

                        <label for="" class="col-form-label col-sm-1">@lang('keyword.merchant'):&nbsp; </label>
                        <select class="custom-select w-25" name="select-merchant">
                            <option value="">@lang('keyword.list')</option>
                            @foreach ($merchants as $merchant)
                                <option value="{{ $merchant->id }}">{{ $merchant->brand_name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <hr>
                    <div class="table-responsive  p-3">
                        <table class="table text-nowrap" id="laundryTable">
                            <thead>
                            <tr>
                                <th><input type="checkbox" id="check-all" class="check-all"></th>
                                {{-- <th>ID</th> --}}
                                <th>@lang('keyword.customer')</th>
                                <th>@lang('keyword.merchant')</th>
                                {{-- <th>@lang('keyword.code')</th> --}}
                                <th>@lang('keyword.weight')</th>
                                <th>@lang('keyword.paid')</th>
                                <th>@lang('keyword.status')</th>
                                <th>@lang('keyword.price') ($)</th>
                                <th>@lang('keyword.price') (@lang('keyword.khr'))</th>
                                <th>@lang('keyword.created_at')</th>
                                <th class="text-center">@lang('keyword.action')</th>
                            </tr>
                            </thead>
                            <tfoot>
                            <tr>
                                <th colspan="6" style="text-align:right">@lang('keyword.total'):</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                            </tr>
                            </tfoot>
                            <tbody>

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

<script type="text/javascript">

    $(document).ready(function(){
      var start = moment().subtract(29, 'days');
      var end = moment();

      $('select[name="select-merchant"]').on('change',function(){
        $(document).trigger('reDrawTable');
      })
      function cb(startDate, endDate) {
          $('#reportrange span').html(startDate.format('MMMM D, YYYY') + ' - ' + endDate.format('MMMM D, YYYY'));
          start = startDate;
          end = endDate;
          $(document).trigger('reDrawTable');

      }

      $('#reportrange').daterangepicker({
          startDate: start,
          endDate: end,
          locale: {
            "customRangeLabel": "@lang('keyword.custom-range')",
          },
          ranges: {
             '@lang('keyword.today')': [moment(), moment()],
             '@lang('keyword.yesterday')': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
             '@lang('keyword.last-7-days')': [moment().subtract(6, 'days'), moment()],
             '@lang('keyword.last-30-days')': [moment().subtract(29, 'days'), moment()],
             '@lang('keyword.this-month')': [moment().startOf('month'), moment().endOf('month')],
             '@lang('keyword.last-month')': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          }
      }, cb);

      cb(start, end);
      $(document).on('reDrawTable',function(e){
        $('#laundryTable').DataTable().ajax.reload(null, false);
        e.preventDefault();
      });
       $('#laundryTable').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: '/laundry/data',
          dataSrc: 'data',
          method: 'post',
          data: function(d){
                    d.merchantID = $('select[name="select-merchant"]').val();
                    d.startDate = start.format('YYYY-MM-DD HH:mm:00');
                    d.endDate = end.format('YYYY-MM-DD HH:mm:00');
                    d._token = "{{ csrf_token() }}";
                }

        },
        'columns': [
          {
            data: 'check',
            width: '10px',
            searchable: false,
            orderable: false
          },
          // {
          //   data: 'id'
          // },
          {
            data: 'customer'
          },
          {
            data: 'merchant'
          },
          // {
          //   data: 'code'
          // },
          {
            data: 'weight'
          },
          {
            data: 'paid'
          },
          {
            data: 'status'
          },
          {
            data: 'priceUS',
            width: '10px'
          },
          {
            width: '10px',
            data: 'priceKH'
          },
          {
            data: 'date'
          },
          {
            data: 'action',
            class: 'text-center justify-content-center'
          }
        ],
        "aoColumnDefs": [ {
                   "aTargets": [ 0,2,4,5,6 ],
                   "mRender": function ( data, type, full ) {
                    return $("<div/>").html(data).text();
                    }
          } ],
        "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api(), data;

          // Remove the formatting to get integer data for summation
          var intValUS = function ( i ) {
              return typeof i === 'string' ?
                  i.replace(/[\$,]/g, '')*1 :
                  typeof i === 'number' ?
                      i : 0;
          };
          var intValKH = function ( i ) {
              return typeof i === 'string' ?
                  i.replace(/[\៛,]/g, '')*1 :
                  typeof i === 'number' ?
                      i : 0;
          };

          // Total over all pages
          totalUS = api
              .column( 6 )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );

          // Total over this page
          pageTotalUS = api
              .column( 6, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );

          totalKH = api
                  .column( 7 )
                  .data()
                  .reduce( function (a, b) {
                      return intValKH(a) + intValKH(b);
                  }, 0 );

              // Total over this page
          pageTotalKH = api
                .column( 7, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intValKH(a) + intValKH(b);
                }, 0 );

          // Update footer
          $( api.column( 6 ).footer() ).html(
              '$'+pageTotalUS.toFixed(2) +' ( $'+ totalUS.toFixed(2) +' @lang('keyword.total'))'
          );

          $( api.column( 7 ).footer() ).html(
              '៛ '+addCommas(pageTotalKH)  +' ( ៛ '+ addCommas(totalKH) +' @lang('keyword.total'))'
          );
      }
    // 'order': [[1, 'desc']]
      });

      $('div.bulkAction.float-left.row').html('<label class="col-form-label col-lg-6">@lang('keyword.action'): </label><select class="custom-select col-lg-6" id="status-action"><option value="">@lang('keyword.choose')</option><option value="makePending">@lang('keyword.pending')</option><option value="makeReady">@lang('keyword.ready')</option><option value="makeComplete">@lang('keyword.complete')</option><option value="cancel">@lang('keyword.cancel')</option></select>');
      $('#check-all').on('change',function(){
        $('#laundryTable input:checkbox').prop('checked',$(this).is(":checked"));
      });
      $('select#status-action').on('change',function(){

        var action = $(this).val();
        var selected = [];
         if(action != '') {
             if(confirm('Are you sure want to proceed this?')){
                 $('.selected_checkbox:checked').each(function(){
                     selected.push($(this).attr('id'));
                 })
                 if(selected.length > 0){
                     $.ajax({
                         url: '/laundry/'+action,
                         type: 'post',
                         data:{
                             "_token": "{{ csrf_token() }}",
                             "id": selected
                         },
                         success: function(){
                             $(document).trigger('reDrawTable');
                             $('#check-all').prop('checked',false);
                         }
                     })
                 }
             }
         }
          $(this).val("");
      })

    });
    $(document).on('click','.dropdown-item.view',function(){
      var id = $(this).attr('id');
      $.ajax({
        url: '/admin/laundry/view/'+id,
        data: {
          "_token": "{{ csrf_token() }}"
        },
        success: function(data){
          window.open("/admin/laundry/view/"+id, "myTab");
        }
      });
    });
    $(document).on('click','#status-action .status-action',function(){
      var lnk = $(this).attr('value');
      var id = $(this).attr('id');
      $.ajax({
        url: '/laundry/'+lnk,
        type: 'post',
        data:{
          "_token": "{{ csrf_token() }}",
          "id": id
        },
        success: function(){
          $(document).trigger('reDrawTable');
        }
      });

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