@extends('layouts.portal')

@section('title', __('benefits.pay_title', ['benefit' => $benefit->name]) . ' — ' . config('app.name'))
@section('page_title', __('benefits.pay_title', ['benefit' => $benefit->name]))
@section('page_subtitle', __('benefits.section_title'))

@section('content')
    <div class="card-sc mx-auto max-w-2xl">
        @include('portal.menus._recipe-icons')
        <div class="flex items-start gap-4">
            <svg class="h-10 w-10 shrink-0" style="color: #3B5A20;"><use href="#rm-ic-{{ $benefit->slug }}"/></svg>
            <div>
                <p class="text-ink-700">{{ $benefit->description }}</p>
                <p class="mt-2 font-semibold text-ink-900">
                    {{ __('benefits.pay_summary', [
                        'benefit' => $benefit->name,
                        'amount' => number_format((float) $benefit->monthly_price, 2),
                        'currency' => $benefit->currency,
                    ]) }}
                </p>
            </div>
        </div>

        @if ($errors->any())
            <div class="mt-4 rounded-2xl bg-red-50 p-4 text-sm text-red-700">{{ $errors->first() }}</div>
        @endif

        <h2 class="mt-6 text-sm font-bold uppercase tracking-wide text-ink-500">{{ __('booking.choose_payment_method') }}</h2>

        @if ($brands->isEmpty())
            <p class="mt-3 rounded-2xl bg-ink-50 p-4 text-sm text-ink-500">{{ __('benefits.payment_unavailable') }}</p>
        @else
            <div class="mt-3 grid gap-3 sm:grid-cols-2">
                @foreach ($brands as $brand)
                    <a href="{{ route('portal.benefits.checkout', ['benefit' => $benefit, 'brand' => $brand]) }}" class="btn-brand block text-center no-underline">
                        {{ __('booking.pay_with', ['brand' => __('booking.brand_' . $brand)]) }}
                    </a>
                @endforeach
            </div>
        @endif

        <a href="{{ route('portal.plans.index') }}#menu-benefits" class="mt-5 inline-block text-sm font-semibold text-ink-500">{{ __('common.cancel') }}</a>
    </div>
@endsection