@extends($activeTemplate . 'layouts.master')

@section('content')
<div class="flex flex-col xl:flex-row gap-6 items-start">

    {{-- ================================ --}}
    {{-- LEFT — Card Visual + Status      --}}
    {{-- ================================ --}}
    <div class="w-full xl:max-w-sm shrink-0 flex flex-col gap-4">

        {{-- Card flip visual --}}
        @php
            $isVisa   = $card->card_network === \App\Models\AtmCard::NETWORK_VISA;
            $isFrozen = $card->status === \App\Models\AtmCard::STATUS_FROZEN;
        @endphp

        <style>
            .detail-scene { width:100%;max-width:340px;height:210px;perspective:1000px;margin:0 auto; }
            .detail-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; }
            .detail-scene:hover .detail-flip { transform:rotateY(180deg); }
            .detail-face { position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden; }
            .detail-back { transform:rotateY(180deg); }
        </style>

        <div class="detail-scene">
            <div class="detail-flip">
                {{-- Front --}}
                <div class="detail-face {{ $isVisa ? 'visa-front' : 'mc-front' }}"
                     style="padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;">

                    @if($isFrozen)
                        <div class="card-frozen-overlay">
                            <i data-lucide="snowflake" style="width:28px;height:28px;stroke:#93c5fd;"></i>
                            <span style="font-size:11px;font-weight:600;color:#bfdbfe;letter-spacing:2px;text-transform:uppercase;">Card Frozen</span>
                        </div>
                    @endif

                    <div style="display:flex;justify-content:space-between;align-items:flex-start;">
                        <div>
                            <div style="font-size:11px;font-weight:500;color:rgba(255,255,255,0.7);letter-spacing:1px;text-transform:uppercase;">{{ ucfirst($card->card_type) }} Card</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 class="chip"><div class="chip-inner"></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:20px;">
                            <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->is_expired ? 'text-rose-300' : '' }}">{{ $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>

                {{-- Back --}}
                <div class="detail-face detail-back {{ $isVisa ? 'visa-back-bg' : 'mc-back-bg' }}">
                    <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('Use of this card is subject to the cardholder agreement.')
                    </div>
                </div>
            </div>
        </div>

        {{-- Status badge card --}}
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">
            <ul class="divide-y divide-primary-100">
                <li class="flex items-center justify-between px-5 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Status')</span>
                    @php echo $card->status_badge; @endphp
                </li>
                <li class="flex items-center justify-between px-5 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Network')</span>
                    <span class="text-sm font-bold text-primary-900">{{ $card->network_label }}</span>
                </li>
                <li class="flex items-center justify-between px-5 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Type')</span>
                    <span class="text-sm font-bold text-primary-900 capitalize">{{ $card->card_type }}</span>
                </li>
                <li class="flex items-center justify-between px-5 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Activated')</span>
                    <span class="text-sm font-medium text-primary-700">
                        {{ $card->activated_at ? showDateTime($card->activated_at) : '—' }}
                    </span>
                </li>
                <li class="flex items-center justify-between px-5 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Last Used')</span>
                    <span class="text-sm font-medium text-primary-700">
                        {{ $card->last_used_at ? showDateTime($card->last_used_at) : '—' }}
                    </span>
                </li>
                @if($card->card_type === \App\Models\AtmCard::TYPE_PHYSICAL && $card->tracking_number)
                    <li class="flex items-center justify-between px-5 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Tracking')</span>
                        <span class="text-xs font-mono font-bold text-primary-900">{{ $card->tracking_number }}</span>
                    </li>
                @endif
            </ul>
        </div>

        {{-- Actions --}}
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

            <div class="px-5 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                <i data-lucide="settings" class="h-4 w-4 text-primary-600"></i>
                <h3 class="text-sm font-semibold text-primary-900">@lang('Card Actions')</h3>
            </div>

            <div class="p-4 flex flex-col gap-2">

                {{-- Freeze --}}
                @if($card->status === \App\Models\AtmCard::STATUS_ACTIVE)
                    <form action="{{ route('user.cards.freeze', $card->id) }}" method="POST">
                        @csrf
                        <button type="submit"
                                class="w-full inline-flex items-center gap-3 px-4 py-3 rounded-xl border border-blue-200 bg-blue-50 hover:bg-blue-100 text-blue-700 text-sm font-semibold transition-colors duration-150">
                            <i data-lucide="snowflake" class="h-4 w-4 shrink-0"></i>
                            <div class="text-left">
                                <p class="font-semibold">@lang('Freeze Card')</p>
                                <p class="text-xs text-blue-500 font-normal">@lang('Temporarily block all transactions')</p>
                            </div>
                        </button>
                    </form>
                @elseif($card->status === \App\Models\AtmCard::STATUS_FROZEN)
                    <form action="{{ route('user.cards.unfreeze', $card->id) }}" method="POST">
                        @csrf
                        <button type="submit"
                                class="w-full inline-flex items-center gap-3 px-4 py-3 rounded-xl border border-emerald-200 bg-emerald-50 hover:bg-emerald-100 text-emerald-700 text-sm font-semibold transition-colors duration-150">
                            <i data-lucide="flame" class="h-4 w-4 shrink-0"></i>
                            <div class="text-left">
                                <p class="font-semibold">@lang('Unfreeze Card')</p>
                                <p class="text-xs text-emerald-500 font-normal">@lang('Re-enable card transactions')</p>
                            </div>
                        </button>
                    </form>
                @endif

                {{-- Set PIN --}}
                @if(in_array($card->status, [\App\Models\AtmCard::STATUS_ACTIVE, \App\Models\AtmCard::STATUS_PENDING]))
                    <button type="button"
                            onclick="openPinModal({{ $card->id }})"
                            class="w-full inline-flex items-center gap-3 px-4 py-3 rounded-xl border border-amber-200 bg-amber-50 hover:bg-amber-100 text-amber-700 text-sm font-semibold transition-colors duration-150">
                        <i data-lucide="key-round" class="h-4 w-4 shrink-0"></i>
                        <div class="text-left">
                            <p class="font-semibold">@lang('Set / Change PIN')</p>
                            <p class="text-xs text-amber-500 font-normal">@lang('Update your 4-digit card PIN')</p>
                        </div>
                    </button>
                @endif

                {{-- Cancel --}}
                @if(!in_array($card->status, [\App\Models\AtmCard::STATUS_BLOCKED, \App\Models\AtmCard::STATUS_EXPIRED, \App\Models\AtmCard::STATUS_CANCELLED]))
                    <form action="{{ route('user.cards.cancel', $card->id) }}" method="POST"
                          onsubmit="return confirm('{{ __('Permanently cancel this card? This action cannot be undone.') }}')">
                        @csrf
                        <button type="submit"
                                class="w-full inline-flex items-center gap-3 px-4 py-3 rounded-xl border border-rose-200 bg-rose-50 hover:bg-rose-100 text-rose-700 text-sm font-semibold transition-colors duration-150">
                            <i data-lucide="x-circle" class="h-4 w-4 shrink-0"></i>
                            <div class="text-left">
                                <p class="font-semibold">@lang('Cancel Card')</p>
                                <p class="text-xs text-rose-400 font-normal">@lang('This is permanent and cannot be reversed')</p>
                            </div>
                        </button>
                    </form>
                @endif

            </div>
        </div>
    </div>

    {{-- ================================ --}}
    {{-- RIGHT — Card Details             --}}
    {{-- ================================ --}}
    <div class="flex-1 min-w-0 flex flex-col gap-6">

        {{-- Card Info --}}
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

            <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                <i data-lucide="info" class="h-5 w-5 text-primary-600"></i>
                <h3 class="text-base font-semibold text-primary-900">@lang('Card Information')</h3>
            </div>

            <ul class="divide-y divide-primary-100">
                <li class="flex items-center justify-between px-6 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Card Number')</span>
                    <span class="text-sm font-bold text-primary-900 font-mono tracking-wider">{{ $card->masked_number }}</span>
                </li>
                <li class="flex items-center justify-between px-6 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Card Holder')</span>
                    <span class="text-sm font-bold text-primary-900">{{ $card->holder_name }}</span>
                </li>
                <li class="flex items-center justify-between px-6 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Expiry Date')</span>
                    <span class="text-sm font-bold {{ $card->is_expired ? 'text-rose-600' : 'text-primary-900' }}">
                        {{ $card->expiry_month }} / {{ $card->expiry_year }}
                        @if($card->is_expired)
                            <span class="text-xs text-rose-400 ml-1">(@lang('Expired'))</span>
                        @endif
                    </span>
                </li>
                <li class="flex items-center justify-between px-6 py-3">
                    <span class="text-sm text-primary-500 font-medium">@lang('Currency')</span>
                    <span class="text-sm font-bold text-primary-900">{{ $card->currency ?? $general->cur_text }}</span>
                </li>
                @if($card->spending_limit > 0)
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Spending Limit')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($card->spending_limit) }}</span>
                    </li>
                @endif
                @if($card->daily_limit > 0)
                    <li class="flex items-center justify-between px-6 py-3">
                        <span class="text-sm text-primary-500 font-medium">@lang('Daily Limit')</span>
                        <span class="text-sm font-bold text-primary-900">{{ $general->cur_sym . showAmount($card->daily_limit) }}</span>
                    </li>
                @endif
            </ul>
        </div>

        {{-- Billing Address --}}
        @if($card->billing_address || $card->billing_city)
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

            <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                <i data-lucide="map-pin" class="h-5 w-5 text-primary-600"></i>
                <h3 class="text-base font-semibold text-primary-900">@lang('Billing Address')</h3>
            </div>

            <div class="px-6 py-4 flex flex-col gap-1">
                @if($card->billing_address)
                    <p class="text-sm text-primary-800 font-medium">{{ $card->billing_address }}</p>
                @endif
                <p class="text-sm text-primary-600">
                    {{ collect([$card->billing_city, $card->billing_state, $card->billing_zip])->filter()->join(', ') }}
                </p>
                @if($card->billing_country)
                    <p class="text-sm text-primary-600">{{ $card->billing_country }}</p>
                @endif
            </div>
        </div>
        @endif

        {{-- Physical card delivery tracking --}}
        @if($card->card_type === \App\Models\AtmCard::TYPE_PHYSICAL)
        <div class="bg-white border border-primary-100 rounded-2xl shadow-soft overflow-hidden">

            <div class="px-6 py-4 border-b border-primary-100 bg-gradient-to-r from-primary-50 to-white flex items-center gap-2">
                <i data-lucide="package" class="h-5 w-5 text-primary-600"></i>
                <h3 class="text-base font-semibold text-primary-900">@lang('Delivery Status')</h3>
            </div>

            <div class="px-6 py-5 flex flex-col gap-4">

                {{-- Progress steps --}}
                @php
                    $steps = [
                        ['label' => 'Application Submitted', 'done' => true,                          'icon' => 'file-check'],
                        ['label' => 'Card Approved',         'done' => $card->status !== \App\Models\AtmCard::STATUS_PENDING, 'icon' => 'shield-check'],
                        ['label' => 'Card Dispatched',       'done' => (bool)$card->dispatched_at,    'icon' => 'truck'],
                        ['label' => 'Card Delivered',        'done' => (bool)$card->delivered_at,     'icon' => 'package-check'],
                    ];
                @endphp

                <div class="flex flex-col gap-3">
                    @foreach($steps as $i => $step)
                        <div class="flex items-center gap-3">
                            <div class="inline-flex items-center justify-center w-8 h-8 rounded-full shrink-0
                                {{ $step['done'] ? 'bg-emerald-100' : 'bg-primary-50' }}">
                                <i data-lucide="{{ $step['icon'] }}"
                                   class="h-4 w-4 {{ $step['done'] ? 'text-emerald-600' : 'text-primary-300' }}"></i>
                            </div>
                            <span class="text-sm {{ $step['done'] ? 'font-semibold text-primary-900' : 'text-primary-400' }}">
                                @lang($step['label'])
                            </span>
                            @if($step['done'])
                                <i data-lucide="check-circle" class="h-4 w-4 text-emerald-500 ml-auto shrink-0"></i>
                            @endif
                        </div>
                    @endforeach
                </div>

                @if($card->tracking_number)
                    <div class="flex items-center justify-between p-3 bg-primary-50 border border-primary-200 rounded-xl">
                        <span class="text-xs text-primary-500 font-medium">@lang('Tracking Number')</span>
                        <span class="text-xs font-mono font-bold text-primary-800">{{ $card->tracking_number }}</span>
                    </div>
                @endif

            </div>
        </div>
        @endif

    </div>
