@php
    $readOnly       = $readOnly ?? false;
    $labOrders      = old('lab_orders',      $consult->lab_orders      ?? []) ?: [];
    $imagingOrders  = old('imaging_orders',  $consult->imaging_orders  ?? []) ?: [];
    $pharmacyOrders = old('pharmacy_orders', $consult->pharmacy_orders ?? []) ?: [];
    $referrals      = old('referrals',       $consult->referrals       ?? []) ?: [];
@endphp

<div class="bg-white rounded-lg shadow-sm border border-gray-200" x-data="{ tab: 'lab' }">
    <header class="px-4 py-3 border-b bg-gradient-to-r from-blue-50 to-indigo-50">
        <h3 class="font-semibold text-gray-800 text-sm flex items-center gap-2">
            <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
            </svg>
            Orders Panel
        </h3>
    </header>

    <nav class="flex border-b bg-gray-50 text-xs">
        <button type="button" @click="tab = 'lab'"
                :class="tab === 'lab' ? 'border-blue-500 text-blue-700 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="flex-1 px-3 py-2 border-b-2 font-medium">Lab</button>
        <button type="button" @click="tab = 'imaging'"
                :class="tab === 'imaging' ? 'border-blue-500 text-blue-700 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="flex-1 px-3 py-2 border-b-2 font-medium">Imaging</button>
        <button type="button" @click="tab = 'pharmacy'"
                :class="tab === 'pharmacy' ? 'border-blue-500 text-blue-700 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="flex-1 px-3 py-2 border-b-2 font-medium">Rx</button>
        <button type="button" @click="tab = 'referral'"
                :class="tab === 'referral' ? 'border-blue-500 text-blue-700 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700'"
                class="flex-1 px-3 py-2 border-b-2 font-medium">Refer</button>
    </nav>

    {{-- LAB --}}
    <div x-show="tab === 'lab'" class="p-3 space-y-2" x-data="{ items: @js($labOrders) }">
        <template x-for="(item, i) in items" :key="i">
            <div class="border border-gray-200 rounded p-2 bg-gray-50 relative">
                <button type="button" @click="items.splice(i,1)" @if($readOnly) disabled @endif
                        class="absolute top-1 right-1 text-gray-400 hover:text-rose-600 text-xs">✕</button>
                <input type="text" :name="`lab_orders[${i}][test_code]`"  x-model="item.test_code"  placeholder="Test code" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <input type="text" :name="`lab_orders[${i}][test_name]`"  x-model="item.test_name"  placeholder="Test name" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <select :name="`lab_orders[${i}][urgency]`" x-model="item.urgency" @if($readOnly) disabled @endif
                        class="w-full px-2 py-1 text-xs border border-gray-300 rounded">
                    <option value="routine">Routine</option>
                    <option value="urgent">Urgent</option>
                    <option value="stat">STAT</option>
                </select>
            </div>
        </template>
        @unless($readOnly)
            <button type="button" @click="items.push({test_code:'', test_name:'', urgency:'routine'})"
                    class="w-full text-xs px-2 py-1.5 border border-dashed border-blue-300 text-blue-600 rounded hover:bg-blue-50">
                + Add lab test
            </button>
        @endunless
    </div>

    {{-- IMAGING --}}
    <div x-show="tab === 'imaging'" class="p-3 space-y-2" x-data="{ items: @js($imagingOrders) }">
        <template x-for="(item, i) in items" :key="i">
            <div class="border border-gray-200 rounded p-2 bg-gray-50 relative">
                <button type="button" @click="items.splice(i,1)" @if($readOnly) disabled @endif
                        class="absolute top-1 right-1 text-gray-400 hover:text-rose-600 text-xs">✕</button>
                <input type="text" :name="`imaging_orders[${i}][study_code]`" x-model="item.study_code" placeholder="Study code" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <input type="text" :name="`imaging_orders[${i}][study_name]`" x-model="item.study_name" placeholder="Study name (e.g. Obstetric US)" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <select :name="`imaging_orders[${i}][urgency]`" x-model="item.urgency" @if($readOnly) disabled @endif
                        class="w-full px-2 py-1 text-xs border border-gray-300 rounded">
                    <option value="routine">Routine</option>
                    <option value="urgent">Urgent</option>
                    <option value="stat">STAT</option>
                </select>
            </div>
        </template>
        @unless($readOnly)
            <button type="button" @click="items.push({study_code:'', study_name:'', urgency:'routine'})"
                    class="w-full text-xs px-2 py-1.5 border border-dashed border-blue-300 text-blue-600 rounded hover:bg-blue-50">
                + Add imaging study
            </button>
        @endunless
    </div>

    {{-- PHARMACY --}}
    <div x-show="tab === 'pharmacy'" class="p-3 space-y-2" x-data="{ items: @js($pharmacyOrders) }">
        <template x-for="(item, i) in items" :key="i">
            <div class="border border-gray-200 rounded p-2 bg-gray-50 relative">
                <button type="button" @click="items.splice(i,1)" @if($readOnly) disabled @endif
                        class="absolute top-1 right-1 text-gray-400 hover:text-rose-600 text-xs">✕</button>
                <input type="text" :name="`pharmacy_orders[${i}][item_code]`" x-model="item.item_code" placeholder="Drug code" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <input type="text" :name="`pharmacy_orders[${i}][item_name]`" x-model="item.item_name" placeholder="Drug name" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <div class="grid grid-cols-2 gap-1">
                    <input type="text" :name="`pharmacy_orders[${i}][dose]`"      x-model="item.dose"      placeholder="Dose" @if($readOnly) readonly @endif
                           class="px-2 py-1 text-xs border border-gray-300 rounded">
                    <input type="text" :name="`pharmacy_orders[${i}][frequency]`" x-model="item.frequency" placeholder="Freq" @if($readOnly) readonly @endif
                           class="px-2 py-1 text-xs border border-gray-300 rounded">
                    <input type="text" :name="`pharmacy_orders[${i}][duration]`"  x-model="item.duration"  placeholder="Duration" @if($readOnly) readonly @endif
                           class="px-2 py-1 text-xs border border-gray-300 rounded">
                    <input type="number" :name="`pharmacy_orders[${i}][quantity]`" x-model="item.quantity" placeholder="Qty" @if($readOnly) readonly @endif
                           class="px-2 py-1 text-xs border border-gray-300 rounded">
                </div>
            </div>
        </template>
        @unless($readOnly)
            <button type="button" @click="items.push({item_code:'', item_name:'', dose:'', frequency:'', duration:'', quantity:''})"
                    class="w-full text-xs px-2 py-1.5 border border-dashed border-blue-300 text-blue-600 rounded hover:bg-blue-50">
                + Add prescription
            </button>
        @endunless
    </div>

    {{-- REFERRAL --}}
    <div x-show="tab === 'referral'" class="p-3 space-y-2" x-data="{ items: @js($referrals) }">
        <template x-for="(item, i) in items" :key="i">
            <div class="border border-gray-200 rounded p-2 bg-gray-50 relative">
                <button type="button" @click="items.splice(i,1)" @if($readOnly) disabled @endif
                        class="absolute top-1 right-1 text-gray-400 hover:text-rose-600 text-xs">✕</button>
                <input type="text" :name="`referrals[${i}][destination]`" x-model="item.destination" placeholder="Destination facility/dept" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <input type="text" :name="`referrals[${i}][reason]`"      x-model="item.reason"      placeholder="Reason" @if($readOnly) readonly @endif
                       class="w-full px-2 py-1 text-xs border border-gray-300 rounded mb-1">
                <select :name="`referrals[${i}][urgency]`" x-model="item.urgency" @if($readOnly) disabled @endif
                        class="w-full px-2 py-1 text-xs border border-gray-300 rounded">
                    <option value="routine">Routine</option>
                    <option value="urgent">Urgent</option>
                    <option value="emergency">Emergency</option>
                </select>
            </div>
        </template>
        @unless($readOnly)
            <button type="button" @click="items.push({destination:'', reason:'', urgency:'routine'})"
                    class="w-full text-xs px-2 py-1.5 border border-dashed border-blue-300 text-blue-600 rounded hover:bg-blue-50">
                + Add referral
            </button>
        @endunless
    </div>
</div>

{{-- Quick summary card --}}
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-3 text-xs text-gray-600">
    <div class="font-semibold text-gray-700 mb-1">Tip</div>
    Orders saved here fan out to the Lab, Imaging, Pharmacy and Referral modules automatically on save.
</div>