<div>
    <div class="row g-4">

        {{-- Clients Created --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0 me-3">
                            <div class="avatar-sm bg-primary-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;">
                                <i class="mdi mdi-account-plus text-primary fs-5"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-0 fw-semibold text-dark">Clients Created</h6>
                            <small class="text-muted">New registrations</small>
                        </div>
                    </div>
                    <div class="row text-center g-0">
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-primary">{{ number_format($clientsToday) }}</div>
                                <div class="text-muted small">Today</div>
                            </div>
                        </div>
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-primary">{{ number_format($clientsWeek) }}</div>
                                <div class="text-muted small">This Week</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-primary">{{ number_format($clientsMonth) }}</div>
                                <div class="text-muted small">This Month</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Status 24 --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0 me-3">
                            <div class="avatar-sm bg-warning-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;">
                                <i class="mdi mdi-flag text-warning fs-5"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-0 fw-semibold text-dark">Ready for DSAR</h6>
                            <small class="text-muted">Claims reaching this status</small>
                        </div>
                    </div>
                    <div class="row text-center g-0">
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-warning">{{ number_format($status24Today) }}</div>
                                <div class="text-muted small">Today</div>
                            </div>
                        </div>
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-warning">{{ number_format($status24Week) }}</div>
                                <div class="text-muted small">This Week</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-warning">{{ number_format($status24Month) }}</div>
                                <div class="text-muted small">This Month</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Status 34 --}}
        <div class="col-md-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0 me-3">
                            <div class="avatar-sm bg-success-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:42px;height:42px;">
                                <i class="mdi mdi-check-circle text-success fs-5"></i>
                            </div>
                        </div>
                        <div>
                            <h6 class="mb-0 fw-semibold text-dark">DSARs Sent</h6>
                            <small class="text-muted">Claims reaching this status</small>
                        </div>
                    </div>
                    <div class="row text-center g-0">
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-success">{{ number_format($status34Today) }}</div>
                                <div class="text-muted small">Today</div>
                            </div>
                        </div>
                        <div class="col border-end">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-success">{{ number_format($status34Week) }}</div>
                                <div class="text-muted small">This Week</div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="py-2">
                                <div class="fs-4 fw-bold text-success">{{ number_format($status34Month) }}</div>
                                <div class="text-muted small">This Month</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
