@extends('layouts.admin')

@section('title', 'Card Details')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.cards') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Cards
        </a>
        <h1 class="page-title">Card Details</h1>
    </div>
    <div class="page-header-actions">
        <a href="{{ route('admin.cards.edit', $card) }}" class="btn btn-primary btn-sm">Edit Card Details & Design</a>
    </div>
</div>

<div class="grid-2">
    <div class="card">
        <div class="card-body" style="padding: 2rem;display:flex;justify-content:center;">
            <x-card-preview
                :design="$card->resolved_design"
                :type="$card->card_type"
                :name="$card->cardholder_name"
                :number="$card->masked_number"
                :expiry="$card->expiry_date"
                :network="$card->card_network"
                :show-network-logo="$card->show_network_logo"
                size="md"
            />
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Card Information</h3>
        </div>
        <div class="card-body">
            <div class="info-list">
                <div class="info-item">
                    <span class="info-label">Card Number</span>
                    <span class="info-value text-mono">{{ $card->masked_number }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Network</span>
                    <span class="info-value"><span class="badge badge-blue">{{ $card->card_network }}</span></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Card Type</span>
                    <span class="info-value"><span class="badge badge-blue">{{ ucfirst($card->type) }}</span></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Template</span>
                    <span class="info-value">{{ $card->cardTemplate->name ?? 'Custom / Default' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Status</span>
                    <span class="info-value">
                        <span class="badge badge-{{ $card->status === 'active' ? 'green' : ($card->status === 'blocked' ? 'red' : 'orange') }}">{{ ucfirst($card->status) }}</span>
                    </span>
                </div>
                <div class="info-item">
                    <span class="info-label">Expiry Date</span>
                    <span class="info-value">{{ $card->expiry_date }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Daily Limit</span>
                    <span class="info-value">{{ $currency ?? '₦' }}{{ number_format($card->daily_limit ?? 0, 2) }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Monthly Limit</span>
                    <span class="info-value">{{ $currency ?? '₦' }}{{ number_format($card->monthly_limit ?? 0, 2) }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Customer</span>
                    <span class="info-value">
                        <a href="{{ route('admin.customers.show', $card->user_id) }}">{{ $card->user->name ?? 'N/A' }}</a>
                    </span>
                </div>
                <div class="info-item">
                    <span class="info-label">Issued</span>
                    <span class="info-value">{{ $card->created_at->format('M d, Y') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Card Actions</h3>
    </div>
    <div class="card-body">
        <div class="btn-group">
            @if($card->status === 'active')
            <form method="POST" action="{{ route('admin.cards.block', $card->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-outline btn-red" onclick="return confirm('Block this card?')">Block Card</button>
            </form>
            <form method="POST" action="{{ route('admin.cards.freeze', $card->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-outline btn-orange" onclick="return confirm('Freeze this card?')">Freeze Card</button>
            </form>
            @elseif($card->status === 'blocked')
            <form method="POST" action="{{ route('admin.cards.unblock', $card->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-green" onclick="return confirm('Unblock this card?')">Unblock Card</button>
            </form>
            @elseif($card->status === 'frozen')
            <form method="POST" action="{{ route('admin.cards.unfreeze', $card->id) }}" class="inline">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-green" onclick="return confirm('Unfreeze this card?')">Unfreeze Card</button>
            </form>
            @endif
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Transaction History</h3>
    </div>
    <x-data-table :emptyMessage="'No card transactions found.'">
        <x-slot:thead>
            <th>Reference</th>
            <th>Amount</th>
            <th>Type</th>
            <th>Status</th>
            <th>Date</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($card->transactions ?? [] as $transaction)
            <tr>
                <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($transaction->amount, 2) }}</td>
                <td><span class="badge badge-{{ $transaction->type === 'credit' ? 'green' : 'blue' }}">{{ ucfirst($transaction->type) }}</span></td>
                <td><span class="badge badge-{{ $transaction->status === 'completed' ? 'green' : 'red' }}">{{ ucfirst($transaction->status) }}</span></td>
                <td>{{ $transaction->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="5">
                    <div class="data-table-empty-content">
                        <p>No card transactions found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection