@extends('layouts.portal')

@section('title', __('billing.title') . ' — ' . config('app.name'))
@section('page_title', __('billing.title'))
@section('page_subtitle', $subscription?->plan?->name ? __('billing.current_plan') . ': ' . $subscription->plan->name : __('billing.choose_plan'))

@section('content')

    @if ($subscription)
        <div class="card-sc mb-5">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div>
                    <p class="text-sm font-semibold text-ink-500">{{ __('billing.current_plan') }}</p>
                    <p class="text-2xl font-extrabold text-ink-900">{{ $subscription->plan?->name }}</p>
                    <p class="text-sm text-ink-500">
                        @if ($subscription->onTrial())
                            {{ __('billing.trial_ends', ['days' => $subscription->daysRemaining()]) }}
                        @elseif ($subscription->daysRemaining() !== null)
                            {{ __('billing.renews', ['days' => $subscription->daysRemaining()]) }}
                        @endif
                    </p>
                </div>

                <div class="grid gap-4 sm:grid-cols-3">
                    @foreach ([
                        ['patients', $usage['patients'], $subscription->plan?->max_patients],
                        ['menus', $usage['menus'], $subscription->plan?->max_menus_per_month],
                        ['consultants', $usage['consultants'], $subscription->plan?->max_consultants],
                    ] as [$key, $used, $limit])
                        <div class="rounded-2xl bg-ink-50 px-4 py-3 text-center">
                            <p class="numeric text-lg font-extrabold text-ink-900">
                                {{ number_format($used) }} / {{ $limit ? number_format($limit) : __('common.unlimited') }}
                            </p>
                            <p class="text-xs font-semibold text-ink-500">{{ __('billing.quota_' . $key . '_label') }}</p>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif

    <div class="mb-6 flex items-center justify-center gap-3 rounded-full border border-ink-200 bg-white px-5 py-3">
        <span class="font-semibold text-ink-700">{{ __('billing.monthly') }}</span>
        <div class="form-check form-switch m-0">
            <input class="form-check-input m-0" type="checkbox" role="switch" id="portalBillingToggle" data-billing-toggle>
        </div>
        <span class="font-semibold text-ink-700">{{ __('billing.yearly') }}</span>
    </div>

    <div class="grid gap-5 lg:grid-cols-3">
        @foreach ($plans as $plan)
            @php $isCurrent = $subscription?->plan_id === $plan->id; @endphp
            <article class="relative flex h-full flex-col rounded-4xl border-2 bg-white p-7 shadow-card
                {{ $isCurrent ? 'border-brand-500' : ($plan->is_featured ? 'border-brand-300' : 'border-ink-100') }}">

                @if ($isCurrent)
                    <span class="absolute -top-3 start-6 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white">
                        {{ __('billing.current') }}
                    </span>
                @elseif ($plan->is_featured)
                    <span class="absolute -top-3 start-6 rounded-full bg-brand-500 px-3 py-1 text-xs font-bold text-white">
                        {{ __('billing.most_popular') }}
                    </span>
                @endif

                <h2 class="text-2xl">{{ $plan->name }}</h2>
                <p class="mt-2 min-h-12 text-sm text-ink-500">{{ $plan->tagline }}</p>

                <div class="my-5 border-y border-ink-100 py-5">
                    <div data-price-monthly>
                        <span class="numeric text-3xl font-extrabold text-ink-900">{{ number_format((float) $plan->monthly_price, 0) }}</span>
                        <span class="text-sm font-semibold text-ink-500">{{ $plan->currency }} {{ __('common.per_month') }}</span>
                    </div>
                    <div data-price-yearly class="d-none">
                        <span class="numeric text-3xl font-extrabold text-ink-900">{{ number_format((float) $plan->yearly_price, 0) }}</span>
                        <span class="text-sm font-semibold text-ink-500">{{ $plan->currency }} {{ __('common.per_year') }}</span>
                    </div>
                </div>

                <ul class="mb-6 flex-1 list-none space-y-2.5 ps-0">
                    @foreach ($plan->highlights() as $highlight)
                        <li class="flex items-start gap-2 text-sm">
                            <svg class="mt-0.5 h-4 w-4 shrink-0 text-brand-500" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
                            </svg>
                            <span class="text-ink-700">{{ $highlight }}</span>
                        </li>
                    @endforeach
                </ul>

                @can('manage-billing')
                    <form method="POST" action="{{ route('portal.plans.subscribe', $plan) }}">
                        @csrf
                        <input type="hidden" name="billing_cycle" value="monthly" data-cycle-input>
                        <button type="submit" class="{{ $isCurrent ? 'btn-ghost' : 'btn-brand' }} w-full" @disabled($isCurrent)>
                            {{ $isCurrent ? __('billing.current') : __('billing.subscribe') }}
                        </button>
                    </form>
                @endcan
            </article>
        @endforeach
    </div>
@endsection