@php $tz = config('app.timezone'); @endphp
<x-layouts.app :title="__('Suscripción')" :heading="$subscription->plan->product->name" :description="__('Plan :plan · :price', ['plan' => $subscription->plan->name, 'price' => $subscription->price->label()])">
    <x-slot:actions>
        <x-button variant="ghost" :href="route('billing.index')"><x-icon name="arrow-left" class="size-4" />{{ __('Contrataciones') }}</x-button>
    </x-slot:actions>

    <div class="grid gap-6 lg:grid-cols-3">
        <x-card class="lg:col-span-2" :title="__('Estado')">
            <dl class="grid gap-4 text-sm sm:grid-cols-2">
                <div><dt class="text-slate-500">{{ __('Estado') }}</dt><dd class="mt-1"><x-status-badge :status="$subscription->status" /></dd></div>
                @if ($subscription->trial_ends_at && $subscription->status->value === 'trialing')
                    <div><dt class="text-slate-500">{{ __('Fin de la prueba') }}</dt><dd class="mt-1">{{ $subscription->trial_ends_at->timezone($tz)->format('d/m/Y') }}</dd></div>
                @endif
                @if ($subscription->current_period_end)
                    <div><dt class="text-slate-500">{{ $subscription->cancel_at_period_end ? __('Acceso hasta') : __('Próxima renovación') }}</dt><dd class="mt-1">{{ $subscription->current_period_end->timezone($tz)->format('d/m/Y') }}</dd></div>
                @endif
                @if ($subscription->downgradePlan)
                    <div><dt class="text-slate-500">{{ __('Después pasará a') }}</dt><dd class="mt-1">{{ $subscription->downgradePlan->name }}</dd></div>
                @endif
                @if ($subscription->status->value === 'past_due')
                    <div class="sm:col-span-2"><p role="alert" class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-amber-900">{{ __('El último cobro ha fallado. Actualiza tu método de pago para no perder el acceso: Stripe reintentará el cobro y el acceso se mantiene :days días.', ['days' => config('commerce.past_due_grace_days')]) }}</p></div>
                @endif
            </dl>

            @if ($canManage && $subscription->isManageable())
                <div class="mt-6 flex flex-wrap gap-2 border-t border-slate-100 pt-5">
                    @if ($subscription->cancel_at_period_end)
                        <x-form :action="route('billing.subscriptions.resume', $subscription)"><x-button>{{ __('Reactivar suscripción') }}</x-button></x-form>
                    @else
                        <x-confirm :action="route('billing.subscriptions.cancel', $subscription)" :title="__('Cancelar suscripción')"
                            :message="__('No se renovará. Mantendrás el acceso hasta el final del periodo ya pagado y podrás reactivarla antes de esa fecha.')"
                            :confirm="__('Cancelar al final del periodo')" />
                    @endif
                </div>
            @elseif (! $canManage)
                <p class="mt-6 text-xs text-slate-500">{{ __('Solo el propietario puede cambiar o cancelar la suscripción.') }}</p>
            @endif
        </x-card>

        <x-card :title="__('Aplicaciones incluidas')">
            <ul class="space-y-2 text-sm">
                @foreach ($subscription->licenses as $license)
                    <li class="flex items-center justify-between gap-2"><a href="{{ route('licenses.show', $license) }}" class="text-indigo-600 hover:text-indigo-500">{{ $license->microapp->name }}</a><x-status-badge :status="$license->effectiveStatus()" /></li>
                @endforeach
            </ul>
        </x-card>
    </div>

    @if ($canManage && $subscription->isManageable() && $alternatives->isNotEmpty())
        <x-card class="mt-6" :title="__('Cambiar de plan')" :description="__('Si el nuevo plan es más caro se aplica al momento y se cobra la parte proporcional. Si es más barato, la diferencia queda como saldo para las próximas facturas. Si eliges un plan gratuito, el cambio se hace al final del periodo pagado.')">
            <ul class="grid gap-3 sm:grid-cols-2">
                @foreach ($alternatives as $alternative)
                    <li class="flex items-center justify-between gap-3 rounded-lg border border-slate-200 px-4 py-3">
                        <div>
                            <p class="font-medium text-slate-900">{{ $alternative['plan']->name }}</p>
                            <p class="text-sm text-slate-500">{{ $alternative['price']->label() }}</p>
                        </div>
                        <x-confirm :action="route('billing.subscriptions.change', $subscription)" :title="__('Cambiar a :plan', ['plan' => $alternative['plan']->name])"
                            :message="$alternative['price']->isFree() ? __('Tu suscripción se cancelará al final del periodo pagado y pasarás al plan gratuito.') : __('El cambio se aplicará ahora y Stripe ajustará el importe de forma proporcional.')"
                            :confirm="__('Confirmar cambio')" variant="primary" trigger-variant="secondary" :trigger="__('Elegir')">
                            <input type="hidden" name="price" value="{{ $alternative['price']->ulid }}">
                        </x-confirm>
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif

    @if ($subscription->payments->isNotEmpty())
        <x-card class="mt-6" :title="__('Pagos de esta suscripción')">
            <ul class="divide-y divide-slate-100 text-sm">
                @foreach ($subscription->payments->sortByDesc('id') as $payment)
                    <li class="flex items-center gap-3 py-2">
                        <span class="flex-1">{{ $payment->occurred_at?->timezone($tz)->format('d/m/Y') }} · {{ $payment->description }}</span>
                        <x-money :amount="$payment->amount" :currency="$payment->currency" />
                        <x-status-badge :status="$payment->status" />
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif
</x-layouts.app>