@extends('layouts.admin')

@section('content')
    <h1 class="text-3xl font-extrabold text-gray-800 mb-6">Administrator Overview</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-indigo-500 transform hover:scale-[1.02] transition duration-300">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4">
                    <i class="fas fa-futbol text-xl"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Matches</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $matchCount ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-green-500 transform hover:scale-[1.02] transition duration-300">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
                    <i class="fas fa-ticket-alt text-xl"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">Tickets Sold</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $ticketCount ?? 0 }}</p>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-yellow-500 transform hover:scale-[1.02] transition duration-300">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4">
                    <i class="fas fa-dollar-sign text-xl"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">Total Revenue</p>                    
                    <p class="text-2xl font-bold text-gray-900">                     
                    {{ number_format($totalRevenue ?? 0, 2) }}</p>
                    <span class="text-sm font-bold text-gray-500 -mt-2">SSP</span>
                </div>
            </div>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg border-l-4 border-red-500 transform hover:scale-[1.02] transition duration-300">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-red-100 text-red-600 mr-4">
                    <i class="fas fa-exchange-alt text-xl"></i>
                </div>
                <div>
                    <p class="text-sm font-medium text-gray-500">Transactions</p>
                    <p class="text-2xl font-bold text-gray-900">{{ $txnCount ?? 0 }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-lg">
            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center justify-between">
                Upcoming Matches
                <a href="{{ route('admin.matches.index') }}" class="text-sm text-indigo-500 hover:text-indigo-700">View All <i class="fas fa-arrow-right ml-1"></i></a>
            </h2>
            <ul class="divide-y divide-gray-200">
                @forelse ($matches as $match)
                    <li class="py-3 flex justify-between items-center hover:bg-gray-50 transition duration-150 px-2 -mx-2 rounded-lg">
                        <div class="flex items-center space-x-2">
                            <img src="{{ asset($match->home_team_flag) }}" alt="Home Flag" class="h-6 w-6 rounded-full object-cover border" />
                            <span class="font-semibold">{{ $match->home_team }}</span>
                            <span class="mx-1">vs</span>
                            <img src="{{ asset($match->away_team_flag) }}" alt="Away Flag" class="h-6 w-6 rounded-full object-cover border" />
                            <span class="font-semibold">{{ $match->away_team }}</span>
                            <span class="text-xs text-gray-400">(Match ID: {{ $match->match_id }})</span>
                        </div>
                        <span class="px-3 py-1 text-sm font-semibold rounded-full bg-indigo-100 text-indigo-800">Active</span>
                    </li>
                @empty
                    <li class="py-3 text-gray-500">No matches available</li>
                @endforelse
            </ul>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg">
            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center justify-between">
                Recent Transactions
                <a href="{{ route('admin.transactions.index') }}" class="text-sm text-indigo-500 hover:text-indigo-700">View All <i class="fas fa-arrow-right ml-1"></i></a>
            </h2>
            <ul class="space-y-3">
                @forelse ($recentTransactions as $txn)
                    <li class="flex items-start justify-between">
                        <div>
                            <p class="font-semibold text-gray-800">
                                Ticket #: {{ $txn->ticket->ticket_number ?? '-' }}
                                <span class="ml-2 text-xs font-medium text-gray-500">{{ $txn->payment_method }}</span>
                            </p>
                            <p class="text-xs text-gray-600 mt-1">Amount: SSP {{ number_format($txn->amount, 2) }}</p>
                            <p class="text-xs text-gray-500 mt-1">{{ $txn->created_at->format('M d, Y H:i') }}</p>
                        </div>
                    </li>
                @empty
                    <li class="py-3 text-gray-500">No transactions found</li>
                @endforelse
            </ul>
        </div>

        <div class="bg-white p-6 rounded-xl shadow-lg">
            <h2 class="text-xl font-semibold text-gray-800 mb-4 flex items-center justify-between">
                Recent Audit Logs
                <a href="{{ route('admin.audit-logs.index') }}" class="text-sm text-indigo-500 hover:text-indigo-700">View All <i class="fas fa-arrow-right ml-1"></i></a>
            </h2>
            <ul class="space-y-3">
                {{-- Example loop, replace with real data --}}
                @for ($i = 0; $i < 4; $i++)
                    <li class="flex items-start">
                        <div class="flex-shrink-0 mr-3">
                            <i class="fas fa-user-shield text-lg text-gray-400"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium text-gray-700">
                                **User ID:** Staff-{{ $i + 1 }} performed a **ticket_validation** action.
                            </p>
                            <p class="text-xs text-gray-500">
                                <i class="fas fa-clock mr-1"></i> {{ now()->subMinutes($i * 10)->diffForHumans() }}
                            </p>
                        </div>
                    </li>
                @endfor
            </ul>
        </div>
    </div>
@endsection