143 lines
7.0 KiB
PHP
143 lines
7.0 KiB
PHP
@props(['batches'])
|
|
|
|
<div x-show="openModal === 'harianAyam'" x-cloak class="fixed inset-0 flex items-center justify-center z-50 bg-black/15"
|
|
x-transition>
|
|
<div class="bg-white w-1/3 p-6 rounded-lg shadow-lg relative">
|
|
|
|
<button @click="openModal = null"
|
|
class="absolute top-6 right-6 text-gray-500 hover:text-red-500 text-xl font-bold">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
|
|
<h2 class="text-2xl font-semibold mb-4">Form Input Data Harian Ayam</h2>
|
|
<form method="POST" action="{{ route('harian.store') }}" onsubmit="return validateForm()">
|
|
@csrf
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<x-input-label for="dailyBatchName" :value="__('Nama Populasi')" required />
|
|
<select id="dailyBatchName" name="dailyBatchName" onchange="fetchBatchRemainingPopulation()"
|
|
class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] focus:shadow-[2px_2px_0px_2px_#374151] focus:translate-y-0.5 focus:translate-x-0.5 rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700 text-gray-700 leading-5 transition duration-150 ease-in-out block mt-1 w-full py-2.5 mb-1">
|
|
<option value="" disabled selected>Pilih Populasi</option>
|
|
@foreach ($batches as $batch)
|
|
<option value="{{ $batch->id }}" data-jumlah="{{ $batch->jumlah_ayam_masuk }}">
|
|
{{ $batch->nama_batch }} ({{ $batch->jumlah_ayam_masuk }} Ayam)
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
<div class="text-sm mt-1">
|
|
<span class="text-green-600 font-semibold" id="jumlahAyamTersedia">Jumlah ayam tersedia:
|
|
-</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<x-input-label for="dailyDate" :value="__('Tanggal Input')" required />
|
|
<x-text-input id="dailyDate" name="dailyDate" type="date" class="block mt-1 w-full py-2.5" />
|
|
</div>
|
|
<div>
|
|
<x-input-label for="sickChicken" :value="__('Jumlah Ayam Sakit')" required />
|
|
<x-text-input id="sickChicken" name="sickChicken" type="number"
|
|
class="block mt-1 w-full py-2.5 mb-1"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, ''); validateChickenCounts()" />
|
|
<span class="text-red-500 text-sm" id="errorSick"></span>
|
|
</div>
|
|
<div>
|
|
<x-input-label for="deadChicken" :value="__('Jumlah Ayam Mati')" required />
|
|
<x-text-input id="deadChicken" name="deadChicken" type="text"
|
|
class="block mt-1 w-full py-2.5 mb-1"
|
|
oninput="this.value = this.value.replace(/[^0-9]/g, ''); validateChickenCounts()" />
|
|
<span class="text-red-500 text-sm" id="errorDead"></span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-end">
|
|
<x-primary-button id="submitButton"
|
|
class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 w-1/2 text-center bg-orangeCrayola py-2.5">
|
|
{{ __('Simpan Data') }}
|
|
</x-primary-button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let jumlahAyam = 0;
|
|
let jumlahAyamTersedia = 0;
|
|
|
|
function fetchBatchRemainingPopulation() {
|
|
let select = document.getElementById("dailyBatchName");
|
|
if (!select.value) return;
|
|
|
|
let batchId = select.value;
|
|
let selectedOption = select.options[select.selectedIndex];
|
|
jumlahAyam = selectedOption.dataset.jumlah ? parseInt(selectedOption.dataset.jumlah) : 0;
|
|
|
|
document.getElementById("jumlahAyamTersedia").innerHTML =
|
|
`<span class="text-yellow-500">Sedang memuat data...</span>`;
|
|
|
|
fetch(`/get-available-chicken-count/${batchId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
jumlahAyamTersedia = data.available_count;
|
|
|
|
let statusHtml =
|
|
`<span class="font-semibold">Jumlah ayam tersedia: ${jumlahAyamTersedia}</span> dari total ${data.total_population}<br>`;
|
|
statusHtml +=
|
|
`<span class="text-yellow-600">${data.recorded_sick} sakit</span>, <span class="text-red-600">${data.recorded_dead} mati</span>`;
|
|
|
|
document.getElementById("jumlahAyamTersedia").innerHTML = statusHtml;
|
|
|
|
let sickInput = document.getElementById("sickChicken");
|
|
let deadInput = document.getElementById("deadChicken");
|
|
|
|
if (parseInt(sickInput.value || 0) + parseInt(deadInput.value || 0) > jumlahAyamTersedia) {
|
|
sickInput.value = "";
|
|
deadInput.value = "";
|
|
}
|
|
|
|
validateChickenCounts();
|
|
} else {
|
|
console.error('Error:', data.message);
|
|
document.getElementById("jumlahAyamTersedia").innerHTML =
|
|
`<span class="text-red-600">Error: ${data.message}</span>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching available chicken count:', error);
|
|
document.getElementById("jumlahAyamTersedia").innerHTML =
|
|
`<span class="text-red-600">Gagal memuat data: ${error.message}</span>`;
|
|
});
|
|
}
|
|
|
|
function validateChickenCounts() {
|
|
let sickChicken = parseInt(document.getElementById("sickChicken").value) || 0;
|
|
let deadChicken = parseInt(document.getElementById("deadChicken").value) || 0;
|
|
let totalInput = sickChicken + deadChicken;
|
|
|
|
let errorSick = document.getElementById("errorSick");
|
|
let errorDead = document.getElementById("errorDead");
|
|
let submitButton = document.getElementById("submitButton");
|
|
|
|
errorSick.innerText = "";
|
|
errorDead.innerText = "";
|
|
|
|
if (sickChicken < 0) {
|
|
errorSick.innerText = "Jumlah ayam sakit tidak boleh negatif.";
|
|
}
|
|
if (deadChicken < 0) {
|
|
errorDead.innerText = "Jumlah ayam mati tidak boleh negatif.";
|
|
}
|
|
|
|
if (totalInput > jumlahAyamTersedia) {
|
|
errorSick.innerText = "Total ayam sakit dan mati tidak boleh lebih dari " + jumlahAyamTersedia;
|
|
errorDead.innerText = "Total ayam sakit dan mati tidak boleh lebih dari " + jumlahAyamTersedia;
|
|
}
|
|
|
|
submitButton.disabled = errorSick.innerText !== "" || errorDead.innerText !== "";
|
|
}
|
|
|
|
function validateForm() {
|
|
validateChickenCounts();
|
|
return !(document.getElementById("errorSick").innerText || document.getElementById("errorDead").innerText);
|
|
}
|
|
</script>
|