<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            {{-- Kiri: Back + Judul --}}
            <div class="flex items-center gap-3 min-w-0">
                <a href="{{ route('petugas.pasien.index') }}"
                   class="flex-shrink-0 inline-flex items-center justify-center w-8 h-8 rounded-lg bg-white/20 hover:bg-white/30 text-white transition">
                    <i class="fas fa-arrow-left text-sm"></i>
                </a>
                <div class="min-w-0">
                    <h2 class="font-bold text-base sm:text-lg text-white leading-tight truncate">
                        {{ $pasien->nama_lengkap }}
                    </h2>
                    <p class="text-teal-100 text-xs">No. RM: {{ $pasien->no_rekam_medis }}</p>
                </div>
            </div>

            {{-- Kanan: Action Buttons --}}
            <div class="flex items-center gap-2 flex-shrink-0">
                <a href="{{ route('petugas.pasien.edit', $pasien->id) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-white/15 hover:bg-white/25 border border-white/30 text-white text-xs sm:text-sm font-medium rounded-lg transition duration-150">
                    <i class="fas fa-edit text-xs"></i>
                    <span class="hidden sm:inline">Edit</span>
                </a>
                <a href="{{ route('petugas.pasien.assign', $pasien->id) }}"
                   class="inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-white/15 hover:bg-white/25 border border-white/30 text-white text-xs sm:text-sm font-medium rounded-lg transition duration-150">
                    <i class="fas fa-user-md text-xs"></i>
                    <span class="hidden sm:inline">Assign Dokter</span>
                </a>
                <button onclick="confirmDelete()"
                        class="inline-flex items-center gap-1.5 px-3 py-1.5 sm:px-4 sm:py-2 bg-red-500/80 hover:bg-red-500 border border-red-400/50 text-white text-xs sm:text-sm font-medium rounded-lg transition duration-150">
                    <i class="fas fa-trash text-xs"></i>
                    <span class="hidden sm:inline">Hapus</span>
                </button>
            </div>
        </div>
    </x-slot>

    <div class="py-6 px-4 sm:px-0">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">

                {{-- ============================================
                     KOLOM KIRI (2/3): Info Pasien
                ============================================= --}}
                <div class="lg:col-span-2 space-y-5">

                    {{-- Card: Informasi Dasar --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-teal-500 to-teal-400"></div>
                        <div class="p-5 sm:p-6">
                            <div class="flex flex-col sm:flex-row gap-5">
                                {{-- Foto --}}
                                <div class="flex-shrink-0 flex sm:block justify-center">
                                    @if($pasien->foto_profil)
                                        <img src="{{ asset('storage/' . $pasien->foto_profil) }}"
                                             alt="Foto Profil"
                                             class="w-24 h-24 sm:w-28 sm:h-28 object-cover rounded-xl border-2 border-teal-400">
                                    @else
                                        <div class="w-24 h-24 sm:w-28 sm:h-28 bg-gradient-to-br from-teal-100 to-teal-200 dark:from-teal-900/40 dark:to-teal-800/40 rounded-xl flex items-center justify-center border-2 border-teal-200 dark:border-teal-700">
                                            <i class="fas fa-user text-3xl text-teal-400 dark:text-teal-500"></i>
                                        </div>
                                    @endif
                                </div>

                                {{-- Info --}}
                                <div class="flex-1 min-w-0">
                                    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2">
                                        <div>
                                            <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ $pasien->nama_lengkap }}</h3>
                                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">No. RM: {{ $pasien->no_rekam_medis }}</p>
                                            <div class="flex flex-wrap gap-2 mt-2">
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                    {{ $pasien->status_pasien == 'AKTIF'
                                                        ? 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300'
                                                        : 'bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300' }}">
                                                    <span class="w-1.5 h-1.5 rounded-full mr-1.5 {{ $pasien->status_pasien == 'AKTIF' ? 'bg-green-500' : 'bg-red-500' }}"></span>
                                                    {{ $pasien->status_pasien }}
                                                </span>
                                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                                    {{ $pasien->wajah_terdaftar
                                                        ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300'
                                                        : 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300' }}">
                                                    <i class="fas fa-{{ $pasien->wajah_terdaftar ? 'check-circle' : 'exclamation-circle' }} mr-1 text-xs"></i>
                                                    {{ $pasien->wajah_terdaftar ? 'Wajah Terdaftar' : 'Belum Daftar Wajah' }}
                                                </span>
                                            </div>
                                        </div>
                                        <div class="text-left sm:text-right flex-shrink-0">
                                            <p class="text-xs text-gray-400 dark:text-gray-500">Terdaftar sejak</p>
                                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ $pasien->tanggal_registrasi->format('d/m/Y') }}</p>
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-2 gap-3 mt-4">
                                        <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3">
                                            <p class="text-xs text-gray-400 dark:text-gray-500">NIK</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mt-0.5">{{ $pasien->nik ?: '-' }}</p>
                                        </div>
                                        <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3">
                                            <p class="text-xs text-gray-400 dark:text-gray-500">Tanggal Lahir</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mt-0.5">
                                                {{ $pasien->tanggal_lahir->format('d/m/Y') }}
                                                @php
                                                    $tglLahir = \Carbon\Carbon::parse($pasien->tanggal_lahir);
                                                    $usiaHitung = $tglLahir->isPast() ? $tglLahir->age : 0;
                                                @endphp
                                                <span class="text-gray-400 dark:text-gray-500">({{ $usiaHitung }} thn)</span>
                                            </p>
                                        </div>
                                        <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3">
                                            <p class="text-xs text-gray-400 dark:text-gray-500">Jenis Kelamin</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mt-0.5">{{ $pasien->jenis_kelamin == 'L' ? 'Laki-laki' : 'Perempuan' }}</p>
                                        </div>
                                        <div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3">
                                            <p class="text-xs text-gray-400 dark:text-gray-500">Golongan Darah</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200 mt-0.5">{{ $pasien->golongan_darah ?: '-' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card: Kontak & Alamat --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-blue-500 to-blue-400"></div>
                        <div class="p-5 sm:p-6">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                                <i class="fas fa-address-card text-blue-500"></i> Kontak & Alamat
                            </h3>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                                <div class="space-y-3">
                                    @foreach([['Telepon', $pasien->no_telepon, 'fa-phone', 'fas'], ['WhatsApp', $pasien->no_wa, 'fa-whatsapp', 'fab'], ['Email', $pasien->email, 'fa-envelope', 'fas']] as [$label, $val, $icon, $prefix])
                                    <div class="flex items-center gap-3">
                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-center justify-center">
                                            <i class="{{ $prefix }} {{ $icon }} text-blue-500 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-xs text-gray-400 dark:text-gray-500">{{ $label }}</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ $val ?: '-' }}</p>
                                        </div>
                                    </div>
                                    @endforeach
                                </div>
                                <div>
                                    <div class="flex items-start gap-3 mb-3">
                                        <div class="flex-shrink-0 w-8 h-8 bg-blue-50 dark:bg-blue-900/20 rounded-lg flex items-center justify-center mt-0.5">
                                            <i class="fas fa-map-marker-alt text-blue-500 text-sm"></i>
                                        </div>
                                        <div>
                                            <p class="text-xs text-gray-400 dark:text-gray-500">Alamat Lengkap</p>
                                            <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ $pasien->alamat_lengkap ?: '-' }}</p>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-2 gap-2 pl-11">
                                        @foreach([
                                            ['Kelurahan', optional($pasien->village)->name ?? $pasien->kelurahan ?? '-'],
                                            ['Kecamatan', optional($pasien->district)->name ?? $pasien->kecamatan ?? '-'],
                                            ['Kota', optional($pasien->regency)->name ?? $pasien->kota ?? '-'],
                                            ['Provinsi', optional($pasien->province)->name ?? $pasien->provinsi ?? '-'],
                                        ] as [$label, $val])
                                        <div>
                                            <p class="text-xs text-gray-400 dark:text-gray-500">{{ $label }}</p>
                                            <p class="text-sm text-gray-700 dark:text-gray-300">{{ $val }}</p>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card: Data Kesehatan --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-purple-500 to-purple-400"></div>
                        <div class="p-5 sm:p-6">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                                <i class="fas fa-heartbeat text-purple-500"></i> Data Kesehatan
                            </h3>
                            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
                                <div class="text-center p-3 bg-purple-50 dark:bg-purple-900/20 rounded-xl border border-purple-100 dark:border-purple-800/30">
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">Tinggi</p>
                                    <p class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ $pasien->tinggi_badan ?? '-' }}</p>
                                    @if($pasien->tinggi_badan)<p class="text-xs text-gray-400">cm</p>@endif
                                </div>
                                <div class="text-center p-3 bg-purple-50 dark:bg-purple-900/20 rounded-xl border border-purple-100 dark:border-purple-800/30">
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">Berat</p>
                                    <p class="text-xl font-bold text-gray-800 dark:text-gray-100">{{ $pasien->berat_badan ?? '-' }}</p>
                                    @if($pasien->berat_badan)<p class="text-xs text-gray-400">kg</p>@endif
                                </div>
                                <div class="text-center p-3 rounded-xl border {{ $pasien->riwayat_penyakit ? 'bg-red-50 dark:bg-red-900/20 border-red-100 dark:border-red-800/30' : 'bg-green-50 dark:bg-green-900/20 border-green-100 dark:border-green-800/30' }}">
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">Riwayat</p>
                                    <p class="text-sm font-bold {{ $pasien->riwayat_penyakit ? 'text-red-600 dark:text-red-400' : 'text-green-600 dark:text-green-400' }}">
                                        {{ $pasien->riwayat_penyakit ? 'Ada' : 'Tidak Ada' }}
                                    </p>
                                </div>
                                <div class="text-center p-3 rounded-xl border {{ $pasien->alergi ? 'bg-orange-50 dark:bg-orange-900/20 border-orange-100 dark:border-orange-800/30' : 'bg-green-50 dark:bg-green-900/20 border-green-100 dark:border-green-800/30' }}">
                                    <p class="text-xs text-gray-400 dark:text-gray-500 mb-1">Alergi</p>
                                    <p class="text-sm font-bold {{ $pasien->alergi ? 'text-orange-600 dark:text-orange-400' : 'text-green-600 dark:text-green-400' }}">
                                        {{ $pasien->alergi ? 'Ada' : 'Tidak Ada' }}
                                    </p>
                                </div>
                            </div>

                            @if($pasien->riwayat_penyakit)
                            <div class="mt-4 p-3 bg-red-50 dark:bg-red-900/10 rounded-lg border border-red-100 dark:border-red-800/30">
                                <p class="text-xs font-semibold text-red-600 dark:text-red-400 mb-1">
                                    <i class="fas fa-notes-medical mr-1"></i> Detail Riwayat Penyakit
                                </p>
                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ $pasien->riwayat_penyakit }}</p>
                            </div>
                            @endif

                            @if($pasien->alergi)
                            <div class="mt-3 p-3 bg-orange-50 dark:bg-orange-900/10 rounded-lg border border-orange-100 dark:border-orange-800/30">
                                <p class="text-xs font-semibold text-orange-600 dark:text-orange-400 mb-1">
                                    <i class="fas fa-allergies mr-1"></i> Detail Alergi
                                </p>
                                <p class="text-sm text-gray-700 dark:text-gray-300">{{ $pasien->alergi }}</p>
                            </div>
                            @endif
                        </div>
                    </div>

                </div>

                {{-- ============================================
                     KOLOM KANAN (1/3): Statistik & Aksi
                ============================================= --}}
                <div class="space-y-5">

                    {{-- Card: Statistik --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-teal-500 to-teal-400"></div>
                        <div class="p-5">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                                <i class="fas fa-chart-bar text-teal-500"></i> Statistik
                            </h3>
                            <div class="space-y-2">
                                <div class="flex justify-between items-center p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Total Pemeriksaan</span>
                                    <span class="text-sm font-bold text-gray-800 dark:text-gray-100 bg-gray-200 dark:bg-slate-600 px-2.5 py-0.5 rounded-full">{{ $stats['total_pemeriksaan'] }}</span>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-red-50 dark:bg-red-900/10 rounded-lg">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Total Demam</span>
                                    <span class="text-sm font-bold text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 px-2.5 py-0.5 rounded-full">{{ $stats['total_demam'] }}</span>
                                </div>
                                <div class="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/10 rounded-lg">
                                    <span class="text-sm text-gray-600 dark:text-gray-400">Bulan Ini</span>
                                    <span class="text-sm font-bold text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/30 px-2.5 py-0.5 rounded-full">{{ $stats['pemeriksaan_bulan_ini'] }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card: Dokter Penanggung Jawab --}}
                    @if($pasien->dokterAktif && count($pasien->dokterAktif) > 0)
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-indigo-500 to-indigo-400"></div>
                        <div class="p-5">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                                <i class="fas fa-user-md text-indigo-500"></i> Dokter Penanggung Jawab
                            </h3>
                            <div class="space-y-2">
                                @foreach($pasien->dokterAktif as $dokter)
                                <div class="flex items-center gap-3 p-3 bg-gray-50 dark:bg-slate-700/50 rounded-lg">
                                    @if($dokter->foto_profil)
                                        <img src="{{ asset('storage/' . $dokter->foto_profil) }}"
                                             alt="Foto Dokter"
                                             class="w-10 h-10 rounded-full object-cover flex-shrink-0">
                                    @else
                                        <div class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900/30 rounded-full flex items-center justify-center flex-shrink-0">
                                            <i class="fas fa-user-md text-indigo-500"></i>
                                        </div>
                                    @endif
                                    <div class="min-w-0">
                                        <p class="text-sm font-medium text-gray-800 dark:text-gray-200 truncate">{{ $dokter->nama_lengkap }}</p>
                                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ $dokter->spesialisasi }}</p>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif

                    {{-- Card: Aksi Cepat --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-teal-500 to-teal-400"></div>
                        <div class="p-5">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-4 flex items-center gap-2">
                                <i class="fas fa-bolt text-teal-500"></i> Aksi Cepat
                            </h3>
                            <div class="space-y-2">

                                {{-- Pemeriksaan Baru --}}
                                <a href="{{ route('petugas.pemeriksaan.manual.create', ['pasien_id' => $pasien->id]) }}"
                                   class="group flex items-center gap-3 w-full px-4 py-2.5 bg-teal-500 hover:bg-teal-600 active:bg-teal-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-stethoscope text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Pemeriksaan Baru</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </a>

                                {{-- Lihat Riwayat --}}
                                <a href="{{ route('petugas.pasien.riwayat', $pasien->id) }}"
                                   class="group flex items-center gap-3 w-full px-4 py-2.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-history text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Lihat Riwayat</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </a>

                                {{-- Edit Pasien --}}
                                <a href="{{ route('petugas.pasien.edit', $pasien->id) }}"
                                   class="group flex items-center gap-3 w-full px-4 py-2.5 bg-amber-500 hover:bg-amber-600 active:bg-amber-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-edit text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Edit Data Pasien</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </a>

                                {{-- Assign Dokter --}}
                                <a href="{{ route('petugas.pasien.assign', $pasien->id) }}"
                                   class="group flex items-center gap-3 w-full px-4 py-2.5 bg-indigo-500 hover:bg-indigo-600 active:bg-indigo-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-user-md text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Assign Dokter</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </a>

                                {{-- Daftar Wajah (kondisional) --}}
                                @if(!$pasien->wajah_terdaftar)
                                <a href="{{ route('petugas.pasien.register-face', $pasien->id) }}"
                                   class="group flex items-center gap-3 w-full px-4 py-2.5 bg-orange-500 hover:bg-orange-600 active:bg-orange-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-user-plus text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Daftar Wajah</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </a>
                                @endif

                                {{-- Divider --}}
                                <div class="border-t border-gray-100 dark:border-slate-700 my-1"></div>

                                {{-- Hapus Pasien --}}
                                <button onclick="confirmDelete()"
                                        class="group flex items-center gap-3 w-full px-4 py-2.5 bg-red-500 hover:bg-red-600 active:bg-red-700 text-white rounded-lg transition duration-150 shadow-sm">
                                    <div class="w-7 h-7 bg-white/20 rounded-md flex items-center justify-center flex-shrink-0">
                                        <i class="fas fa-trash text-xs"></i>
                                    </div>
                                    <span class="text-sm font-medium flex-1">Hapus Pasien</span>
                                    <i class="fas fa-chevron-right text-white/50 text-xs group-hover:translate-x-0.5 transition-transform"></i>
                                </button>

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

                    {{-- Card: Catatan Khusus --}}
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-100 dark:border-slate-700 overflow-hidden">
                        <div class="h-1 bg-gradient-to-r from-gray-300 to-gray-200 dark:from-slate-600 dark:to-slate-500"></div>
                        <div class="p-5">
                            <h3 class="text-base font-semibold text-gray-800 dark:text-gray-100 mb-3 flex items-center gap-2">
                                <i class="fas fa-sticky-note text-gray-400 dark:text-slate-500"></i> Catatan Khusus
                            </h3>
                            @if($pasien->catatan_khusus)
                                <p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">{{ $pasien->catatan_khusus }}</p>
                            @else
                                <p class="text-sm text-gray-400 dark:text-gray-500 italic">Tidak ada catatan khusus.</p>
                            @endif
                        </div>
                    </div>

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

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        function confirmDelete() {
            Swal.fire({
                title: 'Hapus Pasien?',
                html: `Anda akan menghapus pasien <strong>{{ $pasien->nama_lengkap }}</strong><br><span class="text-sm text-red-600">*Data yang dihapus tidak dapat dikembalikan</span>`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#ef4444',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
            }).then((result) => {
                if (result.isConfirmed) {
                    fetch(`{{ route('petugas.pasien.destroy', $pasien->id) }}`, {
                        method: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        }
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                title: 'Berhasil!',
                                text: data.message,
                                icon: 'success',
                                confirmButtonColor: '#14b8a6',
                                timer: 2000,
                                timerProgressBar: true,
                                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                            }).then(() => {
                                window.location.href = '{{ route('petugas.pasien.index') }}';
                            });
                        } else {
                            Swal.fire({
                                title: 'Gagal!',
                                text: data.message,
                                icon: 'error',
                                confirmButtonColor: '#14b8a6',
                                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                            });
                        }
                    });
                }
            });
        }
    </script>
    @endpush
</x-app-layout>