@extends ('backend.layouts.app')

@section ('title', app_name() . ' | ' . __('transaction::labels.backend.transaction.clearsaved'))

@section('breadcrumb-links')
    
@endsection

@push('after-styles')
    {{ style('assets/plugins/select2/css/select2.min.css') }}
    {{ style('assets/plugins/select2/css/select2-bootstrap.min.css') }}
    {{ style('assets/plugins/sweetalert2/sweetalert2.min.css') }}
    {{ style('assets/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}
    <style>
        .dataTables_length {
            float: left;
        }
        div.dt-buttons {
            float: right;
        }
    </style>            
@endpush

@section('content')

<div class="card">
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    {{ __('transaction::labels.backend.cleartransaction.clearsaved') }} <small class="text-muted">{{ __('transaction::labels.backend.cleartransaction.clearsavedlist') }}</small>
                </h4>
            </div><!--col-->
        </div><!--row-->

        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="saved_transaction-table" class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>{{ __('transaction::labels.backend.transaction.table.project_name') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.customer_name') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.order_no') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.invoice_no') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.amount') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.service_fee') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.item_name') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.item_description') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.status') }}</th>
                            <th>{{ __('transaction::labels.backend.transaction.table.payment_date_time') }}</th>
                        </tr>
                        </thead>

                        <tfoot>
                            <tr>
                                <th colspan="2"></th>
                                <th colspan="2"> Amount </th>
                                <th colspan="2">
                                    <div class="input-icon">
                                        <input class="form-control total_amount" type="text" disabled="disabled">
                                    </div>
                                </th>
                                <th colspan="4"></th>
                            </tr>
                        </tfoot>
                    </table>

                </div>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->
</div><!--card-->

@endsection

@push('after-scripts')
    <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    {{ script('assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js')}}

    {{ script('assets/plugins/sweetalert2/sweetalert2.all.min.js')}}
    
    {{ script('assets/plugins/select2/js/select2.full.min.js')}}
    {{ script("assets/plugins/select2/component/components-select2.js") }}

    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.flash.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js") }}
    {{ script("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js") }}
    {{ script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.print.min.js ") }}
    {{ script("https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js") }}
    <script>
        $(function() {
   
            var table = $('#saved_transaction-table').DataTable({
                language:
                    {
                        processing: "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
                    },
                dom: 'lBfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                searching: false,
                serverSide: true,
                ajax: {
                    url: '{!! route("admin.transaction.cleardata.search") !!}',
                    data: { 'client_id' : '{{$client_id}}', 'to' : '{{$to}}', 'clear' : '{{$clear}}'},
                    type: 'post',
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                    { data: "project_name", searchable: false, sortable: false },
                    { data: "customer_name", searchable: false, sortable: false },
                    { data: "order_no" , name: "order_no"},
                    { data: "invoice_no" , name: "invoice_no"},
                    { data: "amount", name: "amount"},
                    { data: "service_fee", name: "service_fee"},
                    { data: "item_name", name: "item_name"},
                    { data: "item_description", name: "item_description"},
                    { data: "status", name: "status"},
                    { data: "created_at", name: "created_at"}
                ],
                order: [],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {

                    load_plugins();
                }
            });

            table.on( 'xhr', function () {
                var json = table.ajax.json();
                $('.total_amount').val(json.total);
    
            });


        });
    </script>
@endpush