@extends('admin.layouts.app')
@section('title', 'Dashboard')

@section('content')
<h1 class="text-2xl font-bold text-gray-800 mb-6">Dashboard</h1>

{{-- Stats Cards --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded-xl shadow p-5">
        <div class="text-3xl mb-2">👥</div>
        <div class="text-3xl font-bold text-indigo-600">{{ $stats['total_students'] }}</div>
        <div class="text-sm text-gray-500 mt-1">Total Students</div>
    </div>
    <div class="bg-white rounded-xl shadow p-5">
        <div class="text-3xl mb-2">✅</div>
        <div class="text-3xl font-bold text-green-600">{{ $stats['active'] }}</div>
        <div class="text-sm text-gray-500 mt-1">Active</div>
    </div>
    <div class="bg-white rounded-xl shadow p-5">
        <div class="text-3xl mb-2">⏰</div>
        <div class="text-3xl font-bold text-red-500">{{ $stats['expired'] }}</div>
        <div class="text-sm text-gray-500 mt-1">Expired</div>
    </div>
    <div class="bg-white rounded-xl shadow p-5">
        <div class="text-3xl mb-2">📅</div>
        <div class="text-3xl font-bold text-blue-600">{{ $stats['today_checkins'] }}</div>
        <div class="text-sm text-gray-500 mt-1">Check-ins Today</div>
    </div>
</div>

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

    {{-- Expiring Soon --}}
    <div class="lg:col-span-2 bg-white rounded-xl shadow p-6">
        <h2 class="font-bold text-gray-700 mb-4">⚠️ Expiring Within 5 Days</h2>
        @forelse($expiringSoon as $student)
        <div class="flex items-center justify-between py-3 border-b last:border-0">
            <div>
                <div class="font-medium text-gray-800">{{ $student->name }}</div>
                <div class="text-xs text-gray-400">{{ $student->email }} · {{ ucfirst($student->tier) }}</div>
            </div>
            <div class="text-right">
                <div class="text-sm font-semibold text-orange-600">
                    {{ $student->daysUntilExpiry() }} day(s) left
                </div>
                <a href="{{ route('admin.students.show', $student) }}"
                   class="text-xs text-indigo-500 hover:underline">Manage →</a>
            </div>
        </div>
        @empty
            <p class="text-gray-400 text-sm">No subscriptions expiring in the next 5 days. 🎉</p>
        @endforelse
    </div>

    {{-- Tier Breakdown --}}
    <div class="bg-white rounded-xl shadow p-6">
        <h2 class="font-bold text-gray-700 mb-4">📊 By Tier</h2>
        @foreach($tierBreakdown as $t)
        <div class="flex justify-between items-center py-2 border-b last:border-0">
            <span class="capitalize text-sm font-medium text-gray-700">{{ $t->tier }}</span>
            <span class="bg-indigo-100 text-indigo-700 text-xs px-3 py-1 rounded-full font-bold">
                {{ $t->count }}
            </span>
        </div>
        @endforeach

        <div class="mt-4 pt-4 border-t">
            <div class="flex justify-between text-sm">
                <span class="text-gray-500">Pending</span>
                <span class="font-semibold text-yellow-600">{{ $stats['pending'] }}</span>
            </div>
            <div class="flex justify-between text-sm mt-1">
                <span class="text-gray-500">Cancelled</span>
                <span class="font-semibold text-gray-500">{{ $stats['cancelled'] }}</span>
            </div>
            <div class="flex justify-between text-sm mt-1">
                <span class="text-gray-500">Total Revenue</span>
                <span class="font-semibold text-green-600">₦{{ number_format($stats['total_revenue'], 2) }}</span>
            </div>
        </div>
    </div>
</div>

{{-- Sections --}}
<div class="bg-white rounded-xl shadow p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
        <h2 class="font-bold text-gray-700">🗂️ Sections</h2>
        <a href="{{ route('admin.sections.index') }}" class="text-xs text-indigo-500 hover:underline">Manage →</a>
    </div>
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
        @foreach($sections as $sec)
        <div class="bg-gray-50 rounded-lg p-3 text-center">
            <div class="font-semibold text-gray-800">{{ $sec->name }}</div>
            <div class="text-2xl font-bold text-indigo-600 mt-1">{{ $sec->students_count }}</div>
            <div class="text-xs text-gray-400">students</div>
        </div>
        @endforeach
    </div>
</div>

{{-- Recent Payments --}}
<div class="bg-white rounded-xl shadow p-6">
    <h2 class="font-bold text-gray-700 mb-4">💳 Recent Payments</h2>
    <table class="min-w-full text-sm">
        <thead class="text-xs text-gray-500 uppercase bg-gray-50">
            <tr>
                <th class="px-4 py-2 text-left">Student</th>
                <th class="px-4 py-2 text-left">Tier</th>
                <th class="px-4 py-2 text-left">Amount</th>
                <th class="px-4 py-2 text-left">Date</th>
                <th class="px-4 py-2 text-left">Reference</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($recentPayments as $pay)
            <tr>
                <td class="px-4 py-2 font-medium">{{ $pay->student->name }}</td>
                <td class="px-4 py-2">{{ $pay->tier->name ?? '—' }}</td>
                <td class="px-4 py-2 text-green-600 font-semibold">₦{{ number_format($pay->amount, 2) }}</td>
                <td class="px-4 py-2 text-gray-500">{{ $pay->paid_at?->format('M d, Y') }}</td>
                <td class="px-4 py-2 font-mono text-xs text-gray-400">{{ $pay->reference }}</td>
            </tr>
            @empty
            <tr><td colspan="5" class="px-4 py-6 text-center text-gray-400">No payments yet.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection