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


@section('content2')
<div class="min-h-screen bg-zinc-50 dark:bg-slate-950 p-4 md:p-8 transition-colors duration-300">
    <div class="max-w-6xl mx-auto space-y-10">

        <div class="flex items-center justify-between">
            <div>
                <h5 class="text-2xl md:text-3xl font-black text-zinc-900 dark:text-white italic uppercase tracking-tighter">
                    {{ __('All navigations') }}
                </h5>
                <p class="text-[10px] font-black text-blue-600 dark:text-blue-400 uppercase tracking-[0.3em] mt-1">
                    {{ __('Choose where to visit') }}
                </p>
            </div>
            <a href="{{ route('user.dashboard') }}" 
               class="flex items-center gap-2 text-zinc-500 hover:text-blue-600 transition-colors font-black uppercase text-[10px] tracking-widest bg-white dark:bg-zinc-900 px-4 py-2.5 rounded-xl border border-zinc-200 dark:border-zinc-800 shadow-sm">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                <span class="hidden sm:inline">{{ __('Back') }}</span>
            </a>
        </div>

        <div class="space-y-4">
            <h6 class="text-[11px] font-black uppercase tracking-[0.2em] text-zinc-400 dark:text-zinc-500 ml-1">
                {{ __('Primary Actions') }}
            </h6>
            <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 md:gap-4">
                
                @php
                    $navItems = [
                        ['route' => 'user.investmentplan', 'icon' => 'piggy-bank', 'title' => 'Invest', 'color' => 'text-emerald-500'],
                        ['route' => 'user.deposit', 'icon' => 'wallet-minimal', 'title' => 'Deposit', 'color' => 'text-blue-500'],
                        ['route' => 'user.withdraw', 'icon' => 'banknote', 'title' => 'Withdraw', 'color' => 'text-red-500'],
                        ['route' => 'user.transfer_money', 'icon' => 'send', 'title' => 'Transfer', 'color' => 'text-blue-400'],
                        ['route' => 'user.2fa', 'icon' => 'shield-check', 'title' => '2FA', 'color' => 'text-zinc-400'],
                        ['route' => 'user.ticket.index', 'icon' => 'message-square-text', 'title' => 'Support', 'color' => 'text-zinc-400'],
                        ['route' => 'user.profile', 'icon' => 'settings-2', 'title' => 'Settings', 'color' => 'text-zinc-400'],
                        ['route' => 'user.commision', 'icon' => 'share', 'title' => 'Referral', 'color' => 'text-zinc-400'],
                        ['route' => 'user.kyc', 'icon' => 'user-check', 'title' => 'KYC Verification', 'color' => 'text-emerald-500'],
                        ['route' => 'user.traders', 'icon' => 'user', 'title' => 'Top Traders', 'color' => 'text-blue-500'],
                    ];
                @endphp

                @foreach($navItems as $item)
                <a href="{{ route($item['route']) }}" class="group relative flex flex-col items-center justify-center p-4 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-[2rem] hover:border-blue-600/30 hover:shadow-xl hover:shadow-blue-600/5 transition-all duration-300 aspect-square">
                    <div class="w-10 h-10 md:w-12 md:h-12 rounded-2xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800 flex items-center justify-center mb-3 group-hover:scale-110 group-hover:bg-blue-600/10 transition-all">
                        <i data-lucide="{{ $item['icon'] }}" class="w-5 h-5 md:w-6 md:h-6 {{ $item['color'] }} group-hover:text-blue-600"></i>
                    </div>
                    <span class="text-[9px] md:text-[10px] font-black uppercase tracking-widest text-zinc-600 dark:text-zinc-400 text-center leading-tight">
                        {{ __($item['title']) }}
                    </span>
                </a>
                @endforeach

            </div>
        </div>

        <div class="space-y-4">
            <h6 class="text-[11px] font-black uppercase tracking-[0.2em] text-zinc-400 dark:text-zinc-500 ml-1">
                {{ __('Data Records') }}
            </h6>
            <div class="grid grid-cols-4 md:grid-cols-6 lg:grid-cols-8 gap-3 md:gap-4">
                
                @php
                    $logItems = [
                        ['route' => 'user.invest.log', 'title' => 'Invest'],
                        ['route' => 'user.deposit.log', 'title' => 'Deposit'],
                        ['route' => 'user.withdraw.all', 'title' => 'Withdraw'],
                        ['route' => 'user.transaction.log', 'title' => 'Transactions'],
                        ['route' => 'user.interest.log', 'title' => 'Interest'],
                        ['route' => 'user.commision', 'title' => 'Referral'],
                    ];
                @endphp

                @foreach($logItems as $log)
                <a href="{{ route($log['route']) }}" class="group flex flex-col items-center justify-center p-4 bg-zinc-100/50 dark:bg-zinc-900/40 border border-transparent dark:border-zinc-800/50 rounded-[2rem] hover:bg-white dark:hover:bg-zinc-900 hover:border-zinc-200 dark:hover:border-zinc-800 transition-all aspect-square">
                    <div class="w-8 h-8 rounded-xl bg-zinc-200 dark:bg-zinc-950 flex items-center justify-center mb-2 group-hover:bg-blue-600 group-hover:text-white transition-colors">
                        <i data-lucide="history" class="w-4 h-4 text-zinc-500 dark:text-zinc-600 group-hover:text-white"></i>
                    </div>
                    <span class="text-[8px] md:text-[9px] font-black uppercase tracking-tighter text-zinc-500 dark:text-zinc-500 text-center">
                        {{ __($log['title']) }} Log
                    </span>
                </a>
                @endforeach

            </div>
        </div>

    </div>
</div>
@endsection