@extends('layouts.admin')
@section('content')
<div class="page-wrapper">
  <div class="content container-fluid">
    <div class="page-header">
      <div class="row align-items-center">
        <div class="col">
          <h3 class="page-title">{{ trans('cruds.cashierSale.title_singular') }}</h3>
          <ul class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('admin.home')}}">{{trans('global.dashboard') }}</a></li>
            <li class="breadcrumb-item active">{{ trans('cruds.cashierSale.title') }}</li>
          </ul>
        </div>
        @can('cashier_sale_create')
            <div class="col-auto float-right ml-auto">
                <a href="{{ $date == null ? route('admin.cashier-sales.create') : url('admin/cashier-sales/create?date='.$date)}}" class="btn add-btn"> <i class="fa fa-plus"></i>{{ trans('global.add') }} {{ trans('cruds.cashierSale.title_singular') }}</a>
            </div>
        @endcan
      </div>
    </div>
    <div class="card">
      @include('partials.drivewayPartial')
      <div class="card-header">
        {{ trans('cruds.cashierSale.title') }} {{ trans('global.list') }}
      </div>
      <div class="card-body">
        @if($date == null)
        <div class="row filter-row">
          <div class="col-sm-3 col-md-3">
            <div class="form-group form-focus">
              <div class="cal-icon">
                <input class="form-control floating date" name="min_date" type="text">
              </div>
              <label class="focus-label">From</label>
            </div>
          </div>
          <div class="col-sm-3 col-md-3">
            <div class="form-group form-focus">
              <div class="cal-icon">
                <input class="form-control floating date" name="max_date" type="text">
              </div>
              <label class="focus-label">To</label>
            </div>
          </div>
          <div class="col-sm-2 col-md-2">
            <a href="#" class="btn btn-success search-btn"> Search </a>
            <a class="btn btn-info" href="{{ route('admin.deposits.index') }}">Reset</a>
          </div>
        </div>
        @endif
        <div class="table-responsive">
          <table class="table table-bordered table-hover datatable datatable-cashier">
            <thead>
              <tr>
                <th width="10">
                </th>
                <th>{{__('ID')}}</th>
                <th>
                  {{ trans('cruds.cashierSale.fields.date') }}
                </th>
                <th>
                  {{ trans('cruds.cashierSale.fields.sub_category') }}
                </th>
                <th>
                  {{ trans('cruds.cashierSale.fields.cashier') }}
                </th>
                <th>
                  {{ trans('cruds.cashierSale.fields.amount') }}
                </th>
                <th>
                  {{ trans('cruds.cashierSale.fields.detail') }}
                </th>
                <th>
                  &nbsp;
                </th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection
@section('scripts')
@parent
<script>
$(function () {
    let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        @can('cashier_sale_delete')
        let deleteButtonTrans = '{{ trans('global.datatables.delete') }}';
        let deleteButton = {
            text: deleteButtonTrans,
            url: "{{ route('admin.cashier-sales.massDestroy') }}",
            className: 'bg-inverse-danger',
            action: function (e, dt, node, config) {
            var ids = $.map(dt.rows({ selected: true }).data(), function (entry) {
                return entry.id
            });

            if (ids.length === 0) {
                alert('{{ trans('global.datatables.zero_selected') }}')

                return
            }

            if (confirm('{{ trans('global.areYouSure') }}')) {
                $.ajax({
                headers: {'x-csrf-token': _token},
                method: 'POST',
                url: config.url,
                data: { ids: ids, _method: 'DELETE' }})
                .done(function () { location.reload() })
            }
            }
        }
        dtButtons.push(deleteButton)
        @endcan
let dtOverrideGlobals = {
buttons: dtButtons,
processing: true,
serverSide: true,
retrieve: true,
aaSorting: [],
ajax: {
url: window.location.href,
data: function(d) {
d.min = $('input[name=min_date]').val();
d.max = $('input[name=max_date]').val();
}
},
columns: [
{ data: 'placeholder', name: 'placeholder' },
{data: 'DT_RowIndex', name: 'DT_RowIndex',searchable:false,orderable:false},
{ data: 'date', name: 'date' },
{ data: 'sub_category_id', name: 'sub_category_id' },
{ data: 'cashier_id', name: 'cashier_id' },
{ data: 'amount', name: 'amount' },
{ data: 'detail', name: 'detail' },
{ data: 'actions', name: 'actions' }
],
orderCellsTop: true,
order: [[ 1, 'desc' ]],
pageLength: 100,
};
let table = $('.datatable-cashier').DataTable(dtOverrideGlobals);
$('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
});
// Event listener to the two range filtering inputs to redraw on input
$('.search-btn').on("click", function(e) {
e.preventDefault();
$('input[name=min_date]').attr('required',true);
$('input[name=max_date]').attr('required',true);
if($('input[name=min_date]').val() != '' && $('input[name=max_date]').val() != ''){
table.draw();
}
else{
toastr.error('Min & Max date both are required.');
}
});
});
</script>
@endsection