Add external subscription system

resources/views/livewire/user-subscription.blade.php

@@ -0,0 +1,58 @@
+<div class="grid grid-cols-1 lg:grid-cols-3">
+    <!-- Subscription Card -->
+    <section class="lg:col-span-3 rounded-2xl border border-white/10 shadow-black/20 overflow-hidden p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+        <div class="p-6 border-b border-white/10">
+            <div class="flex items-center justify-between gap-4">
+                <div>
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Status</h3>
+                    <p class="p-2 text-sm dark:text-gray-200 text-gray-800">
+                        Your current membership status for unlimited 4k Downloads.
+                    </p>
+                </div>
+
+                @php
+                    $isActive = auth()->user()->hasRole(\App\Enums\UserRole::SUPPORTER);
+                @endphp
+
+                <span class="inline-flex items-center gap-2 rounded-full px-3 py-1 text-sm font-medium border
+                    {{ $isActive ? 'bg-green-500/10 text-green-300 border-green-500/20' : 'bg-red-500/10 text-red-300 border-red-500/20' }}">
+                    <span class="h-2 w-2 rounded-full {{ $isActive ? 'bg-green-400' : 'bg-red-400' }}"></span>
+                    {{ $isActive ? 'Active' : 'Inactive' }}
+                </span>
+            </div>
+        </div>
+
+        <!-- Subscription Access Key -->
+        <div class="lg:col-span-3 rounded-2xl border border-blue-400/20 bg-blue-500/[0.06] shadow-2xl shadow-blue-950/20 p-6 mt-4">
+            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+                <div>
+                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">Subscription Access Key</h3>
+                    <p class="p-2 text-sm dark:text-gray-200 text-gray-800">
+                        Paste your subscription key to apply the membership status.
+                    </p>
+                </div>
+
+                <div class="w-full lg:w-auto">
+                    <div class="flex flex-col sm:flex-row gap-3">
+                        <input
+                            id="subscriptionKey"
+                            type="text"
+                            value="{{ $subscriptionKey }}"
+                            wire:model="subscriptionKey"
+                            class="w-full sm:w-[420px] rounded-xl border border-white/10 dark:bg-gray-950/80 px-4 py-3 font-mono text-sm text-blue-400 dark:text-blue-200 outline-none focus:border-blue-400/50"
+                        >
+
+                        <button
+                            type="button"
+                            wire:click="applyKey"
+                            class="rounded-xl bg-rose-500 px-5 py-3 text-sm font-semibold text-white hover:bg-rose-400 transition shadow-lg shadow-rose-500/20"
+                        >
+                            Apply
+                        </button>
+                    </div>
+                    @error('subscriptionKey') <span class="text-red-500 text-sm">{{ $message }}</span> @enderror
+                </div>
+            </div>
+        </div>
+    </section>
+</div>

resources/views/profile/partials/actions.blade.php

@@ -2,6 +2,10 @@
     <div
         class="overflow-hidden mt-5 relative max-w-sm min-w-80 mx-auto bg-white/40 shadow-lg ring-1 ring-black/5 rounded-xl items-center gap-6 dark:bg-neutral-950/40 backdrop-blur dark:highlight-white/5">
         <div class="flex flex-col p-2">
+            <a class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if(request()->routeIs('profile.subscription')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"
+                href="{{ route('profile.subscription') }}"><i class="fa-solid fa-hand-holding-dollar pr-4"></i></i>
+                Subscription</a>
+
             <a class="block w-full px-4 py-2 rounded-lg text-left text-lg leading-5 text-gray-700 dark:text-gray-300 @if(request()->routeIs('profile.settings')) bg-rose-900/40 @endif hover:bg-neutral-100/60 dark:hover:bg-neutral-900/60 focus:outline-none focus:bg-neutral-100 dark:focus:bg-neutral-800 transition duration-150 ease-in-out"
                 href="{{ route('profile.settings') }}"><i class="fa-solid fa-gear pr-4"></i>
                 Settings</a>

resources/views/profile/subscription.blade.php

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+@include('partials.head')
+<body class="font-sans antialiased">
+    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+        @include('layouts.navigation')
+        <!-- Page Content -->
+        <main>
+            @include('partials.background')
+            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row">
+                <div class="flex flex-col md:flex-row">
+                    @include('profile.partials.sidebar')
+                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
+                        @livewire('user-subscription', ['user' => $user])
+                    </div>
+                </div>
+            </div>
+        </main>
+        @include('layouts.footer')
+    </div>
+</body>
+</html>