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

@section('content2')
<div class="min-h-screen bg-zinc-50 dark:bg-zinc-950 p-4 md:p-8 transition-colors duration-300" x-data="{ investModal: false, planId: null }">
    
    <div class="max-w-7xl mx-auto mb-8 flex items-center justify-between bg-white dark:bg-zinc-900 p-4 rounded-2xl border border-zinc-200 dark:border-zinc-800 shadow-sm">
        <h5 class="text-xl font-black text-zinc-900 dark:text-white italic uppercase tracking-tighter">{{ __('Investment Plans') }}</h5>
        <a href="{{ route('user.dashboard') }}" class="flex items-center gap-2 text-zinc-500 dark:text-zinc-400 hover:text-blue-600 transition-colors font-black uppercase text-[10px] tracking-widest">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            <span>{{ __('Back') }}</span>
        </a>
    </div>

    <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
        @forelse ($plans as $plan)
            @php
                $plan_exist = App\Models\Payment::where('plan_id', $plan->id)
                    ->where('user_id', Auth::id())
                    ->where('next_payment_date', '!=', null)
                    ->where('payment_status', 1)
                    ->count();
            @endphp

            <div class="relative group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-[2.5rem] p-8 flex flex-col justify-between shadow-xl hover:border-blue-500/50 transition-all duration-300">
                
                <div class="text-center mb-6">
                    <div class="inline-block px-4 py-1 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 text-[10px] font-black uppercase tracking-widest mb-3">
                        {{ $plan->plan_name }}
                    </div>
                    <div class="flex flex-col items-center gap-2">
                        <div class="relative">
                            <div class="absolute inset-0 bg-green-500 blur-lg opacity-20 group-hover:opacity-40 transition-opacity"></div>
                            <i data-lucide="trending-up" class="relative w-10 h-10 text-green-600 fill-green-600/10"></i>
                        </div>
                        <span class="text-zinc-400 dark:text-zinc-500 text-[10px] font-bold uppercase tracking-widest">{{ $plan->recommended }}</span>
                    </div>
                </div>

                <div class="space-y-3 mb-8">
                    @php
                        $features = [
                            ['label' => __('Minimum'), 'val' => @$general->site_currency . number_format($plan->minimum_amount, 2), 'show' => $plan->amount_type == 0],
                            ['label' => __('Maximum'), 'val' => @$general->site_currency . number_format($plan->maximum_amount, 2), 'show' => $plan->amount_type == 0],
                            ['label' => __('Fixed Amount'), 'val' => @$general->site_currency . number_format($plan->amount, 2), 'show' => $plan->amount_type != 0],
                            ['label' => $plan->return_for == 1 ? __('Duration') : __('Period'), 'val' => $plan->return_for == 1 ? $plan->how_many_time . ' ' . __('Days') : __('Lifetime')],
                            ['label' => __('ROI Schedule'), 'val' => __('Every') . ' ' . $plan->time->name],
                            ['label' => __('Capital Back'), 'val' => $plan->capital_back == 1 ? __('YES') : __('NO')],
                        ];
                    @endphp

                    @foreach($features as $feat)
                        @if($feat['show'] ?? true)
                        <div class="flex justify-between items-center p-3 rounded-xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-100 dark:border-zinc-800/50">
                            <span class="text-zinc-500 dark:text-zinc-400 text-[10px] font-black uppercase tracking-wider">{{ $feat['label'] }}</span>
                            <span class="text-zinc-900 dark:text-zinc-100 text-xs font-black">{{ $feat['val'] }}</span>
                        </div>
                        @endif
                    @endforeach
                </div>

                <div class="space-y-3">
                    @if ($plan_exist >= $plan->invest_limit)
                        <button class="w-full bg-zinc-200 dark:bg-zinc-800 text-zinc-400 font-black py-4 rounded-2xl cursor-not-allowed uppercase text-xs tracking-widest">
                            {{ __('Limit Exceeded') }}
                        </button>
                    @else
                        <a href="{{ route('user.deposit', $plan->id) }}" class="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-4 rounded-2xl text-center transition-all shadow-lg shadow-blue-600/20 uppercase text-xs tracking-widest">
                            <i data-lucide="plus-circle" class="w-4 h-4"></i>
                            {{ __('Deposit & Invest') }}
                        </a>

                        @auth
                        <button 
                            @click="investModal = true; planId = '{{ $plan->id }}'"
                            class="flex items-center justify-center gap-2 w-full bg-green-600 hover:bg-green-700 text-white font-black py-4 rounded-2xl text-center transition-all shadow-lg shadow-green-600/20 uppercase text-xs tracking-widest"
                        >
                            <i data-lucide="wallet" class="w-4 h-4"></i>
                            {{ __('Use Balance') }}
                        </button>
                        <p class="text-center text-[9px] font-black uppercase tracking-widest text-zinc-400 mt-2">
                            {{ __('Wallet Balance:') }} <span class="text-blue-600">{{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}</span>
                        </p>
                        @endauth
                    @endif
                </div>
            </div>
        @empty
            <div class="col-span-full py-20 text-center">
                <i data-lucide="package-search" class="w-12 h-12 text-zinc-300 mx-auto mb-4"></i>
                <p class="text-zinc-500 font-black uppercase tracking-widest">{{ __('No Investment Plans Available') }}</p>
            </div>
        @endforelse
    </div>

    <template x-if="investModal">
        <div class="fixed inset-0 z-[100] overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
            <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
                
                <div x-show="investModal" 
                     x-transition:enter="ease-out duration-300" 
                     x-transition:enter-start="opacity-0" 
                     x-transition:enter-end="opacity-100" 
                     @click="investModal = false"
                     class="fixed inset-0 bg-zinc-950/80 backdrop-blur-sm transition-opacity"></div>

                <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

                <div x-show="investModal"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     class="inline-block align-bottom bg-white dark:bg-zinc-900 rounded-[2.5rem] text-left overflow-hidden shadow-2xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full border-t-4 border-green-600 dark:border-green-500">
                    
                    <form action="{{route('user.investmentplan.submit')}}" method="post">
                        @csrf
                        <input type="hidden" name="plan_id" :value="planId">

                        <div class="p-8 md:p-10">
                            <div class="flex justify-between items-center mb-8">
                                <h3 class="text-2xl font-black text-zinc-900 dark:text-white italic uppercase tracking-tighter">{{ __('Confirm Investment') }}</h3>
                                <button @click="investModal = false" type="button" class="text-zinc-400 hover:text-zinc-600 transition-colors">
                                    <i data-lucide="x" class="w-6 h-6"></i>
                                </button>
                            </div>

                            <div class="space-y-6">
                                <div>
                                    <label class="block text-[10px] font-black uppercase tracking-widest text-zinc-400 mb-2">{{ __('Investment Amount') }}</label>
                                    <div class="relative">
                                        <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                            <span class="text-blue-600 font-bold">{{ @Auth::user()->currency }}</span>
                                        </div>
                                        <input type="number" name="amount" required step="any"
                                            class="w-full pl-10 pr-4 py-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950 border border-zinc-200 dark:border-zinc-800 text-zinc-900 dark:text-white focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none transition-all font-black"
                                            placeholder="0.00">
                                    </div>
                                </div>

                                <div class="p-4 rounded-2xl bg-blue-600/5 border border-blue-600/10 flex items-center gap-4">
                                    <div class="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center text-white shrink-0">
<svg 
    xmlns="http://www.w3.org/2000/svg" 
    width="20" 
    height="20" 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    stroke-width="2.5" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
    class="lucide lucide-banknote text-blue-600 dark:text-blue-400"
>
    <rect width="20" height="12" x="2" y="6" rx="2"/>
    <circle cx="12" cy="12" r="2"/>
    <path d="M6 12h.01M18 12h.01"/>
</svg>
                                    </div>
                                    <div>
                                        <p class="text-[9px] font-black uppercase tracking-[0.2em] text-blue-600 dark:text-blue-400 leading-none mb-1">{{ __('Available Funds') }}</p>
                                        <p class="text-sm font-black text-zinc-900 dark:text-white italic">
                                            {{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="p-8 bg-zinc-50 dark:bg-zinc-950/50 flex flex-col sm:flex-row gap-3">
                            <button @click="investModal = false" type="button" class="w-full sm:w-1/3 py-4 rounded-2xl text-zinc-500 font-black uppercase text-xs tracking-widest hover:bg-zinc-200 transition-all">
                                {{ __('Back') }}
                            </button>
                            <button type="submit" class="w-full sm:w-2/3 bg-green-600 hover:bg-green-700 text-white font-black py-4 rounded-2xl shadow-lg shadow-green-600/20 transition-all uppercase text-xs tracking-widest">
                                {{ __('Start Investment') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </template>
</div>
@endsection