Files
ilycats/resources/views/pages/cats/index.blade.php
T

88 lines
9.3 KiB
PHP

<x-app-layout>
@php
$currentSort=request('sort','created_at'); $currentDir=request('direction','desc'); $nextDir=$currentDir==='asc'?'desc':'asc';
$sortIcon=function($field)use($currentSort,$currentDir){return $currentSort!==$field?'fa-sort text-slate-300':($currentDir==='asc'?'fa-sort-up text-indigo-600':'fa-sort-down text-indigo-600');};
@endphp
<div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div>
<h1 class="text-2xl font-bold text-slate-900">Data kucing</h1>
<p class="mt-1 text-sm text-slate-500">Kucing aktif, kucing teradopsi, induk eksternal, silsilah, pedigree, dan pemantauan kesehatan.</p>
</div>
<div class="flex flex-wrap gap-2">
@can('check-access',['cats','update'])
<a href="{{ route('cats.bulk-weight') }}" class="rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50"><i class="fas fa-weight-scale mr-2"></i>Input berat massal</a>
@endcan
@can('check-access',['cats','create'])
<a href="{{ route('cats.create') }}" class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-indigo-700"><i class="fas fa-plus mr-2"></i>Tambah kucing / induk eksternal</a>
@endcan
</div>
</div>
<div class="mb-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
<a href="{{ route('cats.index',['list_scope'=>'active']) }}" class="rounded-2xl border {{ $listScope==='active'?'border-indigo-300 bg-indigo-50/60':'border-slate-200 bg-white' }} p-4 hover:border-indigo-300">
<p class="text-xs font-semibold text-slate-500">Kucing aktif di cattery</p><p class="mt-1 text-2xl font-bold text-slate-900">{{ $activeCats }}</p>
</a>
<a href="{{ route('cats.index',['list_scope'=>'adopted']) }}" class="rounded-2xl border {{ $listScope==='adopted'?'border-emerald-300 bg-emerald-50/60':'border-slate-200 bg-white' }} p-4 hover:border-emerald-300">
<p class="text-xs font-semibold text-slate-500">Kucing teradopsi</p><p class="mt-1 text-2xl font-bold text-emerald-700">{{ $adoptedCats }}</p>
</a>
<a href="{{ route('cats.index',['list_scope'=>'external_parent']) }}" class="rounded-2xl border {{ $listScope==='external_parent'?'border-amber-300 bg-amber-50/60':'border-slate-200 bg-white' }} p-4 hover:border-amber-300">
<p class="text-xs font-semibold text-slate-500">Induk eksternal</p><p class="mt-1 text-2xl font-bold text-amber-700">{{ $externalParentCats }}</p>
</a>
<a href="{{ route('cats.index',['list_scope'=>'active','filter_health'=>'treatment']) }}" class="rounded-2xl border border-slate-200 bg-white p-4 hover:border-rose-300">
<p class="text-xs font-semibold text-slate-500">Dalam perawatan</p><p class="mt-1 text-2xl font-bold text-rose-600">{{ $sickCats }}</p>
</a>
</div>
<section class="overflow-hidden rounded-2xl border border-slate-200 bg-white">
<div class="flex flex-col gap-3 border-b border-slate-200 p-4 xl:flex-row xl:items-center xl:justify-between">
<form method="GET" action="{{ route('cats.index') }}" class="flex w-full max-w-xl gap-2">
<input type="hidden" name="list_scope" value="{{ $listScope }}">
<input type="hidden" name="status" value="{{ request('status') }}">
<input type="hidden" name="sort" value="{{ request('sort') }}">
<input type="hidden" name="direction" value="{{ request('direction') }}">
<div class="relative flex-1"><i class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400"></i><input name="search" value="{{ request('search') }}" placeholder="Cari nama, EMS, microchip, ras, kandang..." class="field-input rounded-xl pl-9"></div>
<button class="rounded-xl border border-slate-300 px-4 text-sm font-semibold text-slate-700 hover:bg-slate-50">Cari</button>
</form>
<div class="flex flex-wrap gap-1 text-sm">
@foreach([''=>'Semua usia','Dewasa'=>'Dewasa','Junior'=>'Junior','Kitten'=>'Kitten'] as $value=>$label)
<a href="{{ route('cats.index',array_merge(request()->except('page','status'),$value?['status'=>$value]:[])) }}" class="rounded-lg px-3 py-2 {{ request('status','')===$value?'bg-slate-900 text-white':'text-slate-600 hover:bg-slate-100' }}">{{ $label }}</a>
@endforeach
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-slate-200 text-sm">
<thead class="bg-slate-50 text-left text-xs font-semibold text-slate-500"><tr>
<th class="px-4 py-3"><a class="flex items-center gap-2" href="{{ request()->fullUrlWithQuery(['sort'=>'nama_kucing','direction'=>$nextDir]) }}">Kucing <i class="fas {{ $sortIcon('nama_kucing') }}"></i></a></th>
<th class="px-4 py-3">Status cattery</th>
<th class="px-4 py-3">Identitas & pedigree</th>
<th class="px-4 py-3">Silsilah</th>
<th class="px-4 py-3"><a class="flex items-center gap-2" href="{{ request()->fullUrlWithQuery(['sort'=>'berat_badan','direction'=>$nextDir]) }}">Berat <i class="fas {{ $sortIcon('berat_badan') }}"></i></a></th>
<th class="px-4 py-3 text-right">Aksi</th>
</tr></thead>
<tbody class="divide-y divide-slate-100">
@forelse($cats as $cat)
@php
$statusStyle = match($cat->cattery_status ?: 'active') {
'adopted' => 'bg-emerald-50 text-emerald-700 border-emerald-100',
'external_parent' => 'bg-amber-50 text-amber-700 border-amber-100',
default => 'bg-indigo-50 text-indigo-700 border-indigo-100',
};
@endphp
<tr class="hover:bg-slate-50">
<td class="px-4 py-3"><div class="flex min-w-52 items-center gap-3"><img src="{{ $cat->foto_url }}" alt="{{ $cat->nama_kucing }}" class="h-11 w-11 rounded-xl border border-slate-200 object-cover"><div><a href="{{ route('cats.show',$cat) }}" class="font-semibold text-slate-900 hover:text-indigo-600">{{ $cat->nama_kucing }}</a><p class="mt-0.5 text-xs text-slate-500">{{ $cat->jenis_kelamin }} · {{ $cat->ras }}</p></div></div></td>
<td class="px-4 py-3"><span class="inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold {{ $statusStyle }}">{{ $cat->cattery_status_label }}</span>@if($cat->adopted_at)<p class="mt-1 text-xs text-slate-400">Sejak {{ $cat->adopted_at->format('d-m-Y') }}</p>@endif</td>
<td class="px-4 py-3"><div class="space-y-1"><p class="text-xs text-slate-600"><span class="text-slate-400">EMS:</span> {{ $cat->kode_ems ?: '-' }}</p><p class="text-xs text-slate-600"><span class="text-slate-400">Microchip:</span> {{ $cat->microchip ?: '-' }}</p><div class="flex flex-wrap gap-1">@forelse($cat->registrations as $reg)<span class="rounded border border-slate-200 bg-slate-50 px-1.5 py-0.5 text-[11px] font-semibold text-slate-600">{{ $reg->association->code }}{{ $reg->is_primary?' · utama':'' }}</span>@empty<span class="text-xs text-slate-400">Belum ada registrasi</span>@endforelse</div></div></td>
<td class="px-4 py-3"><p class="text-xs text-slate-600">{{ $cat->age }}</p><p class="mt-1 text-xs text-slate-500">Sire: {{ $cat->sire->nama_kucing ?? '-' }}</p><p class="text-xs text-slate-500">Dam: {{ $cat->dam->nama_kucing ?? '-' }}</p></td>
<td class="px-4 py-3"><p class="font-semibold text-slate-800">{{ number_format((float)($cat->berat_badan ?? $cat->berat_terakhir ?? 0),2) }} kg</p>@if(($cat->cattery_status ?: 'active')==='active')<p class="text-xs {{ $cat->treatment_status==1?'text-rose-600':'text-emerald-600' }}">{{ $cat->treatment_status==1?'Dalam perawatan':'Sehat' }}</p>@else<p class="text-xs text-slate-400">Tidak dihitung sebagai kucing aktif</p>@endif</td>
<td class="px-4 py-3"><div class="flex justify-end gap-1"><a href="{{ route('cats.show',$cat) }}" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" title="Lihat"><i class="fas fa-eye"></i></a><a href="{{ route('cats.pedigree',$cat) }}" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" title="Pedigree"><i class="fas fa-file-lines"></i></a>@can('check-access',['cats','update'])<a href="{{ route('cats.edit',$cat) }}" class="rounded-lg p-2 text-slate-500 hover:bg-slate-100" title="Ubah"><i class="fas fa-pen"></i></a>@endcan @can('check-access',['cats','delete'])<form id="delete-cat-{{ $cat->id }}" method="POST" action="{{ route('cats.destroy',$cat) }}">@csrf @method('DELETE')<button type="button" onclick="confirmDelete('delete-cat-{{ $cat->id }}','{{ addslashes($cat->nama_kucing) }}')" class="rounded-lg p-2 text-rose-500 hover:bg-rose-50" title="Hapus"><i class="fas fa-trash"></i></button></form>@endcan</div></td>
</tr>
@empty<tr><td colspan="6" class="px-4 py-12 text-center text-sm text-slate-500">Data kucing tidak ditemukan.</td></tr>@endforelse
</tbody>
</table>
</div>
<div class="border-t border-slate-200 p-4">{{ $cats->links() }}</div>
</section>
</x-app-layout>