@extends('layouts.account')

@section('title', __('Billing'))
@section('heading', __('Billing'))
@section('subheading', __('Your plan, your payments and your invoices.'))

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

    <section class="mb-10" aria-labelledby="plan">
        <h2 id="plan" class="mb-4 font-display text-title font-bold text-text">{{ __('Your plan') }}</h2>

        <div class="rounded-xl border border-border bg-surface p-5 sm:p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <p class="font-display text-headline font-bold text-text">
                        {{ $plan?->name ?? __('No plan') }}
                    </p>

                    <p class="mt-1 text-sm text-text-secondary">
                        {{ $plan?->formattedPrice() }}
                        @if ($plan && ! $plan->isFree()) {{ $plan->periodLabel() }} @endif
                    </p>
                </div>

                @if ($subscription)
                    <x-badge :variant="$subscription->status->badgeVariant()">
                        {{ $subscription->status->label() }}
                    </x-badge>
                @endif
            </div>

            @if ($plan?->features)
                <ul class="mt-4 grid gap-2 sm:grid-cols-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

            {{-- A cancellation notice has to say when the plan actually stops,
                 not just that it was cancelled: the two are different dates. --}}
            @if ($subscription?->endsWithoutRenewal())
                <div class="mt-5 rounded-lg bg-surface-muted p-4">
                    <p class="text-sm text-text-secondary">
                        {{ __('This plan stays active until :date and will not renew.', [
                            'date' => $subscription->ends_at?->format('j F Y'),
                        ]) }}
                    </p>

                    <form action="{{ route('account.billing.resume') }}" method="POST" class="mt-3">
                        @csrf
                        <button type="submit" class="btn-outline btn-sm">{{ __('Keep it renewing') }}</button>
                    </form>
                </div>
            @elseif ($subscription?->ends_at)
                <p class="mt-4 text-sm text-text-muted">
                    {{ __('Renews on :date.', ['date' => $subscription->ends_at->format('j F Y')]) }}
                </p>
            @endif

            <div class="mt-5 flex flex-wrap gap-3 border-t border-border pt-5">
                <a href="{{ route('account.billing.plans') }}" class="btn btn-primary">
                    {{ $subscription ? __('Change plan') : __('Choose a plan') }}
                </a>

                @if ($subscription && ! $subscription->isCancelled())
                    <form action="{{ route('account.billing.cancel') }}" method="POST">
                        @csrf
                        <button type="submit" class="btn-ghost">{{ __('Cancel') }}</button>
                    </form>
                @endif
            </div>
        </div>
    </section>

    <section class="mb-10" aria-labelledby="payments">
        <h2 id="payments" class="mb-4 font-display text-title font-bold text-text">{{ __('Payments') }}</h2>

        @if ($payments->isEmpty())
            <x-empty-state icon="tag" :title="__('Nothing yet')"
                           :message="__('Payments appear here once you buy a plan or promote a listing.')" />
        @else
            <div class="overflow-x-auto rounded-xl border border-border bg-surface">
                <table class="w-full text-left text-sm">
                    <thead class="border-b border-border text-xs uppercase tracking-wide text-text-muted">
                        <tr>
                            <th class="px-4 py-3 font-semibold">{{ __('Reference') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('For') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('Amount') }}</th>
                            <th class="px-4 py-3 font-semibold">{{ __('Status') }}</th>
                            <th class="px-4 py-3"><span class="sr-only">{{ __('Actions') }}</span></th>
                        </tr>
                    </thead>

                    <tbody class="divide-y divide-border">
                        @foreach ($payments as $payment)
                            <tr>
                                <td class="whitespace-nowrap px-4 py-3">
                                    <span class="meta-label">{{ $payment->reference }}</span>
                                    <span class="mt-0.5 block text-xs text-text-muted">
                                        {{ $payment->created_at->format('j M Y') }}
                                    </span>
                                </td>

                                <td class="px-4 py-3 text-text-secondary">
                                    @if ($payment->payable instanceof \App\Models\Subscription)
                                        {{ $payment->payable->plan?->name }}
                                    @elseif ($payment->payable instanceof \App\Models\ListingPromotion)
                                        {{ $payment->payable->type->label() }}
                                    @else
                                        {{ __('Marketplace services') }}
                                    @endif
                                </td>

                                <td class="whitespace-nowrap px-4 py-3 text-text">{{ $payment->formattedAmount() }}</td>

                                <td class="px-4 py-3">
                                    <x-badge :variant="$payment->status->badgeVariant()">
                                        {{ $payment->status->label() }}
                                    </x-badge>
                                </td>

                                <td class="whitespace-nowrap px-4 py-3 text-right">
                                    @if ($payment->status->isOpen())
                                        <a href="{{ route('account.billing.pay', $payment) }}" class="btn-outline btn-sm">
                                            {{ __('Finish paying') }}
                                        </a>
                                    @elseif ($payment->invoice)
                                        <a href="{{ route('account.billing.invoice', $payment->invoice) }}"
                                           class="text-sm text-text-brand hover:underline">{{ __('Invoice') }}</a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>

    @if ($invoices->isNotEmpty())
        <section aria-labelledby="invoices">
            <h2 id="invoices" class="mb-4 font-display text-title font-bold text-text">{{ __('Invoices') }}</h2>

            <ul class="space-y-2">
                @foreach ($invoices as $invoice)
                    <li>
                        <a href="{{ route('account.billing.invoice', $invoice) }}"
                           class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface px-4 py-3 transition hover:border-primary">
                            <span class="meta-label">{{ $invoice->number }}</span>

                            <span class="text-sm text-text-secondary">
                                {{ $invoice->issued_at->format('j M Y') }} &middot; {{ $invoice->formattedTotal() }}
                            </span>
                        </a>
                    </li>
                @endforeach
            </ul>
        </section>
    @endif
@endsection