@extends('layouts.account')

@section('title', __('Plans'))
@section('heading', __('Plans'))
@section('subheading', __('Pick what fits how much you list.'))

@section('account')
    @if (session('error'))
        <x-alert type="error" class="mb-6">{{ session('error') }}</x-alert>
    @endif

    <div class="grid gap-6 lg:grid-cols-3">
        @foreach ($plans as $plan)
            @php($isCurrent = $current?->plan_id === $plan->id)

            <div @class([
                'flex flex-col rounded-2xl border bg-surface p-6',
                'border-primary shadow-raised' => $isCurrent,
                'border-border' => ! $isCurrent,
            ])>
                <div class="flex items-start justify-between gap-3">
                    <h2 class="font-display text-title font-bold text-text">{{ $plan->name }}</h2>

                    @if ($isCurrent)
                        <x-badge variant="brand">{{ __('Your plan') }}</x-badge>
                    @endif
                </div>

                @if ($plan->description)
                    <p class="mt-1.5 text-sm text-text-secondary">{{ $plan->description }}</p>
                @endif

                <p class="mt-4 font-display text-display font-bold text-text">
                    {{ $plan->formattedPrice() }}
                </p>

                @unless ($plan->isFree())
                    <p class="text-sm text-text-muted">{{ $plan->periodLabel() }}</p>
                @endunless

                @if ($plan->features)
                    <ul class="mt-5 space-y-2">
                        @foreach ($plan->features as $feature)
                            <li class="flex items-start gap-2 text-sm text-text-secondary">
                                <x-icon name="check" class="mt-0.5 size-4 shrink-0 text-success" />
                                {{ $feature }}
                            </li>
                        @endforeach
                    </ul>
                @endif

                <div class="mt-auto pt-6">
                    @if ($isCurrent)
                        <button type="button" class="btn btn-outline w-full" disabled>{{ __('Current plan') }}</button>
                    @else
                        <form action="{{ route('account.billing.subscribe', $plan) }}" method="POST" class="space-y-3">
                            @csrf

                            {{-- The checkout never names a gateway: it offers
                                 whatever is configured and available. --}}
                            @if (! $plan->isFree() && count($gateways) > 1)
                                <label for="gateway-{{ $plan->id }}" class="form-label">{{ __('Pay by') }}</label>

                                <select id="gateway-{{ $plan->id }}" name="gateway" class="form-input">
                                    @foreach ($gateways as $name => $gateway)
                                        <option value="{{ $name }}">{{ $gateway->label() }}</option>
                                    @endforeach
                                </select>
                            @elseif (! $plan->isFree() && count($gateways) === 1)
                                <input type="hidden" name="gateway" value="{{ array_key_first($gateways) }}">
                            @endif

                            <button type="submit" class="btn btn-primary w-full"
                                    @disabled(! $plan->isFree() && $gateways === [])>
                                {{ $plan->isFree() ? __('Switch to this plan') : __('Choose this plan') }}
                            </button>

                            @if (! $plan->isFree() && $gateways === [])
                                <p class="text-xs text-text-muted">
                                    {{ __('No payment method is set up yet. Please contact us.') }}
                                </p>
                            @endif
                        </form>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <p class="mt-8 text-sm text-text-muted">
        {{ __('Changing plan replaces the one you are on. A plan you cancel keeps running until the period you paid for runs out.') }}
    </p>
@endsection