@extends('layouts.app')
@section('title', 'Edit Shift Entry')
@section('content')
@php
    // Receptionist must NOT see locum pay information — they record
    // shifts but the rate and earnings are confidential to HR/Admin.
    $canSeePay = Auth::user()->activeRoleName() !== 'Receptionist';
    $canOverridePay = in_array(Auth::user()->actualRoleName(), ['Hospital Admin', 'Super Admin'], true);
    $shiftRole = strtolower((string) $shift->locum->role_designation);
    $shiftIsSono = str_contains($shiftRole, 'sonograph') || str_contains($shiftRole, 'ultrasound');
@endphp
<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">Edit Shift Entry</h1>
            <p class="text-xs text-gray-400">
                {{ $shift->locum->full_name }} — {{ $shift->work_date->format('d M Y') }}
                &nbsp;·&nbsp;
                @php $sc = ['draft'=>'badge-gray','submitted'=>'badge-info','verified'=>'badge-info','approved'=>'badge-success','rejected'=>'badge-danger']; @endphp
                <span class="badge {{ $sc[$shift->approval_status] ?? 'badge-gray' }}">{{ ucfirst($shift->approval_status) }}</span>
            </p>
        </div>
    </div>

    <div class="bg-amber-50 border border-amber-200 rounded-xl px-4 py-3 mb-4 text-xs text-amber-700 flex items-center gap-2">
        <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
        @if($shift->approval_status === 'draft')
            This entry is still a draft. Make your changes here, then submit it for approval from the shift list.
        @elseif($shift->approval_status === 'rejected')
            This entry was rejected. Fix the details below and save — it will return to the approval queue automatically.
        @else
            This entry is awaiting approval. Saving your corrections will send the updated version back to the approval queue for review.
        @endif
    </div>

    @if($shiftIsSono && $canOverridePay)
    <div class="bg-purple-50 border border-purple-200 rounded-xl px-4 py-3 mb-4 text-xs text-purple-800 flex items-start gap-2">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
        <div>
            <span class="font-semibold">Admin tools available.</span>
            Expand any session row below to apply a discount or waiver. New overrides require a reason. Existing overrides persist across receptionist submits — they can't be wiped accidentally.
        </div>
    </div>
    @elseif($shiftIsSono && !$canOverridePay)
    <div class="bg-blue-50 border border-blue-200 rounded-xl px-4 py-3 mb-4 text-xs text-blue-800 flex items-start gap-2">
        <svg class="w-4 h-4 flex-shrink-0 mt-0.5" 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>
            Sonographer shifts are populated automatically from verified reports. Amounts shown reflect what was invoiced, plus any admin discounts already applied. You can review and submit, but not change patients, procedures, or amounts. To request a discount or waiver, ask the hospital admin.
        </div>
    </div>
    @endif

    <form method="POST" action="{{ route('locum.shifts.update', $shift) }}" id="editShiftForm">
        @csrf @method('PUT')
        <div class="space-y-4">
            <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>

                {{-- Locum is LOCKED — cannot be changed on edit --}}
                <div class="mb-4 p-3 bg-gray-50 rounded-lg border flex items-center gap-3">
                    <div class="w-9 h-9 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
                        <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    </div>
                    <div>
                        <p class="text-xs font-bold text-gray-800">{{ $shift->locum->full_name }}</p>
                        <p class="text-xs text-gray-400">{{ $shift->locum->role_designation }}
                            @if($canSeePay)
                            &nbsp;·&nbsp;
                            @if($shift->rate_type === 'percentage'){{ $shift->rate_applied }}% per procedure
                            @else KES {{ number_format($shift->rate_applied) }} per shift @endif
                            @endif
                        </p>
                    </div>
                    <span class="ml-auto text-xs text-gray-400 bg-white border rounded px-2 py-1">Locked</span>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <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="{{ $shift->work_date->format('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"     {{ $shift->shift_type === 'day'     ? 'selected' : '' }}>Day (8am – 8pm)</option>
                            <option value="night"   {{ $shift->shift_type === 'night'   ? 'selected' : '' }}>Night (8pm – 8am)</option>
                            <option value="on_call" {{ $shift->shift_type === 'on_call' ? 'selected' : '' }}>On Call</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Department</label>
                        <select name="department_id" class="form-input">
                            <option value="">Uses locum default</option>
                            @include('partials._department-options', ['selected' => $shift->department_id])
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Attendance</label>
                        <select name="attendance_status" class="form-input">
                            <option value="present" {{ $shift->attendance_status === 'present' ? 'selected' : '' }}>Present</option>
                            <option value="late"    {{ $shift->attendance_status === 'late'    ? 'selected' : '' }}>Late</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="form-label">Notes</label>
                        <textarea name="notes" class="form-input" rows="2">{{ $shift->notes }}</textarea>
                    </div>
                </div>
            </div>

            @php
                $editLocumRole = strtolower((string) $shift->locum->role_designation);
                $editIsSonographer = str_contains($editLocumRole, 'sonograph') || str_contains($editLocumRole, 'ultrasound');
            @endphp
            @if($shift->rate_type === 'percentage' && $editIsSonographer)
            {{-- Multi-session panel (sonographer picker) --}}
            <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($canSeePay)Rate: {{ $shift->rate_applied }}% per procedure @endif
                        </p>
                    </div>
                </div>

                @php
                    $canOverride = in_array(Auth::user()->actualRoleName(), ['Hospital Admin', 'Super Admin'], true);
                @endphp
                @if($canOverride)
                <div 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">
                    </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">Loading…</p>
                    </div>
                </div>
                @else
                <div class="px-4 py-2 border-b bg-blue-50/40 text-[11px] text-blue-800 italic">
                    Sessions are added automatically when the sonographer verifies and releases a report. To apply a discount or waiver, ask the hospital admin.
                </div>
                <div id="scan-picker-list" class="hidden"></div>
                @endif

                <div id="sessions-container" class="divide-y divide-gray-50"></div>
                <div id="sessions-empty" class="px-4 py-8 text-center text-gray-400 text-xs" style="display:none">No sessions.</div>

                <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($canSeePay)
                    <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>
            @elseif($shift->rate_type === 'percentage' && !$editIsSonographer)
            {{-- Free-text panel (dentist & other percentage non-sonographer roles) --}}
            <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($canSeePay) Rate: {{ $shift->rate_applied }}% per procedure @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"></div>
                <div id="freetext-empty" class="px-4 py-8 text-center text-gray-400 text-xs" style="display:none">No procedures.</div>

                <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($canSeePay)
                    <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>
            @else
            {{-- Flat rate --}}
            @if($canSeePay)
            <div class="bg-blue-50 border border-blue-100 rounded-xl p-4 flex items-center justify-between">
                <div>
                    <p class="text-xs text-gray-500">Flat shift rate</p>
                    <p class="font-semibold text-gray-800">KES {{ number_format($shift->rate_applied) }} per shift</p>
                </div>
                <p class="text-xl font-bold text-purple-700">KES {{ number_format($shift->gross_amount) }}</p>
            </div>
            @endif
            @endif

            <div class="flex gap-3">
                <button type="submit" class="btn-success">Save Changes</button>
                <a href="{{ route('locum.shifts') }}" class="btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</div>
