@extends('layouts.admin')
@section('title', 'Center Dashboard')
@section('content')
<div class="page-header mb-4">
    <h1 class="page-title">My Center</h1>
    <p class="page-subtitle">Overview of your center's current activity.</p>
</div>

{{-- Main Stats --}}
<div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-4">
        <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">
                    <i class="ti ti-users text-primary fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Registered Citizens</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['citizens'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-4">
        <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">
                    <i class="ti ti-users text-info fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Mapped Families</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['families'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-4">
        <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">
                    <i class="ti ti-file-description text-success fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Total Applications</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['applications'] }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-4">
        <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">
                    <i class="ti ti-shield-check text-warning fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Pending Citizen KYC</p>
                    <h4 class="mb-0 fw-bold">{{ $stats['pending_kyc'] ?? 0 }}</h4>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-4">
        <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">
                    <i class="ti ti-bell text-danger fs-4"></i>
                </div>
                <div>
                    <p class="mb-1 text-muted small">Renewal Reminders</p>
                    <h4 class="mb-0 fw-bold">{{ ($stats['renewals_due_15'] ?? 0) + ($stats['renewals_due_7'] ?? 0) + ($stats['renewals_due_3'] ?? 0) }}</h4>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Renewal Breakdown + Quick Links --}}
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card shadow-none border h-100">
            <div class="card-header border-bottom">
                <h6 class="mb-0 fw-semibold"><i class="ti ti-clock me-2 text-warning"></i>Renewal Breakdown</h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="card shadow-none bg-warning-subtle text-center">
                            <div class="card-body py-3">
                                <h3 class="mb-1 fw-bold text-warning">{{ $stats['renewals_due_15'] ?? 0 }}</h3>
                                <small class="text-muted">Due in 15 days</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card shadow-none text-center" style="background-color:#fff3e0;">
                            <div class="card-body py-3">
                                <h3 class="mb-1 fw-bold" style="color:#e65100;">{{ $stats['renewals_due_7'] ?? 0 }}</h3>
                                <small class="text-muted">Due in 7 days</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card shadow-none bg-danger-subtle text-center">
                            <div class="card-body py-3">
                                <h3 class="mb-1 fw-bold text-danger">{{ $stats['renewals_due_3'] ?? 0 }}</h3>
                                <small class="text-muted">Due in 3 days</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card shadow-none border h-100">
            <div class="card-header border-bottom">
                <h6 class="mb-0 fw-semibold"><i class="ti ti-bolt me-2 text-primary"></i>Quick Links</h6>
            </div>
            <div class="card-body d-flex flex-column gap-2">
                <a href="{{ route('center.citizens.create') }}" class="d-flex align-items-center gap-3 p-3 rounded-2 border text-decoration-none text-body">
                    <div class="rounded-2 p-2 bg-primary-subtle flex-shrink-0">
                        <i class="ti ti-user-plus text-primary"></i>
                    </div>
                    <span class="fw-medium small">Register New Citizen</span>
                    <i class="ti ti-chevron-right ms-auto text-muted"></i>
                </a>
                <a href="{{ route('center.families.create') }}" class="d-flex align-items-center gap-3 p-3 rounded-2 border text-decoration-none text-body">
                    <div class="rounded-2 p-2 bg-success-subtle flex-shrink-0">
                        <i class="ti ti-users text-success"></i>
                    </div>
                    <span class="fw-medium small">Create Family Group</span>
                    <i class="ti ti-chevron-right ms-auto text-muted"></i>
                </a>
                <a href="{{ route('center.applications.create') }}" class="d-flex align-items-center gap-3 p-3 rounded-2 border text-decoration-none text-body">
                    <div class="rounded-2 p-2 bg-warning-subtle flex-shrink-0">
                        <i class="ti ti-clipboard-plus text-warning"></i>
                    </div>
                    <span class="fw-medium small">Submit New Application</span>
                    <i class="ti ti-chevron-right ms-auto text-muted"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection