@extends('layouts.app')

@section('title', 'Hospital Analytics & Reports')

@section('content')
<div class="space-y-6">
    <!-- Header with Date Filter -->
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-slate-800">Hospital Analytics & Clinical Census</h1>
            <p class="text-sm text-slate-500">Comprehensive operational and financial intelligence for Swapnapuri Nursing Home</p>
        </div>

        <form action="{{ route('reports.index') }}" method="GET" class="flex items-center space-x-2 bg-white p-2 rounded-xl border border-slate-200 shadow-xs">
            <div class="flex items-center space-x-1 text-xs">
                <span class="text-slate-400 font-semibold px-1">From:</span>
                <input type="date" name="start_date" value="{{ $startDate }}" class="px-2.5 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs">
                <span class="text-slate-400 font-semibold px-1">To:</span>
                <input type="date" name="end_date" value="{{ $endDate }}" class="px-2.5 py-1.5 bg-slate-50 border border-slate-300 rounded text-xs">
            </div>
            <button type="submit" class="px-3.5 py-1.5 bg-hospital-600 hover:bg-hospital-700 text-white rounded text-xs font-semibold shadow-xs">
                Filter
            </button>
            <button type="button" onclick="window.print()" class="px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded text-xs font-semibold border border-slate-300">
                <i class="fa-solid fa-print"></i>
            </button>
        </form>
    </div>

    <!-- Executive KPI Summary Cards -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-gradient-to-br from-hospital-900 to-hospital-800 text-white p-5 rounded-xl shadow-md">
            <div class="text-[11px] font-bold uppercase tracking-wider text-teal-300">Total Hospital Revenue</div>
            <div class="text-2xl font-black mt-1 font-mono">₹{{ number_format($totalRevenue, 2) }}</div>
            <div class="text-[11px] text-slate-300 mt-0.5">Billing + Pharmacy Collections</div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <div class="text-[11px] font-bold uppercase tracking-wider text-slate-500">OPD Consultations</div>
            <div class="text-2xl font-black text-slate-900 mt-1 font-mono">{{ $opdVisitsCount }}</div>
            <div class="text-[11px] text-slate-400 mt-0.5">Walk-ins & Appointments</div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <div class="text-[11px] font-bold uppercase tracking-wider text-slate-500">IPD Admissions & Discharges</div>
            <div class="text-2xl font-black text-sky-700 mt-1 font-mono">{{ $ipdAdmissionsCount }} <span class="text-sm font-normal text-slate-400">/ {{ $dischargesCount }} disc</span></div>
            <div class="text-[11px] text-slate-400 mt-0.5">Inpatient clinical throughput</div>
        </div>

        <div class="bg-white p-5 rounded-xl border border-slate-200 shadow-xs">
            <div class="text-[11px] font-bold uppercase tracking-wider text-slate-500">Laboratory Orders</div>
            <div class="text-2xl font-black text-teal-700 mt-1 font-mono">{{ $labOrdersCount }}</div>
            <div class="text-[11px] text-slate-400 mt-0.5">Diagnostic investigations run</div>
        </div>
    </div>

    <!-- Analytics Grids: Revenue Breakdown & Doctor OPD Volume -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Revenue Breakdown Card -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 p-5 space-y-4">
            <div class="font-bold text-sm text-slate-800 flex items-center justify-between border-b border-slate-100 pb-3">
                <span class="flex items-center">
                    <i class="fa-solid fa-coins text-hospital-600 mr-2"></i> Financial Revenue Breakdown
                </span>
                <span class="text-xs text-slate-400">Settled Collections</span>
            </div>

            <div class="space-y-3">
                <div>
                    <div class="flex justify-between text-xs mb-1 font-semibold text-slate-700">
                        <span>Hospital Invoices & Services Collection</span>
                        <span class="font-mono font-bold text-slate-900">₹{{ number_format($hospitalPayments, 2) }}</span>
                    </div>
                    @php
                        $hospPct = $totalRevenue > 0 ? round(($hospitalPayments / $totalRevenue) * 100, 1) : 0;
                    @endphp
                    <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                        <div class="bg-hospital-600 h-2.5 rounded-full" style="width: {{ $hPct = max(3, $hospPct) }}%"></div>
                    </div>
                    <div class="text-[10px] text-slate-400 text-right mt-0.5">{{ $hospPct }}% of total collection</div>
                </div>

                <div>
                    <div class="flex justify-between text-xs mb-1 font-semibold text-slate-700">
                        <span>Central Pharmacy POS Receipts</span>
                        <span class="font-mono font-bold text-slate-900">₹{{ number_format($pharmacySales, 2) }}</span>
                    </div>
                    @php
                        $pharmPct = $totalRevenue > 0 ? round(($pharmacySales / $totalRevenue) * 100, 1) : 0;
                    @endphp
                    <div class="w-full bg-slate-100 h-2.5 rounded-full overflow-hidden">
                        <div class="bg-emerald-500 h-2.5 rounded-full" style="width: {{ $pPct = max(3, $pharmPct) }}%"></div>
                    </div>
                    <div class="text-[10px] text-slate-400 text-right mt-0.5">{{ $pharmPct }}% of total collection</div>
                </div>
            </div>
        </div>

        <!-- Doctor OPD Census Volume Table -->
        <div class="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <div class="bg-slate-50 px-5 py-3 border-b border-slate-200 font-bold text-xs uppercase tracking-wider text-slate-700 flex items-center justify-between">
                <span>Doctor Consultation Workload</span>
                <span class="text-[10px] font-normal text-slate-400">{{ $startDate }} to {{ $endDate }}</span>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left text-xs">
                    <thead class="bg-slate-100 text-slate-600 uppercase font-semibold border-b border-slate-200">
                        <tr>
                            <th class="px-4 py-2.5">Consultant Doctor</th>
                            <th class="px-4 py-2.5">Department</th>
                            <th class="px-4 py-2.5 text-center">Consultations</th>
                            <th class="px-4 py-2.5 text-right">Share (%)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @foreach($doctorOpdCounts as $doc)
                            @php
                                $docPct = $opdVisitsCount > 0 ? round(($doc->opd_visits_count / $opdVisitsCount) * 100, 1) : 0;
                            @endphp
                            <tr class="hover:bg-slate-50/70">
                                <td class="px-4 py-2.5 font-bold text-slate-900">{{ $doc->full_name }}</td>
                                <td class="px-4 py-2.5 text-slate-600">{{ $doc->department->name ?? 'Clinical' }}</td>
                                <td class="px-4 py-2.5 text-center font-mono font-bold">{{ $doc->opd_visits_count }}</td>
                                <td class="px-4 py-2.5 text-right font-mono text-hospital-700 font-bold">{{ $docPct }}%</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection