@extends('layouts.app')

@section('title', 'SaaS Platform Analytics & Reports')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-xl font-bold text-slate-900 dark:text-white">Commercial SaaS Reports & Analytics</h1>
        <p class="text-xs text-slate-500">Financial metrics, MRR breakdown, ARR, tenant growth, and subscription trial conversion reports.</p>
    </div>

    <!-- Commercial Revenue Cards Grid (Requirements 57-61) -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 text-xs">
        <div class="p-5 rounded-3xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-2">
            <span class="text-slate-400 font-bold uppercase tracking-wider">Total Active Tenants</span>
            <div class="text-3xl font-extrabold text-slate-900 dark:text-white">{{ $tenantsCount }}</div>
            <p class="text-slate-500 text-[11px]">Growing tenant base</p>
        </div>

        <div class="p-5 rounded-3xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-2">
            <span class="text-slate-400 font-bold uppercase tracking-wider">Monthly Recurring Revenue</span>
            <div class="text-3xl font-extrabold text-emerald-600 dark:text-emerald-400">AED {{ number_format($mrr, 2) }}</div>
            <p class="text-slate-500 text-[11px]">Recurring monthly subscriptions</p>
        </div>

        <div class="p-5 rounded-3xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-2">
            <span class="text-slate-400 font-bold uppercase tracking-wider">Annualized Run Rate (ARR)</span>
            <div class="text-3xl font-extrabold text-sky-600 dark:text-sky-400">AED {{ number_format($arr, 2) }}</div>
            <p class="text-slate-500 text-[11px]">Pro-rated 12-month MRR</p>
        </div>

        <div class="p-5 rounded-3xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-2">
            <span class="text-slate-400 font-bold uppercase tracking-wider">Lifetime Collected</span>
            <div class="text-3xl font-extrabold text-purple-600 dark:text-purple-400">AED {{ number_format($totalCollected, 2) }}</div>
            <p class="text-slate-500 text-[11px]">Total payments processed</p>
        </div>
    </div>
</div>
@endsection