353 lines
23 KiB
PHP
353 lines
23 KiB
PHP
<?php if (isset($component)) { $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54 = $component; } ?>
|
|
<?php if (isset($attributes)) { $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54 = $attributes; } ?>
|
|
<?php $component = App\View\Components\AppLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
|
<?php $component->withName('app-layout'); ?>
|
|
<?php if ($component->shouldRender()): ?>
|
|
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
|
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
|
<?php $attributes = $attributes->except(\App\View\Components\AppLayout::ignoredParameterNames()); ?>
|
|
<?php endif; ?>
|
|
<?php $component->withAttributes([]); ?>
|
|
<div class="max-w-[1600px] mx-auto space-y-8 pb-12">
|
|
|
|
<div class="flex items-center gap-4 px-2">
|
|
<a href="<?php echo e(route('cats.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-tight leading-none">Bulk Treatment Manager</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic uppercase tracking-widest mt-1">Manajemen Tindakan Medis Masal • Ily Cattery</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="<?php echo e(route('medical-records.bulk.store')); ?>" method="POST">
|
|
<?php echo csrf_field(); ?>
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-8 px-2">
|
|
|
|
|
|
<div class="lg:col-span-5 space-y-6">
|
|
<div x-data="catSelector()" class="bg-white border border-slate-200 rounded-[3rem] p-8 shadow-sm h-full flex flex-col relative overflow-hidden">
|
|
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div class="flex items-center gap-3">
|
|
<h4 class="font-black text-slate-800 uppercase tracking-tighter text-lg">Pilih Kucing</h4>
|
|
<div x-show="selectedCount > 0" x-transition x-cloak class="flex items-center">
|
|
<span class="bg-indigo-100 text-indigo-700 text-[10px] font-black px-2.5 py-1 rounded-lg uppercase tracking-widest border border-indigo-200 shadow-sm">
|
|
<span x-text="selectedCount"></span> Terpilih
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<input type="checkbox" id="select_all" x-model="selectAll" @change="toggleAll()" class="w-4 h-4 text-indigo-600 border-slate-300 rounded focus:ring-indigo-500 cursor-pointer">
|
|
<label for="select_all" class="text-[10px] font-black text-slate-400 uppercase tracking-widest cursor-pointer hover:text-indigo-600 transition-colors">Pilih Semua</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="relative mb-6">
|
|
<i class="fas fa-search absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-xs"></i>
|
|
<input type="text" x-model="search" @input="resetPage()" placeholder="Cari nama atau kode kucing..." class="w-full pl-11 pr-4 py-3.5 bg-slate-50 border border-slate-200 rounded-2xl text-xs font-bold focus:ring-4 focus:ring-indigo-500/10 outline-none transition-all placeholder:text-slate-400">
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 overflow-y-auto custom-scrollbar pr-2 space-y-3" style="max-height: 450px;">
|
|
<template x-for="cat in paginatedCats" :key="cat.id">
|
|
<label class="flex items-center gap-4 p-4 rounded-3xl border transition-all cursor-pointer group"
|
|
:class="selectedCats.includes(cat.id.toString()) ? 'border-indigo-400 bg-indigo-50/80 ring-1 ring-indigo-400 shadow-md' : 'border-slate-100 bg-slate-50/50 hover:bg-indigo-50 hover:border-indigo-100'">
|
|
|
|
<input type="checkbox" name="cat_ids[]" :value="cat.id" x-model="selectedCats" @change="updateSelectAll()" class="cat-checkbox w-5 h-5 text-indigo-600 border-slate-300 rounded-lg focus:ring-indigo-500 transition-all cursor-pointer">
|
|
|
|
<div class="w-12 h-12 rounded-2xl overflow-hidden border-2 shadow-sm shrink-0" :class="selectedCats.includes(cat.id.toString()) ? 'border-indigo-200' : 'border-white'">
|
|
<img :src="cat.foto_url" class="w-full h-full object-cover">
|
|
</div>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-sm font-black uppercase truncate leading-none mb-1 transition-colors" :class="selectedCats.includes(cat.id.toString()) ? 'text-indigo-900' : 'text-slate-800'" x-text="cat.nama_kucing"></p>
|
|
<span class="text-[8px] font-black text-slate-400 uppercase tracking-widest" x-text="`${cat.ras} • ${cat.lokasi_kandang || 'Global'}`"></span>
|
|
</div>
|
|
|
|
<div class="text-right">
|
|
<span class="px-2 py-1 bg-white border border-slate-100 rounded-lg text-[8px] font-black text-slate-400 uppercase" x-text="`#${cat.id}`"></span>
|
|
</div>
|
|
</label>
|
|
</template>
|
|
|
|
<div x-show="paginatedCats.length === 0" x-cloak class="py-10 text-center text-slate-400">
|
|
<i class="fas fa-folder-open text-3xl mb-3 opacity-50"></i>
|
|
<p class="text-xs font-bold uppercase tracking-widest">Tidak ada kucing ditemukan</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-slate-100 flex items-center justify-between" x-show="totalPages > 1" x-cloak>
|
|
<button type="button" @click="prevPage()" :disabled="currentPage === 1" class="p-2 bg-slate-50 text-slate-400 rounded-xl hover:bg-indigo-50 hover:text-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
|
|
<i class="fas fa-chevron-left text-xs"></i>
|
|
</button>
|
|
|
|
<span class="text-[10px] font-black text-slate-400 uppercase tracking-widest">
|
|
Halaman <span class="text-indigo-600" x-text="currentPage"></span> dari <span x-text="totalPages"></span>
|
|
</span>
|
|
|
|
<button type="button" @click="nextPage()" :disabled="currentPage === totalPages" class="p-2 bg-slate-50 text-slate-400 rounded-xl hover:bg-indigo-50 hover:text-indigo-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all">
|
|
<i class="fas fa-chevron-right text-xs"></i>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="lg:col-span-7 space-y-6">
|
|
<div class="bg-indigo-600 rounded-[3rem] p-10 text-white shadow-xl shadow-indigo-100 relative overflow-hidden h-full flex flex-col justify-between">
|
|
<div class="relative z-10 space-y-8">
|
|
<div>
|
|
<h3 class="text-2xl font-black uppercase tracking-tight">Treatment Configuration</h3>
|
|
<p class="text-indigo-100 text-xs font-bold italic tracking-tighter uppercase">Terapkan tindakan & potong stok otomatis</p>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Jenis Tindakan</label>
|
|
<select name="type" id="type_selector" onchange="adjustBulkForm()" required class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white focus:ring-4 focus:ring-white/10 outline-none appearance-none cursor-pointer">
|
|
<option value="Vaccine" class="text-slate-800">Vaksinasi</option>
|
|
<option value="Deworming" class="text-slate-800">Obat Cacing</option>
|
|
<option value="Flea Treatment" class="text-slate-800">Obat Kutu</option>
|
|
<option value="Grooming" class="text-slate-800">Grooming (Tanpa Obat)</option>
|
|
<option value="Medical Checkup" class="text-slate-800">Medical Checkup (Multi-Obat)</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Tanggal Pemberian</label>
|
|
<input type="date" name="date_given" value="<?php echo e(date('Y-m-d')); ?>" required class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div id="medicine_container" class="space-y-4">
|
|
<div class="medicine-row grid grid-cols-1 md:grid-cols-7 gap-4 p-6 bg-white/5 rounded-[2.5rem] border border-white/10 relative">
|
|
<div class="md:col-span-3 space-y-2">
|
|
<label class="text-[9px] font-black text-indigo-200 uppercase">Nama Produk</label>
|
|
|
|
<select name="medicines[0][name]" onchange="updateMedicineDetails(this)" required class="medicine-name-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black cursor-pointer focus:ring-4 focus:ring-indigo-500/30 outline-none">
|
|
<option value="" disabled selected>-- Pilih Obat / Vitamin --</option>
|
|
<?php $__currentLoopData = $availableMedicines; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $med): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
|
|
<option value="<?php echo e($med->nama_obat); ?>"><?php echo e($med->nama_obat); ?> (Sisa: <?php echo e((float)$med->qty); ?> <?php echo e($med->unit); ?>)</option>
|
|
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-2 space-y-2">
|
|
<label class="text-[9px] font-black text-indigo-200 uppercase">Dosis (Per Kucing)</label>
|
|
|
|
<input type="text" name="medicines[0][dosage]" placeholder="Cth: 1 atau 1/2" required class="dosage-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black">
|
|
</div>
|
|
<div class="md:col-span-2 space-y-2">
|
|
<label class="text-[9px] font-black text-indigo-200 uppercase">Satuan</label>
|
|
<input type="text" name="medicines[0][unit]" placeholder="-" readonly class="unit-display w-full px-4 py-3 bg-indigo-500/30 text-indigo-100 border border-white/10 rounded-xl text-[10px] font-black uppercase">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="add_med_btn" onclick="addBulkMedicineRow()" class="hidden items-center gap-2 text-[10px] font-black text-white uppercase tracking-widest hover:text-indigo-200 transition-all cursor-pointer">
|
|
<i class="fas fa-plus-circle"></i> Tambah Obat Lain
|
|
</button>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Rencana Selanjutnya</label>
|
|
<input type="date" name="next_schedule" class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white">
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] font-black text-indigo-200 uppercase ml-1 tracking-widest">Catatan (Notes)</label>
|
|
<textarea name="notes" placeholder="Berlaku untuk semua kucing yang dipilih..." class="w-full px-5 py-4 bg-white/10 border border-white/20 rounded-2xl text-xs font-black text-white h-14 outline-none focus:ring-4 focus:ring-white/10"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mt-8">
|
|
<button type="submit" class="w-full py-6 bg-white text-indigo-600 font-black rounded-[2rem] text-xs uppercase tracking-[0.4em] shadow-2xl hover:scale-[1.02] transition-all active:scale-95">
|
|
APPLY TO SELECTED CATS
|
|
</button>
|
|
</div>
|
|
<i class="fas fa-heartbeat absolute -bottom-10 -left-10 text-[15rem] text-white/5"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<?php $__env->startPush('scripts'); ?>
|
|
<?php
|
|
// Mengolah data kucing agar aman untuk dibaca oleh AlpineJS
|
|
$catData = $cats->map(function($cat) {
|
|
return [
|
|
'id' => $cat->id,
|
|
'nama_kucing' => $cat->nama_kucing,
|
|
'ras' => $cat->ras,
|
|
'lokasi_kandang' => $cat->lokasi_kandang,
|
|
'foto_url' => $cat->foto_url
|
|
];
|
|
})->values()->toArray();
|
|
?>
|
|
|
|
<script>
|
|
// Data Global untuk Javascript
|
|
const allCatsData = <?php echo json_encode($catData, 15, 512) ?>;
|
|
const availableMeds = <?php echo json_encode($availableMedicines, 15, 512) ?>;
|
|
|
|
// ALPINE JS COMPONENT: Penanganan Pilih Kucing & Pagination
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data('catSelector', () => ({
|
|
search: '',
|
|
currentPage: 1,
|
|
itemsPerPage: 10,
|
|
selectedCats: [],
|
|
selectAll: false,
|
|
allCats: allCatsData,
|
|
|
|
get filteredCats() {
|
|
if (this.search === '') return this.allCats;
|
|
const term = this.search.toLowerCase();
|
|
return this.allCats.filter(cat =>
|
|
cat.nama_kucing.toLowerCase().includes(term) ||
|
|
(cat.lokasi_kandang && cat.lokasi_kandang.toLowerCase().includes(term))
|
|
);
|
|
},
|
|
|
|
get totalPages() { return Math.ceil(this.filteredCats.length / this.itemsPerPage) || 1; },
|
|
|
|
get paginatedCats() {
|
|
const start = (this.currentPage - 1) * this.itemsPerPage;
|
|
return this.filteredCats.slice(start, start + this.itemsPerPage);
|
|
},
|
|
|
|
get selectedCount() { return this.selectedCats.length; },
|
|
|
|
nextPage() { if (this.currentPage < this.totalPages) this.currentPage++; },
|
|
prevPage() { if (this.currentPage > 1) this.currentPage--; },
|
|
|
|
resetPage() {
|
|
this.currentPage = 1;
|
|
this.updateSelectAll();
|
|
},
|
|
|
|
toggleAll() {
|
|
if (this.selectAll) {
|
|
const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
|
|
currentVisibleIds.forEach(id => {
|
|
if (!this.selectedCats.includes(id)) { this.selectedCats.push(id); }
|
|
});
|
|
} else {
|
|
const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
|
|
this.selectedCats = this.selectedCats.filter(id => !currentVisibleIds.includes(id));
|
|
}
|
|
},
|
|
|
|
updateSelectAll() {
|
|
if (this.filteredCats.length === 0) {
|
|
this.selectAll = false;
|
|
return;
|
|
}
|
|
const currentVisibleIds = this.filteredCats.map(c => c.id.toString());
|
|
this.selectAll = currentVisibleIds.every(id => this.selectedCats.includes(id));
|
|
}
|
|
}));
|
|
});
|
|
|
|
// ---------------------------------------------------------
|
|
// LOGIKA FORM OBAT (AUTO-READ SATUAN DARI DATABASE)
|
|
// ---------------------------------------------------------
|
|
let medRowCount = 1;
|
|
|
|
// HTML untuk opsi select baru (Tambah Obat Lain)
|
|
const medOptionsHtml = `<option value="" disabled selected>-- Pilih Obat / Vitamin --</option>` +
|
|
availableMeds.map(med => `<option value="${med.nama_obat}">${med.nama_obat} (Sisa: ${parseFloat(med.qty)} ${med.unit})</option>`).join('');
|
|
|
|
// 1. FUNGSI MENARIK SATUAN OTOMATIS SAAT OBAT DIPILIH
|
|
function updateMedicineDetails(selectElement) {
|
|
const row = selectElement.closest('.medicine-row');
|
|
const unitInput = row.querySelector('.unit-display');
|
|
|
|
const selectedName = selectElement.value;
|
|
// Cari data obat dari array database
|
|
const medicine = availableMeds.find(m => m.nama_obat === selectedName);
|
|
|
|
if (medicine) {
|
|
// Tuliskan langsung satuannya (Misal: Botol, ML, PCS)
|
|
unitInput.value = medicine.unit;
|
|
} else {
|
|
unitInput.value = '-';
|
|
}
|
|
}
|
|
|
|
// 2. FUNGSI TAMPIL / SEMBUNYI FORM
|
|
function adjustBulkForm() {
|
|
const type = document.getElementById('type_selector').value;
|
|
const container = document.getElementById('medicine_container');
|
|
const addBtn = document.getElementById('add_med_btn');
|
|
const medInputs = document.querySelectorAll('.medicine-name-input');
|
|
|
|
container.classList.remove('hidden');
|
|
addBtn.classList.add('hidden');
|
|
|
|
if (type === 'Grooming') {
|
|
container.classList.add('hidden');
|
|
medInputs.forEach(i => i.required = false);
|
|
} else {
|
|
container.classList.remove('hidden');
|
|
medInputs.forEach(i => i.required = true);
|
|
|
|
if (type === 'Medical Checkup') {
|
|
addBtn.classList.remove('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateBulkUnits(val) {
|
|
document.querySelectorAll('.unit-display').forEach(u => u.value = val);
|
|
}
|
|
|
|
// 3. FUNGSI TAMBAH BARIS OBAT BARU
|
|
function addBulkMedicineRow() {
|
|
const container = document.getElementById('medicine_container');
|
|
const row = document.createElement('div');
|
|
row.className = 'medicine-row grid grid-cols-1 md:grid-cols-7 gap-4 p-6 bg-white/10 rounded-[2.5rem] border border-white/5 mt-4 relative';
|
|
row.innerHTML = `
|
|
<div class="md:col-span-3 space-y-2">
|
|
<select name="medicines[${medRowCount}][name]" onchange="updateMedicineDetails(this)" required class="medicine-name-input w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black cursor-pointer focus:ring-4 focus:ring-indigo-500/30 outline-none">
|
|
${medOptionsHtml}
|
|
</select>
|
|
</div>
|
|
<div class="md:col-span-2 space-y-2">
|
|
<input type="text" name="medicines[${medRowCount}][dosage]" placeholder="Cth: 1 atau 1/2" required class="w-full px-4 py-3 bg-white text-slate-800 border-none rounded-xl text-xs font-black">
|
|
</div>
|
|
<div class="md:col-span-2 flex items-center gap-2">
|
|
<input type="text" name="medicines[${medRowCount}][unit]" placeholder="-" value="" readonly class="unit-display w-full px-4 py-3 bg-indigo-500/30 text-indigo-100 border border-white/10 rounded-xl text-[10px] font-black uppercase">
|
|
<button type="button" onclick="this.parentElement.parentElement.remove()" class="text-white hover:text-rose-200 transition-colors"><i class="fas fa-times-circle text-lg"></i></button>
|
|
</div>
|
|
`;
|
|
container.appendChild(row);
|
|
medRowCount++;
|
|
}
|
|
|
|
// Saat halaman pertama kali dimuat
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
adjustBulkForm();
|
|
// Kosongkan semua satuan default bawaan browser jika ada
|
|
document.querySelectorAll('.unit-display').forEach(u => u.value = '');
|
|
});
|
|
|
|
</script>
|
|
<?php $__env->stopPush(); ?>
|
|
<?php echo $__env->renderComponent(); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
|
|
<?php $attributes = $__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
|
|
<?php unset($__attributesOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54)): ?>
|
|
<?php $component = $__componentOriginal9ac128a9029c0e4701924bd2d73d7f54; ?>
|
|
<?php unset($__componentOriginal9ac128a9029c0e4701924bd2d73d7f54); ?>
|
|
<?php endif; ?><?php /**PATH /home/u806112658/domains/earrinasia.com/ilycats/resources/views/pages/cats/medical-bulk.blade.php ENDPATH**/ ?>
|