@extends('layouts.admin')

@section('style')
    <style>

        .dataTables_filter{
            text-align: center;
        }
        .dataTables_paginate{
            text-align: center;
        }
        .dataTables_filter {
            width: 50%;
            float: right;
            text-align: right;
            margin-right: 10px;
        }
        .pagination {
            float: right;
            text-align: right;
            margin-right: 10px;

        }
    </style>
@endsection

@section('script')
    <script>

        $(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var table = $('.yajra-datatable').DataTable({
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i><'col-sm-7'p>>",
                oLanguage: {
                    sLengthMenu: "_MENU_",
                },
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default',
                    footer: false,
                    exportOptions: {
                        {{-- columns: [0,1,2,3,4,5,6,8] --}}
                    },
                }],
                autoWidth: true,
                processing: true,
                serverSide: true,
                info: false,
                bInfo: false,
                ajax: "{{ route('admin.receipts-list') }}",
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'plain_name', name: 'plain_name', orderable: false},
                    {data: 'plain_email', name: 'plain_email', orderable: false},
                    {data: 'plain_mobile', name: 'plain_mobile', orderable: false},
                    {data: 'transaction_amount', name: 'transaction_amount'},
                    {data: 'merchant_name', name: 'merchant_name'},
                    {data: 'receipt_path', name: 'receipt_path', orderable: false, searchable: false},
                    {data: 'created_at', name: 'created_at'},
                ],

            });

        });
    </script>
@endsection

@section('content')

    @component('admin.components.tabs')
        <div class='col-md-12'>
{{--            <div class ='card'>--}}
{{--                <div class='card-body table-responsive p-0'>--}}
{{--                    <h2 class="mb-4">Receipt Upload Dashboard</h2>--}}
                    <table class="table table-bordered table-hover  yajra-datatable">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Mobile</th>
                                <th>Amount</th>
                                <th>Store</th>
                                <th>Receipt</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
{{--                </div>--}}
{{--            </div>--}}
        </div>

    @endcomponent
@endsection