@extends('layouts.admin')

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

  <div class="card">
    <div class="card-header">
      <h6 class="card-title">@lang('keyword.revenue')</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="revenue_table">
        <thead>
          <tr>
            <th><input type="checkbox" id="checkAll"></th>
            <th>N.0</th>
            <th>@lang('keyword.merchant')</th>
            <th>@lang('keyword.address')</th>
            <th>@lang('keyword.revenue') ($)</th>
            <th>@lang('keyword.revenue') (@lang('keyword.khr'))</th>
            {{-- <th class="text-center">@lang('keyword.action')</th> --}}
          </tr>
        </thead>
        <tfoot>
          <tr>
              <th colspan="4" style="text-align:right">@lang('keyword.total'):</th>
              <th></th>
              <th></th>
              {{-- <th></th> --}}
          </tr>
        </tfoot>
        <tbody>

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

<script type="text/javascript">
  $(document).ready(function(){

    var start = moment().subtract(29, 'days');
    var end = moment();


    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){
      $('#revenue_table').DataTable().ajax.reload(null, false);
      e.preventDefault();
    });
    $('#checkAll').on('change',function(){
      $('#revenue_table input:checkbox').prop('checked',$(this).is(":checked"));
    });

     var datatable = $('#revenue_table').DataTable({
        'dom': 'f<"filter 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: '/admin/revenue/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() }}";
                }

        },
        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":      "គ្មានទិន្នណ័យ",
        },
        'columns': [
          {
            data: 'check',
            width: '10px',
            searchable: false,
            orderable: false
          },
          {
            data: 'n',
            searchable: false
          },
          {
            data: 'merchant'
          },
          {
            data: 'address'
          },
          {
            data: 'revenueUS',
            searchable: false
          },
          {
            data: 'revenueKH',
            searchable: false
          }
          // {
          //   data: 'action',
          //   class: 'text-center justify-content-center',
          //   orderable: false,
          //   searchable: false
          // }
        ],
        "aoColumnDefs": [ {
                   "aTargets": [ 0,2,4,5 ],
                   "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( 4 )
              .data()
              .reduce( function (a, b) {
                  return intValUS(a) + intValUS(b);
              }, 0 );

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

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

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

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

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

    });



    $(document).on('click','.dropdown-item.view',function(){
        var id = $(this).attr('id');
        $.ajax({
          url: '/admin/revenue/view/'+id,
          data: {
            "_token": "{{ csrf_token() }}"
          },
          success: function(data){
            window.open("/admin/revenue/view/"+id, "myTab");
          }
      });
    });
</script>
<style media="screen">
  div.filter{
    width: 15%;
    margin-left: 20px;
  }
  div.filter .col-form-label{
    margin-right: 5px;
  }
</style>
@endsection