@extends('layouts.admin')
@section('content')
<div class="card table-responsive">
    <div class="card-header">
        {{ trans('cruds.cashExpense.title_singular') }} {{ trans('global.list') }}
    </div>

    <div class="card-body">
        <div class="row">
            <div class="col-lg-4">
                <label for="search-date">Choose Date</label>
                <div class="input-group">
                    <input type="text" placeholder="Start Date" id="fromDate" class="form-control date">
                    <input type="text" placeholder="End Date" id="toDate" class="form-control date">
                    <div class="input-group-append">
                        <button class="btn btn-outline-info" id="dateSearch" type="button">Search</button>
                        <a class="btn btn-outline-secondary" href="{{ route('admin.reports.cashExpense') }}">Reset</a>
                      </div>
                </div>
            </div>
        </div>
        <div class="d-flex flex-row-reverse m-3">
            <div class="">
                <a href="" class="btn btn-outline-success">Export Excel</a>
            </div>
        </div>
        <table class=" table table-bordered table-hover datatable datatable-CashExpense">
            <thead>
                <tr>
                    <th>
                        {{ trans('cruds.cashExpense.fields.date') }}
                    </th>
                    <th>
                        {{ trans('cruds.cashExpense.fields.invoice_no') }}
                    </th>
                    <th>
                        {{ trans('cruds.cashExpense.fields.suplier') }}
                    </th>
                    <th>
                        {{ trans('cruds.cashExpense.fields.description') }}
                    </th>
                    <th>
                        {{ trans('cruds.cashExpense.fields.amount') }}
                    </th>

                </tr>
            </thead>
            <tbody>
            </tbody>
            <tfoot>
                <tr>
                    <td style="text-align: right" colspan="4"><strong>TOTAL<strong></td>
                    <td><strong>{{number_format($totalAmount,2)}}</strong></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>



@endsection
@section('scripts')
@parent
<script>

    $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: {
                url: "{{ route('admin.reports.cashExpense') }}",
                data: function(d){
                        d.fromDate = $('#fromDate').val(),
                        d.toDate = $('#toDate').val()
                    }
            },
            columnDefs: [{
            orderable: false,
            className: '',
            targets: 0
            }],
            columns: [
                { data: 'date', name: 'date' },
                { data: 'invoice_no', name: 'invoice_no' },
                { data: 'suplier', name: 'suplier.suplier' },
                { data: 'description', name: 'description' },
                { data: 'amount', name: 'amount' },
            ],
            buttons: [
                {
                    extend: 'csv',
                    className: 'btn-default',
                    text: '{{trans('global.datatables.csv')}}',
                    exportOptions: {
                    columns: ':visible'
                    }
                },
                {
                    extend: 'excel',
                    className: 'btn-default',
                    text: '{{trans('global.datatables.excel')}}',
                    exportOptions: {
                    columns: ':visible'
                    }
                },
                {
                    extend: 'pdf',
                    className: 'btn-default',
                    text: '{{trans('global.datatables.pdf')}}',
                    exportOptions: {
                    columns: ':visible'
                    }
                },
                {
                    extend: 'print',
                    className: 'btn-default',
                    text: '{{trans('global.datatables.print')}}',
                    exportOptions: {
                    columns: ':visible'
                    }
                },

            ],
            orderCellsTop: true,
            order: [[ 1, 'ASC' ]],
            pageLength: 100,
        };
        let table = $('.datatable-CashExpense').DataTable(dtOverrideGlobals);
        $('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
            $($.fn.dataTable.tables(true)).DataTable()
                .columns.adjust();
        });

        $('#dateSearch').click(function (e) {
        e.preventDefault();

        table.draw();

        });

    });
</script>

@endsection