@extends('dashboard.app')

@section('page_title', 'Subscription Details')
@section('page_subtitle', 'Plan status, provider info, and timeline.')

@section('dashboard_content')
    <a href="{{ route('dashboard.admin.subscriptions') }}" class="inline-flex items-center gap-2 text-sm text-gray-400 hover:text-white">
        <i data-lucide="arrow-left" class="w-4 h-4"></i><span>Back to subscriptions</span>
    </a>

    <div class="mt-6 grid gap-6 lg:grid-cols-3">
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Subscriber</div>
            <div class="mt-3 text-2xl font-semibold text-white">{{ $subscription->user?->name ?? '—' }}</div>
            <div class="mt-2 text-sm text-gray-400">{{ $subscription->user?->email ?? '—' }}</div>
            @if ($subscription->user)
                <a href="{{ route('dashboard.admin.users.show', $subscription->user->id) }}" class="mt-3 inline-flex items-center gap-2 text-xs text-brand-ocean hover:text-brand-oceanSoft">
                    <i data-lucide="external-link" class="w-3 h-3"></i><span>View user</span>
                </a>
            @endif
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Plan</div>
            <div class="mt-3 text-2xl font-semibold text-white">{{ $subscription->plan }}</div>
            <div class="mt-2 text-sm text-gray-400">Status: {{ $subscription->status }}</div>
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Provider</div>
            <div class="mt-3 text-2xl font-semibold text-white">{{ $subscription->provider ?? 'admin' }}</div>
            <div class="mt-2 text-sm text-gray-400">Ref: {{ $subscription->provider_ref ?? '—' }}</div>
        </div>
    </div>

    <div class="mt-8 grid gap-6 lg:grid-cols-2">
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Timeline</div>
            <div class="mt-2 text-lg font-semibold text-white">Subscription dates</div>
            <div class="mt-4 space-y-3 text-sm text-gray-300">
                <div class="flex items-center justify-between rounded-xl border border-white/10 px-4 py-3 theme-surface">
                    <span>Started</span>
                    <span class="text-gray-200">{{ $subscription->started_at?->toDateString() ?? '—' }}</span>
                </div>
                <div class="flex items-center justify-between rounded-xl border border-white/10 px-4 py-3 theme-surface">
                    <span>Expires</span>
                    <span class="text-gray-200">{{ $subscription->expires_at?->toDateString() ?? '—' }}</span>
                </div>
                <div class="flex items-center justify-between rounded-xl border border-white/10 px-4 py-3 theme-surface">
                    <span>Created</span>
                    <span class="text-gray-200">{{ $subscription->created_at?->toDateString() ?? '—' }}</span>
                </div>
            </div>
        </div>
        <div class="rounded-2xl glass-card p-6">
            <div class="text-xs uppercase tracking-[0.2em] text-gray-400">Actions</div>
            <div class="mt-2 text-lg font-semibold text-white">Manage subscription</div>
            <div class="mt-4 space-y-3 text-sm text-gray-300">
                <form method="POST" action="{{ route('dashboard.admin.subscriptions.revoke') }}" class="space-y-3">
                    @csrf
                    <input type="hidden" name="subscription_id" value="{{ $subscription->id }}">
                    <button class="w-full rounded-xl border border-white/10 px-4 py-2 text-sm font-semibold text-gray-200 hover:bg-white/5 transition-colors">Revoke subscription</button>
                </form>
            </div>
        </div>
    </div>
@endsection