@extends('layouts.account')

@section('title', __('Payment'))
@section('heading', __('Payment'))
@section('subheading', __('Reference :reference', ['reference' => $payment->reference]))

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

    <div class="max-w-2xl">
        <div class="rounded-xl border border-border bg-surface p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <p class="meta-label">{{ __('Amount due') }}</p>
                    <p class="mt-1 font-display text-display font-bold text-text">{{ $payment->formattedAmount() }}</p>
                </div>

                <x-badge :variant="$payment->status->badgeVariant()">{{ $payment->status->label() }}</x-badge>
            </div>

            <p class="mt-4 text-sm text-text-secondary">
                @if ($payment->payable instanceof \App\Models\Subscription)
                    {{ __(':plan subscription', ['plan' => $payment->payable->plan?->name]) }}
                @elseif ($payment->payable instanceof \App\Models\ListingPromotion)
                    {{ $payment->payable->type->label() }} &mdash; {{ $payment->payable->listing?->title }}
                @endif
            </p>

            {{-- Whatever the driver has to show. Asking it rather than branching
                 on its name keeps this page honest when another is added. --}}
            @if ($instructions !== [])
                <div class="mt-6 border-t border-border pt-6">
                    <h2 class="font-display text-base font-semibold text-text">{{ $gateway->label() }}</h2>

                    <dl class="mt-4 space-y-3">
                        @foreach ($instructions as $label => $value)
                            @if (filled($value))
                                <div class="flex flex-wrap justify-between gap-2 border-b border-border pb-2">
                                    <dt class="text-sm text-text-muted">{{ $label }}</dt>
                                    <dd class="text-sm font-medium text-text">{{ $value }}</dd>
                                </div>
                            @endif
                        @endforeach

                        <div class="flex flex-wrap justify-between gap-2">
                            <dt class="text-sm text-text-muted">{{ __('Quote this reference') }}</dt>
                            <dd class="meta-label text-text">{{ $payment->reference }}</dd>
                        </div>
                    </dl>

                    <p class="mt-5 rounded-lg bg-surface-muted p-4 text-sm text-text-secondary">
                        {{ __('Your plan starts once we have seen the transfer, usually the next working day.') }}
                    </p>
                </div>
            @endif

            <div class="mt-6 flex flex-wrap gap-3">
                <a href="{{ route('account.billing.index') }}" class="btn-outline">{{ __('Back to billing') }}</a>
            </div>
        </div>
    </div>
@endsection