{{-- resources/views/{activeTemplate}/partials/atm_cards.blade.php --}}

<style>
    .cards-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
        justify-content: center;
        padding: 2rem 1rem;
    }
    .card-scene {
        width: 340px;
        height: 210px;
        perspective: 1000px;
    }
    .card-flip {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
        cursor: pointer;
    }
    .card-scene:hover .card-flip {
        transform: rotateY(180deg);
    }
    .card-face {
        position: absolute;
        inset: 0;
        border-radius: 16px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        overflow: hidden;
    }
    .card-back {
        transform: rotateY(180deg);
    }
    .visa-front {
        background: linear-gradient(135deg, #2e1065 0%, #4c1d95 40%, #6d28d9 80%, #7c3aed 100%);
    }
    .mc-front {
        background: linear-gradient(135deg, #031e47 0%, #00186d 45%, #003380 80%, #0047ab 100%);
    }
    .visa-back-bg {
        background: linear-gradient(135deg, #1e1b2e 0%, #2e1065 100%);
    }
    .mc-back-bg {
        background: linear-gradient(135deg, #031e47 0%, #00186d 100%);
    }
    .chip {
        width: 42px;
        height: 32px;
        border-radius: 6px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
        position: relative;
        overflow: hidden;
    }
    .chip::before {
        content: '';
        position: absolute;
        top: 50%; left: 0; right: 0;
        height: 1px;
        background: rgba(0,0,0,0.2);
        transform: translateY(-50%);
    }
    .chip::after {
        content: '';
        position: absolute;
        left: 50%; top: 0; bottom: 0;
        width: 1px;
        background: rgba(0,0,0,0.2);
        transform: translateX(-50%);
    }
    .chip-inner {
        position: absolute;
        inset: 5px;
        border-radius: 3px;
        border: 1px solid rgba(0,0,0,0.15);
    }
    .card-number {
        font-family: 'Courier New', monospace;
        font-size: 19px;
        letter-spacing: 3px;
        color: rgba(255,255,255,0.95);
        font-weight: 500;
    }
    .card-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(255,255,255,0.55);
        margin-bottom: 2px;
    }
    .card-value {
        font-size: 14px;
        color: rgba(255,255,255,0.92);
        font-weight: 500;
        letter-spacing: 0.5px;
    }
    .visa-logo {
        font-family: 'Times New Roman', serif;
        font-size: 26px;
        font-weight: 700;
        font-style: italic;
        letter-spacing: -1px;
    }
    .visa-logo span {
        display: inline-block;
        background: linear-gradient(180deg, #fff 0%, #c7d2fe 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .mc-circles {
        display: flex;
        align-items: center;
    }
    .mc-red {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #eb001b;
        opacity: 0.9;
    }
    .mc-yellow {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f79e1b;
        margin-left: -12px;
        opacity: 0.9;
    }
    .mc-text {
        font-size: 11px;
        font-weight: 700;
        color: rgba(255,255,255,0.85);
        margin-left: 6px;
        letter-spacing: 0.5px;
        line-height: 1.2;
    }
    .contactless {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        opacity: 0.6;
    }
    .contactless span {
        display: block;
        border: 1.5px solid white;
        border-radius: 0 50% 50% 0;
        border-left: none;
    }
    .mag-stripe {
        width: 100%;
        height: 42px;
        background: #111;
        margin-top: 24px;
    }
    .sig-strip {
        background: repeating-linear-gradient(
            -45deg,
            #f3f4f6 0px, #f3f4f6 4px,
            #e5e7eb 4px, #e5e7eb 8px
        );
        height: 36px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 10px;
    }
    .cvv-box {
        background: white;
        color: #1e1b2e;
        font-family: 'Courier New', monospace;
        font-size: 14px;
        font-weight: 700;
        padding: 4px 10px;
        border-radius: 3px;
        letter-spacing: 3px;
    }
    .back-logo-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 18px;
        margin-top: 14px;
    }
    .back-info {
        font-size: 9px;
        color: rgba(255,255,255,0.45);
        line-height: 1.5;
        padding: 0 18px;
        margin-top: 10px;
    }
    .hologram {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: conic-gradient(
            from 0deg,
            #a78bfa, #60a5fa, #34d399, #fbbf24, #f87171, #c084fc, #a78bfa
        );
        opacity: 0.7;
        flex-shrink: 0;
    }

    /* Frozen overlay */
    .card-frozen-overlay {
        position: absolute;
        inset: 0;
        border-radius: 16px;
        background: rgba(0,0,0,0.45);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        z-index: 10;
        backdrop-filter: blur(2px);
    }
    .card-frozen-overlay svg {
        width: 28px;
        height: 28px;
        color: #93c5fd;
        stroke: #93c5fd;
    }
    .card-frozen-overlay span {
        font-size: 11px;
        font-weight: 600;
        color: #bfdbfe;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    /* Status ribbon */
    .card-ribbon {
        position: absolute;
        top: 14px;
        right: -8px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        padding: 3px 12px 3px 10px;
        border-radius: 3px 0 0 3px;
        z-index: 5;
    }
    .ribbon-pending   { background: #fbbf24; color: #1e1b2e; }
    .ribbon-frozen    { background: #60a5fa; color: #1e1b2e; }
    .ribbon-blocked   { background: #f87171; color: #fff; }
    .ribbon-expired   { background: #6b7280; color: #fff; }
    .ribbon-cancelled { background: #374151; color: #d1d5db; }

    /* Card action buttons */
    .card-actions {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 12px;
        flex-wrap: wrap;
    }
    .card-action-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 6px 14px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 600;
        border: none;
        cursor: pointer;
        transition: opacity 0.15s;
        text-decoration: none;
    }
    .card-action-btn:hover { opacity: 0.85; }
    .btn-freeze   { background: #dbeafe; color: #1e40af; }
    .btn-unfreeze { background: #d1fae5; color: #065f46; }
    .btn-cancel   { background: #fee2e2; color: #991b1b; }
    .btn-detail   { background: #ede9fe; color: #4c1d95; }
    .btn-pin      { background: #fef3c7; color: #92400e; }
</style>
{{-- resources/views/{activeTemplate}/partials/atm_cards.blade.php --}}

@php
    $userCards = auth()->user()
        ->cards()
        ->whereNotIn('status', [\App\Models\AtmCard::STATUS_CANCELLED])
        ->latest()
        ->get();
@endphp

@if($userCards->isEmpty())
    <div class="cards-wrapper">
        <div class="flex flex-col items-center justify-center text-center py-10 px-6">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-50 mb-4">
                <i data-lucide="credit-card" class="h-8 w-8 text-primary-300"></i>
            </div>
            <p class="text-sm font-semibold text-primary-700 mb-1">@lang('No cards yet')</p>
            <p class="text-xs text-primary-400 mb-5">@lang('Apply for a virtual or physical card to get started.')</p>
            <a href="{{ route('user.cards.create') }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 bg-primary-800 hover:bg-primary-700 text-white text-sm font-semibold rounded-xl shadow-soft transition-colors duration-150">
                <i data-lucide="plus" class="h-4 w-4"></i> @lang('Apply for a Card')
            </a>
        </div>
    </div>

@else

<div class="cards-wrapper">
    @foreach($userCards as $card)
    @php
        $isVisa   = $card->card_network === \App\Models\AtmCard::NETWORK_VISA;
        $isFrozen = $card->status === \App\Models\AtmCard::STATUS_FROZEN;

        $ribbonClass = match($card->status) {
            \App\Models\AtmCard::STATUS_PENDING   => 'ribbon-pending',
            \App\Models\AtmCard::STATUS_FROZEN    => 'ribbon-frozen',
            \App\Models\AtmCard::STATUS_BLOCKED   => 'ribbon-blocked',
            \App\Models\AtmCard::STATUS_EXPIRED   => 'ribbon-expired',
            default => null,
        };

        $ribbonLabel = match($card->status) {
            \App\Models\AtmCard::STATUS_PENDING   => 'Pending',
            \App\Models\AtmCard::STATUS_FROZEN    => 'Frozen',
            \App\Models\AtmCard::STATUS_BLOCKED   => 'Blocked',
            \App\Models\AtmCard::STATUS_EXPIRED   => 'Expired',
            default => null,
        };

        $frontBg  = $isVisa ? 'visa-front'   : 'mc-front';
        $backBg   = $isVisa ? 'visa-back-bg' : 'mc-back-bg';
        $cardType = ucfirst($card->card_type) . ' Card';
    @endphp

    <div style="display: flex; flex-direction: column; align-items: center;">

        <div class="card-scene">
            <div class="card-flip">

                {{-- CARD FRONT --}}
                <div class="card-face {{ $frontBg }}" style="padding: 22px 24px; display: flex; flex-direction: column; justify-content: space-between;">

                    @if($ribbonClass)
                        <div class="card-ribbon {{ $ribbonClass }}">{{ $ribbonLabel }}</div>
                    @endif

                    @if($isFrozen)
                        <div class="card-frozen-overlay">
                            <i data-lucide="snowflake" style="width:28px;height:28px;stroke:#93c5fd;"></i>
                            <span>Card Frozen</span>
                        </div>
                    @endif

                    <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                        <div style="display: flex; flex-direction: column; gap: 2px;">
                            <div style="font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 1px; text-transform: uppercase;">{{ $cardType }}</div>
                            <div style="font-size: 15px; font-weight: 500; color: white;">{{ $general->site_name ?? config('app.name') }}</div>
                        </div>
                        <div class="contactless">
                            <span style="width: 6px; height: 6px;"></span>
                            <span style="width: 12px; height: 12px;"></span>
                            <span style="width: 18px; height: 18px;"></span>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 14px;">
                        <div class="chip"><div class="chip-inner"></div></div>
                    </div>

                    <div class="card-number">{{ $card->masked_number }}</div>

                    <div style="display: flex; justify-content: space-between; align-items: flex-end;">
                        <div style="display: flex; gap: 24px;">
                            <div>
                                <div class="card-label">@lang('Card Holder')</div>
                                <div class="card-value">{{ $card->holder_name }}</div>
                            </div>
                            <div>
                                <div class="card-label">@lang('Expires')</div>
                                <div class="card-value">{{ $card->expiry }}</div>
                            </div>
                        </div>
                        @if($isVisa)
                            <div class="visa-logo"><span>VISA</span></div>
                        @else
                            <div class="mc-circles">
                                <div class="mc-red"></div>
                                <div class="mc-yellow"></div>
                                <div class="mc-text">master<br>card</div>
                            </div>
                        @endif
                    </div>

                </div>

                {{-- CARD BACK --}}
                <div class="card-face card-back {{ $backBg }}">
                    <div class="mag-stripe"></div>
                    <div style="padding: 12px 18px;">
                        <div class="sig-strip">
                            <div class="cvv-box">• • •</div>
                        </div>
                    </div>
                    <div class="back-logo-row">
                        <div>
                            <div class="card-label" style="color: rgba(255,255,255,0.45);">@lang('Authorised Signature')</div>
                            <div style="width: 120px; height: 1px; background: rgba(255,255,255,0.2); margin-top: 4px;"></div>
                        </div>
                        <div class="hologram"></div>
                        @if($isVisa)
                            <div class="visa-logo" style="opacity: 0.8; font-size: 20px;"><span>VISA</span></div>
                        @else
                            <div class="mc-circles" style="opacity: 0.8;">
                                <div class="mc-red" style="width: 24px; height: 24px;"></div>
                                <div class="mc-yellow" style="width: 24px; height: 24px; margin-left: -9px;"></div>
                            </div>
                        @endif
                    </div>
                    <div class="back-info">
                        @lang('This card is property of') {{ $general->site_name ?? config('app.name') }}.
                        @lang('If found, please return to any branch or call') {{ $general->mobile_number ?? '+1 800 000 0000' }}.
                        @lang('Use of this card is subject to the cardholder agreement.')
                    </div>
                </div>

            </div>
        </div>

        {{-- CARD ACTION BUTTONS --}}
        <div class="card-actions" style="width: 340px;">

            <a href="{{ route('user.cards.show', $card->id) }}" class="card-action-btn btn-detail">
                <i data-lucide="eye" style="width:13px;height:13px;"></i> @lang('Detail')
            </a>

            @if($card->status === \App\Models\AtmCard::STATUS_ACTIVE)
                <form action="{{ route('user.cards.freeze', $card->id) }}" method="POST" style="display:inline;">
                    @csrf
                    <button type="submit" class="card-action-btn btn-freeze">
                        <i data-lucide="snowflake" style="width:13px;height:13px;"></i> @lang('Freeze')
                    </button>
                </form>
            @elseif($card->status === \App\Models\AtmCard::STATUS_FROZEN)
                <form action="{{ route('user.cards.unfreeze', $card->id) }}" method="POST" style="display:inline;">
                    @csrf
                    <button type="submit" class="card-action-btn btn-unfreeze">
                        <i data-lucide="flame" style="width:13px;height:13px;"></i> @lang('Unfreeze')
                    </button>
                </form>
            @endif

            @if(in_array($card->status, [\App\Models\AtmCard::STATUS_ACTIVE, \App\Models\AtmCard::STATUS_PENDING]))
                <button type="button"
                        class="card-action-btn btn-pin"
                        data-bs-toggle="modal"
                        data-bs-target="#pinModal"
                        data-card-id="{{ $card->id }}">
                    <i data-lucide="key-round" style="width:13px;height:13px;"></i> @lang('PIN')
                </button>
            @endif

            @if(!in_array($card->status, [\App\Models\AtmCard::STATUS_BLOCKED, \App\Models\AtmCard::STATUS_EXPIRED]))
                <form action="{{ route('user.cards.cancel', $card->id) }}" method="POST" style="display:inline;"
                      onsubmit="return confirm('{{ __('Permanently cancel this card? This cannot be undone.') }}')">
                    @csrf
                    <button type="submit" class="card-action-btn btn-cancel">
                        <i data-lucide="x-circle" style="width:13px;height:13px;"></i> @lang('Cancel')
                    </button>
                </form>
            @endif

        </div>

    </div>
    @endforeach

    {{-- Apply for another card CTA --}}
    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; width: 340px; height: 210px;">
        <a href="{{ route('user.cards.create') }}"
           style="display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
                  width: 100%; height: 100%; border-radius: 16px; border: 2px dashed #c4b5fd;
                  background: #faf5ff; color: #6d28d9; text-decoration: none;
                  transition: background 0.2s, border-color 0.2s;"
           onmouseover="this.style.background='#f3e8ff'; this.style.borderColor='#7c3aed';"
           onmouseout="this.style.background='#faf5ff'; this.style.borderColor='#c4b5fd';">
            <i data-lucide="plus-circle" style="width:32px;height:32px;stroke:#7c3aed;"></i>
            <span style="font-size: 13px; font-weight: 600; letter-spacing: 0.3px;">@lang('Apply for Another Card')</span>
        </a>
    </div>

</div>
@endif

{{-- ================================ --}}
{{-- PIN Modal — pushed to modal stack--}}
{{-- ================================ --}}
@push('modal')
<div class="modal fade" id="pinModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content rounded-2xl border border-primary-100 shadow-soft overflow-hidden">

            <div class="flex items-center justify-between px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white">
                <div class="flex items-center gap-2">
                    <i data-lucide="key-round" class="h-5 w-5 text-primary-600"></i>
                    <h5 class="text-base font-semibold text-primary-900">@lang('Set Card PIN')</h5>
                </div>
                <button type="button"
                        class="p-1.5 rounded-lg hover:bg-primary-100 text-primary-500 transition-colors"
                        data-bs-dismiss="modal">
                    <i data-lucide="x" class="h-4 w-4"></i>
                </button>
            </div>

            <form id="pinForm" action="" method="POST" class="px-6 py-5 flex flex-col gap-5">
                @csrf

                <div class="flex items-start gap-3 p-3 bg-amber-50 border border-amber-200 rounded-xl">
                    <i data-lucide="shield-alert" class="h-4 w-4 text-amber-500 shrink-0 mt-0.5"></i>
                    <p class="text-xs text-amber-700 font-medium">
                        @lang('Never share your PIN with anyone. Choose a PIN that is hard to guess.')
                    </p>
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-sm font-semibold text-primary-800">@lang('New PIN')</label>
                    <input type="password" name="pin" maxlength="4" inputmode="numeric"
                           placeholder="• • • •" required
                           class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm text-center tracking-widest focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                </div>

                <div class="flex flex-col gap-1">
                    <label class="text-sm font-semibold text-primary-800">@lang('Confirm PIN')</label>
                    <input type="password" name="pin_confirmation" maxlength="4" inputmode="numeric"
                           placeholder="• • • •" required
                           class="w-full px-4 py-2.5 rounded-xl border border-primary-200 bg-primary-50/40 text-primary-900 text-sm text-center tracking-widest focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition placeholder-primary-300">
                </div>

                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary-800 hover:bg-primary-700 text-white font-semibold text-sm rounded-xl shadow-soft transition-colors duration-200">
                    <i data-lucide="check" class="h-4 w-4"></i> @lang('Set PIN')
                </button>

            </form>
        </div>
    </div>
</div>
@endpush

{{-- ================================ --}}
{{-- Script — pushed to script stack  --}}
{{-- ================================ --}}
@push('script')
<script>
    (function () {
        const pinModal = document.getElementById('pinModal');
        if (!pinModal) return;

        const baseRoute = "{{ rtrim(route('user.cards.pin', ':id'), ':id') }}";

        // Bootstrap fires this event before the modal becomes visible,
        // giving us the trigger element via event.relatedTarget
        pinModal.addEventListener('show.bs.modal', function (event) {
            const trigger = event.relatedTarget;
            if (!trigger) return;

            const cardId = trigger.getAttribute('data-card-id');
            document.getElementById('pinForm').action = baseRoute + cardId;

            // Reset inputs on every open
            pinModal.querySelectorAll('input[type="password"]').forEach(i => i.value = '');
        });
    })();
</script>
@endpush