127 lines
5.0 KiB
PHP
127 lines
5.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Kartu Pasien - {{ $patient->user->name }}</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<style>
|
|
@media print {
|
|
/* Sembunyikan tombol cetak dan latar belakang body */
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
|
|
body {
|
|
background: white !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Hilangkan margin default browser (header/footer tanggal) */
|
|
@page {
|
|
margin: 0;
|
|
}
|
|
|
|
.print-card {
|
|
border: 1px solid #e2e8f0;
|
|
box-shadow: none !important;
|
|
margin: 20px auto;
|
|
/* Memaksa warna latar belakang muncul di beberapa browser */
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
}
|
|
|
|
/* Memastikan SVG QR Code fleksibel */
|
|
svg {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-100 p-5 md:p-10">
|
|
|
|
<div class="flex justify-center mb-6 no-print">
|
|
<button onclick="window.print()" class="bg-blue-600 hover:bg-blue-700 shadow-lg px-8 py-3 rounded-full font-bold text-white hover:scale-105 transition-all transform">
|
|
🖨️ Cetak Kartu Pasien
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-white shadow-xl mx-auto p-6 border rounded-2xl max-w-md print-card">
|
|
<div class="flex justify-between items-start mb-6 pb-4 border-blue-600 border-b-2">
|
|
<div class="space-y-1">
|
|
<h1 class="font-black text-blue-800 text-xl leading-tight">KARTU PASIEN</h1>
|
|
<p class="font-bold text-blue-900 text-sm uppercase tracking-wider">
|
|
{{ $site->name }}
|
|
</p>
|
|
<p class="mt-1 text-[10px] text-gray-400 italic leading-none">
|
|
Harap dibawa setiap kali berkunjung.
|
|
</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="bg-blue-50 px-2 py-1 rounded">
|
|
<p class="font-mono font-bold text-blue-800 text-xs tracking-tighter">{{ $patient->nik }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase tracking-widest">Nama Lengkap</p>
|
|
<p class="font-bold text-gray-800 text-lg uppercase leading-tight">{{ $patient->user->name }}</p>
|
|
</div>
|
|
|
|
<div class="gap-x-2 gap-y-4 grid grid-cols-2 mb-6 text-sm">
|
|
<div>
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase">TTL</p>
|
|
<p class="font-semibold text-gray-700 text-xs">
|
|
{{ $patient->place_of_birth }}, {{ \Carbon\Carbon::parse($patient->date_of_birth)->format('d/m/Y') }}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase">Gol. Darah</p>
|
|
<p class="font-semibold text-gray-700 text-xs">{{ $patient->blood_type ?? '-' }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase">Metode Bayar</p>
|
|
<p class="font-semibold text-gray-700 text-xs">{{ $patient->insurance_type }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase">Kontak</p>
|
|
<p class="font-semibold text-gray-700 text-xs">{{ $patient->phone }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<p class="font-bold text-[10px] text-gray-400 uppercase">Alamat</p>
|
|
<p class="text-gray-600 text-xs italic leading-relaxed">{{ $patient->address }}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-between items-end mt-4 pt-4 border-gray-100 border-t">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center gap-1.5">
|
|
<div class="bg-green-500 rounded-full w-2 h-2 animate-pulse"></div>
|
|
<p class="font-mono font-bold text-[10px] text-green-700">VERIFIED SYSTEM</p>
|
|
</div>
|
|
<p class="text-[9px] text-gray-400">ID: {{ substr(md5($patient->id), 0, 8) }} | {{ now()->format('d/m/y H:i') }}</p>
|
|
</div>
|
|
|
|
<div class="group relative">
|
|
<div class="bg-white shadow-sm p-1.5 border border-gray-200 rounded-lg">
|
|
<div class="w-20 h-20">
|
|
{!! $qrcode !!}
|
|
</div>
|
|
</div>
|
|
<p class="mt-1 font-bold text-[8px] text-gray-400 text-center uppercase tracking-tighter">Scan Verifikasi</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-6 text-gray-400 text-xs text-center no-print">
|
|
Tips: Pastikan "Background Graphics" dicentang pada pengaturan print browser.
|
|
</p>
|
|
</body>
|
|
|
|
</html>
|