@extends('layouts.app')

@section('title', 'Rider Referrals')

@section('content')
    <div class="flex items-center justify-between mb-4">
        <h1 class="text-lg font-bold text-gray-900">Rider Referrals</h1>
        <span class="text-xs text-gray-500">MKR Boda Referral Programme</span>
    </div>

    {{-- Tab navigation --}}
    <div class="border-b border-gray-200 mb-5">
        <nav class="flex flex-wrap gap-1 -mb-px text-sm font-medium">
            @php
                $tabs = [
                    'new'    => 'New Referral',
                    'today'  => "Today's Referrals",
                    'ledger' => 'Referral Ledger',
                ];
                if ($canPayout) {
                    $tabs['payouts'] = 'Payouts';
                }
            @endphp
            @foreach ($tabs as $key => $label)
                <a href="{{ route('corporate.referrals.index', ['tab' => $key]) }}"
                   class="px-4 py-2 border-b-2 {{ $tab === $key ? 'border-blue-600 text-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
                    {{ $label }}
                </a>
            @endforeach
        </nav>
    </div>

    @if ($tab === 'new')
        @include('corporate.referrals.partials.new')
    @elseif ($tab === 'today')
        @include('corporate.referrals.partials.today')
    @elseif ($tab === 'ledger')
        @include('corporate.referrals.partials.ledger')
    @elseif ($tab === 'payouts')
        @include('corporate.referrals.partials.payouts')
    @endif
@endsection

@if ($tab === 'new')
@section('scripts')
<script>
(function () {
    const feeDefault = @json($defaultFee ?? 100);

    function debounce(fn, ms) {
        let t;
        return function (...args) {
            clearTimeout(t);
            t = setTimeout(() => fn.apply(this, args), ms);
        };
    }

    // ---- Rider autocomplete ------------------------------------------
    const riderInput   = document.getElementById('rider-search');
    const riderResults = document.getElementById('rider-results');
    const riderId      = document.getElementById('member_id');
    const riderChosen  = document.getElementById('rider-chosen');

    async function searchRiders(q) {
        riderResults.innerHTML = '';
        if (q.length < 2) { riderResults.classList.add('hidden'); return; }
        try {
            const res  = await fetch("{{ route('corporate.referrals.search-riders') }}?q=" + encodeURIComponent(q));
            const data = await res.json();
            renderList(riderResults, data.results, function (item) {
                riderId.value = item.id;
                riderChosen.innerHTML =
                    '<div class="font-semibold text-gray-900">' + item.name + '</div>' +
                    '<div class="text-xs text-gray-500">MKR ' + item.mkr_number + ' · ' + item.phone + ' · ' + item.scheme + '</div>';
                riderChosen.classList.remove('hidden');
                riderInput.value = item.label;
                riderResults.classList.add('hidden');
                checkReady();
            }, function (item) { return item.label; });
        } catch (e) { riderResults.classList.add('hidden'); }
    }

    // ---- Patient (today's encounters) autocomplete -------------------
    const patInput   = document.getElementById('patient-search');
    const patResults = document.getElementById('patient-results');
    const encId      = document.getElementById('encounter_id');
    const patChosen  = document.getElementById('patient-chosen');
    const fEncounter = document.getElementById('field-encounter');
    const fPatient   = document.getElementById('field-patient');
    const fMrn       = document.getElementById('field-mrn');

    async function searchPatients(q) {
        patResults.innerHTML = '';
        try {
            const res  = await fetch("{{ route('corporate.referrals.search-patients') }}?q=" + encodeURIComponent(q));
            const data = await res.json();
            if (!data.results.length) {
                patResults.innerHTML = '<div class="px-3 py-2 text-xs text-gray-400">No matching patients with an encounter today.</div>';
                patResults.classList.remove('hidden');
                return;
            }
            renderList(patResults, data.results, function (item) {
                encId.value = item.encounter_id;
                patChosen.innerHTML =
                    '<div class="font-semibold text-gray-900">' + item.patient_name + '</div>' +
                    '<div class="text-xs text-gray-500">' + item.mrn + ' · ' + item.encounter_no + '</div>';
                patChosen.classList.remove('hidden');
                patInput.value = item.label;
                if (fEncounter) fEncounter.textContent = item.encounter_no;
                if (fPatient)   fPatient.textContent   = item.patient_name;
                if (fMrn)       fMrn.textContent        = item.mrn;
                patResults.classList.add('hidden');
                checkReady();
            }, function (item) { return item.label; });
        } catch (e) { patResults.classList.add('hidden'); }
    }

    function renderList(container, items, onPick, labelFn) {
        container.innerHTML = '';
        if (!items.length) { container.classList.add('hidden'); return; }
        items.forEach(function (item) {
            const div = document.createElement('div');
            div.className = 'px-3 py-2 text-sm hover:bg-blue-50 cursor-pointer border-b border-gray-100';
            div.textContent = labelFn(item);
            div.addEventListener('click', function () { onPick(item); });
            container.appendChild(div);
        });
        container.classList.remove('hidden');
    }

    function checkReady() {
        const btn = document.getElementById('save-referral');
        btn.disabled = !(riderId.value && encId.value);
    }

    if (riderInput) {
        riderInput.addEventListener('input', debounce(function (e) { searchRiders(e.target.value.trim()); }, 250));
    }
    if (patInput) {
        patInput.addEventListener('focus', function () { searchPatients(patInput.value.trim()); });
        patInput.addEventListener('input', debounce(function (e) { searchPatients(e.target.value.trim()); }, 250));
    }

    document.addEventListener('click', function (e) {
        if (riderResults && !riderResults.contains(e.target) && e.target !== riderInput) riderResults.classList.add('hidden');
        if (patResults && !patResults.contains(e.target) && e.target !== patInput) patResults.classList.add('hidden');
    });
})();
</script>
@endsection
@endif