@extends('layouts.app')

@section('content')
<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0 text-dark">{{trans('lang.earnings_plural')}}<small class="ml-3 mr-3">|</small><small>{{trans('lang.earnings_desc')}}</small></h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="{{url('/dashboard')}}"><i class="fa fa-dashboard"></i> {{trans('lang.dashboard')}}</a></li>
          <li class="breadcrumb-item"><a href="{!! route('reports.earnings') !!}">{{trans('lang.earnings_plural')}}</a>
          </li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<div class="content">
  <div class="clearfix"></div>
  @include('flash::message')
  <div class="card">
    <div class="card-header">
      <ul class="nav nav-tabs align-items-end card-header-tabs w-100">
        <li class="nav-item">
          <a class="nav-link active" href="{!! url()->current() !!}"><i class="fa fa-list mr-2"></i>{{trans('lang.earnings_table')}}</a>
        </li>
        <div class="ml-auto d-inline-flex">
          <li class="nav-item dropdown">
            <a class="nav-link  dropdown-toggle pt-1" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-save"></i> {{trans('lang.export')}}
            </a>
            <div class="dropdown-menu">
                <a class="dropdown-item" id="exportCsvDatatable" href="#"> <i class="fa fa-file-excel-o mr-2"></i>CSV</a>
                <a class="dropdown-item" id="exportExcelDatatable" href="#"> <i class="fa fa-file-excel-o mr-2"></i>Excel</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" id="exportPdfDatatable" href="#"> <i class="fa fa-file-pdf-o mr-2"></i>PDF</a>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <div class="card-body">
    <div class="row custom-filters border">
          <div class="col-sm-2" style="padding: 5px;">
          <label>{{ trans('lang.custom_filters') }}</label>
          </div>
          <div class="col-sm-2">
              <select name="merchant_dropdown" id="merchant_dropdown" class="form-control">
              <option value="0">{{ trans('lang.merchant') }}</option>
                  @foreach($merchant as $id=>$value)
                      <option value="{{$id}}">{{$value}}</option>
                  @endforeach
              </select>
          </div>
          <div class="col-sm-2">
              <select name="month_dropdown" id="month_dropdown" class="form-control">
              <option value="0">{{ trans('lang.month') }}</option>
                  @for($i=1; $i<=12; $i++)
                  <option value="{{$i}}">{{ trans('lang.' . date('F', mktime(0, 0, 0, $i, 10))) }}</option>
                  @endfor
              </select>
          </div>
          <div class="col-sm-2">
              <select name="year_dropdown" id="year_dropdown" class="form-control">
              <option value="0">{{ trans('lang.year') }}</option>
                  <option value="2021">2021</option>
              </select>
          </div>
      </div>
      <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>{{ trans('lang.order_id') }}</th>
                <th>{{ trans('lang.date') }}</th>
                <th>{{ trans('lang.items') }}</th>
                <th>{{ trans('lang.saved_co2') }}</th>
                <th>{{ trans('lang.sales') }}</th>
                <th>{{ trans('lang.sales_gst') }}</th>
                <th>{{ trans('lang.sales_qst') }}</th>
                <th>{{ trans('lang.total_sales') }}</th>
                {{-- <th>{{ trans('lang.tax') }}</th>
                <th>{{ trans('lang.total') }}</th> --}}
                <th>{{ trans('lang.admin_fee') }}</th>
                <th>{{ trans('lang.admin_fees_gst') }}</th>
                <th>{{ trans('lang.admin_fees_qst') }}</th>
                <th>{{ trans('lang.total_admin_fees') }}</th>
                <th>{{ trans('lang.net_revenue') }}</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
      <div class="clearfix"></div>
    </div>
  </div>
</div>
@endsection
@push('css_lib')
@include('layouts.datatables_css')
<style>
  .custom-filters{
    margin: 15px 0;
    padding: 10px;
  }
  .page-link{
    width: auto !important;
  }
</style>
@endpush

@push('scripts_lib')
<script src="{{asset('plugins/select2/select2.min.js')}}"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js"></script>

