257 lines
12 KiB
PHP
257 lines
12 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h4 class="card-title">Tambah Penjualan</h4>
|
|
<form class="forms-sample" method="post" action="{{ url('admin/barangkeluarsimpan') }}">
|
|
@csrf
|
|
|
|
<div class="form-group">
|
|
<label>Tanggal Penjualan</label>
|
|
<input class="form-control" name="tanggalpenjualan" type="date" required
|
|
value="{{ date('Y-m-d') }}">
|
|
</div>
|
|
|
|
<table class="table table-bordered table-striped" id="tabelform">
|
|
<thead>
|
|
<tr>
|
|
<th width="30%">Nama Produk</th>
|
|
<th>Harga</th>
|
|
<th width="15%">Jumlah</th>
|
|
<th>Total</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="form-group namabarangharga">
|
|
<select name="namabarang[]" class="form-control namabarang" required>
|
|
<option value="">Pilih Produk</option>
|
|
@foreach ($produk as $product)
|
|
<option value="{{ $product->namaproduk }}"
|
|
data-price="{{ $product->hargajual }}"
|
|
data-stock="{{ $product->stok }}">
|
|
{{ $product->namaproduk }} (Stok: {{ $product->stok }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control harga" name="harga[]"
|
|
value="0" readonly required>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control jumlah" name="jumlah[]"
|
|
value="1" min="1" required>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control total" name="total[]"
|
|
value="0" readonly>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<button type="button" class="btn btn-success add-row">+</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="form-group">
|
|
<label>Diskon (%)</label>
|
|
<input class="form-control" id="diskon" name="diskon" type="number" min="0"
|
|
max="100" value="0" step="0.1">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Sub Total</label>
|
|
<input class="form-control" id="subtotal" name="subtotal" type="number" readonly>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Grand Total</label>
|
|
<input class="form-control" id="grandtotal" name="grandtotal" type="number" readonly>
|
|
<input type="hidden" id="grandtotalnon" name="grandtotalnon" readonly required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Metode Pembayaran</label>
|
|
<select class="form-control" name="metodepembayaran" required>
|
|
<option value="Tunai">Tunai</option>
|
|
<option value="QRIS">QRIS</option>
|
|
<option value="Transfer">Transfer</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Uang Pembeli</label>
|
|
<input class="form-control" id="uangpembeli" name="uangpembeli" type="number"
|
|
min="0">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Kembalian</label>
|
|
<input class="form-control" id="kembalian" name="kembalian" type="number" readonly>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary mr-2">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const tableBody = document.querySelector('#tabelform tbody');
|
|
const diskonInput = document.getElementById('diskon');
|
|
const uangPembeliInput = document.getElementById('uangpembeli');
|
|
|
|
// Initial calculation
|
|
calculateAllTotals();
|
|
|
|
// Setup event delegation for the table
|
|
tableBody.addEventListener('click', function(e) {
|
|
// Handle add row button
|
|
if (e.target.classList.contains('add-row')) {
|
|
addNewRow();
|
|
}
|
|
|
|
// Handle remove row button
|
|
if (e.target.classList.contains('remove-row')) {
|
|
if (tableBody.querySelectorAll('tr').length > 1) {
|
|
e.target.closest('tr').remove();
|
|
calculateAllTotals();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Setup event delegation for product selection changes
|
|
tableBody.addEventListener('change', function(e) {
|
|
if (e.target.classList.contains('namabarang')) {
|
|
const row = e.target.closest('tr');
|
|
const selected = e.target.options[e.target.selectedIndex];
|
|
row.querySelector('.harga').value = selected.dataset.price || '0';
|
|
calculateRowTotal(row);
|
|
calculateAllTotals();
|
|
}
|
|
});
|
|
|
|
// Setup event delegation for quantity changes
|
|
tableBody.addEventListener('input', function(e) {
|
|
if (e.target.classList.contains('jumlah')) {
|
|
const row = e.target.closest('tr');
|
|
calculateRowTotal(row);
|
|
calculateAllTotals();
|
|
}
|
|
});
|
|
|
|
// Setup discount and payment event listeners
|
|
diskonInput.addEventListener('input', calculateAllTotals);
|
|
uangPembeliInput.addEventListener('input', calculateChange);
|
|
|
|
// Function to add a new row
|
|
function addNewRow() {
|
|
const newRow = document.createElement('tr');
|
|
newRow.innerHTML = `
|
|
<td>
|
|
<div class="form-group namabarangharga">
|
|
<select name="namabarang[]" class="form-control namabarang" required>
|
|
<option value="">Pilih Produk</option>
|
|
@foreach ($produk as $product)
|
|
<option value="{{ $product->namaproduk }}"
|
|
data-price="{{ $product->hargajual }}"
|
|
data-stock="{{ $product->stok }}">
|
|
{{ $product->namaproduk }} (Stok: {{ $product->stok }})
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control harga" name="harga[]" value="0"
|
|
readonly required>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control jumlah" name="jumlah[]" value="1"
|
|
min="1" required>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<input type="number" class="form-control total" name="total[]" value="0"
|
|
readonly>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="form-group">
|
|
<button type="button" class="btn btn-danger remove-row">-</button>
|
|
</div>
|
|
</td>
|
|
`;
|
|
tableBody.appendChild(newRow);
|
|
}
|
|
|
|
// Calculate the total for a single row
|
|
function calculateRowTotal(row) {
|
|
const quantity = parseFloat(row.querySelector('.jumlah').value) || 0;
|
|
const price = parseFloat(row.querySelector('.harga').value) || 0;
|
|
const total = quantity * price;
|
|
row.querySelector('.total').value = total;
|
|
}
|
|
|
|
// Calculate all totals (subtotal, discount, grand total)
|
|
function calculateAllTotals() {
|
|
let subtotal = 0;
|
|
|
|
// Sum all row totals
|
|
document.querySelectorAll('.total').forEach(totalInput => {
|
|
subtotal += parseFloat(totalInput.value) || 0;
|
|
});
|
|
|
|
// Update subtotal
|
|
document.getElementById('subtotal').value = subtotal;
|
|
|
|
// Calculate discount
|
|
const discountPercent = parseFloat(diskonInput.value) || 0;
|
|
const discountAmount = (subtotal * discountPercent) / 100;
|
|
|
|
// Calculate grand total
|
|
const grandTotal = subtotal - discountAmount;
|
|
|
|
// Update grand total fields
|
|
document.getElementById('grandtotal').value = grandTotal;
|
|
document.getElementById('grandtotalnon').value = grandTotal;
|
|
|
|
// Recalculate change
|
|
calculateChange();
|
|
}
|
|
|
|
// Calculate change
|
|
function calculateChange() {
|
|
const grandTotal = parseFloat(document.getElementById('grandtotal').value) || 0;
|
|
const payment = parseFloat(document.getElementById('uangpembeli').value) || 0;
|
|
const change = payment - grandTotal;
|
|
|
|
document.getElementById('kembalian').value = change >= 0 ? change : 0;
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|