@extends('admin.layouts.app')

@section('content')
    <div class="p-4 space-y-6">

        <h2 class="text-2xl font-bold text-gray-700 mb-4 flex items-center gap-2">
            <i class="fas fa-chart-line text-belseha-primary"></i> Admin Dashboard
        </h2>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            <div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
                <div class="flex flex-col items-center text-belseha-primary">
                    <i class="fas fa-users fa-2x mb-2"></i>
                    <p class="text-md font-medium text-gray-600">Total Users</p>
                    <span class="text-2xl font-bold text-gray-800">{{ $usersCount }}</span>
                </div>
            </div>

            <div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
                <div class="flex flex-col items-center text-belseha-primary">
                    <i class="fas fa-prescription fa-2x mb-2"></i>
                    <p class="text-md font-medium text-gray-600">Prescriptions</p>
                    <span class="text-2xl font-bold text-gray-800">{{ $prescriptionsCount }}</span>
                </div>
            </div>

            <div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
                <div class="flex flex-col items-center text-belseha-primary">
                    <i class="fas fa-vials fa-2x mb-2"></i>
                    <p class="text-md font-medium text-gray-600">Medical Tests</p>
                    <span class="text-2xl font-bold text-gray-800">{{ $testsCount }}</span>
                </div>
            </div>

                        <!-- Vital Signs Card -->
<div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
    <div class="flex flex-col items-center text-belseha-primary">
        <i class="fas fa-heartbeat fa-2x mb-2"></i>
        <p class="text-md font-medium text-gray-600">Vital Signs</p>
        <span class="text-2xl font-bold text-gray-800">{{ $vitalSignsCount }}</span>
    </div>
</div>





<!-- Consultations Card -->
<div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
    <div class="flex flex-col items-center text-belseha-primary">
        <i class="fa-solid fa-comment-medical fa-2x mb-2"></i>
        <p class="text-md font-medium text-gray-600">Consultations</p>
        <span class="text-2xl font-bold text-gray-800">{{ $consultationsCount }}</span>
    </div>
</div>
            <div class="bg-white border border-gray-200 p-6 rounded shadow-sm hover:shadow-md transition">
                <div class="flex flex-col items-center text-belseha-primary">
                    <i class="fas fa-calendar-day fa-2x mb-2"></i>
                    <p class="text-md font-medium text-gray-600">Today's Activities</p>
                    <span class="text-2xl font-bold text-gray-800">{{ $todayActivity }}</span>
                </div>
            </div>

        </div>
    </div>
@endsection