@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page_title', 'System Dashboard')

@section('content')
<div class="container-fluid p-0">
    <div class="row g-4 mb-4">
        <!-- Total Users Card -->
        <div class="col-sm-6 col-xl-3">
            <div class="card card-dashboard p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small fw-semibold">TOTAL USERS</span>
                        <h3 class="fw-bold my-1 text-dark">{{ number_format($metrics['total_users']) }}</h3>
                        <span class="text-success small fw-medium"><i class="bi bi-person-check-fill me-1"></i> Registered accounts</span>
                    </div>
                    <div class="icon-shape bg-primary-subtle text-primary">
                        <i class="bi bi-people"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Active Users Card -->
        <div class="col-sm-6 col-xl-3">
            <div class="card card-dashboard p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small fw-semibold">ACTIVE USERS</span>
                        <h3 class="fw-bold my-1 text-success">{{ number_format($metrics['active_users']) }}</h3>
                        <span class="text-muted small">Status: active</span>
                    </div>
                    <div class="icon-shape bg-success-subtle text-success">
                        <i class="bi bi-check-circle"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Inactive Users Card -->
        <div class="col-sm-6 col-xl-3">
            <div class="card card-dashboard p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small fw-semibold">INACTIVE USERS</span>
                        <h3 class="fw-bold my-1 text-danger">{{ number_format($metrics['inactive_users']) }}</h3>
                        <span class="text-muted small">Status: inactive</span>
                    </div>
                    <div class="icon-shape bg-danger-subtle text-danger">
                        <i class="bi bi-slash-circle"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Roles Card -->
        <div class="col-sm-6 col-xl-3">
            <div class="card card-dashboard p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small fw-semibold">SYSTEM ROLES</span>
                        <h3 class="fw-bold my-1 text-info">{{ number_format($metrics['total_roles']) }}</h3>
                        <span class="text-muted small">Spatie Roles</span>
                    </div>
                    <div class="icon-shape bg-info-subtle text-info">
                        <i class="bi bi-shield-check"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Blogs Card -->
        <div class="col-sm-6 col-xl-3">
            <div class="card card-dashboard p-3 bg-white">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <span class="text-muted small fw-semibold">BLOG ARTICLES</span>
                        <h3 class="fw-bold my-1 text-indigo">{{ number_format($metrics['total_blogs'] ?? 0) }}</h3>
                        <span class="text-success small fw-medium"><i class="bi bi-check2-circle me-1"></i> {{ $metrics['published_blogs'] ?? 0 }} published</span>
                    </div>
                    <div class="icon-shape bg-primary-subtle text-primary">
                        <i class="bi bi-journal-richtext"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick System Information Banner -->
    <div class="card border-0 shadow-sm rounded-4 p-4 bg-white">
        <h5 class="fw-bold text-dark mb-2">Welcome to your 360 Bytes Admin Portal</h5>
        <p class="text-muted mb-3">This 360 Bytes Admin Portal is powered by <strong>360 Bytes</strong></p>
        <div class="d-flex flex-wrap gap-2">
            @can('view-blog')
            <a href="{{ route('admin.blogs.index') }}" class="btn btn-primary rounded-3 btn-sm px-3"><i class="bi bi-journal-richtext me-1"></i> Manage Blogs</a>
            @endcan
            <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary rounded-3 btn-sm px-3"><i class="bi bi-people me-1"></i> Manage Users</a>
            <a href="{{ route('admin.roles.index') }}" class="btn btn-outline-secondary rounded-3 btn-sm px-3"><i class="bi bi-shield me-1"></i> Manage Roles</a>
            <!-- <a href="{{ url('/api/documentation') }}" target="_blank" class="btn btn-outline-info rounded-3 btn-sm px-3"><i class="bi bi-journal-text me-1"></i> API Documentation</a> -->
        </div>
    </div>
</div>
@endsection