@extends('vendor.layouts.master')
@section('content')
    <div class="mb-4">
        <p>@lang('Transaction')</p>
        <h3>@lang('My Transactions History')</h3>
    </div>
    <hr>
    <div class="filter-area mb-3">
        <div class="d-flex flex-wrap gap-4">
            <div class="flex-grow-1">
                <form action="">
                    <div class="custom-input-box trx-search">
                        <label>@lang('Transaction Number')</label>
                        <input type="text" name="search" value="{{ request()->search }}" placeholder="@lang('Transaction Number')">
                        <button type="submit" class="icon-area"><i class="las la-search"></i></button>
                    </div>
                </form>
            </div>
            <div class="flex-grow-1">
                <div class="custom-input-box">
                    <label>@lang('Type')</label>
                    <select name="trx_type" onChange="window.location.href=this.value">
                        <option value="{{ queryBuild('trx_type', '') }}">@lang('All')</option>
                        <option value="{{ queryBuild('trx_type', '%2B') }}" @selected(request()->trx_type == '+')>@lang('Plus')</option>
                        <option value="{{ queryBuild('trx_type', '-') }}" @selected(request()->trx_type == '-')>@lang('Minus')</option>
                    </select>
                </div>
            </div>
            <div class="flex-grow-1">
                <div class="custom-input-box">
                    <label>@lang('Remark')</label>
                    <select name="remark" onChange="window.location.href=this.value">
                        <option value="{{ queryBuild('remark', '') }}">@lang('Any')</option>
                        @foreach ($remarks as $remark)
                            <option value="{{ queryBuild('remark', $remark->remark) }}" @selected(request()->remark == $remark->remark)>{{ __(keyToTitle($remark->remark)) }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="accordion table--acordion" id="transactionAccordion">
        @forelse($transactions as $transaction)
            <div class="accordion-item transaction-item">
                <h2 class="accordion-header" id="h-{{ $loop->iteration }}">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#c-{{ $loop->iteration }}">
                        <div class="col-lg-4 col-sm-5 col-8 order-1 icon-wrapper">
                            <div class="left">
                                <div class="icon tr-icon @if ($transaction->trx_type == '+') icon-success @else icon-danger @endif">
                                    <i class="las la-long-arrow-alt-right"></i>
                                </div>
                                <div class="content">
                                    <h6 class="trans-title">{{ __(keyToTitle($transaction->remark)) }}</h6>
                                    <span class="text-muted font-size--14px mt-2">{{ showDateTime($transaction->created_at, 'M d Y @g:i:a') }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-4 col-12 order-sm-2 order-3 content-wrapper mt-sm-0 mt-3">
                            <p class="text-muted font-size--14px"><b>#{{ $transaction->trx }}</b></p>
                        </div>
                        <div class="col-lg-4 col-sm-3 col-4 order-sm-3 order-2 text-end amount-wrapper">
                            <p>
                                <b>{{ showAmount($transaction->amount) }} {{ gs('cur_text') }}</b><br>
                                <small class="fw-bold text-muted">@lang('Balance'): {{ showAmount($transaction->post_balance) }} {{ gs('cur_text') }}</small>
                            </p>
                        </div>
                    </button>
                </h2>
                <div id="c-{{ $loop->iteration }}" class="accordion-collapse collapse" aria-labelledby="h-1" data-bs-parent="#transactionAccordion">
                    <div class="accordion-body">
                        <ul class="caption-list">
                            <li>
                                <span class="caption">@lang('Charge')</span>
                                <span class="value">{{ showAmount($transaction->charge) }} {{ gs('cur_text') }}</span>
                            </li>
                            <li>
                                <span class="caption">@lang('Post Balance')</span>
                                <span class="value">{{ showAmount($transaction->post_balance) }} {{ gs('cur_text') }}</span>
                            </li>
                            <li>
                                <span class="caption">@lang('Details')</span>
                                <span class="value">{{ __($transaction->details) }}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div><!-- transaction-item end -->
        @empty
            <div class="accordion-body text-center">
                <h4 class="text--muted"><i class="far fa-frown"></i> {{ __($emptyMessage) }}</h4>
            </div>
        @endforelse
    </div>


    @if ($transactions->hasPages())
        <div class="mt-4">
            {{ $transactions->links() }}
        </div>
    @endif
@endsection

@push('breadcrumb')
    <div class="show-filter mb-4 text-end">
        <button type="button" class="btn btn--base showFilterBtn btn-sm">
            <i class="las la-filter"></i>
        </button>
    </div>
@endpush

@push('style')
    <style>
        .trx-search {
            position: relative;
        }

        .trx-search .icon-area {
            position: absolute;
            top: 10px;
            right: 8px;
            font-size: 20px;
            background: transparent;
            border: none;
        }
    </style>
@endpush


@push('script')
    <script>
        (function($) {
            "use strict";

            $('.select2').select2();

            $('.detailBtn').on('click', function() {
                var modal = $('#detailModal');
                var transaction = $(this).data('transaction');
                var transacted = $(this).data('transacted');
                var curText = '{{ __(gs('cur_text')) }}';
                var curSymbol = '{{ gs('cur_sym') }}';
                var classVariable = 'text--danger';
                if (transaction.trx_type == '+') {
                    classVariable = 'text--success'
                }

                var html = '';
                html += `<li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Trx')</span>
                            <span class="list--group-desc text--base"><strong>${transaction.trx}</strong></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span class="list--group-text">@lang('Transacted')</span>
                            <span class="list--group-desc text-end">${transacted}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center text-end">
                            <span class="list--group-text">@lang('Amount')</span>
                            <span class="list--group-desc ${classVariable}"><strong>${transaction.trx_type} ${Number(transaction.amount).toFixed(2)}</strong></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center text-end">
                            <span class="list--group-text">@lang('Post Balance')</span>
                            <span class="list--group-desc">${curSymbol}${Number(transaction.post_balance).toFixed(2)}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center text-end">
                            <span class="list--group-text">@lang('Details')</span>
                            <span class="list--group-desc">${transaction.details}</span>
                        </li>`;

                modal.find('.userData').html(html);
                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush



@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/global/css/select2.min.css') }}">
@endpush

@push('script-lib')
    <script src="{{ asset('assets/global/js/select2.min.js') }}"></script>
@endpush


@push('style')
    <style>
        .select2.select2-container {
            width: 100% !important;
        }
    </style>
@endpush
