@extends('layouts.user')

@section('title')
    AI Purchase
@endsection

@section('content')

<!-- Start Hero -->
<section class="relative table w-full py-20 lg:py-24 md:pt-28 bg-gray-50 dark:bg-slate-800">
            <div class="container relative">
                <div class="grid grid-cols-1 mt-14">
                    <h3 class="text-3xl font-semibold leading-normal">{{ ucfirst($plan->name) }}</h3>
                </div><!--end grid-->

                <div class="relative mt-3">
                    <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 duration-500 ease-in-out hover:text-orange-500"><a href="#">AI Bots</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">Plan Purchase</li>
                    </ul>
                </div>
            </div><!--end container-->
        </section><!--end section-->
        <!-- End Hero -->
        <div class="px-4">
            <x-alert/>
        </div>
        <!-- Start -->
        <section class="relative py-16 md:py-24">
            <div class="container relative">
                <div class="grid items-center grid-cols-1 gap-6 md:grid-cols-1">

                    <div class="">
                        <h5 class="text-2xl font-semibold">{{ ucfirst($plan->name) }}</h5>
                        <div class="mt-2">
                            <span class="font-semibold text-slate-400 me-1">Plan Name: <span class="text-dark">${{ ucfirst($plan->name) }}</span></span>
                        </div>

                        <div class="mt-2">
                            <span class="font-semibold text-slate-400 me-1">Plan Price: <span class="text-2xl text-dark">${{ number_format($plan->price, 2) }}</span></span>
                        </div>

                        <div class="mt-2">
                            <span class="font-semibold text-slate-400 me-1">Access Capacity: One time funding Access until next purchase</span>
                        </div>

                        <div class="mt-2">
                            <span class="font-semibold text-slate-400 me-1">Capital Capacity: <span class="text-dark">${{ number_format($plan->min_fund, 2) }} - ${{ number_format($plan->max_fund, 2) }}</span></span>
                        </div>
                        
                        <div class="mt-4">
                            <h5 class="text-lg font-semibold">Description :</h5>
                            <p class="mt-2 text-slate-400">{{ $plan->description }}</p>
                        </div>

                        <form class="" action="{{ route('ai-buy', $plan->id) }}" method="post">
                            @csrf
                            <small>Note: Payment amount will be deducted from your main wallet, do well to deposit into your wallet before you proceed </small>
                            <div class="mt-4 space-x-1">
                                <button type="submit" class="inline-block px-6 py-2 mt-2 text-base font-semibold tracking-wide text-center text-white align-middle bg-orange-500 rounded-md" onclick="return confirm('You are about to purchase the {{ $plan->name }} Plan for ${{ number_format($plan->price, 2) }}. Do you want to proceed? ');">
                                    Purchase Plan
                                </button>
                            </div>
                        </form>
                    </div><!--end content-->
                </div><!--end grid-->
            </div><!--end container-->
        </section><!--end section-->
        <!-- End -->

@endsection