@extends('layouts.admin')

@section('title', 'Cards')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">All Cards <span class="page-title-count">({{ $cards->total() ?? 0 }})</span></h1>
    </div>
</div>

<div class="tabs-nav" style="margin-bottom: 1.5rem;">
    <a href="{{ route('admin.cards', array_merge(request()->query(), ['tab' => 'active'])) }}" class="tab-btn {{ request('tab', 'active') === 'active' ? 'active' : '' }}">Active</a>
    <a href="{{ route('admin.cards', array_merge(request()->query(), ['tab' => 'blocked'])) }}" class="tab-btn {{ request('tab') === 'blocked' ? 'active' : '' }}">Blocked</a>
    <a href="{{ route('admin.cards', array_merge(request()->query(), ['tab' => 'frozen'])) }}" class="tab-btn {{ request('tab') === 'frozen' ? 'active' : '' }}">Frozen</a>
    <a href="{{ route('admin.cards', array_merge(request()->query(), ['tab' => 'expired'])) }}" class="tab-btn {{ request('tab') === 'expired' ? 'active' : '' }}">Expired</a>
</div>

<div class="card">
    <div class="card-header">
        <form method="GET" action="{{ route('admin.cards') }}" class="filter-bar">
            <div class="filter-search">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="8" cy="8" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M12 12l4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                <input type="text" name="search" value="{{ request('search') }}" placeholder="Search card number, customer..." class="filter-search-input">
            </div>
            <input type="hidden" name="tab" value="{{ request('tab', 'active') }}">
            <button type="submit" class="btn btn-primary btn-sm">Search</button>
        </form>
    </div>

    <x-data-table :emptyMessage="'No cards found.'" :paginator="$cards ?? null">
        <x-slot:thead>
            <th>Card Number</th>
            <th>Customer</th>
            <th>Type</th>
            <th>Status</th>
            <th>Expiry</th>
            <th>Limits</th>
            <th>Actions</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($cards ?? [] as $card)
            <tr>
                <td><span class="text-mono">{{ $card->masked_number }}</span></td>
                <td class="text-semibold">{{ $card->user->name ?? 'N/A' }}</td>
                <td><span class="badge badge-blue">{{ ucfirst($card->type) }}</span></td>
                <td><span class="badge badge-{{ $card->status === 'active' ? 'green' : ($card->status === 'blocked' ? 'red' : 'orange') }}">{{ ucfirst($card->status) }}</span></td>
                <td>{{ $card->expiry_date }}</td>
                <td>{{ $currency ?? '₦' }}{{ number_format($card->daily_limit ?? 0, 0) }}/day</td>
                <td>
                    <div class="table-actions">
                        <a href="{{ route('admin.cards.show', $card->id) }}" class="btn btn-sm btn-outline">View</a>
                        <a href="{{ route('admin.cards.edit', $card->id) }}" class="btn btn-sm btn-outline">Edit</a>
                        @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-sm btn-outline btn-red" onclick="return confirm('Block this card?')">Block</button>
                        </form>
                        <form method="POST" action="{{ route('admin.cards.freeze', $card->id) }}" class="inline">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="btn btn-sm btn-outline btn-orange" onclick="return confirm('Freeze this card?')">Freeze</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-sm btn-outline btn-green" onclick="return confirm('Unblock this card?')">Unblock</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-sm btn-outline btn-green" onclick="return confirm('Unfreeze this card?')">Unfreeze</button>
                        </form>
                        @endif
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="7">
                    <div class="data-table-empty-content">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="#F1F5F9"/><rect x="12" y="16" width="24" height="16" rx="3" stroke="#94A3B8" stroke-width="1.5"/><path d="M12 22h24" stroke="#94A3B8" stroke-width="1.5"/></svg>
                        <p>No cards found.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection