@extends('layouts.master')
@section('title', 'Transaction History')
@push('styles')
    <style>
        #bstable tbody tr td:nth-child(5),
        #bstable thead tr th:nth-child(5) {
            white-space: unset !important;
        }

        .nested-table-wrapper {
            padding: 15px;
            background: #f9f9f9;
            border: 2px solid #1c3750;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
            margin-top: 10px;
        }
    </style>
@endpush
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <form method="get" onsubmit="formSubmit(event);" id="walletLogTableFilterForm" class="mb-2">
                        <div class="row mt-3">
                            <div class="col-lg-2 p-1">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select name="activity"
                                        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 w-100">
                                        <option value="">All</option>
                                        <option value="day" {{ 'day' == ($input['activity'] ?? '') ? 'selected' : '' }}>
                                            Days</option>
                                        <option value="week" {{ 'week' == ($input['activity'] ?? '') ? 'selected' : '' }}>
                                            Weekly</option>
                                    </select>
                                    <label
                                        class="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"
                                        for="activities">Activities</label>
                                </div>
                            </div>
                            <div class="col-lg-2 p-1">
                                <div class="relative z-0 w-full mb-1 group">

                                    <select name="wallet"
                                        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 w-100">
                                        <option value="">All</option>
                                        @foreach ($wallet as $item)
                                            @if (isset($item->wallet_list->name))
                                                <option value="{{ $item->wallet_list_id }}">
                                                    {{ $item->wallet_list->name ?? '' }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                    <label
                                        class="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"
                                        for="w-type">Wallet Type</label>
                                </div>
                            </div>
                            <div class="col-lg-2 p-1">
                                <div class="relative z-0 w-full mb-1 group">
                                    <select name="action"
                                        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 w-100">
                                        <option value="">All</option>
                                        @foreach ($actionTypes as $key => $value)
                                            <option value="{{ $key }}">{{ $value }}</option>
                                        @endforeach
                                    </select>
                                    <label
                                        class="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"
                                        for="w-type">Action</label>
                                </div>
                            </div>
                            <div class="col-lg-3 p-1">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="date" name="start"
                                        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 w-100"
                                        value="{{ $input['start'] ?? '' }}" max="{{ date('Y-m-d') }}">
                                    <label
                                        class="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"
                                        for="date-from">Date From</label>
                                </div>
                            </div>
                            <div class="col-lg-3 p-1">
                                <div class="relative z-0 w-full mb-1 group">
                                    <input type="date" name="end"
                                        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 w-100"
                                        value="{{ $input['end'] ?? '' }}" max="{{ date('Y-m-d') }}">
                                    <label
                                        class="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"
                                        for="date-to">Date To</label>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-md-12 col-lg-12 mt-1 text-end">
                                <button type="button" onclick="walletLogTableClearFilter()"
                                class="btn btn-primary float-end ms-1">Clear All</button>
                                <button type="button" onclick="walletLogTableRefresh()"
                                class="btn btn-primary btn-fiter-submit float-end ms-1">Submit</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive su_tables su_tables_ajax">
                        @can('transaction-export')
                            <div id="custom_toolbar" class="float-right">
                                <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('su_wallet_transaction',['counter', 'activity','user_id', 'wallet_type', 'action_msg', 'value',  'external_comment', 'internal_comment', 'admin_id', 'status'],'csv')">CSV</a>
                                        <a class="dropdown-item d-block" href="#"
                                            onclick="exportTasks('su_wallet_transaction',['counter', 'activity','user_id', 'wallet_type', 'action_msg', 'value',  'external_comment', 'internal_comment', 'admin_id', 'status'],'zip')">ZIP</a>
                                    </div>
                                </div>
                            </div>
                        @endcan
                        <table class="table table-bordered" id="bstable" data-show-button-text="true" data-toggle="table" table-for="transaction_history"
                            data-ajax="ajaxRequestWalletTransaction" 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-filter-control="true"
                            data-show-columns-toggle-all="false" data-toolbar="#custom_toolbar" data-icons="icons"
                            data-icons-prefix="bi"
                            data-export-options='{"fileName": "{{ config('app.name') . ' - Users - ' . date('d/m/Y-H:m:s') }}"}'
                            data-loading-template="DataTaleLoadingTemplate" data-search-on-enter-key="true">
                            <thead>
                                <tr>
                                    @if (auth()->user()->setting->preference == 'Left')
                                        <th data-field="details" data-events="detailsEvents">Details</th>
                                    @endif
                                    <th title="#" data-field="counter" data-width-unit="px">#</th>
                                    <th title="Week of year" data-field="activity"
                                        data-width-unit="px">
                                        {{ __('Week Of Year/Date') }}</th>
                                    <th title="User" data-field="user_id" data-filter-control="false"
                                        data-sortable="false">
                                        {{ __('Username') }}</th>
                                    <th title="Wallet Type" data-field="wallet_type"
                                        data-filter-control="false">{{ __('Wallet') }}</th>
                                    <th title="Description" data-field="action_msg">
                                        {{ __('Description') }}
                                    </th>

                                    <th title="Amount" data-field="value" data-filter-control="false">
                                        {{ __('Accumulated Amount') }}</th>
                                    <th title="External Comments" data-field="external_comment">
                                        {{ __('External Comments') }}
                                    </th>
                                    <th title="Internal Comments" data-field="internal_comment">
                                        {{ __('Internal Comments') }}
                                    </th>
                                    <th title="Admin" data-field="admin_id">{{ __('Admin') }}
                                    </th>
                                    <th title="Status" data-field="status">{{ __('Status') }}</th>
                                    @if (auth()->user()->setting->preference == 'Right')
                                        <th data-field="details" data-events="detailsEvents">Details
                                        </th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="transactionSUCommentModal" tabindex="-1"
        aria-labelledby="transactionSUCommentModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="suCommentForm" action="{{ route('admin.wallet-transaction.update') }}" method="post">
                    <div class="modal-header">
                        <h5 class="modal-title" id="transactionSUCommentModalLabel">Internal Comment</h5>
                    </div>
                    <div class="modal-body">
                        <input type="hidden" name="transaction_id" id="transaction_id">
                        <div class="relative z-0 w-full mb-1 group">
                            <textarea name="internal_comment" id="internal_su_comment" rows="3"
                                class="form-control address-validation 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"></textarea>
                            <label for="internal_comment"
                                class="form-label left-0 ml-2 p-2 py-0 peer-focus:font-medium absolute 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">Comment
                                <span class="text-danger">*</span></label>
                        </div>
                    </div>
                    <div class="modal-footer py-1 px-0 d-flex justify-content-start">
                        <button type="submit" class="btn btn-primary submitBtn">Save</button>
                        <button type="button" class="btn btn-secondary close_btn" data-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection
@push('scripts')
    <script>
        var actionTypes = JSON.parse('{!! json_encode($actionTypes ?? []) !!}');
        let searched_member = "{{ $_GET['member'] ?? '' }}"
    </script>
    <script src="{{ asset('backend/js/pages-js/transaction-history.js') }}"></script>
@endpush