@extends('layouts.app')
@section('title', 'New Direct ' . ($type === 'lab' ? 'Lab' : 'Imaging') . ' Encounter')
@section('content')

<div class="max-w-4xl mx-auto">
    <div class="mb-3">
        <a href="{{ route('direct-encounters.index') }}" class="text-xs text-cr-600 hover:underline">← Back to Direct Encounters</a>
    </div>

    <form method="POST" action="{{ route('direct-encounters.store') }}">
        @csrf
        <input type="hidden" name="type" value="{{ $type }}">

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 rounded-lg p-3 mb-4">
                <ul class="text-xs text-red-700 list-disc pl-5">
                    @foreach($errors->all() as $err)<li>{{ $err }}</li>@endforeach
                </ul>
            </div>
        @endif

        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-4">
            <h2 class="text-lg font-bold text-gray-800 mb-1">
                @if($type === 'lab')
                    🧪 New Direct Lab Encounter
                @else
                    📷 New Direct Imaging Encounter
                @endif
            </h2>
            <p class="text-xs text-gray-500 mb-4">
                Walk-in {{ $type === 'lab' ? 'lab test' : 'imaging' }} request — no doctor consultation. The patient is billed at the till and proceeds to {{ $type === 'lab' ? 'the lab' : 'imaging' }} once payment is confirmed.
            </p>

            {{-- Patient + payer --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div class="md:col-span-2">
                    <label class="form-label">Patient <span class="text-red-500">*</span></label>
                    <div class="relative">
                        <svg class="w-4 h-4 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                        <input type="text" class="form-input pl-9 patient-search" data-target="patient_id" placeholder="Search patient by name, MRN, or phone..." autocomplete="off">
                        <input type="hidden" name="patient_id" id="patient_id" value="{{ old('patient_id') }}" required>
                    </div>
                    <p class="text-xs text-gray-400 mt-1">Not found? <a href="{{ route('patients.create') }}" class="text-cr-600 font-medium">Register new patient →</a></p>
                </div>

                <div>
                    <label class="form-label">Payer Type <span class="text-red-500">*</span></label>
                    <select name="payer_type" required class="form-input"
                            onchange="document.getElementById('ins_row').style.display = this.value === 'insurance' ? 'grid' : 'none'">
                        <option value="cash"      {{ old('payer_type') === 'cash' ? 'selected' : '' }}>Cash</option>
                        <option value="mpesa"     {{ old('payer_type') === 'mpesa' ? 'selected' : '' }}>M-Pesa</option>
                        <option value="insurance" {{ old('payer_type') === 'insurance' ? 'selected' : '' }}>Insurance</option>
                        <option value="corporate" {{ old('payer_type') === 'corporate' ? 'selected' : '' }}>Corporate</option>
                    </select>
                </div>

                <div>
                    <label class="form-label inline-flex items-center gap-2">
                        <input type="checkbox" name="urgent" value="1" {{ old('urgent') ? 'checked' : '' }}>
                        Urgent
                    </label>
                    <p class="text-[11px] text-gray-400 mt-1">Flagged as STAT for the lab/imaging team.</p>
                </div>
            </div>

            <div id="ins_row" class="grid grid-cols-1 md:grid-cols-2 gap-5 mt-4" style="display:{{ old('payer_type') === 'insurance' ? 'grid' : 'none' }}">
                <div>
                    <label class="form-label">Insurance Company</label>
                    <select name="insurance_company_id" class="form-input">
                        <option value="">Select</option>
                        @foreach($insurers as $i)
                            <option value="{{ $i->id }}" {{ old('insurance_company_id') == $i->id ? 'selected' : '' }}>{{ $i->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="form-label">Authorization Code</label>
                    <input type="text" name="authorization_code" value="{{ old('authorization_code') }}" class="form-input">
                </div>
            </div>
        </div>

        {{-- ─────────────  LAB-FLAVORED ORDERS  ───────────── --}}
        @if($type === 'lab')
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-4">
            <h3 class="text-sm font-bold text-gray-800 mb-1">Lab Tests to Order <span class="text-red-500">*</span></h3>
            <p class="text-[11px] text-gray-500 mb-3">Select one or more tests. Prices auto-fill from the lab catalogue.</p>

            <input type="text" id="lab-search" placeholder="Search by test name, code, or category..."
                   class="form-input mb-3" autocomplete="off" oninput="filterLabRows(this.value)">

            <div class="border border-gray-200 rounded-lg overflow-hidden max-h-96 overflow-y-auto" id="lab-table-wrap">
                <table class="w-full text-xs">
                    <thead class="bg-gray-50 sticky top-0">
                        <tr>
                            <th class="px-3 py-2 text-left w-10"></th>
                            <th class="px-3 py-2 text-left">Test</th>
                            <th class="px-3 py-2 text-left">Category</th>
                            <th class="px-3 py-2 text-left">Sample</th>
                            <th class="px-3 py-2 text-right">Price (KES)</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @forelse($labTests as $t)
                        <tr class="lab-row hover:bg-gray-50"
                            data-haystack="{{ strtolower($t->name . ' ' . $t->code . ' ' . $t->category) }}">
                            <td class="px-3 py-2">
                                <input type="checkbox" name="lab_test_ids[]" value="{{ $t->id }}"
                                       class="lab-check" data-price="{{ $t->price }}" data-name="{{ $t->name }}"
                                       {{ in_array($t->id, old('lab_test_ids', [])) ? 'checked' : '' }}
                                       onchange="recalcLabTotal()">
                            </td>
                            <td class="px-3 py-2 font-medium">{{ $t->name }}</td>
                            <td class="px-3 py-2 text-gray-500">{{ $t->category ?: '—' }}</td>
                            <td class="px-3 py-2 text-gray-500">{{ $t->sample_type ?: '—' }}</td>
                            <td class="px-3 py-2 text-right font-mono">{{ number_format($t->price, 2) }}</td>
                        </tr>
                        @empty
                        <tr><td colspan="5" class="text-center text-gray-400 py-6">No active lab tests in catalogue.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="mt-3 flex items-center justify-between text-sm bg-gray-50 px-4 py-2 rounded-lg border border-gray-200">
                <span class="text-gray-600"><span id="lab-count">0</span> test(s) selected</span>
                <span class="font-bold text-gray-800">Estimated total: KES <span id="lab-total">0</span></span>
            </div>
        </div>
        @endif

        {{-- ─────────────  RADIOLOGY-FLAVORED ORDERS  ───────────── --}}
        @if($type === 'radiology')
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-4">
            <h3 class="text-sm font-bold text-gray-800 mb-1">Imaging Requests <span class="text-red-500">*</span></h3>
            <p class="text-[11px] text-gray-500 mb-3">Add one or more imaging requests. Pricing assigned at the radiology station.</p>

            <div id="imaging-rows" class="space-y-2">
                {{-- One initial row, JS adds more on demand --}}
                <div class="imaging-row grid grid-cols-12 gap-2 items-start">
                    <div class="col-span-3">
                        <select name="imaging_orders[0][imaging_type]" class="form-input text-xs">
                            @foreach($imagingTypes as $it)
                                <option value="{{ $it }}">{{ $it }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-span-3">
                        <input type="text" name="imaging_orders[0][body_part]" placeholder="Body part (e.g. Chest)"
                               class="form-input text-xs" autocomplete="off">
                    </div>
                    <div class="col-span-5">
                        <input type="text" name="imaging_orders[0][clinical_indication]"
                               placeholder="Clinical indication (e.g. cough, suspected pneumonia)"
                               class="form-input text-xs" autocomplete="off">
                    </div>
                    <div class="col-span-1 flex items-center justify-end">
                        <button type="button" onclick="this.closest('.imaging-row').remove()"
                                class="text-red-500 hover:text-red-700 text-xs">✕</button>
                    </div>
                </div>
            </div>

            <button type="button" onclick="addImagingRow()" class="mt-2 text-xs text-cr-600 font-medium hover:underline">
                + Add another imaging request
            </button>
        </div>
        @endif

        {{-- Optional notes --}}
        <div class="bg-white rounded-xl border border-gray-200 p-6 mb-4">
            <label class="form-label">Clinical Notes (optional)</label>
            <textarea name="clinical_notes" rows="2" class="form-input" placeholder="External referral details, presenting concern, etc.">{{ old('clinical_notes') }}</textarea>
        </div>

        <div class="flex gap-3">
            <button type="submit" class="btn-success flex items-center gap-2 px-6 py-2.5">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                Create Direct {{ $type === 'lab' ? 'Lab' : 'Imaging' }} Encounter
            </button>
            <a href="{{ route('direct-encounters.index') }}" class="btn-secondary">Cancel</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
@if($type === 'lab')
function recalcLabTotal() {
    let total = 0, count = 0;
    document.querySelectorAll('.lab-check:checked').forEach(c => {
        total += parseFloat(c.dataset.price) || 0;
        count++;
    });
    document.getElementById('lab-total').textContent = total.toLocaleString();
    document.getElementById('lab-count').textContent = count;
}
function filterLabRows(q) {
    const needle = q.toLowerCase();
    document.querySelectorAll('.lab-row').forEach(r => {
        r.style.display = !needle || r.dataset.haystack.includes(needle) ? '' : 'none';
    });
}
document.addEventListener('DOMContentLoaded', recalcLabTotal);
@endif

@if($type === 'radiology')
let imagingRowCount = 1;
function addImagingRow() {
    const wrap = document.getElementById('imaging-rows');
    const idx = imagingRowCount++;
    const row = document.createElement('div');
    row.className = 'imaging-row grid grid-cols-12 gap-2 items-start';
    row.innerHTML = `
        <div class="col-span-3">
            <select name="imaging_orders[${idx}][imaging_type]" class="form-input text-xs">
                @foreach($imagingTypes as $it)
                    <option value="{{ $it }}">{{ $it }}</option>
                @endforeach
            </select>
        </div>
        <div class="col-span-3"><input type="text" name="imaging_orders[${idx}][body_part]" placeholder="Body part" class="form-input text-xs" autocomplete="off"></div>
        <div class="col-span-5"><input type="text" name="imaging_orders[${idx}][clinical_indication]" placeholder="Clinical indication" class="form-input text-xs" autocomplete="off"></div>
        <div class="col-span-1 flex items-center justify-end"><button type="button" onclick="this.closest('.imaging-row').remove()" class="text-red-500 hover:text-red-700 text-xs">✕</button></div>
    `;
    wrap.appendChild(row);
}
@endif
</script>
@endpush
@endsection