@php use App\Support\Commerce\Money; @endphp
<x-layouts.app :title="__('Contratar :plan', ['plan' => $plan->name])" :heading="__('Contratar :app', ['app' => $plan->product->name])" :description="__('Plan :plan', ['plan' => $plan->name])">
    @if (! $workspace)
        <x-empty-state icon="lock" :title="__('No puedes contratar este plan')"
            :description="__('Para contratar necesitas ser propietario de una organización o usar tu espacio personal, y el plan debe admitir ese tipo de espacio.')">
            <x-button variant="secondary" :href="route('catalog.index')">{{ __('Volver al catálogo') }}</x-button>
        </x-empty-state>
    @else
        <div class="grid gap-6 lg:grid-cols-5">
            {{-- Paso 1: opciones (GET: recalcula el resumen en el servidor) --}}
            <x-card class="lg:col-span-3" :title="__('1. Elige las opciones')">
                <form method="GET" action="{{ route('checkout.create', $plan) }}" class="space-y-5" x-data x-on:change="$el.requestSubmit ? $el.requestSubmit() : $el.submit()">
                    <fieldset>
                        <legend class="text-sm font-medium text-slate-700">{{ __('¿Para quién es?') }}</legend>
                        <div class="mt-2 space-y-2">
                            @foreach ($targets as $target)
                                <label class="flex cursor-pointer items-start gap-3 rounded-lg border px-4 py-3 {{ $target->is($workspace) ? 'border-indigo-500 bg-indigo-50/50' : 'border-slate-200 hover:bg-slate-50' }}">
                                    <input type="radio" name="espacio" value="{{ $target->ulid }}" @checked($target->is($workspace)) class="mt-1 text-indigo-600 focus:ring-indigo-500">
                                    <span>
                                        <span class="block text-sm font-medium text-slate-900">{{ $target->isPersonal() ? __('Para mí (espacio personal)') : $target->displayName() }}</span>
                                        <span class="block text-xs text-slate-500">{{ $target->isPersonal() ? __('Solo tú tendrás acceso.') : __('Organización: podrás decidir qué miembros la usan.') }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>
                        <p class="mt-2 text-xs text-slate-500">{{ __('Solo aparecen los espacios en los que puedes contratar (tu espacio personal y las organizaciones de las que eres propietario).') }}</p>
                    </fieldset>

                    @if ($plan->activePrices->count() > 1)
                        <fieldset>
                            <legend class="text-sm font-medium text-slate-700">{{ __('Modalidad de pago') }}</legend>
                            <div class="mt-2 grid gap-2 sm:grid-cols-2">
                                @foreach ($plan->activePrices as $option)
                                    <label class="flex cursor-pointer items-center gap-3 rounded-lg border px-4 py-3 {{ $option->is($price) ? 'border-indigo-500 bg-indigo-50/50' : 'border-slate-200 hover:bg-slate-50' }}">
                                        <input type="radio" name="precio" value="{{ $option->ulid }}" @checked($option->is($price)) class="text-indigo-600 focus:ring-indigo-500">
                                        <span class="text-sm"><span class="font-medium text-slate-900">{{ $option->interval->label() }}</span> · {{ $option->label() }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </fieldset>
                    @else
                        <input type="hidden" name="precio" value="{{ $price->ulid }}">
                    @endif

                    @unless ($price->isFree())
                        <div class="flex items-end gap-2">
                            <div class="flex-1">
                                <label for="cupon" class="block text-sm font-medium text-slate-700">{{ __('Cupón de descuento (opcional)') }}</label>
                                <input id="cupon" name="cupon" value="{{ $coupon }}" maxlength="40" autocomplete="off" class="mt-1.5 block w-full rounded-lg border border-slate-300 px-3 py-2 text-sm uppercase shadow-xs focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-200">
                            </div>
                            <x-button variant="secondary">{{ __('Aplicar') }}</x-button>
                        </div>
                    @endunless
                    <noscript><x-button variant="secondary">{{ __('Actualizar resumen') }}</x-button></noscript>
                </form>
            </x-card>

            {{-- Paso 2: resumen y confirmación (POST) --}}
            <x-card class="lg:col-span-2" :title="__('2. Revisa el pedido')">
                @if ($problem)
                    <p role="alert" class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">{{ $problem }}</p>
                @endif

                @if ($quote)
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between gap-4"><dt class="text-slate-500">{{ __('Producto') }}</dt><dd class="text-right font-medium">{{ $plan->product->name }} · {{ $plan->name }}</dd></div>
                        <div class="flex justify-between gap-4"><dt class="text-slate-500">{{ __('Para') }}</dt><dd class="text-right">{{ $workspace->isPersonal() ? __('Espacio personal') : $workspace->displayName() }}</dd></div>
                        <div class="flex justify-between gap-4"><dt class="text-slate-500">{{ __('Modalidad') }}</dt><dd>{{ $price->interval->label() }}</dd></div>
                        <div class="flex justify-between gap-4"><dt class="text-slate-500">{{ __('Precio') }}</dt><dd><x-money :amount="$quote->subtotal" :currency="$price->currency" />{{ $price->isRecurring() ? ' '.$price->interval->suffix() : '' }}</dd></div>
                        @if ($quote->discount > 0)
                            <div class="flex justify-between gap-4 text-emerald-700"><dt>{{ $quote->coupon ? __('Cupón :code', ['code' => $quote->coupon->code]) : $quote->promotion->name }}</dt><dd>-<x-money :amount="$quote->discount" :currency="$price->currency" /></dd></div>
                            <div class="text-xs text-emerald-700">{{ $quote->promotion->label() }}</div>
                        @endif
                        @if ($quote->trialDays > 0)
                            <div class="flex justify-between gap-4 text-indigo-700"><dt>{{ __('Periodo de prueba') }}</dt><dd>{{ trans_choice('{1} :count día|[2,*] :count días', $quote->trialDays, ['count' => $quote->trialDays]) }}</dd></div>
                        @endif
                        <div class="flex justify-between gap-4 border-t border-slate-100 pt-3 text-base"><dt class="font-medium">{{ __('A pagar hoy') }}</dt><dd class="font-semibold"><x-money :amount="$quote->dueToday()" :currency="$price->currency" /></dd></div>
                        @if ($price->isRecurring() && ! $price->isFree())
                            <p class="text-xs text-slate-500">
                                @if ($quote->trialDays > 0)
                                    {{ __('Al terminar la prueba se cobrará :amount :suffix salvo que canceles antes.', ['amount' => Money::format($quote->total(), $price->currency), 'suffix' => $price->interval->suffix()]) }}
                                @else
                                    {{ __('Se renovará automáticamente cada :period. Puedes cancelar cuando quieras.', ['period' => $price->interval->value === 'year' ? __('año') : __('mes')]) }}
                                @endif
                            </p>
                        @endif
                        <p class="text-xs text-slate-500">{{ config('commerce.prices_include_tax') ? __('IVA incluido.') : __('IVA no incluido.') }}</p>
                    </dl>

                    @if ($plan->seats_limit && $workspace->isOrganization())
                        <p class="mt-4 text-xs text-slate-500">{{ __('Incluye :count plazas: después decides qué miembros de la organización pueden usarla.', ['count' => $plan->seats_limit]) }}</p>
                    @endif

                    @if (! $quote->isFree() && ! $paymentsEnabled)
                        <p role="alert" class="mt-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">{{ __('Los pagos todavía no están activados en esta instalación. Este plan se podrá contratar en cuanto lo estén.') }}</p>
                    @else
                        <x-form :action="route('checkout.store', $plan)" class="mt-5 space-y-4">
                            <input type="hidden" name="workspace" value="{{ $workspace->ulid }}">
                            <input type="hidden" name="price" value="{{ $price->ulid }}">
                            <input type="hidden" name="coupon" value="{{ $quote->coupon?->code }}">
                            <input type="hidden" name="idempotency_key" value="{{ $idempotencyKey }}">
                            <label class="flex items-start gap-2 text-sm text-slate-600">
                                <input type="checkbox" name="accept_terms" value="1" required class="mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                <span>{!! __('Acepto las :terms de contratación.', ['terms' => '<a href="'.e(route('legal.terms')).'" class="font-medium text-indigo-600 hover:text-indigo-500" target="_blank" rel="noopener">'.e(__('condiciones')).'</a>']) !!}</span>
                            </label>
                            @error('accept_terms')<p class="text-xs font-medium text-red-600">{{ $message }}</p>@enderror
                            <x-button class="w-full">{{ $quote->requiresPayment() ? __('Continuar al pago') : __('Activar plan gratuito') }}</x-button>
                            @if ($quote->requiresPayment())
                                <p class="flex items-center gap-1.5 text-xs text-slate-500"><x-icon name="lock" class="size-4" />{{ __('El pago se realiza en Stripe. NimiApps no ve ni guarda los datos de tu tarjeta.') }}</p>
                            @endif
                        </x-form>
                    @endif
                @endif
            </x-card>
        </div>
    @endif
</x-layouts.app>