@extends ('backend.layouts.app')

@section ('title', app_name() . ' | ' . __('point::labels.backend.withdraw.management'))

@section('breadcrumb-links')
    @include('point::withdraws.includes.breadcrumb-links')
@endsection

@push('after-styles')
    {{ style("js/plugin/toastr/toastr.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">
            <div class="col-sm-5">
                <h4 class="card-title mb-0">
                    {{ __('point::labels.backend.withdraw.management') }} <small class="text-muted">{{ __('point::labels.backend.withdraw.list') }}</small>
                </h4>
            </div><!--col-->

            <div class="col-sm-7">
                @include('point::withdraws.includes.header-buttons')
            </div><!--col-->
        </div><!--row-->

        <div class="row mt-4">
            <div class="col">
                <div class="table-responsive">
                    <table id="withdraw-table" class="table table-condensed table-hover">
                        <thead>
                        <tr>
                            <th>{{ __('point::labels.backend.withdraw.table.id') }}</th>
                            <th>{{ __('point::labels.backend.withdraw.table.customer_name') }}</th>
                            <th>{{ __('point::labels.backend.withdraw.table.point') }}</th>
                            <th>{{ __('point::labels.backend.withdraw.table.date') }}</th>
                            <th>{{ __('point::labels.backend.withdraw.table.created_user_name') }}</th>
                            <th>{{ __('point::labels.backend.withdraw.table.remark') }}</th>
                            <th>{{ __('labels.general.actions') }}</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div><!--col-->
        </div><!--row-->
    </div><!--card-body-->
</div><!--card-->
@endsection

@push('after-scripts')
    {{ script('/js/plugin/toastr/toastr.min.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() {
            $('#withdraw-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,
                "lengthMenu": [ 10, 25, 50, 100, 200, 300, 500 ],
                ajax: {
                    url: '{!! route("admin.withdraw.get") !!}',
                    type: 'get',
                    error: function (xhr, err) {
                        if (err === 'parsererror')
                            location.reload();
                        else swal(xhr.responseJSON.message);
                    }
                },
                columns: [
                    {data: 'id', name: 'id'},
                    {data: 'customer.name', name: 'customer.name'},
                    {data: 'point', name: 'point'},
                    {data: 'date', name: 'date'},
                    {data: 'created_user_id', name: 'created_user_id'},
                    {data: 'remark', name: 'remark'},
                    {data: 'actions', name: 'actions', searchable: false, sortable: false}
                ],
                order: [[0, "desc"]],
                searchDelay: 500,
                fnDrawCallback: function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
                    load_plugins();
                }
            });
        });
    </script>
@endpush