@extends('admin.layouts.master')

@section('title', 'LynX Admin - Heat Map')
@section('page-title', '🗺️ Live Heat Map')

@section('content')
    <div class="stats-grid">
        <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);">{{ $activeDrivers->count() }}</div>
                    <div class="label">Online Drivers</div>
                </div>
                <span class="icon">🚗</span>
            </div>
            <div style="margin-top: 8px;">
                <span class="glowing-dot active"></span>
                <span style="font-size: 11px; color: var(--text-muted); margin-left: 4px;">Live</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-1" style="border-left: 2px solid var(--warning);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--warning);">{{ $rideDemand->count() }}</div>
                    <div class="label">Active Ride Requests</div>
                </div>
                <span class="icon">📊</span>
            </div>
        </div>
        <div class="stat-card animate-in animate-in-delay-2" style="border-left: 2px solid var(--success);">
            <div class="stat-header">
                <div>
                    <div class="value" style="color: var(--success);">75%</div>
                    <div class="label">Coverage Score</div>
                </div>
                <span class="icon">📈</span>
            </div>
        </div>
    </div>

    <!-- Map Container -->
    <div class="glass-card animate-in" style="margin-bottom: 24px;">
        <div class="flex-between mb-16">
            <h3 style="font-size: 18px; font-weight: 600;">Real-Time Driver & Demand Location</h3>
            <div class="flex-center" style="gap: 16px;">
                <div class="flex-center" style="gap: 6px;">
                    <span class="glowing-dot active" style="width: 6px; height: 6px;"></span>
                    <span style="font-size: 12px; color: var(--text-muted);">{{ $activeDrivers->count() }} drivers</span>
                </div>
                <div class="flex-center" style="gap: 6px;">
                    <span style="width: 6px; height: 6px; border-radius: 50%; background: var(--warning); display: inline-block;"></span>
                    <span style="font-size: 12px; color: var(--text-muted);">{{ $rideDemand->count() }} requests</span>
                </div>
            </div>
        </div>
        <div style="background: var(--bg-surface); border-radius: 12px; height: 400px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); position: relative; overflow: hidden;">
            <!-- Animated pulse background -->
            <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(108,58,237,0.08) 0%, transparent 70%); animation: pulse 4s infinite;"></div>
            <div style="text-align: center; position: relative; z-index: 1;">
                <span style="font-size: 56px; display: block; margin-bottom: 12px;">🗺️</span>
                <p style="color: var(--text-muted); font-size: 15px; font-weight: 500;">Google Maps Integration</p>
                <p style="color: var(--text-dim); font-size: 13px; margin-top: 4px;">{{ config('services.google.maps_api_key') ? 'API Key: Configured ✅' : 'API Key: Not configured' }}</p>
                <div style="margin-top: 16px; display: flex; gap: 24px; justify-content: center;">
                    <div class="flex-center" style="gap: 6px;">
                        <span class="glowing-dot active"></span>
                        <span style="font-size: 12px; color: var(--text-muted);">Online Driver</span>
                    </div>
                    <div class="flex-center" style="gap: 6px;">
                        <span style="width: 8px; height: 8px; background: var(--warning); border-radius: 50%; display: inline-block;"></span>
                        <span style="font-size: 12px; color: var(--text-muted);">Ride Request</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="grid-2">
        <!-- Online Drivers List -->
        <div class="glass-card animate-in animate-in-delay-1">
            <div class="flex-between mb-16">
                <h3 style="font-size: 18px; font-weight: 600;">🚗 Online Drivers</h3>
                <span class="status-badge status-active">{{ $activeDrivers->count() }} online</span>
            </div>
            @forelse($activeDrivers as $driver)
                <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); transition: all 0.2s;">
                    <div class="flex-center" style="gap: 10px;">
                        <span class="glowing-dot active"></span>
                        <strong style="font-size: 14px;">{{ $driver->full_name }}</strong>
                    </div>
                    <div class="flex-center" style="gap: 8px;">
                        <span style="font-size: 11px; color: var(--text-dim); font-family: monospace;">
                            {{ number_format($driver->latitude, 4) }}, {{ number_format($driver->longitude, 4) }}
                        </span>
                        <a href="https://www.google.com/maps?q={{ $driver->latitude }},{{ $driver->longitude }}" target="_blank" class="btn btn-outline btn-sm" style="padding: 4px 8px;">📍</a>
                    </div>
                </div>
            @empty
                <div style="text-align: center; padding: 32px;">
                    <p style="color: var(--text-muted);">No online drivers</p>
                </div>
            @endforelse
        </div>

        <!-- Active Ride Demand -->
        <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 Ride Demand</h3>
                <span class="status-badge status-pending">{{ $rideDemand->count() }} requests</span>
            </div>
            @forelse($rideDemand as $ride)
                <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border);">
                    <div class="flex-center" style="gap: 10px;">
                        <span style="width: 8px; height: 8px; background: var(--warning); border-radius: 50%; display: inline-block;"></span>
                        <span style="font-size: 13px; font-family: monospace; color: var(--text-muted);">
                            {{ number_format($ride->pickup_lat, 4) }}, {{ number_format($ride->pickup_lng, 4) }}
                        </span>
                    </div>
                    <a href="https://www.google.com/maps?q={{ $ride->pickup_lat }},{{ $ride->pickup_lng }}" target="_blank" class="btn btn-outline btn-sm" style="padding: 4px 8px;">📍</a>
                </div>
            @empty
                <div style="text-align: center; padding: 32px;">
                    <p style="color: var(--text-muted);">No active ride requests</p>
                </div>
            @endforelse

            <div style="margin-top: 16px; padding: 12px; background: rgba(108,58,237,0.05); border-radius: 10px; border: 1px solid rgba(108,58,237,0.1);">
                <p style="font-size: 12px; color: var(--text-muted);">
                    💡 <strong style="color: var(--primary);">Tip:</strong> High demand areas are shown with clustered markers when Google Maps is integrated.
                </p>
            </div>
        </div>
    </div>
@endsection