@extends('layouts.site')
@section('title', 'Plans')

@section('content')
<div class="w-full h-full">
    <div class="container py-10">
        <div class="flex  items-center justify-center h-full w-full ">
                <h1 class="text-4xl font-bold text-primary text-shadow uppercase">NUESTROS PLANES</h1>
        </div>
    </div>
    <div class="container mx-auto ">
        <div class="py-10 text-center bg-dar">
            <p class="text-lg mt-3 ">Cada Plan incluye 7 Dias de prueba</p>
        </div>
        <hr/>
        <div class="py-10 space-x-10 flex justify-center ">
            @foreach($Plans as $plan)
                <div class="w-full md:w-1/3 my-10 h-auto ">
                    <div class="w-full h-full  flex flex-wrap items-stretch bg-white p-6 rounded-xl space-y-6 overflow-hidden  transition-all duration-500 transform hover:-translate-y-6 hover:scale-105 shadow-xl hover:shadow-2xl cursor-pointer">
                        <div class="w-full flex flex-wrap items-start ">
                            <h4 class="w-full text-2xl text-left font-bold text-gray-800 uppercase  h-auto">{{ $plan->name }}</h4>
                            <div class="w-full py-5 text-center">
                                <h1 class="w-full text-4xl  font-bold">$ {{ $plan->price }}</h1>
                                <h4 class="w-full text-sm text-center text-gray-500 ">/ {{ $plan->validity->name }}</h4>
                            </div>
                        </div>
                        <div class="w-full  flex flex-wrap items-start">
                            <p class="py-4 text-justify text-base  ">{{ $plan->desc }}</p>
                            <hr>
                            <div class="w-full min-h-[30vh] h-[30vh]  overflow-x-auto">
                                <ul class="text-sm">
                                @foreach($plan->features as $feature)
                                    <li class="my-4"><i class="fas fa-check pr-2"></i> <a href="#" >{{ $feature->name }}</a></li>
                                @endforeach
                                    @foreach($plan->features as $feature)
                                        <li class="my-4"><i class="fas fa-check pr-2"></i> <a href="#" >{{ $feature->name }}</a></li>
                                    @endforeach
                                    @foreach($plan->features as $feature)
                                        <li class="my-4"><i class="fas fa-check pr-2"></i> <a href="#" >{{ $feature->name }}</a></li>
                                    @endforeach
                            </ul>
                            </div>
                        </div>
                        <div class="w-full text-center flex items-end  ">
                            <a href="{{ route('site.plans.show',['slug'=>$plan->slug]) }}"
                               class="w-full rounded-xl  text-lg  py-4 text-white text-white bg-blue-500">Start free trial</a>
                        </div>
                    </div>
                </div>
            @endforeach

        </div>
    </div>
</div>
@endsection