Initial commit: Struktur aplikasi ilycats
This commit is contained in:
Dwi F Sukmana
@@ -0,0 +1,279 @@
|
||||
<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">Registrasi Breeding</h2>
|
||||
<p class="text-[10px] text-slate-500 font-bold uppercase tracking-[0.2em] italic">Earrin Cats Breeding Program</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 Breeding</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">Proses (Monitoring)</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>
|
||||
@@ -0,0 +1,306 @@
|
||||
<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">EDIT BREEDING RECORD</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' : '' }}>MONITORING</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 Upload --}}
|
||||
<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> Update Breeding Record
|
||||
</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 record baru
|
||||
is_pedigree: false
|
||||
});
|
||||
},
|
||||
removeKitten(index) {
|
||||
if(confirm('Hapus record 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>
|
||||
@@ -0,0 +1,219 @@
|
||||
<x-app-layout>
|
||||
<div class="max-w-7xl mx-auto space-y-6 pb-12">
|
||||
{{-- SECTION 1: Header & Statistik --}}
|
||||
<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-tighter uppercase leading-none">Breeding Log</h2>
|
||||
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-widest mt-1 italic">Monitoring silsilah & kelahiran • Real-time Lineage Data</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="hidden sm:block bg-white border border-slate-200 px-4 py-2 rounded-xl shadow-sm">
|
||||
<p class="text-[8px] font-black text-slate-400 uppercase tracking-widest leading-none">Total Program</p>
|
||||
<p class="text-sm font-black text-indigo-600 mt-1">{{ $mattings->total() }}</p>
|
||||
</div>
|
||||
|
||||
{{-- PROTEKSI TOMBOL CREATE MATTING --}}
|
||||
@can('check-access', ['matting', 'create'])
|
||||
<a href="{{ route('matting.create') }}" class="inline-flex items-center px-5 py-3 bg-indigo-600 text-white text-[10px] font-black rounded-xl shadow-lg shadow-indigo-100 hover:bg-indigo-700 transition-all active:scale-95">
|
||||
<i class="fas fa-plus mr-2"></i> INPUT MATTING BARU
|
||||
</a>
|
||||
@endcan
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- SECTION 2: Tabel Matting --}}
|
||||
<div class="bg-white border border-slate-200 rounded-[2rem] overflow-hidden shadow-sm">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse table-auto">
|
||||
<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-4">Indukan (Sire x Dam)</th>
|
||||
<th class="px-4 py-4 text-center">Periode Kawin</th>
|
||||
<th class="px-4 py-4 text-center">Estimasi Lahir</th>
|
||||
<th class="px-4 py-4 text-center">Hasil</th>
|
||||
<th class="px-6 py-4 text-right" style="min-width: 280px;">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100 font-medium text-slate-700">
|
||||
@forelse($mattings as $m)
|
||||
<tr class="hover:bg-slate-50/50 transition-all group">
|
||||
{{-- Pasangan Indukan --}}
|
||||
<td class="px-6 py-4 align-middle">
|
||||
<div class="flex items-center gap-3">
|
||||
@if($m->sire->foto || $m->dam->foto)
|
||||
<div class="flex -space-x-3 shrink-0">
|
||||
@if($m->sire->foto)
|
||||
<div class="w-11 h-11 rounded-xl bg-slate-100 border-2 border-white overflow-hidden shadow-sm">
|
||||
<img src="{{ asset('storage/'.$m->sire->foto) }}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
@endif
|
||||
@if($m->dam->foto)
|
||||
<div class="w-11 h-11 rounded-xl bg-slate-100 border-2 border-white overflow-hidden shadow-sm">
|
||||
<img src="{{ asset('storage/'.$m->dam->foto) }}" class="w-full h-full object-cover">
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="min-w-0">
|
||||
<div class="text-xs font-black text-slate-800 flex items-center gap-1 whitespace-nowrap">
|
||||
{{ $m->sire->nama_kucing }} <i class="fas fa-heart text-[8px] text-rose-400"></i> {{ $m->dam->nama_kucing }}
|
||||
</div>
|
||||
<div class="flex gap-1.5 mt-1.5">
|
||||
<span class="text-[8px] font-black bg-slate-800 text-white px-2 py-0.5 rounded uppercase tracking-tighter shadow-sm">
|
||||
{{ $m->sire->kode_ems ?? 'NO EMS' }}
|
||||
</span>
|
||||
<span class="text-[8px] font-black bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded uppercase border border-indigo-200 tracking-tighter shadow-sm">
|
||||
{{ $m->dam->kode_ems ?? 'NO EMS' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-4 py-4 text-center align-middle whitespace-nowrap">
|
||||
<p class="text-[10px] font-black text-slate-700 leading-none">
|
||||
{{ $m->tgl_kawin_awal->format('d M') }} - {{ $m->tgl_kawin_akhir->format('d M Y') }}
|
||||
</p>
|
||||
<span class="text-[9px] text-slate-400 font-bold italic uppercase">{{ $m->tgl_kawin_awal->diffInDays($m->tgl_kawin_akhir) + 1 }} Hari</span>
|
||||
</td>
|
||||
|
||||
<td class="px-4 py-4 text-center align-middle" x-data="breedingCountdown('{{ $m->tgl_kawin_awal->addDays(63)->format('Y-m-d') }}')">
|
||||
<div :class="isUrgent ? 'bg-rose-50 border-rose-100' : 'bg-indigo-50 border-indigo-100'"
|
||||
class="inline-flex flex-col px-3 py-1.5 rounded-xl border border-dashed transition-all w-28">
|
||||
<div class="flex items-center justify-center gap-1.5 mb-0.5">
|
||||
<i :class="isUrgent ? 'text-rose-500 animate-pulse' : 'text-indigo-400'" class="fas fa-stopwatch text-[9px]"></i>
|
||||
<span class="text-[8px] font-black uppercase" :class="isUrgent ? 'text-rose-600' : 'text-indigo-600'">HPL: {{ $m->tgl_kawin_awal->addDays(63)->format('d/m') }}</span>
|
||||
</div>
|
||||
<p class="text-[10px] font-black" :class="isUrgent ? 'text-rose-700' : 'text-slate-700'">
|
||||
<template x-if="daysRemaining > 0"><span x-text="daysRemaining + ' Hari'"></span></template>
|
||||
<template x-if="daysRemaining === 0"><span>HARI H</span></template>
|
||||
<template x-if="daysRemaining < 0"><span class="text-slate-400 italic">LEWAT</span></template>
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-4 py-4 text-center align-middle whitespace-nowrap">
|
||||
<div class="flex flex-col gap-1 items-center">
|
||||
<span class="px-3 py-1 bg-emerald-50 text-emerald-600 rounded-lg text-[10px] font-black border border-emerald-100 uppercase">
|
||||
{{ $m->kittens_count }} Anak
|
||||
</span>
|
||||
{!! $m->status_badge !!}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="px-6 py-4 text-right align-middle">
|
||||
<div class="flex justify-end items-center gap-16">
|
||||
|
||||
{{-- PROTEKSI TOMBOL EDIT MATTING --}}
|
||||
@can('check-access', ['matting', 'update'])
|
||||
<a href="{{ route('matting.edit', $m->id) }}"
|
||||
class="flex items-center gap-3 p-3 text-slate-400 hover:text-indigo-600 hover:bg-indigo-50 rounded-2xl transition-all group/btn"
|
||||
title="Edit Data">
|
||||
<i class="fas fa-pencil-alt text-base"></i>
|
||||
<span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Edit</span>
|
||||
</a>
|
||||
@endcan
|
||||
|
||||
{{-- PROTEKSI TOMBOL HAPUS MATTING --}}
|
||||
@can('check-access', ['matting', 'delete'])
|
||||
<form action="{{ route('matting.destroy', $m->id) }}" method="POST" class="inline m-0">
|
||||
@csrf @method('DELETE')
|
||||
<button type="button"
|
||||
onclick="confirmDelete(this, '{{ addslashes($m->sire->nama_kucing) }} x {{ addslashes($m->dam->nama_kucing) }}')"
|
||||
class="flex items-center gap-3 p-3 text-slate-400 hover:text-rose-500 hover:bg-rose-50 rounded-2xl transition-all group/btn"
|
||||
title="Hapus Data">
|
||||
<i class="fas fa-trash-alt text-base"></i>
|
||||
<span class="text-[10px] font-black uppercase hidden group-hover/btn:inline tracking-widest">Hapus</span>
|
||||
</button>
|
||||
</form>
|
||||
@endcan
|
||||
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="5" class="px-6 py-20 text-center text-slate-400 uppercase text-[10px] font-black tracking-widest">
|
||||
Belum ada riwayat breeding
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-50/30 border-t border-slate-100">
|
||||
{{ $mattings->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
<script>
|
||||
{{-- Script Alpine Init & SweetAlert Tetap Sama --}}
|
||||
document.addEventListener('alpine:init', () => {
|
||||
Alpine.data('breedingCountdown', (targetDate) => ({
|
||||
target: new Date(targetDate),
|
||||
daysRemaining: 0,
|
||||
isUrgent: false,
|
||||
init() {
|
||||
const now = new Date();
|
||||
now.setHours(0,0,0,0);
|
||||
const targetDateObj = new Date(this.target);
|
||||
targetDateObj.setHours(0,0,0,0);
|
||||
const diffTime = targetDateObj - now;
|
||||
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
|
||||
this.daysRemaining = diffDays;
|
||||
this.isUrgent = diffDays <= 7 && diffDays >= 0;
|
||||
}
|
||||
}));
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const Toast = Swal.mixin({
|
||||
toast: true,
|
||||
position: 'top-end',
|
||||
showConfirmButton: false,
|
||||
timer: 3500,
|
||||
timerProgressBar: true
|
||||
});
|
||||
|
||||
@if(session('success'))
|
||||
Toast.fire({ icon: 'success', title: '{{ session('success') }}' });
|
||||
@endif
|
||||
|
||||
@if(session('error'))
|
||||
Swal.fire({
|
||||
icon: 'info',
|
||||
title: 'Informasi Sistem',
|
||||
text: '{{ session('error') }}',
|
||||
confirmButtonColor: '#4f46e5',
|
||||
customClass: { popup: 'rounded-[2rem]' }
|
||||
});
|
||||
@endif
|
||||
});
|
||||
|
||||
function confirmDelete(button, pairName) {
|
||||
Swal.fire({
|
||||
title: 'Hapus Riwayat?',
|
||||
html: "Anda akan menghapus data breeding:<br><b class='text-indigo-600'>" + pairName + "</b>",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#ef4444',
|
||||
cancelButtonColor: '#64748b',
|
||||
confirmButtonText: 'Ya, Hapus!',
|
||||
cancelButtonText: 'Batal',
|
||||
reverseButtons: true,
|
||||
customClass: { popup: 'rounded-[2rem]' }
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
button.closest('form').submit();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
</x-app-layout>
|
||||
Reference in New Issue
Block a user