@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.reports.index') }}" 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 Reports
        </a>
        <h1 class="page-title">Card Report</h1>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Total Cards" value="{{ number_format($data['total'] ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="3" y="6" width="18" height="12" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M3 10h18" stroke="currentColor" stroke-width="1.5"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Active" value="{{ number_format($data['active'] ?? 0) }}" color="green">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Blocked" value="{{ number_format($data['blocked'] ?? 0) }}" color="red">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="5" y="11" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 11V7a4 4 0 118 0v4" stroke="currentColor" stroke-width="1.5"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="Pending Requests" value="{{ number_format($data['pending_requests'] ?? 0) }}" color="orange">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/><path d="M12 7v5l3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>
@endsection