@extends('layout',['heading'=>__('ui.system_admin'),'clinic'=>$clinic])
@section('content')
<div class="space-y-6">
<section class="relative overflow-hidden rounded-[22px] bg-gradient-to-l from-[#111827] via-[#263653] to-[#4b3a67] p-6 md:p-8 text-white"><div class="relative z-10"><p class="text-violet-200 text-sm font-bold">PLATFORM CONTROL CENTER</p><h2 class="text-2xl md:text-3xl font-extrabold mt-2">{{ __('ui.platform_executive_overview') }}</h2><p class="text-slate-300 mt-2 max-w-xl leading-7">{{ __('ui.platform_overview_intro') }}</p><div class="flex flex-wrap gap-3 mt-6"><a href="/admin/clinics" class="bg-white text-slate-800 px-4 py-2.5 rounded-xl font-bold">{{ __('ui.manage_clinics') }}</a><a href="/admin/revenue-report" class="border border-white/20 bg-white/10 px-4 py-2.5 rounded-xl font-bold">{{ __('ui.view_revenue') }}</a></div></div><div class="absolute left-10 -bottom-24 h-64 w-64 rounded-full border-[28px] border-violet-200/10"></div><div class="absolute left-52 -top-24 h-48 w-48 rounded-full bg-indigo-300/10"></div></section>
<section class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4"><div class="card p-5"><p class="text-sm text-slate-500 font-semibold">{{ __('ui.registered_clinics') }}</p><strong class="block text-3xl mt-5">{{ number_format($stats['clinics']) }}</strong><span class="text-xs text-slate-400">{{ __('ui.total_platform_accounts') }}</span></div><div class="card p-5"><p class="text-sm text-slate-500 font-semibold">{{ __('ui.all_clinic_patients') }}</p><strong class="block text-3xl mt-5 text-teal-700">{{ number_format($stats['patients']) }}</strong><span class="text-xs text-slate-400">{{ __('ui.unified_patient_database') }}</span></div><div class="card p-5"><p class="text-sm text-slate-500 font-semibold">{{ __('ui.cash_subscriptions') }}</p><strong class="block text-3xl mt-5 text-emerald-700">{{ number_format($stats['cash'],2) }} <small class="text-sm">{{ __('ui.currency') }}</small></strong><span class="text-xs text-slate-400">{{ __('ui.total_cash_payments') }}</span></div><div class="card p-5"><p class="text-sm text-slate-500 font-semibold">{{ __('ui.instapay_subscriptions') }}</p><strong class="block text-3xl mt-5 text-indigo-700">{{ number_format($stats['instapay'],2) }} <small class="text-sm">{{ __('ui.currency') }}</small></strong><span class="text-xs text-slate-400">{{ __('ui.total_transfers') }}</span></div></section>
<section class="grid lg:grid-cols-[1.1fr_.9fr] gap-6"><div class="card p-6"><div class="flex items-center justify-between mb-6"><div><p class="section-kicker">REVENUE MIX</p><h3 class="text-lg font-extrabold mt-1">{{ __('ui.subscription_distribution') }}</h3></div><span class="text-xs text-slate-400">{{ __('ui.by_payment_method') }}</span></div><div class="space-y-5"><div><div class="flex justify-between text-sm mb-2"><span>{{ __('ui.cash') }}</span><b>{{ number_format($stats['cash'],2) }} {{ __('ui.currency') }}</b></div><div class="h-3 rounded-full bg-slate-100 overflow-hidden"><div class="h-full rounded-full bg-emerald-500" style="width:{{ ($stats['cash']+$stats['instapay']) > 0 ? min(100,($stats['cash']/($stats['cash']+$stats['instapay']))*100) : 0 }}%"></div></div></div><div><div class="flex justify-between text-sm mb-2"><span>{{ __('ui.instapay') }}</span><b>{{ number_format($stats['instapay'],2) }} {{ __('ui.currency') }}</b></div><div class="h-3 rounded-full bg-slate-100 overflow-hidden"><div class="h-full rounded-full bg-indigo-500" style="width:{{ ($stats['cash']+$stats['instapay']) > 0 ? min(100,($stats['instapay']/($stats['cash']+$stats['instapay']))*100) : 0 }}%"></div></div></div></div></div><div class="card p-6"><p class="section-kicker">SYSTEM ACTIONS</p><h3 class="text-lg font-extrabold mt-1 mb-5">{{ __('ui.management_tools') }}</h3><div class="space-y-3"><a class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-violet-50 transition" href="/admin/clinics"><span><b class="block">{{ __('ui.clinics_subscriptions') }}</b><small class="text-slate-500">{{ __('ui.add_renew_monitor') }}</small></span><b class="text-violet-700">←</b></a><a class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-violet-50 transition" href="/admin/revenue-report"><span><b class="block">{{ __('ui.financial_report') }}</b><small class="text-slate-500">{{ __('ui.revenue_by_period') }}</small></span><b class="text-violet-700">←</b></a><a class="flex items-center justify-between p-4 rounded-2xl bg-slate-50 hover:bg-violet-50 transition" href="/admin/tenant-operations"><span><b class="block">{{ __('ui.operations_monitoring') }}</b><small class="text-slate-500">{{ __('ui.migration_background_jobs_status') }}</small></span><b class="text-violet-700">←</b></a></div></div></section>
<section class="card p-6"><div class="flex flex-wrap items-start justify-between gap-3 mb-5"><div><p class="section-kicker">{{ __('ui.subscription_financial_chart') }}</p><h3 class="text-lg font-extrabold mt-1">{{ __('ui.subscription_financial_chart') }}</h3><p class="text-sm text-slate-500 mt-1">{{ __('ui.subscription_financial_chart_intro') }}</p></div><div class="text-left"><p class="text-xs text-slate-500">{{ __('ui.forecast_next_six_months') }}</p><strong class="text-xl text-violet-700">{{ number_format(collect($collectionForecast)->sum('expected'),2) }} {{ __('ui.currency') }}</strong></div></div><div class="h-[330px] relative"><canvas id="subscriptionFinancialChart"></canvas></div><p class="text-xs text-slate-400 mt-3">{{ __('ui.forecast_basis') }}</p></section><section class="card p-6"><div class="flex items-center justify-between mb-5"><div><p class="section-kicker">{{ __('ui.inactive_clinics_report') }}</p><h3 class="text-lg font-extrabold mt-1">{{ __('ui.inactive_clinics_report') }}</h3><p class="text-sm text-slate-500 mt-1">{{ __('ui.inactive_clinics_intro') }}</p></div><span class="rounded-full bg-red-100 text-red-700 px-3 py-1 text-xs font-bold">{{ number_format($inactiveClinics->count()) }}</span></div><div class="overflow-x-auto"><table class="w-full text-sm"><thead class="border-b text-slate-500"><tr><th class="p-3 text-right">{{ __('ui.clinic') }}</th><th class="p-3 text-right">{{ __('ui.code') }}</th><th class="p-3 text-right">{{ __('ui.subscription_start') }}</th><th class="p-3 text-right">{{ __('ui.subscription_end') }}</th><th class="p-3 text-right">{{ __('ui.activation_status') }}</th><th class="p-3 text-right">{{ __('ui.action') }}</th></tr></thead><tbody>@forelse($inactiveClinics as $inactive)<tr class="border-b"><td class="p-3 font-semibold">{{ $inactive->name }}</td><td class="p-3 text-cyan-700 font-bold">{{ $inactive->code }}</td><td class="p-3">{{ $inactive->subscription_started_at }}</td><td class="p-3">{{ $inactive->subscription_expires_at }}</td><td class="p-3"><span class="rounded-full bg-red-100 text-red-700 px-2 py-1 text-xs">{{ __('ui.inactive') }}</span></td><td class="p-3"><a class="text-violet-700 font-bold" href="/admin/clinics">{{ __('ui.manage_clinics') }} ←</a></td></tr>@empty<tr><td colspan="6" class="p-6 text-center text-slate-500">{{ __('ui.no_inactive_clinics') }}</td></tr>@endforelse</tbody></table></div></section>
</div><script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script><script>const actualRevenue=@json($monthlyRevenue??[]),forecastRevenue=@json($collectionForecast??[]);const labels=[...actualRevenue.map(x=>x.label),...forecastRevenue.map(x=>x.label)];const actual=[...actualRevenue.map(x=>Number(x.total)),...forecastRevenue.map(()=>null)];const expected=[...actualRevenue.map(()=>null),...forecastRevenue.map(x=>Number(x.expected))];const chartCanvas=document.getElementById('subscriptionFinancialChart');if(chartCanvas&&window.Chart){new Chart(chartCanvas,{data:{labels,datasets:[{type:'bar',label:@json(__('ui.actual_revenue')),data:actual,backgroundColor:'#14b8a6',borderRadius:6,maxBarThickness:32},{type:'line',label:@json(__('ui.expected_collection')),data:expected,borderColor:'#7c3aed',backgroundColor:'rgba(124,58,237,.14)',pointBackgroundColor:'#7c3aed',pointRadius:4,tension:.3,fill:true}]},options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{position:'bottom',labels:{usePointStyle:true}},tooltip:{callbacks:{label:(ctx)=>ctx.dataset.label+': '+Number(ctx.raw||0).toLocaleString()+' '+@json(__('ui.currency'))}}},scales:{y:{beginAtZero:true,ticks:{callback:(v)=>Number(v).toLocaleString()}},x:{grid:{display:false}}}}});}</script></div>
@endsection