@extends('layouts.app')
@section('title', 'New lab report')

@section('content')
<div class="page-head">
    <div><div class="eyebrow">Labs · New</div><h1>Add lab report</h1><p>Record individual test values so trends build over time.</p></div>
</div>

<form method="POST" action="{{ route('lab-reports.store') }}" enctype="multipart/form-data">
    @csrf
    <div class="grid grid-2" style="align-items:start;">
        <div class="card card-pad">
            <div class="field">
                <label for="patient_id">Patient</label>
                <select id="patient_id" class="select" name="patient_id" required>
                    <option value="">Select patient…</option>
                    @foreach($patients as $p)
                        <option value="{{ $p->id }}" @selected((string)old('patient_id', $selectedPatient)===(string)$p->id)>{{ $p->name }} ({{ $p->mrn }})</option>
                    @endforeach
                </select>
                @error('patient_id')<div class="error">{{ $message }}</div>@enderror
            </div>
            <div class="form-grid">
                <div class="field"><label for="report_date">Report date</label><input id="report_date" class="input" type="date" name="report_date" value="{{ old('report_date', date('Y-m-d')) }}" max="{{ date('Y-m-d') }}" required>@error('report_date')<div class="error">{{ $message }}</div>@enderror</div>
                <div class="field"><label for="panel">Panel / type</label><input id="panel" class="input" name="panel" value="{{ old('panel') }}" placeholder="e.g. Lipid Profile"></div>
            </div>
            <div class="form-grid">
                <div class="field"><label for="lab_name">Laboratory</label><input id="lab_name" class="input" name="lab_name" value="{{ old('lab_name') }}"></div>
                <div class="field"><label for="attachment">Attach PDF / image</label><input id="attachment" class="input" type="file" name="attachment" accept=".pdf,.jpg,.jpeg,.png" style="padding:9px;">@error('attachment')<div class="error">{{ $message }}</div>@enderror</div>
            </div>
            <div class="field"><label for="notes">Notes</label><textarea id="notes" class="input" name="notes" rows="2">{{ old('notes') }}</textarea></div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Results</h3><span class="sub">Add one row per test</span></div>
            <div class="card-pad">
                <div style="margin-bottom:12px;">
                    <div class="hint" style="margin-bottom:6px;">Quick add common tests:</div>
                    <div class="chips">
                        @foreach($commonTests as $ct)
                            <button type="button" class="btn btn-sm btn-ghost quick-test"
                                data-name="{{ $ct['test_name'] }}" data-unit="{{ $ct['unit'] }}"
                                data-low="{{ $ct['ref_low'] }}" data-high="{{ $ct['ref_high'] }}">+ {{ $ct['test_name'] }}</button>
                        @endforeach
                    </div>
                </div>

                <div id="results"></div>
                <button type="button" class="btn btn-sm btn-ghost" id="add-row" style="margin-top:4px;">+ Add blank row</button>
            </div>
        </div>
    </div>

    <div class="form-actions" style="margin-top:18px;">
        <button class="btn btn-primary" type="submit">Save report</button>
        <a href="{{ url()->previous() }}" class="btn btn-ghost">Cancel</a>
    </div>
</form>

@push('scripts')
<script>
    const wrap = document.getElementById('results');
    let i = 0;
    function row(d = {}) {
        const n = i++;
        const el = document.createElement('div');
        el.className = 'repeater-row';
        el.style.gridTemplateColumns = '1.6fr 1fr .9fr 1fr 40px';
        el.innerHTML = `
            <div><label class="hint">Test</label><input class="input" name="results[${n}][test_name]" value="${d.name||''}" placeholder="Test name"></div>
            <div><label class="hint">Value</label><input class="input" type="number" step="any" name="results[${n}][value]" placeholder="—"></div>
            <div><label class="hint">Unit</label><input class="input" name="results[${n}][unit]" value="${d.unit||''}"></div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:6px;"><div><label class="hint">Low</label><input class="input" type="number" step="any" name="results[${n}][ref_low]" value="${d.low??''}"></div><div><label class="hint">High</label><input class="input" type="number" step="any" name="results[${n}][ref_high]" value="${d.high??''}"></div></div>
            <button type="button" class="rm-row" aria-label="Remove" style="align-self:end;"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M6 6l12 12M18 6 6 18" stroke-linecap="round"/></svg></button>`;
        el.querySelector('.rm-row').addEventListener('click', () => el.remove());
        wrap.appendChild(el);
        return el;
    }
    document.getElementById('add-row').addEventListener('click', () => row());
    document.querySelectorAll('.quick-test').forEach(b => b.addEventListener('click', () => {
        row({ name: b.dataset.name, unit: b.dataset.unit, low: b.dataset.low, high: b.dataset.high });
    }));
    row(); // start with one blank row
</script>
@endpush
@endsection