@php

    use App\Models\DepositCoin;
    use App\Models\Bot;
    use Faker\Factory as Faker;

    $page_title = 'Pricing ' . site('name');
    $short_description =
        site('name') .
        ' uses advanced Ai robots trained on extensive trading data and algorithms to analyze market trends and execute profitable trades with high precision.';

    $faker = Faker::create();
    $logos = DepositCoin::inRandomOrder()->take(20)->get('logo_url');

    $bots = Bot::get();

@endphp

{{-- layout --}}
@extends('templates.' . site('template') . '.layouts.front')

@section('css')
@endsection


@section('contents')
    {{-- hero section  --}}
    <section class="pt-8 md:pt-20 px-6">
        <div class="max-w-7xl mx-auto   relative">

            <div class="absolute -left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
            <div class="absolute -right-20 -top-28 p-40 md:p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <div
                class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <div
                class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
            </div>
            <!-- Text Content -->
            <div class="flex flex-col justify-center text-center h-full">
                <h1
                    class="max-w-lg mx-auto text-3xl md:text-5xl font-bold py-1 text-transparent bg-clip-text bg-gradient-to-r from-[#5823c1] via-[#ff8ac7] to-[#feba7f]">
                    AI Bot Pricing
                </h1>
                <p class="text-[#afb3ca] my-8 text-sm md:text-lg md:max-w-5xl mx-auto">
                    We offer a diverse range of portfolio options for our advanced trading bots, ensuring that there is a
                    plan tailored to suit every budget and investment preference. Explore our selection and choose the
                    option that best aligns with your financial goals and comfort level.
                </p>

            </div>

        </div>
    </section>

    {{-- pricing section  --}}
    <section class="pt-8 md:pt-20 px-6 mb-4 md:mb-8 max-w-custom mx-auto relative">
        <!-- Desktop Only -->
        <div class="absolute left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
        <div class="absolute right-40 -top-28 p-40 md:p-80 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div
            class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>

        <!-- Mobile & Tablet Only -->
        <div class="absolute left-10 top-10 p-20 bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute right-10 top-10 p-20 md:p-40 bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute left-10 md:left-40 top-20 p-20 bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
        <div class="absolute left-10 md:left-40 bottom-10 p-20 bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>

        <h4 class="text-white text-center text-sm gradient-border-text w-fit mx-auto uppercase px-12 py-1 rounded-2xl">
            Pricing
        </h4>

        <h2 class="text-white font-bold text-2xl md:text-3xl lg:text-4xl text-center mt-4 md:mt-6">
            AI-Trading Portfolios
        </h2>

        <!-- Cards Section -->
        <div class="w-full my-10">
            <div class="grid lg:grid-cols-3 grid-cols-1 gap-10">

                @foreach ($bots as $bot)
                    <div
                        class="col-span-1 relative text-white p-6 rounded-4xl  overflow-hidden  bg-slate-800/30 backdrop-blur-sm border border-white/50 ">
                        <div class="flex gap-4 mb-4">
                            <img src="{{ asset('storage/bots/' . $bot->logo) }}" alt="icon"
                                class="rounded-full h-7 w-7">
                            <p class="text-white">{{ $bot->name }}</p>
                        </div>

                        <div class="flex text-white py-4 justify-start items-center gap-4">
                            <p class="text-3xl lg:text-5xl font-bold">{{ $bot->daily_min }}% -
                                {{ $bot->daily_max }}%</p>
                            <p class="font-bold">/day</p>
                        </div>

                        <div class="block lg:py-7 py-4 md:space-y-2">
                            <p class="flex justify-between">
                                <span class="block text-[#d8d8d8]/50 text-left">Portfolio Range</span>
                                <span class="block text-[#cac6dd] text-right">{{ site('currency_symbol') . $bot->min }} -
                                    {{ site('currency_symbol') . $bot->max }}</span>
                            </p>

                            <p class="flex justify-between">
                                <span class="block text-[#d8d8d8]/50 text-left">Daily PNL</span>
                                <span class="block text-[#cac6dd] text-right">{{ $bot->daily_min }}% -
                                    {{ $bot->daily_max }}%</span>
                            </p>

                            <p class="flex justify-between">
                                <span class="block text-[#d8d8d8]/50 text-left">Trading Duration</span>
                                <span class="block text-[#cac6dd] text-right">{{ $bot->duration }}
                                    {{ $bot->duration_type }}</span>
                            </p>

                            <p class="flex justify-between">
                                <span class="block text-[#d8d8d8]/50 text-left">Capital Returned</span>
                                <span class="block text-[#cac6dd] text-right">Yes</span>
                            </p>
                        </div>



                        <div class="block lg:py-7 py-4">
                            <p class="text-white font-bold mb-3">Tradings Days</p>
                            @php
                                $trading_days_display = [
                                    'monday' => in_array('monday', json_decode(site('trading_days'))),
                                    'tuesday' => in_array('tuesday', json_decode(site('trading_days'))),
                                    'wednesday' => in_array('wednesday', json_decode(site('trading_days'))),
                                    'thursday' => in_array('thursday', json_decode(site('trading_days'))),
                                    'friday' => in_array('friday', json_decode(site('trading_days'))),
                                    'saturday' => in_array('saturday', json_decode(site('trading_days'))),
                                    'sunday' => in_array('sunday', json_decode(site('trading_days'))),
                                ];
                            @endphp
                            @foreach ($trading_days_display as $day => $day_display)
                                <p
                                    class="flex flex-row-reverse justify-between items-center border-b-2 border-[#ffffff]/10 last:border-b-0 py-2">
                                    @if ($day_display)
                                        <img src="{{ asset('/assets/templates/trello/images/checkmark-icon.svg') }}"
                                            alt="">
                                    @else
                                        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                            class="w-4 h-4 text-red-500" viewBox="0 0 16 16">
                                            <path
                                                d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z" />
                                        </svg>
                                    @endif
                                    <span class="block text-[#B4B1B1] text-left">{{ ucfirst($day) }}</span>
                                </p>
                            @endforeach
                        </div>

                        <div class="block text-center lg:py-7">
                            <a href="{{ route('user.bots.index') }}"
                                class="px-12 py-3 rounded-xl border border-white bg-white/10 hover:bg-white/70 hover:text-black transition duration-300 cursor-pointer">Activate</a>
                        </div>
                    </div>
                @endforeach

            </div>
        </div>
    </section>


    <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6  mb-14 bg-gradient-to-r from-white/5 to-white/10 py-2 md:py-4">
        <!-- Column 1 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                3.5K+
                <span class="text-white block text-lg mt-2 md:mt-4">Users</span>
            </div>
        </div>
        <!-- Column 2 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                USD5.5M+
                <span class="text-white block text-lg mt-2 md:mt-4">Deposits</span>
            </div>
        </div>
        <!-- Column 3 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                USD10.2M+
                <span class="text-white block text-lg mt-2 md:mt-4">Withdrawals</span>
            </div>
        </div>
        <!-- Column 4 -->
        <div class="flex flex-col gap-4">
            <div class="text-white font-semibold text-4xl md:text-5xl text-center">
                200+
                <span class="text-white block text-lg mt-2 md:mt-4">Countries Supported</span>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
@endsection
