@extends('layouts.base')

@section('content')
<section class="py-16 bg-gray-50">
  <div class="container mx-auto px-4">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-extrabold text-gray-900">Choose Your Plan</h1>
      <p class="mt-4 text-gray-600 max-w-2xl mx-auto">Select a subscription plan that fits your needs. Upgrade or cancel anytime.</p>
    </div>

    <div class="grid gap-8 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4">
      @forelse($plans as $plan)
      <div class="bg-white rounded-t-3xl shadow-md hover:shadow-xl transform hover:-translate-y-1 transition duration-300 border border-gray-200 flex flex-col  border-2 border-gray-800 bg-white shadow-lg">
        
        <!-- Header -->
        <div class="p-6 text-center">
          <h2 class="text-2xl font-bold text-gray-500 mb-2">{{$plan->name}}</h2>
          <div class=" border-b border-gray-200 border-t py-8">
             <p class="mt-4 text-3xl font-extrabold text-gray-500">
            ${{__format_number(__plan_duration_amount_per_month($plan->price , $plan->duration_days))}}<span class="text-lg font-normal">/mo</span>
          </p>
             <p class="mt-1 text-gray-500 text-sm">
            Billed $<span class="bai-membership-price-js" data-level="11">{{__format_number($plan->price)}}</span> - {{ucfirst(__plan_billing_cycle($plan->duration_days))}}
          </p> 
          </div>
          
        </div>

        <!-- Features -->
        <div class="p-6 flex-1 flex flex-col justify-between">
          <ul class="space-y-4 mb-6">
            @if(is_array($plan->features))
              @forelse($plan->features as $feature)
              <li class="flex items-center mb-4">
                <svg class="w-5 h-5 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414L9 14.414l-3.707-3.707a1 1 0 011.414-1.414L9 11.586l6.293-6.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                </svg>
                {{$feature}}
              </li>
              @empty
              @endforelse
            @endif
          </ul>

          <!-- Button -->
          <form method="POST" action="{{ route('user.subscription.choose') }}">
            @csrf
            <input type="hidden" name="plan_id" value="{{ __the_hash($plan->id ) }}">
            <button type="submit" class="w-full bg-gray-900 hover:bg-gray-800 text-white font-semibold py-3 px-6 rounded-xl transition">
              Get Access
            </button>
          </form>
        </div>
      </div>
      @empty
        <p class="col-span-full text-center text-gray-500">No plans available at the moment.</p>
      @endforelse
    </div>

    <div class="mt-12 text-center">
      <a href="{{secure_url('dashboard')}}" class="text-gray-900 hover:text-gray-700 font-semibold transition">Go to dashboard</a>
    </div>
  </div>
</section>


@endsection