@extends(template() . 'layout.master2')

@section('content2')
<div class="dashboard-body-part bg-zinc-950 min-h-screen p-4 md:p-8 text-zinc-200">
    <div class="max-w-7xl mx-auto space-y-6">
<div class="col-span-full mb-6">
    <div class="relative bg-zinc-900/50 border border-zinc-800 rounded-2xl w-full"> {{-- Removed max-w-md --}}
        <div class="absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,_var(--tw-gradient-stops))] from-blue-500/10 via-transparent to-transparent"></div>
        
        <div class="relative z-10 p-4"> {{-- Added padding for inner spacing --}}
            <div class="flex items-center gap-2 mb-4 px-2">
                <span class="relative flex h-2 w-2">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
                </span>
                <span class="text-[10px] text-gray-400 font-black uppercase tracking-[0.2em]">
                    {{ __('Real-Time Market Data') }}
                </span>
            </div>

            <div class="rounded-2xl overflow-hidden border border-white/5 bg-black/20 backdrop-blur-sm">
                <script type="module" src="https://widgets.tradingview-widget.com/w/en/tv-ticker-tape.js"></script>
                <tv-ticker-tape symbols='FOREXCOM:SPXUSD,FOREXCOM:NSXUSD,FOREXCOM:DJI,FX:EURUSD,BITSTAMP:BTCUSD,BITSTAMP:ETHUSD,CMCMARKETS:GOLD,NASDAQ:NVDA,NASDAQ:AAPL,NASDAQ:TSLA,NASDAQ:NFLX,NASDAQ:MSFT,NASDAQ:AMZN,NASDAQ:PLTR,NASDAQ:META,NASDAQ:GOOGL,NASDAQ:MSTR'></tv-ticker-tape>
            </div>
        </div>
    </div>
</div>

<div class="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-5 w-full"> {{-- Removed max-w-md --}}
@php
    // Use the variable from the controller (passed via compact)
    $val = $signal_strength ?? 0; 
    
    // Calculate how many of the 10 bars should be highlighted
    $activeBars = ceil($val / 10); 

    // Dynamic Logic: Higher numbers = Green/Stable, Lower numbers = Red/Critical
    if($val <= 30) {
        $colorClass = "bg-red-600 shadow-[0_0_8px_rgba(220,38,38,0.4)]";
        $pingColor  = "bg-red-500";
        $textColor  = "text-red-500";
        $statusLabel = "Critical";
    } elseif($val <= 60) {
        $colorClass = "bg-orange-500 shadow-[0_0_8px_rgba(249,115,22,0.4)]";
        $pingColor  = "bg-orange-500";
        $textColor  = "text-orange-500";
        $statusLabel = "Average";
    } else {
        $colorClass = "bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.4)]";
        $pingColor  = "bg-emerald-500";
        $textColor  = "text-emerald-500";
        $statusLabel = "Stable";
    }
@endphp

<div class="flex flex-col gap-3 p-4 bg-zinc-900/50 rounded-2xl border border-white/5">
    
    <div class="flex justify-between items-center px-1">
        <span class="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">
            Signal Strength
        </span>
        <div class="flex items-center gap-1.5">
            <span class="relative flex h-2 w-2">
                <span class="animate-ping absolute inline-flex h-full w-full rounded-full {{ $pingColor }} opacity-75"></span>
                <span class="relative inline-flex rounded-full h-2 w-2 {{ $pingColor }}"></span>
            </span>
            <span class="{{ $textColor }} text-[10px] font-bold uppercase tracking-wider transition-colors duration-500">
                Live Analysis
            </span>
        </div>
    </div>

    <div class="flex gap-1.5 w-full">
        @for ($i = 1; $i <= 10; $i++)
            @if ($i <= $activeBars)
                {{-- Active Colored Bar --}}
                <div class="h-1.5 flex-1 {{ $colorClass }} rounded-sm transition-all duration-700"></div>
            @else
                {{-- Inactive Dark Bar --}}
                <div class="h-1.5 flex-1 bg-zinc-800 rounded-sm"></div>
            @endif
        @endfor
    </div>

    <div class="flex justify-between items-center px-1">
        <span class="text-zinc-600 text-[9px] font-bold uppercase tracking-widest">
            Protocol: Secure-v3
        </span>
        <span class="text-white font-mono text-xs font-bold">
            {{ $val }}% <span class="{{ $textColor }} ml-1 uppercase text-[10px] tracking-tighter">{{ $statusLabel }}</span>
        </span>
    </div>
    
</div>
</div>

<div class="w-full col-span-full">
    @if($nearestInvestment)
        @php $isPaused = is_null($nearestInvestment->next_payment_date); @endphp

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-center justify-items-center">
            
            {{-- Loop through the 3 recent plans --}}
            @foreach($recentPlans as $plan)
                @php 
                    $isPaused = $plan->isPaused;
                    $progress = $plan->progress;
                @endphp
                
                <div class="w-full bg-zinc-900/50 border {{ $isPaused ? 'border-orange-900/50' : 'border-zinc-800' }} rounded-2xl p-6 relative overflow-hidden group">
                    {{-- Background Glow --}}
                    <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] {{ $isPaused ? 'from-orange-500/5' : 'from-blue-500/5' }} via-transparent to-transparent"></div>
                    
                    <div class="flex flex-col gap-5 relative z-10">
                        <div class="flex justify-between items-end">
                            <div class="flex flex-col gap-1">
                                <span class="text-[10px] text-gray-400 font-black uppercase tracking-[0.2em]">
                                    {{ $plan->plan->plan_name }}
                                </span>
                                <span class="text-white text-lg font-black tracking-tight">
                                    {{ $isPaused ? __('Trading on Pending') : __('Live Trading Progress') }}
                                </span>
                            </div>
                            <div class="flex flex-col items-end">
                                <span class="text-2xl font-black text-transparent bg-clip-text {{ $isPaused ? 'bg-gradient-to-r from-orange-400 to-red-400' : 'bg-gradient-to-r from-cyan-400 to-emerald-400' }} font-mono">
                                    {{ round($progress, 1) }}%
                                </span>
                                @if($isPaused)
                                    <span class="text-[9px] text-orange-500 font-bold uppercase tracking-widest animate-pulse">Waiting...</span>
                                @else
                                    <span class="text-[9px] text-emerald-500 font-bold uppercase">Processing...</span>
                                @endif
                            </div>
                        </div>

                        {{-- Progress Bar --}}
                        <div class="w-full bg-black/40 rounded-full h-5 p-1 border border-white/5 shadow-inner">
                            <div class="h-full rounded-full transition-all duration-1000 ease-out relative overflow-hidden {{ $isPaused ? 'shadow-[0_0_15px_rgba(249,115,22,0.2)]' : 'shadow-[0_0_15px_rgba(16,185,129,0.4)]' }}"
                                 style="width: {{ $progress }}%; background: {{ $isPaused ? 'linear-gradient(90deg, #f97316 0%, #ef4444 100%)' : 'linear-gradient(90deg, #06b6d4 0%, #10b981 100%)' }};">
                                
                                @if(!$isPaused)
                                    <div class="absolute inset-0 opacity-30 bg-[linear-gradient(45deg,rgba(255,255,255,.2)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.2)_50%,rgba(255,255,255,.2)_75%,transparent_75%,transparent)] bg-[length:2rem_2rem] animate-[shimmer_2s_linear_infinite]"></div>
                                @endif
                            </div>
                        </div>

                        <div class="flex justify-between text-[10px] font-bold text-gray-400 uppercase tracking-widest px-1">
                            <span>{{ $isPaused ? 'Halted' : 'Entry' }}</span>
                            <span>Target Return</span>
                        </div>
                    </div>
                </div>
            @endforeach

            {{-- View All Plans Button - Centered below the grid on large screens --}}
            <div class="col-span-full flex justify-center mt-4">
                <a href="{{ route('user.invest.all') }}" class="group flex items-center gap-3 px-8 py-3 rounded-xl bg-zinc-900 border border-zinc-800 text-zinc-400 hover:text-white hover:border-zinc-600 transition-all duration-300">
                    <span class="text-xs font-black uppercase tracking-[0.2em]">{{ __('View All Investments') }}</span>
                    <i class="bi bi-arrow-right transition-transform group-hover:translate-x-1"></i>
                </a>
            </div>
        </div>
    @endif
</div>
                    <div class="flex flex-col lg:flex-row gap-6">
            
            <div class="w-full lg:w-2/3 bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 relative overflow-hidden group">
                <!--<div class="absolute right-0 bottom-0 w-64 h-64 opacity-5 pointer-events-none transition-opacity group-hover:opacity-10">-->
                <!--    <img src="https://bitencrypto.com/res/assets/logo-line.33e95a975fef5e2e26ac.svg" alt="" class="object-cover">-->
                <!--</div>-->

                <div class="flex items-center justify-between mb-8">
                    <div class="flex items-center gap-4">
                        <div class="h-14 w-14 rounded-full bg-emerald-500 flex items-center justify-center text-2xl font-bold text-white shadow-lg shadow-emerald-500/20">
                            {{ substr(Auth::user()->username, 0, 1) }}
                        </div>
                        <span class="text-2xl font-semibold tracking-tight text-white">{{ @Auth::user()->username }}</span>
                    </div>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 relative z-10">
                    <div class="cursor-pointer group/item">
                        <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">UID</p>
                        <div class="flex items-center gap-2 text-lg font-medium text-zinc-100">
                            925{{ @Auth::user()->id }}
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 opacity-60 group-hover/item:opacity-100 transition-opacity text-emerald-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
                        </div>
                    </div>
                    
                    <div>
                        <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">Copy Trading</p>
                        <div class="flex items-center gap-2">
                            <div class="h-2 w-2 rounded-full {{ Auth::user()->trader ? 'bg-blue-500 shadow-[0_0_5px_#3b82f6]' : 'bg-zinc-600' }}"></div>
                            <span class="text-zinc-100 font-bold italic tracking-tight">
                                {{ Auth::user()->trader ?? 'No Trader Copied Yet' }}
                            </span>
                        </div>
                    </div>
                    
                    <div class="hidden md:block">
                        <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">Account Info</p>
                        <div class="text-zinc-100 truncate">{{ @Auth::user()->email }}</div>
                    </div>
              <div>
    <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">Account Status</p>
    
    @php
        $status = Auth::user()->account_status ?? 'Active';
        // Logic to determine color based on status keywords
        $isNegative = in_array(strtolower($status), ['suspended', 'inactive', 'blocked', 'disabled']);
        $statusColor = $isNegative ? 'text-red-500' : 'text-emerald-400';
    @endphp

    <div class="flex items-center gap-2 {{ $statusColor }} font-medium transition-colors duration-300">
        @if($isNegative)
            {{-- Alert/X Icon --}}
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
            </svg>
        @else
            {{-- Success/Check Icon --}}
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="20 6 9 17 4 12"/>
            </svg>
        @endif
        
        <span class="capitalize">{{ $status }}</span>
    </div>
</div>
@if(Auth::user()->manager)
    <div>
        <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">Manager</p>
        <div class="flex items-center gap-2 text-zinc-100 italic">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-zinc-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><polyline points="23 21 23 11"/><path d="M20 14l3-3 3 3"/>
            </svg>
            {{ Auth::user()->manager }}
        </div>
    </div>
@endif
@if(Auth::user()->acctmessage)
<div class="col-span-full">
    <p class="text-zinc-500 text-xs uppercase tracking-wider font-bold mb-1">Account Message</p>
    <div class="flex items-start gap-3 bg-zinc-800/40 p-4 rounded-xl border border-zinc-700/50 overflow-hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="mt-0.5 w-4 h-4 text-emerald-500 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
        </svg>
        
        <div class="min-w-0 flex-1">
            <p class="text-xs text-zinc-300 whitespace-pre-line leading-relaxed break-words">
                {{ Auth::user()->acctmessage }}
            </p>
        </div>
    </div>
