Dwi F Sukmana
140 lines
9.7 KiB
PHP
140 lines
9.7 KiB
PHP
<x-app-layout>
|
||
{{-- Container utama: Dikunci pada 1200px agar tampilan terpusat dan elegan --}}
|
||
<div class="max-w-[1200px] mx-auto pb-16 px-6 space-y-8 font-sans antialiased tracking-tight">
|
||
|
||
{{-- 1. HEADER & DYNAMIC STATS --}}
|
||
<div class="flex flex-col lg:flex-row items-center justify-between gap-6">
|
||
<div class="text-center lg:text-left">
|
||
<h2 class="text-2xl font-black text-slate-900 uppercase tracking-tighter leading-none">Lineage Archive</h2>
|
||
<div class="flex items-center justify-center lg:justify-start gap-2 mt-2">
|
||
<span class="w-8 h-0.5 bg-indigo-600"></span>
|
||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-[0.2em]">Official Breeding Database</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-4">
|
||
{{-- Quick Stats Widget (TETAP UTUH) --}}
|
||
<div class="bg-white px-5 py-3 rounded-2xl border border-slate-200 shadow-sm flex items-center gap-4">
|
||
<div class="text-right">
|
||
<p class="text-[8px] text-slate-400 font-black uppercase tracking-widest">Total Record</p>
|
||
<p class="text-lg font-black text-slate-800 leading-none">{{ $mattings->total() }}</p>
|
||
</div>
|
||
<div class="w-10 h-10 bg-indigo-50 text-indigo-600 rounded-xl flex items-center justify-center text-sm shadow-inner">
|
||
<i class="fas fa-database"></i>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- PROTEKSI EXPORT PDF: Hanya muncul jika memiliki izin 'create' pada modul matting_reports --}}
|
||
@can('check-access', ['matting_reports', 'create'])
|
||
<a href="{{ request()->fullUrlWithQuery(['export' => 'pdf']) }}" class="bg-slate-900 px-6 py-3 rounded-2xl text-[10px] font-black text-white uppercase hover:bg-indigo-600 transition-all shadow-lg flex items-center gap-3">
|
||
<i class="fas fa-file-pdf"></i> PDF Export
|
||
</a>
|
||
@endcan
|
||
</div>
|
||
</div>
|
||
|
||
{{-- 2. FILTER BAR: Proporsional & Ramping (TETAP UTUH) --}}
|
||
<form action="{{ route('admin.reports.matting.index') }}" method="GET" class="bg-white p-3 rounded-[1.5rem] border border-slate-200 shadow-sm grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-3">
|
||
<div class="relative">
|
||
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-300 text-xs"></i>
|
||
<input type="text" name="parent_name" value="{{ request('parent_name') }}" placeholder="Search ancestry..." class="w-full bg-slate-50 border-none rounded-xl text-xs font-bold py-3 pl-11 focus:ring-2 focus:ring-indigo-500/20">
|
||
</div>
|
||
<select name="ras" class="bg-slate-50 border-none rounded-xl text-xs font-bold py-3 focus:ring-2 focus:ring-indigo-500/20 cursor-pointer">
|
||
<option value="">All Breeds</option>
|
||
@foreach($breeds as $breed)
|
||
<option value="{{ $breed }}" {{ request('ras') == $breed ? 'selected' : '' }}>{{ $breed }}</option>
|
||
@endforeach
|
||
</select>
|
||
<select name="registry" class="bg-slate-50 border-none rounded-xl text-xs font-bold py-3 focus:ring-2 focus:ring-indigo-500/20 cursor-pointer">
|
||
<option value="">All Registry</option>
|
||
@foreach($registries as $reg)
|
||
<option value="{{ $reg }}" {{ request('registry') == $reg ? 'selected' : '' }}>{{ $reg }}</option>
|
||
@endforeach
|
||
</select>
|
||
<input type="date" name="start_date" value="{{ request('start_date') }}" class="bg-slate-50 border-none rounded-xl text-xs font-bold py-3 focus:ring-2 focus:ring-indigo-500/20">
|
||
<button type="submit" class="bg-indigo-600 text-white rounded-xl text-[10px] font-black uppercase hover:bg-slate-900 transition-all shadow-md">Apply Filter</button>
|
||
</form>
|
||
|
||
<hr class="border-slate-100 mx-4">
|
||
|
||
{{-- 3. ARCHIVE LIST: Proportional Card Grid --}}
|
||
<div class="space-y-4">
|
||
{{-- Legend Header --}}
|
||
<div class="hidden lg:grid grid-cols-12 px-10 py-1 text-[9px] font-black text-slate-400 uppercase tracking-[0.2em]">
|
||
<div class="col-span-5">Breeding Partnership</div>
|
||
<div class="col-span-3 text-center">Record Statistics</div>
|
||
<div class="col-span-2 text-center">Registrar PIC</div>
|
||
<div class="col-span-2 text-right">Access</div>
|
||
</div>
|
||
|
||
@forelse($mattings as $matting)
|
||
<div class="bg-white border border-slate-200 rounded-[2rem] p-5 hover:border-indigo-400 hover:shadow-xl hover:shadow-indigo-50/50 transition-all group relative overflow-hidden">
|
||
{{-- Decorative Initial In Latar Belakang --}}
|
||
<span class="absolute -right-2 -bottom-4 text-7xl font-black text-slate-50 italic group-hover:text-indigo-50/50 transition-colors select-none z-0">
|
||
{{ substr($matting->pic->name ?? 'S', 0, 1) }}
|
||
</span>
|
||
|
||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-center relative z-10">
|
||
|
||
{{-- Column 1: Identity (Sire/Dam) --}}
|
||
<div class="lg:col-span-5 flex items-center gap-6 min-w-0">
|
||
<div class="flex -space-x-4 shrink-0">
|
||
<img src="{{ $matting->sire->photo ? asset('storage/' . $matting->sire->photo) : asset('images/default-cat.png') }}" class="w-12 h-12 rounded-[1rem] border-4 border-white shadow-md object-cover transform group-hover:-rotate-6 transition-transform">
|
||
<img src="{{ $matting->dam->photo ? asset('storage/' . $matting->dam->photo) : asset('images/default-cat.png') }}" class="w-12 h-12 rounded-[1rem] border-4 border-white shadow-md object-cover transform group-hover:rotate-6 transition-transform">
|
||
</div>
|
||
<div class="min-w-0 flex-1">
|
||
<h4 class="text-sm font-black text-slate-800 uppercase truncate leading-tight mb-1">
|
||
{{ $matting->sire->nama_kucing }} <span class="text-slate-300 mx-1">×</span> {{ $matting->dam->nama_kucing }}
|
||
</h4>
|
||
<div class="flex items-center gap-3">
|
||
<span class="text-[8px] font-black text-indigo-600 bg-indigo-50 px-2 py-0.5 rounded tracking-widest leading-none">#{{ $matting->id }}</span>
|
||
<span class="text-[10px] text-slate-400 font-bold uppercase tracking-tighter leading-none">{{ $matting->sire->ras ?? 'Unknown' }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Column 2: Stats --}}
|
||
<div class="lg:col-span-3 flex items-center justify-around border-y lg:border-y-0 lg:border-x border-slate-100 py-3 lg:py-0 px-4">
|
||
<div class="text-center">
|
||
<p class="text-[8px] text-slate-400 font-black uppercase mb-1 tracking-widest">Offspring</p>
|
||
<p class="text-[13px] font-black text-slate-800 leading-none">{{ $matting->kittens_count }} <span class="text-[10px] text-slate-300 font-bold uppercase ml-0.5">Paws</span></p>
|
||
</div>
|
||
<div class="text-center">
|
||
<p class="text-[8px] text-slate-400 font-black uppercase mb-1 tracking-widest">Duration</p>
|
||
<p class="text-[13px] font-black text-slate-800 leading-none">{{ $matting->tgl_kawin_awal->diffInDays($matting->tgl_kawin_akhir) + 1 }} <span class="text-[10px] text-slate-300 font-bold uppercase ml-0.5">Days</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Column 3: Registrar --}}
|
||
<div class="lg:col-span-2 flex flex-col items-center lg:items-start px-4 min-w-0">
|
||
<p class="text-[8px] text-slate-400 font-black uppercase mb-1.5 tracking-widest">Registrar</p>
|
||
<p class="text-[11px] font-bold text-slate-600 uppercase italic truncate w-full text-center lg:text-left tracking-tight">
|
||
{{ $matting->pic->name ?? 'System' }}
|
||
</p>
|
||
</div>
|
||
|
||
{{-- Column 4: Action (PROTEKSI READ: Mengikuti matriks permission matting_reports) --}}
|
||
<div class="lg:col-span-2 flex justify-end shrink-0">
|
||
@can('check-access', ['matting_reports', 'read'])
|
||
<a href="{{ route('admin.reports.matting.show', $matting->id) }}" class="w-full lg:w-auto px-6 py-3 bg-slate-900 text-white text-[10px] font-black uppercase rounded-2xl hover:bg-indigo-600 transition-all shadow-md flex items-center justify-center gap-2 group-hover:scale-105">
|
||
<i class="fas fa-certificate"></i> View Record
|
||
</a>
|
||
@endcan
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
@empty
|
||
<div class="py-24 bg-white border-2 border-dashed border-slate-100 rounded-[2.5rem] text-center">
|
||
<i class="fas fa-folder-open text-4xl text-slate-100 mb-4"></i>
|
||
<p class="text-slate-400 font-bold uppercase text-[10px] tracking-[0.4em]">Archive is empty</p>
|
||
</div>
|
||
@endforelse
|
||
</div>
|
||
|
||
{{-- 4. PAGINATION (TETAP UTUH) --}}
|
||
<div class="pt-8 flex justify-center">
|
||
{{ $mattings->links() }}
|
||
</div>
|
||
</div>
|
||
</x-app-layout> |