307 lines
21 KiB
PHP
307 lines
21 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-7xl mx-auto pb-12">
|
|
{{-- 1. DISPLAY VALIDATION ERRORS --}}
|
|
@if ($errors->any())
|
|
<div class="mb-6 p-5 bg-rose-50 border-2 border-rose-100 rounded-[2rem] animate-fade-in shadow-sm">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<i class="fas fa-exclamation-circle text-rose-500"></i>
|
|
<h3 class="text-xs font-black text-rose-700 uppercase tracking-widest">Gagal Memperbarui Data:</h3>
|
|
</div>
|
|
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1">
|
|
@foreach ($errors->all() as $error)
|
|
<li class="text-[10px] text-rose-600 font-bold italic">• {{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('matting.update', $matting->id) }}" method="POST" enctype="multipart/form-data"
|
|
x-data="kittenManager({{ $matting->kittens->toJson() }})">
|
|
@csrf
|
|
@method('PATCH')
|
|
|
|
{{-- Header --}}
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-4">
|
|
<a href="{{ route('matting.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>
|
|
<h2 class="text-2xl font-black text-slate-800 tracking-tighter leading-none mb-1">UBAH DATA PEMBIAKAN</h2>
|
|
<p class="text-[10px] text-slate-500 font-bold uppercase tracking-widest italic">Litter ID: #{{ str_pad($matting->id, 5, '0', STR_PAD_LEFT) }} • Update Lineage</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SIRE & DAM SECTION --}}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
|
|
{{-- SIRE --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm relative overflow-hidden group">
|
|
<div class="absolute -top-4 -right-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<i class="fas fa-mars text-9xl text-blue-600"></i>
|
|
</div>
|
|
<div class="relative z-10 space-y-5">
|
|
<h4 class="text-[11px] font-black text-blue-600 uppercase tracking-widest border-b border-blue-50 pb-3 italic flex items-center gap-2">
|
|
<i class="fas fa-mars"></i> Informasi Sire (Induk Jantan)
|
|
</h4>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Pilih Kucing Jantan</label>
|
|
<select name="sire_id" id="sire_select" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 font-bold text-xs focus:ring-blue-500">
|
|
@foreach($sires as $sire)
|
|
<option value="{{ $sire->id }}" {{ old('sire_id', $matting->sire_id) == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }} ({{ $sire->ras }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Tgl Lahir</label>
|
|
<input type="date" name="tgl_lahir_sire" id="sire_birth" value="{{ old('tgl_lahir_sire', optional($matting->tgl_lahir_sire)->format('Y-m-d')) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">No. Pedigree</label>
|
|
<input type="text" name="no_pedigree_bapak" id="sire_pedigree" value="{{ old('no_pedigree_bapak', $matting->no_pedigree_bapak) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">No. Microchip</label>
|
|
<input type="text" name="no_microchip_bapak" id="sire_microchip" value="{{ old('no_microchip_bapak', $matting->no_microchip_bapak) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- DAM --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-6 shadow-sm relative overflow-hidden group">
|
|
<div class="absolute -top-4 -right-4 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<i class="fas fa-venus text-9xl text-pink-600"></i>
|
|
</div>
|
|
<div class="relative z-10 space-y-5">
|
|
<h4 class="text-[11px] font-black text-pink-600 uppercase tracking-widest border-b border-pink-50 pb-3 italic flex items-center gap-2">
|
|
<i class="fas fa-venus"></i> Informasi Dam (Induk Betina)
|
|
</h4>
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Pilih Kucing Betina</label>
|
|
<select name="dam_id" id="dam_select" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 font-bold text-xs focus:ring-pink-500">
|
|
@foreach($dams as $dam)
|
|
<option value="{{ $dam->id }}" {{ old('dam_id', $matting->dam_id) == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }} ({{ $dam->ras }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Tgl Lahir</label>
|
|
<input type="date" name="tgl_lahir_dam" id="dam_birth" value="{{ old('tgl_lahir_dam', optional($matting->tgl_lahir_dam)->format('Y-m-d')) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">No. Pedigree</label>
|
|
<input type="text" name="no_pedigree_ibu" id="dam_pedigree" value="{{ old('no_pedigree_ibu', $matting->no_pedigree_ibu) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">No. Microchip</label>
|
|
<input type="text" name="no_microchip_ibu" id="dam_microchip" value="{{ old('no_microchip_ibu', $matting->no_microchip_ibu) }}" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- PERIODE & STATUS --}}
|
|
<div class="bg-slate-900 rounded-[2rem] p-6 text-white shadow-xl mb-10">
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 mb-1 block">Status</label>
|
|
<select name="status" class="w-full bg-white/10 border-white/10 rounded-xl py-3 text-xs font-black text-white">
|
|
<option value="proses" class="text-slate-800" {{ $matting->status == 'proses' ? 'selected' : '' }}>MENUNGGU KONFIRMASI</option>
|
|
<option value="hamil" class="text-slate-800" {{ $matting->status == 'hamil' ? 'selected' : '' }}>HAMIL / MENUNGGU LAHIR</option>
|
|
<option value="berhasil" class="text-slate-800" {{ $matting->status == 'berhasil' ? 'selected' : '' }}>BERHASIL</option>
|
|
<option value="gagal" class="text-slate-800" {{ $matting->status == 'gagal' ? 'selected' : '' }}>GAGAL</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 mb-1 block">Kawin Awal</label>
|
|
<input type="date" name="tgl_kawin_awal" value="{{ old('tgl_kawin_awal', optional($matting->tgl_kawin_awal)->format('Y-m-d')) }}" class="w-full bg-white/10 border-white/10 rounded-xl py-3 text-xs font-black">
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 mb-1 block">Kawin Akhir</label>
|
|
<input type="date" name="tgl_kawin_akhir" value="{{ old('tgl_kawin_akhir', optional($matting->tgl_kawin_akhir)->format('Y-m-d')) }}" class="w-full bg-white/10 border-white/10 rounded-xl py-3 text-xs font-black">
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 mb-1 block">Anak Hidup</label>
|
|
<input type="number" name="jumlah_anak_hidup" value="{{ old('jumlah_anak_hidup', $matting->jumlah_anak_hidup) }}" class="w-full bg-white/10 border-white/10 rounded-xl py-3 text-xs font-black">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KITTENS DYNAMIC SECTION --}}
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-4">
|
|
<h3 class="text-xl font-black text-slate-800 tracking-tighter uppercase italic">Daftar Kittens</h3>
|
|
<button type="button" @click="addKitten" class="px-6 py-3 bg-indigo-600 text-white text-[10px] font-black rounded-xl shadow-lg hover:bg-indigo-700 transition-all">
|
|
<i class="fas fa-plus-circle mr-2"></i> TAMBAH ANAK
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6">
|
|
<template x-for="(kitten, index) in kittens" :key="index">
|
|
<div class="bg-white border-2 border-slate-100 p-6 rounded-[2.5rem] relative space-y-6 animate-fade-in hover:border-indigo-200 transition-all">
|
|
<input type="hidden" :name="`kittens[${index}][id]`" x-model="kitten.id">
|
|
|
|
<button type="button" @click="removeKitten(index)" class="absolute top-4 right-4 w-10 h-10 bg-rose-50 text-rose-500 rounded-xl flex items-center justify-center hover:bg-rose-500 hover:text-white transition-all">
|
|
<i class="fas fa-times text-xs"></i>
|
|
</button>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div class="md:col-span-2">
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Nama Kitten</label>
|
|
<input type="text" :name="`kittens[${index}][nama]`" x-model="kitten.nama" class="w-full mt-1 px-4 py-3 rounded-xl border-slate-100 bg-slate-50 text-xs font-black text-slate-800" required>
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Gender</label>
|
|
<select :name="`kittens[${index}][jenis_kelamin]`" x-model="kitten.jenis_kelamin" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 text-xs font-bold">
|
|
<option value="Jantan">Jantan</option>
|
|
<option value="Betina">Betina</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Tgl Lahir</label>
|
|
<input type="date" :name="`kittens[${index}][tgl_lahir]`" x-model="kitten.tgl_lahir" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 text-xs font-bold" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 items-start pt-2">
|
|
{{-- PERBAIKAN: REGISTRY MULTIPLE CHOICE --}}
|
|
<div class="md:col-span-2 space-y-2">
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1 block">Registry / Federasi (Pilihan Ganda)</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
|
|
<template x-for="regOption in ['ICA', 'CFA', 'WCF', 'FFF']" :key="regOption">
|
|
<label class="block cursor-pointer group">
|
|
<input type="checkbox"
|
|
:name="`kittens[${index}][registry][]`"
|
|
:value="regOption"
|
|
x-model="kitten.registry"
|
|
class="sr-only peer">
|
|
<div class="py-2.5 text-center border border-slate-100 rounded-xl text-[9px] font-black text-slate-400
|
|
peer-checked:bg-indigo-600 peer-checked:text-white peer-checked:border-indigo-600
|
|
transition-all shadow-sm group-hover:border-slate-300">
|
|
<span x-text="regOption"></span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1">Kode EMS</label>
|
|
<input type="text" :name="`kittens[${index}][kode_ems]`" x-model="kitten.kode_ems" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 text-xs font-black" placeholder="EMS">
|
|
</div>
|
|
<div class="flex items-center h-11 gap-3 px-4 bg-slate-50 rounded-xl border border-slate-100 mt-5">
|
|
<input type="checkbox" :name="`kittens[${index}][is_pedigree]`" x-model="kitten.is_pedigree" class="w-4 h-4 rounded text-indigo-600 focus:ring-indigo-500">
|
|
<label class="text-[9px] font-black uppercase text-slate-600">Pedigree OK</label>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- File Unggah --}}
|
|
<div class="pt-4 border-t border-slate-50">
|
|
<label class="text-[9px] font-black uppercase text-slate-400 ml-1 mb-2 block italic">Documents (Max 4)</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-3">
|
|
<template x-for="n in 4" :key="n">
|
|
<div class="p-3 bg-slate-50 rounded-xl border border-slate-100">
|
|
<div class="flex justify-between items-center mb-1.5">
|
|
<span class="text-[8px] font-black text-slate-300 uppercase">Slot <span x-text="n"></span></span>
|
|
<template x-if="kitten[`foto_ped_${n}`]">
|
|
<span class="flex h-1.5 w-1.5 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.6)]"></span>
|
|
</template>
|
|
</div>
|
|
<input type="file" :name="`kittens[${index}][foto_ped_${n}]`" class="text-[8px] w-full file:mr-2 file:py-1 file:px-2 file:rounded-lg file:border-0 file:text-[8px] file:font-black file:bg-white file:text-indigo-600 cursor-pointer">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 flex justify-end">
|
|
<button type="submit" class="px-12 py-5 bg-slate-900 text-white rounded-[2rem] font-black text-[10px] uppercase tracking-[0.2em] shadow-2xl hover:bg-black transition-all">
|
|
<i class="fas fa-sync-alt mr-2"></i> Perbarui data pembiakan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function kittenManager(initialKittens) {
|
|
return {
|
|
kittens: initialKittens.map(k => {
|
|
// Logic untuk memastikan registry selalu dalam bentuk Array di Alpine
|
|
let registryArray = [];
|
|
if (Array.isArray(k.registry)) {
|
|
registryArray = k.registry;
|
|
} else if (typeof k.registry === 'string') {
|
|
try {
|
|
registryArray = JSON.parse(k.registry);
|
|
} catch(e) {
|
|
registryArray = k.registry.split(',').map(s => s.trim());
|
|
}
|
|
}
|
|
|
|
return {
|
|
...k,
|
|
tgl_lahir: k.tgl_lahir ? k.tgl_lahir.split('T')[0] : '',
|
|
is_pedigree: k.is_pedigree == 1,
|
|
registry: registryArray // Sekarang dipastikan Array
|
|
};
|
|
}),
|
|
addKitten() {
|
|
const defaultDate = document.querySelector('input[name="tgl_kawin_awal"]').value;
|
|
this.kittens.push({
|
|
id: null,
|
|
nama: '',
|
|
jenis_kelamin: 'Jantan',
|
|
tgl_lahir: defaultDate,
|
|
kode_ems: '',
|
|
registry: [], // Inisialisasi array kosong untuk data baru
|
|
is_pedigree: false
|
|
});
|
|
},
|
|
removeKitten(index) {
|
|
if(confirm('Hapus data anak ini? Profil di Manajemen Pasien juga akan terhapus setelah disimpan.')) {
|
|
this.kittens.splice(index, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Logic Autocomplete sama seperti sebelumnya
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
function setupAutocomplete(selectId, birthId, pedigreeId, microchipId) {
|
|
const selectEl = document.getElementById(selectId);
|
|
const birthEl = document.getElementById(birthId);
|
|
const pedEl = document.getElementById(pedigreeId);
|
|
const chipEl = document.getElementById(microchipId);
|
|
|
|
if (!selectEl) return;
|
|
selectEl.addEventListener('change', function() {
|
|
const catId = this.value;
|
|
if (!catId) return;
|
|
fetch(`/api/cats/${catId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (birthEl) birthEl.value = data.tgl_lahir || '';
|
|
if (pedEl) pedEl.value = data.pedigree || '';
|
|
if (chipEl) chipEl.value = data.microchip || '';
|
|
})
|
|
.catch(error => console.error('Error:', error));
|
|
});
|
|
}
|
|
setupAutocomplete('sire_select', 'sire_birth', 'sire_pedigree', 'sire_microchip');
|
|
setupAutocomplete('dam_select', 'dam_birth', 'dam_pedigree', 'dam_microchip');
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |