@extends('layouts.app')

@section('title', 'Platform & Tenant Resource Usage')

@section('content')
<div class="space-y-6">
    <div>
        <h1 class="text-xl font-bold text-slate-900 dark:text-white">Tenant Usage & Resource Quotas</h1>
        <p class="text-xs text-slate-500">Monitor active branches, user counts, storage, AI tokens, and WhatsApp message quotas.</p>
    </div>

    <!-- Tenant Resource Usage Cards (Requirement 35, 36) -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        @foreach($tenants as $tenant)
            <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4 text-xs">
                <div class="flex items-center justify-between border-b border-slate-100 dark:border-slate-700 pb-3">
                    <div>
                        <h3 class="font-extrabold text-slate-900 dark:text-white text-sm">{{ $tenant->company_name }}</h3>
                        <span class="text-[11px] text-slate-400 font-mono">Plan: {{ $tenant->subscription->plan->name ?? 'Professional' }}</span>
                    </div>
                    <a href="{{ route('platform.tenants.show', $tenant->id) }}" class="text-sky-600 font-bold hover:underline">Manage Wallet ➔</a>
                </div>

                <div class="space-y-3">
                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="font-semibold text-slate-600 dark:text-slate-300">Branches</span>
                            <span class="font-bold text-slate-900 dark:text-white">{{ count($tenant->branches) }} / {{ $tenant->subscription->plan->max_branches ?? 5 }}</span>
                        </div>
                        <div class="w-full bg-slate-100 dark:bg-slate-700 h-2 rounded-full overflow-hidden">
                            <div class="bg-sky-500 h-full" style="width: {{ min(100, (count($tenant->branches) / max(1, $tenant->subscription->plan->max_branches ?? 5)) * 100) }}%"></div>
                        </div>
                    </div>

                    <div>
                        <div class="flex justify-between mb-1">
                            <span class="font-semibold text-slate-600 dark:text-slate-300">ERP User Accounts</span>
                            <span class="font-bold text-slate-900 dark:text-white">{{ count($tenant->users) }} / {{ $tenant->subscription->plan->max_users ?? 25 }}</span>
                        </div>
                        <div class="w-full bg-slate-100 dark:bg-slate-700 h-2 rounded-full overflow-hidden">
                            <div class="bg-purple-500 h-full" style="width: {{ min(100, (count($tenant->users) / max(1, $tenant->subscription->plan->max_users ?? 25)) * 100) }}%"></div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection