@extends('layouts.superadmin')
@section('title', 'Dashboard')
@section('page-title', 'Super Admin Dashboard')

@section('content')
{{-- Stats --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
    @foreach([
        ['label'=>'Total Tenants', 'value'=>$stats['total_tenants'], 'color'=>'blue', 'icon'=>'🏢'],
        ['label'=>'Active',        'value'=>$stats['active_tenants'],'color'=>'green','icon'=>'✅'],
        ['label'=>'On Trial',      'value'=>$stats['trial_tenants'], 'color'=>'yellow','icon'=>'⏳'],
        ['label'=>'Suspended',     'value'=>$stats['suspended'],     'color'=>'red',  'icon'=>'🚫'],
    ] as $s)
    <div class="sa-card flex items-center gap-4">
        <span class="text-3xl">{{ $s['icon'] }}</span>
        <div>
            <p class="text-xs text-slate-500 font-medium">{{ $s['label'] }}</p>
            <p class="text-2xl font-black text-slate-800">{{ $s['value'] }}</p>
        </div>
    </div>
    @endforeach
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

    {{-- Recent Tenants --}}
    <div class="lg:col-span-2 sa-card p-0 overflow-hidden">
        <div class="px-5 py-3 border-b border-slate-200 flex items-center justify-between">
            <h2 class="text-sm font-bold text-slate-800">Recent Registrations</h2>
            <a href="{{ route('superadmin.tenants.index') }}" class="text-xs text-indigo-600 hover:underline">View all →</a>
        </div>
        <table class="w-full text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="sa-table-th">Business</th>
                    <th class="sa-table-th">Email</th>
                    <th class="sa-table-th">Plan</th>
                    <th class="sa-table-th">Status</th>
                    <th class="sa-table-th">Joined</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach($recentTenants as $tenant)
                <tr class="hover:bg-slate-50">
                    <td class="sa-table-td font-medium">
                        <a href="{{ route('superadmin.tenants.show', $tenant) }}" class="hover:text-indigo-600">
                            {{ $tenant->profile->business_name ?? $tenant->name }}
                        </a>
                    </td>
                    <td class="sa-table-td text-slate-500 text-xs">{{ $tenant->email }}</td>
                    <td class="sa-table-td"><span class="badge-gray capitalize">{{ $tenant->plan }}</span></td>
                    <td class="sa-table-td">
                        <span class="{{ $tenant->status === 'active' ? 'badge-green' : ($tenant->status === 'trial' ? 'badge-yellow' : 'badge-red') }}">
                            {{ ucfirst($tenant->status) }}
                        </span>
                    </td>
                    <td class="sa-table-td text-slate-400 text-xs">{{ $tenant->created_at->format('d M Y') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    {{-- Plans summary --}}
    <div class="sa-card">
        <h2 class="text-sm font-bold text-slate-800 mb-4 pb-2 border-b border-slate-200">Plans Overview</h2>
        <div class="space-y-3">
            @foreach($plans as $plan)
            <div class="flex items-center justify-between p-3 bg-slate-50 rounded-xl">
                <div>
                    <p class="text-sm font-semibold text-slate-800">{{ $plan->name }}</p>
                    <p class="text-xs text-slate-400">₹{{ number_format($plan->price_monthly, 0) }}/mo</p>
                </div>
                <div class="text-right">
                    <p class="text-xl font-black text-slate-800">{{ $plan->tenants_count }}</p>
                    <p class="text-xs text-slate-400">tenants</p>
                </div>
            </div>
            @endforeach
            <a href="{{ route('superadmin.plans.index') }}" class="block text-center text-sm text-indigo-600 hover:underline mt-2">Manage Plans →</a>
        </div>
    </div>
</div>
@endsection