2026-02-08 15:16:35 +07:00
|
|
|
<x-app-layout>
|
|
|
|
|
@push('styles')
|
|
|
|
|
<style>
|
|
|
|
|
canvas { max-width: 100% !important; }
|
2026-09-23 12:45:02 +07:00
|
|
|
.custom-scrollbar::-webkit-scrollbar { width: 5px; }
|
2026-02-08 15:16:35 +07:00
|
|
|
.custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
|
2026-09-23 12:45:02 +07:00
|
|
|
|
|
|
|
|
.animate-modal-enter { animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
|
|
|
|
|
@keyframes modalFadeIn {
|
|
|
|
|
from { opacity: 0; transform: scale(0.95) translateY(20px); }
|
|
|
|
|
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
|
|
|
}
|
2026-02-08 15:16:35 +07:00
|
|
|
</style>
|
|
|
|
|
@endpush
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
@php
|
|
|
|
|
// Mengambil daftar penyakit yang MASIH AKTIF untuk dropdown
|
|
|
|
|
$activePerawatans = $cat->treatments->where('status_perawatan', 1);
|
|
|
|
|
@endphp
|
|
|
|
|
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="max-w-[1600px] mx-auto space-y-8 pb-12">
|
|
|
|
|
{{-- 1. Header Section --}}
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 px-2">
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<a href="{{ route('cats.index') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
|
|
|
|
<i class="fas fa-arrow-left"></i>
|
|
|
|
|
</a>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center gap-3">
|
2026-09-23 12:45:02 +07:00
|
|
|
<h2 class="text-3xl font-black text-slate-800 tracking-tight leading-none uppercase">{{ $cat->nama_kucing }}</h2>
|
2026-02-08 15:16:35 +07:00
|
|
|
{!! $cat->gender_icon !!}
|
|
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Medis Record #FE-{{ str_pad($cat->id, 5, '0', STR_PAD_LEFT) }}</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="flex flex-wrap items-center gap-3">
|
|
|
|
|
<a href="{{ route('medical-records.bulk.create') }}" class="inline-flex items-center px-6 py-3.5 bg-indigo-50 text-indigo-600 border border-indigo-100 text-[10px] font-black rounded-2xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm active:scale-95">
|
|
|
|
|
<i class="fas fa-layer-group mr-2 text-sm"></i> BULK TREATMENT
|
|
|
|
|
</a>
|
|
|
|
|
<a href="{{ route('cats.medical-report', $cat->id) }}" class="inline-flex items-center px-6 py-3.5 bg-rose-600 text-white text-[10px] font-black rounded-2xl hover:bg-rose-700 transition-all shadow-lg shadow-rose-100 active:scale-95">
|
|
|
|
|
<i class="fas fa-file-medical mr-2 text-sm"></i> UNDUH HEALTH LEDGER
|
2026-02-08 15:16:35 +07:00
|
|
|
</a>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
{{-- ========================================== --}}
|
|
|
|
|
{{-- TOMBOL & MODAL HANYA MUNCUL JIKA ADA PENYAKIT AKTIF --}}
|
|
|
|
|
{{-- ========================================== --}}
|
|
|
|
|
@if($activePerawatans->count() > 0)
|
|
|
|
|
<div x-data="{ openModal: false }" class="inline-block">
|
|
|
|
|
<button @click="openModal = true" type="button"
|
|
|
|
|
class="inline-flex items-center px-6 py-3.5 bg-emerald-600 text-white text-[10px] font-black rounded-2xl hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-100 active:scale-95 animate-pulse">
|
|
|
|
|
<i class="fas fa-notes-medical mr-2 text-sm"></i> RESOLVE CLINICAL CASE
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
{{-- Modal Backdrop --}}
|
|
|
|
|
<div x-show="openModal"
|
|
|
|
|
x-transition:enter="transition ease-out duration-300"
|
|
|
|
|
x-transition:enter-start="opacity-0"
|
|
|
|
|
x-transition:enter-end="opacity-100"
|
|
|
|
|
x-transition:leave="transition ease-in duration-200"
|
|
|
|
|
x-transition:leave-start="opacity-100"
|
|
|
|
|
x-transition:leave-end="opacity-0"
|
|
|
|
|
class="fixed inset-0 z-50 overflow-y-auto bg-slate-900/60 backdrop-blur-sm flex items-center justify-center p-4"
|
|
|
|
|
x-cloak>
|
|
|
|
|
|
|
|
|
|
{{-- Modal Content --}}
|
|
|
|
|
<div @click.away="openModal = false" class="bg-white rounded-[2.5rem] border border-slate-100 shadow-2xl max-w-md w-full p-8 transform transition-all space-y-6">
|
|
|
|
|
<div class="flex justify-between items-start">
|
|
|
|
|
<div>
|
|
|
|
|
<h3 class="text-lg font-black text-slate-800 uppercase tracking-tight">Resolusi Penyakit</h3>
|
|
|
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-1">Pilih kasus yang sudah sembuh</p>
|
|
|
|
|
</div>
|
|
|
|
|
<button @click="openModal = false" type="button" class="text-slate-400 hover:text-rose-600 transition-colors">
|
|
|
|
|
<i class="fas fa-times-circle text-xl"></i>
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<form action="{{ route('cats.complete-treatment', $cat->id) }}" method="POST" class="space-y-4">
|
|
|
|
|
@csrf
|
|
|
|
|
@method('PATCH')
|
|
|
|
|
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Pilih Keluhan / Penyakit</label>
|
|
|
|
|
<select name="treatment_id" required class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold p-4 text-slate-700 focus:ring-4 focus:ring-indigo-500/20 outline-none">
|
|
|
|
|
<option value="" disabled selected>-- Pilih Penyakit yang Sembuh --</option>
|
|
|
|
|
@foreach($activePerawatans as $tr)
|
|
|
|
|
<option value="{{ $tr->id }}">{{ $tr->keluhan }} (Tanggal: {{ $tr->tanggal->format('d/m/Y') }})</option>
|
|
|
|
|
@endforeach
|
|
|
|
|
</select>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="space-y-2">
|
|
|
|
|
<label class="block text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Kondisi Pasca Sakit / Remark</label>
|
|
|
|
|
<textarea name="remark_pasca_sakit" rows="4" required placeholder="Catat perkembangan... (Contoh: Jamur sembuh total)" class="w-full bg-slate-50 border-none rounded-2xl text-xs font-bold p-4 text-slate-700 focus:ring-4 focus:ring-indigo-500/20 outline-none"></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="grid grid-cols-2 gap-3 pt-2">
|
|
|
|
|
<button @click="openModal = false" type="button" class="w-full bg-slate-100 text-slate-500 py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-slate-200 transition-all">Batal</button>
|
|
|
|
|
<button type="submit" class="w-full bg-emerald-600 text-white py-3.5 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-emerald-700 shadow-lg shadow-emerald-100 transition-all">Simpan Resolusi</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@endif
|
|
|
|
|
{{-- ========================================== --}}
|
|
|
|
|
|
2026-02-08 15:16:35 +07:00
|
|
|
@if(Gate::allows('check-access', ['cats', 'update']) || Gate::allows('check-access', ['cats', 'delete']))
|
|
|
|
|
<a href="{{ route('cats.edit', $cat->id) }}" class="inline-flex items-center px-6 py-3.5 bg-white border border-slate-200 text-slate-600 text-[10px] font-black rounded-2xl hover:bg-slate-50 transition-all shadow-sm active:scale-95">
|
|
|
|
|
<i class="fas fa-edit mr-2 text-indigo-500 text-sm"></i> UPDATE DATA
|
|
|
|
|
</a>
|
|
|
|
|
@endif
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 px-2">
|
2026-02-08 15:16:35 +07:00
|
|
|
{{-- Column 1: Profile & Core Identity --}}
|
|
|
|
|
<div class="space-y-6">
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm text-center relative overflow-hidden group">
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="absolute top-0 left-0 p-6 z-10">{!! $cat->status_badge !!}</div>
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="w-48 h-48 mx-auto rounded-[3rem] bg-slate-50 overflow-hidden ring-8 ring-slate-50 shadow-xl mb-6 transition-transform group-hover:scale-105 duration-500">
|
|
|
|
|
<img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
|
|
|
|
|
</div>
|
|
|
|
|
<h3 class="text-2xl font-black text-slate-800 mb-6 tracking-tighter uppercase">{{ $cat->nama_kucing }}</h3>
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 text-left border-t border-slate-100 pt-6">
|
|
|
|
|
<div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100">
|
|
|
|
|
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-2">Registry</p>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="flex flex-wrap gap-1">{!! $cat->registry_badges !!}</div>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
<div class="bg-slate-50/50 p-4 rounded-2xl border border-slate-100 text-center">
|
|
|
|
|
<p class="text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1">Umur Saat Ini</p>
|
|
|
|
|
<p class="text-xs font-black text-slate-700 tracking-tighter">{{ $cat->age }}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm space-y-5">
|
|
|
|
|
<h4 class="text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-50 pb-3">Informasi Teknis</h4>
|
|
|
|
|
<div class="space-y-4">
|
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
|
<span class="text-xs font-bold text-slate-400 uppercase">Microchip</span>
|
|
|
|
|
<span class="text-xs font-black text-slate-700 font-mono">{{ $cat->microchip ?? 'Unchipped' }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
|
<span class="text-xs font-bold text-slate-400 uppercase">Pedigree No.</span>
|
|
|
|
|
<span class="text-xs font-black text-slate-700">{{ $cat->pedigree ?? '-' }}</span>
|
|
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="flex justify-between items-center pt-3 border-t border-slate-50 mt-1">
|
|
|
|
|
<span class="text-xs font-bold text-slate-400 uppercase">Sertifikat Ped</span>
|
|
|
|
|
<div class="flex items-center gap-2">
|
|
|
|
|
@if($cat->sertifikat_ped_file)
|
|
|
|
|
<span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-2 py-1 rounded-md uppercase"><i class="fas fa-check-circle mr-1"></i> Tersedia</span>
|
|
|
|
|
@else
|
|
|
|
|
<span class="text-[9px] font-black text-rose-500 bg-rose-50 px-2 py-1 rounded-md uppercase"><i class="fas fa-times-circle mr-1"></i> Kosong</span>
|
|
|
|
|
@endif
|
|
|
|
|
<a href="{{ route('cats.pedigree', $cat->id) }}" class="flex items-center justify-center px-4 py-2.5 bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-600 hover:text-white transition-all font-black text-[10px] uppercase tracking-widest shadow-sm">
|
|
|
|
|
<i class="fas fa-folder-open mr-2"></i> Buka
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
|
<span class="text-xs font-bold text-slate-400 uppercase">PIC Bertugas</span>
|
2026-09-23 12:45:02 +07:00
|
|
|
<span class="text-xs font-black text-slate-700">{{ $cat->pic?->name ?? 'Sistem' }}</span>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{-- Column 2: Lineage & Health Routine --}}
|
|
|
|
|
<div class="space-y-8">
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm">
|
2026-09-23 12:45:02 +07:00
|
|
|
<h4 class="text-xs font-black text-slate-800 uppercase tracking-widest border-b border-slate-100 pb-4 mb-6">Data Induk</h4>
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="space-y-4">
|
2026-09-23 12:45:02 +07:00
|
|
|
<div @if($cat->sire_id) onclick="window.location.href='{{ route('cats.show', $cat->sire_id) }}'" @endif
|
|
|
|
|
class="p-4 bg-indigo-50/30 border border-indigo-100 rounded-3xl flex items-center gap-4 hover:bg-indigo-50 transition-colors {{ $cat->sire_id ? 'cursor-pointer' : 'cursor-default' }}">
|
|
|
|
|
<div class="w-12 h-12 bg-white border border-indigo-100 text-indigo-600 rounded-2xl flex items-center justify-center shadow-sm"><i class="fas fa-mars text-lg"></i></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="flex-1">
|
|
|
|
|
<p class="text-[9px] font-black text-indigo-400 uppercase tracking-widest">Sire (Pejantan)</p>
|
2026-09-23 12:45:02 +07:00
|
|
|
<p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->sire->nama_kucing ?? 'Unknown' }}</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div @if($cat->dam_id) onclick="window.location.href='{{ route('cats.show', $cat->dam_id) }}'" @endif
|
|
|
|
|
class="p-4 bg-rose-50/30 border border-rose-100 rounded-3xl flex items-center gap-4 hover:bg-rose-50 transition-colors {{ $cat->dam_id ? 'cursor-pointer' : 'cursor-default' }}">
|
|
|
|
|
<div class="w-12 h-12 bg-white border border-rose-100 text-rose-600 rounded-2xl flex items-center justify-center shadow-sm"><i class="fas fa-venus text-lg"></i></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="flex-1">
|
|
|
|
|
<p class="text-[9px] font-black text-rose-400 uppercase tracking-widest">Dam (Betina)</p>
|
2026-09-23 12:45:02 +07:00
|
|
|
<p class="text-sm font-black text-slate-700 uppercase leading-none mt-1">{{ $cat->dam->nama_kucing ?? 'Unknown' }}</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="bg-slate-900 rounded-[3rem] p-8 text-white shadow-2xl relative overflow-hidden">
|
2026-09-23 12:45:02 +07:00
|
|
|
<h4 class="text-xs font-black uppercase tracking-widest border-b border-white/10 pb-4 mb-6 italic">Current Health Reminders</h4>
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="grid grid-cols-1 gap-4 relative z-10">
|
|
|
|
|
@foreach([
|
|
|
|
|
['icon' => 'fa-syringe', 'label' => 'Vaksin', 'field' => 'jadwal_vaksin'],
|
|
|
|
|
['icon' => 'fa-bug', 'label' => 'Obat Cacing', 'field' => 'jadwal_obat_cacing'],
|
|
|
|
|
['icon' => 'fa-shield-virus', 'label' => 'Obat Kutu', 'field' => 'jadwal_obat_kutu'],
|
|
|
|
|
['icon' => 'fa-bath', 'label' => 'Grooming', 'field' => 'jadwal_grooming']
|
|
|
|
|
] as $item)
|
|
|
|
|
<div class="flex items-center justify-between p-4 bg-white/5 rounded-2xl border border-white/5 hover:bg-white/10 transition-all">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<i class="fas {{ $item['icon'] }} text-xs text-slate-400"></i>
|
|
|
|
|
<span class="text-[10px] font-black uppercase tracking-widest text-slate-300">{{ $item['label'] }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[11px] font-black {{ $cat->{$item['field']} && $cat->{$item['field']}->isPast() ? 'text-rose-400' : 'text-white' }}">
|
|
|
|
|
{{ $cat->{$item['field']} ? $cat->{$item['field']}->format('d M Y') : 'NOT SET' }}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
@endforeach
|
|
|
|
|
</div>
|
|
|
|
|
<i class="fas fa-paw absolute -bottom-10 -right-10 text-[12rem] text-white/5 -rotate-12"></i>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{-- Column 3: Growth Analytics & Actions --}}
|
|
|
|
|
<div class="space-y-8">
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm">
|
|
|
|
|
<div class="flex items-center justify-between mb-8">
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg leading-none">Analisis Berat</h4>
|
|
|
|
|
<p class="text-[10px] text-slate-400 font-black uppercase mt-1">Growth Index (Kg)</p>
|
|
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="w-12 h-12 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center"><i class="fas fa-chart-line text-lg"></i></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="relative h-[250px]"><canvas id="weightChart"></canvas></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
@can('check-access', ['cats', 'update'])
|
|
|
|
|
<div class="bg-indigo-600 rounded-[3rem] p-8 text-white shadow-xl shadow-indigo-100 flex flex-col justify-between h-[300px] group overflow-hidden relative">
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="relative z-10">
|
2026-09-23 12:45:02 +07:00
|
|
|
<h4 class="text-xs font-black uppercase tracking-widest mb-2 border-b border-white/20 pb-3">Tindakan medis</h4>
|
|
|
|
|
<p class="text-[10px] text-indigo-100/60 leading-relaxed italic uppercase font-bold tracking-tighter">Log tindakan kesehatan cepat atau pengobatan klinis.</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="flex flex-col gap-3 relative z-10">
|
|
|
|
|
<a href="{{ route('medical-records.create', $cat->id) }}" class="w-full flex items-center justify-center gap-3 p-4 bg-white text-indigo-600 rounded-2xl font-black uppercase text-[10px] shadow-lg hover:bg-indigo-50 transition-all active:scale-95">
|
|
|
|
|
<i class="fas fa-calendar-check"></i> LOG ROUTINE LEDGER
|
|
|
|
|
</a>
|
|
|
|
|
<a href="{{ route('treatments.create', ['cat_id' => $cat->id]) }}" class="w-full flex items-center justify-center gap-3 p-4 bg-indigo-500 text-white border border-indigo-400 rounded-2xl font-black uppercase text-[10px] shadow-lg hover:bg-indigo-400 transition-all active:scale-95">
|
|
|
|
|
<i class="fas fa-briefcase-medical"></i> LOG CLINICAL CASE
|
|
|
|
|
</a>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
<i class="fas fa-heartbeat absolute -bottom-10 -left-10 text-[10rem] text-white/5"></i>
|
|
|
|
|
</div>
|
|
|
|
|
@endcan
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
{{-- Comprehensive Health History --}}
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3.5rem] overflow-hidden shadow-sm mx-2">
|
|
|
|
|
<div class="p-10 border-b border-slate-100 bg-slate-50/50 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
|
|
|
<div class="w-12 h-12 bg-indigo-600 text-white rounded-2xl flex items-center justify-center shadow-lg shadow-indigo-100">
|
|
|
|
|
<i class="fas fa-book-medical text-xl"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-xl leading-none">Comprehensive Health History</h4>
|
|
|
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em] mt-2">Jejak medis dari pertama hingga rencana mendatang</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[10px] font-black text-indigo-600 bg-white border border-indigo-100 px-6 py-2.5 rounded-full shadow-sm">
|
|
|
|
|
{{ $cat->medicalRecords->count() }} TOTAL RECORDS
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="p-10 max-h-[800px] overflow-y-auto custom-scrollbar bg-white">
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
|
|
|
@forelse($cat->medicalRecords->sortByDesc('date_given') as $record)
|
|
|
|
|
<div class="p-8 rounded-[2.5rem] border border-slate-100 bg-slate-50/30 hover:bg-white hover:border-indigo-100 hover:shadow-xl transition-all duration-500 group/item relative overflow-hidden">
|
|
|
|
|
<i class="fas {{ $record->type === 'Vaccine' ? 'fa-syringe' : ($record->type === 'Grooming' ? 'fa-bath' : 'fa-pills') }} absolute -bottom-4 -right-4 text-7xl text-slate-100/50 group-hover/item:text-indigo-500/10 transition-colors"></i>
|
|
|
|
|
<div class="flex items-start justify-between mb-6 relative z-10">
|
|
|
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center shadow-sm
|
|
|
|
|
{{ $record->type === 'Vaccine' ? 'bg-blue-600 text-white' :
|
|
|
|
|
($record->type === 'Deworming' ? 'bg-emerald-500 text-white' :
|
|
|
|
|
($record->type === 'Flea Perawatan' ? 'bg-amber-500 text-white' : 'bg-pink-500 text-white')) }}">
|
|
|
|
|
<i class="fas {{ $record->type === 'Vaccine' ? 'fa-syringe' : ($record->type === 'Grooming' ? 'fa-bath' : 'fa-pills') }} text-sm"></i>
|
|
|
|
|
</div>
|
|
|
|
|
<span class="text-[10px] font-black text-slate-800 uppercase tracking-widest">{{ $record->date_given->format('d M Y') }}</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="relative z-10">
|
|
|
|
|
<h5 class="text-base font-black text-slate-800 uppercase tracking-tight mb-1">{{ $record->treatment_name }}</h5>
|
|
|
|
|
<div class="flex items-center gap-2 mb-4">
|
|
|
|
|
<span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2.5 py-1 rounded-lg border border-indigo-100 uppercase italic">{{ $record->type }}</span>
|
|
|
|
|
@if($record->dosage && $record->type !== 'Grooming')
|
|
|
|
|
<span class="text-[8px] font-black text-emerald-600 bg-emerald-50 px-2.5 py-1 rounded-lg border border-emerald-100 uppercase tracking-widest">
|
|
|
|
|
DOSIS: {{ $record->dosage }} {{ $record->unit }}
|
|
|
|
|
</span>
|
|
|
|
|
@endif
|
|
|
|
|
</div>
|
|
|
|
|
<p class="text-[11px] text-slate-500 font-medium italic mb-6 leading-relaxed bg-white/50 p-3 rounded-xl border border-dashed border-slate-200">
|
|
|
|
|
"{{ $record->notes ?? 'Pemberian rutin tanpa keluhan klinis.' }}"
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@empty
|
|
|
|
|
<div class="col-span-full py-20 text-center text-slate-400 font-black uppercase text-xs">No Records Found</div>
|
|
|
|
|
@endforelse
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{{-- Klinis Case History --}}
|
|
|
|
|
<div class="bg-white border border-slate-200 rounded-[3rem] overflow-hidden shadow-sm mx-2">
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="p-8 border-b border-slate-100 bg-slate-50/50 flex justify-between items-center">
|
|
|
|
|
<div class="flex items-center gap-3">
|
|
|
|
|
<i class="fas fa-history text-slate-400"></i>
|
2026-09-23 12:45:02 +07:00
|
|
|
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Klinis Case History (Non-Routine)</h4>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="p-10 max-h-[600px] overflow-y-auto custom-scrollbar">
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="relative space-y-12">
|
|
|
|
|
<div class="absolute left-[11px] top-2 bottom-2 w-0.5 bg-slate-100"></div>
|
|
|
|
|
@forelse($cat->treatments->sortByDesc('tanggal') as $treatment)
|
|
|
|
|
<div class="relative flex items-start gap-8 group">
|
2026-09-23 12:45:02 +07:00
|
|
|
{{-- Dot Timeline dinamis sesuai status_perawatan --}}
|
|
|
|
|
<div class="z-10 w-6 h-6 rounded-full border-4 ring-8 shadow-md
|
|
|
|
|
{{ $treatment->status_perawatan == 2 ? 'bg-emerald-500 border-white ring-emerald-50' : 'bg-white border-rose-500 ring-rose-50' }}">
|
|
|
|
|
</div>
|
2026-02-08 15:16:35 +07:00
|
|
|
|
|
|
|
|
<div class="flex-1 space-y-4">
|
|
|
|
|
<div class="flex items-center justify-between">
|
2026-09-23 12:45:02 +07:00
|
|
|
<p class="text-xs font-black text-indigo-600 uppercase tracking-widest bg-indigo-50 px-3 py-1 rounded-lg border border-indigo-100">{{ $treatment->tanggal->format('d F Y') }}</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
{{-- LABEL STATUS PADA KARTU HISTORY --}}
|
|
|
|
|
@if($treatment->status_perawatan == 2)
|
|
|
|
|
<span class="text-[9px] font-black text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full uppercase tracking-widest border border-emerald-100"><i class="fas fa-check-circle mr-1"></i> SEMBUH</span>
|
|
|
|
|
@else
|
|
|
|
|
<span class="text-[9px] font-black text-rose-600 bg-rose-50 px-3 py-1 rounded-full uppercase tracking-widest border border-rose-100 animate-pulse"><i class="fas fa-procedures mr-1"></i> AKTIF</span>
|
|
|
|
|
@endif
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
|
|
|
|
|
<div class="bg-white rounded-[2.5rem] p-8 border {{ $treatment->status_perawatan == 2 ? 'border-emerald-100' : 'border-rose-100' }} shadow-sm transition-all duration-300">
|
2026-02-08 15:16:35 +07:00
|
|
|
<div class="flex flex-col md:flex-row gap-10">
|
|
|
|
|
<div class="flex-1">
|
|
|
|
|
<h5 class="text-lg font-black text-slate-800 mb-2 uppercase tracking-tight">{{ $treatment->keluhan }}</h5>
|
2026-09-23 12:45:02 +07:00
|
|
|
<p class="text-sm text-slate-500 font-medium leading-relaxed italic border-l-4 {{ $treatment->status_perawatan == 2 ? 'border-emerald-200' : 'border-rose-200' }} pl-4 mb-6">Diagnosa: {{ $treatment->diagnosa }}</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="flex items-center gap-4 p-4 bg-slate-50/50 rounded-2xl mb-4">
|
|
|
|
|
<div class="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-indigo-500"><i class="fas fa-capsules"></i></div>
|
|
|
|
|
<div><p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">Therapy</p><p class="text-xs font-black text-slate-800 uppercase">{{ $treatment->nama_obat }} ({{ $treatment->dosis }})</p></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
|
|
|
|
|
2026-09-23 12:45:02 +07:00
|
|
|
{{-- TAMPILKAN REMARK JIKA SUDAH SEMBUH --}}
|
|
|
|
|
@if($treatment->status_perawatan == 2 && $treatment->remark_pasca_sakit)
|
|
|
|
|
<div class="bg-emerald-50/50 p-4 rounded-2xl border border-emerald-100/50 mt-4">
|
|
|
|
|
<p class="text-[9px] font-black text-emerald-600 uppercase tracking-widest mb-1"><i class="fas fa-clipboard-check mr-1"></i> Catatan Resolusi Sembuh</p>
|
|
|
|
|
<p class="text-xs font-bold text-slate-600 italic">"{{ $treatment->remark_pasca_sakit }}"</p>
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
@endif
|
2026-02-08 15:16:35 +07:00
|
|
|
</div>
|
2026-09-23 12:45:02 +07:00
|
|
|
@if($treatment->foto_bukti)
|
|
|
|
|
<div class="shrink-0"><div class="w-44 h-44 rounded-[2.5rem] overflow-hidden ring-4 ring-slate-100 shadow-lg"><img src="{{ asset('storage/' . $treatment->foto_bukti) }}" class="w-full h-full object-cover"></div></div>
|
2026-02-08 15:16:35 +07:00
|
|
|
@endif
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@empty
|
2026-09-23 12:45:02 +07:00
|
|
|
<div class="text-center py-10 text-slate-300 uppercase font-black text-xs">No Klinis Cases</div>
|
2026-02-08 15:16:35 +07:00
|
|
|
@endforelse
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@push('scripts')
|
|
|
|
|
<script>
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
const ctx = document.getElementById('weightChart');
|
|
|
|
|
const weightHistories = {!! json_encode($cat->weightHistories->sortBy('created_at')->values() ?? []) !!};
|
2026-09-23 12:45:02 +07:00
|
|
|
if(ctx && weightHistories && weightHistories.length > 0) {
|
|
|
|
|
const labels = weightHistories.map(d => new Date(d.created_at).toLocaleDateString('id-ID', { day: '2-digit', month: 'short' }));
|
|
|
|
|
const data = weightHistories.map(d => d.berat);
|
|
|
|
|
new Chart(ctx, {
|
|
|
|
|
type: 'line',
|
|
|
|
|
data: {
|
|
|
|
|
labels: labels,
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: 'Berat (Kg)',
|
|
|
|
|
data: data,
|
|
|
|
|
borderColor: '#10b981',
|
|
|
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
|
|
|
borderWidth: 5,
|
|
|
|
|
tension: 0.4,
|
|
|
|
|
fill: true,
|
|
|
|
|
pointBackgroundColor: '#fff',
|
|
|
|
|
pointBorderColor: '#10b981',
|
|
|
|
|
pointBorderWidth: 3,
|
|
|
|
|
pointRadius: 4
|
|
|
|
|
}]
|
|
|
|
|
},
|
|
|
|
|
options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: false }, x: { grid: { display: false } } } }
|
|
|
|
|
});
|
2026-02-08 15:16:35 +07:00
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
@endpush
|
|
|
|
|
</x-app-layout>
|
