@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="mb-4">
        @php
            $kyc = getContent('kyc.content', true);
        @endphp
        @if (auth()->user()->kv == Status::KYC_UNVERIFIED && auth()->user()->kyc_rejection_reason)
            <div class="alert alert-danger" role="alert">
                <div class="d-flex justify-content-between">
                    <h4 class="alert-heading">@lang('KYC Documents Rejected')</h4>
                    <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#kycRejectionReason">@lang('Show Reason')</button>
                </div>
                <hr>
                <p class="mb-0">{{ __($kyc?->data_values?->reject) }} <a href="{{ route('user.kyc.form') }}">@lang('Click Here to Re-submit Documents')</a>.</p>
                <br>
                <a href="{{ route('user.kyc.data') }}">@lang('See KYC Data')</a>
            </div>
        @elseif(auth()->user()->kv == Status::KYC_UNVERIFIED)
            <div class="alert alert-info" role="alert">
                <h4 class="alert-heading">@lang('KYC Verification required')</h4>
                <hr>
                <p class="mb-0">{{ __($kyc?->data_values?->required) }} <a href="{{ route('user.kyc.form') }}">@lang('Click Here to Submit Documents')</a></p>
            </div>
        @elseif(auth()->user()->kv == Status::KYC_PENDING)
            <div class="alert alert-warning" role="alert">
                <h4 class="alert-heading">@lang('KYC Verification pending')</h4>
                <hr>
                <p class="mb-0">{{ __($kyc?->data_values?->pending) }} <a href="{{ route('user.kyc.data') }}">@lang('See KYC Data')</a></p>
            </div>
        @endif

        @if (auth()->user()->kv == Status::KYC_UNVERIFIED && auth()->user()->kyc_rejection_reason)
            <div class="modal fade" id="kycRejectionReason">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">@lang('KYC Document Rejection Reason')</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <p>{{ auth()->user()->kyc_rejection_reason }}</p>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>


    @include($activeTemplate . 'user.dashboard.widget_cards')

    <div class="credit-card-wrapper">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h5 class="mb-0">@lang('Latest Cards')</h5>
            <a href="{{ route('user.card.index') }}" class="btn cmn-outline-btn pill btn--sm">@lang('View All')</a>
        </div>

        <div class="card-slider @if (!$virtualCards->count()) card-list @endif">
            @forelse ($virtualCards as $virtualCard)
                <a href="{{ route('user.card.details', encrypt($virtualCard->id)) }}">
                    <x-v-card
                        :name="$virtualCard->name"
                        :last4="$virtualCard->last4"
                        :expire_month="$virtualCard->exp_month"
                        :expire_year="$virtualCard->exp_year"
                        :status="$virtualCard->status"
                        :brand="$virtualCard->brand"
                        :id="$virtualCard->card_id"
                        :start_color="$virtualCard->start_color"
                        :end_color="$virtualCard->end_color"
                    />
                </a>
            @empty
                <x-empty-table title="No cards found!">
                    <a href="{{ route('user.card.issue') }}" class="btn btn--base btn--sm mt-2">@lang('Issue New Card')</a>
                </x-empty-table>
            @endforelse
            @if ($virtualCards->count() >= 1 && $virtualCards->count() <= 2)
                <a class='h-100' href="{{ route('user.card.issue') }}">
                    <x-v-card placeholder />
                </a>
            @endif
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-lg-12">
            <div class="dashboard-table mt-0">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">@lang('Latest Transactions')</h5>
                    <a href="{{ route('user.transactions') }}" class="btn cmn-outline-btn pill btn--sm">@lang('View All')</a>
                </div>

                <table class="table table--responsive--xl">
                    <thead>
                        <tr>
                            <th>@lang('Trx')</th>
                            <th>@lang('Transacted')</th>
                            <th>@lang('Amount')</th>
                            <th>@lang('Post Balance')</th>
                            <th>@lang('Detail')</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($transactions as $trx)
                            <tr>
                                <td data-label="@lang('Trx')"><strong>{{ $trx->trx }}</strong></td>
                                <td data-label="@lang('Transacted')">
                                    {{ showDateTime($trx->created_at) }}<br>{{ diffForHumans($trx->created_at) }}
                                </td>
                                <td data-label="@lang('Amount')">
                                    <span
                                        class="fw-bold @if ($trx->trx_type == '+') text--success @else text--danger @endif">
                                        {{ $trx->trx_type }} {{ showAmount($trx->amount) }}
                                    </span>
                                </td>
                                <td data-label="@lang('Post Balance')">
                                    {{ showAmount($trx->post_balance) }}
                                </td>
                                <td data-label="@lang('Detail')">{{ __($trx->details) }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="100%">
                                    <x-empty-table title="No transactions found!" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('style-lib')
    <link rel="stylesheet" href="{{ asset($activeTemplateTrue . 'css/slick.css') }}" />
@endpush

@push('script-lib')
    <script src="{{ asset($activeTemplateTrue . 'js/slick.min.js') }}"></script>
@endpush