@extends('layouts.app')
@section('title', 'Lab Result | ' . $labOrder->test_name)
@section('content')
<div class="flex items-center gap-3 mb-4">
    <a href="{{ route('lab.index') }}" class="btn-secondary text-xs flex items-center gap-1"><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="M15 19l-7-7 7-7"/></svg> Back to Lab</a>
    <h2 class="text-base font-bold text-gray-800">Result Entry | {{ $labOrder->test_name }}</h2>
</div>

{{-- Patient & Order Info --}}
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
    <div class="bg-white rounded-xl border p-4">
        <h4 class="text-xs font-bold text-gray-500 uppercase mb-2">Patient</h4>
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold">{{ strtoupper(substr($labOrder->patient->first_name ?? '', 0, 1) . substr($labOrder->patient->last_name ?? '', 0, 1)) }}</div>
            <div>
                <p class="text-sm font-bold">{{ $labOrder->patient->full_name ?? '' }}</p>
                <p class="text-xs text-gray-400">{{ $labOrder->patient->mrn ?? '' }} · {{ ucfirst($labOrder->patient->gender ?? '') }} · {{ $labOrder->patient->age ?? '' }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl border p-4">
        <h4 class="text-xs font-bold text-gray-500 uppercase mb-2">Order Details</h4>
        <div class="grid grid-cols-2 gap-2 text-xs">
            <div><span class="text-gray-400">Test:</span> <span class="font-semibold">{{ $labOrder->test_name }}</span></div>
            <div><span class="text-gray-400">Sample:</span> {{ $labOrder->sample_type ?? $labOrder->labTest->sample_type ?? '-' }}</div>
            <div><span class="text-gray-400">Urgency:</span> <span class="badge {{ $labOrder->urgency === 'urgent' ? 'badge-danger' : 'badge-gray' }}">{{ ucfirst($labOrder->urgency) }}</span></div>
            <div><span class="text-gray-400">Ordered:</span> {{ $labOrder->created_at->format('d M Y H:i') }}</div>
        </div>
    </div>
</div>

{{-- Result Entry Form --}}
<form method="POST" action="{{ route('lab.result.store', $labOrder) }}">
@csrf

<div class="bg-white rounded-xl border shadow-sm mb-4">
    <div class="px-5 py-3 border-b bg-gray-50"><h3 class="text-sm font-bold text-gray-800">Test Parameters</h3></div>

    @if($parameters->count())
    <div class="overflow-x-auto">
        <table class="w-full">
            <thead><tr class="bg-gray-50">
                <th class="table-header" style="width:200px">Parameter</th>
                <th class="table-header" style="width:160px">Result</th>
                <th class="table-header">Unit</th>
                <th class="table-header">Reference Range</th>
                <th class="table-header text-center">Flag</th>
            </tr></thead>
            <tbody>
            @foreach($parameters as $param)
            @php
                $ref = $param->getReferenceFor($gender, $ageYears);
                $existingVal = $existingValues[$param->id]['value'] ?? '';
                $existingFlag = $existingValues[$param->id]['flag'] ?? '';
            @endphp
            <tr class="border-b border-gray-50 param-row" data-critical-low="{{ $param->critical_low }}" data-critical-high="{{ $param->critical_high }}" data-ref="{{ $ref }}">
                <td class="table-cell">
                    <p class="text-xs font-medium">{{ $param->name }}</p>
                    @if($param->short_code)<p class="text-xs text-gray-400">{{ $param->short_code }}</p>@endif
                </td>
                <td class="table-cell">
                    @if($param->input_type === 'dropdown')
                        <select name="param_{{ $param->id }}" class="form-input text-xs result-input" data-type="dropdown" data-normal="{{ $ref }}">
                            <option value="">|</option>
                            @foreach($param->dropdown_values as $opt)
                            <option value="{{ $opt }}" {{ $existingVal === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                            @endforeach
                        </select>
                    @elseif($param->input_type === 'textarea')
                        <textarea name="param_{{ $param->id }}" class="form-input text-xs result-input" rows="2">{{ $existingVal }}</textarea>
                    @else
                        <input type="{{ $param->input_type === 'numeric' ? 'number' : 'text' }}" step="any" name="param_{{ $param->id }}" value="{{ $existingVal }}" class="form-input text-xs result-input" data-type="{{ $param->input_type }}" oninput="autoFlag(this)">
                    @endif
                </td>
                <td class="table-cell text-xs text-gray-500">{{ $param->unit ?? '' }}</td>
                <td class="table-cell text-xs text-gray-500">{{ $ref ?? '' }}</td>
                <td class="table-cell text-center flag-cell">
                    @if($existingFlag && $existingFlag !== 'normal')
                    <span class="flag-{{ $existingFlag }} text-xs font-bold">{{ strtoupper(str_replace('_', ' ', $existingFlag)) }}</span>
                    @else
                    <span class="flag-display text-xs">|</span>
                    @endif
                </td>
            </tr>
            @endforeach
            </tbody>
        </table>
    </div>
    @else
    {{-- Fallback: editable generic table for tests without predefined parameters --}}
    <div class="p-5">
        <p class="text-xs text-gray-400 mb-3">This test does not have predefined parameters. Enter results in the table below.</p>
        <div class="overflow-x-auto">
            <table class="w-full" id="genericTable">
                <thead><tr class="bg-gray-50">
                    <th class="table-header" style="width:200px">Parameter</th>
                    <th class="table-header" style="width:180px">Finding / Result</th>
                    <th class="table-header" style="width:160px">Reference Range</th>
                    <th class="table-header text-center" style="width:120px">Interpretation</th>
                    <th class="table-header text-center" style="width:50px"></th>
                </tr></thead>
                <tbody id="genericTableBody">
                @php
                    $genericRows = $existingValues['generic_rows'] ?? [];
                    $rowCount = count($genericRows) > 0 ? count($genericRows) : 4;
                @endphp
                @for($i = 0; $i < $rowCount; $i++)
                <tr class="border-b border-gray-50 generic-row">
                    <td class="table-cell"><input type="text" name="generic_param[]" class="form-input text-xs" placeholder="Parameter name" value="{{ $genericRows[$i]['param'] ?? '' }}"></td>
                    <td class="table-cell"><input type="text" name="generic_finding[]" class="form-input text-xs" placeholder="Result" value="{{ $genericRows[$i]['finding'] ?? '' }}" oninput="autoFlagGeneric(this)"></td>
                    <td class="table-cell"><input type="text" name="generic_ref[]" class="form-input text-xs" placeholder="e.g. 3.5 - 5.0" value="{{ $genericRows[$i]['ref'] ?? '' }}"></td>
                    <td class="table-cell text-center">
                        <select name="generic_interp[]" class="form-input text-xs generic-interp">
                            <option value="">—</option>
                            <option value="Normal" {{ ($genericRows[$i]['interp'] ?? '') === 'Normal' ? 'selected' : '' }}>Normal</option>
                            <option value="High" {{ ($genericRows[$i]['interp'] ?? '') === 'High' ? 'selected' : '' }}>High</option>
                            <option value="Low" {{ ($genericRows[$i]['interp'] ?? '') === 'Low' ? 'selected' : '' }}>Low</option>
                            <option value="Critical" {{ ($genericRows[$i]['interp'] ?? '') === 'Critical' ? 'selected' : '' }}>Critical</option>
                            <option value="Positive" {{ ($genericRows[$i]['interp'] ?? '') === 'Positive' ? 'selected' : '' }}>Positive</option>
                            <option value="Negative" {{ ($genericRows[$i]['interp'] ?? '') === 'Negative' ? 'selected' : '' }}>Negative</option>
                            <option value="Reactive" {{ ($genericRows[$i]['interp'] ?? '') === 'Reactive' ? 'selected' : '' }}>Reactive</option>
                            <option value="Non-reactive" {{ ($genericRows[$i]['interp'] ?? '') === 'Non-reactive' ? 'selected' : '' }}>Non-reactive</option>
                            <option value="Abnormal" {{ ($genericRows[$i]['interp'] ?? '') === 'Abnormal' ? 'selected' : '' }}>Abnormal</option>
                        </select>
                    </td>
                    <td class="table-cell text-center"><button type="button" onclick="this.closest('tr').remove()" class="text-red-400 hover:text-red-600 text-xs" title="Remove row">✕</button></td>
                </tr>
                @endfor
                </tbody>
            </table>
        </div>
        <button type="button" onclick="addGenericRow()" class="mt-2 text-xs text-blue-600 hover:text-blue-800 font-medium flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
            Add Row
        </button>
    </div>
    @endif
</div>

{{-- Remarks --}}
<div class="bg-white rounded-xl border shadow-sm p-5 mb-4">
    <label class="form-label">Remarks / Interpretation</label>
    <textarea name="remarks" class="form-input" rows="3" placeholder="Optional interpretation, clinical notes…">{{ $labOrder->result->remarks ?? '' }}</textarea>
</div>

{{-- Actions --}}
<div class="flex flex-wrap items-center justify-between gap-3">
    <button type="submit" name="action" value="save_draft" class="btn-secondary text-xs">Save Draft</button>
    <button type="submit" name="action" value="verify_release" class="btn-success text-xs" onclick="return confirm('Save and release this result?')">Save & Release</button>
</div>
</form>
@endsection

@section('scripts')
<script>
function autoFlag(input) {
    const row = input.closest('tr');
    const flagCell = row.querySelector('.flag-cell');
    const val = parseFloat(input.value);
    if (isNaN(val) || input.dataset.type !== 'numeric') { flagCell.innerHTML = '<span class="text-xs text-gray-400">|</span>'; return; }

    const critLow = parseFloat(row.dataset.criticalLow);
    const critHigh = parseFloat(row.dataset.criticalHigh);
    const ref = row.dataset.ref || '';

    let flag = 'NORMAL';
    let cls = 'text-green-600';

    if (!isNaN(critLow) && val <= critLow) { flag = 'CRITICAL LOW'; cls = 'flag-critical_low'; }
    else if (!isNaN(critHigh) && val >= critHigh) { flag = 'CRITICAL HIGH'; cls = 'flag-critical_high'; }
    else {
        const m = ref.match(/([0-9.]+)\s*-\s*([0-9.]+)/);
        if (m) {
            const lo = parseFloat(m[1]), hi = parseFloat(m[2]);
            if (val < lo) { flag = 'LOW'; cls = 'flag-low'; }
            else if (val > hi) { flag = 'HIGH'; cls = 'flag-high'; }
        }
    }

    if (flag === 'NORMAL') {
        flagCell.innerHTML = '<span class="text-xs text-green-600 font-medium">Normal</span>';
    } else {
        flagCell.innerHTML = `<span class="text-xs ${cls}">${flag}</span>`;
    }
    if (flag.includes('CRITICAL')) { input.classList.add('border-red-500', 'bg-red-50'); } else { input.classList.remove('border-red-500', 'bg-red-50'); }
}

// Auto-flag dropdown selects (qualitative tests)
document.querySelectorAll('select.result-input').forEach(function(sel) {
    sel.addEventListener('change', function() {
        const row = this.closest('tr');
        const flagCell = row.querySelector('.flag-cell');
        const val = this.value;
        const normal = this.dataset.normal || '';
        if (!val) { flagCell.innerHTML = '<span class="text-xs text-gray-400">|</span>'; return; }
        if (val === normal || val === 'Negative' || val === 'Non-Reactive' || val === 'Not Seen' || val === 'Clear' || val === 'Normal' || val === 'Adequate' || val === 'N/A' || val === 'No Growth' || val === 'Pale Yellow' || val === 'Formed' || val === 'Absent' || val === 'Nil' || val === 'Few' || val === 'Brown' || val === 'Greyish White' || val === 'Colourless' || val === 'Straw') {
            flagCell.innerHTML = '<span class="text-xs text-green-600 font-medium">Normal</span>';
        } else if (val === 'Reactive' || val === 'Positive' || val.startsWith('Positive') || val === 'Seen' || val === 'Growth Present' || val === 'Heavy Growth' || val === 'Incompatible') {
            flagCell.innerHTML = '<span class="text-xs flag-high font-bold">ABNORMAL</span>';
        } else if (val.match(/^\+{2,}/) || val.match(/1:16|1:32|1:64|1:128|1:160|1:320|1:640|1:1280/)) {
            flagCell.innerHTML = '<span class="text-xs flag-high font-bold">HIGH</span>';
        } else if (val.match(/^\+$/) || val === 'Trace' || val.match(/1:80/)) {
            flagCell.innerHTML = '<span class="text-xs text-yellow-600 font-medium">BORDERLINE</span>';
        } else if (val === 'Invalid' || val === 'Error' || val === 'Indeterminate') {
            flagCell.innerHTML = '<span class="text-xs text-orange-600 font-medium">REPEAT</span>';
        } else {
            flagCell.innerHTML = '<span class="text-xs text-gray-500">—</span>';
        }
    });
});

// Generic table: add row
function addGenericRow() {
    const tbody = document.getElementById('genericTableBody');
    const tr = document.createElement('tr');
    tr.className = 'border-b border-gray-50 generic-row';
    tr.innerHTML = `
        <td class="table-cell"><input type="text" name="generic_param[]" class="form-input text-xs" placeholder="Parameter name"></td>
        <td class="table-cell"><input type="text" name="generic_finding[]" class="form-input text-xs" placeholder="Result" oninput="autoFlagGeneric(this)"></td>
        <td class="table-cell"><input type="text" name="generic_ref[]" class="form-input text-xs" placeholder="e.g. 3.5 - 5.0"></td>
        <td class="table-cell text-center">
            <select name="generic_interp[]" class="form-input text-xs generic-interp">
                <option value="">—</option>
                <option value="Normal">Normal</option><option value="High">High</option><option value="Low">Low</option>
                <option value="Critical">Critical</option><option value="Positive">Positive</option><option value="Negative">Negative</option>
                <option value="Reactive">Reactive</option><option value="Non-reactive">Non-reactive</option><option value="Abnormal">Abnormal</option>
            </select>
        </td>
        <td class="table-cell text-center"><button type="button" onclick="this.closest('tr').remove()" class="text-red-400 hover:text-red-600 text-xs" title="Remove row">✕</button></td>
    `;
    tbody.appendChild(tr);
    tr.querySelector('input').focus();
}

// Auto-flag generic row: try to parse numeric result vs reference range
function autoFlagGeneric(input) {
    const row = input.closest('tr');
    const interp = row.querySelector('.generic-interp');
    const refInput = row.querySelectorAll('input')[2]; // reference range input
    const val = parseFloat(input.value);
    const ref = refInput ? refInput.value : '';

    if (isNaN(val) || !ref) return;

    const m = ref.match(/([0-9.]+)\s*-\s*([0-9.]+)/);
    if (m) {
        const lo = parseFloat(m[1]), hi = parseFloat(m[2]);
        if (val < lo) interp.value = 'Low';
        else if (val > hi) interp.value = 'High';
        else interp.value = 'Normal';
    }
}
</script>
@endsection