@endsection
@section('scripts')
@php
    $editLocumRole = strtolower((string) $shift->locum->role_designation);
    $editIsSonographer = str_contains($editLocumRole, 'sonograph') || str_contains($editLocumRole, 'ultrasound');
@endphp
@if($shift->rate_type === 'percentage' && $editIsSonographer)
@php
    // Override authority — only the user's REAL role grants this, not an
    // impersonated one. Mirrors LocumController::updateShift.
    $canOverride = in_array(Auth::user()->actualRoleName(), ['Hospital Admin', 'Super Admin'], true);
@endphp
<script>
const CURRENT_RATE = {{ $shift->rate_applied }};
const LOCUM_ID     = {{ $shift->locum_id }};
const EXISTING     = @json($shift->session_items ?? []);
const CAN_OVERRIDE = {{ $canOverride ? 'true' : 'false' }};

let sessionIndex      = 0;
let availableScans    = [];
const pickedRequestIds = new Set();

document.addEventListener('DOMContentLoaded', () => {
    // Restore existing draft rows from server-side data. Each row carries
    // imaging_request_id, imaging_type, patient_name, billed_amount, and
    // (where applicable) source_billed_amount + override_* fields. Admins
    // can edit overrides via the per-row control; other roles see them
    // read-only.
    if (EXISTING && EXISTING.length) {
        EXISTING.forEach(s => {
            const requestId = s.imaging_request_id ? Number(s.imaging_request_id) : null;
            if (!requestId) return; // legacy rows without imaging_request_id are skipped — receptionist must re-pick
            pickedRequestIds.add(requestId);
            addSessionRow({
                imaging_request_id: requestId,
                imaging_type: (s.imaging_type || '').replace(/ — .+$/, ''),
                body_part: (s.imaging_type || '').includes(' — ') ? (s.imaging_type.split(' — ')[1] || '') : '',
                patient_name: s.patient_name || '',
                billed_amount: Number(s.billed_amount) || 0,
                source_billed_amount: s.source_billed_amount !== undefined ? Number(s.source_billed_amount) : null,
                override_billed_amount: s.override_billed_amount !== undefined ? Number(s.override_billed_amount) : null,
                override_reason: s.override_reason || '',
                is_anc_covered: !!s.is_anc_covered,
                is_unbilled: !!s.is_unbilled,
            });
        });
    }
    fetchAvailableScans();
});

