@extends($activeTemplate . 'layouts.master')
@section('content')
    @php
        $view   = request()->view ?? 'slider';
        $status = request()->status ?? '';
    @endphp

    <div class="credit-card-wrapper mt-0">
        <div class="flex-between mb-3 gap-3 page-header">
            <h5 class="credit-card-wrapper__title flex-1 mb-0">@lang('Card List')</h5>
            <div class="credit-card-wrapper__right gap-3">

                <select data-minimum-results-for-search="-1" id="status" class="form--control select2">
                    <option @selected($status == '') value="">@lang('All')</option>
                    <option @selected($status == 'active') value="active">@lang('Active')</option>
                    <option @selected($status == 'inactive') value="inactive">@lang('Inactive')</option>
                </select>
                <div class="preview-btn-group">
                    <a title="@lang('List View')" href="{{ route('user.card.index', ['view' => 'list', 'status' => $status]) }}" class="preview-style-btn @if ($view == 'list') active @endif"><i class="fa-solid fa-list-ul"></i></a>
                    <a title="@lang('Slider View')" href="{{ route('user.card.index', ['view' => 'slider', 'status' => $status]) }}" class="preview-style-btn @if ($view == 'slider') active @endif"><i class="fa-solid fa-sliders"></i></a>
                </div>
                <a href="{{ route('user.card.issue') }}" class="btn btn--base btn--sm" style="white-space: nowrap">@lang('New Card')</a>
            </div>
        </div>

        @if ($view == 'list')
            <table class="table table--responsive--xl">
                <thead>
                    <tr>
                        <th>@lang('Name')</th>
                        <th>@lang('Card Number')</th>
                        <th>@lang('Expire Date')</th>
                        <th>@lang('Status')</th>
                        <th>@lang('Action')</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($cards as $virtualCard)
                        <tr>
                            <td>
                                <strong>{{ $virtualCard->name }}</strong>
                                <br>
                                <small>{{ $virtualCard->nickname }}</small>
                            </td>
                            <td>**** **** **** {{ $virtualCard->last4 }}</td>
                            <td>{{ $virtualCard->exp_month }}/{{ $virtualCard->exp_year }}</td>
                            <td>@php echo $virtualCard->statusBadge @endphp</td>
                            <td>
                                <a href="{{ route('user.card.details', encrypt($virtualCard->id)) }}" class="btn btn--base btn--sm">@lang('Details')</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="100%" class="text-center">@lang('No data found')</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        @elseif ($view == 'slider')
            <div class="card-slider-two @if (!$cards->count()) card-list @endif">
                @forelse ($cards as $virtualCard)
                    <a href="{{ route('user.card.details', encrypt($virtualCard->id)) }}">
                        <x-v-card
                            :link="true"
                            :name="$virtualCard->name"
                            :last4="$virtualCard->last4"
                            :expire_month="$virtualCard->exp_month"
                            :expire_year="$virtualCard->exp_year"
                            :status="$virtualCard->status"
                            :hide_eye="true"
                            :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 ($cards->count() >= 1 && $cards->count() <= 2)
                    <a class="h-100" href="{{ route('user.card.issue') }}">
                        <x-v-card placeholder />
                    </a>
                @endif
            </div>
        @endif
    </div>

    <div class="cta mt-60 mb-60">
        <div class="cta-wrapper finance-wrapper">
            <div class="bg-shape">
                <div class="shape-one shape"></div>
                <div class="shape-two shape"></div>
                <div class="shape-three shape"></div>
            </div>
            <div class="row gy-4 ">
                <div class="col-xxl-6 col-xl-7 col-lg-12">
                    <div class="cta-content">
                        <h2 class="cta-content__title">@lang('Get a card, with it will be more convenient for you to control your expenses') 🔥</h2>
                        <a href="{{ route('user.card.issue') }}" class="btn cmn-btn">@lang('Issue a new card')</a>
                    </div>
                </div>
                <div class="col-xxl-5 col-xl-5 d-xl-block d-none">
                    <div class="cta-left">
                        <div class="cta-thumb">
                            <img src="{{ getImage('assets/images/thumbs/banner-thumb-2.png') }}" alt="@lang('Image')" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        $('#status').on('change', function() {
            let url = "{{ route('user.card.index') }}";
            let view = new URLSearchParams(window.location.search).get('view');
            let status = $(this).val();

            let params = new URLSearchParams();
            if (status) params.append('status', status);
            if (view) params.append('view', view);

            window.location.href = params.toString() ? `${url}?${params.toString()}` : url;
        });
    </script>
@endpush

@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

@push('style')
    <style>
        .preview-btn-group {
            display: flex;
            gap: 10px;
            background: hsl(var(--white));
            border-radius: 8px;
            padding: 4.5px 5px;
            border: 1px solid hsl(var(--border-color));
        }
        .preview-style-btn {
            font-size: 18px;
            padding: 1px 10px;
            transition: all 0.3s ease;
            border-radius: 6px;
            color: hsl(var(--black)/0.8);

        }
        .preview-style-btn   i{
                line-height: 1;
            }


        .preview-style-btn.active {
            background: hsl(var(--section-bg)/0.5);
            color: hsl(var(--black)/0.8);
        }

        .page-header .select2-container--default :is(.select2-selection--multiple, .select2-selection--single){
            height: 38px;
            min-height: 38px;
        }
        .page-header .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .page-header .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .credit-card-wrapper__right{
            display: flex;
            align-items: center;
            gap: 10px;

        }
        @media screen and (max-width: 375px) {
            .credit-card-wrapper__right{
                flex-wrap: wrap;
        }
        }
        </style>
@endpush