{{-- TAB 1: New Referral — sub-15-second capture --}}
<div class="max-w-2xl">
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <p class="text-sm text-gray-500 mb-5">
            Search the rider, pick the patient seen today, and save. The fee is fixed and the
            date, encounter and patient are filled in automatically.
        </p>

        <form method="POST" action="{{ route('corporate.referrals.store') }}" autocomplete="off">
            @csrf
            <input type="hidden" name="member_id" id="member_id">
            <input type="hidden" name="encounter_id" id="encounter_id">

            {{-- Step 1: Rider --}}
            <div class="mb-5">
                <label class="form-label">1. MKR Rider <span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="text" id="rider-search" class="form-input" placeholder="Search by MKR number, name or phone…">
                    <div id="rider-results" class="hidden absolute z-20 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto"></div>
                </div>
                <div id="rider-chosen" class="hidden mt-2 bg-blue-50 border border-blue-200 rounded-lg px-3 py-2"></div>
            </div>

            {{-- Step 2: Patient seen today --}}
            <div class="mb-5">
                <label class="form-label">2. Patient seen today <span class="text-red-500">*</span></label>
                <div class="relative">
                    <input type="text" id="patient-search" class="form-input" placeholder="Search today's patients by name, MRN or phone…">
                    <div id="patient-results" class="hidden absolute z-20 left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-60 overflow-y-auto"></div>
                </div>
                <div id="patient-chosen" class="hidden mt-2 bg-blue-50 border border-blue-200 rounded-lg px-3 py-2"></div>
            </div>

            {{-- Step 3 & 4: Auto-populated --}}
            <div class="grid grid-cols-2 gap-4 mb-6 bg-gray-50 border border-gray-200 rounded-lg p-4">
                <div>
                    <div class="text-xs text-gray-500 uppercase">Referral Date</div>
                    <div class="text-sm font-semibold text-gray-900">{{ now()->format('d M Y') }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 uppercase">Referral Fee</div>
                    <div class="text-sm font-semibold text-gray-900">KES {{ number_format($defaultFee ?? 100, 0) }}</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 uppercase">Encounter</div>
                    <div class="text-sm font-semibold text-gray-900" id="field-encounter">—</div>
                </div>
                <div>
                    <div class="text-xs text-gray-500 uppercase">MRN</div>
                    <div class="text-sm font-semibold text-gray-900" id="field-mrn">—</div>
                </div>
                <div class="col-span-2">
                    <div class="text-xs text-gray-500 uppercase">Patient</div>
                    <div class="text-sm font-semibold text-gray-900" id="field-patient">—</div>
                </div>
            </div>

            <div class="flex justify-end">
                <button type="submit" id="save-referral" class="btn-primary" disabled>Save Referral</button>
            </div>
        </form>
    </div>

    <p class="text-xs text-gray-400 mt-3">
        The fee is set by the scheme and cannot be edited here. Each encounter can fund only one referral.
    </p>
</div>