{{--
    Patient History Drawer
    ──────────────────────
    Use on any encounter page (OPD, IPD, ANC, Maternity) to give the
    clinician quick access to the patient's full cross-module history
    without leaving the encounter they're charting.

    Usage:
        @include('patients.partials._patient-history-drawer', ['patient' => $patient])

    The drawer is hidden by default. A trigger button anywhere on the
    page can open it via:
        <button type="button" onclick="openPatientHistoryDrawer()">View History</button>

    On first open, content is fetched from /patients/{id}/history (the
    full page) and parsed for the timeline section. Cached after first
    load — subsequent opens just toggle visibility.
--}}

<div id="patient-history-drawer-overlay" class="fixed inset-0 bg-black/40 hidden z-40"
     onclick="closePatientHistoryDrawer()"></div>

<div id="patient-history-drawer" class="fixed top-0 right-0 h-full w-full md:w-[700px] bg-white shadow-2xl hidden z-50 flex-col"
     style="display:none">
    <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200 bg-gray-50">
        <div>
            <p class="text-sm font-bold text-gray-900">Patient History</p>
            <p class="text-[11.5px] text-gray-500">{{ $patient->full_name }} · {{ $patient->mrn }}</p>
        </div>
        <div class="flex items-center gap-2">
            <a href="{{ route('patients.history', $patient) }}" class="text-xs text-cr-700 hover:underline">Open full page →</a>
            <button type="button" onclick="closePatientHistoryDrawer()" class="text-xl text-gray-500 hover:text-gray-800 leading-none">&times;</button>
        </div>
    </div>

    <div id="patient-history-drawer-body" class="flex-1 overflow-y-auto p-3" style="max-height:calc(100vh - 60px)">
        <div class="text-center text-sm text-gray-500 italic py-8">Click "View History" to load.</div>
    </div>
</div>

<script>
(function() {
    let loaded = false;

    window.openPatientHistoryDrawer = function() {
        const drawer  = document.getElementById('patient-history-drawer');
        const overlay = document.getElementById('patient-history-drawer-overlay');
        drawer.style.display = 'flex';
        overlay.style.display = 'block';
        drawer.classList.remove('hidden');
        overlay.classList.remove('hidden');

        if (!loaded) {
            const body = document.getElementById('patient-history-drawer-body');
            body.innerHTML = '<div class="text-center text-sm text-gray-500 italic py-8">Loading history…</div>';

            fetch('{{ route("patients.history", $patient) }}', {headers: {'X-Requested-With': 'XMLHttpRequest'}})
                .then(r => r.text())
                .then(html => {
                    // Parse out the timeline portion of the full history
                    // page so we don't shove a whole layout into the drawer.
                    const doc = new DOMParser().parseFromString(html, 'text/html');
                    // Grab everything inside the main content area below the
                    // patient header (which the drawer already shows).
                    const filters = doc.querySelector('form[action*="/history"]');
                    const timeline = doc.querySelector('.bg-white.rounded-xl.border.border-gray-200.overflow-hidden:last-of-type');
                    const summary  = doc.querySelector('.grid.grid-cols-1.md\\:grid-cols-3');

                    body.innerHTML = '';
                    if (summary)  body.appendChild(summary);
                    if (filters)  body.appendChild(filters);
                    if (timeline) body.appendChild(timeline);

                    // Re-bind the row toggle handler — events on the
                    // injected nodes don't fire from the parent doc's
                    // listeners due to scope; copy the row toggle logic
                    // from history.blade.php.
                    body.addEventListener('click', function(e) {
                        const btn = e.target.closest('.history-row-toggle');
                        if (!btn) return;
                        e.preventDefault();
                        const row = btn.closest('[data-history-row]');
                        const wrap = row?.querySelector('[data-history-details]');
                        if (!wrap) return;
                        if (wrap.dataset.loaded !== '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(h => { wrap.innerHTML = h; wrap.dataset.loaded = '1'; });
                        } else {
                            wrap.classList.toggle('hidden');
                        }
                    });

                    loaded = true;
                })
                .catch(err => {
                    body.innerHTML = '<div class="text-center text-sm text-red-600 py-8">Failed to load history.</div>';
                });
        }
    };

    window.closePatientHistoryDrawer = function() {
        const drawer  = document.getElementById('patient-history-drawer');
        const overlay = document.getElementById('patient-history-drawer-overlay');
        drawer.style.display = 'none';
        overlay.style.display = 'none';
        drawer.classList.add('hidden');
        overlay.classList.add('hidden');
    };
})();
</script>