@extends('layouts.dashboard')

@section('title', 'System Usage')
@section('header', 'System Usage Analytics')

@section('sidebar')
@include('super-admin.partials.sidebar')
@endsection

@section('content')
<div class="mb-4">
    <a href="{{ route('super-admin.analytics.index') }}" class="text-blue-600 hover:text-blue-800 mb-4 inline-block">
        ← Back to Analytics
    </a>
</div>

<!-- System Overview -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Total Properties</h3>
        <p class="text-3xl font-bold text-gray-900">{{ number_format($usage['total_properties'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Total Tenants</h3>
        <p class="text-3xl font-bold text-blue-600">{{ number_format($usage['total_tenants'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Total Leases</h3>
        <p class="text-3xl font-bold text-green-600">{{ number_format($usage['total_leases'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Total Payments</h3>
        <p class="text-3xl font-bold text-purple-600">{{ number_format($usage['total_payments'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Active Users</h3>
        <p class="text-3xl font-bold text-indigo-600">{{ number_format($usage['active_users'], 0) }}</p>
    </div>
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-gray-500 text-sm font-medium mb-2">Companies with Subscriptions</h3>
        <p class="text-3xl font-bold text-yellow-600">{{ number_format($usage['companies_with_subscriptions'], 0) }}</p>
    </div>
</div>

<!-- Usage by Company -->
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="p-6 border-b border-gray-200">
        <h3 class="text-lg font-semibold">Usage by Company (Top 20)</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Company</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Properties</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Tenants</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Leases</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Payments</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Users</th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($usageByCompany as $company)
                <tr>
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $company->name }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $company->properties_count }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $company->tenants_count }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $company->leases_count }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $company->payments_count }}</td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $company->users_count }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-4 text-center text-sm text-gray-500">No usage data found.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection