@extends('layouts.merchant')

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

  <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-lg-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>
    </div>

    <hr>
    <div class="table-responsive  p-3">
      <table class="table text-nowrap" id="laundryTable">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>@lang('keyword.id')</th>
              <th>Print</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="8" style="text-align:right">@lang('keyword.total'):</th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
          </tr>
        </tfoot>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>
</div>
    </div>
<script type="text/javascript">

    $(document).ready(function(){
      var start = moment().startOf('day');
      var end = moment().endOf('days');
      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,

        'ajax':{
          url: '/merchant/laundry/data',
          dataSrc: 'data',
          method: 'post',
          data: function(d){
                    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: 'print',
                width: '10px',
                searchable: false,
                orderable: false
            },
          {
            data: 'customer'
          },
          {
            data: 'merchant'
          },
          {
            data: 'code'
          },
          {
            data: 'weight'
          },
          {
            data: 'paid'
          },
          {
            data: 'status'
          },
          {
            data: 'priceUS'
          },
          {
            data: 'priceKH'
          },
          {
            data: 'date'
          },
          {
            data: 'action',
            class: 'text-center justify-content-center'
          }
        ],
        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":      "គ្មានទិន្នណ័យ",
        },

        "aoColumnDefs": [ {
                   "aTargets": [ 0, 2,4,7,8,9 ],
                   "mRender": function ( data, type, full ) {
                    return $("<div/>").html(data).text();
                    }
          } ],
          "createdRow": function( row, data, dataIndex){
                    if( data['paid_status'] ==  1){
                        $(row).addClass('paid');
                    }
                },
        "footerCallback": function ( row, response, start, end, display ) {

          var api = this.api(), response;


          // 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
          // var totalUS = 0;
          // $('#laundryTable').DataTable().rows('.paid').every(function(){
          //   if($(this).hasClass('paid')){
          //     var totalUs = api
          //         .column( 8 )
          //         .data()
          //         .reduce( function (a, b) {
          //           return intValUS(a) + intValUS(b);
          //     }, 0 );
          //   }
          //
          // });
          totalUS = api
              .rows('.paid')
              .column( 9 )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );

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

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

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

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

          $( api.column( 10 ).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="pending">@lang('keyword.pending')</option><option value="ready">@lang('keyword.ready')</option><option value="complete">@lang('keyword.complete')</option><option value="cancel">@lang('keyword.cancel')</option></select>');
      $('select#status-action').on('change',function(){
        var action = $(this).val();
        var selected = [];
        if(action != '') {
         if(confirm('Are you sure to do this action?')){
           $('.selected_checkbox:checked').each(function(){
             selected.push($(this).attr('id'));
           })
           if(selected.length > 0){
             $.ajax({
               url: '/merchant/laundry/'+action,
               type: 'post',
               data:{
                 "_token": "{{ csrf_token() }}",
                 "id": selected
               },
               success: function(){
                 $(document).trigger('reDrawTable');
                 $('#checkAll').prop('checked',false);
               }
             })
           }
         }
        }
        $(this).val("");
      });
      $('#checkAll').on('change',function(){
        $('#laundryTable input:checkbox').prop('checked',$(this).is(":checked"));
      });

    });
    $(document).on('click','.dropdown-item.view',function(){
      var id = $(this).attr('id');
      $.ajax({
        url: '/merchant/laundry/view/'+id,
        data: {
          "_token": "{{ csrf_token() }}"
        },
        success: function(data){
          window.open("/merchant/laundry/view/"+id, "myTab");
        }
      });
    });
    $(document).on('click','#status-action .status-action',function(){
      var lnk = $(this).attr('value');
      var id = $(this).attr('id');
      console.log(lnk);
      $.ajax({
        url: 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