{{-- resources/views/livewire/patient/visits/history.blade.php --}}
<div class="row g-3 visits-compact">
    <!-- Doctors -->
    <div class="col-12 col-lg-3">
        <div class="panel">
            <div class="panel-h">My Doctors <span class="chip">{{ count($doctors) }}</span></div>
            <div class="list">
                @forelse($doctors as $doc)
                    <button
                        class="list-item {{ $activeDoctor && $activeDoctor['id'] === $doc['id'] ? 'is-active' : '' }}"
                        wire:click="selectDoctor({{ $doc['id'] }})">
                        <div class="li-main">
                            <div class="li-title">{{ $doc['name'] }}</div>
                            <div class="li-sub">Last: {{ $doc['last_visit'] ?? '—' }}</div>
                        </div>
                        <span class="chip">{{ $doc['visits_count'] }}</span>
                    </button>
                @empty
                    <div class="empty">No doctors yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Visits -->
    <div class="col-12 col-lg-4">
        <div class="panel">
            <div class="panel-h">Visits <span class="chip">{{ count($visits) }}</span></div>
            <div class="list">
                @forelse($visits as $v)
                    <button
                        class="list-item {{ $activeVisit && $activeVisit['id'] === $v['id'] ? 'is-active' : '' }}"
                        wire:click="selectVisit({{ $v['id'] }})">
                        <div class="li-main">
                            <div class="li-title">{{ $v['date'] }} • {{ $v['time'] }}</div>
                            <div class="li-sub">{{ $v['clinic'] }} • {{ $v['service'] }}</div>
                        </div>
                        <div class="li-meta">
                            <div class="li-code">{{ $v['code'] }}</div>
                            <span class="status {{ $v['status_badge'] }}">{{ $v['status'] }}</span>
                        </div>
                    </button>
                @empty
                    <div class="empty">No visits yet.</div>
                @endforelse
            </div>
        </div>
    </div>

    <!-- Summary -->
    <div class="col-12 col-lg-5">
        <div class="panel">
            <div class="panel-h d-flex justify-content-between">
                <span>Visit Summary</span>
                @if($activeVisit) <span class="muted">Code: {{ $activeVisit['code'] }}</span> @endif
            </div>

            <div class="summary">
                @if($activeVisit)
                    <dl class="kv">
                        <div><dt>Date</dt><dd>{{ $activeVisit['date'] }} {{ $activeVisit['time'] }}</dd></div>
                        <div><dt>Clinic</dt><dd>{{ $activeVisit['clinic'] }}</dd></div>
                        <div><dt>Doctor</dt><dd>{{ $activeVisit['doctor'] }}</dd></div>
                        <div><dt>Complain</dt><dd>{{ $activeVisit['complain'] ?: '—' }}</dd></div>
                        <div><dt>Diagnosis</dt><dd>{{ $activeVisit['diagnosis'] ?: '—' }}</dd></div>
                        <div><dt>Notes</dt><dd>{{ $activeVisit['notes'] ?: '—' }}</dd></div>
                        <div><dt>Follow up</dt><dd>{{ $activeVisit['to_be_followed_on'] ?: '—' }}</dd></div>
                        <div><dt>Status</dt><dd><span class="status {{ $activeVisit['status_badge'] }}">{{ $activeVisit['status'] }}</span></dd></div>
                    </dl>

                    <div class="split"></div>

                    <div class="section-h section-h--actions">
                        <span>Prescription</span>
                        @if($activeVisit)
                            <button class="action-btn" wire:click="openPreview({{ $activeVisit['id'] }})" title="Preview & Print">
                                <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                                    <path stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
                                          d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/>
                                    <circle cx="12" cy="12" r="3.5" stroke-width="1.8" />
                                </svg>
                                <span>Preview & Print</span>
                            </button>
                        @endif
                    </div>

                    <div class="split"></div>

                    <div class="section-h section-h--actions">
                        <span>Bill</span>
                        @if($activeVisit)
                            <button class="action-btn action-btn--primary" wire:click="openBill({{ $activeVisit['id'] }})" title="Show & Print Bill">
                                <svg class="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                                    <path stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"
                                          d="M7 3h10a2 2 0 0 1 2 2v14l-2-1-2 1-2-1-2 1-2-1-2 1V5a2 2 0 0 1 2-2Z"/>
                                    <path stroke-width="1.8" stroke-linecap="round" d="M9 8h6M9 12h6M9 16h4"/>
                                </svg>
                                <span>Show & Print</span>
                            </button>
                        @endif
                    </div>



                    <div id="rx-print">
                        @if(empty($activeVisit['prescription']))
                            <div class="empty">No prescription items.</div>
                        @else
                            <table class="t">
                                <thead>
                                <tr><th>Drug</th><th>Qty</th><th>Days</th><th>Notes / Timings</th></tr>
                                </thead>
                                <tbody>
                                @foreach($activeVisit['prescription'] as $p)
                                    <tr>
                                        <td>{{ $p['drug_name'] }}</td>
                                        <td>{{ $p['qty_str'] }}</td>
                                        <td>{{ $p['days_str'] }}</td>
                                        <td>{{ $p['notes_display'] }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        @endif
                    </div>

                    <div class="split"></div>

                    <div class="section-h">
                        <span>Required Analyses</span>
                        <button class="btn-min" onclick="window.printVisit('an')">Print</button>
                    </div>

                    <div id="an-print">
                        @if(empty($activeVisit['analyses']))
                            <div class="empty">No analyses.</div>
                        @else
                            <ul class="an-list">
                                @foreach($activeVisit['analyses'] as $a)
                                    <li>
                                        <div class="an-title">{{ $a['name'] }}</div>
                                        @if(!empty($a['note'])) <div class="an-note">{{ $a['note'] }}</div> @endif
                                        @if(!empty($a['date'])) <div class="an-date">{{ $a['date'] }}</div> @endif
                                        @if(!empty($a['url']))
                                            <a class="btn-min" href="{{ $a['url'] }}" target="_blank" rel="noopener">Download</a>
                                        @endif
                                    </li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                @else
                    <div class="empty">Select a visit to view details.</div>
                @endif
            </div>
        </div>
    </div>



    {{-- Preview modal --}}
    <div wire:ignore.self class="modal fade" id="rx_preview" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content shadow rounded" style="max-height: 90vh; overflow-y: auto;">
                <div class="modal-header bg-light py-2">
                    <div class="fw-bold">{{ $preview_title ?? 'Prescription Preview' }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if($preview_url)
                        <div class="border rounded">
                            <iframe id="rxPreviewFrame" src="{{ $preview_url }}" style="width:100%; height:70vh; border:0;" loading="lazy"></iframe>
                        </div>
                    @else
                        <div class="text-muted">No preview available.</div>
                    @endif
                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>

                    @if($preview_url)
                        {{-- يطبع مباشرة من داخل الـiframe --}}
                        <button type="button" class="btn btn-primary" onclick="
            const f = document.getElementById('rxPreviewFrame');
            if (f && f.contentWindow) { f.contentWindow.focus(); f.contentWindow.print(); }
          ">
                            Print
                        </button>

                        {{-- يفتح في تبويب جديد (للـPreview أو طباعة من هناك) --}}
                        <a class="btn btn-outline-primary" href="{{ $preview_url }}" target="_blank" rel="noopener">
                            Open in new tab
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>



    {{-- Bill Preview modal --}}
    <div wire:ignore.self class="modal fade" id="bill_preview" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content shadow rounded" style="max-height: 90vh; overflow-y: auto;">
                <div class="modal-header bg-light py-2">
                    <div class="fw-bold">{{ $bill_title ?? 'Bill Preview' }}</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    @if($bill_url)
                        <div class="border rounded">
                            <iframe id="billPreviewFrame" src="{{ $bill_url }}" style="width:100%; height:70vh; border:0;" loading="lazy"></iframe>
                        </div>
                    @else
                        <div class="text-muted">No bill available.</div>
                    @endif
                </div>

                <div class="modal-footer py-2">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>

                    @if($bill_url)
                        <button type="button" class="btn btn-primary" onclick="
                        const f = document.getElementById('billPreviewFrame');
                        if (f && f.contentWindow) { f.contentWindow.focus(); f.contentWindow.print(); }
                    ">
                            Print
                        </button>
                        <a class="btn btn-outline-primary" href="{{ $bill_url }}" target="_blank" rel="noopener">
                            Open in new tab
                        </a>
                    @endif
                </div>
            </div>
        </div>
    </div>


</div>
@push('js')
    <script>
        window.addEventListener('open_modal', e => {
            if (e.detail === 'rx_preview') {
                const m = new bootstrap.Modal(document.getElementById('rx_preview'));
                m.show();
            }
        });


        window.addEventListener('open_modal', e => {
            if (e.detail === 'rx_preview') {
                new bootstrap.Modal(document.getElementById('rx_preview')).show();
            }
            if (e.detail === 'bill_preview') {
                new bootstrap.Modal(document.getElementById('bill_preview')).show();
            }
        });
    </script>
@endpush