@extends('layouts.app')
@section('title', __('messages.pricing_title'))

@section('content')
<div class="mx-auto max-w-6xl px-4 py-10">
    <h1 class="mb-2 font-display text-3xl font-bold">{{ __('messages.pricing_title') }}</h1>
    <p class="mb-10 text-ink/60">{{ __('messages.register_roles_hint') }}</p>

    @foreach ([
        ['title' => __('messages.pricing_horse_slots'), 'plans' => $horseSlotPlans],
        ['title' => __('messages.pricing_listings'), 'plans' => $listingPlans],
        ['title' => __('messages.pricing_vip'), 'plans' => $vipPlans],
        ['title' => 'დოღის განთავსება', 'plans' => $racePostingPlans],
        ['title' => 'პროფესიული როლის მოთხოვნა', 'plans' => $rolePlans],
    ] as $group)
        @if ($group['plans']->isNotEmpty())
            <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ $group['title'] }}</h2>
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($group['plans'] as $plan)
                    <div class="card flex flex-col justify-between p-5">
                        <div>
                            <h3 class="font-display text-lg font-semibold">{{ $plan->name }}</h3>
                            @if ($plan->feature === 'role_request' && $plan->role_slug)
                                <p class="mt-1 text-xs font-semibold uppercase tracking-wide text-forest">როლი: {{ $plan->role_slug }}</p>
                            @endif
                            @if ($plan->description)
                                <p class="mt-1 text-sm text-ink/60">{{ $plan->description }}</p>
                            @endif
                            @if ($plan->features)
                                <ul class="mt-3 space-y-1 text-sm text-ink/70">
                                    @foreach ($plan->features as $feature)
                                        <li>✓ {{ $feature }}</li>
                                    @endforeach
                                </ul>
                            @endif
                        </div>

                        <div class="mt-5 flex items-center justify-between">
                            <span class="font-mono text-2xl font-bold text-forest">
                                @if ($plan->isCurrentlyFree())
                                    {{ __('messages.pricing_free') }}
                                @else
                                    {{ number_format($plan->price, 0) }} {{ $plan->currency }}
                                @endif
                            </span>

                            @auth
                                <form action="{{ route('dashboard.billing.buy', ['locale' => app()->getLocale(), 'plan' => $plan]) }}" method="POST">
                                    @csrf
                                    <button type="submit" class="btn-primary !px-4 !py-2 text-sm">{{ __('messages.pricing_buy') }}</button>
                                </form>
                            @else
                                <a href="{{ route('login', ['locale' => app()->getLocale()]) }}" class="btn-primary !px-4 !py-2 text-sm">{{ __('messages.pricing_buy') }}</a>
                            @endauth
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    @endforeach
</div>
@endsection