@extends('layouts.app')
@section('title', 'Record Shift Entry')
@section('content')
<div class="max-w-3xl">
    <div class="flex items-center gap-3 mb-5">
        <a href="{{ route('locum.shifts') }}" class="text-gray-400 hover:text-gray-600">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
        </a>
        <div>
            <h1 class="text-lg font-bold text-gray-900">Record Shift Entry</h1>
            <p class="text-xs text-gray-400">For per-procedure locums, add each session separately below</p>
        </div>
    </div>

    <form method="POST" action="{{ route('locum.shifts.store') }}" id="shiftForm">
        @csrf
        <div class="space-y-4">

            {{-- Locum + date row --}}
            <div class="bg-white rounded-xl border shadow-sm p-5">
                <h3 class="font-bold text-gray-800 text-sm mb-4">Shift Details</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="md:col-span-2">
                        <label class="form-label">Locum <span class="text-red-500">*</span></label>
                        <select name="locum_id" required class="form-input" id="locum-select" onchange="onLocumChange(this)">
                            <option value="">Select locum…</option>
                            @foreach($locums as $l)
                            <option value="{{ $l->id }}"
                                data-rate="{{ $l->default_rate }}"
                                data-rate-type="{{ $l->rate_type ?? 'per_shift' }}"
                                data-dept="{{ $l->department_id }}"
                                data-role="{{ $l->role_designation }}"
                                data-has-user="{{ $l->user_id ? '1' : '0' }}"
                                {{ (old('locum_id', $prefillLocumId ?? '') == $l->id) ? 'selected' : '' }}>
                                {{ $l->full_name }} | {{ $l->role_designation }}
                                @if(Auth::user()->activeRoleName() !== 'Receptionist')
                                    @if(($l->rate_type ?? 'per_shift') === 'percentage')
                                        ({{ $l->default_rate }}% per procedure)
                                    @else
                                        (KES {{ number_format($l->default_rate) }}/shift)
                                    @endif
                                @endif
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Work Date <span class="text-red-500">*</span></label>
                        <input type="date" name="work_date" id="work-date" required class="form-input"
                            value="{{ old('work_date', $prefillDate ?? date('Y-m-d')) }}" onchange="fetchAvailableScans()">
                    </div>
                    <div>
                        <label class="form-label">Shift Type <span class="text-red-500">*</span></label>
                        <select name="shift_type" required class="form-input">
                            <option value="day">Day (8am – 8pm)</option>
                            <option value="night">Night (8pm – 8am)</option>
                            <option value="on_call">On Call</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-input" id="dept-select">
                            <option value="">Uses locum default</option>
                            @include('partials._department-options')
                        </select>
                    </div>
                    <div id="attendance-field">
                        <label class="form-label">Attendance</label>
                        <select name="attendance_status" class="form-input">
                            <option value="present">Present</option>
                            <option value="late">Late</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-input" rows="2" placeholder="Optional remarks…"></textarea>
                    </div>
                </div>
            </div>

            {{-- Flat rate summary --}}
            <div id="flat-rate-panel" class="bg-blue-50 border border-blue-100 rounded-xl p-4 hidden">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-xs text-gray-500">Payment terms</p>
                        <p class="font-semibold text-gray-800" id="flat-terms">—</p>
                    </div>
                    @if(Auth::user()->activeRoleName() !== 'Receptionist')
                    <div class="text-right">
                        <p class="text-xs text-gray-500">Gross pay</p>
                        <p class="text-xl font-bold text-purple-700" id="flat-amount">KES 0</p>
                    </div>
                    @else
                    <div id="flat-amount" class="hidden"></div>
                    @endif
                </div>
            </div>

            {{-- Per-procedure / sessions panel (sonographer picker) --}}
            <div id="sessions-panel" class="hidden">
                <div class="rounded-xl border border-blue-200 bg-blue-50 p-3 mb-3 flex items-start gap-2">
                    <svg class="w-4 h-4 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <div class="text-xs text-blue-900 leading-relaxed">
                        <span class="font-semibold">Sonographer shifts are now auto-drafted.</span>
                        Every time this sonographer verifies and releases a report, a draft shift is created or updated automatically with the patient, procedure, and invoiced amount. You normally don't need this form for sonographers — go to <a href="{{ route('locum.shifts') }}" class="underline font-semibold">Shifts list</a> to review and submit existing drafts. This screen is kept only for back-fill / corrections.
                    </div>
                </div>
                <div class="bg-white rounded-xl border shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50">
                        <div>
                            <h3 class="font-bold text-gray-800 text-sm">Procedure Sessions</h3>
                            <p class="text-xs text-gray-400 mt-0.5">
                                Pick from billed scans below. Already-attached scans are hidden automatically.
                                @if(Auth::user()->activeRoleName() !== 'Receptionist')
                                    <span id="rate-hint">Rate: —</span>
                                @endif
                            </p>
                            @if(Auth::user()->activeRoleName() === 'Receptionist')
                                <p id="rate-hint" class="hidden"></p>
                            @endif
                        </div>
                    </div>

                    {{-- Billed scans picker --}}
                    <div id="scan-picker-wrap" class="px-4 py-3 border-b bg-amber-50/40">
                        <div class="flex items-center justify-between mb-2">
                            <p class="text-xs font-semibold text-amber-800">
                                <svg class="w-3.5 h-3.5 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>
                                <span id="scan-picker-title">Available billed scans</span>
                            </p>
                            <input type="text" id="scan-search" oninput="filterScans()"
                                placeholder="Search patient or procedure…"
                                class="form-input text-xs py-1 px-2 w-48 hidden" id="scan-search-input">
                        </div>
                        <div id="scan-picker-list" class="space-y-1 max-h-56 overflow-y-auto">
                            <p class="text-xs text-gray-400 italic py-2">Select a sonographer to load available scans.</p>
                        </div>
                    </div>

                    <div id="sessions-container" class="divide-y divide-gray-50">
                        {{-- rows injected by JS --}}
                    </div>
                    <div id="sessions-empty" class="px-4 py-8 text-center text-gray-400 text-xs">
                        No sessions added yet. Pick scans from the list above.
                    </div>

                    {{-- Totals footer --}}
                    <div class="px-4 py-3 border-t bg-gray-50 flex items-center justify-between">
                        <span class="text-xs text-gray-500"><span id="session-count">0</span> session(s)</span>
                        @if(Auth::user()->activeRoleName() !== 'Receptionist')
                        <div class="flex gap-6 text-right text-xs">
                            <div><p class="text-gray-400">Total billed</p><p class="font-bold text-gray-700" id="total-billed">KES 0</p></div>
                            <div><p class="text-gray-400">Locum earns</p><p class="font-bold text-purple-700 text-base" id="total-locum">KES 0</p></div>
                        </div>
                        @else
                        <div class="hidden"><span id="total-billed"></span><span id="total-locum"></span></div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Per-procedure / free-text panel (dentist & other non-sonographer percentage locums) --}}
            <div id="freetext-panel" class="hidden">
                <div class="bg-white rounded-xl border shadow-sm overflow-hidden">
                    <div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50">
                        <div>
                            <h3 class="font-bold text-gray-800 text-sm">Procedure Sessions</h3>
                            <p class="text-xs text-gray-400 mt-0.5">
                                Type each procedure performed and the amount charged at the till. Date and Patient (from the visit log) are required for every row.
                                @if(Auth::user()->activeRoleName() !== 'Receptionist')
                                    <span id="ft-rate-hint">Rate: —</span>
                                @endif
                            </p>
                        </div>
                        <button type="button" onclick="addFreetextRow()" class="text-xs font-semibold text-amber-700 hover:text-amber-900 px-2 py-1 rounded">+ Add row</button>
                    </div>

                    <div id="freetext-container" class="divide-y divide-gray-100">
                        {{-- card rows injected by JS --}}
                    </div>
                    <div id="freetext-empty" class="px-4 py-8 text-center text-gray-400 text-xs">
                        No procedures added yet. Click "+ Add row" to start.
                    </div>

                    {{-- Totals footer --}}
                    <div class="px-4 py-3 border-t bg-gray-50 flex items-center justify-between">
                        <span class="text-xs text-gray-500"><span id="ft-session-count">0</span> procedure(s)</span>
                        @if(Auth::user()->activeRoleName() !== 'Receptionist')
                        <div class="flex gap-6 text-right text-xs">
                            <div><p class="text-gray-400">Total billed</p><p class="font-bold text-gray-700" id="ft-total-billed">KES 0</p></div>
                            <div><p class="text-gray-400">Locum earns</p><p class="font-bold text-purple-700 text-base" id="ft-total-locum">KES 0</p></div>
                        </div>
                        @else
                        <div class="hidden"><span id="ft-total-billed"></span><span id="ft-total-locum"></span></div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- "Save & add another" hidden flag — set by the corresponding
                 button just before submit, read by storeShift() to redirect
                 back here pre-filled instead of bouncing to the list. --}}
            <input type="hidden" id="continue-flag" name="continue" value="">

            <div class="flex gap-3">
                <button type="submit" onclick="document.getElementById('continue-flag').value=''" class="btn-success">Save as Draft</button>
                <button type="submit" onclick="document.getElementById('continue-flag').value='1'" class="btn-secondary" style="background:#0f766e;color:#fff;border-color:#0f766e" title="Save this entry and stay on this page to record another. Locum and date stay pre-selected.">Save &amp; add another</button>
                <a href="{{ route('locum.shifts') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection
