@extends('layouts.app')
@section('title', 'Admit Patient')
@section('content')
<div class="max-w-3xl mx-auto">
    <form method="POST" action="{{ route('inpatient.admit') }}">
        @csrf
        <div class="bg-white rounded-xl border border-gray-200 p-6">
            @if($visit)
                <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                <div class="bg-cr-50 border border-cr-200 rounded-lg px-4 py-3 mb-5">
                    <p class="text-sm font-semibold">{{ $visit->patient->full_name }} <span class="font-mono text-xs text-cr-600">{{ $visit->patient->mrn }}</span></p>
                    <p class="text-xs text-gray-500">From visit {{ $visit->visit_number }}</p>
                </div>
            @else
                <div class="mb-5">
                    <label class="form-label">Patient <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <input type="text" class="form-input patient-search" data-target="patient_id" placeholder="Search patient by name, MRN, phone..." autocomplete="off">
                        <input type="hidden" name="patient_id" id="patient_id" required>
                    </div>
                </div>
            @endif

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label class="form-label">Ward <span class="text-red-500">*</span></label>
                    <select name="ward_id" required class="form-input" id="ward_select" onchange="loadBeds(this.value)">
                        <option value="">Select ward</option>
                        @foreach($wards as $w)
                            <option value="{{ $w->id }}">{{ $w->name }} ({{ $w->availableBeds->count() }} beds free)</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Bed <span class="text-red-500">*</span></label>
                    <select name="bed_id" required class="form-input" id="bed_select">
                        <option value="">Select ward first</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="form-label">Reason for Admission <span class="text-red-500">*</span></label>
                    <textarea name="reason" required class="form-input" rows="2" placeholder="Primary reason for admission"></textarea>
                </div>
                <div class="md:col-span-2 relative">
                    <label class="form-label">Admission Diagnosis</label>
                    <input type="text" name="diagnosis_on_admission" class="form-input" id="admitDiagInput" placeholder="Type to search ICD-10 diagnosis..." autocomplete="off">
                    <div id="admitDiagDrop" class="hidden absolute z-50 bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto w-full mt-1"></div>
                </div>
                <div>
                    <label class="form-label">Payer Type</label>
                    <select name="payer_type" class="form-input">
                        <option value="cash">Cash</option><option value="mpesa">M-Pesa</option><option value="insurance">Insurance</option><option value="corporate">Corporate</option>
                    </select>
                </div>
            </div>

            <div class="mt-6 flex gap-3 border-t border-gray-100 pt-5">
                <button type="submit" class="btn-success px-6">Admit Patient</button>
                <a href="{{ route('visits.ipd') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection
@section('scripts')
<script>
function loadBeds(wardId) {
    const sel = document.getElementById('bed_select');
    sel.innerHTML = '<option value="">Loading...</option>';
    if (!wardId) { sel.innerHTML = '<option value="">Select ward first</option>'; return; }
    fetch(`${window.HMIS_BASE}/inpatient/ward-beds/${wardId}`)
        .then(r => r.json())
        .then(beds => {
            sel.innerHTML = beds.length
                ? beds.map(b => `<option value="${b.id}">${b.bed_number}</option>`).join('')
                : '<option value="">No available beds</option>';
        });
}
// ICD-10 admission diagnosis | live search via API
(function() {
    const input = document.getElementById('admitDiagInput');
    const drop  = document.getElementById('admitDiagDrop');
    if (!input) return;
    let debounce;
    input.addEventListener('input', function() {
        clearTimeout(debounce);
        const q = this.value.trim();
        if (q.length < 2) { drop.classList.add('hidden'); return; }
        debounce = setTimeout(() => {
            fetch(`${window.HMIS_BASE}/icd10/search?q=${encodeURIComponent(q)}`, {
                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(r => r.json())
            .then(results => {
                if (!results.length) {
                    drop.innerHTML = '<div class="px-4 py-3 text-xs text-gray-400">No codes found.</div>';
                } else {
                    drop.innerHTML = results.map(r =>
                        `<div class="px-3 py-2 hover:bg-blue-50 cursor-pointer text-xs border-b border-gray-50 flex gap-2"
                              onclick="selectAdmitDiag(this)"
                              data-value="${r.code} - ${r.description}">
                            <span class="font-mono font-semibold text-blue-700 min-w-[3rem]">${r.code}</span>
                            <span>${r.description}</span>
                         </div>`
                    ).join('');
                }
                drop.classList.remove('hidden');
            }).catch(() => {});
        }, 250);
    });
    document.addEventListener('click', e => {
        if (!input.contains(e.target) && !drop.contains(e.target)) drop.classList.add('hidden');
    });
    window.selectAdmitDiag = function(el) {
        document.getElementById('admitDiagInput').value = el.dataset.value;
        drop.classList.add('hidden');
    };
})();
</script>
@endsection