@extends('admin.layouts.master')

@section('title', 'LynX Admin - Dashboard')
@section('page-title', 'Dashboard')

@section('content')
    <!-- Stats Grid -->
    <div class="stats-grid">
        <div class="stat-card animate-in">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--primary);">{{ number_format($stats['total_users']) }}</div>
                    <div class="label">Total Users</div>
                </div>
                <span class="icon">👥</span>
            </div>
            <div style="margin-top: 12px; font-size: 12px; color: var(--success); display: flex; align-items: center; gap: 4px;">
                <span>↑</span> 12% this month
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-1">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--secondary);">{{ number_format($stats['total_drivers']) }}</div>
                    <div class="label">Total Drivers</div>
                </div>
                <span class="icon">🚗</span>
            </div>
            @if($stats['pending_drivers'] > 0)
                <div style="margin-top: 12px; font-size: 12px; color: var(--warning); display: flex; align-items: center; gap: 4px;">
                    <span class="glowing-dot warning"></span> {{ $stats['pending_drivers'] }} pending verification
                </div>
            @endif
        </div>
        <div class="stat-card animate-in animate-in-delay-2">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--secondary);">{{ $stats['active_rides'] }}</div>
                    <div class="label">Active Rides</div>
                </div>
                <span class="icon">🛵</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-3">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--success);">{{ $stats['completed_rides_today'] }}</div>
                    <div class="label">Completed Today</div>
                </div>
                <span class="icon">✅</span>
            </div>
        </div>
        <div class="stat-card animate-in" style="border-left: 2px solid var(--primary);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--primary);">${{ number_format($stats['total_revenue'], 0) }}</div>
                    <div class="label">Total Revenue</div>
                </div>
                <span class="icon">💰</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-1" style="border-left: 2px solid var(--danger);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--danger);">{{ $stats['active_sos'] }}</div>
                    <div class="label">Active SOS Alerts</div>
                </div>
                <span class="icon">🆘</span>
            </div>
            @if($stats['active_sos'] > 0)
                <a href="{{ route('admin.gods-eye') }}" style="display: inline-block; margin-top: 8px; color: var(--danger); font-size: 12px; font-weight: 500;">
                    View Alerts →
                </a>
            @endif
        </div>
        <div class="stat-card animate-in animate-in-delay-2" style="border-left: 2px solid var(--warning);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--warning);">{{ $stats['active_deviations'] }}</div>
                    <div class="label">Route Deviations</div>
                </div>
                <span class="icon">⚠️</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-3">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--warning);">{{ $stats['pending_drivers'] }}</div>
                    <div class="label">Pending Verification</div>
                </div>
                <span class="icon">📋</span>
            </div>
        </div>
    </div>

    <div class="grid-2">
        <!-- Recent Rides -->
        <div class="glass-card animate-in">
            <div class="flex-between mb-16">
                <h3 style="font-size: 18px; font-weight: 600;">Recent Rides</h3>
                <span style="font-size: 12px; color: var(--text-muted);">Live</span>
            </div>
            <div class="table-container" style="padding: 0; border: none; background: transparent;">
                <table>
                    <thead>
                        <tr><th>ID</th><th>User</th><th>Type</th><th>Status</th><th>Fare</th><th>Time</th></tr>
                    </thead>
                    <tbody>
                        @forelse($recentRides as $ride)
                        <tr>
                            <td style="font-weight: 600; color: var(--primary);">#{{ substr($ride->id, 0, 8) }}</td>
                            <td>{{ $ride->user?->full_name ?? 'N/A' }}</td>
                            <td>{{ $ride->ride_type }}</td>
                            <td>
                                @php
                                    $sClass = match($ride->status) {
                                        'completed' => 'status-active', 'requested', 'accepted', 'started' => 'status-info',
                                        'cancelled' => 'status-danger', default => 'status-pending'
                                    };
                                @endphp
                                <span class="status-badge {{ $sClass }}">{{ ucfirst($ride->status) }}</span>
                            </td>
                            <td style="font-weight: 600;">${{ number_format($ride->fare, 2) }}</td>
                            <td style="font-size: 12px; color: var(--text-muted);">{{ $ride->created_at->diffForHumans() }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="6" style="text-align: center; padding: 32px; color: var(--text-dim);">No rides yet</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Active Alerts -->
        <div class="glass-card animate-in animate-in-delay-2">
            <div class="flex-between mb-16">
                <h3 style="font-size: 18px; font-weight: 600;">🚨 Active Alerts</h3>
                <span class="glowing-dot danger" style="width: 6px; height: 6px;"></span>
            </div>
            @forelse($activeAlerts as $alert)
                <div style="padding: 16px; background: rgba(255,59,48,0.05); border-radius: 12px; margin-bottom: 12px; border: 1px solid rgba(255,59,48,0.15);">
                    <div class="flex-between">
                        <div>
                            <strong style="color: var(--danger);">{{ ucfirst($alert->type) }} Alert</strong>
                            <span class="status-badge status-danger" style="margin-left: 8px;">ACTIVE</span>
                        </div>
                        <span style="font-size: 12px; color: var(--text-muted);">{{ $alert->created_at->diffForHumans() }}</span>
                    </div>
                    <div style="margin-top: 8px; font-size: 13px; color: var(--text-muted);">
                        User: {{ $alert->user?->full_name ?? 'Unknown' }}
                        @if($alert->ride) • Ride: #{{ substr($alert->ride_id, 0, 8) }} @endif
                    </div>
                    <div style="margin-top: 12px; display: flex; gap: 8px;">
                        <form action="{{ route('admin.gods-eye.resolve', $alert->id) }}" method="POST" style="display: inline;">
                            @csrf
                            <button type="submit" class="btn btn-success btn-sm">✅ Resolve</button>
                        </form>
                        <a href="https://www.google.com/maps?q={{ $alert->latitude }},{{ $alert->longitude }}" target="_blank" class="btn btn-outline btn-sm">📍 View Location</a>
                    </div>
                </div>
            @empty
                <div style="text-align: center; padding: 32px;">
                    <div style="font-size: 36px; margin-bottom: 12px;">✅</div>
                    <p style="color: var(--text-muted);">No active alerts. All clear!</p>
                </div>
            @endforelse

            <div style="margin-top: 16px;">
                <a href="{{ route('admin.gods-eye') }}" class="btn btn-primary">Open God's Eye Dashboard →</a>
            </div>
        </div>
    </div>
@endsection