@section('scripts')
<script>
let sessionIndex      = 0;
let freetextIndex     = 0;
let currentRate       = 0;
let currentRateType   = 'per_shift';
let currentRole       = '';
let availableScans    = [];      // billed scans not yet attached anywhere
const pickedRequestIds = new Set(); // imaging_request_ids picked in this form
const isReceptionCashier = {{ Auth::user()->activeRoleName() === 'Receptionist' ? 'true' : 'false' }};

function isSonographerRole(role) {
    const r = (role || '').toLowerCase();
    return r.includes('sonograph') || r.includes('ultrasound');
}

function onLocumChange(sel) {
    const opt = sel.options[sel.selectedIndex];
    if (!opt || !opt.value) return;

    currentRate     = parseFloat(opt.dataset.rate) || 0;
    currentRateType = opt.dataset.rateType || 'per_shift';
    currentRole     = opt.dataset.role || '';

    document.getElementById('dept-select').value = opt.dataset.dept || '';

    // Hide all panels first; below we re-show the appropriate one.
    document.getElementById('flat-rate-panel').classList.add('hidden');
    document.getElementById('sessions-panel').classList.add('hidden');
    document.getElementById('freetext-panel').classList.add('hidden');

    if (currentRateType === 'percentage') {
        if (isSonographerRole(currentRole)) {
            // Sonographer → imaging-request picker
            document.getElementById('sessions-panel').classList.remove('hidden');
            // Sonographers only generate shifts when they verify reports —
            // their presence is implicit. Hide the attendance dropdown so
            // it doesn't suggest "absent" is a meaningful option for them.
            const attField = document.getElementById('attendance-field');
            if (attField) attField.classList.add('hidden');
            if (!isReceptionCashier) {
                document.getElementById('rate-hint').textContent = 'Rate: ' + currentRate + '% per procedure';
            }
            // reset any previously-picked rows when locum changes
            pickedRequestIds.clear();
            document.getElementById('sessions-container').innerHTML = '';
            sessionIndex = 0;
            document.getElementById('sessions-empty').style.display = '';
            fetchAvailableScans();
            recalcTotals();
        } else {
            // Dentist / other percentage role → free-text procedure entry
            document.getElementById('freetext-panel').classList.remove('hidden');
            const attField = document.getElementById('attendance-field');
            if (attField) attField.classList.remove('hidden');
            if (!isReceptionCashier) {
                document.getElementById('ft-rate-hint').textContent = 'Rate: ' + currentRate + '% per procedure';
            }
            // reset previously-typed rows when locum changes
            document.getElementById('freetext-container').innerHTML = '';
            freetextIndex = 0;
            document.getElementById('freetext-empty').style.display = '';
            recalcFreetextTotals();
            // Auto-add one empty row so the receptionist sees something to fill in
            addFreetextRow();
        }
    } else {
        document.getElementById('flat-rate-panel').classList.remove('hidden');
        const attField = document.getElementById('attendance-field');
        if (attField) attField.classList.remove('hidden');
        document.getElementById('flat-terms').textContent = isReceptionCashier
            ? (opt.dataset.role || '') + ' — Per shift'
            : (opt.dataset.role || '') + ' — KES ' + currentRate.toLocaleString() + ' per shift';
        if (!isReceptionCashier) document.getElementById('flat-amount').textContent = 'KES ' + currentRate.toLocaleString();
    }
}