</div>

{{-- ================================ --}}
{{-- PIN Modal                        --}}
{{-- ================================ --}}
<div class="modal fade" id="pinModal" tabindex="-1">
    <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>

@push('script')
<script>
    function openPinModal(cardId) {
        const baseRoute = "{{ rtrim(route('user.cards.pin', ':id'), ':id') }}";
        document.getElementById('pinForm').action = baseRoute + cardId;
        const modal = new bootstrap.Modal(document.getElementById('pinModal'));
        modal.show();
    }
</script>
@endpush

@endsection

@push('bottom-menu')
    <div class="col-12 order-lg-3 order-4">
        <div class="flex flex-wrap items-center gap-2 md:gap-3">
            <a href="{{ route('user.cards.index') }}"
               class="inline-flex items-center gap-2 px-4 py-2 bg-primary-800 text-white text-sm font-semibold rounded-xl shadow-soft hover:bg-primary-700 transition-colors duration-150">
                <i data-lucide="credit-card" class="h-4 w-4"></i> @lang('My Cards')
            </a>
            <a href="{{ route('user.cards.create') }}"
               class="inline-flex items-center gap-2 px-4 py-2 border border-primary-700 text-primary-800 text-sm font-semibold rounded-xl hover:bg-primary-50 transition-colors duration-150">
                <i data-lucide="plus" class="h-4 w-4"></i> @lang('Apply for Card')
            </a>
        </div>
    </div>
@endpush
