@extends('layouts.admin')

@section('title', 'System Overview')
@section('header_title', 'System Intelligence Dashboard')

@section('content')
    <div class="stats-grid">
        <div class="stat-item stat-blue">
            <div class="stat-icon"><i class="fas fa-users"></i></div>
            <div class="stat-content">
                <div class="label">Total System Users</div>
                <div class="value">{{ number_format($stats['total_users']) }}</div>
            </div>
        </div>
        <div class="stat-item stat-green">
            <div class="stat-icon"><i class="fas fa-building"></i></div>
            <div class="stat-content">
                <div class="label">Approved Venues</div>
                <div class="value">{{ number_format($stats['total_clubs']) }}</div>
            </div>
        </div>
        <div class="stat-item stat-purple">
            <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
            <div class="stat-content">
                <div class="label">Site-Wide Bookings</div>
                <div class="value">{{ number_format($stats['total_bookings']) }}</div>
            </div>
        </div>
        <div class="stat-item stat-orange">
            <div class="stat-icon"><i class="fas fa-wallet"></i></div>
            <div class="stat-content">
                <div class="label">Total Platform Revenue</div>
                <div class="value">Rs. {{ number_format($stats['total_revenue']) }}</div>
            </div>
        </div>
    </div>

    <div class="data-card">
        <div class="card-header">
            <h2>Venue Audit Required</h2>
            <a href="{{ route('admin.clubs.index') }}" class="btn btn-sm btn-outline">Audit Inventory</a>
        </div>
        <div class="table-wrap">
            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Establishment</th>
                        <th>Ownership Identity</th>
                        <th>Sport Type</th>
                        <th>System Audit</th>
                        <th>Received On</th>
                        <th style="text-align: right;">Operations</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pendingClubs as $club)
                        <tr>
                            <td>
                                <div style="font-weight: 700; color: #fff;">{{ $club->name }}</div>
                                <div style="font-size: 0.75rem; color: var(--text-muted);">{{ Str::limit($club->address, 40) }}</div>
                            </td>
                            <td>{{ $club->owner->name }}</td>
                            <td><span class="status-pill" style="background: #f1f5f9; color: #475569;">{{ $club->sport->name ?? 'Mixed' }}</span></td>
                            <td><span class="status-pill pill-warning">Awaiting Audit</span></td>
                            <td>{{ $club->created_at->format('M d, H:i') }}</td>
                            <td style="text-align: right;">
                                <form action="{{ route('admin.clubs.toggle', $club) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn btn-sm btn-primary">Audit & Approve</button>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" style="padding: 5rem; text-align: center; color: var(--text-muted);">
                                <i class="fas fa-inbox fa-3x" style="opacity: 0.2; margin-bottom: 1rem; display: block;"></i>
                                All venue registration requests have been audited and cleared.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
        <div class="data-card">
            <div class="card-header">
                <h2>User Growth Timeline</h2>
            </div>
            <div style="padding: 2rem;">
                <canvas id="userGrowthChart" height="200"></canvas>
            </div>
        </div>
        <div class="data-card">
            <div class="card-header">
                <h2>Recent Platform Activity</h2>
            </div>
            <div class="table-wrap">
                <table class="admin-table">
                    <thead>
                        <tr>
                            <th>User Profile</th>
                            <th>Role</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentUsers as $user)
                            <tr>
                                <td>
                                    <div style="display: flex; gap: 0.75rem; align-items: center;">
                                        <div style="width: 32px; height: 32px; background: #f1f5f9; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--secondary); font-size: 0.75rem;">
                                            {{ substr($user->name, 0, 1) }}
                                        </div>
                                        <div>
                                            <div style="font-weight: 600; font-size: 0.85rem;">{{ $user->name }}</div>
                                            <div style="font-size: 0.7rem; color: var(--text-muted);">{{ $user->email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td>{{ ucfirst($user->role) }}</td>
                                <td><span class="status-pill pill-success">Live</span></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script>
        const ctx = document.getElementById('userGrowthChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'],
                datasets: [{
                    label: 'System Access Logins',
                    data: [12, 19, 30, 45, 60],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                plugins: { legend: { display: false } },
                scales: { y: { beginAtZero: true } }
            }
        });
    </script>
@endsection