function fetchAvailableScans() {
    const locumId = document.getElementById('locum-select').value;
    const date    = document.getElementById('work-date').value;
    if (!locumId || currentRateType !== 'percentage') return;

    const list = document.getElementById('scan-picker-list');
    list.innerHTML = '<p class="text-xs text-gray-400 italic py-2">Loading available scans…</p>';

    fetch(`{{ route('locum.imaging-reports') }}?locum_id=${locumId}&date=${date}`)
        .then(r => r.json())
        .then(scans => {
            availableScans = scans || [];
            renderScanPicker();
        })
        .catch(() => {
            list.innerHTML = '<p class="text-xs text-red-400 italic py-2">Failed to load scans. Refresh the page.</p>';
        });
}

function renderScanPicker() {
    const list = document.getElementById('scan-picker-list');
    const search = (document.getElementById('scan-search')?.value || '').toLowerCase().trim();

    const visible = availableScans
        .filter(s => !pickedRequestIds.has(s.imaging_request_id))
        .filter(s => {
            if (!search) return true;
            return (s.imaging_type || '').toLowerCase().includes(search)
                || (s.body_part   || '').toLowerCase().includes(search)
                || (s.patient_name|| '').toLowerCase().includes(search);
        });

    document.getElementById('scan-search').classList.toggle('hidden', availableScans.length < 6);
    document.getElementById('scan-picker-title').textContent =
        availableScans.length
            ? `Available billed scans (${availableScans.length - pickedRequestIds.size} unassigned)`
            : 'Available billed scans';

    if (!availableScans.length) {
        list.innerHTML = '<p class="text-xs text-gray-500 italic py-2">No verified scans available. The picker shows imaging requests with status <em>verified</em> (i.e. scan reported and released) from 4 May 2026 onwards. Scans before then were paid out manually. If a scan is missing, check Imaging → confirm the report has been verified, then refresh.</p>';
        return;
    }
    if (!visible.length) {
        list.innerHTML = '<p class="text-xs text-gray-500 italic py-2">All available scans are already picked, or no match for your search.</p>';
        return;
    }

    list.innerHTML = visible.map(s => {
        const fullType = (s.imaging_type || '') + (s.body_part ? ' (' + s.body_part + ')' : '');
        const ancPill = s.is_anc_covered
            ? '<span class="text-[10px] font-bold text-emerald-700 bg-emerald-100 px-1.5 py-0.5 rounded ml-1">ANC pkg</span>'
            : '';
        const unbilledPill = s.is_unbilled
            ? '<span class="text-[10px] font-bold text-rose-700 bg-rose-100 px-1.5 py-0.5 rounded ml-1" title="No invoice item exists for this scan. Receptionist should bill it at the till; sonographer is paid at the fallback rate in the meantime.">⚠ NO INVOICE ITEM</span>'
            : '';
        const billedTxt = isReceptionCashier ? '' : `<span class="text-xs text-gray-500 ml-2">KES ${Number(s.billed_amount).toLocaleString()}</span>`;
        return `
            <button type="button" onclick="pickScan(${s.imaging_request_id})"
                class="w-full flex items-center justify-between gap-2 px-3 py-2 bg-white border border-amber-200 rounded-lg text-xs hover:bg-amber-50 hover:border-amber-400 transition text-left">
                <div class="flex-1 min-w-0">
                    <p class="font-semibold text-gray-800 truncate">${escapeHtml(fullType)}${ancPill}${unbilledPill}</p>
                    <p class="text-[11px] text-gray-500">${escapeHtml(s.patient_name || '')} · billed ${escapeHtml(s.billed_date || '')}</p>
                </div>
                <div class="flex items-center gap-2 flex-shrink-0">
                    ${billedTxt}
                    <span class="text-amber-600 font-bold">+ Add</span>
                </div>
            </button>`;
    }).join('');
}

