@php
    use App\Enums\Commerce\OrderStatus;
    $waiting = in_array($order->status, [OrderStatus::AwaitingPayment, OrderStatus::Processing], true) && $order->stripe_checkout_session_id;
@endphp
<x-layouts.app :title="__('Pedido :number', ['number' => $order->number()])" :heading="__('Pedido :number', ['number' => $order->number()])" :description="$order->plan->product->name.' · '.$order->plan->name">
    @if ($waiting && request()->routeIs('orders.show'))
        <x-slot:head><meta http-equiv="refresh" content="6"></x-slot:head>
    @endif

    <div class="grid gap-6 lg:grid-cols-3">
        <x-card class="lg:col-span-2" :title="__('Estado')">
            <div class="flex items-start gap-4">
                @if ($order->status === OrderStatus::Completed)
                    <x-icon name="check-circle" class="size-10 shrink-0 text-emerald-600" />
                    <div>
                        <p class="font-semibold text-slate-900">{{ __('Contratación completada') }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ __('El acceso ya está activo en :name.', ['name' => $order->workspace->isPersonal() ? __('tu espacio personal') : $order->workspace->displayName()]) }}</p>
                    </div>
                @elseif ($waiting)
                    <svg class="size-10 shrink-0 animate-spin text-indigo-600" viewBox="0 0 24 24" fill="none" aria-hidden="true"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path></svg>
                    <div role="status">
                        <p class="font-semibold text-slate-900">{{ __('Esperando la confirmación de Stripe') }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ __('Si ya has pagado, la confirmación llega en unos segundos y esta página se actualizará sola. El acceso se activa solo cuando Stripe confirma el pago.') }}</p>
                    </div>
                @elseif ($order->status === OrderStatus::Pending)
                    <x-icon name="credit-card" class="size-10 shrink-0 text-indigo-600" />
                    <div>
                        <p class="font-semibold text-slate-900">{{ __('Pendiente de pago') }}</p>
                        <p class="mt-1 text-sm text-slate-600">{{ __('Revisa el importe y continúa a Stripe para pagar de forma segura.') }}</p>
                    </div>
                @else
                    <x-icon name="warning" class="size-10 shrink-0 text-amber-500" />
                    <div>
                        <p class="font-semibold text-slate-900">{{ $order->status->label() }}</p>
                        <p class="mt-1 text-sm text-slate-600">
                            @if ($order->failure_reason === 'duplicado')
                                {{ __('Este espacio ya tenía este producto. Hemos detenido el cobro recurrente y el equipo de NimiApps revisará la devolución del importe.') }}
                            @else
                                {{ __('Este pedido no se ha completado. Puedes volver a elegir el plan en el catálogo.') }}
                            @endif
                        </p>
                    </div>
                @endif
            </div>

            <div class="mt-6 flex flex-wrap gap-2">
                @if ($canPay && in_array($order->status, [OrderStatus::Pending, OrderStatus::AwaitingPayment], true) && $order->requiresPayment())
                    <x-form :action="route('orders.pay', $order)">
                        <x-button>{{ $order->stripe_checkout_session_id ? __('Volver al pago') : __('Pagar con Stripe') }}</x-button>
                    </x-form>
                @endif
                @if ($canPay && $order->status === OrderStatus::Pending)
                    <x-confirm :action="route('orders.cancel', $order)" :title="__('Cancelar pedido')" :message="__('El pedido se anulará. No se te cobrará nada.')" trigger-variant="ghost" />
                @endif
                @if ($order->status === OrderStatus::Completed)
                    <x-button :href="route('applications')">{{ __('Ir a mis aplicaciones') }}</x-button>
                @endif
                @if (in_array($order->status, [OrderStatus::Expired, OrderStatus::Cancelled, OrderStatus::Failed], true) && $order->plan->product->microapps->first())
                    <x-button variant="secondary" :href="route('catalog.show', $order->plan->product->microapps->first()->slug)">{{ __('Volver a los planes') }}</x-button>
                @endif
            </div>
        </x-card>

        <x-card :title="__('Resumen')">
            <dl class="space-y-2 text-sm">
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Estado') }}</dt><dd><x-status-badge :status="$order->status" /></dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Para') }}</dt><dd class="text-right">{{ $order->workspace->isPersonal() ? __('Espacio personal') : $order->workspace->displayName() }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Modalidad') }}</dt><dd>{{ $order->interval->label() }}</dd></div>
                <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Precio') }}</dt><dd><x-money :amount="$order->subtotal" :currency="$order->currency" /></dd></div>
                @if ($order->discount > 0)
                    <div class="flex justify-between gap-3 text-emerald-700"><dt>{{ __('Descuento') }}</dt><dd>-<x-money :amount="$order->discount" :currency="$order->currency" /></dd></div>
                @endif
                @if ($order->trial_days > 0)
                    <div class="flex justify-between gap-3"><dt class="text-slate-500">{{ __('Prueba') }}</dt><dd>{{ $order->trial_days }} {{ __('días') }}</dd></div>
                @endif
                <div class="flex justify-between gap-3 border-t border-slate-100 pt-2 font-medium"><dt>{{ __('Total') }}</dt><dd><x-money :amount="$order->total" :currency="$order->currency" /></dd></div>
                <div class="flex justify-between gap-3 text-xs text-slate-500"><dt>{{ __('Fecha') }}</dt><dd>{{ $order->created_at->timezone(config('app.timezone'))->format('d/m/Y H:i') }}</dd></div>
            </dl>
        </x-card>
    </div>

    @if ($order->licenses->isNotEmpty())
        <x-card class="mt-6" :title="__('Licencias de este pedido')">
            <ul class="divide-y divide-slate-100 text-sm">
                @foreach ($order->licenses as $license)
                    <li class="flex items-center justify-between py-2">
                        <span>{{ $license->microapp->name }}</span>
                        <x-status-badge :status="$license->effectiveStatus()" />
                    </li>
                @endforeach
            </ul>
        </x-card>
    @endif
</x-layouts.app>