<!DOCTYPE html>
<html lang="en" class="bg-white">
<head>
    <meta charset="UTF-8">
    <title>{{$title}}</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ asset('storage/app/public/' . $settings->favicon) }}" rel="icon" type="image/x-icon" />
    <!-- Inter Font -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Enable dark mode class strategy -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    colors: {
                        // Tesla Red Design System — Primary Scale
                        primary: {
                            50: '#FDECEE',
                            100: '#FAD7DB',
                            200: '#F5B0B8',
                            300: '#EF8894',
                            400: '#E85F70',
                            500: '#E31937',
                            600: '#C9142F',
                            700: '#A51026',
                            800: '#7E0C1D',
                            900: '#590713',
                        },
                        // Override red to match Tesla brand primary
                        red: {
                            50: '#FDECEE',
                            100: '#FAD7DB',
                            200: '#F5B0B8',
                            300: '#EF8894',
                            400: '#E85F70',
                            500: '#E31937',
                            600: '#C9142F',
                            700: '#A51026',
                            800: '#7E0C1D',
                            900: '#590713',
                        },
                        // Tesla Red Design System — Neutral Scale
                        gray: {
                            50: '#FFFFFF',
                            100: '#F5F5F5',
                            200: '#E5E5E5',
                            300: '#D4D4D4',
                            400: '#A3A3A3',
                            500: '#737373',
                            600: '#525252',
                            700: '#404040',
                            800: '#262626',
                            900: '#0F0F0F',
                        },
                        // Status Colors
                        success: {
                            500: '#16A34A',
                            600: '#15803D',
                        },
                        warning: {
                            500: '#F59E0B',
                            600: '#D97706',
                        },
                        info: {
                            500: '#2563EB',
                            600: '#1D4ED8',
                        },
                        'glass': 'rgba(255, 255, 255, 0.05)',
                    },
                    backdropBlur: {
                        'xs': '2px',
                    },
                    animation: {
                        'gradient-x': 'gradient-x 15s ease infinite',
                        'gradient-y': 'gradient-y 15s ease infinite',
                        'gradient-xy': 'gradient-xy 15s ease infinite',
                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        'gradient-y': {
                            '0%, 100%': {
                                'background-size': '400% 400%',
                                'background-position': 'center top'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'center center'
                            }
                        },
                        'gradient-x': {
                            '0%, 100%': {
                                'background-size': '200% 200%',
                                'background-position': 'left center'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'right center'
                            }
                        },
                        'gradient-xy': {
                            '0%, 100%': {
                                'background-size': '400% 400%',
                                'background-position': 'left center'
                            },
                            '50%': {
                                'background-size': '200% 200%',
                                'background-position': 'right center'
                            }
                        },
                        'float': {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    }
                }
            }
        }
    </script>

    <script src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
    <script>
        // Force light mode for Tesla Red redesign (one-time migration)
        if (!localStorage.getItem('tesla_red_v1')) {
            localStorage.setItem('theme', 'light');
            localStorage.setItem('tesla_red_v1', '1');
            document.documentElement.classList.remove('dark');
        }
        // Set light mode as default if no preference is stored
        if (!localStorage.getItem('theme')) {
            localStorage.setItem('theme', 'light');
            document.documentElement.classList.remove('dark');
        }

        document.addEventListener('alpine:init', () => {
            Alpine.store('theme', {
                init() {
                    this.darkMode = localStorage.getItem('theme') === 'dark';
                    this.updateTheme();
                },
                darkMode: false,
                toggle() {
                    this.darkMode = !this.darkMode;
                    this.updateTheme();
                },
                updateTheme() {
                    localStorage.setItem('theme', this.darkMode ? 'dark' : 'light');
                    document.documentElement.classList.toggle('dark', this.darkMode);
                    document.body.classList.toggle('bg-gray-900', this.darkMode);
                    document.body.classList.toggle('text-gray-100', this.darkMode);
                    document.body.classList.toggle('bg-white', !this.darkMode);
                    document.body.classList.toggle('text-gray-900', !this.darkMode);
                }
            });
        });
    </script>
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Tailwind CDN -->
{{-- <script src="https://cdn.tailwindcss.com"></script> --}}

</head>
<body x-data="{ sidebarOpen: false }"
      class="text-gray-900 bg-white" x-cloak>
      <style>
       body {
    overflow-x: hidden;
  }

  [x-cloak] {
    display: none !important;
  }
        </style>
