@extends('layouts.admin')

@section('title', 'Customer 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">Customer Report</h1>
    </div>
</div>

<div class="stats-grid stats-grid-4">
    <x-stat-card title="Total Customers" value="{{ number_format($data['total'] ?? 0) }}" color="blue">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><circle cx="9" cy="8" r="4" stroke="currentColor" stroke-width="1.5"/><path d="M3 20c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="17" cy="9" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M17 14c2.2 0 4 1.8 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></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="Suspended" value="{{ number_format($data['suspended'] ?? 0) }}" color="red">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
    <x-stat-card title="New This Month" value="{{ number_format($data['new_this_month'] ?? 0) }}" color="purple">
        <x-slot:icon>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5v14M7 10l5-5 5 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
        </x-slot:icon>
    </x-stat-card>
</div>
@endsection