</div>
@endif
                </div>
            </div>

            <div class="w-full lg:w-1/3 bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex flex-col justify-between shadow-xl">
                <div>
                    <h4 class="text-zinc-400 font-medium mb-4">Total Balance</h4>
                    <div class="mb-1 flex items-baseline gap-1">
                        <span class="text-emerald-500 text-3xl font-bold">{{ @Auth::user()->currency }}</span>
<div class="overflow-hidden min-w-0">
    <span class="text-white text-3xl sm:text-4xl md:text-5xl font-black tracking-tighter break-words block leading-none">
        {{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}
    </span>
</div>
                    </div>
                    <p class="text-zinc-500 font-medium italic">± {{ @Auth::user()->account }}</p>
                </div>

         <div class="flex gap-4 mt-8 relative z-10">
    <a href="{{ route('user.deposit') }}" 
       class="flex-1 bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3.5 rounded-xl transition-all flex items-center justify-center gap-2 shadow-lg shadow-emerald-900/20 active:scale-95 cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 5v14M5 12l7 7 7-7"/>
        </svg>
        <span>Deposit</span>
    </a>

    <a href="{{ route('user.withdrawMethod') }}" 
       class="flex-1 bg-zinc-800 hover:bg-zinc-700 text-white font-bold py-3.5 rounded-xl transition-all border border-zinc-700 flex items-center justify-center gap-2 active:scale-95 cursor-pointer">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 pointer-events-none" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 19V5M5 12l7-7 7 7"/>
        </svg>
        <span>Withdraw</span>
    </a>
</div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-gradient-to-br from-zinc-900 to-zinc-800 p-5 rounded-2xl border border-zinc-800 flex items-center gap-4 transition-all hover:border-emerald-500/30">
                <div class="bg-emerald-500/10 p-3 rounded-xl text-emerald-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="7"/><polyline points="8 21 12 17 16 21"/></svg>
                </div>
                <div>
                    <p class="text-zinc-500 text-sm font-medium">{{ __('Profit') }}</p>
                    <h5 class="text-xl font-bold text-white tracking-tight">{{ @Auth::user()->currency }}{{ number_format($profit) }}</h5>
                </div>
            </div>
            <div class="bg-gradient-to-br from-zinc-900 to-zinc-800 p-5 rounded-2xl border border-zinc-800 flex items-center gap-4 transition-all hover:border-blue-500/30">
                <div class="bg-blue-500/10 p-3 rounded-xl text-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4"/><path d="M4 6v12c0 1.1.9 2 2 2h14v-4"/><path d="M18 12a2 2 0 0 0-2 2c0 1.1.9 2 2 2h4v-4h-4z"/></svg>
                </div>
                <div>
                    <p class="text-zinc-500 text-sm font-medium">{{ __('Withdraws') }}</p>
                    <h5 class="text-xl font-bold text-white tracking-tight">{{ @Auth::user()->currency }}{{ $withdraw ?? '0' }}</h5>
                </div>
            </div>
            <div class="bg-gradient-to-br from-zinc-900 to-zinc-800 p-5 rounded-2xl border border-zinc-800 flex items-center gap-4 transition-all hover:border-purple-500/30">
                <div class="bg-purple-500/10 p-3 rounded-xl text-purple-500">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 5c-1.5 0-2.8 1.4-3 2-3.5-1.5-11-.3-11 5 0 1.8 0 9 2 9 1.7 0 4.3-4 4.5-4.5.2.5 2.8 4.5 4.5 4.5 2 0 2-7.2 2-9 0-5.3-7.5-6.5-11-5"/></svg>
                </div>
                <div>
                    <p class="text-zinc-500 text-sm font-medium leading-tight">{{ __('Available Deposit Balance') }}</p>
                    <h5 class="text-xl font-bold text-white tracking-tight">{{ @Auth::user()->currency }}{{ number_format($totalDeposit - $totalinvestDeposit) }}</h5>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            @php
                $stats = [
                    ['Total Withdraw', $withdraw, 'bg-red-500/10 text-red-500', '<path d="M19 12H5M12 19l-7-7 7-7"/>'],
                    ['Total Deposit', $totalDeposit, 'bg-orange-500/10 text-orange-500', '<path d="M5 12h14M12 5l7 7-7 7"/>'],
                    ['Total Invest', number_format($totalInvest, 0), 'bg-indigo-500/10 text-indigo-500', '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>'],
                    ['Current Invest', isset($currentInvest->amount) ? number_format($currentInvest->amount, 0) : 0, 'bg-emerald-500/10 text-emerald-500', '<circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>'],
                ];
            @endphp
            @foreach($stats as $stat)
            <div class="bg-zinc-900/40 border border-zinc-800/60 p-5 rounded-2xl hover:bg-zinc-900/60 transition-colors">
                <div class="{{ $stat[2] }} w-10 h-10 rounded-lg flex items-center justify-center mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        {!! $stat[3] !!}
                    </svg>
                </div>
                <p class="text-zinc-500 text-[10px] font-black uppercase tracking-widest mb-1 leading-none">{{ __($stat[0]) }}</p>
                <h5 class="text-lg font-bold text-white tracking-tight">{{ @Auth::user()->currency }}{{ $stat[1] }}</h5>
            </div>
            @endforeach
        </div>

     <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    <div class="col-span-full bg-zinc-900 border border-zinc-800 p-5 rounded-2xl flex justify-between items-center group hover:border-emerald-500/50 transition-all duration-300">
        <div class="min-w-0">
            <span class="text-zinc-500 text-[10px] font-bold uppercase tracking-widest block mb-1">
                {{ __('Current Plan') }}
            </span>
            <h3 class="text-lg font-black text-white truncate tracking-tight uppercase">
                {{ $currentPlan->plan->plan_name ?? 'N/A' }}
            </h3>
        </div>
        
        <a href="{{ route('user.invest.all') }}" class="h-12 w-12 bg-zinc-800 group-hover:bg-emerald-600 rounded-full flex items-center justify-center text-white transition-all shadow-lg shrink-0 ml-4">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <line x1="5" y1="12" x2="19" y2="12"/>
                <polyline points="12 5 19 12 12 19"/>
            </svg>
        </a>
    </div>
</div>
        
        
        
<div class="col-span-full mt-6 px-1">
    <!--<div class="flex items-center justify-between mb-4">-->
    <!--    <h3 class="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">{{ __('All Navigations') }}</h3>-->
    <!--</div>-->
       <div class="flex items-center justify-between mb-4">
        <h3 class="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Navigations') }}</h3>
        <a href="{{ route('user.viewall') }}" class="text-emerald-500 text-[10px] font-bold uppercase tracking-wider hover:underline">View All Navigations</a>
    </div>

    <div class="grid grid-cols-3 gap-3 relative z-10"> @php
        $navigations = [
        ['route' => 'user.traders', 'name' => 'Top Traders', 'color' => 'text-orange-500', 'svg' => '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>'],
            ['route' => 'user.interest.log', 'name' => 'Earnings', 'color' => 'text-emerald-500', 'svg' => '<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6M16 12H8"/>'],
            ['route' => 'user.investmentplan', 'name' => 'Plans', 'color' => 'text-blue-500', 'svg' => '<path d="M21.21 15.89A10 10 0 1 1 8 2.83M22 12A10 10 0 0 0 12 2v10z"/>'],
            ['route' => 'user.transaction.log', 'name' => 'Transactions', 'color' => 'text-amber-500', 'svg' => '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/>'],
            ['route' => 'user.deposit', 'name' => 'Deposit', 'color' => 'text-emerald-400', 'svg' => '<rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/>'],
            ['route' => 'user.deposit.log', 'name' => 'Deposit Log', 'color' => 'text-zinc-400', 'svg' => '<path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>'],
            ['route' => 'user.withdrawMethod', 'name' => 'Withdraw', 'color' => 'text-red-400', 'svg' => '<path d="M3 21h18M3 10h18M5 6l7-3 7 3M4 10v11M11 10v11M15 10v11M20 10v11"/>'],
            ['route' => 'user.transfer_money', 'name' => 'Transfer', 'color' => 'text-indigo-400', 'svg' => '<polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/>'],
            ['route' => 'user.money.log', 'name' => 'Transfer Log', 'color' => 'text-zinc-400', 'svg' => '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h9z"/>'],
            ['route' => 'user.withdraw.all', 'name' => 'Withdraw Log', 'color' => 'text-zinc-400', 'svg' => '<path d="M14 22V18"/><path d="M20 22V18"/><path d="M6 12H18"/><path d="M6 16H18"/><path d="M6 20H10"/><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/>'],
            ['route' => 'user.commision', 'name' => 'Referral', 'color' => 'text-purple-400', 'svg' => '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>'],
            ['route' => 'user.profile', 'name' => 'Settings', 'color' => 'text-zinc-400', 'svg' => '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>'],
            ['route' => 'user.ticket.index', 'name' => 'Support', 'color' => 'text-orange-400', 'svg' => '<circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="4"/><line x1="4.93" y1="4.93" x2="9.17" y2="9.17"/><line x1="14.83" y1="14.83" x2="19.07" y2="19.07"/><line x1="14.83" y1="9.17" x2="19.07" y2="4.93"/><line x1="4.93" y1="19.07" x2="9.17" y2="14.83"/>'],
        ];
    @endphp

    @foreach($navigations as $nav)
    <a href="{{ route($nav['route']) }}" 
       class="group relative bg-zinc-900/40 border border-zinc-800/60 p-3 rounded-2xl flex flex-col items-center justify-center gap-2 transition-all hover:bg-zinc-900 hover:border-zinc-700 active:scale-95 cursor-pointer">
        
        <div class="p-2 rounded-xl bg-zinc-950 border border-zinc-800 {{ $nav['color'] }} transition-transform group-hover:-translate-y-1 pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                {!! $nav['svg'] !!}
            </svg>
        </div>
        
        <span class="text-zinc-400 text-[10px] font-bold leading-none text-center truncate w-full group-hover:text-zinc-200 transition-colors pointer-events-none">
            {{ __($nav['name']) }}
        </span>
    </a>
    @endforeach
</div>
</div>



<div class="mt-8 px-1">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Recent Transactions') }}</h3>
        <a href="{{ route('user.interest.log') }}" class="text-emerald-500 text-[10px] font-bold uppercase tracking-wider hover:underline">View All</a>
    </div>

<div class="space-y-3">
    @forelse ($interestLogs as $log)
        {{-- Normalize variables for dual-table support --}}
        @php
            $val = $log->interest_amount ?? $log->amount ?? 0;
            $isProfit = isset($log->interest_amount);
            $isNegative = $val < 0;
        @endphp

        <div class="bg-zinc-900/40 border border-zinc-800/60 p-4 rounded-2xl flex flex-wrap items-start justify-between gap-4 group transition-all hover:bg-zinc-900/80">
            
            <div class="flex items-center gap-4 min-w-[140px] flex-1">
                {{-- Dynamic Icon & Color --}}
                <div class="h-10 w-10 rounded-xl {{ $isNegative ? 'bg-red-500/10 border-red-500/20 text-red-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500' }} border flex items-center justify-center shrink-0">
                    @if($isProfit)
                        {{-- Icon for Plan Interest/Earnings --}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"></line><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg>
                    @else
                        {{-- Icon for Manual Balance Adjustments --}}
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><polyline points="17 11 19 13 23 9"></polyline></svg>
                    @endif
                </div>

                <div class="min-w-0">
                    <h4 class="text-white text-sm font-bold truncate tracking-tight">
                        @if($isProfit)
                            {{ $log->payment->plan->plan_name ?? 'Returns' }}
                        @else
                            {{ $log->remark ?? 'System Adjustment' }}
                        @endif
                    </h4>
                    <div class="flex flex-wrap items-center gap-x-2 gap-y-1 mt-0.5">
                        <span class="text-zinc-500 text-[10px] font-medium tracking-wider uppercase whitespace-nowrap">
                            {{ $isProfit ? 'TRX' : 'ADJ' }}-{{ $log->id }}
                        </span>
                        <span class="hidden xs:block h-1 w-1 rounded-full bg-zinc-700"></span>
                        <span class="text-zinc-500 text-[10px] font-medium whitespace-nowrap">{{ $log->created_at->format('M d, H:i') }}</span>
                    </div>
                </div>
            </div>

            <div class="text-left sm:text-right flex flex-col items-start sm:items-end justify-center min-w-[80px]">
                {{-- Amount Logic --}}
                <div class="{{ $isNegative ? 'text-red-400' : 'text-emerald-400' }} text-sm font-black tracking-tight whitespace-nowrap">
                    {{ $isNegative ? '-' : '+' }}{{ @Auth::user()->currency }}{{ number_format(abs($val), 2) }}
                </div>

                {{-- Status Badge --}}
                <div class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full {{ $isNegative ? 'bg-red-500/10 border-red-500/20 text-red-500' : 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500' }} border text-[9px] font-bold uppercase mt-1">
                    @if($isNegative)
                        Deduction
                    @else
                        {{ $isProfit ? 'Earned' : 'Credit' }}
                    @endif
                </div>
            </div>
        </div>
    @empty
        <div class="bg-zinc-900/20 border border-dashed border-zinc-800 rounded-2xl p-8 text-center">
            <p class="text-zinc-500 text-xs font-medium">{{ __('No Transactions Yet') }}</p>
        </div>
    @endforelse
</div>
</div>

<div class="mt-8 px-1 pb-10">
    <div class="flex items-center justify-between mb-4">
        <h3 class="text-zinc-500 text-[10px] font-black uppercase tracking-[0.2em]">{{ __('Notifications') }}</h3>
    </div>
    
    

    <div class="space-y-3">
        @forelse($notifications as $notification)
            <div class="bg-zinc-900/40 border border-zinc-800/60 p-4 rounded-2xl relative overflow-hidden group transition-all hover:border-zinc-700">
                <div class="absolute left-0 top-0 bottom-0 w-1 bg-red-500 opacity-60"></div>
                
                <div class="flex flex-wrap sm:flex-nowrap items-start gap-3">
                    <div class="mt-1 h-8 w-8 rounded-lg bg-red-500/10 flex items-center justify-center text-red-500 shrink-0">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
                    </div>
                    
                    <div class="min-w-0 flex-1">
                        <h5 class="text-white text-xs font-bold mb-1 leading-snug break-words">{{ $notification->subject }}</h5>
                        <p class="text-zinc-400 text-[11px] leading-relaxed break-words">
                            {!! \Illuminate\Support\Str::limit(strip_tags($notification->message), 80, '...') !!}
                            <a href="{{ route('user.notification') }}" class="text-emerald-500 font-bold ml-1 hover:underline text-[10px] uppercase tracking-tighter italic whitespace-nowrap">View more</a>
                        </p>
                    </div>
                </div>
            </div>
        @empty
            <div class="bg-zinc-900/20 border border-dashed border-zinc-800 rounded-2xl p-8 text-center">
                <p class="text-zinc-500 text-xs font-medium">No notifications found.</p>
            </div>
        @endforelse
    </div>
</div>

        <div class="bg-zinc-900/30 border border-zinc-800/50 p-6 rounded-2xl">
            <label class="block text-zinc-500 text-xs font-black uppercase tracking-widest mb-3 leading-none">{{ __('Your referral link') }}</label>
            <div class="flex flex-col sm:flex-row gap-2">
                <input type="text" id="refer-link" class="bg-zinc-950 border border-zinc-800 text-zinc-300 text-sm rounded-xl focus:ring-1 focus:ring-emerald-500 block w-full p-4 outline-none font-mono" value="{{ route('user.register', @Auth::user()->username) }}" readonly>
                <button type="button" class="bg-emerald-600 hover:bg-emerald-500 text-white px-8 py-3 rounded-xl font-bold transition-all shadow-lg shadow-emerald-900/20 active:scale-95 whitespace-nowrap">
                    {{ __('Copy Link') }}
                </button>
            </div>
        </div>
    </div>
</div>


        <div class="modal fade" id="planDelete" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <form action="" method="post">
                    @csrf
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Delete Plan</h5>
                            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            @foreach (auth()->user()->payments()->where('payment_status', 1)->get() as $pay)
                                <div class="form-group site-radio">

                                    <input type="radio" name="plan" value="{{ $pay->plan->id }}"
                                        id="planDeletelabel-{{ $loop->iteration }}">

                                    <label for="planDeletelabel-{{ $loop->iteration }}">
                                        {{ $pay->plan->plan_name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary">Delete</button>
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    @endsection

    @push('style')
        <style>
            .modal-backdrop.fade.show {
                display: none;
            }

            @media (max-width: 991px) {
                #header.header-inner-pages {
                    display: block;
                    background: transparent !important;
                    position: absolute;
                }

                .dashboard-body-part {
                    padding-top: 80px;
                }
            }

            .sp-referral .single-child {
                padding: 6px 10px;
                border-radius: 5px;
            }

            .sp-referral .single-child+.single-child {
                margin-top: 15px;
            }

            .sp-referral .single-child p {
                display: flex;
                align-items: center;
                margin-bottom: 0;
            }

            .sp-referral .single-child p img {
                width: 35px;
                height: 35px;
                border-radius: 50%;
                object-fit: cover;
                -o-object-fit: cover;
            }

            .sp-referral .single-child p span {
                width: calc(100% - 35px);
                font-size: 14px;
                padding-left: 10px;
            }

            .sp-referral>.single-child.root-child>p img {
                border: 2px solid #c3c3c3;
            }

            .sub-child-list {
                position: relative;
                padding-left: 35px;
            }

            .sub-child-list::before {
                position: absolute;
                content: '';
                top: 0;
                left: 17px;
                width: 1px;
                height: 100%;
                background-color: #a1a1a1;
            }

            .sub-child-list>.single-child {
                position: relative;
            }

            .sub-child-list>.single-child::before {
                position: absolute;
                content: '';
                left: -18px;
                top: 21px;
                width: 30px;
                height: 5px;
                border-left: 1px solid #a1a1a1;
                border-bottom: 1px solid #a1a1a1;
                border-radius: 0 0 0 5px;
            }

            .sub-child-list>.single-child>p img {
                border: 2px solid #c3c3c3;
            }
        </style>
    @endpush

    @push('script')
        <script>
            'use strict';

            $('.planDelete').on('click', function() {
                const modal = $('#planDelete');

                modal.find('form').attr('action', $(this).data('href'))

                modal.modal('show')


            })

            var copyButton = document.querySelector('.copy');
            var copyInput = document.querySelector('.copy-text');
            copyButton.addEventListener('click', function(e) {
                e.preventDefault();
                var text = copyInput.select();
                document.execCommand('copy');
            });
            copyInput.addEventListener('click', function() {
                this.select();
            });

            
        $('.mobile-card-slider').slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: '60px',
            arrows: false,
            dots: false,
            autoplay: false,
            cssEase: 'cubic-bezier(0.645, 0.045, 0.355, 1.000)',
            speed: 1500,
            autoplaySpeed: 1000,
            responsive: [
                {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 3
                }
                },
                {
                breakpoint: 768,
                settings: {
                    slidesToShow: 2
                }
                },
                {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1
                }
                }
            ]
        });
        </script>
    @endpush
