@extends('layouts.user')

@section('title')
    AI Plans
@endsection

@section('content')

 <!-- Start Hero -->
 <section class="relative table w-full py-20 lg:py-24 bg-gray-50 dark:bg-slate-800">
    <div class="container relative">
        <div class="grid grid-cols-1 text-center mt-14">
            <h3 class="text-3xl font-semibold leading-normal">AI Bot</h3>
            <p class="text-slate-500">Select your preferred plan from our list of AI bots to automate your arbitrage process.</p>
        </div><!--end grid-->
    </div><!--end container-->

    <div class="absolute z-10 mx-3 text-center bottom-5 start-0 end-0">
        <ul class="tracking-[0.5px] mb-0 inline-block">
            <li class="inline-block uppercase text-[13px] font-bold duration-500 ease-in-out hover:text-orange-500"><a href="{{ url('/') }}">home</a></li>
            <li class="inline-block text-base text-slate-950 dark:text-white mx-0.5 ltr:rotate-0 rtl:rotate-180"><i class="mdi mdi-chevron-right"></i></li>
            <li class="inline-block uppercase text-[13px] font-bold text-orange-500" aria-current="page">AI Bots</li>
        </ul>
    </div>
</section><!--end section-->
<!-- End Hero -->

<!-- Start -->
<section class="relative py-16 md:py-24">
    <div class="container relative">
        <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
            @foreach($plans as $plan)
                <!-- Pricing Card 2 -->
            <div class="overflow-hidden transition-transform transform bg-white border rounded-lg shadow-lg hover:scale-105">
                <div class="p-1 bg-orange-500">
                </div>
                <div class="p-8">
                    <div class="flex justify-start">
                        <img style="height: 50px;" src="{{ asset('images/bot.png') }}"/>
                    </div>
                    <h2 class="mb-4 text-2xl font-bold text-gray-800">{{ $plan->name }}</h2>
                    <p class="mb-6 text-gray-600">{{ $plan->description }}</p>
                    <p class="mb-6 text-4xl font-bold text-gray-800">${{ number_format($plan->price) }}</p>
                    <ul class="mb-6 text-sm text-gray-600">
                    <li class="flex items-center mb-2">
                        <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 13l4 4L19 7"></path>
                        </svg>
                        Minimum Funding Of ${{ number_format($plan->min_fund) }}
                    </li>
                    <li class="flex items-center mb-2">
                        <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 13l4 4L19 7"></path>
                        </svg>
                        Maximum Funding Of ${{ number_format($plan->max_fund) }}
                    </li>
                    <li class="flex items-center mb-2">
                        <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 13l4 4L19 7"></path>
                        </svg>
                        One Time Funding
                    </li>
                    <li class="flex items-center">
                        <svg class="w-4 h-4 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M5 13l4 4L19 7"></path>
                        </svg>
                        Runs For 30 days
                    </li>
                    </ul>
                </div>
                <div class="p-4">
                    <a href="{{ route('ai-purchase', $plan->name) }}"
                        class="px-6 py-3 text-center text-white bg-orange-500 rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green active:bg-green-800">
                        Purchase Plan
                    </a>
                </div>
            </div>
            @endforeach
        </div>
    </div><!--end container-->
</section><!--end section-->
<!-- End -->
@endsection