@extends('layouts.dashboard')
@section('title', __('messages.billing_title'))

@section('dashboard_content')
<h1 class="mb-6 font-display text-2xl font-bold">{{ __('messages.billing_title') }}</h1>

<div class="mb-8 grid gap-4 sm:grid-cols-3">
    <div class="card p-4">
        <p class="text-xs uppercase text-ink/40">{{ __('messages.billing_remaining_horse_slots') }}</p>
        <p class="font-mono text-2xl font-bold text-forest">{{ $remainingHorseSlots ?? __('messages.billing_unlimited') }}</p>
    </div>
    <div class="card p-4">
        <p class="text-xs uppercase text-ink/40">{{ __('messages.billing_remaining_listing_slots') }}</p>
        <p class="font-mono text-2xl font-bold text-forest">{{ $remainingListingSlots ?? __('messages.billing_unlimited') }}</p>
    </div>
    <div class="card p-4">
        <p class="text-xs uppercase text-ink/40">{{ __('messages.billing_vip_status') }}</p>
        <p class="font-mono text-2xl font-bold {{ $isVip ? 'text-gold-dark' : 'text-ink/40' }}">{{ $isVip ? '⭐ VIP' : '—' }}</p>
    </div>
</div>

<a href="{{ route('pricing.index', ['locale' => app()->getLocale()]) }}" class="btn-primary mb-8 inline-block">{{ __('messages.pricing_buy') }}</a>

<h2 class="mb-3 font-display text-lg font-semibold">{{ __('messages.action_view') }} — Purchases</h2>
<div class="space-y-2">
    @forelse ($purchases as $p)
        <div class="card flex items-center justify-between p-3 text-sm">
            <span>{{ $p->plan->name }}</span>
            <span class="font-mono text-ink/50">{{ $p->quota_used }}/{{ $p->quota_total ?? '∞' }}</span>
            <span class="status-pill {{ $p->status === 'active' ? 'bg-green-100 text-green-800' : 'bg-ink/10 text-ink/60' }}">{{ $p->status }}</span>
        </div>
    @empty
        <p class="text-ink/40">—</p>
    @endforelse
</div>
@endsection