@extends('layouts.app')
@section('title', 'Dental Encounter | ' . ($visit->patient->full_name ?? ''))
@section('content')

@include('partials._encounter-styles')

@php
    $readOnly = in_array($visit->status, ['completed', 'cancelled', 'discharged']);
    $dentalRecord = $visit->dentalRecord ?? null;
    $user = auth()->user();
    $isAdmin = $user->hasAnyRole('Super Admin','Hospital Admin');
    $isClinical = $user->hasAnyRole('Clinician','Nurse','Dental User');
    $isTriageNurse = $user->hasRole('Triage Nurse');
    $isReception = $user->hasAnyRole('Receptionist', 'Triage Nurse');

    $canEditTriage       = !$readOnly && ($isAdmin || $isClinical || $isTriageNurse || $isReception);
    $canEditDentalNotes  = !$readOnly && ($isAdmin || $isClinical);
    $canEditDiagnosis    = !$readOnly && ($isAdmin || $isClinical);
    $canEditPrescriptions= !$readOnly && ($isAdmin || $isClinical);
    $canEditLab          = !$readOnly && ($isAdmin || $isClinical || $isReception);
    $canEditImaging      = !$readOnly && ($isAdmin || $isClinical || $isReception);
    $canEditBilling      = !$readOnly && ($isAdmin || $isClinical || $isReception);
@endphp

<div class="enc-page">

    {{-- ════════════ TITLE BAR ════════════ --}}
    <div class="enc-title-bar">
        <h1>Dental Encounter</h1>
    </div>

    {{-- ════════════ PATIENT HEADER ════════════ --}}
    <div class="enc-patient-bar">
        <div class="pb-item"><span class="pb-name">{{ $visit->patient->full_name ?? '-' }}</span></div>
        <div class="pb-item"><span class="pb-label">Patient #</span> <span class="pb-value">{{ $visit->patient->mrn ?? '-' }}</span></div>
        <div class="pb-item"><span class="pb-label">Age</span> <span class="pb-value">{{ $visit->patient->age ?? '-' }} {{ $visit->patient->gender ? '· '.ucfirst($visit->patient->gender) : '' }}</span></div>
        <div class="pb-item"><span class="pb-label">Visit #</span> <span class="pb-value">{{ $visit->visit_number }}</span></div>
        <div class="pb-item"><span class="pb-label">Date</span> <span class="pb-value">{{ $visit->check_in_at?->format('d M Y H:i') ?? $visit->created_at->format('d M Y H:i') }}</span></div>
        @if($readOnly)<span class="enc-status-pill pill-done" style="margin-left:auto">Completed</span>@endif
    </div>

    @if($visit->patient && $visit->patient->allergies && count($visit->patient->allergies))
    <div class="enc-allergy-bar" style="margin-top:10px">⚠ Allergies: {{ implode(', ', $visit->patient->allergies) }}</div>
    @endif

    {{-- ════════════ 1. TRIAGE / VITALS ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">1</span> Triage / Vitals</h3>
            @if($visit->triage)<span class="badge badge-success">Recorded</span>
            @else<span class="badge badge-warning">Pending</span>@endif
        </div>
        <div class="enc-section-body">
            @if($visit->triage)
                <table class="enc-table">
                    <thead><tr>
                        <th>Date / Time</th><th>Weight</th><th>Temp</th><th>BP</th>
                        <th>Pulse</th><th>SpO₂</th><th>Pain</th>
                    </tr></thead>
                    <tbody><tr>
                        <td>{{ $visit->triage->created_at?->format('d M Y H:i') ?? '-' }}</td>
                        <td>{{ $visit->triage->weight ?? '-' }}</td>
                        <td>{{ $visit->triage->temperature ?? '-' }}</td>
                        <td>{{ ($visit->triage->blood_pressure_systolic ?? '-') }}/{{ $visit->triage->blood_pressure_diastolic ?? '-' }}</td>
                        <td>{{ $visit->triage->pulse ?? '-' }}</td>
                        <td>{{ $visit->triage->oxygen_saturation ?? '-' }}</td>
                        <td>{{ $visit->triage->pain_score ?? '-' }}</td>
                    </tr></tbody>
                </table>
            @elseif($canEditTriage)
                <form method="POST" action="{{ route('triage.store', $visit) }}">@csrf
                    <div class="enc-subblock">
                        <div class="enc-sub-title">Enter Vitals</div>
                        <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
                            <div><label>BP Systolic</label><input type="number" name="blood_pressure_systolic" placeholder="120"></div>
                            <div><label>BP Diastolic</label><input type="number" name="blood_pressure_diastolic" placeholder="80"></div>
                            <div><label>Temp (°C)</label><input type="number" step="0.1" name="temperature" placeholder="36.5"></div>
                            <div><label>Pulse</label><input type="number" name="pulse" placeholder="72"></div>
                            <div><label>SpO₂ (%)</label><input type="number" name="oxygen_saturation" placeholder="98"></div>
                            <div><label>Weight (kg)</label><input type="number" step="0.1" name="weight" placeholder="70"></div>
                            <div><label>Pain (0-10)</label><input type="number" name="pain_score" min="0" max="10" placeholder="0"></div>
                            <div><label>Priority</label>
                                <select name="priority" required>
                                    <option value="normal">Routine</option>
                                    <option value="urgent">Urgent</option>
                                    <option value="emergency">Emergency</option>
                                </select>
                            </div>
                        </div>
                        <input type="hidden" name="triage_source" value="clinician">
                    </div>
                    <div class="enc-section-footer" style="margin:-16px -18px -16px -18px;background:transparent;border:none;padding:0;justify-content:flex-start">
                        <button type="submit" class="btn-success">Save Vitals</button>
                    </div>
                </form>
            @else
                <p class="enc-empty">Triage was not recorded.</p>
            @endif
        </div>
    </div>

    {{-- ════════════ 2. DENTAL CLINICAL NOTES ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">2</span> Dental Clinical Notes</h3>
            @if($dentalRecord)<span class="badge badge-success">Recorded</span>@endif
        </div>
        <div class="enc-section-body">
            @if($readOnly && $dentalRecord)
                <dl class="enc-kv" style="margin-bottom:10px">
                    <dt>Chief Complaint</dt><dd>{{ $dentalRecord->chief_complaint ?? '-' }}</dd>
                    <dt>Dental History</dt><dd>{{ $dentalRecord->dental_history ?? '-' }}</dd>
                    <dt>Examination</dt><dd>{{ $dentalRecord->examination_findings ?? '-' }}</dd>
                    <dt>Diagnosis</dt><dd>{{ $dentalRecord->diagnosis ?? '-' }}</dd>
                    <dt>Treatment Plan</dt><dd>{{ $dentalRecord->treatment_plan ?? '-' }}</dd>
                    <dt>Procedures Done</dt><dd>{{ $dentalRecord->procedures_done ? implode(', ', $dentalRecord->procedures_done) : '-' }}</dd>
                    <dt>Materials Used</dt><dd>{{ $dentalRecord->materials_used ? implode(', ', $dentalRecord->materials_used) : '-' }}</dd>
                    <dt>Follow-up Date</dt><dd>{{ $dentalRecord->follow_up_date?->format('d M Y') ?? '-' }}</dd>
                </dl>
            @elseif($canEditDentalNotes)
                <form method="POST" action="{{ route('dental.store') }}">@csrf
                    <input type="hidden" name="visit_id" value="{{ $visit->id }}">

                    <div class="enc-subblock">
                        <div class="enc-sub-title">Chief Complaint & History</div>
                        <label>Chief Complaint <span style="color:#dc2626">*</span></label>
                        <textarea name="chief_complaint" required rows="2">{{ $dentalRecord->chief_complaint ?? '' }}</textarea>
                        <label>Dental History</label>
                        <textarea name="dental_history" rows="2">{{ $dentalRecord->dental_history ?? '' }}</textarea>
                    </div>

                    <div class="enc-subblock">
                        <div class="enc-sub-title">Examination & Diagnosis</div>
                        <label>Examination Findings</label>
                        <textarea name="examination_findings" rows="2">{{ $dentalRecord->examination_findings ?? '' }}</textarea>
                        <label>Diagnosis</label>
                        <textarea name="diagnosis" rows="2">{{ $dentalRecord->diagnosis ?? '' }}</textarea>
                    </div>

                    <div class="enc-subblock">
                        <div class="enc-sub-title">Treatment & Follow-up</div>
                        <label>Treatment Plan</label>
                        <textarea name="treatment_plan" rows="2">{{ $dentalRecord->treatment_plan ?? '' }}</textarea>
                        <label>Procedures Done (comma-separated)</label>
                        <input type="text" name="procedures_done" value="{{ $dentalRecord && $dentalRecord->procedures_done ? implode(', ', $dentalRecord->procedures_done) : '' }}">
                        <label>Materials Used (comma-separated)</label>
                        <input type="text" name="materials_used" value="{{ $dentalRecord && $dentalRecord->materials_used ? implode(', ', $dentalRecord->materials_used) : '' }}">
                        <div style="display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:4px">
                            <div><label>Follow-up Date</label><input type="date" name="follow_up_date" value="{{ $dentalRecord?->follow_up_date?->format('Y-m-d') ?? '' }}"></div>
                            <div><label>Follow-up Notes</label><input type="text" name="follow_up_notes" value="{{ $dentalRecord->follow_up_notes ?? '' }}"></div>
                        </div>
                    </div>

                    <div style="display:flex;justify-content:flex-end">
                        <button type="submit" class="btn-success">Save Dental Notes</button>
                    </div>
                </form>
            @else
                <p class="enc-empty">No dental notes recorded.</p>
            @endif
        </div>
    </div>

    {{-- ════════════ 3. ICD-10 DIAGNOSIS ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">3</span> ICD-10 Diagnosis</h3>
        </div>
        <div class="enc-section-body">
            @if($visit->consultation)
                @php $diags = $visit->consultation->diagnoses ?? collect(); @endphp
                @if($diags->isNotEmpty())
                <table class="enc-table" style="margin-bottom:12px">
                    <thead><tr>
                        <th class="text-left" style="width:110px">Primary</th>
                        <th class="text-left" style="width:110px">ICD-10 Code</th>
                        <th class="text-left">Diagnosis</th>
                    </tr></thead>
                    <tbody>
                    @foreach($diags as $d)
                        <tr>
                            <td class="text-left">@if($d->is_primary)<span class="enc-pill-primary">Primary</span>@else<span style="color:#8891a3">—</span>@endif</td>
                            <td class="text-left"><span class="enc-pill-code">{{ $d->icd10Code->code ?? '' }}</span></td>
                            <td class="text-left">{{ $d->icd10Code->description ?? '' }}</td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                @endif
            @endif

            @if($canEditDiagnosis)
            <form method="POST" action="{{ $visit->consultation ? route('consultations.update', $visit->consultation) : route('consultations.store', $visit) }}">@csrf
                @if($visit->consultation) @method('PUT') @endif
                <input type="hidden" name="presenting_complaints" value="{{ $dentalRecord->chief_complaint ?? $visit->consultation->presenting_complaints ?? 'Dental consultation' }}">
                <input type="hidden" name="examination_findings" value="{{ $dentalRecord->examination_findings ?? $visit->consultation->examination_findings ?? '' }}">
                <input type="hidden" name="treatment_plan" value="{{ $dentalRecord->treatment_plan ?? $visit->consultation->treatment_plan ?? '' }}">
                @include('partials._icd10_picker', ['consultation' => $visit->consultation ?? null])
                <div style="display:flex;justify-content:flex-end;margin-top:10px">
                    <button type="submit" class="btn-primary">Save Diagnosis</button>
                </div>
            </form>
            @endif
        </div>
    </div>

    {{-- ════════════ 4. PRESCRIPTIONS ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">4</span> Prescriptions</h3>
            @if($visit->prescriptions->count())<span class="badge badge-info">{{ $visit->prescriptions->count() }}</span>@endif
        </div>
        <div class="enc-section-body">
            @if($visit->prescriptions->count())
                <table class="enc-table" style="margin-bottom:12px">
                    <thead><tr>
                        <th class="text-left">Drug</th>
                        <th>Dosage</th><th>Frequency</th><th>Route</th><th>Duration</th><th>Qty</th>
                        <th>Status</th>
                        @if($canEditPrescriptions)<th style="width:80px">Actions</th>@endif
                    </tr></thead>
                    <tbody>
                    @foreach($visit->prescriptions as $rx)
                    @php
                        $rxLocked = in_array($rx->status, ['dispensed','cancelled']);
                        $rxCanEdit = $canEditPrescriptions && !$rxLocked;
                        // Used by the admin Reverse button below.
                        $rxDispensedQty = \App\Models\PharmacyDispense::where('prescription_id', $rx->id)
                            ->whereNull('reversed_at')->sum('quantity_dispensed');
                    @endphp
                    <tr id="drx-row-{{ $rx->id }}">
                        <td class="text-left">{{ $rx->drug_name }}</td>
                        <td>{{ $rx->dosage ?? '-' }}</td>
                        <td>{{ $rx->frequency ?? '-' }}</td>
                        <td>{{ $rx->route ?? '—' }}</td>
                        <td>{{ $rx->duration ?? '-' }}</td>
                        <td>{{ $rx->quantity }}</td>
                        <td><span class="badge {{ $rx->status==='dispensed'?'badge-success':'badge-warning' }}">{{ ucfirst($rx->status) }}</span></td>
                        @if($canEditPrescriptions)
                        <td style="white-space:nowrap">
                            @if($rxCanEdit)
                            <button type="button" onclick="document.getElementById('drx-row-{{ $rx->id }}').style.display='none';document.getElementById('drx-edit-{{ $rx->id }}').style.display='';" class="enc-del-btn" title="Edit" style="color:#6b7280">
                                <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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                            </button>
                            @endif
                            {{-- Reverse dispense — Super Admin / Hospital Admin only.
                                 Sends the prescription back to the pharmacy queue.
                                 Invoice line stays; use Delete to also drop the charge. --}}
                            @if($isAdmin && $rxDispensedQty > 0 && $rx->status !== 'cancelled')
                            <form method="POST" action="{{ route('prescriptions.reverse-dispense', $rx) }}"
                                  onsubmit="return confirm('Reverse the dispensing of {{ addslashes($rx->drug_name) }}?\n\n{{ $rxDispensedQty }} unit(s) will be returned to stock and the prescription will go back to the pharmacy queue.\n\nThe charge stays on the bill — delete the prescription afterwards if you also want to remove the charge.')"
                                  class="inline" style="margin-right:2px">
                                @csrf
                                <button class="enc-del-btn" title="Reverse dispense ({{ $rxDispensedQty }} unit(s) back to stock)" style="color:#d97706">
                                    <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="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/></svg>
                                </button>
                            </form>
                            @endif
                            @if(!$rxLocked)
                            <form method="POST" action="{{ route('prescriptions.cancel', $rx) }}"
                                  onsubmit="return confirm('Delete prescription for {{ addslashes($rx->drug_name) }}?')"
                                  class="inline">
                                @csrf @method('DELETE')
                                <button class="enc-del-btn" title="Delete"><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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg></button>
                            </form>
                            @endif
                        </td>
                        @endif
                    </tr>
                    @if($rxCanEdit)
                    <tr id="drx-edit-{{ $rx->id }}" style="display:none;background:#faf5fc">
                        <td colspan="8">
                            @php
                                $drxDispensed = \App\Models\PharmacyDispense::where('prescription_id', $rx->id)
                                    ->whereNull('reversed_at')->sum('quantity_dispensed');
                            @endphp
                            <form method="POST" action="{{ route('prescriptions.update', $rx) }}" style="padding:8px 4px">
                                @csrf @method('PATCH')
                                <div style="font-size:11px;font-weight:600;color:#5c1269;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px">
                                    ✎ Editing: {{ $rx->drug_name }}
                                    <span style="color:#6b7280;font-weight:500;text-transform:none;margin-left:10px">
                                        Drug &amp; price cannot be changed.
                                    </span>
                                </div>
                                @if($drxDispensed > 0)
                                <div style="background:#fffbeb;border:1px solid #fcd34d;border-radius:6px;padding:8px 12px;margin-bottom:10px;font-size:12px;color:#92400e">
                                    <strong>⚠ Partially dispensed:</strong> {{ $drxDispensed }} of {{ $rx->quantity }} unit(s) already given.
                                    Minimum new quantity is <strong>{{ $drxDispensed }}</strong>
                                    (set qty to {{ $drxDispensed }} to close this prescription out).
                                </div>
                                @endif
                                <div style="display:grid;grid-template-columns:1fr 1fr 1fr 1fr 80px;gap:8px;align-items:end">
                                    <div><label style="font-size:10.5px;font-weight:600;color:#5c1269">Dosage</label>
                                        <input type="text" name="dosage" value="{{ $rx->dosage }}" placeholder="500mg" style="width:100%"></div>
                                    <div><label style="font-size:10.5px;font-weight:600;color:#5c1269">Frequency</label>
                                        <select name="frequency" style="width:100%">
                                            <option value="">—</option>
                                            @foreach(['OD','BD','TDS','QID','PRN','STAT','Nocte'] as $f)
                                            <option value="{{ $f }}" {{ $rx->frequency === $f ? 'selected' : '' }}>{{ $f }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div><label style="font-size:10.5px;font-weight:600;color:#5c1269">Route</label>
                                        <select name="route" style="width:100%">
                                            <option value="">—</option>
                                            @foreach(\App\Models\Prescription::ROUTES as $rVal => $rLabel)
                                            <option value="{{ $rVal }}" {{ $rx->route === $rVal ? 'selected' : '' }}>{{ $rLabel }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div><label style="font-size:10.5px;font-weight:600;color:#5c1269">Duration</label>
                                        <input type="text" name="duration" value="{{ $rx->duration }}" placeholder="5 days" style="width:100%"></div>
                                    <div><label style="font-size:10.5px;font-weight:600;color:#5c1269">
                                            Qty @if($drxDispensed > 0)<span style="color:#d97706">(min {{ $drxDispensed }})</span>@endif
                                        </label>
                                        <input type="number" name="quantity" value="{{ $rx->quantity }}" min="{{ max(1, $drxDispensed) }}" required style="width:100%;text-align:center"></div>
                                </div>
                                <div style="margin-top:8px">
                                    <label style="font-size:10.5px;font-weight:600;color:#5c1269">Instructions</label>
                                    <input type="text" name="instructions" value="{{ $rx->instructions }}" placeholder="e.g. after meals" style="width:100%">
                                </div>
                                <div style="display:flex;gap:8px;margin-top:10px">
                                    <button type="submit" class="btn-primary" style="padding:7px 14px">Save Changes</button>
                                    <button type="button" onclick="document.getElementById('drx-row-{{ $rx->id }}').style.display='';document.getElementById('drx-edit-{{ $rx->id }}').style.display='none';" class="btn-secondary" style="padding:7px 14px">Cancel</button>
                                </div>
                            </form>
                        </td>
                    </tr>
                    @endif
                    @endforeach
                    </tbody>
                </table>
            @endif

            @if($canEditPrescriptions)
            <form method="POST" action="{{ route('prescriptions.store') }}" class="enc-subblock" style="margin-bottom:0">
                @csrf
                <div class="enc-sub-title">Add Prescription</div>
                <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                <input type="hidden" name="patient_id" value="{{ $visit->patient_id }}">
                <input type="hidden" name="drug_item_id" id="d-rx-drug-id">
                <input type="hidden" name="drug_name" id="d-rx-drug-name">

                <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 0.8fr auto;gap:8px;align-items:end">
                    <div style="position:relative">
                        <label>Drug</label>
                        <input type="text" id="d-rx-search" placeholder="Search drugs..." autocomplete="off" required oninput="dRxFilter(this.value)" onfocus="dRxFilter(this.value)">
                        <div id="d-rx-dd" class="enc-typeahead-dd" style="display:none"></div>
                    </div>
                    <div><label>Dose</label><input type="text" name="dosage" placeholder="500mg"></div>
                    <div><label>Frequency</label>
                        <select name="frequency">
                            <option>OD</option><option>BD</option><option>TDS</option>
                            <option>QID</option><option>PRN</option><option>STAT</option>
                        </select>
                    </div>
                    <div><label>Route</label>
                        <select name="route_of_admin">
                            @foreach(\App\Models\Prescription::ROUTES as $rVal => $rLabel)
                            <option value="{{ $rVal }}" {{ $rVal === 'PO' ? 'selected' : '' }}>{{ $rVal }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div><label>Duration</label><input type="text" name="duration" placeholder="5 days"></div>
                    <div><label>Qty</label><input type="number" name="quantity" value="1" min="1"></div>
                    <div><button type="submit" class="btn-primary" style="padding:7px 14px">+ Add</button></div>
                </div>
            </form>
            @endif
        </div>
    </div>

    {{-- ════════════ 5. LAB ORDERS ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">5</span> Laboratory Tests</h3>
            @if($visit->labOrders->count())<span class="badge badge-info">{{ $visit->labOrders->count() }}</span>@endif
        </div>
        <div class="enc-section-body">
            @if($visit->labOrders->count())
                <table class="enc-table" style="margin-bottom:12px">
                    <thead><tr>
                        <th class="text-left">Test</th>
                        <th>Urgency</th>
                        <th>Status</th>
                    </tr></thead>
                    <tbody>
                    @foreach($visit->labOrders as $lo)
                    <tr>
                        <td class="text-left" style="font-weight:500">{{ $lo->test_name }}</td>
                        <td style="text-transform:capitalize">{{ $lo->urgency }}</td>
                        <td><span class="badge {{ $lo->status==='validated'?'badge-success':'badge-warning' }}">{{ ucfirst($lo->status) }}</span></td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif

            @if($canEditLab)
            <form method="POST" action="{{ route('lab.order') }}" class="enc-subblock" style="margin-bottom:0">
                @csrf
                <div class="enc-sub-title">Order Lab Test</div>
                <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                <input type="hidden" name="lab_test_id" id="d-lab-id">

                <div style="display:grid;grid-template-columns:3fr 1fr auto;gap:8px;align-items:end">
                    <div style="position:relative">
                        <label>Lab Test</label>
                        <input type="text" id="d-lab-search" placeholder="Search e.g. Full Hemogram..." autocomplete="off" required oninput="dLabFilter(this.value)" onfocus="dLabFilter(this.value)">
                        <div id="d-lab-dd" class="enc-typeahead-dd" style="display:none"></div>
                        <p id="d-lab-price" style="font-size:11px;color:#0f766e;margin-top:3px;font-weight:600"></p>
                    </div>
                    <div><label>Urgency</label>
                        <select name="urgency"><option value="routine">Routine</option><option value="urgent">Urgent</option></select>
                    </div>
                    <div><button type="submit" class="btn-primary" style="padding:7px 14px">+ Order</button></div>
                </div>
            </form>
            @endif
        </div>
    </div>

    {{-- ════════════ 6. IMAGING / X-RAY ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">6</span> Imaging / X-Ray</h3>
            @if($visit->imagingRequests->count())<span class="badge badge-info">{{ $visit->imagingRequests->count() }}</span>@endif
        </div>
        <div class="enc-section-body">
            @if($visit->imagingRequests->count())
                <table class="enc-table" style="margin-bottom:12px">
                    <thead><tr>
                        <th class="text-left">Imaging Type</th>
                        <th class="text-left">Clinical Notes</th>
                        <th>Status</th>
                    </tr></thead>
                    <tbody>
                    @foreach($visit->imagingRequests as $ir)
                    <tr>
                        <td class="text-left" style="font-weight:500">{{ $ir->imaging_type }}</td>
                        <td class="text-left">{{ $ir->clinical_notes ?? '-' }}</td>
                        <td><span class="badge {{ $ir->status==='reported'?'badge-success':'badge-warning' }}">{{ ucfirst($ir->status) }}</span></td>
                    </tr>
                    @endforeach
                    </tbody>
                </table>
            @endif

            @if($canEditImaging)
            <form method="POST" action="{{ route('imaging.request.store') }}" class="enc-subblock" style="margin-bottom:0">
                @csrf
                <div class="enc-sub-title">Order Imaging</div>
                <input type="hidden" name="visit_id" value="{{ $visit->id }}">
                <input type="hidden" name="service_item_id" id="d-img-id">

                <div style="display:grid;grid-template-columns:2fr 2fr auto;gap:8px;align-items:end">
                    <div style="position:relative">
                        <label>Imaging Service</label>
                        <input type="text" name="imaging_type" id="d-img-search" placeholder="Search imaging..." autocomplete="off" required oninput="dImgFilter(this.value)" onfocus="dImgFilter(this.value)">
                        <div id="d-img-dd" class="enc-typeahead-dd" style="display:none"></div>
                        <p id="d-img-price" style="font-size:11px;color:#7c3aed;margin-top:3px;font-weight:600"></p>
                    </div>
                    <div><label>Clinical Notes</label><input type="text" name="clinical_notes" placeholder="Clinical indication..."></div>
                    <div><button type="submit" class="btn-primary" style="padding:7px 14px">+ Order</button></div>
                </div>
            </form>
            @endif
        </div>
    </div>

    {{-- ════════════ 7. PRODUCTS / SERVICES (BILLING) ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">7</span> Products / Services</h3>
            @if($canEditBilling)
                <button type="button" onclick="dAddBillingRow()" class="btn-secondary" style="padding:5px 12px;font-size:12px">+ Add Item</button>
            @endif
        </div>
        <div class="enc-section-body" style="padding:0">
            <table class="enc-table" id="dBillingTable" style="border:none;border-radius:0">
                <thead><tr>
                    <th class="text-left" style="min-width:220px">Product or Service</th>
                    <th class="text-left" style="width:160px">Category / Instructions</th>
                    <th class="text-right" style="width:80px">Qty</th>
                    <th class="text-right" style="width:110px">Unit Price</th>
                    <th class="text-right" style="width:110px">Total</th>
                    @if($canEditBilling)<th style="width:40px"></th>@endif
                </tr></thead>
                <tbody id="dBillingItems">
                    @if($visit->invoice && $visit->invoice?->items->count())
                        @foreach($visit->invoice?->items as $item)
                        @php $isEditable = $canEditBilling && $item->source_type !== 'prescription'; @endphp
                        <tr class="existing-row" id="bill-row-{{ $item->id }}">
                            <td class="text-left" style="font-weight:500">{{ $item->description }}</td>
                            <td class="text-left" style="color:#6b7686">{{ $item->category }}</td>
                            <td class="text-right">
                                @if($isEditable)
                                    <input type="number" class="enc-inline-input bill-qty-input" min="1" step="1" value="{{ $item->quantity }}" onchange="updateBillItem({{ $item->id }}, this)">
                                @else
                                    {{ $item->quantity }}
                                @endif
                            </td>
                            <td class="text-right">
                                @if($isEditable)
                                    <input type="number" class="enc-inline-input bill-price-input" min="0" step="0.01" value="{{ $item->unit_price }}" onchange="updateBillItem({{ $item->id }}, this)">
                                @else
                                    {{ number_format($item->unit_price) }}
                                @endif
                            </td>
                            <td class="text-right" style="font-weight:600" id="bill-total-{{ $item->id }}">{{ number_format($item->total) }}</td>
                            @if($canEditBilling)
                            <td class="text-center">
                                @if(auth()->user()->hasAnyRole('Receptionist','Triage Nurse','Clinician','Nurse','Dental User','Hospital Admin','Super Admin'))
                                <form method="POST" action="{{ route('billing.item.void', $item) }}" onsubmit="return confirm('Remove?');" style="display:inline">@csrf @method('DELETE')
                                    <button class="enc-row-del" title="Remove">
                                        <svg style="width:14px;height:14px" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                                    </button>
                                </form>
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    @endif
                </tbody>
                <tfoot><tr>
                    <td colspan="{{ $canEditBilling ? 4 : 4 }}" class="text-right">Total</td>
                    <td class="text-right" id="dGrandTotal">KES {{ number_format($visit->invoice?->total_amount ?? 0) }}</td>
                    @if($canEditBilling)<td></td>@endif
                </tr></tfoot>
            </table>
        </div>
    </div>

    {{-- ════════════ 8. PAYMENTS (shared partial) ════════════ --}}
    <div class="enc-section">
        <div class="enc-section-head">
            <h3><span class="enc-section-num">8</span> Payments</h3>
        </div>
        <div class="enc-section-body">
            @include('partials._payment-section', ['visit' => $visit])
        </div>
    </div>

    {{-- ════════════ COMPLETE VISIT ACTION BAR ════════════ --}}
    @if(!$readOnly)
    <div class="enc-bottom-bar">
        <a href="{{ route('dental.index') }}" class="btn-secondary">← Back to Dental Visits</a>
        <form method="POST" action="{{ route('visits.complete', $visit) }}">@csrf
            <button type="submit" class="btn-success" onclick="return confirm('Complete this dental visit?')">Complete Visit</button>
        </form>
    </div>
    @endif

</div>

@endsection

@push('scripts')
<script>
// ═══ SERVICE/BILLING SEARCH ═══
const dServices = {!! $serviceListJson !!};
const dInvoiceId = '{{ $visit->invoice?->id ?? '' }}';
const dVisitId = '{{ $visit->id }}';
const dCsrf = '{{ csrf_token() }}';
const dChargeUrl = '{{ route("billing.charge") }}';
let dRowCount = 0;

function dCreateRow() {
    dRowCount++;
    const id = 'dr_' + dRowCount;
    const tr = document.createElement('tr');
    tr.className = 'enc-entry-row entry-row'; tr.id = id;
    // FREE-TEXT MODEL (May 2026): the dentist asked for the catalog dropdown
    // to be removed. The receptionist/dentist now types the procedure name
    // and price directly. Saving still POSTs to billing.charge, which
    // accepts arbitrary description + unit_price (no service_item_id).
    tr.innerHTML = `
        <td class="text-left">
            <input type="text" class="enc-inline-input d-bill-desc" placeholder="Procedure or product (free text)" data-row="${id}" oninput="dQueueSave('${id}')">
        </td>
        <td class="text-left">
            <input type="text" class="enc-inline-input d-bill-cat" placeholder="Category (e.g. Dental)" value="Dental" data-row="${id}" oninput="dQueueSave('${id}')">
        </td>
        <td class="text-right"><input type="number" class="enc-inline-input d-bill-qty" value="1" min="1" data-row="${id}" oninput="dCalcRow('${id}'); dQueueSave('${id}')"></td>
        <td class="text-right"><input type="number" step="0.01" class="enc-inline-input d-bill-price" placeholder="0" data-row="${id}" oninput="dCalcRow('${id}'); dQueueSave('${id}')"></td>
        <td class="text-right" style="font-weight:600"><span class="d-bill-total" data-row="${id}">0</span></td>
        <td class="text-center"><button type="button" onclick="dRemoveRow('${id}')" class="enc-row-del" style="font-size:16px;font-weight:700">&times;</button></td>`;
    return tr;
}

window.addEventListener('DOMContentLoaded', () => {
    const tbody = document.getElementById('dBillingItems');
    if (tbody && !document.querySelector('.entry-row')) { tbody.appendChild(dCreateRow()); }
});
function dAddBillingRow() { document.getElementById('dBillingItems').appendChild(dCreateRow()); }
function dRemoveRow(id) { const rows = document.querySelectorAll('#dBillingItems .entry-row'); if (rows.length <= 1) return; document.getElementById(id)?.remove(); }

function dCalcRow(id) { const r = document.getElementById(id); if (!r) return; const q = parseFloat(r.querySelector('.d-bill-qty').value)||0; const p = parseFloat(r.querySelector('.d-bill-price').value)||0; r.querySelector('.d-bill-total').textContent = (q*p).toLocaleString(); }

// Debounce per-row saves so we don't hammer the server while the user types.
// The row is saved once the user has filled in a description AND a price > 0
// AND a quantity > 0, then 600ms have passed without further edits.
const dSaveTimers = {};
const dSavedRows  = new Set();
function dQueueSave(rowId) {
    clearTimeout(dSaveTimers[rowId]);
    dSaveTimers[rowId] = setTimeout(() => dTrySaveRow(rowId), 600);
}
function dTrySaveRow(rowId) {
    if (dSavedRows.has(rowId)) return; // already saved — edits to existing rows go through updateBillItem on the saved invoice item
    const row = document.getElementById(rowId);
    if (!row) return;
    const desc  = (row.querySelector('.d-bill-desc')?.value || '').trim();
    const cat   = (row.querySelector('.d-bill-cat')?.value || 'Dental').trim() || 'Dental';
    const qty   = parseFloat(row.querySelector('.d-bill-qty')?.value || '0') || 0;
    const price = parseFloat(row.querySelector('.d-bill-price')?.value || '0') || 0;
    if (!desc || qty <= 0 || price <= 0) return;
    dSavedRows.add(rowId);
    dSaveRow(rowId, null, desc, cat, qty, price);
    // Make sure there's always one empty row at the bottom for the next item.
    const empty = document.querySelectorAll('#dBillingItems .entry-row .d-bill-desc');
    let hasEmpty = false;
    empty.forEach(el => { if (!el.value.trim()) hasEmpty = true; });
    if (!hasEmpty) dAddBillingRow();
}

function dSaveRow(rowId, svcId, desc, cat, qty, price) {
    const fd = new FormData();
    fd.append('_token', dCsrf); fd.append('invoice_id', dInvoiceId); fd.append('visit_id', dVisitId);
    fd.append('description', desc); fd.append('category', cat); fd.append('quantity', qty); fd.append('unit_price', price);
    if (svcId) fd.append('service_item_id', svcId);
    fetch(dChargeUrl, { method:'POST', body:fd, headers:{'X-Requested-With':'XMLHttpRequest','Accept':'application/json'} })
    .then(r=>r.json()).then(d => {
        if(d.total_amount !== undefined) { const gt = document.getElementById('dGrandTotal'); if(gt) gt.textContent = 'KES ' + Number(d.total_amount).toLocaleString(); }
        if(d.balance !== undefined && d.balance > 0) {
            const payForm = document.querySelector('[id^="pay-"][id$="-form"]');
            if (!payForm) location.reload();
        }
    }).catch(()=>{});
}

// (The catalog-search dropdown listener was removed when the dental billing
// block was reverted to free-text input — no `.d-bill-dd` elements remain.)

// ═══ DRUG SEARCH ═══
const dDrugs = {!! $drugsJson !!};
function dRxFilter(q) { const dd=document.getElementById('d-rx-dd'); if(!q||q.length<2){dd.style.display='none';return;} const m=dDrugs.filter(d=>d.name.toLowerCase().includes(q.toLowerCase())||(d.generic_name||'').toLowerCase().includes(q.toLowerCase())).slice(0,15); if(!m.length){dd.style.display='none';return;} dd.innerHTML=m.map(d=>`<div class="enc-typeahead-item" onclick="dRxSelect(${d.id},'${d.name.replace(/'/g,"\\'")}',${d.price})"><span>${d.name} <span style="color:#6b7686;font-size:11px">${d.generic_name||''}</span></span><span style="color:#6b7686">KES ${d.price}</span></div>`).join(''); dd.style.display=''; }
function dRxSelect(id,name,price){document.getElementById('d-rx-drug-id').value=id;document.getElementById('d-rx-drug-name').value=name;document.getElementById('d-rx-search').value=name;document.getElementById('d-rx-dd').style.display='none';}
document.addEventListener('click',e=>{if(!e.target.closest('#d-rx-search'))document.getElementById('d-rx-dd')?.style.setProperty('display','none');});

// ═══ LAB TEST SEARCH ═══
const dLabs = {!! $labTestsJson !!};
function dLabFilter(q) { const dd=document.getElementById('d-lab-dd'); if(!q||q.length<2){dd.style.display='none';return;} const m=dLabs.filter(t=>t.name.toLowerCase().includes(q.toLowerCase())||(t.code&&t.code.toLowerCase().includes(q.toLowerCase()))).slice(0,15); if(!m.length){dd.style.display='none';return;} dd.innerHTML=m.map(t=>`<div class="enc-typeahead-item" onclick="dLabSelect(${t.id},'${t.name.replace(/'/g,"\\'")}',${t.price||0})"><span><span class="enc-pill-code" style="margin-right:6px">${t.code||''}</span>${t.name}</span><span style="color:#6b7686">KES ${t.price||0}</span></div>`).join(''); dd.style.display=''; }
function dLabSelect(id,name,price){document.getElementById('d-lab-id').value=id;document.getElementById('d-lab-search').value=name;document.getElementById('d-lab-dd').style.display='none';document.getElementById('d-lab-price').textContent=price?'KES '+Number(price).toLocaleString():'';}
document.addEventListener('click',e=>{if(!e.target.closest('#d-lab-search'))document.getElementById('d-lab-dd')?.style.setProperty('display','none');});

// ═══ IMAGING SEARCH ═══
const dImgs = {!! $imagingJson !!};
function dImgFilter(q) { const dd=document.getElementById('d-img-dd'); if(!q||q.length<2){dd.style.display='none';return;} const m=dImgs.filter(s=>s.name.toLowerCase().includes(q.toLowerCase())).slice(0,15); if(!m.length){dd.style.display='none';return;} dd.innerHTML=m.map(s=>`<div class="enc-typeahead-item" onclick="dImgSelect(${s.id},'${s.name.replace(/'/g,"\\'")}',${s.price||0})"><span><span class="enc-pill-code" style="margin-right:6px">${s.code||''}</span>${s.name}</span><span style="color:#6b7686">KES ${s.price||0}</span></div>`).join(''); dd.style.display=''; }
function dImgSelect(id,name,price){document.getElementById('d-img-id').value=id;document.getElementById('d-img-search').value=name;document.getElementById('d-img-dd').style.display='none';document.getElementById('d-img-price').textContent=price?'KES '+Number(price).toLocaleString():'';}
document.addEventListener('click',e=>{if(!e.target.closest('#d-img-search'))document.getElementById('d-img-dd')?.style.setProperty('display','none');});

// ═══ PAYMENT METHOD TOGGLE ═══
function toggleDentalPaySub(method) {
    const m = document.getElementById('dental-pay-sub-mpesa');
    const i = document.getElementById('dental-pay-sub-insurance');
    if (m) m.style.display = method === 'mpesa' ? 'block' : 'none';
    if (i) i.style.display = method === 'insurance' ? 'block' : 'none';
}

function updateBillItem(itemId, inputEl) {
    const row = document.getElementById('bill-row-' + itemId);
    const qtyEl   = row ? row.querySelector('.bill-qty-input')   : null;
    const priceEl = row ? row.querySelector('.bill-price-input') : null;
    const qty   = qtyEl   ? parseFloat(qtyEl.value)   : null;
    const price = priceEl ? parseFloat(priceEl.value) : null;
    if (qty === null || price === null || isNaN(qty) || isNaN(price)) return;
    fetch('{{ url("/billing/item") }}/' + itemId, {
        method: 'PATCH',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content },
        body: JSON.stringify({ quantity: qty, unit_price: price })
    })
    .then(r => r.json())
    .then(data => {
        if (data.ok) {
            const totalEl = document.getElementById('bill-total-' + itemId);
            if (totalEl) totalEl.textContent = Number(data.total).toLocaleString('en-KE', {minimumFractionDigits:0, maximumFractionDigits:0});
            const grandEl = document.getElementById('dGrandTotal');
            if (grandEl) grandEl.textContent = 'KES ' + Number(data.invoice_total).toLocaleString('en-KE', {minimumFractionDigits:0, maximumFractionDigits:0});
        }
    })
    .catch(() => {});
}
</script>
@endpush