function fetchAvailableScans() {
    if (!CAN_OVERRIDE) return; // Picker is hidden for non-admins; no need to load.
    const date = document.getElementById('work-date').value;
    const list = document.getElementById('scan-picker-list');
    if (!list) return;
    list.innerHTML = '<p class="text-xs text-gray-400 italic py-2">Loading available scans…</p>';

    fetch(`{{ route('locum.imaging-reports') }}?locum_id=${LOCUM_ID}&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');
    if (!list || !CAN_OVERRIDE) return; // Non-admins don't have the picker UI.
    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);
        });

    const searchInput = document.getElementById('scan-search');
    if (searchInput) searchInput.classList.toggle('hidden', availableScans.length < 6);
    const titleEl = document.getElementById('scan-picker-title');
    if (titleEl) {
        titleEl.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> from 4 May 2026 onwards.</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>'
            : '';
        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">
                    <span class="text-xs text-gray-500">KES ${Number(s.billed_amount).toLocaleString()}</span>
                    <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 || 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-start';
    row.id = 'session-' + idx;
    row.dataset.requestId = scan.imaging_request_id;

    // Source vs effective billed:
    //   - source_billed_amount = what the invoice/ANC fallback says
    //   - billed_amount        = what's currently in effect (= override if any, else source)
    //   - override_billed_amount = admin-set value (may be null)
    const hasOverride = scan.override_billed_amount !== null
                       && scan.override_billed_amount !== undefined
                       && !Number.isNaN(Number(scan.override_billed_amount));
    const sourceAmt   = hasOverride
        ? Number(scan.source_billed_amount ?? scan.billed_amount)
        : Number(scan.billed_amount) || 0;
    const effectiveAmt = hasOverride
        ? Number(scan.override_billed_amount)
        : sourceAmt;
    row.dataset.billed = effectiveAmt;
    row.dataset.source = sourceAmt;

    const fullType = (scan.imaging_type || '') + (scan.body_part ? ' — ' + scan.body_part : '');
    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 overridePill = hasOverride
        ? '<span class="text-[10px] font-bold text-amber-800 bg-amber-100 px-1.5 py-0.5 rounded ml-1" title="Admin override applied">⚙ Override</span>'
        : '';

    // Amount cell — shows struck-through source + effective value when overridden.
    const amountCell = hasOverride
        ? `<span class="text-[11px] text-gray-400 line-through">KES ${sourceAmt.toLocaleString()}</span>
           <span class="text-xs font-semibold text-amber-800 block">KES ${effectiveAmt.toLocaleString()}</span>`
        : `<span class="text-xs font-semibold text-gray-700">KES ${effectiveAmt.toLocaleString()}</span>`;

    // Remove button — admin only.
    const removeBtn = CAN_OVERRIDE
        ? `<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>`
        : `<span class="text-gray-300 p-1" title="Only admins can remove rows from a draft">
               <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>
           </span>`;

    // Admin override controls — collapsible row below the main session row.
    const overrideControls = CAN_OVERRIDE
        ? `<div class="col-span-12 mt-2 pt-2 border-t border-dashed border-gray-200">
               <details ${hasOverride ? 'open' : ''} class="text-xs">
                   <summary class="cursor-pointer text-amber-700 hover:text-amber-900 font-medium select-none">
                       ${hasOverride ? '⚙ Edit discount / waiver' : '＋ Apply discount or waiver'}
                   </summary>
                   <div class="mt-2 grid grid-cols-12 gap-2 items-end bg-amber-50/40 p-2 rounded">
                       <div class="col-span-4">
                           <label class="text-[11px] text-gray-500">New amount (KES)</label>
                           <input type="number" step="0.01" min="0"
                               name="sessions[${idx}][override_billed_amount]"
                               value="${hasOverride ? effectiveAmt : ''}"
                               placeholder="e.g. 0 to waive"
                               oninput="onOverrideChange(${idx})"
                               class="form-input text-xs py-1">
                       </div>
                       <div class="col-span-6">
                           <label class="text-[11px] text-gray-500">Reason (required for new overrides)</label>
                           <input type="text" name="sessions[${idx}][override_reason]"
                               value="${escapeHtml(scan.override_reason || '')}"
                               placeholder="e.g. staff family — 50% off"
                               class="form-input text-xs py-1">
                       </div>
                       <div class="col-span-2 flex items-center gap-1">
                           <label class="text-[11px] text-gray-500 flex items-center gap-1 cursor-pointer">
                               <input type="checkbox" name="sessions[${idx}][clear_override]" value="1"
                                   onchange="onClearOverride(${idx}, this)"
                                   class="rounded border-gray-300">
                               Clear
                           </label>
                       </div>
                   </div>
               </details>
           </div>`
        : (hasOverride
            ? `<div class="col-span-12 mt-1 text-[11px] text-amber-700 italic">
                   Override: KES ${effectiveAmt.toLocaleString()} — ${escapeHtml(scan.override_reason || '')}
               </div>`
            : '');

    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}${overridePill}</p>
            <p class="text-[11px] text-gray-400">${escapeHtml(scan.patient_name || '')}</p>
        </div>
        <div class="col-span-3 text-right">
            ${amountCell}
        </div>
        <div class="col-span-3 text-right">
            <span class="text-xs font-bold text-purple-700 locum-amt" id="locum-amt-${idx}">KES 0</span>
        </div>
        <div class="col-span-1 text-right">
            ${removeBtn}
        </div>
        ${overrideControls}`;
    container.appendChild(row);
    recalcTotals();
}

// Admin: live-recalc effective billed when override amount changes.
function onOverrideChange(idx) {
    const row = document.getElementById('session-' + idx);
    if (!row) return;
    const input = row.querySelector(`input[name="sessions[${idx}][override_billed_amount]"]`);
    const val = parseFloat(input?.value);
    if (!isNaN(val) && val >= 0) {
        row.dataset.billed = val;
    } else {
        // Empty / invalid → fall back to source amount.
        row.dataset.billed = row.dataset.source || 0;
    }
    recalcTotals();
}

// Admin: when "Clear" is ticked, blank the override fields and revert to source.
function onClearOverride(idx, checkbox) {
    const row = document.getElementById('session-' + idx);
    if (!row) return;
    if (checkbox.checked) {
        const amtInput = row.querySelector(`input[name="sessions[${idx}][override_billed_amount]"]`);
        const reasonInput = row.querySelector(`input[name="sessions[${idx}][override_reason]"]`);
        if (amtInput) { amtInput.value = ''; amtInput.disabled = true; }
        if (reasonInput) reasonInput.disabled = true;
        row.dataset.billed = row.dataset.source || 0;
    } else {
        const amtInput = row.querySelector(`input[name="sessions[${idx}][override_billed_amount]"]`);
        const reasonInput = row.querySelector(`input[name="sessions[${idx}][override_reason]"]`);
        if (amtInput) amtInput.disabled = false;
        if (reasonInput) reasonInput.disabled = false;
    }
    recalcTotals();
}

function removeSession(idx, imagingRequestId) {
    if (!CAN_OVERRIDE) return; // Defence-in-depth: only admins can remove rows.
    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 * (CURRENT_RATE / 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;
}
</script>
@elseif($shift->rate_type === 'percentage' && !$editIsSonographer)
<script>
const FT_RATE          = {{ $shift->rate_applied }};
const FT_EXISTING      = @json($shift->session_items ?? []);
const FT_DEFAULT_DATE  = "{{ $shift->work_date->format('Y-m-d') }}";
const FT_CAN_SEE_PAY   = {{ $canSeePay ? 'true' : 'false' }};
const ftPatientsCache  = {};
let freetextIndex = 0;

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: only registered patients with a visit on this date can be picked.
    // Locums are paid only 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(prefill) {
    const idx = freetextIndex++;
    document.getElementById('freetext-empty').style.display = 'none';
    const container = document.getElementById('freetext-container');

    const date        = prefill?.session_date || FT_DEFAULT_DATE;
    const patientId   = prefill?.patient_id || '';
    const patientName = prefill?.patient_name || '';
    const desc        = prefill?.description || '';
    const amt         = prefill?.amount ?? '';

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

    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="${escapeAttr(date)}" 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="${escapeAttr(patientId)}">
                <input type="hidden" name="sessions[${idx}][patient_name]" class="ft-patient-name" value="${escapeAttr(patientName)}">
            </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…" value="${escapeAttr(desc)}" 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" value="${escapeAttr(amt)}" oninput="recalcFreetextTotals()" required>
            </div>
            <div class="flex items-end justify-end">
                ${FT_CAN_SEE_PAY
                    ? `<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>`
                    : `<span class="ft-locum-amt hidden" id="ft-locum-${idx}"></span>`}
            </div>
        </div>`;
    container.appendChild(row);

    // Load patients for this row's date, then restore the saved selection if
    // it's still in the visit log. Legacy rows where patient_id is missing
    // (old-format drafts) are NOT auto-populated — the receptionist must
    // re-select the registered patient before saving.
    loadPatientsForDate(date).then(patients => {
        const sel = row.querySelector('.ft-patient-select');
        renderPatientOptions(sel, patients, patientId);

        // Only restore hidden fields if patient_id is still in the loaded list.
        const stillRegistered = patientId && patients.some(p => Number(p.patient_id) === Number(patientId));
        if (stillRegistered) {
            row.querySelector('.ft-patient-id').value   = patientId;
            row.querySelector('.ft-patient-name').value = patientName;
        } else {
            // Legacy or stale row — clear and force re-selection.
            row.querySelector('.ft-patient-id').value   = '';
            row.querySelector('.ft-patient-name').value = '';
        }
    });

    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 * (FT_RATE / 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;
}

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

document.addEventListener('DOMContentLoaded', () => {
    if (FT_EXISTING && FT_EXISTING.length) {
        FT_EXISTING.forEach(s => {
            // Free-text rows have no imaging_request_id. The "imaging_type"
            // field stores the procedure description in this mode. Newly-
            // saved drafts also carry session_date, patient_id, patient_name.
            // Legacy drafts won't have these — we fall back to the shift's
            // work_date and a blank patient (receptionist will be forced to
            // fill it in before saving again).
            addFreetextRow({
                description:  s.imaging_type || '',
                amount:       Number(s.billed_amount) || 0,
                session_date: s.session_date || FT_DEFAULT_DATE,
                patient_id:   s.patient_id || '',
                patient_name: (s.patient_name && s.patient_name !== '—') ? s.patient_name : '',
            });
        });
    } else {
        // Empty draft (rare) — show one blank row so the user can start typing.
        addFreetextRow();
    }
});
</script>
@endif
@endsection