@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="transaction-section padding-top padding-bottom">
        <div class="container">
            <div class="row justify-content-center">

                @if (!request()->routeIs('user.recharge.log'))
                    <div class="col-md-12">
                        <div class="show-filter mb-3 text-end">
                            <button type="button" class="btn btn--base showFilterBtn btn-sm"><i class="las la-filter"></i>
                                @lang('Filter')</button>
                        </div>
                        <div class="card responsive-filter-card mb-4 primary-bg">
                            <div class="card-body">
                                <form action="">
                                    <div class="d-flex flex-wrap gap-4">
                                        <div class="flex-grow-1 contact-form-group">
                                            <label>@lang('Transaction Number')</label>
                                            <input type="text" name="search" value="{{ request()->search }}"
                                                class="form-control form--control">
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="contact-form-group">
                                                <label>@lang('Remark')</label>
                                                <select class="select-bar" name="remark">
                                                    <option value="">@lang('Any')</option>
                                                    <option value="{{ Status::DonationReceived }}"
                                                        @selected(request()->remarks == Status::DonationReceived)>@lang('Donation Received')</option>
                                                    <option value="{{ Status::DonationMade }}" @selected(request()->remarks == Status::Approved)>
                                                        @lang('Donation Made')</option>
                                                    <option value="{{ Status::CommissionReward }}"
                                                        @selected(request()->remarks == Status::Rejected)>@lang('Reward Income')</option>
                                                    <option value="{{ Status::PlanPurchased }}"
                                                        @selected(request()->remarks == Status::Rejected)>@lang('Plan Purchased')</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="contact-form-group">
                                                <label>@lang('Date')</label>
                                                <input name="date" type="text" data-range="true"
                                                    data-multiple-dates-separator=" - " data-language="en"
                                                    class="datepicker-here form-control" data-position='bottom right'
                                                    placeholder="@lang('Start date - End date')" autocomplete="off"
                                                    value="{{ request()->date }}">
                                            </div>
                                        </div>
                                        <div class="flex-grow-1 align-self-end">
                                            <div class="contact-form-group">
                                                <button class="btn btn--base w-100"><i class="las la-filter"></i>
                                                    @lang('Filter')</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                @endif
            </div>

            <div class="d-flex justify-content-end mb-2">

                <div class="btn-group float-end" role="group" aria-label="Basic example">
                    <a href="{{ route('user.transactions.pdf', ['date' => request()->date, 'search' => request()->search, 'remark' => request()->remark]) }}"
                        class="btn btn--primary btn-sm d-flex align-items-center"><i class="las la-file-pdf"></i>
                        @lang('Generate PDF')</a>
                    <a href="{{ route('user.transactions.excel', ['date' => request()->date, 'search' => request()->search, 'remark' => request()->remark]) }}"
                        class="btn btn--info btn-sm d-flex align-items-center"><i class="las la-file-excel"></i>
                        @lang('Generate Excel')</a>
                </div>
            </div>
            {{-- <div class="d-flex justify-content-start mb-3"> --}}

            <div class="primary-bg item-rounded">
                <table class="deposite-table">
                    <thead class="custom--table">
                        <tr>
                            <th>@lang('Date')</th>
                            <th>@lang('TRX')</th>
                            <th>@lang('Amount')</th>
                            <th>@lang('Charge')</th>
                            <th>@lang('Mode of payment')</th>
                            <th>@lang('Detail')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($transactions as $trx)
                            <tr>
                                <td>
                                    {{ showDateTime($trx->created_at) }}
                                    <br>
                                    {{ diffforhumans($trx->created_at) }}
                                </td>

                                <td>
                                    {{ $trx->trx }}
                                </td>

                                <td>
                                    <strong
                                        @if ($trx->trx_type == '+') class="text--success" @else class="text--danger" @endif>
                                        {{ $trx->trx_type == '+' ? '+' : '-' }} {{ getAmount($trx->amount) }}
                                        {{ __($general->cur_text) }}</strong>
                                </td>

                                <td>
                                    {{ getAmount($trx->charge) }} {{ __($general->cur_text) }}
                                </td>
                                <td>
                                    {{ $trx->payment_mode }}</td>
                                <td>
                                    {{ __($trx->details) }}
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">{{ __($emptyMessage) }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
                @if ($transactions->hasPages())
                    <div class="py-3">
                        {{ paginateLinks($transactions) }}
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection
@push('style-lib')
    <link rel="stylesheet" href="{{ asset('assets/admin/css/vendor/datepicker.min.css') }}">
@endpush


@push('script-lib')
    <script src="{{ asset('assets/admin/js/vendor/datepicker.min.js') }}"></script>
    <script src="{{ asset('assets/admin/js/vendor/datepicker.en.js') }}"></script>
@endpush
@push('script')
    <script>
        (function($) {
            "use strict";
            if (!$('.datepicker-here').val()) {
                $('.datepicker-here').datepicker();
            }
        })(jQuery)
    </script>
@endpush
