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

<x-app-layout>
    <div class="space-y-6 pb-8">
        {{-- 1. STATS OVERVIEW --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <x-stats-card title="Total Kucing" :value="$totalCats" icon="fa-cat" color="indigo" />
            <x-stats-card title="Kucing Sehat" :value="$totalCats - $sickCats" icon="fa-heart" color="emerald" />
            <x-stats-card title="Dalam Perawatan" :value="$sickCats" icon="fa-stethoscope" color="rose" />
        </div>

        {{-- 2. ACTION HEADER --}}
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <h2 class="text-2xl font-black text-slate-800 tracking-tight leading-none mb-1 uppercase">Manajemen Kucing</h2>
                <p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Cattery Management System • Ilycats</p>
            </div>
            
            {{-- PROTEKSI TOMBOL CREATE --}}
            @can('check-access', ['cats', 'create'])
            <div class="flex items-center gap-3">
                <a href="{{ route('cats.create') }}" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white text-xs font-black rounded-2xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
                    <i class="fas fa-plus-circle mr-2"></i> REGISTRASI KUCING BARU
                </a>
            </div>
            @endcan
        </div>

        {{-- 3. TABLE CONTAINER --}}
        <div class="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
            {{-- SEARCH & QUICK FILTER --}}
            <div class="p-6 bg-slate-50/50 border-b border-slate-100 flex flex-col md:flex-row justify-between gap-4">
                <form action="{{ route('cats.index') }}" method="GET" class="relative w-full md:w-1/3">
                    <i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Cari nama, ras, atau microchip..." 
                           class="w-full pl-12 pr-4 py-3 bg-white border border-slate-200 rounded-xl text-xs font-bold focus:ring-2 focus:ring-indigo-500 transition-all shadow-sm">
                </form>

                <div class="flex items-center p-1 bg-slate-100 rounded-xl shrink-0">
                    <a href="{{ route('cats.index') }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ !request('status') ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Semua</a>
                    <a href="{{ route('cats.index', ['status' => 'Active']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Active' ? 'bg-white text-emerald-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Dewasa</a>
                    <a href="{{ route('cats.index', ['status' => 'Kitten']) }}" class="px-4 py-2 rounded-lg text-[10px] font-black uppercase tracking-widest {{ request('status') == 'Kitten' ? 'bg-white text-amber-600 shadow-sm' : 'text-slate-500 hover:text-slate-700' }}">Kitten</a>
                </div>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead class="bg-slate-50 text-[10px] font-black text-slate-400 uppercase tracking-widest border-b border-slate-100">
                        <tr>
                            <th class="px-6 py-5">Informasi Kucing</th>
                            <th class="px-6 py-5">Usia & Silsilah</th>
                            <th class="px-6 py-5 text-center">Lokasi Kandang</th>
                            <th class="px-6 py-5 text-center">Penanggung Jawab</th>
                            <th class="px-6 py-5 text-center">Monitoring Berat</th>
                            <th class="px-6 py-5 text-right">Aksi</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 font-medium text-slate-700">
                        @forelse($cats as $cat)
                        <tr class="hover:bg-slate-50/80 transition-all group">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-4">
                                    <div class="relative shrink-0">
                                        <div class="w-14 h-14 rounded-2xl bg-slate-100 overflow-hidden ring-4 ring-white shadow-sm transition-transform group-hover:scale-105">
                                            <img src="{{ $cat->foto_url }}" class="w-full h-full object-cover">
                                        </div>
                                        @if($cat->status === 'Kitten')
                                            <div class="absolute -top-1 -right-1 w-4 h-4 bg-amber-500 border-2 border-white rounded-full shadow-sm animate-pulse" title="Kitten"></div>
                                        @endif
                                    </div>
                                    
                                    <div>
                                        <div class="flex items-center gap-2 mb-1">
                                            <a href="{{ route('cats.show', $cat->id) }}" class="text-sm font-black text-slate-800 hover:text-indigo-600 transition-colors uppercase tracking-tight">{{ $cat->nama_kucing }}</a>
                                            {!! $cat->gender_icon !!}
                                        </div>
                                        <div class="flex flex-col gap-1.5">
                                            <div class="flex items-center gap-1.5">
                                                <span class="px-2 py-0.5 bg-indigo-50 text-indigo-500 rounded text-[9px] font-black uppercase">{{ $cat->ras }}</span>
                                                <span class="text-slate-300">•</span>
                                                {!! $cat->registry_badges !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-[11px] font-black text-slate-700">{{ $cat->age }}</span>
                                    <div class="flex items-center gap-1 mt-0.5">
                                        <i class="fas fa-birthday-cake text-[8px] text-slate-300"></i>
                                        <span class="text-[9px] text-slate-400 font-bold italic">{{ $cat->tanggal_lahir?->format('d M Y') ?? 'N/A' }}</span>
                                    </div>
                                    @if($cat->induk_betina_id)
                                        <span class="text-[8px] text-rose-400 font-bold uppercase mt-1 tracking-tighter">Dam: {{ $cat->dam->nama_kucing }}</span>
                                    @endif
                                </div>
                            </td>

                            <td class="px-6 py-4 text-center">
                                <div class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-indigo-50/50 text-indigo-600 rounded-xl text-[10px] font-black border border-indigo-100 uppercase italic">
                                    <i class="fas fa-door-closed text-[9px]"></i>
                                    {{ $cat->lokasi_kandang ?? 'Global' }}
                                </div>
                            </td>

                            <td class="px-6 py-4 text-center">
                                <div class="flex flex-col items-center">
                                    <span class="text-[10px] font-black text-slate-600 uppercase tracking-tighter">{{ $cat->pic->name ?? 'System' }}</span>
                                    <span class="text-[8px] text-slate-400 font-bold uppercase tracking-widest">In Charge</span>
                                </div>
                            </td>

                            <td class="px-6 py-4 text-center">
                                @php $isOverdue = $cat->updated_at->diffInDays(now()) >= 3; @endphp
                                <div class="flex flex-col items-center">
                                    <div class="flex items-baseline gap-0.5 {{ $isOverdue ? 'text-rose-600' : 'text-emerald-600' }}">
                                        <span class="text-sm font-black">{{ number_format($cat->berat_badan, 2) }}</span>
                                        <span class="text-[9px] font-bold">KG</span>
                                    </div>
                                    @if($isOverdue) 
                                        <div class="flex items-center gap-1 mt-1 text-rose-400 animate-pulse">
                                            <i class="fas fa-exclamation-triangle text-[8px]"></i>
                                            <span class="text-[7px] font-black uppercase tracking-widest">Update!</span> 
                                        </div>
                                    @endif
                                </div>
                            </td>

                            <td class="px-6 py-4 text-right">
                                <div class="flex justify-end items-center gap-2">
                                    {{-- PROTEKSI TOMBOL READ --}}
                                    @can('check-access', ['cats', 'read'])
                                    <a href="{{ route('cats.show', $cat->id) }}" 
                                       class="w-9 h-9 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-xl hover:bg-indigo-600 hover:text-white transition-all shadow-sm group-hover:shadow-indigo-100" 
                                       title="Detail Medis">
                                        <i class="fas fa-heartbeat text-xs"></i>
                                    </a>
                                    @endcan

                                    {{-- PROTEKSI TOMBOL EDIT/UPDATE --}}
                                    @can('check-access', ['cats', 'update'])
                                    <a href="{{ route('cats.edit', $cat->id) }}" 
                                       class="w-9 h-9 flex items-center justify-center bg-amber-50 text-amber-600 rounded-xl hover:bg-amber-600 hover:text-white transition-all shadow-sm" 
                                       title="Edit Profil">
                                        <i class="fas fa-pencil-alt text-xs"></i>
                                    </a>
                                    @endcan

                                    {{-- PROTEKSI TOMBOL DELETE --}}
                                    @can('check-access', ['cats', 'delete'])
                                    <button type="button" 
                                            onclick="confirmDelete('delete-form-{{ $cat->id }}', '{{ $cat->nama_kucing }}')"
                                            class="w-9 h-9 flex items-center justify-center bg-rose-50 text-rose-600 rounded-xl hover:bg-rose-500 hover:text-white transition-all shadow-sm" 
                                            title="Hapus">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>

                                    <form id="delete-form-{{ $cat->id }}" action="{{ route('cats.destroy', $cat->id) }}" method="POST" class="hidden">
                                        @csrf @method('DELETE')
                                    </form>
                                    @endcan
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="6" class="px-6 py-32 text-center bg-slate-50/30">
                                <div class="flex flex-col items-center">
                                    <i class="fas fa-cat text-5xl text-slate-100 mb-4 animate-bounce"></i>
                                    <h3 class="text-slate-400 font-black uppercase text-xs tracking-[0.4em]">Belum Ada Data Kucing</h3>
                                    <p class="text-slate-300 text-[10px] font-bold mt-2 uppercase">Silakan klik tombol registrasi untuk memulai</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="p-8 border-t border-slate-100 bg-slate-50/30">
                {{ $cats->links() }}
            </div>
        </div>
    </div>
</x-app-layout>