@extends('layouts.merchant')

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

        <div class="card">
            <div class="card-header">
                <h6 class="card-title">@lang('keyword.expense')@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>@lang('keyword.customer')</th>
                            <th>@lang('keyword.invoicenum')</th>
                            <th>@lang('keyword.invoicedate')</th>
                            <th>@lang('keyword.amount')</th>
                            <th>@lang('keyword.invoicefile')</th>
                            <th>@lang('keyword.note')</th>
                            <th>@lang('keyword.created_at')</th>
                            <th class="text-center">@lang('keyword.action')</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                    <tfoot>
                        <tr>
                            <th colspan="5" 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>
<script type="text/javascript">

        $(document).ready(function(){
        // $('#laundryTable').DataTable();
        var start = moment().subtract(6, 'days');
        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/expense/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: 'name'
          },
          {
            data: 'inv_num'
          },
          {
            data: 'inv_date'
          },
          {
            data: 'amount'
          },
          {
            data: 'inv_file'
          },
          {
            data: 'note'
          },
          {
            data: 'created_at'
          },
          {
            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,5,6 ],
                   "mRender": function ( data, type, full ) {
                    return $("<div/>").html(data).text();
                    }
          } ],
        "footerCallback" : function ( row, response, start, end, display) {
          var api = this .api(), responese;

          // 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;
          };
          totalUS = api
              .rows('.paid')
              .column( 5 )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );
          // Total over this page
          pageTotalUS = api
              .column( 5, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );
          // Update footer
          $( api.column( 5 ).footer() ).html(
              '$'+pageTotalUS.toFixed(2) +' ( $'+ totalUS.toFixed(2) +' @lang('keyword.total'))'
          );
        },
          'order': [[1, 'desc']]
        });

    
      $('#checkAll').on('change',function(){
        $('#laundryTable input:checkbox').prop('checked',$(this).is(":checked"));
      });

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