@extends('layouts.customer')

@section('content')
<div class="max-w-6xl mx-auto py-8">
    <h2 class="text-3xl font-bold mb-6">Choose Your Subscription Plan</h2>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        @forelse($plans as $plan)
        <div class="border rounded-2xl shadow-lg p-6 hover:shadow-xl transition">
            <h3 class="text-xl font-semibold mb-2">{{ $plan->name }}</h3>
            <p class="text-gray-500 mb-4">
                Price: £{{ number_format($plan->price, 2) }} <br>
                Duration: {{ $plan->duration_days }} days <br>
                Points Multiplier: ×{{ $plan->points_multiplier }} <br>
                Base Shipping Rate: £{{ number_format($plan->base_shipping_rate, 2) }}
            </p>

            <a href="{{ route('customer.subscription.subscribe', $plan) }}"
   class="block text-center bg-indigo-600 text-white font-semibold px-4 py-2 rounded-xl hover:bg-indigo-700 transition">
   Subscribe
</a>

        </div>
        @empty
        <p class="col-span-3 text-center text-gray-500">
            No subscription plans available at the moment.
        </p>
        @endforelse
    </div>
</div>
@endsection