<x-layouts.tenant pageTitle="Orden clínica — {{ $patient->fullName() }}">
    <x-page-header :title="$order->title"
                   :subtitle="$order->typeLabel().' — '.$patient->fullName().' — '.$order->created_at->format('d/m/Y')">
        <div class="flex gap-2">
            @if(!$order->isSigned())
                <form method="POST" action="{{ route('tenant.orders.sign', [$patient, $order]) }}"
                      onsubmit="return confirm('¿Firmar esta orden?')">
                    @csrf
                    <button type="submit"
                            class="inline-flex items-center px-3 py-2 bg-green-600 hover:bg-green-700 text-white text-xs font-semibold rounded-lg">
                        ✍️ Firmar orden
                    </button>
                </form>
            @else
                <a href="{{ route('tenant.pdf.order', [$patient, $order]) }}" target="_blank"
                   class="inline-flex items-center px-3 py-2 bg-amber-600 hover:bg-amber-700 text-white text-xs font-semibold rounded-lg">
                    ↓ Descargar PDF
                </a>
            @endif
            <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Volver</x-btn>
        </div>
    </x-page-header>

    @if(session('success'))
        <div class="mb-4 bg-green-50 border border-green-200 text-green-800 rounded-lg px-4 py-3 text-sm">{{ session('success') }}</div>
    @endif

    @if($order->isSigned())
        <div class="mb-4 bg-green-50 border border-green-200 rounded-xl px-4 py-3 text-sm text-green-800 font-medium">
            ✅ Orden firmada el {{ $order->signed_at->format('d/m/Y H:i') }} por {{ $order->signer?->name ?? '—' }}
        </div>
    @else
        <div class="mb-4 bg-yellow-50 border border-yellow-200 rounded-xl px-4 py-3 text-sm text-yellow-800">
            ⚠ Borrador — Firma la orden para habilitarla para descarga.
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-4">
            <x-card :title="$order->typeLabel()">
                <h2 class="text-lg font-bold text-gray-900 mb-3">{{ $order->title }}</h2>
                @if($order->description)
                    <div class="prose prose-sm max-w-none text-gray-700">
                        <p class="whitespace-pre-wrap">{{ $order->description }}</p>
                    </div>
                @endif
                @if($order->notes)
                    <div class="mt-4 p-3 bg-amber-50 rounded-lg border border-amber-100">
                        <p class="text-xs font-semibold text-amber-700 mb-1">Notas adicionales</p>
                        <p class="text-sm text-amber-800 whitespace-pre-wrap">{{ $order->notes }}</p>
                    </div>
                @endif
            </x-card>
        </div>

        <div>
            <x-card title="Información de la orden">
                <dl class="space-y-3 text-sm">
                    <div>
                        <dt class="text-xs text-gray-400">Tipo</dt>
                        <dd class="font-medium">{{ $order->typeLabel() }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Profesional</dt>
                        <dd>{{ $order->employee?->user?->name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Fecha</dt>
                        <dd>{{ $order->created_at->format('d/m/Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Estado</dt>
                        <dd>
                            <span class="text-xs px-2 py-0.5 rounded-full font-semibold
                                {{ $order->isSigned() ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                {{ $order->isSigned() ? 'Firmada' : 'Borrador' }}
                            </span>
                        </dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>
</x-layouts.tenant>
