@extends('layouts.app')

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

@section('content')
<div class="space-y-6">
    <!-- Welcome Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between bg-white p-5 rounded-xl border border-slate-200 shadow-sm gap-4">
        <div>
            <h1 class="text-xl font-bold text-slate-900 tracking-tight">Clinical & Operational Dashboard</h1>
            <p class="text-xs text-slate-500 mt-0.5">Real-time status for Swapnapuri Nursing Home &bull; {{ now()->format('l, F j, Y') }}</p>
        </div>
        <div class="flex items-center space-x-2">
            <a href="{{ route('patients.create') }}" class="inline-flex items-center px-3.5 py-2 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-lg shadow-sm transition">
                <i class="fa-solid fa-user-plus mr-2"></i> Register Patient
            </a>
            <a href="{{ route('opd.index') }}" class="inline-flex items-center px-3.5 py-2 bg-slate-800 hover:bg-slate-700 text-white text-xs font-semibold rounded-lg shadow-sm transition">
                <i class="fa-solid fa-stethoscope mr-2"></i> OPD Queue
            </a>
            <a href="{{ route('pharmacy.pos') }}" class="inline-flex items-center px-3.5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-semibold rounded-lg shadow-sm transition">
                <i class="fa-solid fa-cash-register mr-2"></i> Pharmacy POS
            </a>
        </div>
    </div>

    <!-- Top KPI Metric Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <!-- 1. Total & Today's Patients -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Patients Registered</div>
                <div class="text-2xl font-bold text-slate-900 mt-1">{{ number_format($totalPatients) }}</div>
                <div class="text-xs text-emerald-600 font-medium mt-1 flex items-center">
                    <i class="fa-solid fa-arrow-trend-up mr-1"></i> +{{ $todayRegistrations }} registered today
                </div>
            </div>
            <div class="w-12 h-12 rounded-xl bg-teal-50 text-teal-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-users"></i>
            </div>
        </div>

        <!-- 2. OPD Consultations Today -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Today's OPD Queue</div>
                <div class="text-2xl font-bold text-indigo-900 mt-1">{{ $todayOpdVisits }}</div>
                <div class="text-xs text-slate-500 font-medium mt-1">
                    <span class="text-amber-600 font-semibold">{{ $waitingOpd }} Waiting</span> &bull; {{ $completedOpd }} Completed
                </div>
            </div>
            <div class="w-12 h-12 rounded-xl bg-indigo-50 text-indigo-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-stethoscope"></i>
            </div>
        </div>

        <!-- 3. Bed Occupancy -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Bed Occupancy Rate</div>
                <div class="text-2xl font-bold text-slate-900 mt-1">{{ $occupancyRate }}%</div>
                <div class="text-xs text-slate-500 font-medium mt-1">
                    <span class="text-rose-600 font-semibold">{{ $occupiedBeds }} Occupied</span> of {{ $totalBeds }} ({{ $availableBeds }} Free)
                </div>
            </div>
            <div class="w-12 h-12 rounded-xl bg-rose-50 text-rose-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-bed"></i>
            </div>
        </div>

        <!-- 4. Today's Collections -->
        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-sm flex items-center justify-between">
            <div>
                <div class="text-xs font-semibold uppercase tracking-wider text-slate-500">Today's Collection</div>
                <div class="text-2xl font-bold text-emerald-700 mt-1">₹{{ number_format($totalTodayCollection, 2) }}</div>
                <div class="text-xs text-slate-500 font-medium mt-1">
                    Hospital: ₹{{ number_format($todayHospitalPayments, 0) }} &bull; Pharm: ₹{{ number_format($todayPharmacySales, 0) }}
                </div>
            </div>
            <div class="w-12 h-12 rounded-xl bg-emerald-50 text-emerald-600 flex items-center justify-center text-xl">
                <i class="fa-solid fa-indian-rupee-sign"></i>
            </div>
        </div>
    </div>

    <!-- Secondary Status Cards (Diagnostics & Inventory Alerts) -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Lab Pending -->
        <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center space-x-4">
            <div class="w-10 h-10 rounded-lg bg-purple-50 text-purple-600 flex items-center justify-center text-lg">
                <i class="fa-solid fa-vial-virus"></i>
            </div>
            <div class="flex-1">
                <div class="text-xs text-slate-500 font-medium">Pending Laboratory Orders</div>
                <div class="text-lg font-bold text-slate-900">{{ $pendingLabOrders }} in process</div>
            </div>
            <a href="{{ route('laboratory.index') }}" class="text-xs text-purple-600 font-semibold hover:underline">View LIS &rarr;</a>
        </div>

        <!-- Low Stock Alert -->
        <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center space-x-4">
            <div class="w-10 h-10 rounded-lg {{ $lowStockCount > 0 ? 'bg-amber-50 text-amber-600' : 'bg-slate-50 text-slate-400' }} flex items-center justify-center text-lg">
                <i class="fa-solid fa-triangle-exclamation"></i>
            </div>
            <div class="flex-1">
                <div class="text-xs text-slate-500 font-medium">Low Stock Medicines</div>
                <div class="text-lg font-bold {{ $lowStockCount > 0 ? 'text-amber-700' : 'text-slate-900' }}">{{ $lowStockCount }} items alert</div>
            </div>
            <a href="{{ route('pharmacy.pos') }}" class="text-xs text-amber-600 font-semibold hover:underline">Restock &rarr;</a>
        </div>

        <!-- Expiry Alert -->
        <div class="bg-white p-4 rounded-xl border border-slate-200 shadow-sm flex items-center space-x-4">
            <div class="w-10 h-10 rounded-lg {{ $nearExpiryCount > 0 ? 'bg-rose-50 text-rose-600' : 'bg-slate-50 text-slate-400' }} flex items-center justify-center text-lg">
                <i class="fa-solid fa-clock-rotate-left"></i>
            </div>
            <div class="flex-1">
                <div class="text-xs text-slate-500 font-medium">Near-Expiry Batches (60 Days)</div>
                <div class="text-lg font-bold {{ $nearExpiryCount > 0 ? 'text-rose-700' : 'text-slate-900' }}">{{ $nearExpiryCount }} batches</div>
            </div>
            <span class="text-xs text-slate-400 font-medium">FEFO Enabled</span>
        </div>
    </div>

    <!-- Active Inpatient Census & Recent Registrations -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Currently Admitted Patients -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="text-sm font-bold text-slate-900 flex items-center">
                    <i class="fa-solid fa-bed-pulse text-teal-600 mr-2"></i> Current Inpatient Census ({{ $activeAdmissions }})
                </h3>
                <a href="{{ route('beds.index') }}" class="text-xs text-teal-600 font-semibold hover:underline">Visual Bed Matrix &rarr;</a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50 text-slate-500 uppercase tracking-wider font-semibold border-b border-slate-100">
                        <tr>
                            <th class="p-3">Patient / ID</th>
                            <th class="p-3">Bed & Ward</th>
                            <th class="p-3">Doctor</th>
                            <th class="p-3">Admitted On</th>
                            <th class="p-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        @forelse($recentAdmissions as $adm)
                            <tr class="hover:bg-slate-50 transition">
                                <td class="p-3">
                                    <div class="font-bold text-slate-900">{{ $adm->patient->full_name }}</div>
                                    <div class="text-[10px] text-teal-700 font-mono">{{ $adm->patient->patient_id }}</div>
                                </td>
                                <td class="p-3">
                                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-teal-100 text-teal-800">{{ $adm->bed->bed_number }}</span>
                                    <div class="text-[10px] text-slate-500 mt-0.5">{{ $adm->bed->ward->name }}</div>
                                </td>
                                <td class="p-3">
                                    <div class="font-medium">{{ $adm->primaryDoctor->full_name }}</div>
                                </td>
                                <td class="p-3 text-slate-500">
                                    {{ $adm->admission_date->format('d/m/Y h:i A') }}
                                </td>
                                <td class="p-3 text-right">
                                    <a href="{{ route('ipd.show', $adm->id) }}" class="px-2.5 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-semibold">
                                        View File
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-6 text-center text-slate-400">
                                    No inpatients currently admitted.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Recent Patients Registered -->
        <div class="bg-white rounded-xl border border-slate-200 shadow-sm overflow-hidden">
            <div class="p-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="text-sm font-bold text-slate-900 flex items-center">
                    <i class="fa-solid fa-hospital-user text-indigo-600 mr-2"></i> Recently Registered Patients
                </h3>
                <a href="{{ route('patients.index') }}" class="text-xs text-indigo-600 font-semibold hover:underline">All Patients &rarr;</a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-50 text-slate-500 uppercase tracking-wider font-semibold border-b border-slate-100">
                        <tr>
                            <th class="p-3">Patient ID</th>
                            <th class="p-3">Name</th>
                            <th class="p-3">Age / Gender</th>
                            <th class="p-3">Mobile</th>
                            <th class="p-3 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 text-slate-700">
                        @forelse($recentPatients as $p)
                            <tr class="hover:bg-slate-50 transition">
                                <td class="p-3 font-mono font-bold text-teal-700">
                                    {{ $p->patient_id }}
                                </td>
                                <td class="p-3 font-semibold text-slate-900">
                                    {{ $p->full_name }}
                                </td>
                                <td class="p-3 text-slate-600">
                                    {{ $p->age }} yrs &bull; {{ $p->gender }} ({{ $p->blood_group }})
                                </td>
                                <td class="p-3 text-slate-600">
                                    {{ $p->mobile }}
                                </td>
                                <td class="p-3 text-right space-x-1">
                                    <a href="{{ route('patients.show', $p->id) }}" class="px-2 py-1 bg-teal-50 hover:bg-teal-100 text-teal-700 rounded text-xs font-semibold">
                                        EMR
                                    </a>
                                    <a href="{{ route('patients.id-card', $p->id) }}" target="_blank" class="px-2 py-1 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-semibold">
                                        <i class="fa-solid fa-id-card"></i> Card
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="p-6 text-center text-slate-400">
                                    No patients registered yet.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Immutable Audit Log Real-time Feed -->
    <div class="bg-white rounded-xl border border-slate-200 shadow-sm p-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-sm font-bold text-slate-900 flex items-center">
                <i class="fa-solid fa-shield-halved text-slate-600 mr-2"></i> Security & Operational Audit Feed
            </h3>
            <a href="{{ route('audit.index') }}" class="text-xs text-slate-600 font-semibold hover:underline">Full Audit Trail &rarr;</a>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
            @foreach($recentAuditLogs as $log)
                <div class="p-3 rounded-lg border border-slate-100 bg-slate-50 text-xs">
                    <div class="flex items-center justify-between text-slate-500 mb-1">
                        <span class="font-bold text-teal-700 uppercase tracking-wider text-[10px]">{{ $log->module }}</span>
                        <span class="text-[10px]">{{ $log->created_at->diffForHumans() }}</span>
                    </div>
                    <div class="font-semibold text-slate-800 truncate">{{ $log->action }}</div>
                    <div class="text-[11px] text-slate-500 mt-1 flex items-center justify-between">
                        <span>User: {{ $log->user->name ?? 'System' }}</span>
                        <span class="font-mono text-[10px] text-slate-400">{{ $log->ip_address }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
@endsection