@extends('layouts.user')

@section('page-title', __('Subscription') . ' ' . $subscription->code)

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <div class="flex items-start justify-between mb-6">
            <div>
                <p class="text-sm text-gray-500">{{ __('Subscription Code') }}</p>
                <p class="text-xl font-bold font-mono">{{ $subscription->code }}</p>
            </div>
            <span class="px-3 py-1 text-sm font-medium rounded-full
                {{ $subscription->status === 'active' ? 'bg-green-100 text-green-700' : '' }}
                {{ $subscription->status === 'paused' ? 'bg-yellow-100 text-yellow-700' : '' }}
                {{ in_array($subscription->status, ['completed','cancelled','expired']) ? 'bg-gray-100 text-gray-700' : '' }}">
                {{ ucfirst($subscription->status) }}
            </span>
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div><p class="text-xs text-gray-500">{{ __('Service') }}</p><p class="font-medium text-sm">{{ $subscription->service->name }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Username') }}</p><p class="font-medium text-sm">{{ $subscription->username }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Quantity / post') }}</p><p class="font-medium text-sm">{{ number_format($subscription->quantity) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Delay') }}</p><p class="font-medium text-sm">{{ $subscription->delay }} min</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Total charge') }}</p><p class="font-medium text-sm">{{ currency($subscription->total_charge) }}</p></div>
            <div><p class="text-xs text-gray-500">{{ __('Next run') }}</p><p class="font-medium text-sm">{{ $subscription->next_run_at?->format('M d, H:i') ?? '—' }}</p></div>
        </div>
    </div>

    <div class="bg-white rounded-xl border border-gray-200 p-6">
        <h3 class="font-semibold mb-4">{{ __('Post History') }}</h3>
        <div class="space-y-3">
            @forelse($subscription->subscriptionOrders as $subOrder)
                <div class="flex items-center gap-4 p-3 border border-gray-100 rounded-lg">
                    <span class="text-xs font-medium text-gray-400 w-16">#{{ $subOrder->post_number }}</span>
                    <div class="flex-1">
                        <p class="text-sm font-medium">{{ $subOrder->order?->code ?? '—' }}</p>
                        <p class="text-xs text-gray-400">{{ $subOrder->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    <span class="text-sm font-medium">{{ currency($subOrder->amount) }}</span>
                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-gray-100 text-gray-700">{{ ucfirst($subOrder->status) }}</span>
                </div>
            @empty
                <p class="text-sm text-gray-500">{{ __('No posts boosted yet') }}</p>
            @endforelse
        </div>
    </div>
</div>
@endsection