@extends('admin.layouts.app')

@section('title', 'Hospital Executive Dashboard')

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

    <!-- Top Welcome Banner -->
    <div class="bg-gradient-to-r from-slate-900 via-sky-950 to-slate-900 rounded-3xl p-6 sm:p-8 text-white shadow-xl relative overflow-hidden border border-slate-800">
        <div class="absolute right-0 top-0 bottom-0 w-1/3 bg-radial from-sky-500/20 via-transparent to-transparent opacity-60 pointer-events-none"></div>
        <div class="absolute -bottom-10 -right-10 w-48 h-48 rounded-full bg-emerald-500/10 filter blur-2xl"></div>

        <div class="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <div class="flex items-center gap-2 mb-2">
                    <span class="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-sky-500/20 text-sky-300 border border-sky-500/30">
                        <i class="fa-solid fa-hospital mr-1"></i> Hospital Executive Portal
                    </span>
                    <span class="text-xs text-slate-400">|</span>
                    <span class="text-xs text-slate-300 font-medium">
                        <i class="fa-regular fa-clock mr-1"></i> {{ date('l, F j, Y') }}
                    </span>
                </div>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-white tracking-tight">
                    Welcome back, {{ $currentAdmin->name ?? 'Administrator' }}! 🩺
                </h1>
                <p class="text-xs sm:text-sm text-slate-300 mt-1 max-w-xl">
                    Overview of current hospital operations, employee staffing, and clinical count metrics.
                </p>
            </div>
            
            <div class="flex items-center gap-2">
                <span class="px-3 py-1.5 bg-emerald-500/20 border border-emerald-500/30 text-emerald-300 rounded-2xl text-xs font-bold flex items-center gap-2">
                    <span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
                    <span>Live Telemetry Active</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Counts Section -->
    <div>
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-base font-bold text-slate-800 flex items-center gap-2">
                <i class="fa-solid fa-chart-simple text-sky-600"></i>
                <span>Hospital & Staff Counts</span>
            </h2>
            <span class="text-xs text-slate-400 font-medium">Real-time statistics</span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            
            <!-- Count 1: Total Employees -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-teal-50 text-teal-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-users"></i>
                    </div>
                    <span class="text-[11px] font-bold text-teal-600 bg-teal-50 px-2.5 py-0.5 rounded-full border border-teal-100">
                        Staff
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Employees</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['total_employees'] ?? 142 }}</span>
                        <span class="text-xs font-semibold text-teal-600">Active Staff</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">Doctors, nurses & support team</p>
                </div>
            </div>

            <!-- Count 2: Active Shifts -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-amber-50 text-amber-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-business-time"></i>
                    </div>
                    <span class="inline-flex items-center gap-1 text-[11px] font-bold text-amber-600 bg-amber-50 px-2.5 py-0.5 rounded-full border border-amber-100">
                        <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-ping"></span> Live
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Active Shifts</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['active_shifts'] ?? 18 }}</span>
                        <span class="text-xs font-semibold text-slate-500">Rosters Running</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">Morning & evening shift rotations</p>
                </div>
            </div>

            <!-- Count 3: In-Patients & Beds -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-sky-50 text-sky-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-bed-pulse"></i>
                    </div>
                    <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-100">
                        {{ $stats['bed_occupancy_rate'] }}% Beds
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Admitted Patients</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['admitted_patients'] }}</span>
                        <span class="text-xs font-semibold text-slate-500">/ {{ $stats['total_beds'] }} Total</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">In-patients across all wards</p>
                </div>
            </div>

            <!-- Count 4: Doctors On Duty -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-user-doctor"></i>
                    </div>
                    <span class="text-[11px] font-bold text-indigo-600 bg-indigo-50 px-2.5 py-0.5 rounded-full border border-indigo-100">
                        Doctors
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Doctors On Duty</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['active_doctors'] }}</span>
                        <span class="text-xs font-semibold text-slate-500">/ {{ $stats['total_doctors'] }} Total</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">Specialists & clinical consultants</p>
                </div>
            </div>

            <!-- Count 5: Appointments Today -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-purple-50 text-purple-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-calendar-check"></i>
                    </div>
                    <span class="text-[11px] font-bold text-purple-600 bg-purple-50 px-2.5 py-0.5 rounded-full border border-purple-100">
                        Today
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Appointments</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['total_patients_today'] }}</span>
                        <span class="text-xs font-semibold text-emerald-600 font-bold">92 Completed</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">OPD & diagnostic bookings</p>
                </div>
            </div>

            <!-- Count 6: Emergency Cases -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-rose-50 text-rose-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-truck-medical"></i>
                    </div>
                    <span class="inline-flex items-center gap-1 text-[11px] font-bold text-rose-600 bg-rose-50 px-2.5 py-0.5 rounded-full border border-rose-100">
                        <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span> Urgent
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Emergency Cases</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-rose-600">{{ $stats['emergency_cases'] }}</span>
                        <span class="text-xs font-semibold text-slate-500">Active Trauma</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">ICU & emergency triage units</p>
                </div>
            </div>

            <!-- Count 7: Total Departments -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-blue-50 text-blue-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-sitemap"></i>
                    </div>
                    <span class="text-[11px] font-bold text-blue-600 bg-blue-50 px-2.5 py-0.5 rounded-full border border-blue-100">
                        Wards
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Departments</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['total_departments'] ?? 8 }}</span>
                        <span class="text-xs font-semibold text-slate-500">Clinical Wings</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">Cardio, neuro, ortho, pediatrics, etc.</p>
                </div>
            </div>

            <!-- Count 8: Revenue Collected -->
            <div class="bg-white rounded-3xl p-6 border border-slate-200/80 shadow-xs hover:shadow-md transition-all group">
                <div class="flex items-center justify-between mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-hand-holding-dollar"></i>
                    </div>
                    <span class="inline-flex items-center gap-1 text-[11px] font-bold text-emerald-600 bg-emerald-50 px-2.5 py-0.5 rounded-full border border-emerald-100">
                        <i class="fa-solid fa-arrow-trend-up text-[10px]"></i> +8.4%
                    </span>
                </div>
                <div>
                    <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Today's Revenue</p>
                    <div class="flex items-baseline gap-2 mt-1">
                        <span class="text-3xl font-extrabold text-slate-800">{{ $stats['revenue_today'] }}</span>
                        <span class="text-xs font-semibold text-slate-500">Gross</span>
                    </div>
                    <p class="text-[11px] text-slate-400 mt-2">Pharmacy & hospital billing</p>
                </div>
            </div>

        </div>
    </div>

</div>
@endsection