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>