@extends('layouts.app', ['title' => 'Licenses'])

@section('content')
<section class="space-y-6">
    <div class="grid gap-6 xl:grid-cols-[0.9fr_1.1fr]">
        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
            <h1 class="font-display text-3xl font-bold text-white">My licenses</h1>
            <p class="mt-2 text-sm text-slate-400">Claim purchased product keys into your account, then manage activations and domain moves from here.</p>
            <form method="POST" action="{{ route('licenses.claim') }}" class="mt-6 space-y-4">
                @csrf
                <input name="license_key" placeholder="Enter your purchased license key" title="Paste the product key you received after buying the app" class="w-full rounded-2xl border border-white/10 bg-slate-950/80 px-4 py-3 text-white font-mono" required>
                <button type="submit" class="w-full rounded-2xl bg-brand-500 px-5 py-3 font-semibold text-white">Add license to my account</button>
            </form>
        </div>
        <div class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
            <h2 class="font-display text-2xl font-semibold text-white">How it works</h2>
            <div class="mt-6 space-y-3 text-sm text-slate-300">
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">1. Add the product key you received after purchase.</div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">2. Use the installer inside your commercial app with your account email, password, and product key.</div>
                <div class="rounded-2xl border border-white/10 bg-white/5 p-4">3. If you move domains later, deactivate the old install first so the activation slot is released.</div>
            </div>
        </div>
    </div>

    <div class="grid gap-4 lg:grid-cols-2">
        @foreach ($licenses as $license)
            <article class="rounded-[2rem] border border-white/10 bg-slate-900/70 p-6">
                <div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                    <div>
                        <div class="text-xs uppercase tracking-[0.25em] text-slate-400">{{ $license->product?->name }}</div>
                        <div class="mt-2 break-all font-mono text-lg font-semibold text-white">{{ $license->license_key }}</div>
                    </div>
                    <span class="rounded-full {{ $license->status === 'active' ? 'bg-emerald-500/15 text-emerald-200' : 'bg-amber-500/15 text-amber-200' }} px-3 py-1 text-xs uppercase tracking-[0.2em]">{{ $license->status }}</span>
                </div>
                <div class="mt-5 grid gap-3 sm:grid-cols-2 text-sm">
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-slate-400">Plan</div><div class="mt-1 text-white">{{ ucfirst($license->license_type) }}</div></div>
                    <div class="rounded-2xl border border-white/10 bg-white/5 p-4"><div class="text-slate-400">Install slots</div><div class="mt-1 text-white">{{ $license->activations->whereNull('deactivated_at')->count() }}/{{ $license->activation_limit }}</div></div>
                </div>
                <div class="mt-5">
                    <div class="text-sm font-medium text-slate-300">Active domains</div>
                    <div class="mt-3 space-y-3">
                        @forelse ($license->activations->whereNull('deactivated_at') as $activation)
                            <div class="flex flex-col gap-3 rounded-2xl border border-white/10 bg-white/5 p-4 sm:flex-row sm:items-center sm:justify-between">
                                <div>
                                    <div class="font-medium text-white">{{ $activation->domain }}</div>
                                    <div class="text-xs text-slate-500">{{ $activation->installation_path ?: '/' }}</div>
                                </div>
                                <form method="POST" action="{{ route('licenses.deactivate', $license) }}">
                                    @csrf
                                    <input type="hidden" name="activation_id" value="{{ $activation->id }}">
                                    <button type="submit" class="rounded-full bg-rose-500/80 px-4 py-2 font-medium text-white">Deactivate</button>
                                </form>
                            </div>
                        @empty
                            <div class="rounded-2xl border border-dashed border-white/10 bg-white/5 p-4 text-sm text-slate-400">No active domains yet. This key is ready to be used during installation.</div>
                        @endforelse
                    </div>
                </div>
                <div class="mt-5 flex flex-wrap gap-3">
                    <form method="POST" action="{{ route('licenses.transfer', $license) }}">
                        @csrf
                        <button type="submit" class="rounded-full border border-white/15 px-4 py-2 text-sm text-slate-200">Request transfer</button>
                    </form>
                    <form method="POST" action="{{ route('licenses.remove', $license) }}">
                        @csrf
                        <button type="submit" class="rounded-full bg-rose-500/80 px-4 py-2 text-sm font-medium text-white">Remove from account</button>
                    </form>
                </div>
            </article>
        @endforeach
    </div>

    <div>{{ $licenses->links() }}</div>
</section>
@endsection