@extends('layouts.master')

@section('title', __('Wallet Report'))

@push('styles')

@endpush

@section('content')
<section class="main_section">
    <form method="get" onsubmit="formSubmit(event);" class="wallet_report_form" id="walletReportForm">
        <div class="card">
            <div class="card-header">
                <h3 class="m-0">Filter</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-12 col-md-6 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="wallet_type" id="wallet_type">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach ($walletLists as $walletList)
                                            <option value="{{$walletList->id}}">{{$walletList->name}}</option>
                                        @endforeach
                                    </select>
                                    <label for="wallet_type" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Wallet Type') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-transparent border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-11" name="action_type" id="action_type">
                                        <option value="">{{ __('All') }}</option>
                                        @foreach ($actionTypes as $key=>$value)
                                            <option value="{{$key}}">{{$value}}</option>
                                        @endforeach
                                    </select>
                                    <label for="newsletter_template_id" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Action Type') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="date" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="start_date" placeholder="" max="{{ date('Y-m-d') }}">
                                    <label for="start_date" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Date From') }}</label>
                                </div>
                            </div>

                            <div class="col-12 col-md-6 mb-3">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="date" class="form-control rounded-lg p-2.5 w-full text-sm text-gray-900 bg-transparent border-gray-300 appearance-none focus:outline-none border-2 focus:ring-1 peer pl-15 h-11" name="end_date" placeholder="" max="{{ date('Y-m-d') }}">
                                    <label for="end_date" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10">{{ __('Date To') }}</label>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="col-md-12 d-flex justify-content-start">
                    <button class="btn btn-save btn-primary btn-save-record btn-modal" onclick="walletReportTableRefresh()" type="button">{!! renderIconHtml('search') !!}{{ __('Search') }}</button>
                </div>
            </div>
        </div>
    </form>
    <div class="card mt-2">
        <div class="card-body">
            <div class="table-responsive su_tables su_tables_ajax">
                <div id="custom_toolbar" class="float-right ms-2 mt-2">
                    <div class="dropdown" data-toggle="tooltip" data-placement="bottom" title="Export data">
                        <button class="btn btn-secondary dropdown-toggle" type="button"
                            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true"
                            aria-expanded="false"><i class="bi bi-download"></i> {{ __('Export') }}</button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item d-block" href="#"
                                onclick="exportTasks('wallet_report',['created_at', 'time', 'username', 'first_name', 'last_name','purchase_product', 'purchase_amount', 'transfer_amount', 'other_amount', 'receiver_user', 'wallet_type', 'balance', 'action_msg', 'amount'],'csv',[],'#walletReportForm')">CSV</a>
                            <a class="dropdown-item d-block" href="#"
                                onclick="exportTasks('wallet_report',['created_at', 'time', 'username', 'first_name', 'last_name','purchase_product', 'purchase_amount', 'transfer_amount', 'other_amount', 'receiver_user', 'wallet_type', 'balance', 'action_msg', 'amount'],'zip',[],'#walletReportForm')">ZIP</a>
                        </div>
                    </div>
                </div>
                <table class="table table-hover" id="bstable" data-toggle="table" table-for="wallet_report"
                data-content-type="application/json" data-filter-control="true" data-side-pagination="server"
                data-pagination="true" data-total-field="count" data-data-field="items" data-show-columns="true"
                data-show-toggle="false" data-show-export="false"  data-show-button-text="true"
                data-show-columns-toggle-all="false" data-sticky-header="true" data-sticky-header-offset-y="204"
                data-page-list="[10, 25, 50, 100, 200, 500]" data-icons="icons" data-icons-prefix="bi"
                data-toolbar="#custom_toolbar" data-ajax="getAllWalletReportData" data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                    <thead class="">
                    <tr>
                        <th data-field="created_at" data-sortable="true"> {{ __('Date') }}</th>
                        <th data-field="time"> {{ __('Time') }}</th>
                        <th data-field="username"> {{ __('Username') }}</th>
                        <th data-field="first_name"> {{ __('First Name') }}</th>
                        <th data-field="last_name"> {{ __('Last Name') }}</th>
                        <th data-field="purchase_product"> {{ __('Product Purchased') }}</th>
                        <th data-field="purchase_amount"> {{ __('Purchased Amount') }}</th>
                        <th data-field="transfer_amount"> {{ __('Transfer Amount') }}</th>
                        <th data-field="other_amount"> {{ __('Other') }}</th>
                        <th data-field="receiver_user"> {{ __('Transfer To Username') }}</th>
                        <th data-field="wallet_type">{{ __('Wallet') }} </th>
                        <th data-field="balance"> {{ __('Balance') }}</th>
                        <th data-field="action_msg"> {{ __('Action') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script src="{{ asset('backend/js/pages-js/reports/wallet-report.js') }}"></script>
@endpush