@extends('super_admin.layouts.master')

@section('title', 'Dashboard')
@section('page_title', 'Super Admin Dashboard')
@use('Illuminate\Support\Facades\Storage')
@section('content')
    
    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        
        <!-- Total Schools -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Schools</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ $stats['total_schools'] }}</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-school text-blue-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-green-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>+12%</span>
                <span class="text-gray-500 ml-2">from last month</span>
            </div>
        </div>
        
        <!-- Active Schools -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Active Schools</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ $stats['active_schools'] }}</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-gray-500">{{ $stats['suspended_schools'] }} suspended</span>
            </div>
        </div>
        
        <!-- Total Students -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-purple-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Students</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($stats['total_students']) }}</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-user-graduate text-purple-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-green-500 font-medium"><i class="fas fa-arrow-up mr-1"></i>+5%</span>
                <span class="text-gray-500 ml-2">this month</span>
            </div>
        </div>
        
        <!-- Total Teachers -->
        <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-orange-500">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm font-medium text-gray-600">Total Teachers</p>
                    <p class="text-3xl font-bold text-gray-800 mt-1">{{ number_format($stats['total_teachers']) }}</p>
                </div>
                <div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chalkboard-teacher text-orange-600 text-xl"></i>
                </div>
            </div>
            <div class="mt-4 flex items-center text-sm">
                <span class="text-gray-500">Across all schools</span>
            </div>
        </div>
    </div>
    
    <!-- Charts & Recent Schools -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Growth Chart -->
        <div class="lg:col-span-2 bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">School Growth (Last 12 Months)</h3>
            <canvas id="growthChart" height="100"></canvas>
        </div>
        
        <!-- Plan Distribution -->
        <div class="bg-white rounded-xl shadow-sm p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">Plan Distribution</h3>
            <canvas id="planChart"></canvas>
            <div class="mt-4 space-y-2">
                @foreach($plan_distribution as $plan => $count)
                    <div class="flex items-center justify-between">
                        <span class="flex items-center">
                            <span class="w-3 h-3 rounded-full mr-2 
                                {{ $plan === 'basic' ? 'bg-gray-400' : ($plan === 'standard' ? 'bg-blue-400' : 'bg-purple-400') }}">
                            </span>
                            <span class="text-sm capitalize">{{ $plan }}</span>
                        </span>
                        <span class="text-sm font-medium">{{ $count }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    
    <!-- Recent Schools Table -->
    <div class="mt-6 bg-white rounded-xl shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
            <h3 class="text-lg font-semibold text-gray-800">Recently Added Schools</h3>
            <a href="{{ route('super_admin.schools.index') }}" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
                View All <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">School</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Plan</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Expiry</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Added</th>
                        <th class="px-6 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wider">Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @forelse($recent_schools as $school)
                        <tr class="hover:bg-gray-50 transition-colors">
                           <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3 overflow-hidden flex-shrink-0">
                                    @if($school->logo && Storage::disk('public')->exists($school->logo))
                                        <img src="{{ asset('storage/' . $school->logo) }}" 
                                            alt="{{ $school->name }}" 
                                            class="w-full h-full object-cover rounded-lg">
                                    @else
                                        <span class="text-blue-600 font-bold text-lg">{{ substr($school->name, 0, 1) }}</span>
                                    @endif
                                </div>
                                <div>
                                    <p class="font-medium text-gray-800">{{ $school->name }}</p>
                                    <p class="text-sm text-gray-500">{{ $school->slug }}.schoolerp.com</p>
                                </div>
                            </div>
                        </td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-xs font-medium 
                                    {{ $school->plan === 'basic' ? 'bg-gray-100 text-gray-700' : ($school->plan === 'standard' ? 'bg-blue-100 text-blue-700' : 'bg-purple-100 text-purple-700') }}">
                                    {{ ucfirst($school->plan) }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="px-3 py-1 rounded-full text-xs font-medium 
                                    {{ $school->status === 'active' ? 'bg-green-100 text-green-700' : ($school->status === 'suspended' ? 'bg-red-100 text-red-700' : 'bg-gray-100 text-gray-700') }}">
                                    {{ ucfirst($school->status) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">
                                {{ $school->subscription_end->format('M d, Y') }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500">
                                {{ $school->created_at->diffForHumans() }}
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('super_admin.schools.show', $school) }}" class="text-blue-600 hover:text-blue-800 font-medium text-sm">
                                    Manage
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-8 text-center text-gray-500">
                                No schools found. <a href="{{ route('super_admin.schools.create') }}" class="text-blue-600 hover:underline">Create your first school</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
@endsection

@push('scripts')
<script>
    // Growth Chart
    const growthCtx = document.getElementById('growthChart').getContext('2d');
    new Chart(growthCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [{
                label: 'New Schools',
                data: [2, 3, 5, 4, 6, 8, 7, 9, 11, 10, 12, 15],
                borderColor: '#2563eb',
                backgroundColor: 'rgba(37, 99, 235, 0.1)',
                tension: 0.4,
                fill: true
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true, ticks: { stepSize: 5 } }
            }
        }
    });
    
    // Plan Distribution Chart
    const planCtx = document.getElementById('planChart').getContext('2d');
    new Chart(planCtx, {
        type: 'doughnut',
        data: {
            labels: ['Basic', 'Standard', 'Premium'],
            datasets: [{
                data: [{{ $plan_distribution['basic'] ?? 0 }}, {{ $plan_distribution['standard'] ?? 0 }}, {{ $plan_distribution['premium'] ?? 0 }}],
                backgroundColor: ['#9ca3af', '#3b82f6', '#a855f7'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            cutout: '70%'
        }
    });
</script>
@endpush