@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.transaction_plural')}}<small class="ml-3 mr-3">|</small><small>{{trans('lang.transaction_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.transactions') !!}">{{trans('lang.transaction_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.transaction_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.order_user_id') }}</th>
                <th>{{ trans('lang.transaction_id') }}</th>
                <th>{{ trans('lang.items') }}</th>
                <th>{{ trans('lang.description') }}</th>
                <th>{{ trans('lang.payment_status') }}</th>
                <th>{{ trans('lang.order_status') }}</th>
                <th>{{ trans('lang.sales') }}</th>
                <th>{{ trans('lang.sales_gst') }}</th>
                <th>{{ trans('lang.sales_qst') }}</th>
                <th>{{ trans('lang.total') }}</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="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script> -->
<!-- <script type="text/javascript" src="{{asset('plugins/datatables/dataTables.bootstrap4.js')}}"></script> -->
<!-- <script type="text/javascript" src="{{asset('plugins/datatables/buttons/dataTables.buttons.min.js')}}"></script> -->
<!-- <script type="text/javascript" src="{{asset('plugins/datatables/buttons.server-side.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.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>--}}
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.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 src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>--}}
{{--<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap .min.js"></script>--}}
<script type="text/javascript" src="{{asset('plugins/datatables/jquery.dataTables.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/dataTables.bootstrap4.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/buttons/dataTables.buttons.min.js')}}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/buttons.js') }}"></script>
<script type="text/javascript" src="{{asset('plugins/datatables/buttons/buttons.colVis.min.js')}}"></script>
<script type="text/javascript" src="{{ asset('plugins/datatables/buttons.server-side.js') }}"></script>
<script type="text/javascript" src="{{ asset('https://cdn.datatables.net/colreorder/1.5.0/js/dataTables.colReorder.js') }}"></script>
<script type="text/javascript" src="{{ asset('https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.js') }}"></script>
<script type="text/javascript" src="{{ asset('https://cdn.datatables.net/rowgroup/1.0.3/js/dataTables.rowGroup.js') }}"></script>



{{--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.bootstrap4.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.0/js/dataTables.colReorder.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>--}}
{{--<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>--}}
{{--<script type="text/javascript" src="{{ asset('plugins/datatables/buttons.server-side.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 transaction"
  } else {
    return "Sauvegarde - Transactions 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,
        searching: true,
        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()
            },
        ],
        oLanguage: {
          sLengthMenu: checkDataForShowEntries(),
          sSearch: checkDataForSearch()
        },
        ajax: {
          url: "{{ route('reports.transactions') }}",
          data: function (d) {
                d.month_filter = $('#month_dropdown :selected').val(),
                d.year_filter = $('#year_dropdown :selected').val(),
                d.merchant_filter = $('#merchant_dropdown :selected').val()
          },
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'created_at', name: 'date'},
            {data: 'name', name: 'customer'},
            {data: 'nuvei_transaction_id', name: 'nuvei_transaction_id'},
            {data: 'itemcount', name: 'itemcount'},
            {data: 'product_name', name: 'product_name'},
            {data: 'status', name: 'status'},
            {data: 'order_status', name: 'order_status'},
            {data: 'sales', name: 'sales'},
            {data: 'GST', name: 'GST'},
            {data: 'QST', name: 'QST'},
            {data: 'total', name: 'total'},
        ]
    });


    $("#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