<x-layouts.tenant pageTitle="Receta {{ $prescription->prescription_number }}">
    <x-page-header :title="'Receta '.$prescription->prescription_number"
                   :subtitle="$patient->fullName().' — '.$prescription->created_at->format('d/m/Y')">
        <div class="flex gap-2">
            @if(!$prescription->isSigned())
                <form method="POST" action="{{ route('tenant.prescriptions.sign', [$patient, $prescription]) }}"
                      onsubmit="return confirm('¿Firmar esta receta? No podrá modificarse.')">
                    @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 receta
                    </button>
                </form>
            @else
                <a href="{{ route('tenant.pdf.prescription', [$patient, $prescription]) }}" target="_blank"
                   class="inline-flex items-center px-3 py-2 bg-teal-600 hover:bg-teal-700 text-white text-xs font-semibold rounded-lg">
                    ↓ Descargar PDF
                </a>
            @endif
            <x-btn :href="route('tenant.patients.show', $patient)" variant="secondary">Volver al paciente</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($prescription->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">
            ✅ Receta firmada el {{ $prescription->signed_at->format('d/m/Y H:i') }} por {{ $prescription->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 receta para habilitar la descarga en PDF.
        </div>
    @endif

    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <div class="xl:col-span-2 space-y-4">
            @if($prescription->diagnosis_summary)
                <x-card title="Diagnóstico">
                    <p class="text-sm text-gray-800">{{ $prescription->diagnosis_summary }}</p>
                </x-card>
            @endif

            <x-card title="Medicamentos prescritos">
                @foreach($prescription->items as $i => $item)
                    <div class="border-b border-gray-100 pb-4 mb-4 last:border-0 last:pb-0 last:mb-0">
                        <div class="flex items-start gap-3">
                            <div class="w-7 h-7 rounded-full bg-teal-100 text-teal-700 flex items-center justify-center text-xs font-bold shrink-0">
                                {{ $i + 1 }}
                            </div>
                            <div class="flex-1">
                                <p class="text-sm font-semibold text-gray-900">{{ $item->medication }}</p>
                                <div class="mt-1 grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-gray-600">
                                    @if($item->dose)<span><strong>Dosis:</strong> {{ $item->dose }}</span>@endif
                                    @if($item->frequency)<span><strong>Frecuencia:</strong> {{ $item->frequency }}</span>@endif
                                    @if($item->duration)<span><strong>Duración:</strong> {{ $item->duration }}</span>@endif
                                    @if($item->route)<span><strong>Vía:</strong> {{ $item->route }}</span>@endif
                                </div>
                                @if($item->instructions)
                                    <p class="mt-1 text-xs text-indigo-700 bg-indigo-50 rounded px-2 py-1">📌 {{ $item->instructions }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endforeach
            </x-card>

            @if($prescription->notes)
                <x-card title="Notas adicionales">
                    <p class="text-sm text-gray-700 whitespace-pre-wrap">{{ $prescription->notes }}</p>
                </x-card>
            @endif
        </div>

        <div>
            <x-card title="Detalles de la receta">
                <dl class="space-y-3 text-sm">
                    <div>
                        <dt class="text-xs text-gray-400">Número de receta</dt>
                        <dd class="font-mono font-semibold">{{ $prescription->prescription_number }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Profesional</dt>
                        <dd>{{ $prescription->employee?->user?->name ?? '—' }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Fecha</dt>
                        <dd>{{ $prescription->created_at->format('d/m/Y') }}</dd>
                    </div>
                    <div>
                        <dt class="text-xs text-gray-400">Medicamentos</dt>
                        <dd class="font-semibold">{{ $prescription->items->count() }}</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
                                {{ $prescription->isSigned() ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                                {{ $prescription->isSigned() ? 'Firmada' : 'Borrador' }}
                            </span>
                        </dd>
                    </div>
                </dl>
            </x-card>
        </div>
    </div>
</x-layouts.tenant>
