<?php if (isset($component)) { $__componentOriginal951024bfcf58033c82ac11d797616473 = $component; } ?>
<?php if (isset($attributes)) { $__attributesOriginal951024bfcf58033c82ac11d797616473 = $attributes; } ?>
<?php $component = App\View\Components\UserLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
<?php $component->withName('user-layout'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
<?php $attributes = $attributes->except(\App\View\Components\UserLayout::ignoredParameterNames()); ?>
<?php endif; ?>
<?php $component->withAttributes([]); ?>
     <?php $__env->slot('header', null, []); ?> 
        Dashboard
     <?php $__env->endSlot(); ?>

    <div class="max-w-7xl mx-auto">
        <!-- Enhanced Welcome Section -->
        <div class="bg-gradient-to-br from-green-600 via-green-500 to-green-600 rounded-2xl p-6 mb-6 text-white relative overflow-hidden">
            <!-- Background Pattern -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 right-0 w-48 h-48 bg-green-300 rounded-full -translate-y-24 translate-x-24 opacity-20"></div>
                <div class="absolute bottom-0 left-0 w-24 h-24 bg-green-300 rounded-full translate-y-12 -translate-x-12 opacity-20"></div>
            </div>
            
            <div class="relative z-10">
                <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between">
                    <div class="mb-4 lg:mb-0 lg:flex-1">
                        <h1 class="text-xl font-semibold mb-1 text-white">Welcome back, <?php echo e(auth()->user()->name); ?></h1>
                        <p class="text-white text-sm opacity-90">Track your investments, manage your portfolio, and explore opportunities.</p>
                    </div>
                    
                    <!-- Enhanced Wallet Card -->
                    <div class="bg-green-700 bg-opacity-80 backdrop-blur-xl rounded-xl p-4 border border-green-400 border-opacity-50 shadow-xl lg:w-80">
                        <div class="flex items-center justify-between mb-3">
                            <div>
                                <p class="text-xs text-gray-300 mb-1">Available Balance</p>
                                <p class="text-xl font-light">$<?php echo e(number_format(auth()->user()->wallet->balance ?? 0, 2)); ?></p>
                            </div>
                            <div class="w-10 h-10 bg-green-400 bg-opacity-50 rounded-lg flex items-center justify-center">
                                <i data-lucide="wallet" class="w-5 h-5"></i>
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <a href="<?php echo e(route('wallet.deposit')); ?>" class="flex-1 bg-green-600 hover:bg-green-700 text-white text-xs font-medium py-1.5 px-3 rounded-md transition-all duration-200">
                                <i data-lucide="plus" class="w-3 h-3 inline mr-1"></i>
                                Deposit
                            </a>
                            <a href="<?php echo e(route('wallet.withdraw')); ?>" class="flex-1 bg-green-600 hover:bg-green-700 text-white text-xs font-medium py-1.5 px-3 rounded-md transition-all duration-200">
                                <i data-lucide="minus" class="w-3 h-3 inline mr-1"></i>
                                Withdraw
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Enhanced Portfolio Overview Cards -->
        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
            <!-- Total Portfolio Value -->
            <div class="bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 group">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-medium text-gray-500 mb-1">Portfolio Value</p>
                        <p class="text-lg font-light text-green-900 mb-1">$<?php echo e(number_format($totalPortfolioValue ?? 0, 0)); ?></p>
                        <p class="text-xs <?php echo e($monthlyPerformance['is_positive'] ?? false ? 'text-green-600' : 'text-red-600'); ?>">
                            <?php echo e($monthlyPerformance['is_positive'] ?? false ? '+' : ''); ?><?php echo e(number_format($monthlyPerformance['percentage_change'] ?? 0, 1)); ?>% this month
                        </p>
                    </div>
                    <div class="flex flex-col items-end space-y-1">
                        <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="trending-up" class="w-5 h-5 text-green-500"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Investment Holdings -->
            <div class="bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 group">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-medium text-gray-500 mb-1">Investments</p>
                        <p class="text-lg font-light text-green-900 mb-1">$<?php echo e(number_format($totalInvestmentValue ?? 0, 0)); ?></p>
                        <p class="text-xs text-blue-600"><?php echo e($investmentHoldings->count() ?? 0); ?> active investments</p>
                    </div>
                    <div class="flex flex-col items-end space-y-1">
                        <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="pie-chart" class="w-5 h-5 text-blue-500"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Stock Holdings -->
            <div class="bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 group">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-medium text-gray-500 mb-1">Stock Holdings</p>
                        <p class="text-lg font-light text-green-900 mb-1">$<?php echo e(number_format($totalStockValue ?? 0, 0)); ?></p>
                        <p class="text-xs text-purple-600"><?php echo e($stockHoldings->count() ?? 0); ?> stock positions</p>
                    </div>
                    <div class="flex flex-col items-end space-y-1">
                        <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="bar-chart-3" class="w-5 h-5 text-purple-500"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total Orders -->
            <div class="bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 group">
                <div class="flex items-center justify-between">
                    <div class="flex-1">
                        <p class="text-xs font-medium text-gray-500 mb-1">Tesla Vehicles</p>
                        <p class="text-lg font-medium text-green-900 mb-1"><?php echo e($totalPurchases->count() ?? 0); ?></p>
                        <p class="text-xs text-red-600">Electric fleet</p>
                    </div>
                    <div class="flex flex-col items-end space-y-1">
                        <div class="w-10 h-10 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                            <i data-lucide="car" class="w-5 h-5 text-red-500"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Enhanced Quick Actions Grid -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
            <!-- Browse Cars -->
            <a href="<?php echo e(route('cars.browse')); ?>" class="group bg-white rounded-xl p-4 shadow-sm border border-gray-100 hover:shadow-lg transition-all duration-300 hover:scale-105 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-blue-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <div class="w-10 h-10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                        <i data-lucide="car" class="w-5 h-5 text-blue-500"></i>
                    </div>
                    <h3 class="font-medium text-green-900 text-sm mb-1">Browse Cars</h3>
                    <p class="text-xs text-gray-500 mb-2">Explore our inventory</p>
                    <div class="flex items-center text-green-600 text-xs font-medium">
                        <span>View Inventory</span>
                        <i data-lucide="arrow-right" class="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform duration-200"></i>
                    </div>
                </div>
            </a>

            <!-- Investments -->
            <a href="<?php echo e(route('investments.index')); ?>" class="group bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 hover:scale-105 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-green-50 to-green-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <div class="w-10 h-10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                        <i data-lucide="trending-up" class="w-5 h-5 text-green-500"></i>
                    </div>
                    <h3 class="font-medium text-green-900 text-sm mb-1">Investments</h3>
                    <p class="text-xs text-gray-500 mb-2">Grow your wealth</p>
                    <div class="flex items-center text-green-600 text-xs font-medium">
                        <span>Start Investing</span>
                        <i data-lucide="arrow-right" class="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform duration-200"></i>
                    </div>
                </div>
            </a>

            <!-- Stocks -->
            <a href="<?php echo e(route('stocks.index')); ?>" class="group bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 hover:scale-105 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-purple-50 to-purple-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <div class="w-10 h-10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                        <i data-lucide="bar-chart-3" class="w-5 h-5 text-purple-500"></i>
                    </div>
                    <h3 class="font-medium text-green-900 text-sm mb-1">Stocks</h3>
                    <p class="text-xs text-gray-500 mb-2">Trade individual stocks</p>
                    <div class="flex items-center text-green-600 text-xs font-medium">
                        <span>Trade Stocks</span>
                        <i data-lucide="arrow-right" class="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform duration-200"></i>
                    </div>
                </div>
            </a>

            <!-- Portfolio -->
            <a href="<?php echo e(route('portfolio.index')); ?>" class="group bg-green-50 rounded-xl p-4 shadow-sm border border-green-100 hover:shadow-lg transition-all duration-300 hover:scale-105 relative overflow-hidden">
                <div class="absolute inset-0 bg-gradient-to-br from-orange-50 to-orange-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                <div class="relative z-10">
                    <div class="w-10 h-10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                        <i data-lucide="pie-chart" class="w-5 h-5 text-orange-500"></i>
                    </div>
                    <h3 class="font-medium text-green-900 text-sm mb-1">Portfolio</h3>
                    <p class="text-xs text-gray-500 mb-2">View your holdings</p>
                    <div class="flex items-center text-orange-600 text-xs font-medium">
                        <span>View Portfolio</span>
                        <i data-lucide="arrow-right" class="w-3 h-3 ml-1 group-hover:translate-x-1 transition-transform duration-200"></i>
                    </div>
                </div>
            </a>
        </div>

        <!-- Enhanced Activity Section -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
            <!-- Recent Orders -->
            <div class="bg-green-50 rounded-xl p-5 shadow-sm border border-green-100 lg:col-span-2">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-light text-green-900 mb-1">Recent Orders</h3>
                        <p class="text-xs text-gray-500">Your latest Tesla purchases</p>
                    </div>
                    <a href="<?php echo e(route('dashboard.history')); ?>" class="text-xs text-green-700 hover:text-green-600 transition-colors duration-200 font-medium">
                        View All
                        <i data-lucide="arrow-right" class="w-3 h-3 inline ml-1"></i>
                    </a>
                </div>
                
                <?php if($recentPurchases->count() > 0): ?>
                    <div class="space-y-3">
                        <?php $__currentLoopData = $recentPurchases->take(3); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $purchase): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="flex items-center space-x-3 p-3 bg-green-100 rounded-lg hover:bg-green-200 transition-colors duration-200 group">
                            <div class="w-10 h-10 bg-gray-200 rounded-lg overflow-hidden flex-shrink-0">
                                <?php if($purchase->car->first_image): ?>
                                    <img src="<?php echo e(strpos($purchase->car->first_image, 'http') === 0 ? $purchase->car->first_image : asset('storage/' . $purchase->car->first_image)); ?>" 
                                         alt="<?php echo e($purchase->car->title); ?>" 
                                         class="w-full h-full object-cover">
                                <?php else: ?>
                                    <div class="w-full h-full bg-green-300 flex items-center justify-center">
                                        <i data-lucide="car" class="w-5 h-5 text-green-600"></i>
                                    </div>
                                <?php endif; ?>
                            </div>
                            
                            <div class="flex-1 min-w-0">
                                <h4 class="font-medium text-green-900 text-sm truncate"><?php echo e($purchase->car->title); ?></h4>
                                <p class="text-xs text-gray-600"><?php echo e($purchase->car->year); ?> <?php echo e($purchase->car->make); ?> <?php echo e($purchase->car->model); ?></p>
                                <p class="text-xs text-gray-500"><?php echo e($purchase->purchased_at->format('M d, Y')); ?></p>
                            </div>
                            
                            <div class="text-right">
                                <p class="font-medium text-green-900 text-sm"><?php echo e($purchase->formatted_amount); ?></p>
                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium <?php echo e($purchase->status_badge); ?>">
                                    <?php echo e(ucfirst($purchase->status)); ?>

                                </span>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                <?php else: ?>
                    <div class="text-center py-6">
                        <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i data-lucide="car" class="w-6 h-6 text-green-600"></i>
                        </div>
                        <h3 class="text-base font-light text-green-900 mb-1">No orders yet</h3>
                        <p class="text-gray-600 text-xs mb-3">Start browsing our collection of electric vehicles.</p>
                        <a href="<?php echo e(route('cars.browse')); ?>" class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-xs font-medium rounded-lg hover:bg-green-700 transition-colors duration-200">
                            <i data-lucide="car" class="w-3 h-3 mr-1"></i>
                            Browse Inventory
                        </a>
                    </div>
                <?php endif; ?>
            </div>

            <!-- Market Overview -->
            <div class="bg-green-50 rounded-xl p-5 shadow-sm border border-green-100">
                <div class="flex items-center justify-between mb-4">
                    <div>
                        <h3 class="text-lg font-light text-green-900 mb-1">Market Overview</h3>
                        <p class="text-xs text-gray-500">Live market data</p>
                    </div>
                    <a href="<?php echo e(route('stocks.index')); ?>" class="text-xs text-green-700 hover:text-green-600 transition-colors duration-200 font-medium">
                        View All
                        <i data-lucide="arrow-right" class="w-3 h-3 inline ml-1"></i>
                    </a>
                </div>
                
                <div class="space-y-3">
                    <?php if(isset($marketOverview['gainers']) && $marketOverview['gainers']->count() > 0): ?>
                        <?php $__currentLoopData = $marketOverview['gainers']; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $stock): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div class="flex items-center justify-between p-3 bg-gradient-to-r from-green-50 to-green-100 rounded-lg border border-green-200">
                            <div class="flex items-center space-x-2">
                                <div class="w-8 h-8 rounded-lg flex items-center justify-center overflow-hidden">
                                    <?php if($stock->logo_url): ?>
                                        <img src="<?php echo e($stock->logo_url); ?>" alt="<?php echo e($stock->symbol); ?>" class="w-full h-full object-cover">
                                    <?php else: ?>
                                        <div class="w-full h-full bg-green-500 flex items-center justify-center">
                                            <span class="text-white font-bold text-xs"><?php echo e(substr($stock->symbol, 0, 1)); ?></span>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <div>
                                    <h4 class="font-medium text-green-900 text-xs"><?php echo e($stock->company_name); ?></h4>
                                    <p class="text-xs text-gray-600"><?php echo e($stock->symbol); ?></p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="font-medium text-green-900 text-xs">$<?php echo e(number_format($stock->current_price, 2)); ?></p>
                                <p class="text-xs text-green-600 font-medium">+<?php echo e(number_format($stock->change_percentage, 2)); ?>%</p>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    <?php else: ?>
                        <!-- Fallback for when no data is available -->
                        <div class="flex items-center justify-between p-3 bg-gradient-to-r from-green-50 to-green-100 rounded-lg border border-green-200">
                            <div class="flex items-center space-x-2">
                                <div class="w-8 h-8 bg-green-500 rounded-lg flex items-center justify-center">
                                    <span class="text-white font-bold text-xs">T</span>
                                </div>
                                <div>
                                    <h4 class="font-medium text-green-900 text-xs">Tesla Inc.</h4>
                                    <p class="text-xs text-gray-600">TSLA</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <p class="font-medium text-green-900 text-xs">$245.67</p>
                                <p class="text-xs text-green-600 font-medium">+2.34%</p>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>

        <!-- Enhanced Performance Chart -->
        <div class="bg-green-50 rounded-xl p-5 shadow-sm border border-green-100 mb-6">
            <div class="flex items-center justify-between mb-4">
                <div>
                    <h3 class="text-lg font-light text-green-900 mb-1">Stock Market Performance</h3>
                    <p class="text-xs text-gray-500">Top stocks over the last 30 days</p>
                </div>
            </div>
            
            <!-- Real Chart -->
            <div class="relative">
                <canvas id="stockChart" class="w-full h-64"></canvas>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Chart data from backend
        const chartData = <?php echo json_encode($chartData ?? [], 15, 512) ?>;

        // Initialize chart
        const ctx = document.getElementById('stockChart').getContext('2d');
        const stockChart = new Chart(ctx, {
            type: 'line',
            data: chartData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
                plugins: {
                    legend: {
                        position: 'top',
                        labels: {
                            usePointStyle: true,
                            padding: 20,
                            font: {
                                size: 12,
                                family: 'Inter, system-ui, sans-serif'
                            }
                        }
                    },
                    tooltip: {
                        backgroundColor: 'rgba(0, 0, 0, 0.8)',
                        titleColor: '#fff',
                        bodyColor: '#fff',
                        borderColor: 'rgba(255, 255, 255, 0.1)',
                        borderWidth: 1,
                        cornerRadius: 8,
                        displayColors: true,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': $' + context.parsed.y.toFixed(2);
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        display: true,
                        grid: {
                            display: false
                        },
                        ticks: {
                            maxTicksLimit: 8,
                            font: {
                                size: 11,
                                family: 'Inter, system-ui, sans-serif'
                            }
                        }
                    },
                    y: {
                        display: true,
                        position: 'right',
                        grid: {
                            color: 'rgba(0, 0, 0, 0.05)',
                            drawBorder: false
                        },
                        ticks: {
                            callback: function(value) {
                                return '$' + value.toFixed(0);
                            },
                            font: {
                                size: 11,
                                family: 'Inter, system-ui, sans-serif'
                            }
                        }
                    }
                },
                elements: {
                    point: {
                        radius: 0,
                        hoverRadius: 4,
                        hoverBorderWidth: 2
                    }
                }
            }
        });

        // Add some interactive functionality
        document.addEventListener('DOMContentLoaded', function() {
            // Animate numbers on load
            const animateValue = (element, start, end, duration) => {
                let startTimestamp = null;
                const step = (timestamp) => {
                    if (!startTimestamp) startTimestamp = timestamp;
                    const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                    const current = Math.floor(progress * (end - start) + start);
                    element.textContent = '$' + current.toLocaleString();
                    if (progress < 1) {
                        window.requestAnimationFrame(step);
                    }
                };
                window.requestAnimationFrame(step);
            };

            // Animate portfolio values
            const portfolioElements = document.querySelectorAll('.text-lg.font-light');
            portfolioElements.forEach(element => {
                const text = element.textContent;
                const value = parseInt(text.replace(/[^0-9]/g, ''));
                if (value > 0) {
                    animateValue(element, 0, value, 2000);
                }
            });
        });
    </script>
 <?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php if (isset($__attributesOriginal951024bfcf58033c82ac11d797616473)): ?>
<?php $attributes = $__attributesOriginal951024bfcf58033c82ac11d797616473; ?>
<?php unset($__attributesOriginal951024bfcf58033c82ac11d797616473); ?>
<?php endif; ?>
<?php if (isset($__componentOriginal951024bfcf58033c82ac11d797616473)): ?>
<?php $component = $__componentOriginal951024bfcf58033c82ac11d797616473; ?>
<?php unset($__componentOriginal951024bfcf58033c82ac11d797616473); ?>
<?php endif; ?> <?php /**PATH C:\Users\USER\Videos\red Tesla\secured-tesla-stock\resources\views/user/dashboard.blade.php ENDPATH**/ ?>