@extends('layouts.app')
@section('title', $patient->name)

@section('content')
@php
    $severeAllergies = $patient->allergies->whereIn('severity', ['moderate','severe']);
@endphp

<div class="page-head">
    <div style="display:flex;align-items:center;gap:16px;">
        <div class="avatar lg">{{ $patient->initials }}</div>
        <div>
            <div class="eyebrow"><a href="{{ route('patients.index') }}">Patients</a> · {{ $patient->mrn }}</div>
            <h1>{{ $patient->name }}</h1>
            <p>
                {{ $patient->age !== null ? $patient->age.' years' : 'Age unknown' }}
                @if($patient->gender) · {{ ucfirst($patient->gender) }} @endif
                @if($patient->blood_group) · Blood {{ $patient->blood_group }} @endif
                @if($patient->phone) · {{ $patient->phone }} @endif
            </p>
        </div>
    </div>
    <div class="chips">
        <a href="{{ route('appointments.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-ghost">Book visit</a>
        <a href="{{ route('lab-reports.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-ghost">Add labs</a>
        <a href="{{ route('prescriptions.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-primary">Prescribe</a>
    </div>
</div>

@if($severeAllergies->isNotEmpty())
    <div class="flash alert-err" style="margin-bottom:18px;">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <span><strong>Allergy alert:</strong> {{ $severeAllergies->pluck('allergen')->implode(', ') }}</span>
    </div>
@endif

<div class="tabs" id="tabs">
    <button class="tab active" data-tab="overview">Overview</button>
    <button class="tab" data-tab="history">History &amp; allergies</button>
    <button class="tab" data-tab="labs">Lab trends</button>
    <button class="tab" data-tab="appts">Appointments</button>
    <button class="tab" data-tab="rx">Prescriptions</button>
</div>

{{-- ============ OVERVIEW ============ --}}
<div class="tab-panel active" id="panel-overview">
    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Demographics</h3><a href="{{ route('patients.edit', $patient) }}" class="sub">Edit →</a></div>
            <div class="card-pad">
                <dl class="kv">
                    <dt>MRN</dt><dd>{{ $patient->mrn }}</dd>
                    <dt>Date of birth</dt><dd>{{ optional($patient->date_of_birth)->format('j M Y') ?? '—' }}</dd>
                    <dt>Phone</dt><dd>{{ $patient->phone ?: '—' }}</dd>
                    <dt>Email</dt><dd>{{ $patient->email ?: '—' }}</dd>
                    <dt>Address</dt><dd>{{ $patient->address ?: '—' }}</dd>
                    <dt>Emergency</dt><dd>{{ $patient->emergency_contact_name ? $patient->emergency_contact_name.' · '.$patient->emergency_contact_phone : '—' }}</dd>
                </dl>
                @if($patient->notes)
                    <div class="divider"></div>
                    <div class="muted" style="font-size:13px;font-weight:600;margin-bottom:4px;">Clinical notes</div>
                    <p style="margin:0;white-space:pre-line;">{{ $patient->notes }}</p>
                @endif
            </div>
        </div>

        <div class="stack">
            <div class="card">
                <div class="card-head"><h3>Active conditions</h3></div>
                <div class="card-pad">
                    @php($active = $patient->medicalHistories->whereIn('status',['active','chronic']))
                    @if($active->isNotEmpty())
                        <div class="chips">
                            @foreach($active as $h)
                                <span class="badge {{ $h->status==='chronic' ? 'badge-warn' : 'badge-info' }}">{{ $h->condition }}</span>
                            @endforeach
                        </div>
                    @else
                        <p class="muted" style="margin:0;">No active conditions recorded.</p>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-head"><h3>Latest results</h3><span class="sub" data-tab-link="labs" style="cursor:pointer;">All trends →</span></div>
                @php($latestReport = $patient->labReports->first())
                @if($latestReport && $latestReport->results->isNotEmpty())
                    <div class="table-wrap">
                        <table class="data">
                            <thead><tr><th>Test</th><th class="num">Value</th><th>Range</th></tr></thead>
                            <tbody>
                            @foreach($latestReport->results->take(6) as $r)
                                <tr>
                                    <td>{{ $r->test_name }}</td>
                                    <td class="num flag-{{ $r->flag }}">{{ $r->display_value }} <span class="faint" style="font-weight:400">{{ $r->unit }}</span></td>
                                    <td class="faint">{{ $r->ref_low !== null || $r->ref_high !== null ? trim(($r->ref_low!==null?rtrim(rtrim(number_format($r->ref_low,3),'0'),'.'):'').' – '.($r->ref_high!==null?rtrim(rtrim(number_format($r->ref_high,3),'0'),'.'):'')) : '—' }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-pad" style="padding-top:12px;"><span class="faint" style="font-size:12.5px;">From {{ $latestReport->panel ?: 'report' }} · {{ $latestReport->report_date->format('j M Y') }}</span></div>
                @else
                    <div class="empty" style="padding:26px;">No lab results yet.</div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- ============ HISTORY & ALLERGIES ============ --}}
<div class="tab-panel" id="panel-history">
    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Medical history</h3></div>
            @forelse($patient->medicalHistories as $h)
                <div style="display:flex;gap:12px;padding:14px 22px;border-bottom:1px solid var(--border);align-items:flex-start;">
                    <div style="flex:1;">
                        <div style="font-weight:600;">{{ $h->condition }}
                            <span class="badge badge-{{ $h->status==='resolved'?'muted':($h->status==='chronic'?'warn':'info') }}" style="margin-left:6px;">{{ ucfirst($h->status) }}</span>
                        </div>
                        <div class="faint" style="font-size:12.5px;margin-top:2px;">
                            @if($h->diagnosed_on) Diagnosed {{ $h->diagnosed_on->format('M Y') }} @endif
                            @if($h->notes) · {{ $h->notes }} @endif
                        </div>
                    </div>
                    <form method="POST" action="{{ route('patients.history.destroy', [$patient, $h]) }}" onsubmit="return confirm('Remove this entry?')">
                        @csrf @method('DELETE')
                        <button class="rm-row" type="submit" aria-label="Remove"><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>
                    </form>
                </div>
            @empty
                <div class="empty" style="padding:26px;">No past history recorded.</div>
            @endforelse
            <div class="card-pad" style="background:var(--surface-2);border-top:1px solid var(--border);">
                <form method="POST" action="{{ route('patients.history.store', $patient) }}">
                    @csrf
                    <div class="field"><label>Add condition</label><input class="input" name="condition" placeholder="e.g. Type 2 Diabetes" required></div>
                    <div class="form-grid">
                        <div class="field"><label>Diagnosed on</label><input class="input" type="date" name="diagnosed_on"></div>
                        <div class="field"><label>Status</label><select class="select" name="status"><option value="active">Active</option><option value="chronic">Chronic</option><option value="resolved">Resolved</option></select></div>
                    </div>
                    <button class="btn btn-sm btn-primary" type="submit">Add to history</button>
                </form>
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Allergies</h3></div>
            @forelse($patient->allergies as $a)
                <div style="display:flex;gap:12px;padding:14px 22px;border-bottom:1px solid var(--border);align-items:center;">
                    <div style="flex:1;">
                        <div style="font-weight:600;">{{ $a->allergen }}
                            <span class="badge badge-{{ $a->severity==='severe'?'danger':($a->severity==='moderate'?'warn':'muted') }}" style="margin-left:6px;">{{ ucfirst($a->severity) }}</span>
                        </div>
                        @if($a->reaction)<div class="faint" style="font-size:12.5px;">{{ $a->reaction }}</div>@endif
                    </div>
                    <form method="POST" action="{{ route('patients.allergies.destroy', [$patient, $a]) }}" onsubmit="return confirm('Remove this allergy?')">
                        @csrf @method('DELETE')
                        <button class="rm-row" type="submit" aria-label="Remove"><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>
                    </form>
                </div>
            @empty
                <div class="empty" style="padding:26px;">No known allergies.</div>
            @endforelse
            <div class="card-pad" style="background:var(--surface-2);border-top:1px solid var(--border);">
                <form method="POST" action="{{ route('patients.allergies.store', $patient) }}">
                    @csrf
                    <div class="field"><label>Allergen</label><input class="input" name="allergen" placeholder="e.g. Penicillin" required></div>
                    <div class="form-grid">
                        <div class="field"><label>Reaction</label><input class="input" name="reaction" placeholder="e.g. Rash"></div>
                        <div class="field"><label>Severity</label><select class="select" name="severity"><option value="mild">Mild</option><option value="moderate">Moderate</option><option value="severe">Severe</option></select></div>
                    </div>
                    <button class="btn btn-sm btn-primary" type="submit">Record allergy</button>
                </form>
            </div>
        </div>
    </div>
</div>

{{-- ============ LAB TRENDS (signature) ============ --}}
<div class="tab-panel" id="panel-labs">
    <div class="row-between" style="margin-bottom:16px;">
        <p class="muted" style="margin:0;">Each marker is one result over time. The shaded band is the reference range — points outside it are flagged.</p>
        <a href="{{ route('lab-reports.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-primary">Add lab report</a>
    </div>

    @if($trends->isNotEmpty())
        <div class="grid grid-3" id="trend-grid">
            @foreach($trends as $name => $t)
                @php
                    $pts = collect($t['points']);
                    $last = $pts->last(); $prev = $pts->count() > 1 ? $pts[$pts->count()-2] : null;
                    $delta = $prev ? $last['value'] - $prev['value'] : null;
                @endphp
                <div class="card trend-card">
                    <div class="trend-head">
                        <span class="name">{{ $name }}</span>
                        <span><span class="latest flag-{{ $last['flag'] }}">{{ rtrim(rtrim(number_format($last['value'],3),'0'),'.') }}</span> <span class="unit">{{ $t['unit'] }}</span></span>
                    </div>
                    <div class="trend-meta">
                        {{ $pts->count() }} {{ Str::plural('reading', $pts->count()) }}
                        @if($delta !== null)
                            · <span class="delta {{ $delta > 0 ? 'up' : 'down' }}">{{ $delta > 0 ? '▲' : '▼' }} {{ rtrim(rtrim(number_format(abs($delta),3),'0'),'.') }}</span> since last
                        @endif
                    </div>
                    <div class="trend-canvas"><canvas height="120" data-trend="{{ $loop->index }}"></canvas></div>
                </div>
            @endforeach
        </div>
    @else
        <div class="card"><div class="empty"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 3h6M10 3v5l-5 9a2 2 0 0 0 2 3h10a2 2 0 0 0 2-3l-5-9V3" stroke-linecap="round" stroke-linejoin="round"/></svg>No numeric lab results yet. Add a report to start tracking trends.</div></div>
    @endif

    <div class="card" style="margin-top:18px;">
        <div class="card-head"><h3>Lab reports</h3></div>
        @forelse($patient->labReports as $lab)
            <div style="display:flex;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--border);">
                <div style="flex:1;"><a href="{{ route('lab-reports.show', $lab) }}" style="font-weight:600;">{{ $lab->panel ?: 'Lab report' }}</a>
                    <div class="faint" style="font-size:12.5px;">{{ $lab->report_date->format('j M Y') }} @if($lab->lab_name) · {{ $lab->lab_name }} @endif · {{ $lab->results->count() }} {{ Str::plural('test', $lab->results->count()) }}</div>
                </div>
                @if($lab->attachment_path)<a href="{{ asset('storage/'.$lab->attachment_path) }}" target="_blank" class="btn btn-sm btn-ghost">File</a>@endif
                <a href="{{ route('lab-reports.show', $lab) }}" class="btn btn-sm btn-ghost">View</a>
            </div>
        @empty
            <div class="empty" style="padding:26px;">No reports yet.</div>
        @endforelse
    </div>
</div>

{{-- ============ APPOINTMENTS ============ --}}
<div class="tab-panel" id="panel-appts">
    <div class="row-between" style="margin-bottom:16px;">
        <h3 style="font-size:18px;">Visit history</h3>
        <a href="{{ route('appointments.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-primary">Book appointment</a>
    </div>
    <div class="card">
        @forelse($patient->appointments as $appt)
            <div style="display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--border);">
                <div style="width:96px;flex:0 0 96px;"><div style="font-weight:600;">{{ $appt->scheduled_at->format('j M Y') }}</div><div class="faint" style="font-size:12.5px;">{{ $appt->scheduled_at->format('g:i A') }}</div></div>
                <div style="flex:1;"><div>{{ $appt->reason ?: 'Consultation' }}</div>@if($appt->notes)<div class="faint" style="font-size:12.5px;">{{ $appt->notes }}</div>@endif</div>
                <span class="badge badge-{{ $appt->status_color }}"><span class="dot"></span>{{ ucfirst(str_replace('_',' ',$appt->status)) }}</span>
            </div>
        @empty
            <div class="empty" style="padding:30px;">No appointments recorded.</div>
        @endforelse
    </div>
</div>

{{-- ============ PRESCRIPTIONS ============ --}}
<div class="tab-panel" id="panel-rx">
    <div class="row-between" style="margin-bottom:16px;">
        <h3 style="font-size:18px;">Prescriptions</h3>
        <a href="{{ route('prescriptions.create', ['patient_id' => $patient->id]) }}" class="btn btn-sm btn-primary">New prescription</a>
    </div>
    <div class="stack">
        @forelse($patient->prescriptions as $rx)
            <div class="card">
                <div class="card-head">
                    <div><h3 style="font-size:15px;">{{ $rx->diagnosis ?: 'Prescription' }}</h3><span class="sub">{{ $rx->prescribed_on->format('j M Y') }}</span></div>
                    <a href="{{ route('prescriptions.show', $rx) }}" class="btn btn-sm btn-ghost">Open</a>
                </div>
                <div class="card-pad">
                    @foreach($rx->items as $item)
                        <div style="display:flex;gap:10px;padding:5px 0;font-size:14px;">
                            <span style="font-weight:600;min-width:160px;">{{ $item->drug_name }}</span>
                            <span class="muted">{{ collect([$item->dosage, $item->frequency, $item->duration])->filter()->implode(' · ') }}</span>
                        </div>
                    @endforeach
                </div>
            </div>
        @empty
            <div class="card"><div class="empty" style="padding:30px;">No prescriptions yet.</div></div>
        @endforelse
    </div>
</div>

@push('scripts')
<script>
    // ---- Tabs ----
    const tabs = document.querySelectorAll('.tab');
    const panels = document.querySelectorAll('.tab-panel');
    function activate(name) {
        tabs.forEach(t => t.classList.toggle('active', t.dataset.tab === name));
        panels.forEach(p => p.classList.toggle('active', p.id === 'panel-' + name));
        if (name === 'labs') requestAnimationFrame(renderTrends);
    }
    tabs.forEach(t => t.addEventListener('click', () => { activate(t.dataset.tab); history.replaceState(null,'','#'+t.dataset.tab); }));
    document.querySelectorAll('[data-tab-link]').forEach(el => el.addEventListener('click', () => activate(el.dataset.tabLink)));
    if (location.hash) { const h = location.hash.slice(1); if (document.getElementById('panel-'+h)) activate(h); }

    // ---- Lab trend charts ----
    const TRENDS = @json($trends->values());
    let rendered = false;
    function renderTrends() {
        if (rendered || typeof Chart === 'undefined') return;
        rendered = true;
        const css = getComputedStyle(document.documentElement);
        const teal = css.getPropertyValue('--teal').trim();
        const ok = css.getPropertyValue('--ok').trim();
        const warn = css.getPropertyValue('--warn').trim();
        const danger = css.getPropertyValue('--danger').trim();
        const flagColor = f => f === 'high' ? warn : (f === 'low' ? danger : ok);

        document.querySelectorAll('canvas[data-trend]').forEach(canvas => {
            const t = TRENDS[+canvas.dataset.trend];
            if (!t) return;
            const labels = t.points.map(p => p.date);
            const values = t.points.map(p => p.value);
            const datasets = [{
                data: values, borderColor: teal, borderWidth: 2,
                pointBackgroundColor: t.points.map(p => flagColor(p.flag)),
                pointBorderColor: '#fff', pointBorderWidth: 1.5, pointRadius: 4, pointHoverRadius: 6,
                tension: 0.25, fill: false,
            }];
            // reference-range band
            if (t.ref_high !== null) datasets.push({ data: labels.map(()=>t.ref_high), borderColor:'transparent', pointRadius:0, fill:'+1', backgroundColor:'rgba(30,142,90,.07)' });
            if (t.ref_low !== null) datasets.push({ data: labels.map(()=>t.ref_low), borderColor:'transparent', pointRadius:0, fill:false });

            new Chart(canvas, {
                type: 'line',
                data: { labels, datasets },
                options: {
                    responsive: true, maintainAspectRatio: false,
                    plugins: { legend: { display:false }, tooltip: { callbacks: { label: c => c.parsed.y + ' ' + (t.unit||'') } } },
                    scales: {
                        x: { grid:{ display:false }, ticks:{ font:{ size:10 }, maxRotation:0, autoSkip:true, maxTicksLimit:4, color:'#8A9892' } },
                        y: { grid:{ color:'rgba(0,0,0,.05)' }, ticks:{ font:{ size:10 }, color:'#8A9892' } }
                    }
                }
            });
        });
    }
    document.addEventListener('DOMContentLoaded', () => { if (location.hash.slice(1)==='labs') renderTrends(); });
    window.addEventListener('load', () => { if (document.getElementById('panel-labs').classList.contains('active')) renderTrends(); });
</script>
@endpush
@endsection