{{-- resources/views/pasien/riwayat-penghapusan/show.blade.php --}}
<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
            <div>
                <h2 class="font-semibold text-xl md:text-2xl text-white leading-tight">
                    {{ __('Detail Riwayat Penghapusan') }}
                </h2>
                <p class="text-teal-100 text-sm mt-1">Data snapshot pasien yang dihapus</p>
            </div>
            <a href="{{ route('pasien.riwayat-penghapusan.index') }}" 
               class="inline-flex items-center px-4 py-2 bg-white text-teal-600 border border-transparent rounded-lg font-semibold text-xs uppercase tracking-widest hover:bg-teal-50 transition">
                <i class="fas fa-chevron-left mr-2"></i> Kembali
            </a>
        </div>
    </x-slot>

    <div class="py-6 md:py-8">
        <div class="max-w-5xl mx-auto px-3 sm:px-4 lg:px-6">
            
            <!-- Status Alert -->
            <div class="mb-6 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
                <div class="bg-gradient-to-r {{ $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN' ? 'from-yellow-50 to-yellow-100 dark:from-yellow-900/20 dark:to-yellow-900/10' : ($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE' ? 'from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-900/10' : 'from-red-50 to-red-100 dark:from-red-900/20 dark:to-red-900/10') }} p-4">
                    <div class="flex items-center justify-between flex-wrap gap-4">
                        <div class="flex items-center">
                            <i class="fas {{ $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN' ? 'fa-clock' : ($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE' ? 'fa-check-circle' : 'fa-lock') }} text-2xl mr-4 {{ $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN' ? 'text-yellow-600 dark:text-yellow-400' : ($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400') }}"></i>
                            <div>
                                <p class="text-sm font-medium {{ $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN' ? 'text-yellow-900 dark:text-yellow-200' : ($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE' ? 'text-green-900 dark:text-green-200' : 'text-red-900 dark:text-red-200') }}">
                                    {{ str_replace('_', ' ', $riwayat->status_pemulihan) }}
                                </p>
                                <p class="text-xs {{ $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN' ? 'text-yellow-700 dark:text-yellow-300' : ($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE' ? 'text-green-700 dark:text-green-300' : 'text-red-700 dark:text-red-300') }}">
                                    @if($riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN')
                                        Data pasien masih dapat di-restore ke status aktif
                                    @elseif($riwayat->status_pemulihan === 'SUDAH_DI_RESTORE')
                                        Data pasien telah di-restore pada {{ $riwayat->waktu_restore->format('d/m/Y H:i') }}
                                    @else
                                        Data pasien telah dihapus secara permanen
                                    @endif
                                </p>
                            </div>
                        </div>
                        <div class="flex gap-2 w-full sm:w-auto">
                            @if($riwayat->canRestore())
                                <button onclick="confirmRestore({{ $riwayat->id }}, '{{ addslashes($riwayat->nama_pasien) }}')" 
                                        class="flex-1 sm:flex-0 px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg font-medium text-sm transition">
                                    <i class="fas fa-undo mr-2"></i> Restore
                                </button>
                            @endif
                            @if($riwayat->tipe_penghapusan === 'SOFT_DELETE' && $riwayat->status_pemulihan === 'DAPAT_DIPULIHKAN')
                                <button onclick="confirmHardDelete({{ $riwayat->id }}, '{{ addslashes($riwayat->nama_pasien) }}')" 
                                        class="flex-1 sm:flex-0 px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg font-medium text-sm transition">
                                    <i class="fas fa-trash-alt mr-2"></i> Hapus Permanen
                                </button>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
                
                <!-- Main Info Card -->
                <div class="lg:col-span-2 bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
                    <div class="bg-gradient-to-r from-teal-50 to-teal-100 dark:from-teal-900/20 dark:to-teal-900/10 p-4 sm:p-6 border-b border-gray-200 dark:border-slate-700">
                        <h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white flex items-center">
                            <i class="fas fa-user-circle mr-3 text-teal-600"></i>
                            {{ $riwayat->nama_pasien }}
                        </h3>
                    </div>

                    <div class="p-4 sm:p-6">
                        
                        <!-- Data Pasien -->
                        <div class="mb-6">
                            <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
                                <i class="fas fa-id-card mr-2 text-teal-500"></i>
                                Informasi Dasar
                            </h4>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                                <div class="bg-gray-50 dark:bg-slate-700 p-3 rounded-lg">
                                    <p class="text-xs text-gray-600 dark:text-gray-400 font-medium">No. Rekam Medis</p>
                                    <p class="text-sm font-mono font-bold text-gray-900 dark:text-white">{{ $riwayat->no_rekam_medis }}</p>
                                </div>
                                <div class="bg-gray-50 dark:bg-slate-700 p-3 rounded-lg">
                                    <p class="text-xs text-gray-600 dark:text-gray-400 font-medium">NIK</p>
                                    <p class="text-sm font-mono font-bold text-gray-900 dark:text-white">{{ $riwayat->nik ?? '-' }}</p>
                                </div>
                            </div>
                        </div>

                        <!-- Data Snapshot -->
                        @if($riwayat->data_snapshot)
                        <div class="mb-6">
                            <h4 class="text-base font-semibold text-gray-900 dark:text-white mb-3 flex items-center">
                                <i class="fas fa-camera mr-2 text-teal-500"></i>
                                Snapshot Data Saat Dihapus
                            </h4>
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                @foreach($riwayat->data_snapshot as $key => $value)
                                    <div class="bg-gray-50 dark:bg-slate-700 p-3 rounded-lg">
                                        <p class="text-xs text-gray-600 dark:text-gray-400 font-medium uppercase tracking-wide">{{ str_replace('_', ' ', $key) }}</p>
                                        <p class="text-sm font-medium text-gray-900 dark:text-white mt-1 break-words">{{ $value ?? '-' }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        <!-- Alasan Penghapusan -->
                        @if($riwayat->alasan_penghapusan)
                        <div class="mb-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                            <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-200 mb-2 flex items-center">
                                <i class="fas fa-sticky-note mr-2"></i>
                                Alasan Penghapusan
                            </h4>
                            <p class="text-sm text-blue-800 dark:text-blue-300">{{ $riwayat->alasan_penghapusan }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="lg:col-span-1 space-y-4 sm:space-y-6">

                    <!-- Timeline Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
                        <div class="bg-gradient-to-r from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-900/10 p-4 border-b border-gray-200 dark:border-slate-700">
                            <h4 class="text-sm font-bold text-purple-900 dark:text-purple-200 flex items-center">
                                <i class="fas fa-timeline mr-2"></i>
                                Timeline
                            </h4>
                        </div>
                        <div class="p-4">
                            <div class="space-y-3">
                                <!-- Penghapusan -->
                                <div class="flex gap-3">
                                    <div class="flex flex-col items-center">
                                        <div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
                                        <div class="w-0.5 h-12 bg-gray-300 dark:bg-slate-600"></div>
                                    </div>
                                    <div class="pb-3">
                                        <p class="text-xs font-semibold text-gray-900 dark:text-white">Dihapus</p>
                                        <p class="text-xs text-gray-600 dark:text-gray-400">{{ $riwayat->waktu_penghapusan->format('d/m/Y H:i') }}</p>
                                        <p class="text-xs text-gray-600 dark:text-gray-400">Oleh: {{ $riwayat->penghapus?->name ?? 'System' }}</p>
                                    </div>
                                </div>

                                <!-- Restore (jika ada) -->
                                @if($riwayat->waktu_restore)
                                <div class="flex gap-3">
                                    <div class="flex flex-col items-center">
                                        <div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
                                    </div>
                                    <div>
                                        <p class="text-xs font-semibold text-gray-900 dark:text-white">Di-Restore</p>
                                        <p class="text-xs text-gray-600 dark:text-gray-400">{{ $riwayat->waktu_restore->format('d/m/Y H:i') }}</p>
                                        <p class="text-xs text-gray-600 dark:text-gray-400">Oleh: {{ $riwayat->peRestorer?->name ?? '-' }}</p>
                                    </div>
                                </div>
                                @endif
                            </div>
                        </div>
                    </div>

                    <!-- Statistics Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 overflow-hidden">
                        <div class="bg-gradient-to-r from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-900/10 p-4 border-b border-gray-200 dark:border-slate-700">
                            <h4 class="text-sm font-bold text-orange-900 dark:text-orange-200 flex items-center">
                                <i class="fas fa-chart-bar mr-2"></i>
                                Data Terkait
                            </h4>
                        </div>
                        <div class="p-4 space-y-2">
                            <div class="flex justify-between items-center p-2 bg-gray-50 dark:bg-slate-700 rounded-lg">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Pemeriksaan Kesehatan</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white bg-teal-100 dark:bg-teal-900 text-teal-700 dark:text-teal-200 px-2.5 py-1 rounded-full">{{ $riwayat->jumlah_pemeriksaan }}</span>
                            </div>
                            <div class="flex justify-between items-center p-2 bg-gray-50 dark:bg-slate-700 rounded-lg">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Pembayaran</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 px-2.5 py-1 rounded-full">{{ $riwayat->jumlah_pembayaran }}</span>
                            </div>
                            <div class="flex justify-between items-center p-2 bg-gray-50 dark:bg-slate-700 rounded-lg">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Analisis AI</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white bg-purple-100 dark:bg-purple-900 text-purple-700 dark:text-purple-200 px-2.5 py-1 rounded-full">{{ $riwayat->jumlah_analisis_ai }}</span>
                            </div>
                            <div class="flex justify-between items-center p-2 bg-gray-50 dark:bg-slate-700 rounded-lg">
                                <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Embedding Wajah</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-200 px-2.5 py-1 rounded-full">{{ $riwayat->jumlah_embedding_wajah }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Type Badge -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-gray-200 dark:border-slate-700 p-4">
                        <p class="text-xs text-gray-600 dark:text-gray-400 font-medium mb-2">Tipe Penghapusan</p>
                        @if($riwayat->tipe_penghapusan === 'SOFT_DELETE')
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-900 dark:text-blue-100 text-xs font-bold">
                                <i class="fas fa-save mr-1.5"></i> Soft Delete (Riwayat)
                            </span>
                        @else
                            <span class="inline-flex items-center px-3 py-1.5 rounded-full bg-red-100 dark:bg-red-900 text-red-900 dark:text-red-100 text-xs font-bold">
                                <i class="fas fa-trash-alt mr-1.5"></i> Hard Delete (Permanen)
                            </span>
                        @endif
                    </div>

                </div>

            </div>

        </div>
    </div>

    @push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    
    <script>
        function confirmRestore(id, nama) {
            Swal.fire({
                title: 'Restore Pasien?',
                html: `Pasien "${nama}" akan di-restore beserta semua data terkaitnya.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#f59e0b',
                cancelButtonColor: '#6b7280',
                confirmButtonText: '<i class="fas fa-undo mr-2"></i>Ya, Restore',
                cancelButtonText: 'Batal',
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    return fetch(`/pasien/riwayat-penghapusan/${id}/restore`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        }
                    }).then(res => res.json());
                }
            }).then(result => {
                if (result.isConfirmed && result.value.success) {
                    Swal.fire('Berhasil!', result.value.message, 'success').then(() => {
                        window.location.href = '{{ route("pasien.riwayat-penghapusan.index") }}';
                    });
                }
            });
        }

        function confirmHardDelete(id, nama) {
            Swal.fire({
                title: 'Hapus Permanen?',
                html: `<p class="mb-3">Pasien "<strong>${nama}</strong>" dan semua data akan dihapus secara permanen!</p>
                       <p class="text-xs text-red-600">Masukkan password untuk konfirmasi:</p>
                       <input type="password" id="delPass" class="w-full mt-2 px-3 py-2 border rounded" placeholder="Password..." autocomplete="off">`,
                icon: 'error',
                showCancelButton: true,
                confirmButtonColor: '#dc2626',
                confirmButtonText: 'Hapus',
                background: document.documentElement.classList.contains('dark') ? '#1e293b' : '#fff',
                color: document.documentElement.classList.contains('dark') ? '#fff' : '#000',
                showLoaderOnConfirm: true,
                preConfirm: () => {
                    const pass = document.getElementById('delPass').value;
                    if (!pass) {
                        Swal.showValidationMessage('Masukkan password');
                        return false;
                    }
                    return fetch(`/pasien/riwayat-penghapusan/${id}/hard-delete`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({ password: pass })
                    }).then(res => res.json());
                }
            }).then(result => {
                if (result.isConfirmed && result.value.success) {
                    Swal.fire('Terhapus!', result.value.message, 'success').then(() => {
                        window.location.href = '{{ route("pasien.riwayat-penghapusan.index") }}';
                    });
                }
            });
        }
    </script>
    @endpush
</x-app-layout>
