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

@section('content2')
<div class="space-y-10">

    <header class="flex items-center justify-between px-2">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-blue-600/10 flex items-center justify-center text-blue-600">
                <i data-lucide="banknote" class="w-5 h-5"></i>
            </div>
            <h1 class="text-2xl font-black text-slate-900 dark:text-white uppercase tracking-tighter italic">{{ __('Withdrawal Methods') }}</h1>
        </div>
        <a href="{{ route('user.dashboard') }}" 
           class="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-slate-500 hover:text-blue-600 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            {{ __('Back to Dashboard') }}
        </a>
    </header>

    <div class="relative overflow-hidden bg-white dark:bg-slate-900 rounded-[2.5rem] p-8 md:p-10 shadow-2xl border border-slate-200 dark:border-slate-800/50">
        <div class="absolute -right-20 -top-20 w-64 h-64 bg-emerald-500/10 rounded-full blur-3xl"></div>
        
        <div class="relative flex flex-col md:flex-row md:items-center justify-between gap-6">
            <div>
                <p class="text-[10px] font-black text-slate-400 dark:text-slate-500 uppercase tracking-[0.2em] mb-2">{{ __('Available for Payout') }}</p>
                <div class="flex items-baseline gap-2">
                    <span class="text-4xl md:text-5xl font-black text-slate-900 dark:text-white tracking-tighter italic">
                        {{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}
                    </span>
                    <!--<span class="text-sm font-bold text-emerald-500 uppercase tracking-widest">USD</span>-->
                </div>
            </div>
            
            <div class="flex items-center gap-4 bg-slate-50 dark:bg-slate-950 p-4 rounded-3xl border border-slate-100 dark:border-slate-800">
                <div class="w-12 h-12 bg-emerald-500/20 rounded-2xl flex items-center justify-center text-emerald-600">
                    <i data-lucide="wallet" class="w-6 h-6"></i>
                </div>
                <div>
                    <p class="text-[9px] font-black text-slate-400 uppercase tracking-wider">{{ __('Status') }}</p>
                    <p class="text-xs font-black text-slate-900 dark:text-white uppercase italic">{{ __('Verified Account') }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-8">
        <div class="text-center md:text-left">
            <h2 class="text-xl font-black text-slate-900 dark:text-white uppercase tracking-tighter italic">{{ __('Select Gateway') }}</h2>
            <p class="text-slate-500 dark:text-slate-400 text-[10px] font-bold uppercase tracking-[0.2em] mt-1">{{ __('Choose your preferred settlement method') }}</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            @forelse($withdraws as $method)
                <a href="{{ route('user.withdraw.process', $method->id) }}" 
                   class="group relative bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800/50 rounded-[2.5rem] p-8 transition-all duration-500 hover:border-blue-500 hover:shadow-2xl hover:shadow-blue-600/10 hover:-translate-y-2 overflow-hidden text-center">
                    
                    <div class="absolute inset-0 bg-gradient-to-b from-blue-600/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>

                    <div class="relative mx-auto mb-6 h-20 w-20 bg-slate-50 dark:bg-slate-950 rounded-[2rem] flex items-center justify-center text-slate-400 dark:text-slate-600 group-hover:bg-blue-600 group-hover:text-white transition-all duration-500 border border-slate-100 dark:border-slate-800 shadow-inner">
                        @if(str_contains(strtolower($method->name), 'crypto'))
                            <i data-lucide="bitcoin" class="w-10 h-10"></i>
                        @elseif(str_contains(strtolower($method->name), 'bank'))
                            <i data-lucide="landmark" class="w-10 h-10"></i>
                        @else
                            <i data-lucide="credit-card" class="w-10 h-10"></i>
                        @endif
                    </div>

                    <h3 class="relative text-lg font-black text-slate-900 dark:text-white uppercase tracking-tighter italic group-hover:text-blue-600 transition-colors">
                        {{ __($method->name) }}
                    </h3>
                    
                    <div class="relative mt-6 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.2em] text-slate-400 group-hover:text-blue-600 transition-all">
                        {{ __('Initiate Payout') }} 
                        <i data-lucide="chevron-right" class="w-4 h-4 group-hover:translate-x-2 transition-transform"></i>
                    </div>
                </a>
            @empty
                <div class="col-span-full py-20 bg-slate-50 dark:bg-slate-900/30 border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-[2.5rem] text-center">
                    <div class="w-16 h-16 bg-white dark:bg-slate-900 rounded-2xl flex items-center justify-center text-slate-300 dark:text-slate-700 mx-auto mb-4 border border-slate-200 dark:border-slate-800">
                        <i data-lucide="inbox" class="w-8 h-8"></i>
                    </div>
                    <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ __('No withdrawal methods active at this time.') }}</p>
                </div>
            @endforelse
        </div>
    </div>
</div>
@endsection