<!-- Professional Trading Navbar -->
<nav x-data="{
  open: false,
  notificationOpen: false,
  quickActionsOpen: false
}"
     class="bg-white/98 dark:bg-gray-900/98 backdrop-blur-xl border-b border-gray-200/80 dark:border-gray-700/80 sticky top-0 z-50 shadow-sm dark:shadow-gray-900/20" x-cloak>

  <!-- Main Navigation Container -->
  <div class="max-w-7xl mx-auto px-6 lg:px-8">
    <div class="flex justify-between items-center h-20">

      <!-- Left Section: Logo & Quick Market Info -->
      <div class="flex items-center space-x-4">
        <!-- Logo -->
        <a href="{{ route('dashboard') }}" class="flex items-center space-x-3 group">
          <img src="{{ asset('storage/app/public/'.$settings->logo)}}" class="h-8 w-auto" alt="Logo" />
          <div class="hidden sm:block">
            
         
          </div>
        </a>

        <!-- Live Market Ticker (Hidden on small screens) -->
        <div class="hidden lg:flex items-center space-x-4 ml-8 pl-8 border-l border-gray-200 dark:border-gray-700"
             x-data="cryptoPrices()" x-init="fetchPrices()">
          <div class="flex items-center space-x-2">
            <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
            <span class="text-xs font-medium text-gray-600 dark:text-gray-300">LIVE</span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500 dark:text-gray-400">BTC:</span>
            <span class="font-mono ml-1"
                  :class="btcChange >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
                  x-text="'$' + (btcPrice ? btcPrice.toLocaleString() : '...')"></span>
          </div>
          <div class="text-sm">
            <span class="text-gray-500 dark:text-gray-400">ETH:</span>
            <span class="font-mono ml-1"
                  :class="ethChange >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
                  x-text="'$' + (ethPrice ? ethPrice.toLocaleString() : '...')"></span>
          </div>
        </div>
      </div>

      <!-- Center Section: Account Balance (Desktop) -->
      <div class="hidden md:flex items-center space-x-6">
        <div class="bg-gray-100 dark:bg-gray-800 px-4 py-2 rounded-lg border border-gray-200 dark:border-gray-700">
          <div class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-wide">Account Balance</div>
          <div class="text-lg font-bold text-gray-900 dark:text-white">
            {{ $settings->currency }}{{ number_format(auth()->user()->account_bal, 2) }}
          </div>
        </div>
      </div>

      <!-- Right Section: Actions & User -->
      <div class="flex items-center space-x-2">

        <!-- Quick Actions Dropdown (Desktop) -->
        <div class="hidden md:block relative" x-data="{ quickActionsOpen: false }">
          <button @click="quickActionsOpen = !quickActionsOpen"
                  class="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all duration-200">
            <i data-lucide="zap" class="w-4 h-4"></i>
            <span>Quick Trade</span>
            <i data-lucide="chevron-down" class="w-4 h-4" :class="quickActionsOpen ? 'rotate-180' : ''"></i>
          </button>

          <div x-show="quickActionsOpen" @click.away="quickActionsOpen = false"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               class="absolute right-0 mt-2 w-56 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-20" x-cloak>
            <div class="p-2">
              <a href="{{ route('deposits') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="plus-circle" class="w-4 h-4 mr-3 text-green-500"></i>
                Deposit Funds
              </a>
              <a href="{{ route('withdrawalsdeposits') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="minus-circle" class="w-4 h-4 mr-3 text-red-500"></i>
                Withdraw
              </a>
              <a href="{{ route('trade.index') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="trending-up" class="w-4 h-4 mr-3 text-red-500"></i>
                Trade Markets
              </a>
            </div>
          </div>
        </div>

        <!-- Notifications -->
        <div class="relative" x-data="{ notificationOpen: false }">
          <button @click="notificationOpen = !notificationOpen"
                  class="relative p-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all duration-200">
            <i data-lucide="bell" class="w-5 h-5"></i>
            @php
                $unreadCount = \App\Models\Notification::where('user_id', Auth::id())
                    ->where('is_read', 0)
                    ->count();
            @endphp
            @if($unreadCount > 0)
                <span class="absolute -top-1 -right-1 flex items-center justify-center min-w-[18px] h-[18px] text-xs font-medium text-white bg-red-500 rounded-full px-1 border-2 border-white dark:border-gray-900">
                    {{ $unreadCount > 99 ? '99+' : $unreadCount }}
                </span>
            @endif
          </button>

          <div x-show="notificationOpen" @click.away="notificationOpen = false"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               class="absolute right-0 sm:right-0 sm:left-auto left-1/2 sm:transform-none transform -translate-x-1/2 mt-2 w-80 max-w-[90vw] bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-20" x-cloak>
            <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
              <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
                Notifications
                @if($unreadCount > 0)
                  <span class="ml-2 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-500 rounded-full">
                    {{ $unreadCount }}
                  </span>
                @endif
              </h3>
              {{-- @if($unreadCount > 0)
              <a href="{{ route('notifications.mark-all-read') }}" class="text-xs text-red-600 dark:text-red-400 hover:underline">
                Mark all read
              </a>
              @endif --}}
            </div>

            <div class="max-h-[60vh] overflow-y-auto">
              @php
                  $notifications = \App\Models\Notification::where('user_id', Auth::id())
                      ->orderBy('created_at', 'desc')
                      ->take(5)
                      ->get();
              @endphp

              @forelse($notifications as $notification)
                <a href="{{ route('notifications.show', $notification->id) }}" class="block border-b border-gray-100 dark:border-gray-700 last:border-0 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
                  <div class="px-4 py-3 {{ !$notification->is_read ? 'bg-red-50 dark:bg-red-900/10' : '' }}">
                    <div class="flex items-start">
                      <div class="flex-shrink-0 mt-0.5">
                        <span class="flex h-8 w-8 rounded-full items-center justify-center {{ $notification->type === 'warning' ? 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/20 dark:text-yellow-500' : ($notification->type === 'success' ? 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-500' : ($notification->type === 'danger' ? 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-500' : 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-500')) }}">
                          <i data-lucide="{{ $notification->type === 'warning' ? 'alert-triangle' : ($notification->type === 'success' ? 'check-circle' : ($notification->type === 'danger' ? 'alert-octagon' : 'info')) }}" class="w-4 h-4"></i>
                        </span>
                      </div>
                      <div class="ml-3 w-0 flex-1">
                        <p class="text-sm font-medium text-gray-900 dark:text-white {{ !$notification->is_read ? 'font-semibold' : '' }}">
                          {{ $notification->title }}
                        </p>
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
                          {{ \Illuminate\Support\Str::limit($notification->message, 100) }}
                        </p>
                        <p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
                          {{ $notification->created_at->diffForHumans() }}
                        </p>
                      </div>
                    </div>
                  </div>
                </a>
              @empty
                <div class="py-8 text-center">
                  <div class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 mb-4">
                    <i data-lucide="bell-off" class="h-6 w-6"></i>
                  </div>
                  <p class="text-sm text-gray-600 dark:text-gray-400">No notifications</p>
                  <p class="mt-1 text-xs text-gray-500 dark:text-gray-500">We'll notify you when something arrives</p>
                </div>
              @endforelse
            </div>

            @if(count($notifications) > 0)
              <div class="px-4 py-3 border-t border-gray-200 dark:border-gray-700 text-center">
                <a href="{{ route('notifications') }}" class="text-sm text-red-600 dark:text-red-400 hover:underline">View all notifications</a>
              </div>
            @endif
          </div>
        </div>

        <!-- Dark Mode Toggle -->
        <button
          @click="$store.theme.toggle()"
          class="p-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all duration-200"
          :aria-pressed="$store.theme.darkMode">
          <i data-lucide="sun" x-show="!$store.theme.darkMode" class="w-5 h-5"></i>
          <i data-lucide="moon" x-show="$store.theme.darkMode" class="w-5 h-5"></i>
        </button>

        <!-- Language Translator (Desktop) -->


        <!-- User Profile Dropdown -->
        <div class="relative" x-data="{ dropdownOpen: false }">
          <button @click="dropdownOpen = !dropdownOpen"
                  class="flex items-center space-x-3 px-2 py-2 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 focus:outline-none">
            <div class="flex items-center space-x-2">
              <div class="w-8 h-8 rounded-full bg-red-600 flex items-center justify-center text-white text-sm font-medium">
                {{ Str::upper(substr(Auth::user()->name, 0, 1)) }}
              </div>
              <div class="hidden sm:block text-left">
                <div class="text-sm font-medium text-gray-900 dark:text-white truncate max-w-[120px]">
                  {{ auth()->user()->name }}
                </div>
                <div class="text-xs text-gray-500 dark:text-gray-400">
                  Trading Account
                </div>
              </div>
            </div>
            <i data-lucide="chevron-down" class="w-4 h-4 text-gray-400" :class="dropdownOpen ? 'rotate-180' : ''"></i>
          </button>

          <div x-show="dropdownOpen" @click.away="dropdownOpen = false"
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="opacity-0 scale-95"
               x-transition:enter-end="opacity-100 scale-100"
               class="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-20" x-cloak>

            <!-- User Info Header -->
            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
              <div class="flex items-center space-x-3">
                <div class="w-12 h-12 rounded-full bg-red-600 flex items-center justify-center text-white text-lg font-medium">
                  {{ Str::upper(substr(Auth::user()->name, 0, 1)) }}
                </div>
                <div>
                  <div class="text-sm font-medium text-gray-900 dark:text-white">
                    {{ auth()->user()->name }}
                  </div>
                  <div class="text-xs text-gray-500 dark:text-gray-400">
                    {{ $settings->currency }}{{ number_format(auth()->user()->account_bal, 2) }}
                  </div>
                </div>
              </div>
            </div>

            <!-- Menu Items -->
            <div class="p-2">
              <a href="{{ route('profile') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="user" class="w-4 h-4 mr-3"></i>
                Profile Settings
              </a>
              <a href="{{ route('accounthistory') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="receipt" class="w-4 h-4 mr-3"></i>
                Account History
              </a>
              <a href="{{ route('support') }}" class="flex items-center px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                <i data-lucide="help-circle" class="w-4 h-4 mr-3"></i>
                Support Center
              </a>
              <div class="border-t border-gray-200 dark:border-gray-600 my-2"></div>
              <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="w-full flex items-center px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md">
                  <i data-lucide="log-out" class="w-4 h-4 mr-3"></i>
                  Sign Out
                </button>
              </form>
            </div>
          </div>
        </div>

        <!-- Mobile Menu Button -->
        <button @click="sidebarOpen = !sidebarOpen"
                class="md:hidden p-2 text-gray-600 dark:text-gray-300 hover:text-red-600 dark:hover:text-red-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all duration-200">
          <i data-lucide="menu" x-show="!sidebarOpen" class="w-5 h-5"></i>
          <i data-lucide="x" x-show="sidebarOpen" class="w-5 h-5"></i>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Market Ticker -->
  <div class="lg:hidden bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-700 px-4 py-2"
       x-data="cryptoPrices()" x-init="fetchPrices()">
    <div class="flex items-center justify-between text-xs">
      <div class="flex items-center space-x-4">
        <div class="flex items-center space-x-1">
          <div class="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
          {{-- <span class="text-gray-600 dark:text-gray-400">LIVE</span> --}}
        </div>
        <div>
          <span class="text-gray-500 dark:text-gray-400">BTC:</span>
          <span class="font-mono ml-1"
                :class="btcChange >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
                x-text="'$' + (btcPrice ? btcPrice.toLocaleString() : '...')"></span>
        </div>
        <div>
          <span class="text-gray-500 dark:text-gray-400">ETH:</span>
          <span class="font-mono ml-1"
                :class="ethChange >= 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'"
                x-text="'$' + (ethPrice ? ethPrice.toLocaleString() : '...')"></span>
        </div>
      </div>
      <div class="md:hidden">
        <div class="text-gray-500 dark:text-gray-400">Balance:</div>
        <div class="font-semibold text-gray-900 dark:text-white">
          {{ $settings->currency }}{{ number_format(auth()->user()->account_bal, 2) }}
        </div>
      </div>
    </div>
  </div>
