@extends('backend.layouts.app')
@section('head')
    <link rel="stylesheet" href="{{asset('assets/css/datatable.css')}}">
@endsection
@section('content')
    <div class="aiz-titlebar text-left mt-2 mb-3">

    <div class=" align-items-center">
        <h1 class="h3">{{translate('Wallet Transaction Report')}}</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-10 mx-auto">
        <div class="card">
            <div class="card-body">

                <div class="row">
                    {!!  \App\Services\SelectService::multi_select_2('users',$users,translate('Seller')) !!}
                    {!!  \App\Services\SelectService::search_crated_at() !!}
                    {!! \App\Services\ButtonService::apply_filter_button() !!}
                </div>

                <table id="datatable" class="table table-striped w-100">
                    <thead>


                    <th style="text-align: center">
                        <input type="checkbox" id="select_all"/></th>
                    <th class="text-left">#</th>
                    <th class="text-left">{{translate('User')}}</th>
                    <th class="text-left">{{translate('Date')}}</th>
                    <th class="text-left">{{translate('Payment Method')}}</th>
                    <th class="text-left">{{translate('Amount')}}</th>
                    <th class="text-left">{{translate('Approval')}}</th>

                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@endsection
@section('script')
    <script src="{{asset('assets/js/datatable.js')}}"></script>

    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    {!! $datatable_script !!}
    <script type="text/javascript">
        $(function () {

            var start = moment().subtract(29, 'month');
            var end = moment();

            function cb(start, end) {
                $('#created_at span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            }

            $('input[name="created_at"]').daterangepicker({
                startDate: start,
                endDate: end,
                ranges: {
                    'All': ['all', 'all'],
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                }
            }, cb);
            cb(start, end);

        });
    </script>
@endsection