function filterScans() { renderScanPicker(); }

function escapeHtml(s) {
    return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

function pickScan(imagingRequestId) {
    const scan = availableScans.find(x => x.imaging_request_id === imagingRequestId);
    if (!scan) return;
    if (pickedRequestIds.has(imagingRequestId)) return;
    pickedRequestIds.add(imagingRequestId);
    addSessionRow(scan);
    renderScanPicker();
}

function addSessionRow(scan) {
    const idx = sessionIndex++;
    document.getElementById('sessions-empty').style.display = 'none';
    const container = document.getElementById('sessions-container');
    const row = document.createElement('div');
    row.className = 'session-row px-4 py-3 grid grid-cols-12 gap-2 items-center';
    row.id = 'session-' + idx;
    row.dataset.requestId = scan.imaging_request_id;
    row.dataset.billed = scan.billed_amount;

    const fullType = (scan.imaging_type || '') + (scan.body_part ? ' — ' + scan.body_part : '');
    const billedAmt = Number(scan.billed_amount) || 0;
    const ancPill = scan.is_anc_covered
        ? '<span class="text-[10px] font-bold text-emerald-700 bg-emerald-100 px-1.5 py-0.5 rounded ml-1">ANC pkg</span>'
        : '';
    const unbilledPill = scan.is_unbilled
        ? '<span class="text-[10px] font-bold text-rose-700 bg-rose-100 px-1.5 py-0.5 rounded ml-1">⚠ NO INVOICE ITEM</span>'
        : '';
    const billedDisplay = isReceptionCashier
        ? '<span class="text-xs text-gray-400">—</span>'
        : `<span class="text-xs font-semibold text-gray-700">KES ${billedAmt.toLocaleString()}</span>`;
    const locumDisplay = isReceptionCashier
        ? '<span class="locum-amt hidden"></span>'
        : `<span class="text-xs font-bold text-purple-700 locum-amt" id="locum-amt-${idx}">KES 0</span>`;

    row.innerHTML = `
        <input type="hidden" name="sessions[${idx}][imaging_request_id]" value="${scan.imaging_request_id}">
        <div class="col-span-5">
            <p class="text-xs font-semibold text-gray-800 truncate">${escapeHtml(fullType)}${ancPill}${unbilledPill}</p>
            <p class="text-[11px] text-gray-400">${escapeHtml(scan.patient_name || '')}</p>
        </div>
        <div class="col-span-3 text-right">${billedDisplay}</div>
        <div class="col-span-3 text-right">${locumDisplay}</div>
        <div class="col-span-1 text-right">
            <button type="button" onclick="removeSession(${idx}, ${scan.imaging_request_id})"
                class="text-red-400 hover:text-red-600 p-1" title="Remove">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>`;
    container.appendChild(row);
    recalcTotals();
}

function removeSession(idx, imagingRequestId) {
    document.getElementById('session-' + idx)?.remove();
    pickedRequestIds.delete(imagingRequestId);
    const rows = document.querySelectorAll('.session-row');
    if (!rows.length) document.getElementById('sessions-empty').style.display = '';
    renderScanPicker();
    recalcTotals();
}

function recalcTotals() {
    let totalBilled = 0, totalLocum = 0, count = 0;
    document.querySelectorAll('.session-row').forEach((row) => {
        const billed = parseFloat(row.dataset.billed) || 0;
        const locumAmt = Math.round(billed * (currentRate / 100) * 100) / 100;
        const amtEl = row.querySelector('.locum-amt');
        if (amtEl) amtEl.textContent = 'KES ' + locumAmt.toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:2});
        totalBilled += billed;
        totalLocum  += locumAmt;
        count++;
    });
    document.getElementById('total-billed').textContent = 'KES ' + totalBilled.toLocaleString();
    document.getElementById('total-locum').textContent  = 'KES ' + totalLocum.toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:2});
    document.getElementById('session-count').textContent = count;
}

// ── Free-text procedure entry (dentist & other percentage non-sonographer roles) ──

// Cache patient lists keyed by date string ('YYYY-MM-DD') to avoid hitting
// the server every time the receptionist opens a row's patient dropdown.
const ftPatientsCache = {};

function loadPatientsForDate(date) {
    if (!date) return Promise.resolve([]);
    if (ftPatientsCache[date]) return Promise.resolve(ftPatientsCache[date]);
    return fetch(`{{ route('locum.visit-patients') }}?date=${date}`)
        .then(r => r.json())
        .then(rows => {
            ftPatientsCache[date] = rows || [];
            return ftPatientsCache[date];
        })
        .catch(() => []);
}

function renderPatientOptions(selectEl, patients, selectedId) {
    // Strict: receptionist MUST pick a registered patient from this date's
    // visit log. Walk-in / free-typed names are not allowed — locums are only
    // paid for procedures done on registered patients.
    if (!patients.length) {
        selectEl.innerHTML = '<option value="">No registered patients on this date</option>';
        return;
    }
    let html = '<option value="">— Pick patient —</option>';
    patients.forEach(p => {
        const sel = (selectedId && Number(selectedId) === p.patient_id) ? 'selected' : '';
        const lbl = escapeHtml(p.name) + (p.mrn ? ` (${escapeHtml(p.mrn)})` : '');
        html += `<option value="${p.patient_id}" data-name="${escapeHtml(p.name)}" ${sel}>${lbl}</option>`;
    });
    selectEl.innerHTML = html;
}

