@push('scripts')
<!-- Input Mask Plugin Js -->
<script src="https://unpkg.com/autonumeric"></script>
<script>
const tableSparepart = document.getElementById('table-sparepart');
const tableSparepartShow = document.getElementById('table-sparepart-list');
const tableDetail = document.getElementById('table-detail-item');
const itemDeleteButton = document.querySelectorAll(".item-delete");
const uangBayarInput = document.getElementById("uang_bayar");
const pencarian = document.getElementById("cari");
const qty = document.querySelectorAll(".qty");
const hargaBeli = document.querySelectorAll(".harga_beli");
let itemId = document.querySelectorAll(".item_id");
// console.log(itemId);
const numberFormat = new Intl.NumberFormat({
style: 'currency'
});
let itemIdArray = [];
tableSparepartShow.addEventListener("click", function() {
loadList();
pencarian.addEventListener('input', function() {
// Mengambil nilai input pencarian
loadList();
});
});
function loadList() {
const nilaiPencarian = pencarian.value;
fetch("{{ route('get-item') }}?cari=" + nilaiPencarian, {
method: "GET"
})
.then(
(response) => {
return response.json();
}
)
.then((data) => {
const rowCount = tableSparepart.querySelector('tbody');
while (rowCount.firstChild) {
rowCount.removeChild(rowCount.firstChild);
}
let items = data;
items.data.forEach(item => {
let namaSparepartText = document.createTextNode(item.nama_item);
let hargaJualText = document.createTextNode(numberFormat.format(item
.harga_item));
let hargaBeliText = document.createTextNode(numberFormat.format(item
.biaya_item));
// let stokText = document.createTextNode(item.stok);
let stok_tokos = item.stok_item_tokos.filter(toko => toko.toko_id == document.getElementById("toko_id").value);
var itemStok = item.stok_item_tokos.length > 0 ? stok_tokos.reduce((sum, toko) => sum + toko.stok, 0) : item.stok;
let stokText = document.createTextNode(itemStok);
let pilihButtonText = document.createTextNode(`Pilih`);
let pilihButton = document.createElement("button");
pilihButton.classList.add('btn', 'btn-primary', 'item-add');
// pilihButton.setAttribute('data-id', item.id);
pilihButton.setAttribute('type', "button");
pilihButton.dataset.id = item.id;
pilihButton.appendChild(pilihButtonText);
let jumlahInput = document.createElement("input");
jumlahInput.setAttribute('type', "number");
jumlahInput.setAttribute('value', 0);
jumlahInput.setAttribute('min', 0);
jumlahInput.classList.add('form-control', 'jumlah-input');
let row = tableSparepart.querySelector("tbody").insertRow(-1);
let namaSparepart = row.insertCell(0);
let hargaJual = row.insertCell(1);
let hargaBeli = row.insertCell(2);
let stok = row.insertCell(3);
let jumlah = row.insertCell(4);
let pilih = row.insertCell(5);
namaSparepart.setAttribute('style', 'max-width: 100px;')
namaSparepart.appendChild(namaSparepartText);
hargaJual.appendChild(hargaJualText);
hargaBeli.appendChild(hargaBeliText);
stok.appendChild(stokText);
jumlah.appendChild(jumlahInput);
pilih.appendChild(pilihButton);
addEventPilih(pilihButton);
});
});
}
function addEventPilih(element) {
element.addEventListener('click', function(event) {
let jumlah = this.parentElement.parentElement.childNodes[4];
let jumlahValue = jumlah.querySelector(".jumlah-input").value;
fetch("{{ route('get-item') }}?search=" + this.dataset.id, {
method: "GET"
})
.then(
(response) => {
return response.json();
}
)
.then((data) => {
let items = data;
items.data.forEach(item => {
if (jumlahValue > 0) {
addDetailBarangRow();
}
function addDetailBarangRow() {
//new text element
showAlert(item.nama_item);
let namaSparepartText = document.createTextNode(item.nama_item);
let hargaJualText = document.createTextNode(numberFormat.format(item
.harga_item));
let hargaBeliText = document.createTextNode(numberFormat.format(item
.biaya_item));
let hargaBeliInput = document.createElement("input");
hargaBeliInput.classList.add("biaya_item");
hargaBeliInput.setAttribute('name', "biaya_item[]");
hargaBeliInput.setAttribute('type', "number");
hargaBeliInput.setAttribute('min', 0);
hargaBeliInput.setAttribute('value', item.biaya_item);
let jumlahText = document.createTextNode(jumlahValue);
let subTotalText = document.createTextNode(numberFormat.format(item
.biaya_item * jumlahValue));
let hapusButtonText = document.createTextNode("X");
let hapusButton = document.createElement("button");
hapusButton.classList.add("btn", "btn-danger", "item-delete");
hapusButton.appendChild(hapusButtonText);
hapusButton.setAttribute('type', "button");
//hidden input for form request
let jumlahInput = document.createElement("input");
jumlahInput.classList.add("qty");
jumlahInput.setAttribute('name', "jumlah[]");
jumlahInput.setAttribute('type', "number");
jumlahInput.setAttribute('min', 0);
jumlahInput.setAttribute('value', jumlahValue);
// jumlahInput.setAttribute('hidden', true);
//hidden input for form request
let idInput = document.createElement("input");
idInput.setAttribute('name', "id[]");
idInput.setAttribute('id', "jumlah_input");
idInput.classList.add("item_id");
idInput.setAttribute('type', "text");
idInput.setAttribute('value', item.id);
idInput.setAttribute('hidden', true);
// let selectElement = document.createElement("select");
// selectElement.setAttribute('name', "lokasi[]");
// selectElement.classList.add("form-control");
// let option1 = document.createElement("option");
// option1.setAttribute('value', "1");
// option1.textContent = "Toko";
// let option2 = document.createElement("option");
// option2.setAttribute('value', "2");
// option2.textContent = "Gudang";
// selectElement.appendChild(option1);
// selectElement.appendChild(option2);
let row = tableDetail.querySelector("tbody").insertRow(-1);
let namaSparepart = row.insertCell(0);
let hargaBeli = row.insertCell(1);
let jumlah = row.insertCell(2);
// let select = row.insertCell(3);
let hargaJual = row.insertCell(3);
let subTotal = row.insertCell(4);
subTotal.classList.add("subTotal");
let hapus = row.insertCell(5);
namaSparepart.appendChild(namaSparepartText);
hargaJual.appendChild(hargaJualText);
hargaBeli.appendChild(hargaBeliInput);
subTotal.appendChild(subTotalText);
// jumlah.appendChild(jumlahText);
jumlah.appendChild(jumlahInput);
jumlah.appendChild(idInput);
hapus.appendChild(hapusButton);
// select.appendChild(selectElement);
let detail = [item.id, jumlahValue];
hargaBeliInput.addEventListener('input', function() {
let newSubTotal = parseFloat(this.value) * parseFloat(
jumlahInput.value);
subTotal.textContent = numberFormat.format(newSubTotal);
countGrandTotal();
});
// Event listener for jumlahInput input
jumlahInput.addEventListener('input', function() {
let newSubTotal = parseFloat(hargaBeliInput.value) *
parseFloat(this.value);
subTotal.textContent = numberFormat.format(newSubTotal);
countGrandTotal();
});
addEventHapus(hapusButton);
countGrandTotal();
}
});
});
})
}
function showAlert(item) {
alert(item + " Ditambahkan");
}
function addEventHapus(element) {
element.addEventListener("click", function(event) {
this.parentElement.parentElement.remove();
countGrandTotal();
});
}
uangBayarInput.addEventListener("input", function(event) {
countGrandTotal();
});
document.querySelector("#supplier_id").addEventListener("change", function(event) {
countGrandTotal();
});
document.querySelector("#metode_bayar").addEventListener("change", function(event) {
countGrandTotal();
});
itemDeleteButton.forEach((e) => {
e.addEventListener("click", function(event) {
this.parentElement.parentElement.remove();
countGrandTotal();
});
});
qty.forEach((e, index) => {
e.addEventListener('input', function() {
let hargaBeliInput = this.closest('tr').querySelector('[name="biaya_item[]"]');
let subTotalElements = document.querySelectorAll(".subTotal");
let subTotalElement = subTotalElements[index];
let newSubTotal = parseFloat(hargaBeliInput.value) *
parseFloat(this.value);
subTotalElement.textContent = numberFormat.format(newSubTotal);
countGrandTotal();
});
});
hargaBeli.forEach((e, index) => {
e.addEventListener('input', function() {
let trElement = this.closest('tr');
let subTotalElement = trElement.querySelector(".subTotal");
let qtyElement = trElement.querySelector(".qty");
let newSubTotal = parseFloat(this.value) * parseFloat(qtyElement.value);
subTotalElement.textContent = numberFormat.format(newSubTotal);
countGrandTotal();
});
});
// Event listener for jumlahInput input
function countGrandTotal() {
let kembaliInput = document.getElementById("kembali");
let uangBayarInput = document.getElementById("uang_bayar");
let subTotal = document.querySelectorAll(".subTotal");
let grandTotal = document.querySelector("#grandTotal");
const selectedIndex = document.querySelector("#supplier_id").selectedIndex;
const selectedOption = document.querySelector("#supplier_id").options[selectedIndex];
if (document.getElementById("metode_bayar").value == "saldo") {
uangBayarInput.setAttribute('max',selectedOption.dataset.saldo);
} else {
uangBayarInput.removeAttribute('max');
}
let grandTotalValue = 0;
subTotal.forEach((element) => {
subTotalValue1 = element.textContent.replaceAll(",", "");
subTotalValue = parseFloat(subTotalValue1.replaceAll(".", ""));
grandTotalValue += subTotalValue;
});
grandTotal.textContent = numberFormat.format(grandTotalValue);
kembaliValue = (uangBayarInput.value) - parseInt(grandTotalValue);
if (kembaliValue < 0) {
kembaliInput.value = "Uang Bayar Tidak Cukup";
} else if (kembaliInput >= 0) {
kembaliInput.value = numberFormat.format(parseInt(kembaliValue));
} else {
kembaliInput.value = numberFormat.format(parseInt(kembaliValue));
}
document.getElementById("input_grandTotal").value = grandTotalValue;
}
countGrandTotal();
</script>
@endpush
@push('styles')
<style>
.image-upload {
width: 200px;
height: 200px;
background-color: gainsboro;
display: block;
margin: auto;
background-size: contain;
}
.image-upload>input {
display: none;
}
.pilih-bentuk svg {
width: 100px;
height: 100px;
display: block;
margin: auto;
}
.pilih-bentuk i {
font-size: 100px;
color: grey;
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
}
.qty {
width: 55px;
}
</style>
@endpush
<div class="row">
<!-- Task Info -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card">
<div class="header">
<a href="{{ route('pembelian.index') }}" class="btn btn-warning">Kembali</a>
</div>
<div class="body">
<div class="row">
<div class="col-md-3">
<b>Invoice</b>
<div class="input-group colorpicker colorpicker-element">
<div class="form-line focused">
<input type="text" class="form-control" name="no_pembelian"
value="{{ old('no_pembelian',@$datas->nomor_nota ?? 'B-' . date('Ymdhis')) }}"
required>
</div>
<span class="input-group-addon">
<i style="background-color: rgb(0, 170, 187);"></i>
</span>
</div>
</div>
<div class="col-md-3">
<b>Tanggal</b>
<div class="input-group colorpicker colorpicker-element">
<div class="form-line focused">
<input type="text" class="form-control" name="tanggal" value="{{ old('tanggal',@$datas->tanggal_pembelian ?? date('Y-m-d')) }}"
required>
</div>
<span class="input-group-addon">
<i style="background-color: rgb(0, 170, 187);"></i>
</span>
</div>
</div>
<div class="col-md-3">
<b>Kasir</b>
<div class="input-group colorpicker colorpicker-element">
<div class="form-line focused">
<input type="hidden" name="pengguna_id" value="{{ auth()->user()->id }}" required>
<input type="text" class="form-control" value="{{ auth()->user()->nama_pengguna }}"
required>
</div>
<span class="input-group-addon">
<i style="background-color: rgba(0, 0, 0, 0.7);"></i>
</span>
</div>
</div>
<div class="col-md-3">
<b>Keterangan</b>
<div class="form-group">
<div class="form-line">
<textarea rows="1" name="keterangan" class="form-control no-resize auto-growth" placeholder="Keterangan Pembelian...">{{old('keterangan',@$datas->keterangan)}}</textarea>
</div>
</div>
</div>
</div>
<div class="row" style="display:none;">
<div class="col-md-3">
<b>Toko</b>
<div class="form-group">
<div class="form-line">
<select class="form-control" @if ($detail == true) disabled @endif
name="toko_id" required id="toko_id">
@foreach ($tokos as $toko)
<option value="{{ $toko->id }}"
@if (isset($datas)) @if ($toko->id == @$datas->tokos->first()->id ?? 0) selected @endif
@endif>{{ $toko->nama_toko }}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- #END# Task Info -->
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h2>
Supplier
</h2>
<ul class="header-dropdown m-r--5">
<li class="dropdown">
<a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false">
<i class="material-icons">add</i>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="javascript:void(0);" class=" waves-effect waves-block">Tambah Supplier</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="body">
<h2 class="card-inside-title">Supplier</h2>
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="form-line">
<select class="form-control" @if ($detail == true) disabled @endif
name="supplier_id" id="supplier_id" required>
<option value="" disabled selected hidden data-saldo="{{ 0 }}">-pilih supplier-</option>
@foreach ($suppliers as $data)
<option value="{{ $data->id }}" data-saldo="{{ $data->saldo ?? 0 }}"
@if (isset($datas)) @if ($data->id == $datas->supplier_id) selected @endif
@endif>{{ $data->nama_supplier }} (Saldo : {{ number_format($data->saldo) }})</option>
@endforeach
</select>
</div>
</div>
<div class="form-group">
<div class="form-line">
<h2 class="card-inside-title">Metode Pembayaran</h2>
<select class="form-control" @if ($detail == true) disabled @endif
name="metode_bayar" id="metode_bayar" required>
<option value="" disabled selected hidden>-pilih metode pembayaran-
</option>
<option
@if (isset($datas)) @if ($datas->metode_bayar == 'cash') selected @endif
@endif value="cash">Cash</option>
<option
@if (isset($datas)) @if ($datas->metode_bayar == 'kredit') selected @endif
@endif value="kredit">Kredit</option>
<option
@if (isset($datas)) @if ($datas->metode_bayar == 'transfer') selected @endif
@endif value="transfer">Transfer</option>
<option
@if (isset($datas)) @if ($datas->metode_bayar == 'saldo') selected @endif
@endif value="saldo">Saldo Supplier</option>
</select>
</div>
</div>
@if (isset($detail))
@if ($detail == false)
<div class="form-group">
<div class="form-line">
<h2 class="card-inside-title">Uang Pembayaran</h2>
<input type="number"
id="uang_bayar" value="{{ old('uang_bayar',@$datas->uang_bayar) }}"
name="uang_bayar" required class="form-control" placeholder="Uang Bayar"
step="500">
</div>
</div>
<div class="form-group">
<div class="form-line">
<h2 class="card-inside-title">Uang Kembalian</h2>
<input type="text" id="kembali" name="kembali" readonly value="0"
class="form-control" placeholder="Kembali" step="500">
</div>
</div>
<div class="form-group">
<label for="bukti_nota">Lampirkan Bukti Nota Pembelian </label>
<div class="form-line">
<input type="file" accept="image/*,application/pdf" id="bukti_nota" name="bukti_nota">
</div>
<i>*Kosongkan jika tidak ingin mengubah bukti nota!</i>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Simpan</button>
</div>
<i>*Pilih barang terlebih dahulu sebelum simpan!</i>
@endif
@endif
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@if (isset($datas))
<div class="col-md-6">
<div class="card" style="">
<div class="header">
<h2 class="card-inside-title">Bukti Nota</h2>
</div>
<div class="body">
<a href="{{ asset('images/Bukti_nota/' . $datas->bukti_nota) }}"target="blank_"><img
style="width:400px;height:400px;object-fit:cover;"
src="{{ asset('images/Bukti_nota/' . $datas->bukti_nota) }}" alt=""></a>
</div>
</div>
</div>
@endif
</div>
<div class="row">
<!-- Task Info -->
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="card">
<div class="header">
<h2>Data Barang</h2>
@if (isset($detail))
@if ($detail == false)
<button type="button" id="table-sparepart-list" class="btn btn-primary" data-toggle="modal"
data-target="#list-sparepart">Pilih Barang</button>
@endif
@endif
</div>
<div class="body">
<div class="table-responsive">
<table id="table-detail-item" class="table table-hover ">
<thead>
<tr>
<th>Nama Barang</th>
<th>Harga Beli</th>
<th>Jumlah</th>
{{-- <th>Lokasi</th> --}}
<th>Harga Jual</th>
<th>Subtotal</th>
<th>Tools</th>
</tr>
</thead>
<tbody>
@if (isset($datas->detail_pembelian))
@foreach ($datas->detail_pembelian as $d)
<tr>
<td>
@if (isset($d->item))
{{ $d->item->nama_item }}
@else
Item tidak tersedia! @endif
</td>
<td><input class="harga_beli" type="number" min="0"
name="biaya_item[]"
@if (isset($d->item)) value="{{ $d->item->biaya_item }}" @endif>
</td>
<td>
<input class="qty" name="jumlah[]" value="{{ $d->qty }}"
min="0" type="number">
<input class="item_id"
name="id[]"@if (isset($d->item)) value="{{ $d->item_id }}" @endif
hidden>
</td>
{{-- <td>
<select name="lokasi[]" class="form-control">
<option
value="1"@if ($d->lokasi == 1) selected @endif>
Toko</option>
<option
value="2"@if ($d->lokasi == 2) selected @endif>
Gudang</option>
</select>
</td> --}}
<td>
@if (isset($d->item))
{{ number_format($d->item->harga_item) }}
@else
Item tidak tersedia! @endif
</td>
<td class="subTotal">
@if (isset($d->item))
{{ number_format($d->item->biaya_item * $d->qty) }}
@else
Item tidak tersedia! @endif
</td>
<td>
<button
@if (isset($detail)) @if ($detail == true) style="display: none" @endif
@endif class="btn btn-danger item-delete"
type="button">X</button>
</td>
</tr>
@endforeach
@endif
</tbody>
<tfoot>
<tr>
<td colspan="4">
<div class="text-center">
</div>
</td>
<td>
<div class="text-right">
<p style="font-weight:bold;">Grand Total : </p>
</div>
</td>
<td>
<div class="text-left">
<p style="font-weight:bold;" id="grandTotal">0</p>
<input type="hidden" name="grand_total" id="input_grandTotal">
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
<!-- #END# Task Info -->
</div>
<!-- Modal -->
<div class="modal fade" id="list-sparepart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Pilih Barang</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row flex-column-reverse">
<div class="col-md-6"></div>
<div class="col-md-6">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">search</i>
</span>
<div class="form-line">
<input type="text" class="form-control " id="cari" name="cari"
placeholder="Search">
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table id="table-sparepart" class="table table-hover ">
<thead>
<tr>
<th>Nama Barang</th>
<th>Harga Jual</th>
<th>Harga Beli</th>
<th>Jumlah</th>
<th>Tools</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<div class="text-center">
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row" style="margin-bottom: 50px;">
<div class="col-md-12" style="text-align: right;">
</div>
</div>
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell