<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center gap-3">
            <a href="{{ route('dokter.my-patients') }}"
               class="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-white/20 transition-colors"
               title="Kembali ke Daftar Pasien">
                <i class="fas fa-arrow-left text-white text-sm"></i>
            </a>
            <div>
                <h2 class="font-semibold text-lg text-white leading-tight">Detail Pasien</h2>
                <p class="text-teal-100 text-xs mt-0.5 opacity-85">{{ $pasien->nama_lengkap }}</p>
            </div>
        </div>
    </x-slot>

    @push('styles')
    <style>
        /* ═══════════════════════════════════════════
           BASE CARD
        ═══════════════════════════════════════════ */
        .dp-card {
            background: #fff;
            border: 1px solid #f1f5f9;
            border-radius: 1rem;
            box-shadow: 0 1px 4px rgba(0,0,0,.04);
            overflow: hidden;
        }
        .dark .dp-card {
            background: #1e293b;
            border-color: #334155;
        }

        /* ═══════════════════════════════════════════
           DATA GRID ITEMS
        ═══════════════════════════════════════════ */
        .data-item label {
            display: block;
            font-size: .72rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: .06em;
            color: #94a3b8;
            margin-bottom: .25rem;
        }
        .data-item .value {
            font-size: .9rem;
            font-weight: 600;
            color: #1e293b;
        }
        .dark .data-item .value { color: #e2e8f0; }

        /* ═══════════════════════════════════════════
           TABS
        ═══════════════════════════════════════════ */
        .tab-nav {
            display: flex;
            border-bottom: 1.5px solid #f1f5f9;
            padding: 0 1.25rem;
            overflow-x: auto;
            scrollbar-width: none;
            gap: .25rem;
        }
        .dark .tab-nav { border-bottom-color: #334155; }
        .tab-nav::-webkit-scrollbar { display: none; }

        .tab-btn {
            display: flex;
            align-items: center;
            gap: .5rem;
            padding: .875rem .875rem;
            font-size: .8125rem;
            font-weight: 600;
            white-space: nowrap;
            border-bottom: 2px solid transparent;
            margin-bottom: -1.5px;
            color: #94a3b8;
            cursor: pointer;
            transition: color .15s, border-color .15s;
            background: none;
            border-top: none;
            border-left: none;
            border-right: none;
            outline: none;
        }
        .tab-btn:hover { color: #0d9488; }
        .tab-btn.active {
            color: #14b8a6;
            border-bottom-color: #14b8a6;
        }
        .dark .tab-btn.active { color: #2dd4bf; border-bottom-color: #2dd4bf; }

        .tab-content { display: none; }
        .tab-content.active { display: block; }

        /* ═══════════════════════════════════════════
           PEMERIKSAAN LIST ITEMS
        ═══════════════════════════════════════════ */
        .check-item {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #f1f5f9;
            transition: background .15s;
        }
        .dark .check-item { border-bottom-color: #334155; }
        .check-item:last-child { border-bottom: none; }
        .check-item:hover { background: #f8fafc; }
        .dark .check-item:hover { background: rgba(20,184,166,.04); }

        /* ═══════════════════════════════════════════
           BADGES
        ═══════════════════════════════════════════ */
        .badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .2rem .65rem;
            border-radius: 99px;
            font-size: .72rem;
            font-weight: 700;
        }
        .badge-teal    { background: rgba(20,184,166,.12); color: #0d9488; }
        .badge-slate   { background: rgba(100,116,139,.1);  color: #475569; }
        .badge-orange  { background: rgba(249,115,22,.12);  color: #ea580c; }
        .badge-green   { background: rgba(34,197,94,.12);   color: #16a34a; }
        .badge-yellow  { background: rgba(234,179,8,.12);   color: #a16207; }
        .badge-red     { background: rgba(239,68,68,.12);   color: #dc2626; }
        .badge-purple  { background: rgba(168,85,247,.12);  color: #9333ea; }
        .badge-blue    { background: rgba(59,130,246,.12);  color: #2563eb; }
        .dark .badge-teal   { background: rgba(20,184,166,.2);  color: #2dd4bf; }
        .dark .badge-green  { background: rgba(34,197,94,.15);  color: #4ade80; }
        .dark .badge-yellow { background: rgba(234,179,8,.15);  color: #fbbf24; }
        .dark .badge-red    { background: rgba(239,68,68,.15);  color: #f87171; }
        .dark .badge-orange { background: rgba(249,115,22,.15); color: #fb923c; }
        .dark .badge-purple { background: rgba(168,85,247,.15); color: #c084fc; }
        .dark .badge-blue   { background: rgba(59,130,246,.15); color: #60a5fa; }
        .dark .badge-slate  { background: rgba(100,116,139,.15); color: #94a3b8; }

        /* ═══════════════════════════════════════════
           PENANGANAN CARD
        ═══════════════════════════════════════════ */
        .penan-item {
            padding: .875rem 1.25rem;
            border-radius: .75rem;
            border: 1.5px solid #f1f5f9;
            background: #fafbfc;
        }
        .dark .penan-item {
            background: rgba(255,255,255,.03);
            border-color: #334155;
        }

        /* ═══════════════════════════════════════════
           STAT BOX (Statistik tab)
        ═══════════════════════════════════════════ */
        .stat-box {
            border-radius: .875rem;
            padding: 1.5rem;
            text-align: center;
        }

        /* Alert box */
        .alert-box {
            border-radius: .75rem;
            padding: .75rem 1rem;
            font-size: .875rem;
        }
        .alert-yellow { background: rgba(234,179,8,.07); border: 1px solid rgba(234,179,8,.2); color: #92400e; }
        .alert-red    { background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15); color: #b91c1c; }
        .dark .alert-yellow { color: #fcd34d; }
        .dark .alert-red    { color: #fca5a5; }

        /* Section title inside card */
        .card-section-title {
            font-size: .68rem;
            font-weight: 700;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: #14b8a6;
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: 1rem;
        }
        .card-section-title::after {
            content: '';
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, rgba(20,184,166,.25), transparent);
        }

        /* Action button */
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .55rem 1.1rem;
            border-radius: .625rem;
            font-size: .8125rem;
            font-weight: 700;
            text-decoration: none;
            transition: opacity .15s, transform .1s, box-shadow .15s;
            cursor: pointer;
            border: none;
            outline: none;
        }
        .action-btn:active { transform: scale(.96); }
        .action-btn-primary {
            background: linear-gradient(135deg, #14b8a6, #0d9488);
            color: #fff;
            box-shadow: 0 4px 12px rgba(20,184,166,.25);
        }
        .action-btn-primary:hover { opacity: .9; box-shadow: 0 6px 18px rgba(20,184,166,.35); }
        .action-btn-outline {
            background: transparent;
            color: #64748b;
            border: 1.5px solid #e2e8f0;
        }
        .dark .action-btn-outline { color: #94a3b8; border-color: #475569; }
        .action-btn-outline:hover { border-color: #14b8a6; color: #0d9488; }

        /* Empty state */
        .empty-state {
            padding: 3rem 1rem;
            text-align: center;
        }

        /* Detail link */
        .detail-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .35rem .75rem;
            border-radius: .5rem;
            font-size: .75rem;
            font-weight: 600;
            background: rgba(20,184,166,.1);
            color: #0d9488;
            text-decoration: none;
            transition: background .15s;
        }
        .detail-link:hover { background: rgba(20,184,166,.2); }
        .dark .detail-link { color: #2dd4bf; }

        .review-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .35rem .75rem;
            border-radius: .5rem;
            font-size: .75rem;
            font-weight: 600;
            background: rgba(249,115,22,.1);
            color: #ea580c;
            text-decoration: none;
            transition: background .15s;
        }
        .review-link:hover { background: rgba(249,115,22,.2); }
        .dark .review-link { color: #fb923c; }

        @media (max-width: 640px) {
            .check-item { padding: .875rem 1rem; }
        }
    </style>
    @endpush

    <div class="py-6 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto space-y-5">

        {{-- ══ PROFILE HERO CARD ══ --}}
        <div class="dp-card">
            {{-- Top gradient banner --}}
            <div class="relative h-24 sm:h-28" style="background: linear-gradient(135deg,#0d9488,#0f766e);">
                <div class="absolute inset-0 opacity-10"
                     style="background-image: radial-gradient(circle at 70% 50%, #fff 0%, transparent 60%);"></div>
            </div>

            <div class="px-5 sm:px-7 pb-6">
                {{-- Avatar overlapping banner --}}
                <div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-4 -mt-8 sm:-mt-10 mb-5">
                    <div class="flex items-end gap-4 min-w-0 flex-1">
                        <div class="relative">
                            <img src="{{ $pasien->foto_profil ? Storage::url($pasien->foto_profil) : 'https://ui-avatars.com/api/?name='.urlencode($pasien->nama_lengkap).'&size=200&background=14b8a6&color=fff' }}"
                                 alt="{{ $pasien->nama_lengkap }}"
                                 class="w-20 h-20 sm:w-24 sm:h-24 rounded-2xl object-cover ring-4 ring-white dark:ring-slate-800 shadow-lg">
                            @if($pasien->wajah_terdaftar)
                            <span class="absolute -bottom-1 -right-1 w-6 h-6 rounded-full flex items-center justify-center"
                                  style="background:#3b82f6;" title="Wajah Terdaftar">
                                <i class="fas fa-face-smile text-white text-[10px]"></i>
                            </span>
                            @endif
                        </div>
                        <div class="pb-1">
                            <h3 class="text-xl sm:text-2xl font-bold text-slate-900 dark:text-white leading-tight break-words">
                                {{ $pasien->nama_lengkap }}
                            </h3>
                            <p class="text-slate-500 dark:text-slate-400 text-sm mt-0.5">
                                {{ $pasien->jenis_kelamin === 'L' ? 'Laki-laki' : 'Perempuan' }}
                                @if($pasien->tanggal_lahir)
                                    &bull; {{ \Carbon\Carbon::parse($pasien->tanggal_lahir)->age }} tahun
                                @elseif($pasien->usia && $pasien->usia > 0)
                                    &bull; {{ $pasien->usia }} tahun
                                @endif
                            </p>
                            <div class="flex flex-wrap gap-2 mt-2">
                                <span class="badge {{ $pasien->status_pasien === 'AKTIF' ? 'badge-teal' : 'badge-slate' }}">
                                    {{ $pasien->status_pasien }}
                                </span>
                                @if($penanganan)
                                <span class="badge {{ $penanganan->status_penanganan === 'AKTIF' ? 'badge-blue' : ($penanganan->status_penanganan === 'SELESAI' ? 'badge-slate' : 'badge-orange') }}">
                                    {{ $penanganan->status_penanganan }}
                                </span>
                                @endif
                                @if($pasien->wajah_terdaftar)
                                <span class="badge badge-blue">
                                    <i class="fas fa-face-smile text-[10px]"></i> Wajah Terdaftar
                                </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    {{-- Action button --}}
                    <a href="{{ route('dokter.pasien.update-penanganan', $pasien->id) }}"
                       class="action-btn action-btn-primary self-start sm:self-auto">
                        <i class="fas fa-pen-to-square"></i>
                        Update Penanganan
                    </a>
                </div>

                {{-- Data diri grid --}}
                <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                    <div class="data-item">
                        <label>No. Rekam Medis</label>
                        <span class="value font-mono text-sm">{{ $pasien->no_rekam_medis }}</span>
                    </div>
                    <div class="data-item">
                        <label>NIK</label>
                        <span class="value font-mono text-sm">{{ $pasien->nik ?? '-' }}</span>
                    </div>
                    <div class="data-item">
                        <label>Tanggal Lahir</label>
                        <span class="value">{{ $pasien->tanggal_lahir->format('d M Y') }}</span>
                    </div>
                    <div class="data-item">
                        <label>Gol. Darah</label>
                        <span class="value">{{ $pasien->golongan_darah }}</span>
                    </div>
                    <div class="data-item">
                        <label>No. Telepon</label>
                        <span class="value">{{ $pasien->no_telepon ?? '-' }}</span>
                    </div>
                    <div class="data-item">
                        <label>WhatsApp</label>
                        <span class="value">{{ $pasien->no_wa ?? '-' }}</span>
                    </div>
                </div>

                {{-- Medical alerts --}}
                @if($pasien->riwayat_penyakit || $pasien->alergi)
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                    @if($pasien->riwayat_penyakit)
                    <div class="alert-box alert-yellow">
                        <p class="font-semibold text-xs uppercase tracking-wide mb-1">
                            <i class="fas fa-clock-rotate-left mr-1"></i> Riwayat Penyakit
                        </p>
                        <p>{{ $pasien->riwayat_penyakit }}</p>
                    </div>
                    @endif
                    @if($pasien->alergi)
                    <div class="alert-box alert-red">
                        <p class="font-semibold text-xs uppercase tracking-wide mb-1">
                            <i class="fas fa-triangle-exclamation mr-1"></i> Alergi
                        </p>
                        <p>{{ $pasien->alergi }}</p>
                    </div>
                    @endif
                </div>
                @endif
            </div>
        </div>

        {{-- ══ STATUS PENANGANAN ══ --}}
        @if($penanganan)
        <div class="dp-card">
            <div class="px-5 sm:px-7 py-5">
                <p class="card-section-title"><i class="fas fa-stethoscope"></i> Status Penanganan</p>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">

                    <div class="penan-item">
                        <p class="text-xs text-slate-400 mb-1">Diagnosis Utama</p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ $penanganan->diagnosis_utama }}</p>
                    </div>

                    <div class="penan-item">
                        <p class="text-xs text-slate-400 mb-1">Mulai Menangani</p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">
                            {{ \Carbon\Carbon::parse($penanganan->tanggal_mulai_menangani)->format('d M Y') }}
                        </p>
                    </div>

                    <div class="penan-item">
                        <p class="text-xs text-slate-400 mb-1">Jumlah Kunjungan</p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ $penanganan->jumlah_kunjungan }}x</p>
                    </div>

                    @if($penanganan->tanggal_kontrol_berikutnya)
                    <div class="penan-item" style="border-color: rgba(249,115,22,.3); background: rgba(249,115,22,.04);">
                        <p class="text-xs text-slate-400 mb-1"><i class="fas fa-calendar-check mr-1 text-orange-400"></i> Kontrol Berikutnya</p>
                        <p class="font-semibold text-orange-600 dark:text-orange-400 text-sm">
                            {{ \Carbon\Carbon::parse($penanganan->tanggal_kontrol_berikutnya)->format('d M Y') }}
                        </p>
                    </div>
                    @endif

                    @if($penanganan->rencana_perawatan)
                    <div class="penan-item sm:col-span-2">
                        <p class="text-xs text-slate-400 mb-1">Rencana Perawatan</p>
                        <p class="font-semibold text-slate-800 dark:text-slate-100 text-sm">{{ $penanganan->rencana_perawatan }}</p>
                    </div>
                    @endif

                </div>

                @if($penanganan->catatan ?? $penanganan->catatan_dokter ?? false)
                <div class="mt-4 pt-4 border-t border-slate-100 dark:border-slate-700">
                    <p class="text-xs text-slate-400 mb-2">Catatan Dokter</p>
                    <div class="rounded-xl p-3.5 text-sm text-slate-700 dark:text-slate-300"
                         style="background: rgba(20,184,166,.05); border: 1px solid rgba(20,184,166,.15);">
                        {{ $penanganan->catatan ?? $penanganan->catatan_dokter }}
                    </div>
                </div>
                @endif
            </div>
        </div>
        @endif

        {{-- ══ TABS ══ --}}
        <div class="dp-card">
            {{-- Tab nav --}}
            <div class="tab-nav">
                <button class="tab-btn active" onclick="switchTab('pemeriksaan', this)" id="tab-pemeriksaan">
                    <i class="fas fa-thermometer-half text-[11px]"></i>
                    Riwayat Pemeriksaan
                    @if($riwayat_pemeriksaan->count())
                        <span class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold"
                              style="background:rgba(20,184,166,.15); color:#0d9488;">
                            {{ $riwayat_pemeriksaan->count() }}
                        </span>
                    @endif
                </button>
                <button class="tab-btn" onclick="switchTab('analisis', this)" id="tab-analisis">
                    <i class="fas fa-brain text-[11px]"></i>
                    Analisis AI
                    @if($analisis_ai->count())
                        <span class="inline-flex items-center justify-center w-4 h-4 rounded-full text-[10px] font-bold"
                              style="background:rgba(168,85,247,.12); color:#9333ea;">
                            {{ $analisis_ai->count() }}
                        </span>
                    @endif
                </button>
                <button class="tab-btn" onclick="switchTab('statistik', this)" id="tab-statistik">
                    <i class="fas fa-chart-bar text-[11px]"></i>
                    Statistik
                </button>
            </div>

            {{-- Tab: Pemeriksaan --}}
            <div id="content-pemeriksaan" class="tab-content active">
                @forelse($riwayat_pemeriksaan as $pemeriksaan)
                    @php
                        $suhuClass = match($pemeriksaan->kategori_suhu ?? '') {
                            'NORMAL'       => 'badge-green',
                            'SUBFEBRIS'    => 'badge-yellow',
                            'DEMAM_RINGAN' => 'badge-orange',
                            'DEMAM_SEDANG' => 'badge-red',
                            'DEMAM_TINGGI' => 'badge-red',
                            default        => 'badge-slate',
                        };
                    @endphp
                    <div class="check-item">
                        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                            <div class="flex-1 min-w-0">
                                {{-- Top line --}}
                                <div class="flex flex-wrap items-center gap-2 mb-1.5">
                                    <span class="font-semibold text-slate-700 dark:text-slate-200 text-sm font-mono">
                                        {{ $pemeriksaan->kode_pemeriksaan }}
                                    </span>
                                    <span class="badge {{ $suhuClass }}">
                                        <i class="fas fa-thermometer-half text-[9px]"></i>
                                        {{ $pemeriksaan->suhu_tubuh }}°C — {{ str_replace('_', ' ', $pemeriksaan->kategori_suhu) }}
                                    </span>
                                    <span class="text-xs text-slate-400">
                                        <i class="fas fa-clock text-[9px] mr-1"></i>
                                        {{ $pemeriksaan->waktu_pemeriksaan->format('d M Y, H:i') }}
                                    </span>
                                </div>

                                @if($pemeriksaan->keluhan_utama)
                                <p class="text-sm text-slate-500 dark:text-slate-400 mb-1">
                                    <span class="font-medium text-slate-600 dark:text-slate-300">Keluhan:</span>
                                    {{ $pemeriksaan->keluhan_utama }}
                                </p>
                                @endif

                                @if($pemeriksaan->diagnosis_dokter)
                                <p class="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-1">
                                    <i class="fas fa-stethoscope text-[10px] mr-1 text-teal-500"></i>
                                    {{ $pemeriksaan->diagnosis_dokter }}
                                </p>
                                @endif

                                @if($pemeriksaan->catatan_dokter)
                                <p class="text-sm text-slate-500 dark:text-slate-400">{{ $pemeriksaan->catatan_dokter }}</p>
                                @endif
                            </div>

                            <div class="flex-shrink-0">
                                <a href="{{ route('dokter.pemeriksaan.show', $pemeriksaan->id) }}"
                                   class="detail-link">
                                    <i class="fas fa-eye text-[10px]"></i> Detail
                                </a>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="empty-state">
                        <div class="w-14 h-14 rounded-2xl mx-auto flex items-center justify-center mb-3"
                             style="background: rgba(20,184,166,.08);">
                            <i class="fas fa-clipboard-list text-xl" style="color:#14b8a6;"></i>
                        </div>
                        <p class="font-semibold text-slate-600 dark:text-slate-300">Belum ada riwayat pemeriksaan</p>
                    </div>
                @endforelse

                @if($riwayat_pemeriksaan->hasPages())
                <div class="px-5 py-4 border-t border-slate-100 dark:border-slate-700">
                    {{ $riwayat_pemeriksaan->links() }}
                </div>
                @endif
            </div>

            {{-- Tab: Analisis AI --}}
            <div id="content-analisis" class="tab-content">
                @forelse($analisis_ai as $analisis)
                    <div class="check-item">
                        <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                            <div class="flex-1 min-w-0">
                                <div class="flex flex-wrap items-center gap-2 mb-2">
                                    <span class="text-xs text-slate-400">
                                        <i class="fas fa-clock text-[9px] mr-1"></i>
                                        {{ $analisis->waktu_analisis->format('d M Y, H:i') }}
                                    </span>
                                    <span class="badge badge-purple">
                                        <i class="fas fa-brain text-[9px]"></i>
                                        {{ $analisis->tingkat_keparahan_ai }}
                                    </span>
                                    <span class="badge badge-blue">
                                        {{ $analisis->rekomendasi_ai }}
                                    </span>
                                </div>
                                <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">
                                    {{ Str::limit($analisis->penjelasan_kondisi, 200) }}
                                </p>
                            </div>

                            <div class="flex-shrink-0">
                                @if(!$analisis->ditinjau_dokter)
                                    <a href="{{ route('dokter.analisis-ai.show', $analisis->id) }}"
                                       class="review-link">
                                        <i class="fas fa-magnifying-glass text-[10px]"></i> Review
                                    </a>
                                @else
                                    <span class="badge badge-green">
                                        <i class="fas fa-check text-[9px]"></i> Sudah Direview
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="empty-state">
                        <div class="w-14 h-14 rounded-2xl mx-auto flex items-center justify-center mb-3"
                             style="background: rgba(168,85,247,.08);">
                            <i class="fas fa-brain text-xl" style="color:#a855f7;"></i>
                        </div>
                        <p class="font-semibold text-slate-600 dark:text-slate-300">Belum ada analisis AI</p>
                    </div>
                @endforelse
            </div>

            {{-- Tab: Statistik --}}
            <div id="content-statistik" class="tab-content">
                <div class="p-5 sm:p-7">
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                        <div class="stat-box" style="background: linear-gradient(135deg,rgba(59,130,246,.08),rgba(37,99,235,.06)); border: 1px solid rgba(59,130,246,.15);">
                            <i class="fas fa-clipboard-list text-2xl text-blue-400 mb-3"></i>
                            <p class="text-3xl font-extrabold text-blue-700 dark:text-blue-300">{{ $stats['total_pemeriksaan'] ?? 0 }}</p>
                            <p class="text-sm font-semibold text-blue-500 mt-1">Total Pemeriksaan</p>
                        </div>

                        <div class="stat-box" style="background: linear-gradient(135deg,rgba(239,68,68,.08),rgba(220,38,38,.06)); border: 1px solid rgba(239,68,68,.15);">
                            <i class="fas fa-temperature-high text-2xl text-red-400 mb-3"></i>
                            <p class="text-3xl font-extrabold text-red-700 dark:text-red-300">{{ $stats['total_demam'] ?? 0 }}</p>
                            <p class="text-sm font-semibold text-red-500 mt-1">Kasus Demam</p>
                        </div>

                        <div class="stat-box" style="background: linear-gradient(135deg,rgba(20,184,166,.08),rgba(13,148,136,.06)); border: 1px solid rgba(20,184,166,.15);">
                            <i class="fas fa-heart-pulse text-2xl text-teal-400 mb-3"></i>
                            <p class="text-3xl font-extrabold text-teal-700 dark:text-teal-300">{{ $stats['total_normal'] ?? 0 }}</p>
                            <p class="text-sm font-semibold text-teal-500 mt-1">Suhu Normal</p>
                        </div>

                    </div>
                </div>
            </div>

        </div>

    </div>{{-- end page --}}

    @push('scripts')
    <script>
        function switchTab(tab, btn) {
            // Hide all
            document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
            document.querySelectorAll('.tab-btn').forEach(el => el.classList.remove('active'));

            // Show selected
            document.getElementById('content-' + tab).classList.add('active');
            if (btn) btn.classList.add('active');
        }
    </script>
    @endpush

</x-app-layout>