feature - 27 - Cancel subscription

resources/views/billing/index.blade.php

@@ -1,8 +1,20 @@
 <x-layouts.app>
-    <div class="px-4 sm:px-6 lg:px-8">
+    <div class="px-4 sm:px-6 lg:px-8" x-data="{ showCancelModal: false }">
         <div class="max-w-2xl mx-auto">
             <h1 class="text-2xl font-syncopate text-accent-blue mb-8">BILLING</h1>
 
+            @if (session('success'))
+                <div class="mb-6 border-2 border-success rounded-lg p-4 bg-success/10">
+                    <p class="text-success">{{ session('success') }}</p>
+                </div>
+            @endif
+
+            @if (session('error'))
+                <div class="mb-6 border-2 border-danger rounded-lg p-4 bg-danger/10">
+                    <p class="text-danger">{{ session('error') }}</p>
+                </div>
+            @endif
+
             <div class="border-2 border-secondary rounded-lg p-6">
                 <h3 class="text-xl font-bold text-primary mb-6">Subscription Details</h3>
 
@@ -43,6 +55,50 @@
                         </div>
                     @endif
                 </div>
+
+                @if(!$subscription->ends_at)
+                    <div class="mt-6 pt-6 border-t border-gray-600">
+                        <button @click="showCancelModal = true" class="text-danger hover:text-red-400 text-sm transition-colors">
+                            Cancel subscription
+                        </button>
+                    </div>
+                @endif
+            </div>
+        </div>
+
+        <!-- Cancel Confirmation Modal -->
+        <div x-show="showCancelModal"
+             x-cloak
+             x-transition:enter="transition ease-out duration-200"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-150"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+            <div @click.away="showCancelModal = false"
+                 x-transition:enter="transition ease-out duration-200"
+                 x-transition:enter-start="opacity-0 scale-95"
+                 x-transition:enter-end="opacity-100 scale-100"
+                 x-transition:leave="transition ease-in duration-150"
+                 x-transition:leave-start="opacity-100 scale-100"
+                 x-transition:leave-end="opacity-0 scale-95"
+                 class="bg-gray-700 border-2 border-secondary rounded-lg p-6 max-w-md mx-4">
+                <h3 class="text-xl font-bold text-white mb-4">Cancel Subscription?</h3>
+                <p class="text-gray-300 mb-6">
+                    Are you sure you want to cancel your subscription? You will retain access until the end of your current billing period.
+                </p>
+                <div class="flex justify-end space-x-4">
+                    <button @click="showCancelModal = false" class="px-4 py-2 text-gray-300 hover:text-white transition-colors">
+                        Keep subscription
+                    </button>
+                    <form action="{{ route('subscription.cancel') }}" method="POST">
+                        @csrf
+                        <button type="submit" class="px-4 py-2 bg-danger hover:bg-red-600 text-white rounded transition-colors">
+                            Cancel subscription
+                        </button>
+                    </form>
+                </div>
             </div>
         </div>
     </div>