@extends('layouts.admin')

@section('content')
<div class="header">
    <div>
        <h1 style="margin:0; font-weight:800; font-size:28px">Platform Insights</h1>
        <p style="color:#555; margin:5px 0 0">Real-time status of the METRO DROP ecosystem</p>
    </div>
</div>

<style>
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 40px; }
    .stat-card { background: var(--card); padding: 25px; border-radius: 20px; border: 1px solid #222; }
    .stat-value { font-size: 32px; font-weight: 800; color: var(--primary); margin: 5px 0; }
    .stat-label { color: #888; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }

    .content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; }
    table { width: 100%; border-collapse: collapse; text-align: left; }
    th { color: #555; font-size: 10px; text-transform: uppercase; padding-bottom: 20px; }
    td { padding: 15px 0; font-size: 14px; border-top: 1px solid #222; }
    .status { padding: 4px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; }
    .status-completed { background: rgba(0,255,0,0.1); color: #00ff00; }
    .status-ongoing { background: rgba(0,0,255,0.1); color: #4d4dff; }
</style>

<div class="stats-grid">
    <div class="stat-card">
        <div class="stat-label">Total Registered Users</div>
        <div class="stat-value">{{ number_format($stats['total_users']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Active Drivers Online</div>
        <div class="stat-value">{{ number_format($stats['total_drivers']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">Total Rides Booked</div>
        <div class="stat-value">{{ number_format($stats['total_rides']) }}</div>
    </div>
    <div class="stat-card">
        <div class="stat-label">System Revenue</div>
        <div class="stat-value">₦{{ number_format($stats['ecosystem_balance'], 2) }}</div>
    </div>
</div>

<div class="content-grid">
    <div class="card">
        <h3 style="margin-top:0; font-size:18px; margin-bottom:25px;">Monitor Recent Rides</h3>
        <table>
            <thead>
                <tr>
                    <th>Ride ID</th>
                    <th>Rider</th>
                    <th>Driver</th>
                    <th>Fare</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentRides as $ride)
                <tr>
                    <td style="font-family: monospace; color:#888">#{{ substr($ride->id, 0, 8) }}</td>
                    <td>{{ $ride->rider->name ?? 'User' }}</td>
                    <td>{{ $ride->driver->name ?? 'Assigning...' }}</td>
                    <td>₦{{ number_format($ride->fare, 2) }}</td>
                    <td><span class="status status-{{ $ride->status }}">{{ strtoupper($ride->status) }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="card">
        <h3 style="margin-top:0; font-size:18px; margin-bottom:25px;">New User Registrations</h3>
        <table>
            @foreach($recentUsers as $user)
            <tr>
                <td>
                    <div style="font-weight:600">{{ $user->name }}</div>
                    <div style="font-size:10px; color:#555">{{ strtoupper($user->user_type) }} • {{ $user->created_at->diffForHumans() }}</div>
                </td>
                <td style="text-align:right">
                    <span style="color:var(--primary); font-family:monospace; font-weight:bold; font-size:12px">ACTIVE</span>
                </td>
            </tr>
            @endforeach
        </table>
    </div>
</div>
@endsection