@php
    $months = App\Modules\DateHelper\Repositories\DateHelperRepository::monthsAsNumber();
    $years = App\Modules\DateHelper\Repositories\DateHelperRepository::yearsUntil();

    $card_month = array_key_exists($resource->card_month, $months) ? $months[$resource->card_month] : '-';
    $card_year = array_key_exists($resource->card_year, $years) ? $years[$resource->card_year] : '-';
@endphp

<style>
    .credit-card-container {
        display: grid;
        grid-template-columns: 30% 1fr;
    }

    .credit-card {
        width: 300px;
        height: 180px;
        border-radius: 15px;
        background-color: transparent;
        padding: 20px;
        color: #2b3e50;
        font-family: Arial, sans-serif;
        position: relative;
    }

    .card-number {
        font-size: 18px;
        letter-spacing: 2px;
        margin-bottom: 40px;
        padding-bottom: 10px;
    }

    .expiry-container {
        position: absolute;
        bottom: 20px;
        left: 20px;
        right: 20px;
        display: flex;
        justify-content: space-between;
    }

    .card-holder {
        font-size: 14px;
    }

    .expiry-date {
        font-size: 14px;
    }

    :is(.dark .dark\:border-white) {
        border: 2px solid #ffffff;
    }

    @media (max-width: 500px) {
        .credit-card-container {
            display: block !important;
            position: relative;
            right: 2em;
        }

        #card-history-details {
            width: 300px;
        }

        .credit-card {
            margin-bottom: 2em;
        }
    }
</style>

<div class="credit-card-container">
    <div class="credit-card border-2 dark:border-white">
        <div
            class="card-number dark:text-white cursor-pointer"
            onclick="fetchCardHistory(
                '{{ $resource->passport_serie }}',
                '{{ $resource->passport_id }}',
                '{{ str($resource->card_number)->mask('*', 6, 6) }}',
                '{{ $card_month }}/{{ substr($card_year, 2) }}',
                'card-history-details',
            )"
        >{{ trim(chunk_split($resource->card_number, 4, ' ')) }}</div>
        <div class="expiry-container">
            <div class="card-holder dark:text-white">{{ $resource->card_name }}</div>
            <div class="expiry-date dark:text-white">{{ $card_month }}/{{ $card_year }}</div>
        </div>
    </div>
    <div id="card-history-details">

    </div>
</div>