<?php $__env->startSection('title', 'LynX Admin - Heat Map'); ?>
<?php $__env->startSection('page-title', '🗺️ Live Heat Map'); ?>

<?php $__env->startSection('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);"><?php echo e($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);"><?php echo e($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);"><?php echo e($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);"><?php echo e($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;"><?php echo e(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"><?php echo e($activeDrivers->count()); ?> online</span>
            </div>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $activeDrivers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $driver): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <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;"><?php echo e($driver->full_name); ?></strong>
                    </div>
                    <div class="flex-center" style="gap: 8px;">
                        <span style="font-size: 11px; color: var(--text-dim); font-family: monospace;">
                            <?php echo e(number_format($driver->latitude, 4)); ?>, <?php echo e(number_format($driver->longitude, 4)); ?>

                        </span>
                        <a href="https://www.google.com/maps?q=<?php echo e($driver->latitude); ?>,<?php echo e($driver->longitude); ?>" target="_blank" class="btn btn-outline btn-sm" style="padding: 4px 8px;">📍</a>
                    </div>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div style="text-align: center; padding: 32px;">
                    <p style="color: var(--text-muted);">No online drivers</p>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
        </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"><?php echo e($rideDemand->count()); ?> requests</span>
            </div>
            <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $rideDemand; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $ride): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                <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);">
                            <?php echo e(number_format($ride->pickup_lat, 4)); ?>, <?php echo e(number_format($ride->pickup_lng, 4)); ?>

                        </span>
                    </div>
                    <a href="https://www.google.com/maps?q=<?php echo e($ride->pickup_lat); ?>,<?php echo e($ride->pickup_lng); ?>" target="_blank" class="btn btn-outline btn-sm" style="padding: 4px 8px;">📍</a>
                </div>
            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                <div style="text-align: center; padding: 32px;">
                    <p style="color: var(--text-muted);">No active ride requests</p>
                </div>
            <?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>

            <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>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('admin.layouts.master', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /Users/macbook/Documents/Freebuff/lynx_admin/resources/views/admin/heat-map/index.blade.php ENDPATH**/ ?>