{{-- TAB 2: Today's Referrals --}}
<form method="GET" class="bg-white rounded-lg border border-gray-200 p-4 mb-5 grid grid-cols-1 md:grid-cols-5 gap-3">
    <input type="hidden" name="tab" value="today">
    <div>
        <label class="form-label">Period</label>
        <select name="range" class="form-input" onchange="this.form.submit()">
            <option value="today"  @selected($range === 'today')>Today</option>
            <option value="week"   @selected($range === 'week')>This Week</option>
            <option value="custom" @selected($range === 'custom')>Custom</option>
        </select>
    </div>
    <div>
        <label class="form-label">From</label>
        <input type="date" name="from" value="{{ request('from') }}" class="form-input">
    </div>
    <div>
        <label class="form-label">To</label>
        <input type="date" name="to" value="{{ request('to') }}" class="form-input">
    </div>
    <div class="md:col-span-1">
        <label class="form-label">Search</label>
        <input type="text" name="q" value="{{ request('q') }}" class="form-input" placeholder="Rider, MKR no., patient">
    </div>
    <div class="flex items-end">
        <button class="btn-primary w-full">Apply</button>
    </div>
</form>

<div class="bg-white rounded-lg border border-gray-200 overflow-x-auto">
    <table class="min-w-full text-sm">
        <thead class="bg-gray-50 text-gray-600 text-xs uppercase">
            <tr>
                <th class="px-3 py-2 text-left">Referral ID</th>
                <th class="px-3 py-2 text-left">Time</th>
                <th class="px-3 py-2 text-left">MKR No.</th>
                <th class="px-3 py-2 text-left">Rider</th>
                <th class="px-3 py-2 text-left">Patient</th>
                <th class="px-3 py-2 text-left">MRN</th>
                <th class="px-3 py-2 text-left">Encounter</th>
                <th class="px-3 py-2 text-right">Fee</th>
                <th class="px-3 py-2 text-left">Status</th>
                <th class="px-3 py-2 text-left">By</th>
                @if ($canPayout)
                    <th class="px-3 py-2 text-left">Actions</th>
                @endif
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse ($referrals as $r)
                @php
                    $riderP = $r->member?->patient;
                    $riderName = $riderP ? trim($riderP->first_name.' '.$riderP->last_name) : '—';
                    $patientName = $r->patient ? trim($r->patient->first_name.' '.$r->patient->last_name) : '—';
                @endphp
                <tr>
                    <td class="px-3 py-2 font-mono text-xs">{{ $r->referral_code }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $r->created_at?->format('H:i') }}</td>
                    <td class="px-3 py-2">{{ $r->mkr_number }}</td>
                    <td class="px-3 py-2">{{ $riderName }}</td>
                    <td class="px-3 py-2">{{ $patientName }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $r->patient?->mrn }}</td>
                    <td class="px-3 py-2 text-gray-500">{{ $r->encounter?->visit_number }}</td>
                    <td class="px-3 py-2 text-right">{{ number_format((float) $r->referral_fee, 0) }}</td>
                    <td class="px-3 py-2">@include('corporate.referrals.partials.status-badge', ['status' => $r->effectiveStatus()])</td>
                    <td class="px-3 py-2 text-gray-500">{{ $r->creator?->name }}</td>
                    @if ($canPayout)
                        <td class="px-3 py-2 whitespace-nowrap">
                            @if ($r->status === \App\Models\Referral::STATUS_PENDING && ! $r->encounterVoided())
                                <form method="POST" action="{{ route('corporate.referrals.approve', $r) }}" class="inline">
                                    @csrf
                                    <button class="text-blue-600 hover:underline text-xs">Approve</button>
                                </form>
                            @endif
                            @if (in_array($r->status, [\App\Models\Referral::STATUS_PENDING, \App\Models\Referral::STATUS_APPROVED], true))
                                <button type="button" class="text-red-600 hover:underline text-xs ml-2"
                                        onclick="cancelReferral({{ $r->id }})">Cancel</button>
                            @endif
                        </td>
                    @endif
                </tr>
            @empty
                <tr>
                    <td colspan="{{ $canPayout ? 11 : 10 }}" class="px-3 py-8 text-center text-gray-400">No referrals in this period.</td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $referrals->links() }}
</div>

@if ($canPayout)
    {{-- Cancel modal --}}
    <div id="cancel-modal" class="hidden fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg max-w-md w-full p-5">
            <h3 class="font-semibold text-gray-900 mb-3">Cancel referral</h3>
            <form method="POST" id="cancel-form">
                @csrf
                <label class="form-label">Reason <span class="text-red-500">*</span></label>
                <textarea name="reason" rows="3" class="form-input" required minlength="3" placeholder="Why is this referral being cancelled?"></textarea>
                <div class="flex justify-end gap-2 mt-4">
                    <button type="button" class="px-3 py-1.5 text-sm text-gray-600" onclick="document.getElementById('cancel-modal').classList.add('hidden')">Close</button>
                    <button class="btn-primary bg-red-600 hover:bg-red-700">Cancel Referral</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        function cancelReferral(id) {
            const form = document.getElementById('cancel-form');
            form.action = "{{ url('corporate/referrals') }}/" + id + "/cancel";
            document.getElementById('cancel-modal').classList.remove('hidden');
        }
    </script>
@endif