280 lines
19 KiB
PHP
280 lines
19 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-7xl mx-auto pb-12">
|
|
{{-- 1. DISPLAY VALIDATION ERRORS --}}
|
|
@if ($errors->any())
|
|
<div class="mb-8 p-6 bg-rose-50 border-2 border-rose-100 rounded-[2.5rem] animate-fade-in shadow-sm">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<i class="fas fa-exclamation-circle text-rose-500 text-xl"></i>
|
|
<h3 class="text-sm font-black text-rose-700 uppercase tracking-widest">Terdapat Kesalahan Input:</h3>
|
|
</div>
|
|
<ul class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-1 border-t border-rose-100 pt-4">
|
|
@foreach ($errors->all() as $error)
|
|
<li class="text-[11px] text-rose-600 font-bold italic">• {{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('matting.store') }}" method="POST" enctype="multipart/form-data" x-data="kittenManager()">
|
|
@csrf
|
|
|
|
{{-- Header & Back Button --}}
|
|
<div class="flex items-center justify-between mb-8">
|
|
<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-3xl font-black text-slate-800 tracking-tighter leading-none mb-1 uppercase">Pencatatan Pembiakan</h2>
|
|
<p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] italic">Program Pembiakan ILYCats</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
{{-- SECTION: SIRE (Bapak) --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6 relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<i class="fas fa-mars text-6xl text-blue-600"></i>
|
|
</div>
|
|
<h4 class="text-xs font-black text-blue-600 uppercase tracking-widest border-b border-blue-50 pb-3 italic">Informasi Sire (Induk Jantan)</h4>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Pilih Sire Internal</label>
|
|
<select name="sire_id" id="sire_select" class="w-full mt-1 rounded-2xl border-slate-100 bg-slate-50 font-bold text-sm focus:ring-blue-500 @error('sire_id') border-rose-500 @enderror">
|
|
<option value="">-- Pilih Kucing Jantan --</option>
|
|
@foreach($sires as $sire)
|
|
<option value="{{ $sire->id }}" {{ old('sire_id') == $sire->id ? 'selected' : '' }}>{{ $sire->nama_kucing }} ({{ $sire->ras }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Tgl Lahir Sire</label>
|
|
<input type="date" name="tgl_lahir_sire" id="sire_birth" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">No. Pedigree Sire</label>
|
|
<input type="text" name="no_pedigree_bapak" id="sire_pedigree" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50" placeholder="Otomatis...">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">No. Microchip Sire</label>
|
|
<input type="text" name="no_microchip_bapak" id="sire_microchip" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50" placeholder="9000xxxxxx">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SECTION: DAM (Ibu) --}}
|
|
<div class="bg-white border border-slate-200 rounded-[2.5rem] p-8 shadow-sm space-y-6 relative overflow-hidden group">
|
|
<div class="absolute top-0 right-0 p-6 opacity-10 group-hover:opacity-20 transition-opacity">
|
|
<i class="fas fa-venus text-6xl text-pink-600"></i>
|
|
</div>
|
|
<h4 class="text-xs font-black text-pink-600 uppercase tracking-widest border-b border-pink-50 pb-3 italic">Informasi Dam (Induk Betina)</h4>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Pilih Dam Internal</label>
|
|
<select name="dam_id" id="dam_select" class="w-full mt-1 rounded-2xl border-slate-100 bg-slate-50 font-bold text-sm focus:ring-pink-500 @error('dam_id') border-rose-500 @enderror">
|
|
<option value="">-- Pilih Kucing Betina --</option>
|
|
@foreach($dams as $dam)
|
|
<option value="{{ $dam->id }}" {{ old('dam_id') == $dam->id ? 'selected' : '' }}>{{ $dam->nama_kucing }} ({{ $dam->ras }})</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Tgl Lahir Dam</label>
|
|
<input type="date" name="tgl_lahir_dam" id="dam_birth" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">No. Pedigree Dam</label>
|
|
<input type="text" name="no_pedigree_ibu" id="dam_pedigree" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50" placeholder="Otomatis...">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">No. Microchip Dam</label>
|
|
<input type="text" name="no_microchip_ibu" id="dam_microchip" class="w-full mt-1 rounded-xl border-slate-100 text-xs font-bold bg-slate-50" placeholder="9000xxxxxx">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SECTION: PERIODE & STATUS --}}
|
|
<div class="bg-slate-900 rounded-[2.5rem] p-8 text-white shadow-2xl mb-12 relative overflow-hidden">
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 relative z-10">
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Status Pembiakan</label>
|
|
<select name="status" class="w-full mt-2 bg-white/10 border-white/10 rounded-xl text-xs font-bold focus:ring-indigo-500 text-white" required>
|
|
<option value="proses" class="text-slate-800">Menunggu konfirmasi</option>
|
|
<option value="hamil" class="text-slate-800">Hamil / menunggu lahir</option>
|
|
<option value="berhasil" class="text-slate-800">Berhasil (Lahir)</option>
|
|
<option value="gagal" class="text-slate-800">Gagal</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Tgl Kawin Awal</label>
|
|
<input type="date" name="tgl_kawin_awal" class="w-full mt-2 bg-white/10 border-white/10 rounded-xl text-xs font-bold focus:ring-indigo-500" required>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Tgl Kawin Akhir</label>
|
|
<input type="date" name="tgl_kawin_akhir" class="w-full mt-2 bg-white/10 border-white/10 rounded-xl text-xs font-bold focus:ring-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase tracking-widest text-slate-400">Anak Hidup</label>
|
|
<input type="number" name="jumlah_anak_hidup" value="0" class="w-full mt-2 bg-white/10 border-white/10 rounded-xl text-xs font-bold focus:ring-indigo-500" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SECTION: DYNAMIC KITTENS (Daftar Anak) --}}
|
|
<div class="space-y-6">
|
|
<div class="flex items-center justify-between border-b border-slate-100 pb-4">
|
|
<div>
|
|
<h3 class="text-2xl font-black text-slate-800 tracking-tighter uppercase leading-none">Daftar Anak (Kittens)</h3>
|
|
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1 italic">Profil otomatis masuk ke Manajemen Pasien</p>
|
|
</div>
|
|
<button type="button" @click="addKitten" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white text-[10px] font-black rounded-2xl shadow-lg hover:bg-indigo-700 transition-all active:scale-95">
|
|
<i class="fas fa-plus-circle mr-2 text-sm"></i> TAMBAH ANAK
|
|
</button>
|
|
</div>
|
|
|
|
<template x-for="(kitten, index) in kittens" :key="index">
|
|
<div class="bg-white border-2 border-dashed border-slate-200 p-8 rounded-[3rem] relative space-y-8 animate-fade-in shadow-sm hover:border-indigo-200 transition-all">
|
|
<button type="button" @click="removeKitten(index)" class="absolute top-6 right-6 w-10 h-10 bg-rose-50 text-rose-500 rounded-full flex items-center justify-center hover:bg-rose-500 hover:text-white transition-all shadow-sm">
|
|
<i class="fas fa-times text-sm"></i>
|
|
</button>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6">
|
|
<div class="md:col-span-2">
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Nama Anak</label>
|
|
<input type="text" :name="`kittens[${index}][nama]`" x-model="kitten.nama" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 text-xs font-bold" placeholder="Masukkan nama..." required>
|
|
</div>
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Jenis Kelamin</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-[10px] font-black uppercase text-slate-400 ml-2">Tanggal 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>
|
|
|
|
{{-- PERUBAHAN DISINI: Grid untuk Registry (Multiple) --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 items-start border-t border-slate-50 pt-6">
|
|
<div class="md:col-span-2 space-y-2">
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-1">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-3 text-center border-2 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 uppercase">
|
|
<span x-text="regOption"></span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2">Kode EMS</label>
|
|
<input type="text" :name="`kittens[${index}][kode_ems]`" class="w-full mt-1 rounded-xl border-slate-100 bg-slate-50 text-xs font-bold" placeholder="PER d 62">
|
|
</div>
|
|
|
|
<div class="flex items-center h-12 gap-3 px-4 bg-slate-50 rounded-xl border border-slate-100 mt-6">
|
|
<input type="checkbox" :name="`kittens[${index}][is_pedigree]`" value="1" class="rounded text-indigo-600 focus:ring-indigo-500">
|
|
<label class="text-[10px] font-black uppercase text-slate-600">Sertifikat OK</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pt-6 border-t border-slate-100">
|
|
<label class="text-[10px] font-black uppercase text-slate-400 ml-2 mb-3 block italic">Dokumen Pedigree (Slot 1-4)</label>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<template x-for="n in 4" :key="n">
|
|
<div class="p-3 bg-slate-50/50 rounded-2xl border border-slate-100 text-center">
|
|
<input type="file" :name="`kittens[${index}][foto_ped_${n}]`" class="text-[9px] w-full file:mr-2 file:py-1 file:px-2 file:rounded-lg file:border-0 file:text-[9px] file:font-black file:bg-indigo-50 file:text-indigo-600">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div x-show="kittens.length === 0" class="text-center py-20 bg-slate-50/50 rounded-[3rem] border-2 border-dashed border-slate-200">
|
|
<i class="fas fa-paw text-slate-200 text-6xl mb-4"></i>
|
|
<p class="text-slate-400 italic text-sm font-black uppercase tracking-widest">Belum ada data kelahiran ditambahkan</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 flex justify-end">
|
|
<button type="submit" class="w-full md:w-auto px-12 py-5 bg-indigo-600 text-white rounded-[2rem] font-black text-sm shadow-2xl hover:bg-indigo-700 transition-all active:scale-95 uppercase tracking-widest">
|
|
<i class="fas fa-save mr-2"></i> Finalisasi & Simpan Data
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function kittenManager() {
|
|
return {
|
|
kittens: [],
|
|
addKitten() {
|
|
this.kittens.push({
|
|
nama: '',
|
|
jenis_kelamin: 'Jantan',
|
|
tgl_lahir: '',
|
|
registry: [], // HARUS ARRAY agar checkbox bekerja
|
|
});
|
|
},
|
|
removeKitten(index) {
|
|
this.kittens.splice(index, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
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) {
|
|
if (birthEl) birthEl.value = '';
|
|
if (pedEl) pedEl.value = '';
|
|
if (chipEl) chipEl.value = '';
|
|
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('Fetch 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> |