function onFtDateChange(idx) {
    const row    = document.getElementById('ft-row-' + idx);
    if (!row) return;
    const date   = row.querySelector('.ft-date').value;
    const sel    = row.querySelector('.ft-patient-select');
    sel.innerHTML = '<option value="">Loading patients…</option>';
    loadPatientsForDate(date).then(patients => {
        renderPatientOptions(sel, patients, null);
        onFtPatientChange(idx);
    });
}

function onFtPatientChange(idx) {
    const row      = document.getElementById('ft-row-' + idx);
    if (!row) return;
    const sel      = row.querySelector('.ft-patient-select');
    const hidden   = row.querySelector('.ft-patient-name');
    const hiddenId = row.querySelector('.ft-patient-id');

    if (sel.value === '') {
        hidden.value   = '';
        hiddenId.value = '';
    } else {
        const opt = sel.options[sel.selectedIndex];
        hidden.value   = opt?.dataset?.name || '';
        hiddenId.value = sel.value;
    }
}

function addFreetextRow() {
    const idx = freetextIndex++;
    document.getElementById('freetext-empty').style.display = 'none';
    const container = document.getElementById('freetext-container');
    const defaultDate = document.getElementById('work-date').value;

    const row = document.createElement('div');
    row.className = 'freetext-row px-4 py-3';
    row.id = 'ft-row-' + idx;

    const locumDisplay = isReceptionCashier
        ? '<span class="ft-locum-amt hidden"></span>'
        : `<div class="text-right"><p class="text-[10px] text-gray-400 uppercase tracking-wide">Locum earns</p><span class="font-bold text-purple-700 ft-locum-amt" id="ft-locum-${idx}">KES 0</span></div>`;

    row.innerHTML = `
        <div class="flex items-start justify-between gap-2 mb-2">
            <span class="text-[11px] font-semibold text-gray-500">Procedure #${idx + 1}</span>
            <button type="button" onclick="removeFreetextRow(${idx})" class="text-red-400 hover:text-red-600 p-1" title="Remove">
                <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="M6 18L18 6M6 6l12 12"/></svg>
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
            <div>
                <label class="text-[11px] font-semibold text-gray-600">Date <span class="text-red-500">*</span></label>
                <input type="date" name="sessions[${idx}][session_date]" class="form-input text-xs py-1.5 ft-date"
                    value="${defaultDate}" required onchange="onFtDateChange(${idx})">
            </div>
            <div>
                <label class="text-[11px] font-semibold text-gray-600">Patient <span class="text-red-500">*</span></label>
                <select class="form-input text-xs py-1.5 ft-patient-select" onchange="onFtPatientChange(${idx})" required>
                    <option value="">Loading patients…</option>
                </select>
                <p class="text-[10px] text-gray-400 mt-0.5">Only patients registered for a visit on this date can be selected.</p>
                <input type="hidden" name="sessions[${idx}][patient_id]"   class="ft-patient-id"   value="">
                <input type="hidden" name="sessions[${idx}][patient_name]" class="ft-patient-name" value="">
            </div>
            <div class="md:col-span-2">
                <label class="text-[11px] font-semibold text-gray-600">Procedure / Description <span class="text-red-500">*</span></label>
                <input type="text" name="sessions[${idx}][description]" class="form-input text-xs py-1.5 ft-desc" placeholder="e.g. Dental scaling, tooth extraction…" required>
            </div>
            <div>
                <label class="text-[11px] font-semibold text-gray-600">Amount (KES) <span class="text-red-500">*</span></label>
                <input type="number" step="0.01" min="0" name="sessions[${idx}][amount]" class="form-input text-xs py-1.5 text-right ft-amt" placeholder="0" oninput="recalcFreetextTotals()" required>
            </div>
            <div class="flex items-end justify-end">${locumDisplay}</div>
        </div>`;
    container.appendChild(row);

    // Load patients for the row's default date.
    onFtDateChange(idx);
    recalcFreetextTotals();
}