<script type="text/javascript">
var lang = '{{ app()->getLocale() }}';
function checkDataForShowEntries(){
  if(lang == 'fr'){
    return "Afficher _MENU_ éléments"
  } else {
    return "Show _MENU_ entries"
  }
}
function checkDataForSearch(){
  if(lang == 'fr'){
    return "Rechercher"
  } else {
    return "Search"
  }
}
function checkFileName(){
  if(lang == 'fr'){
    return "Sauvegarde - Rapport de revenus"
  } else {
    return "Sauvegarde - Earnings Report"
  }
}
  $(function () {

    function newexportaction(e, dt, button, config) {
      var self = this;
      var oldStart = dt.settings()[0]._iDisplayStart;
      dt.one('preXhr', function (e, s, data) {
          // Just this once, load all data from the server...
          data.start = 0;
          data.length = 2147483647;
          dt.one('preDraw', function (e, settings) {
              // Call the original action function
              if (button[0].className.indexOf('buttons-copy') >= 0) {
                  $.fn.dataTable.ext.buttons.copyHtml5.action.call(self, e, dt, button, config);
              } else if (button[0].className.indexOf('buttons-excel') >= 0) {
                  $.fn.dataTable.ext.buttons.excelHtml5.available(dt, config) ?
                      $.fn.dataTable.ext.buttons.excelHtml5.action.call(self, e, dt, button, config) :
                      $.fn.dataTable.ext.buttons.excelFlash.action.call(self, e, dt, button, config);
              } else if (button[0].className.indexOf('buttons-csv') >= 0) {
                  $.fn.dataTable.ext.buttons.csvHtml5.available(dt, config) ?
                      $.fn.dataTable.ext.buttons.csvHtml5.action.call(self, e, dt, button, config) :
                      $.fn.dataTable.ext.buttons.csvFlash.action.call(self, e, dt, button, config);
              } else if (button[0].className.indexOf('buttons-pdf') >= 0) {
                  $.fn.dataTable.ext.buttons.pdfHtml5.available(dt, config) ?
                      $.fn.dataTable.ext.buttons.pdfHtml5.action.call(self, e, dt, button, config) :
                      $.fn.dataTable.ext.buttons.pdfFlash.action.call(self, e, dt, button, config);
              } else if (button[0].className.indexOf('buttons-print') >= 0) {
                  $.fn.dataTable.ext.buttons.print.action(e, dt, button, config);
              }
              dt.one('preXhr', function (e, s, data) {
                  // DataTables thinks the first item displayed is index 0, but we're not drawing that.
                  // Set the property to what it was before exporting.
                  settings._iDisplayStart = oldStart;
                  data.start = oldStart;
              });
              // Reload the grid with the original page. Otherwise, API functions like table.cell(this) don't work properly.
              setTimeout(dt.ajax.reload, 0);
              // Prevent rendering of the full data to the DOM
              return false;
          });
      });
      // Requery the server with the new one-time export settings
      dt.ajax.reload();
    };
      
    var table = $('.data-table').DataTable({
        scrollX: true,
        processing: true,
        serverSide: true,
        oLanguage: {
          sLengthMenu: checkDataForShowEntries(),
          sSearch: checkDataForSearch()
        },
        ajax: {
          url: "{{ route('reports.earnings') }}",
          data: function (d) {
                d.month_filter = $('#month_dropdown :selected').val(),
                d.year_filter = $('#year_dropdown :selected').val(),
                d.merchant_filter = $('#merchant_dropdown :selected').val()
            }
        },
        buttons: [
            {
               "extend": 'excel',
               "text": '<i class="fa fa-file-excel-o" style="color: green;"></i>',
               "titleAttr": 'Excel',                               
               "action": newexportaction,
               "title": checkFileName()
            },
            {
               "extend": 'csv',
               "text": '<i class="fa fa-file-text-o" style="color: green; display:none"></i>',
               "titleAttr": 'CSV',                               
               "action": newexportaction,
               "title": checkFileName()
            },
            {
               "extend": 'pdf',
               "text": '<i class="fa fa-file-pdf-o" style="color: green;"></i>',
               "titleAttr": 'PDF',                               
               "action": newexportaction,
               "title": checkFileName()
            },
        ],
        columns: [
            {data: 'id', name: 'id'},
            {data: 'created_at', name: 'date'},
            {data: 'itemcount', name: 'itemcount'},
            {data: 'saved_co2', name: 'saved_co2'},
            {data: 'sales', name: 'sales'},
            {data: 'sales_gst', name: 'sales_gst'},
            {data: 'sales_qst', name: 'sales_qst'},
            {data: 'total_sales', name: 'total_sales'},
            // {data: 'taxes', name: 'taxes'},
            // {data: 'total', name: 'total'},
            {data: 'admin_fees', name: 'admin_fees'},
            {data: 'admin_fees_gst', name: 'admin_fees_gst'},
            {data: 'admin_fees_qst', name: 'admin_fees_qst'},
            {data: 'total_admin_fees', name: 'total_admin_fees'},
            {data: 'net_revenue', name: 'net_revenue'},
        ]
    });

    $("#exportCsvDatatable").on("click", function() {
        table.button( '.buttons-csv' ).trigger();
    });
    $("#exportExcelDatatable").on("click", function() {
        table.button( '.buttons-excel' ).trigger();
    });
    $("#exportPdfDatatable").on("click", function() {
        table.button( '.buttons-pdf' ).trigger();
    });
  
    $('#year_dropdown').change(function(){
        table.draw();
    });
    $('#month_dropdown').change(function(){
        table.draw();
    });
    $('#merchant_dropdown').change(function(){
        table.draw();
    });
  });
</script>
@endpush