@extends('layouts.admin')
@section('title', 'Admin Dashboard')
@section('content')

<div class="page-header mb-4">
    <h1 class="page-title">Admin Dashboard</h1>
    <p class="page-subtitle">Platform insights and operational summary.</p>
</div>

{{-- Stat Cards --}}
<div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-primary-subtle flex-shrink-0">
                    <i class="ti ti-building text-primary fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Centers</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['centers'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-info-subtle flex-shrink-0">
                    <i class="ti ti-users text-info fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Families</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['families'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-success-subtle flex-shrink-0">
                    <i class="ti ti-users text-success fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Citizens</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['citizens'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-secondary-subtle flex-shrink-0">
                    <i class="ti ti-certificate text-secondary fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Enrolments</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['enrolments'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 flex-shrink-0" style="background-color:#f3e5f5;">
                    <i class="ti ti-file-description fs-4" style="color:#9c27b0;"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Applications</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['applications'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-warning-subtle flex-shrink-0">
                    <i class="ti ti-shield-check text-warning fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Pending KYC</p>
                    <h4 class="mb-0 fw-bold text-warning">{{ $stats['pending_kyc'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-danger-subtle flex-shrink-0">
                    <i class="ti ti-clock text-danger fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Pending Applications</p>
                    <h4 class="mb-0 fw-bold text-danger">{{ $stats['pending_applications'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card shadow-none border">
            <div class="card-body d-flex align-items-center gap-3">
                <div class="rounded-2 p-3 bg-success-subtle flex-shrink-0">
                    <i class="ti ti-chart-bar text-success fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Approved / Declined</p>
                    <h5 class="mb-0 fw-bold">
                        <span class="text-success">{{ $stats['approved_applications'] }}</span>
                        <span class="text-muted mx-1">/</span>
                        <span class="text-danger">{{ $stats['declined_applications'] }}</span>
                    </h5>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Recent Data Tables --}}
<div class="row g-4">
    <div class="col-lg-6">
        <div class="card shadow-none border h-100">
            <div class="card-header border-bottom d-flex align-items-center gap-2">
                <i class="ti ti-building text-primary"></i>
                <strong>Recent Centers</strong>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr><th>Code</th><th>Location</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                        @forelse($recentCenters as $center)
                            <tr>
                                <td class="fw-semibold">{{ $center->code }}</td>
                                <td>{{ $center->location }}</td>
                                <td>
                                    @if($center->is_verified)
                                        <span class="badge bg-success-subtle text-success rounded-pill">Verified</span>
                                    @else
                                        <span class="badge bg-warning-subtle text-warning rounded-pill">Pending</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="3" class="text-center text-muted py-3">No data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card shadow-none border h-100">
            <div class="card-header border-bottom d-flex align-items-center gap-2">
                <i class="ti ti-file-description text-success"></i>
                <strong>Recent Applications</strong>
            </div>
            <div class="card-body p-0">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr><th>ID</th><th>Scheme</th><th>Center</th><th>Status</th></tr>
                    </thead>
                    <tbody>
                        @forelse($recentApplications as $application)
                            <tr>
                                <td class="fw-semibold">#{{ $application->id }}</td>
                                <td>{{ $application->scheme?->name ?: '—' }}</td>
                                <td>{{ $application->center?->code ?: '—' }}</td>
                                <td><span class="badge bg-secondary-subtle text-secondary rounded-pill">{{ $application->status }}</span></td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="text-center text-muted py-3">No data</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection