@extends('layouts.app')
@section('title', 'Patient History | ' . $patient->full_name)
@section('content')

{{-- ════════════════════════════════════════════════════════════
     PATIENT HISTORY — unified timeline across OPD/IPD/ANC/Maternity
     ════════════════════════════════════════════════════════════
     - Cross-encounter summary at top (allergies, chronic conditions,
       active meds, encounter counts)
     - Filter chips by encounter type
     - Date range + free-text search
     - Paginated timeline (20 per page)
     - Expand/collapse per row, details lazy-loaded via AJAX
     - Billing-only mode for Receptionist/Finance roles
--}}

@php
    $typeChips = [
        ''           => ['label' => 'All',       'count' => array_sum($summary['totals'])],
        'opd'        => ['label' => 'OPD',       'count' => $summary['totals']['opd']],
        'dental'     => ['label' => 'Dental',    'count' => $summary['totals']['dental']],
        'ipd'        => ['label' => 'IPD',       'count' => $summary['totals']['ipd']],
        'anc'        => ['label' => 'ANC',       'count' => $summary['totals']['anc']],
        'maternity'  => ['label' => 'Maternity', 'count' => $summary['totals']['maternity']],
    ];
    $activeType = $filters['type'] ?? '';
@endphp

{{-- ── PATIENT HEADER STRIP ────────────────────────────────────── --}}
<div class="bg-white rounded-xl border border-gray-200 p-4 mb-4 flex flex-wrap items-center gap-4">
    <a href="{{ route('patients.show', $patient) }}" class="text-xs text-cr-700 hover:underline">← Back to Patient</a>
    <div class="flex items-center gap-3">
        <div class="w-10 h-10 bg-cr-100 text-cr-700 rounded-full flex items-center justify-center text-sm font-bold">
            {{ strtoupper(substr($patient->first_name,0,1).substr($patient->last_name,0,1)) }}
        </div>
        <div>
            <p class="text-sm font-bold text-gray-900">{{ $patient->full_name }}</p>
            <p class="text-xs text-gray-500">{{ $patient->mrn }} · {{ ucfirst($patient->gender ?? '') }} · {{ $patient->age ?? '' }}</p>
        </div>
    </div>
    @if($billingOnly)
        <span class="ml-auto text-[11px] px-2 py-1 rounded-full bg-amber-50 text-amber-800 border border-amber-200 font-semibold">
            Billing-only view
        </span>
    @endif
</div>

{{-- ── CROSS-ENCOUNTER SUMMARY (allergies, chronic, active meds) ── --}}
@unless($billingOnly)
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-4">
    <div class="bg-rose-50 border border-rose-200 rounded-xl p-3">
        <p class="text-[10.5px] font-bold uppercase tracking-wide text-rose-800 mb-1">Allergies</p>
        @if(count($summary['allergies']))
            <div class="flex flex-wrap gap-1">
                @foreach($summary['allergies'] as $a)
                    <span class="text-[11.5px] bg-white border border-rose-300 text-rose-900 px-2 py-0.5 rounded-full">{{ $a }}</span>
                @endforeach
            </div>
        @else
            <p class="text-xs text-gray-500 italic">None on record</p>
        @endif
    </div>

    <div class="bg-amber-50 border border-amber-200 rounded-xl p-3">
        <p class="text-[10.5px] font-bold uppercase tracking-wide text-amber-800 mb-1">Chronic Conditions</p>
        @if(count($summary['chronic_conditions']))
            <div class="flex flex-wrap gap-1">
                @foreach($summary['chronic_conditions'] as $c)
                    <span class="text-[11.5px] bg-white border border-amber-300 text-amber-900 px-2 py-0.5 rounded-full">{{ $c }}</span>
                @endforeach
            </div>
        @else
            <p class="text-xs text-gray-500 italic">None on record</p>
        @endif
    </div>

    <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-3">
        <p class="text-[10.5px] font-bold uppercase tracking-wide text-emerald-800 mb-1">Active Medications ({{ count($summary['active_medications']) }})</p>
        @if(count($summary['active_medications']))
            <ul class="space-y-0.5 max-h-24 overflow-y-auto">
                @foreach($summary['active_medications'] as $m)
                    <li class="text-[11.5px] text-emerald-900">
                        <span class="font-semibold">{{ $m['name'] }}</span>
                        @if($m['dosage']) · {{ $m['dosage'] }}@endif
                        @if($m['frequency']) · {{ $m['frequency'] }}@endif
                    </li>
                @endforeach
            </ul>
        @else
            <p class="text-xs text-gray-500 italic">None active</p>
        @endif
    </div>
</div>
@endunless

{{-- ── FILTERS ──────────────────────────────────────────────────── --}}
<form method="GET" action="{{ route('patients.history', $patient) }}" class="bg-white rounded-xl border border-gray-200 p-3 mb-3 flex flex-wrap items-center gap-2">
    {{-- Type chips --}}
    <div class="flex flex-wrap gap-1 mr-3">
        @foreach($typeChips as $key => $chip)
            <a href="{{ route('patients.history', array_merge(['patient' => $patient->id], array_filter([
                  'type'   => $key ?: null,
                  'from'   => $filters['from']?->format('Y-m-d'),
                  'to'     => $filters['to']?->format('Y-m-d'),
                  'search' => $filters['search'] ?: null,
               ]))) }}"
               class="text-[11.5px] px-2.5 py-1 rounded-full border {{ $activeType === $key ? 'bg-cr-700 text-white border-cr-700' : 'bg-white text-gray-700 border-gray-300 hover:border-cr-300' }}">
                {{ $chip['label'] }} <span class="opacity-70">({{ $chip['count'] }})</span>
            </a>
        @endforeach
    </div>

    {{-- Date range — unified hmis-date-input style (round 10). Auto-submits
         on change; Filter button still works for users who set both then click. --}}
    <div class="hmis-date-range">
        <input type="date" name="from" value="{{ $filters['from']?->format('Y-m-d') }}"
               class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
        <span class="hmis-date-sep">to</span>
        <input type="date" name="to" value="{{ $filters['to']?->format('Y-m-d') }}"
               class="hmis-date-input no-flatpickr" onchange="this.form.submit()">
    </div>

    {{-- Search --}}
    <input type="text" name="search" value="{{ $filters['search'] }}"
           placeholder="Search notes / diagnoses…"
           class="flex-1 min-w-[200px] text-xs px-3 py-1 border border-gray-300 rounded">

    {{-- Preserve type if set --}}
    @if($filters['type'])<input type="hidden" name="type" value="{{ $filters['type'] }}">@endif

    <button type="submit" class="text-xs px-3 py-1 bg-cr-700 text-white rounded font-semibold">Apply</button>
    @if($filters['from'] || $filters['to'] || $filters['search'])
        <a href="{{ route('patients.history', $patient) }}" class="text-xs text-gray-600 hover:underline">Clear</a>
    @endif
</form>

{{-- ── TIMELINE ─────────────────────────────────────────────────── --}}
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
    @forelse($timeline as $entry)
        @include('patients.partials._patient-history-row', ['entry' => $entry, 'patient' => $patient])
    @empty
        <div class="p-8 text-center text-sm text-gray-500">
            No encounters match these filters.
        </div>
    @endforelse
</div>

{{-- Pagination --}}
<div class="mt-3">
    {{ $timeline->links() }}
</div>

{{-- ── DETAILS LAZY-LOAD JS ─────────────────────────────────────── --}}
<script>
(function() {
    // Each row has a "Details ▸" toggle. First click fetches the details
    // partial via AJAX into an empty container; subsequent toggles just
    // show/hide the cached payload.
    document.addEventListener('click', function(e) {
        const btn = e.target.closest('.history-row-toggle');
        if (!btn) return;
        e.preventDefault();
        const row = btn.closest('[data-history-row]');
        if (!row) return;
        const wrap = row.querySelector('[data-history-details]');
        const arrow = btn.querySelector('.history-arrow');
        if (!wrap) return;

        if (wrap.dataset.loaded !== '1' && wrap.dataset.loading !== '1') {
            wrap.dataset.loading = '1';
            wrap.innerHTML = '<div class="p-3 text-xs text-gray-500 italic">Loading…</div>';
            wrap.classList.remove('hidden');
            fetch(btn.dataset.url, {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                .then(r => r.text())
                .then(html => {
                    wrap.innerHTML = html;
                    wrap.dataset.loaded = '1';
                    wrap.dataset.loading = '0';
                    if (arrow) arrow.style.transform = 'rotate(90deg)';
                })
                .catch(err => {
                    wrap.innerHTML = '<div class="p-3 text-xs text-red-600">Failed to load: ' + err + '</div>';
                    wrap.dataset.loading = '0';
                });
            return;
        }

        // Toggle visibility on subsequent clicks
        const isHidden = wrap.classList.contains('hidden');
        wrap.classList.toggle('hidden');
        if (arrow) arrow.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
    });
})();
</script>

@endsection