@props([
    'name' => 'Untitled',
    'last4' => '1234',
    'expire_month' => '06',
    'expire_year' => '24',
    'status' => 'inactive',
    'id' => '1234567890',
    'hide_status' => false,
    'hide_eye' => false,
    'placeholder' => false,
    'link' => false,
])

@if ($placeholder)
    <div class="v--card placeholder d-flex align-items-center justify-content-center flex-column gap-3">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2Z" />
        </svg>
        <h5 class="mb-0">@lang('Issue New Card')</h5>
    </div>
@else
    <div @if ($link) data-bs-toggle="tooltip" data-bs-placement="top" title="@lang('View Details')" @endif
        class="v--card"
        style="--color-code: #{{ gs('branding_config')?->text_color }};--card-background: url({{ getImage(getFilePath('cardBackground') . '/' . gs('branding_config')->background) }})">
        <div class="v--card__header">
            <div class="v--card__brand">
                <span class="fw-bolder fs-italic">@lang('VISA')</span>
            </div>
        </div>
        <div class="v--card__details d-flex justify-content-between align-items-start">
            <div>
                <p class="v--card__name m-0">{{ $name }}</p>
                <div class="v--card__icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
                        fill="none">
                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
                        <g id="SVGRepo_iconCarrier">
                            <path
                                d="M16.3 19.5002C17.4 17.2002 18 14.7002 18 12.0002C18 9.30024 17.4 6.70024 16.3 4.50024M12.7 17.8003C13.5 16.0003 14 14.0003 14 12.0003C14 10.0003 13.5 7.90034 12.7 6.10034M9.1001 16.1001C9.7001 14.8001 10.0001 13.4001 10.0001 12.0001C10.0001 10.6001 9.7001 9.10015 9.1001 7.90015M5.5 14.3003C5.8 13.6003 6 12.8003 6 12.0003C6 11.2003 5.8 10.3003 5.5 9.60034"
                                stroke="var(--color-code)" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round"></path>
                        </g>
                    </svg>
                </div>
            </div>
            <div>
                <p class="v--card__expiry">@lang('Expires'): {{ $expire_month }}/{{ $expire_year }}</p>
                <div class="d-flex gap-3">
                    <p class="v--card__cvc">@lang('CVC'): <span data-hidden="true">***</span></p>

                    @if (gs('card_provider') === 'stripe')
                        <p class="v--card__pin">@lang('Pin'): <span data-hidden="true">****</span></p>
                    @endif
                </div>
            </div>
        </div>
        <div class="d-flex justify-content-between align-items-end">
            <div class="v--card__number">
                <span data-last4="{{ $last4 }}" data-hidden="true">**** **** **** {{ $last4 }}</span>
            </div>
            @if (!$hide_eye)
                <button class="show-full-card" data-card-id="{{ $id }}" class="v--card__reveal"><i
                        class="fa fa-eye-slash"></i></button>
            @endif
        </div>
        @if (!$hide_status)
            <div
                class="v--card__status {{ $status === 'active' ? 'v--card__status--active' : 'v--card__status--inactive' }}">
                {{ ucfirst($status) }}
            </div>
        @endif
    </div>
@endif

@once
    @push('style')
        <style>
            /* Virtual Card */
            /* Virtual Card */
            .v--card {
                --color-code: #ffffff;
                background: var(--card-background);
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;
                height: 220px;
                border-radius: 6px;
                color: var(--color-code);
                padding: 20px 24px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                max-width: 400px;
                position: relative;
            }

            .v--card i {
                font-size: 13px;
                color: #ffffff;
            }

            .v--card__logo {
                width: 120px;
                height: auto;
            }

            .card-shape {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 32%;
                opacity: 0.2;
                pointer-events: none;
            }

            @media(max-width: 424px) {
                .v--card {
                    height: 180px !important;
                    padding: 16px !important;
                }

                .v--card__number {
                    font-size: 15px !important;
                    margin-top: 16px !important;
                    height: 24px !important;
                }

                .v--card__expiry,
                .v--card__cvc,
                .v--card__pin {
                    font-size: 12px;
                }
            }

            .v--card.placeholder {
                --card-background: linear-gradient(#e7edff, #e7edff);
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            .v--card.placeholder svg {
                fill: hsl(var(--heading-color));
            }

            .v--card.placeholder h5 {
                color: hsl(var(--heading-color));
            }

            .v--card.placeholder:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }

            .v--card.placeholder:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }

            .v--card__header {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .v--card__title {
                font-size: 20px;
                font-weight: 700;
                margin: 0;
            }

            .v--card__icon {
                display: flex;
                align-items: center;
            }

            .v--card__icon svg {
                width: 24px;
                height: 24px;
            }

            .v--card__details {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                margin-top: 16px;
            }

            .v--card__name {
                font-size: 14px;
                font-weight: 500;
                margin: 0;
                color: var(--color-code);
            }

            .v--card__expiry,
            .v--card__cvc,
            .v--card__pin {
                font-size: 14px;
                margin: 4px 0 0;
                opacity: 0.9;
                color: var(--color-code);
            }

            .v--card__number {
                font-size: 18px;
                letter-spacing: 2.5px;
                text-align: center;
                margin-top: 20px;
                font-weight: 700;
            }

            .v--card__brand img {
                width: 46px;
                height: auto;
            }

            .v--card__brand {
                display: flex;
                align-items: center;
            }

            .v--card__status {
                position: absolute;
                bottom: 12px;
                right: 12px;
                padding: 8px 12px 10px;
                border-radius: 7px;
                font-size: 12px;
                font-weight: 500;
                background-color: var(--start-color);
                color: hsl(var(--white));
                letter-spacing: 1px;
                line-height: 1;
                display: flex;
            }

            .v--card__status--active {
                background-color: #18b800;
                color: hsl(var(--white));
            }

            .v--card__status--inactive {
                background-color: #dc3848;
                color: hsl(var(--white));
            }

            .v--card span {
                color: var(--color-code);
            }
        </style>
    @endpush
@endonce