@extends('layouts.admin')

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

  <div class="card">
    <div class="card-header">
      <h6 class="card-title">ចំណូល</h6>
    </div>
    <div class="table-responsive  p-3">
      <table class="table text-nowrap" id="laundryTable">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>កូដ</th>
            <th>Merchants</th>
            <th>អាស័យដ្ឋាន</th>
            <th>Rate</th>
            <th>ប្រាក់ចំណូល</th>
            <th class="text-center">ប្រតិបត្តការ</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
              <th colspan="9" style="text-align:right">Total:</th>
              <th></th>
              <th></th>
          </tr>
        </tfoot>
        <tbody>

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

<script type="text/javascript">

    $(document).ready(function(){
       $('#laundryTable').DataTable({
         'dom': 'f<"bulkAction float-left row">ltip',
        'processing': true,
        'severSide': true,

        'ajax':{
          url: '/admin/revenue/data',
          dataSrc: 'data'

        },
        'columns': [
          {
            data: 'check',
            width: '10px'
          },
          {
            data: 'n'
          },
          {
            data: 'merchant'
          },
          {
            data: 'address'
          },
          {
            data: 'rateUS'
          },
          {
            data: 'revenueUS'
          },
          {
            data: 'rateKH'
          },
          {
            data: 'revenueKH'
          },
          {
            data: 'action',
            class: 'text-center justify-content-center'
          }
        ],
        "aoColumnDefs": [ {
                   "aTargets": [ 0,3,6,7 ],
                   "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( 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
                .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) +' total)'
          );

          $( api.column( 10 ).footer() ).html(
              '៛'+pageTotalKH +' ( ៛'+ totalKH +' total)'
          );
      },
    'order': [[1, 'desc']]
      });
      $('div.bulkAction.float-left.row').html('<label class="col-form-label col">Bulk Action: </label><select class="custom-select col-lg" id="bulkAction"><option>Delete</option><option>Enable</option><option>Disable</option><select>');
      $('#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: '/admin/laundry/view/'+id,
        data: {
          "_token": "{{ csrf_token() }}"
        },
        success: function(data){
          window.open("/admin/laundry/view/"+id, "myTab");
        }
      });
    });
</script>
<style media="screen">
  div.bulkAction{
    width: 15%;
    margin-left: 20px;
  }
</style>
@endsection