@forelse($transactions as $transaction)
    <div class="transactionsHolder toggleBody mfkToggleOuterWrap" style="display: block!important;">
        @php
            if($transaction->payer == companyUser()->id)
                $netAmount = $transaction->amount;
            else
                $netAmount = $transaction->isCredit ? $transaction->actual_amount : $transaction->amount;
        @endphp
        <div class="eachTransaction {{ $transaction->totalCharges }} mfkToggleWrap">
            <div class="transactionHeader mfkToggle">
                            <span class="slno">
                                {{ ($transactions->currentPage() * $transactions->perPage()) - $transactions->perPage() + $loop->iteration }}
                            </span>

                <span class="txn">
                                <p>{{ _mt($moduleId,'Ewallet.txn') }}</p>#{{ $transaction->id }}
                                <span class="timeStamp">{{ $transaction->created_at->toFormattedDateString() }}</span>
                            </span>
                <span class="operation">
                                {{ $transaction->operation->operationDetails->title }}
                            </span>
                <span class="amount @if($transaction->isCredit) credit @endif">
                                {{ $transaction->isCredit ? '+' : '-' }}{{ currency($netAmount) }}
                            </span>
                <div class="triggerWrap">
                    <i class="icon-plus open"></i>
                    <i class="fa fa-minus"></i>
                </div>
            </div>
            <div class="transactionBody toggleBody">
                <div class="col-md-4 meta">
                    <div class="txn">#{{ $transaction->id }}</div>
                    <span class="flow">
                                    <span class="payer">{{ $transaction->payerUser->member_id }}</span>
                                    <i class="icon-action-redo"></i>
                                    <span class="payee">{{ $transaction->payeeUser->member_id }}</span>
                                </span>
                    <div class="operation">
                        {{ $transaction->operation->title }}
                        @php
                            switch ($transaction->operation->operationDetails->slug){
                                case 'commission':
                                    $operationMeta = getModule($transaction->commission->module_id)?getModule($transaction->commission->module_id)->registry['name']:null;
                                    break;
                                case 'fund_transfer':
                                case 'deduct':
                                    $operationMeta = (getModule($transaction->operation->from_module)?getModule($transaction->operation->from_module)->registry['name']:null) ." - ". (getModule($transaction->operation->to_module)?getModule($transaction->operation->to_module)->registry['name']:null);
                                    break;
                                    default :
                                    $operationMeta = null;
                                    break;
                            }
                        @endphp
                        @if(isset($operationMeta))
                            <div class="operationMeta">
                                (<span>{{ $operationMeta }}</span>)
                            </div>
                        @endif
                    </div>
                    <div class="txnTime">
                        <h3>{{ $transaction->created_at->diffForHumans() }}</h3>
                        <p>{{ $transaction->created_at }}</p>
                    </div>
                </div>
                <div class="col-md-8 totals mfkToggleOuterWrap">
                    <div class="eachSection">
                        <h3 class="mfkToggle">{{ _mt($moduleId,'Ewallet.actual_amount') }} <i
                                    class="fa fa-plus open"></i>
                            <i class="fa fa-minus"></i>
                        </h3>
                        <div class="toggleBody">{{ currency($transaction->actual_amount) }}</div>
                    </div>
                    <div class="eachSection">
                        <h3 class="mfkToggle">{{ _mt($moduleId,'Ewallet.transaction_charges') }} <i
                                    class="fa fa-plus open"></i>
                            <i class="fa fa-minus"></i>
                        </h3>
                        <div class="toggleBody">
                            @forelse($transaction->charges as $charge)
                                <div class="charge">
                                    <span class="name">@if($charge->module()){{ $charge->module()->model->name }} @endif</span>
                                    <span class="amount @if($charge->module()->operationType() == 'sub') credit @endif">
                                                    {{ $charge->module()->operationType() == 'add' ? '-' : '+' }}{{ currency($charge->amount) }}
                                                </span>
                                </div>
                            @empty
                                <div class="noCharges">{{ _mt($moduleId,'Ewallet.no_charges') }}</div>
                            @endforelse
                        </div>
                    </div>
                    @if($transaction->operation->remarks)
                    <div class="eachSection">
                        <h3 class="mfkToggle">{{ _mt($moduleId,'Ewallet.remarks') }} <i
                                class="fa fa-plus open"></i>
                            <i class="fa fa-minus"></i>
                        </h3>
                        <div class="toggleBody">{{ ucwords(str_replace('_', ' ', $transaction->operation->remarks)) }}</div>
                    </div>
                    @endif
                    @if($transaction->order)
                        <div class="eachSection">
                            <h3 class="mfkToggle">{{ _mt($moduleId,'Ewallet.order_totals') }}</h3>
                            <div class="toggleBody">
                                @forelse($transaction->order->totals as $total)
                                    <div class="charge">
                                        <span class="name">{{ $total->module()->model->name }}</span>
                                        <span class="amount @if($total->module()->operationType() == 'sub') credit @endif">
                                                        {{ $total->module()->operationType() == 'add' ? '-' : '+' }}
                                            {{ currency($total->amount) }}
                                                    </span>
                                    </div>
                                @empty
                                    <div class="noCharges">{{ _mt($moduleId,'Ewallet.no_order_totals') }}</div>
                                @endforelse
                            </div>
                        </div>
                    @endif
                    <div class="eachSection total">
                        <h3>{{ _mt($moduleId,'Ewallet.total') }}</h3>
                        <div class="total">
                            {{ currency($netAmount) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="noTransactions">{{ _mt($moduleId,'Ewallet.no_transaction') }}</div>
@endforelse
<div class="paginationWrapper">
    {!! $transactions->links() !!}
</div>
<script type="text/javascript">
    $(function () {
        $('.paginationWrapper .pagination li a').click(function (e) {
            e.preventDefault();
            var route = $(this).attr('href');
            simulateLoading('.holder');
            route = route ? route : '{{ scopeRoute('eWallet.transactions.list') }}';
            var formData = $('.filterForm').serializeArray();
            var dispatch = {};
            formData.forEach(function (value, key) {
                dispatch[value.name] = value.value;
            });

            $.post(route, dispatch, function (response) {
                $('.holder').html(response);
                Ladda.stopAll();
            }).fail(function () {
                Ladda.stopAll();
            });
        });
    });
</script>
<style>
    .transactionHeader .slno {
        color: #111111 !important;
        text-align: center;
        font-size: 10px;
        background: rgba(52, 33, 36, 0.08);
        min-width: 21px;
        border-radius: 3px !important;
        height: 21px;
        padding: 4px;
        margin-right: 10px;
    }

    .paginationWrapper {
        padding: 10px;
    }
    .transactionHeader.mfkToggle.open .triggerWrap i.icon-plus.open {
        display: none;
    }
    .transactionHeader.mfkToggle .triggerWrap i.fa.fa-minus {
        display: none;
    }
    .transactionHeader.mfkToggle.open .triggerWrap  i.fa.fa-minus {
        display: block;
    }

    /* Hide the plus icon when section is open */
    .mfkToggle.open i.fa-plus {
        display: none;
    }

    /* Hide the minus icon when section is closed */
    .mfkToggle:not(.open) i.fa-minus {
        display: none;
    }
</style>