@extends('layouts.platform')

@section('title', 'Platform Dashboard')
@section('header', 'Platform Dashboard')

@section('content')
    {{-- Stats Grid --}}
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-8">
        <div class="stat-card">
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-primary-50 text-primary-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5" />
                    </svg>
                </div>
                <div>
                    <p class="text-2xl font-display font-bold text-gray-900">{{ $stats['total_schools'] }}</p>
                    <p class="text-sm text-gray-500">Total Schools</p>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <p class="text-2xl font-display font-bold text-gray-900">{{ $stats['active_schools'] }}</p>
                    <p class="text-sm text-gray-500">Active Schools</p>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                    </svg>
                </div>
                <div>
                    <p class="text-2xl font-display font-bold text-gray-900">{{ $stats['total_users'] }}</p>
                    <p class="text-sm text-gray-500">Total Users</p>
                </div>
            </div>
        </div>

        <div class="stat-card">
            <div class="flex items-center gap-4">
                <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-600">
                    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div>
                    <p class="text-2xl font-display font-bold text-gray-900">&#8358;{{ number_format($stats['total_revenue'] / 100, 0) }}</p>
                    <p class="text-sm text-gray-500">Total Revenue</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Recent Schools --}}
    <div class="card">
        <div class="flex items-center justify-between border-b border-gray-100 px-6 py-4">
            <h2 class="text-lg font-display font-semibold text-gray-900">Recent Schools</h2>
            <a href="{{ route('platform.schools.index') }}" class="text-sm font-medium text-primary-600 hover:text-primary-500">View all</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-100 text-left">
                        <th class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">School</th>
                        <th class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                        <th class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Plan</th>
                        <th class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Location</th>
                        <th class="px-6 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500">Created</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($recentSchools as $school)
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4">
                                <a href="{{ route('platform.schools.show', $school) }}" class="flex items-center gap-3">
                                    <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-100 text-primary-700 text-sm font-bold">
                                        {{ $school->initials }}
                                    </div>
                                    <div>
                                        <p class="font-medium text-gray-900">{{ $school->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $school->email }}</p>
                                    </div>
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium
                                    {{ $school->status->value === 'active' ? 'bg-green-50 text-green-700' : '' }}
                                    {{ $school->status->value === 'trial' ? 'bg-blue-50 text-blue-700' : '' }}
                                    {{ $school->status->value === 'suspended' ? 'bg-red-50 text-red-700' : '' }}
                                    {{ $school->status->value === 'pending' ? 'bg-yellow-50 text-yellow-700' : '' }}">
                                    {{ $school->status->label() }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">{{ $school->plan?->name ?? 'No Plan' }}</td>
                            <td class="px-6 py-4 text-sm text-gray-600">{{ $school->city }}, {{ $school->state }}</td>
                            <td class="px-6 py-4 text-sm text-gray-500">{{ $school->created_at->diffForHumans() }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
                                No schools registered yet.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection