app/resources/views/subscription/index.blade.php

<x-layouts.app>
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="max-w-2xl mx-auto">
            <h1 class="text-2xl font-syncopate text-accent-blue mb-8">SUBSCRIPTION</h1>

            @if(auth()->user()->subscribed())
                <div class="border-2 border-success rounded-lg p-6 mb-6">
                    <h3 class="text-xl font-bold text-success mb-2">Active Subscription</h3>
                    <p class="text-gray-100 mb-4">You have an active subscription.</p>

                    <form action="{{ route('subscription.cancel') }}" method="POST">
                        @csrf
                        <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded transition-colors duration-200">
                            Cancel Subscription
                        </button>
                    </form>
                </div>
            @else
                <div class="border-2 border-secondary rounded-lg p-6">
                    <h3 class="text-xl font-bold text-primary mb-4">Subscribe to Dish Planner</h3>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <form action="{{ route('subscription.checkout') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan" value="monthly">
                            <div class="border border-gray-600 rounded-lg p-4 hover:border-accent-blue transition-colors">
                                <h4 class="text-lg font-bold text-white mb-2">Monthly</h4>
                                <p class="text-gray-300 mb-4">Billed monthly</p>
                                <button type="submit" class="w-full bg-accent-blue hover:bg-blue-600 text-white px-4 py-2 rounded font-bold transition-colors duration-200">
                                    Subscribe Monthly
                                </button>
                            </div>
                        </form>

                        <form action="{{ route('subscription.checkout') }}" method="POST">
                            @csrf
                            <input type="hidden" name="plan" value="yearly">
                            <div class="border border-gray-600 rounded-lg p-4 hover:border-success transition-colors">
                                <h4 class="text-lg font-bold text-white mb-2">Yearly</h4>
                                <p class="text-gray-300 mb-4">Billed annually</p>
                                <button type="submit" class="w-full bg-success hover:bg-green-600 text-white px-4 py-2 rounded font-bold transition-colors duration-200">
                                    Subscribe Yearly
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            @endif
        </div>
    </div>
</x-layouts.app>