@extends('admin.layouts.app')
@section('panel')
    <div class="row gy-4 mb-4">
        <div class="col-xxl-3 col-sm-6 ">
            <x-widget style="3" link="{{ route('admin.transaction.index') }}?virtual_card_id={{ $card->id }}"
                title="Total Transactions" icon="las la-exchange-alt" value="{{ $totalTransactions }}" bg="indigo"
                type="2" />
        </div>
        <div class="col-xxl-3 col-sm-6 ">
            <x-widget style="3" link="{{ route('admin.topup.index') }}?search={{ $card->last4 }}"
                title="Total {{ str()->plural('Topup', $totalTopups) }}" icon="las la-money-bill-wave-alt"
                value="{{ $totalTopups }}" bg="3" type="2" />
        </div>
        <div class="col-xxl-3 col-sm-6 ">
            <x-widget style="1" link="" title="Topup Amount" icon="las la-money-bill-wave-alt"
                value="{{ showAmount($totalTopupAmount) }}" bg="7" />
        </div>
        <div class="col-xxl-3 col-sm-6 ">
            <x-widget style="1" link="" title="Stripe Transaction" icon="las la-exchange-alt"
                value="{{ showAmount($totalStripeTransaction) }}" bg="9" />
        </div>
    </div>

    <div class="issue-card-row">
        <div class="issue-card-form">
            <div class="card">
                <div class="card-body p-0">
                    <ul class="list-group">
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Name'):</strong> {{ $card->name }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Nickname'):</strong> {{ $card->nickname }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Last Four Digit'):</strong>{{ $card->last4 }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Exp Month'):</strong> {{ $card->exp_month }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Exp Year'):</strong> {{ $card->exp_year }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Brand'):</strong> {{ $card->brand }}
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Current Balance'):</strong> <strong
                                class="text-success">{{ showAmount($card->spending_limit - $card->current_spend) }}</strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <strong>@lang('Status'):</strong> @php echo $card->statusBadge @endphp
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="issue-card-preview">
            <div class="card">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between pb-3">
                        <h4 class="m-0">@lang('Card Preview')</h2>
                            @if (@$card->status == 'inactive')
                                <button type="button"
                                    class="btn btn-sm btn-outline--success notify-delete-btn confirmationBtn"
                                    data-question="@lang('Are you sure to activate the card?')"
                                    data-action="{{ route('admin.card.change.status', $card->id) }}">
                                    @lang('Activate')
                                </button>
                            @else
                                <button type="button" class="btn btn-sm btn-outline--danger notify-delete-btn"
                                    data-bs-toggle="modal" data-bs-target="#cardDeactivateModal">
                                    @lang('Deactivate')
                                </button>
                            @endif
                    </div>
                    <x-v-card :name="$card->name" :last4="$card->last4" :expire_month="$card->exp_month" :expire_year="$card->exp_year" :hide_eye="true"
                        :brand="$card->brand" :status="$card->status" :start_color="$card->start_color" :end_color="$card->end_color" />
                </div>
            </div>
        </div>
    </div>
    <x-confirmation-modal />

    <div id="cardDeactivateModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Deactivate Card')</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </button>
                </div>
                <form action="{{ route('admin.card.change.status', $card->id) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <h6 class="mb-2">@lang('If you deactivate this card, the cardholder won\'t be able to use it.')</h6>
                        <div class="form-group">
                            <label>@lang('Reason')</label>
                            <textarea class="form-control" name="reason" rows="4" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn--primary h-45 w-100">@lang('Submit')</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <style>
        .issue-card-row {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .issue-card-form {
            flex: 1;
        }

        @media screen and (max-width: 1199px) and (min-width: 991px) {
            .issue-card-form {
                flex-basis: 100%;
            }
        }

        @media screen and (max-width: 800px) {
            .issue-card-form {
                flex-basis: 100%;
            }
        }

        .issue-card-preview {
            min-width: 400px
        }

        @media screen and (max-width: 575px) {
            .issue-card-preview {
                min-width: 280px;
            }

            .v--card__status.v--card__status--active {
                top: 12px;
                bottom: auto;
            }
        }

        @media screen and (max-width: 1199px) and (min-width: 991px) {
            .issue-card-preview {
                flex: 1;
            }
        }

        @media screen and (max-width: 800px) {
            .issue-card-preview {
                flex: 1;
            }
        }
    </style>
@endpush