function removeFreetextRow(idx) {
    document.getElementById('ft-row-' + idx)?.remove();
    if (!document.querySelectorAll('.freetext-row').length) {
        document.getElementById('freetext-empty').style.display = '';
    }
    recalcFreetextTotals();
}

function recalcFreetextTotals() {
    let totalBilled = 0, totalLocum = 0, count = 0;
    document.querySelectorAll('.freetext-row').forEach(row => {
        const amt = parseFloat(row.querySelector('.ft-amt')?.value) || 0;
        const locumAmt = Math.round(amt * (currentRate / 100) * 100) / 100;
        const locumEl = row.querySelector('.ft-locum-amt');
        if (locumEl) locumEl.textContent = 'KES ' + locumAmt.toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:2});
        totalBilled += amt;
        totalLocum  += locumAmt;
        count++;
    });
    document.getElementById('ft-total-billed').textContent = 'KES ' + totalBilled.toLocaleString();
    document.getElementById('ft-total-locum').textContent  = 'KES ' + totalLocum.toLocaleString(undefined, {minimumFractionDigits:0, maximumFractionDigits:2});
    document.getElementById('ft-session-count').textContent = count;
}

// Refresh available scans whenever work date changes
document.addEventListener('DOMContentLoaded', () => {
    const sel = document.getElementById('locum-select');
    if (sel.value) onLocumChange(sel);
});
</script>
@endsection