</nav>



<!-- Sidebar Toggle Wrapper -->
<div class="flex min-h-screen bg-gray-50 dark:bg-gray-900" x-cloak>

  <!-- Sidebar -->
<aside x-cloak
  :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
  class="fixed z-50 md:z-40 top-0 left-0 w-72 h-full bg-white dark:bg-gray-900 shadow-xl transform transition-transform duration-300 ease-in-out md:translate-x-0 overflow-y-auto">

    <!-- User Profile Section -->
    <div class="relative p-4 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center gap-4">
            <div class="relative">

<div class="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-gray-600 dark:text-gray-300 text-lg font-medium mx-auto mb-3">
    {{ Str::upper(substr(Auth::user()->name, 0, 1)) }}
</div>
                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></div>
            </div>
            <div class="flex-1 min-w-0">
                <h2 class="text-sm font-semibold text-gray-900 dark:text-white truncate">
                    {{ auth()->user()->name }}
                </h2>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                    Account Balance: {{ $settings->currency }}{{ number_format(auth()->user()->account_bal, 2) }}
                </p>
            </div>
        </div>
    </div>

    <!-- Live Market Prices -->
    <div class="p-4 bg-gray-100 dark:bg-gray-800/50" x-cloak>
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase">Live Market</h3>
            <span class="flex items-center text-xs text-green-600 dark:text-green-400">
                <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse mr-2"></div>
                {{-- <span class="font-medium">LIVE</span> --}}
            </span>
        </div>
        <div class="space-y-2">
            <coingecko-coin-price-marquee-widget
                coin-ids="bitcoin,ethereum,eos,ripple,litecoin"
                currency="usd"
                background-color="transparent"
                locale="en"
                font-color="#333">
            </coingecko-coin-price-marquee-widget>
        </div>
    </div>

    <!-- Navigation Menu -->
    <nav class="p-4 space-y-6 text-sm pb-20" x-cloak>
        <!-- Dashboard (always visible, no dropdown) -->
        <div class="space-y-1">
            <a href="{{ route('dashboard') }}"
               class="flex items-center px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors duration-150 {{ request()->routeIs('dashboard') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="layout-dashboard" class="w-5 h-5 mr-3"></i>
                Dashboard
                @if(request()->routeIs('dashboard'))
                    <div class="ml-auto w-2 h-2 bg-red-500 rounded-full"></div>
                @endif
            </a>
            <a href="{{ route('accounthistory') }}"
               class="flex items-center px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors duration-150 {{ request()->routeIs('accounthistory') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="receipt" class="w-5 h-5 mr-3"></i>
                Account Statement
                @if(request()->routeIs('accounthistory'))
                    <div class="ml-auto w-2 h-2 bg-red-500 rounded-full"></div>
                @endif
            </a>
        </div>

        <div class="my-3 border-t border-gray-200 dark:border-gray-700"></div>

        {{-- ===== INVESTMENTS DROPDOWN ===== --}}
        @if($settings->modules['investment_plans'] ?? true)
        <div x-data="{ open: {{ request()->routeIs(['mplans', 'stocks', 'crypto', 'realestate', 'myplans', 'tradinghistory']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['mplans', 'stocks', 'crypto', 'realestate', 'myplans', 'tradinghistory']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="briefcase" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Investments</span>
                @if(request()->routeIs(['mplans', 'stocks', 'crypto', 'realestate', 'myplans', 'tradinghistory']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('mplans') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('mplans') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="list" class="w-4 h-4 mr-3"></i>
                    All Plans
                    @if(request()->routeIs('mplans'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('stocks') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('stocks') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="trending-up" class="w-4 h-4 mr-3"></i>
                    Stock Market
                    @if(request()->routeIs('stocks'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('crypto') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('crypto') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="coins" class="w-4 h-4 mr-3"></i>
                    Cryptocurrency
                    @if(request()->routeIs('crypto'))<div class="ml-auto w-1.5 h-1.5 bg-orange-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('realestate') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('realestate') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="home" class="w-4 h-4 mr-3"></i>
                    Real Estate
                    @if(request()->routeIs('realestate'))<div class="ml-auto w-1.5 h-1.5 bg-green-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('myplans', 'All') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('myplans') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="pie-chart" class="w-4 h-4 mr-3"></i>
                    My Portfolio
                    @if(request()->routeIs('myplans'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('tradinghistory') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('tradinghistory') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="activity" class="w-4 h-4 mr-3"></i>
                    Performance History
                    @if(request()->routeIs('tradinghistory'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
            </div>
        </div>
        @endif

        {{-- ===== CAR INVENTORY DROPDOWN ===== --}}
        @if($settings->modules['car_inventory'] ?? true)
        <div x-data="{ open: {{ request()->routeIs(['cars.index', 'cars.show', 'cars.my-orders', 'cars.order-details']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['cars.index', 'cars.show', 'cars.my-orders', 'cars.order-details']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="car" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Car Inventory</span>
                @if(request()->routeIs(['cars.index', 'cars.show', 'cars.my-orders', 'cars.order-details']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('cars.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('cars.index') || request()->routeIs('cars.show') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="search" class="w-4 h-4 mr-3"></i>
                    Browse Cars
                    @if(request()->routeIs('cars.index') || request()->routeIs('cars.show'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('cars.my-orders') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('cars.my-orders') || request()->routeIs('cars.order-details') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="shopping-bag" class="w-4 h-4 mr-3"></i>
                    My Orders
                    @if(request()->routeIs('cars.my-orders') || request()->routeIs('cars.order-details'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
            </div>
        </div>
        @endif

        {{-- ===== VIP CARD MEMBERSHIPS DROPDOWN ===== --}}
        @if($settings->modules['vip_cards'] ?? true)
        <div x-data="{ open: {{ request()->routeIs(['vip-cards.index', 'vip-cards.show', 'vip-cards.purchase', 'vip-cards.payment', 'vip-cards.my-memberships', 'vip-cards.membership-details']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['vip-cards.*']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="crown" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">VIP Cards</span>
                @if(request()->routeIs(['vip-cards.*']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('vip-cards.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('vip-cards.index') || request()->routeIs('vip-cards.show') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="sparkles" class="w-4 h-4 mr-3"></i>
                    Browse Cards
                    @if(request()->routeIs('vip-cards.index') || request()->routeIs('vip-cards.show'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('vip-cards.my-memberships') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('vip-cards.my-memberships') || request()->routeIs('vip-cards.membership-details') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="wallet" class="w-4 h-4 mr-3"></i>
                    My Memberships
                    @if(request()->routeIs('vip-cards.my-memberships') || request()->routeIs('vip-cards.membership-details'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
            </div>
        </div>
        @endif

        {{-- ===== PANELS DROPDOWN ===== --}}
        @if($settings->modules['panels'] ?? true)
        <div x-data="{ open: {{ request()->routeIs(['panels.index', 'panels.show', 'panels.purchase', 'panels.my-slots']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['panels.*']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="sun" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Panels</span>
                @if(request()->routeIs(['panels.*']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('panels.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('panels.index') || request()->routeIs('panels.show') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="layout-grid" class="w-4 h-4 mr-3"></i>
                    Browse Panels
                </a>
                <a href="{{ route('panels.my-slots') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('panels.my-slots') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="briefcase" class="w-4 h-4 mr-3"></i>
                    My Panel Slots
                </a>
            </div>
        </div>
        @endif

        {{-- ===== GIVEAWAYS DROPDOWN ===== --}}
        @if($settings->modules['giveaways'] ?? true)
        <div x-data="{ open: {{ request()->routeIs(['giveaways.index', 'giveaways.show', 'giveaways.my-entries']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['giveaways.*']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="gift" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Giveaways</span>
                @if(request()->routeIs(['giveaways.*']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('giveaways.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('giveaways.index') || request()->routeIs('giveaways.show') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="trophy" class="w-4 h-4 mr-3"></i>
                    Browse Giveaways
                    @if(request()->routeIs('giveaways.index') || request()->routeIs('giveaways.show'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('giveaways.my-entries') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('giveaways.my-entries') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="ticket" class="w-4 h-4 mr-3"></i>
                    My Entries
                    @if(request()->routeIs('giveaways.my-entries'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
            </div>
        </div>
        @endif

        {{-- ===== TRADING DROPDOWN (includes Demo, Live, Copy, Bots, Signals) ===== --}}
        @if(($settings->modules['live_trading'] ?? true) || ($settings->modules['copy_trading'] ?? true) || ($settings->modules['ai_bots'] ?? true) || $settings->enable_demo_trading || ($settings->modules['signals'] ?? true))
        <div x-data="{ open: {{ request()->routeIs(['demo.*', 'trade.*', 'copy.*', 'user.bots.*', 'signals']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['demo.*', 'trade.*', 'copy.*', 'user.bots.*', 'signals']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="trending-up" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Trading</span>
                @if(request()->routeIs(['demo.*', 'trade.*', 'copy.*', 'user.bots.*', 'signals']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                @if($settings->enable_demo_trading)
                <a href="{{ route('demo.dashboard') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-green-50 dark:hover:bg-green-900/50 transition-colors {{ request()->routeIs('demo.*') ? 'bg-green-50 dark:bg-green-900/50 text-green-600 dark:text-green-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="graduation-cap" class="w-4 h-4 mr-3"></i>
                    Demo Trading
                    <span class="ml-auto px-1.5 py-0.5 text-[10px] font-medium text-green-700 bg-green-100 dark:bg-green-900/50 dark:text-green-400 rounded">Practice</span>
                </a>
                @endif
                @if($settings->modules['live_trading'] ?? true)
                <a href="{{ route('trade.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('trade.*') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="candlestick-chart" class="w-4 h-4 mr-3"></i>
                    Live Markets
                    @if(request()->routeIs('trade.*'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
                @if($settings->modules['copy_trading'] ?? true)
                <a href="{{ route('copy.dashboard') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('copy.*') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="users-2" class="w-4 h-4 mr-3"></i>
                    Copy Trading
                    @if(request()->routeIs('copy.*'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
                @if($settings->modules['ai_bots'] ?? true)
                <a href="{{ route('user.bots.index') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('user.bots.*') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="bot" class="w-4 h-4 mr-3"></i>
                    AI Trading Bots
                    @if(request()->routeIs('user.bots.*'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
                @if($settings->modules['signals'] ?? true)
                <a href="{{ route('signal') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('signals') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="zap" class="w-4 h-4 mr-3"></i>
                    Premium Signals
                    @if(request()->routeIs('signals'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
            </div>
        </div>
        @endif

        {{-- ===== WALLET & FINANCE DROPDOWN (includes Deposits, Withdrawals, Transfer, Loans) ===== --}}
        @if(($settings->modules['wallet'] ?? true) || ($settings->modules['loans'] ?? true))
        <div x-data="{ open: {{ request()->routeIs(['deposits', 'withdrawalsdeposits', 'transferview', 'loan', 'veiwloan']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['deposits', 'withdrawalsdeposits', 'transferview', 'loan', 'veiwloan']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="wallet" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Wallet & Finance</span>
                @if(request()->routeIs(['deposits', 'withdrawalsdeposits', 'transferview', 'loan', 'veiwloan']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                @if($settings->modules['wallet'] ?? true)
                <a href="{{ route('deposits') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('deposits') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="plus-circle" class="w-4 h-4 mr-3"></i>
                    Deposit Funds
                    @if(request()->routeIs('deposits'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('withdrawalsdeposits') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('withdrawalsdeposits') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="minus-circle" class="w-4 h-4 mr-3"></i>
                    Withdraw Funds
                    @if(request()->routeIs('withdrawalsdeposits'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('transferview') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('transferview') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="arrow-left-right" class="w-4 h-4 mr-3"></i>
                    Internal Transfer
                    @if(request()->routeIs('transferview'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
                @if($settings->modules['loans'] ?? true)
                <a href="{{ route('loan') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('loan') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="file-plus" class="w-4 h-4 mr-3"></i>
                    Apply for Credit
                    @if(request()->routeIs('loan'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                <a href="{{ route('veiwloan') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('veiwloan') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="file-text" class="w-4 h-4 mr-3"></i>
                    Credit History
                    @if(request()->routeIs('veiwloan'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
            </div>
        </div>
        @endif

        {{-- ===== ACCOUNT DROPDOWN (Profile, KYC, Referral, Support) ===== --}}
        <div x-data="{ open: {{ request()->routeIs(['profile', 'account.verify', 'referuser', 'support']) ? 'true' : 'false' }} }" class="space-y-1">
            <button @click="open = !open"
                    class="flex items-center w-full px-3 py-2.5 text-gray-700 dark:text-gray-200 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-all duration-200 {{ request()->routeIs(['profile', 'account.verify', 'referuser', 'support']) ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : '' }}">
                <i data-lucide="user-circle" class="w-5 h-5 mr-3"></i>
                <span class="flex-1 text-left font-medium">Account</span>
                @if(request()->routeIs(['profile', 'account.verify', 'referuser', 'support']))
                    <div class="w-2 h-2 bg-red-500 rounded-full mr-2"></div>
                @endif
                <i data-lucide="chevron-down" :class="open ? 'rotate-180' : ''" class="w-4 h-4 transition-transform duration-200 text-gray-400"></i>
            </button>
            <div x-show="open" x-collapse x-cloak class="ml-4 space-y-0.5 border-l-2 border-gray-200 dark:border-gray-700 pl-3">
                <a href="{{ route('profile') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('profile') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="user" class="w-4 h-4 mr-3"></i>
                    Profile Settings
                    @if(request()->routeIs('profile'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @if(isset($settings->enable_kyc) && $settings->enable_kyc === 'yes')
                    @if(Auth::user()->account_verify === 'Verified')
                    <div class="flex items-center px-3 py-2 text-sm text-green-700 dark:text-green-300 rounded-lg bg-green-50 dark:bg-green-900/20">
                        <i data-lucide="shield-check" class="w-4 h-4 mr-3 text-green-600 dark:text-green-400"></i>
                        Account Verified
                    </div>
                    @elseif(Auth::user()->account_verify === 'Under review')
                    <div class="flex items-center px-3 py-2 text-sm text-yellow-700 dark:text-yellow-300 rounded-lg bg-yellow-50 dark:bg-yellow-900/20">
                        <i data-lucide="clock" class="w-4 h-4 mr-3 text-yellow-600 dark:text-yellow-400"></i>
                        KYC Under Review
                    </div>
                    @else
                    <a href="{{ route('account.verify') }}"
                       class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('account.verify') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                        <i data-lucide="shield-alert" class="w-4 h-4 mr-3"></i>
                        Verify Identity
                        <span class="ml-auto px-1.5 py-0.5 text-[10px] font-medium text-red-700 bg-red-100 dark:bg-red-900/50 dark:text-red-400 rounded">Required</span>
                    </a>
                    @endif
                @endif
                @if($settings->modules['referral'] ?? true)
                <a href="{{ route('referuser') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('referuser') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="users" class="w-4 h-4 mr-3"></i>
                    Referral Program
                    @if(request()->routeIs('referuser'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
                @endif
                <a href="{{ route('support') }}"
                   class="flex items-center px-3 py-2 text-sm rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors {{ request()->routeIs('support') ? 'bg-red-50 dark:bg-red-900/50 text-red-600 dark:text-red-400 font-medium' : 'text-gray-600 dark:text-gray-300' }}">
                    <i data-lucide="headphones" class="w-4 h-4 mr-3"></i>
                    Support Center
                    @if(request()->routeIs('support'))<div class="ml-auto w-1.5 h-1.5 bg-red-500 rounded-full"></div>@endif
                </a>
            </div>
        </div>

        {{-- ===== SIGN OUT ===== --}}
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                        class="flex items-center w-full px-3 py-2.5 text-red-600 dark:text-red-400 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/50 transition-colors duration-150">
                    <i data-lucide="log-out" class="w-5 h-5 mr-3"></i>
                    <span>Sign Out</span>
                </button>
            </form>
        </div>
        </nav>
    </aside>

  <!-- Sidebar overlay for mobile -->
  <div
    x-show="sidebarOpen"
    @click="sidebarOpen = false"
    class="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" x-cloak>
  </div>

  <!-- Main content placeholder -->
  <div class="flex-1 ml-0 md:ml-72 min-w-0 p-4 pb-20 md:pb-4 overflow-x-hidden">
    <!-- Your main dashboard content goes here -->
    @yield('content')
  </div>
</div>





<!-- Modern Mobile Navigation with Glassmorphism -->
<link href="https://unpkg.com/lucide@latest" rel="stylesheet">

<div class="fixed bottom-0 w-full z-30 md:hidden" x-data="{ fabOpen: false }" x-cloak>
  <!-- Bottom Navigation Bar with Glassmorphism -->
  <div class="flex justify-between items-center bg-white/80 dark:bg-gray-900/80 backdrop-blur-lg px-6 py-4 shadow-[0_-8px_30px_rgba(0,0,0,0.12)] relative border-t border-gray-200/20 dark:border-gray-700/20">
    <!-- Language Selector (Mobile) -->
    <div class="group flex flex-col items-center relative">
      <div class="relative">
        <div class="gtranslate_wrapper_mobile_nav"></div>
        <style>
          .gtranslate_wrapper_mobile_nav {
            display: flex;
            flex-direction: column;
            align-items: center;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper {
            position: static !important;
            transform: none !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            border-radius: 0 !important;
            width: auto !important;
            height: auto !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper a {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            text-decoration: none !important;
            transition: all 0.2s ease !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper a:hover {
            transform: scale(1.05) !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper img {
            width: 24px !important;
            height: 24px !important;
            border-radius: 4px !important;
            margin: 0 !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options {
            position: fixed !important;
            bottom: 80px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            background: white !important;
            border: 1px solid #e5e7eb !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
            z-index: 1000 !important;
            max-height: 300px !important;
            overflow-y: auto !important;
            width: 280px !important;
            max-width: 90vw !important;
          }

          .dark .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options {
            background: #374151 !important;
            border-color: #4b5563 !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options a {
            padding: 8px 12px !important;
            display: flex !important;
            align-items: center !important;
            flex-direction: row !important;
            gap: 8px !important;
            color: #374151 !important;
            font-size: 14px !important;
            border-bottom: 1px solid #f3f4f6 !important;
          }

          .dark .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options a {
            color: #f9fafb !important;
            border-bottom-color: #4b5563 !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options a:hover {
            background: #f3f4f6 !important;
            transform: none !important;
          }

          .dark .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options a:hover {
            background: #4b5563 !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options a:last-child {
            border-bottom: none !important;
          }

          .gtranslate_wrapper_mobile_nav .gt_float_wrapper .gt_options img {
            width: 20px !important;
            height: 20px !important;
          }
        </style>
        <script>
          if (!window.gtranslateSettingsMobileNav) {
            window.gtranslateSettingsMobileNav = {
              "default_language": "en",
              "wrapper_selector": ".gtranslate_wrapper_mobile_nav",
              "flag_style": "3d",
              "alt_flags": {"en": "usa"},
              "switcher_horizontal_position": "center",
              "switcher_vertical_position": "bottom"
            };

            // Load script for mobile nav if not already loaded
            var script = document.createElement('script');
            script.src = 'https://cdn.gtranslate.net/widgets/latest/float.js';
            script.defer = true;
            document.head.appendChild(script);
          }
        </script>

        <i data-lucide="globe" class="w-6 h-6 text-gray-500 group-hover:text-red-600 transition-colors duration-200"></i>
      </div>
      <span class="text-xs mt-1 text-gray-500 group-hover:text-red-600">Language</span>
    </div>

    <a href="{{ route('deposits') }}"
       class="group flex flex-col items-center relative">
      <div class="p-2 rounded-xl transition-all duration-300 ease-out
                  {{ request()->routeIs('deposits')
                     ? 'bg-red-500/10 dark:bg-red-400/10 scale-110'
                     : 'hover:bg-gray-100 dark:hover:bg-gray-800' }}">
        <i data-lucide="banknote" class="w-6 h-6
           {{ request()->routeIs('deposits')
              ? 'text-red-600 dark:text-red-400'
              : 'text-gray-500 group-hover:text-red-600 dark:text-gray-400 dark:group-hover:text-red-400' }}
           transition-colors duration-300"></i>
      </div>
      <span class="text-xs font-medium mt-1
            {{ request()->routeIs('deposits')
               ? 'text-red-600 dark:text-red-400'
               : 'text-gray-500 group-hover:text-red-600 dark:text-gray-400 dark:group-hover:text-red-400' }}
            transition-colors duration-300">Deposit</span>
    </a>

    <a href="{{ route('profile') }}"
       class="group flex flex-col items-center relative">
      <div class="p-2 rounded-xl transition-all duration-300 ease-out
                  {{ request()->routeIs('profile')
                     ? 'bg-red-500/10 dark:bg-red-400/10 scale-110'
                     : 'hover:bg-gray-100 dark:hover:bg-gray-800' }}">
        <i data-lucide="user" class="w-6 h-6
           {{ request()->routeIs('profile')
              ? 'text-red-600 dark:text-red-400'
              : 'text-gray-500 group-hover:text-red-600 dark:text-gray-400 dark:group-hover:text-red-400' }}
           transition-colors duration-300"></i>
      </div>
      <span class="text-xs font-medium mt-1
            {{ request()->routeIs('profile')
               ? 'text-red-600 dark:text-red-400'
               : 'text-gray-500 group-hover:text-red-600 dark:text-gray-400 dark:group-hover:text-red-400' }}
            transition-colors duration-300">Profile</span>
    </a>

    <!-- Animated FAB Button -->
    <button @click="fabOpen = !fabOpen"
            class="absolute -top-7 left-1/2 transform -translate-x-1/2
                   bg-red-600 text-white
                   w-14 h-14 rounded-full flex items-center justify-center
                   shadow-[0_8px_30px_rgba(204,0,0,0.5)]
                   border-4 border-white dark:border-gray-900
                   hover:scale-110 hover:shadow-[0_8px_35px_rgba(204,0,0,0.6)]
                   active:scale-95
                   transition-all duration-300 ease-out">
      <i data-lucide="zap" class="w-6 h-6 transform transition-transform group-hover:scale-110"></i>
      <!-- Pulse Effect -->
      <span class="absolute w-full h-full rounded-full bg-red-500 animate-ping opacity-20"></span>
    </button>

<a href="{{ route('support') }}"
   class="flex flex-col items-center
          {{ request()->routeIs('support') ? 'text-red-600 font-semibold' : 'text-gray-500' }}
          hover:text-red-600">
  <i data-lucide="life-buoy" class="w-6 h-6"></i>
  <span class="text-xs mt-1">Support</span>
</a>



   <a href="{{ route('dashboard') }}"
   class="flex flex-col items-center
          {{ request()->routeIs('dashboard') ? 'text-red-600' : 'text-gray-500' }} hover:text-red-600">
 <i data-lucide="home" class="w-6 h-6 transition-colors duration-200"></i>
  <span class="text-xs mt-1">Home</span>
</a>
  </div>

  <!-- Modern FAB Overlay Menu -->
  <div x-show="fabOpen"
       @click.away="fabOpen = false"
       class="fixed inset-0 bg-gray-900/70 backdrop-blur-sm z-40 flex items-center justify-center p-4"
       x-transition:enter="transition ease-out duration-300"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition ease-in duration-200"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0" x-cloak>

    <!-- Menu Card -->
    <div class="bg-white dark:bg-gray-900 p-6 rounded-2xl
                shadow-[0_8px_30px_rgba(0,0,0,0.3)]
                space-y-4 w-72 max-w-full
                border border-gray-200 dark:border-gray-700
                transform transition-all duration-300
                animate-slideUp">

      <!-- Quick Actions Grid -->
      <div class="grid grid-cols-2 gap-4 mb-6">
        <a href="{{ route('mplans') }}"
           class="flex flex-col items-center p-4 rounded-xl
                  bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700
                  hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-lg hover:scale-105 transition-all duration-300
                  group">
          <i data-lucide="trending-up" class="w-6 h-6 mb-2 text-red-400
                                              group-hover:scale-110 transition-transform duration-300"></i>
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Invest</span>
        </a>

        <a href="{{ route('withdrawalsdeposits') }}"
           class="flex flex-col items-center p-4 rounded-xl
                  bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700
                  hover:bg-gray-100 dark:hover:bg-gray-700 hover:shadow-lg hover:scale-105 transition-all duration-300
                  group">
          <i data-lucide="wallet" class="w-6 h-6 mb-2 text-green-400
                                       group-hover:scale-110 transition-transform duration-300"></i>
          <span class="text-sm font-medium text-gray-700 dark:text-gray-200">Withdraw</span>
        </a>
      </div>

      <!-- Menu Links -->
      <div class="space-y-2">
        @if($settings->enable_demo_trading)
        <a href="{{ route('demo.dashboard') }}" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                          hover:bg-gray-100 dark:hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="graduation-cap" class="w-5 h-5 mr-3 text-green-400
                                     group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Demo Trading</span>
          <span class="ml-auto text-xs font-bold text-green-400">Practice</span>
        </a>
        @endif

        <a href="{{ route('copy.dashboard') }}" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                          hover:bg-gray-100 dark:hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="copy" class="w-5 h-5 mr-3 text-red-400
                                     group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Copy Trading</span>
          <!--<span class="ml-auto text-xs font-bold text-green-400">New</span>-->
        </a>

        <a href="{{ route('transferview') }}" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                          hover:bg-gray-100 dark:hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="refresh-ccw" class="w-5 h-5 mr-3 text-purple-400
                                             group-hover:rotate-180 transition-transform duration-500"></i>
          <span class="font-medium">Transfer Funds</span>
        </a>

        {{-- <a href="{{ route('assetbalance') }}" class="flex items-center p-3 rounded-lg text-gray-100
                          hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="repeat" class="w-5 h-5 mr-3 text-indigo-400
                                        group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Currency Exchange</span>
          <span class="ml-auto text-xs font-bold text-indigo-400">Swap</span>
        </a> --}}

        <a href="#" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                          hover:bg-gray-100 dark:hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="users" class="w-5 h-5 mr-3 text-orange-400
                                      group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Refer Friends</span>
          <span class="ml-auto text-xs font-bold text-orange-400">+{{$settings->referral_commission}}%</span>
        </a>

        <a href="{{ route('support') }}" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                                               hover:bg-gray-100 dark:hover:bg-gray-800
                                               transition-colors duration-200 group">
          <i data-lucide="life-buoy" class="w-5 h-5 mr-3 text-cyan-400
                                           group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Support</span>
        </a>

        <a href="{{ route('user.bots.index') }}" class="flex items-center p-3 rounded-lg text-gray-700 dark:text-gray-100
                          hover:bg-gray-100 dark:hover:bg-gray-800
                          transition-colors duration-200 group">
          <i data-lucide="newspaper" class="w-5 h-5 mr-3 text-red-400
                                          group-hover:scale-110 transition-transform duration-300"></i>
          <span class="font-medium">Bots Trading</span>
        </a>
      </div>

      <!-- Close Button -->
      <button @click="fabOpen = false"
              class="absolute top-2 right-2 p-2 rounded-full
                     text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
                     hover:bg-gray-100 dark:hover:bg-gray-800
                     transition-colors duration-200">
        <i data-lucide="x" class="w-5 h-5"></i>
      </button>
    </div>
  </div>

  <style>
    @keyframes slideUp {
      from { opacity: 0; transform: scale(0.95) translateY(10px); }
      to { opacity: 1; transform: scale(1) translateY(0); }
    }
    .animate-slideUp {
      animation: slideUp 0.3s ease-out forwards;
    }
  </style>
</div>

<!-- Script for Lucide Icons -->
<script src="https://unpkg.com/lucide@latest"></script>
<script>
  // Initialize Lucide icons
  document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
  });

  // Re-initialize icons when Alpine renders new content
  document.addEventListener('alpine:init', () => {
    Alpine.nextTick(() => {
      lucide.createIcons();
    });
  });
</script>

<style>
  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  .animate-fadeIn {
    animation: fadeIn 0.3s ease-out;
  }
</style>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>

<!-- Live Crypto Prices Script -->
<script>
// Alpine.js component for live crypto prices
function cryptoPrices() {
  return {
    btcPrice: null,
    ethPrice: null,
    btcChange: 0,
    ethChange: 0,
    lastUpdate: null,

    async fetchPrices() {
      try {
        // Using CoinGecko API (free, no API key required)
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin,ethereum&vs_currencies=usd&include_24hr_change=true');
        const data = await response.json();

        if (data.bitcoin && data.ethereum) {
          this.btcPrice = Math.round(data.bitcoin.usd);
          this.ethPrice = Math.round(data.ethereum.usd);
          this.btcChange = data.bitcoin.usd_24h_change || 0;
          this.ethChange = data.ethereum.usd_24h_change || 0;
          this.lastUpdate = new Date();

          console.log('Crypto prices updated:', {
            BTC: this.btcPrice,
            ETH: this.ethPrice,
            time: this.lastUpdate
          });
        }
      } catch (error) {
        console.error('Error fetching crypto prices:', error);
        // Keep last fetched values — don't overwrite with fake prices
      }

      // Update prices every 30 seconds
      setTimeout(() => this.fetchPrices(), 30000);
    }
  }
}

// Initialize when Alpine is ready
document.addEventListener('alpine:init', () => {
  // Register the component globally
  Alpine.data('cryptoPrices', cryptoPrices);
});
</script>

@yield('scripts')
@include('layouts.lang')
@include('layouts.livechat')
</body>
</html>
