617 lines
28 KiB
PHP
617 lines
28 KiB
PHP
@extends('layouts.base')
|
|
|
|
@section('content-header')
|
|
<div class="container" style="display: contents">
|
|
<div class="row mb-2">
|
|
<div class="col-sm-6">
|
|
<h1 class="m-0"> Kasir <small>kasir 3.0</small></h1>
|
|
</div><!-- /.col -->
|
|
<div class="col-sm-6">
|
|
<ol class="breadcrumb float-sm-right">
|
|
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
|
<li class="breadcrumb-item"><a href="#">Kasir</a></li>
|
|
<li class="breadcrumb-item active">Transaksi</li>
|
|
</ol>
|
|
</div><!-- /.col -->
|
|
</div><!-- /.row -->
|
|
</div><!-- /.container-fluid -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container" style="display: contents">
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<div class="card card-primary card-outline card-outline-tabs">
|
|
<div class="card-header p-0 border-bottom-0">
|
|
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
|
|
@foreach ($KelompokKategori as $key => $item)
|
|
<li class="nav-item">
|
|
<a class="nav-link @if ($key == 0) active @endif"
|
|
id="custom-tabs-four-{{ $item->kode_kelompok_kategori }}-tab" data-toggle="pill"
|
|
href="#custom-tabs-four-{{ $item->kode_kelompok_kategori }}" role="tab"
|
|
aria-controls="custom-tabs-four-{{ $item->kode_kelompok_kategori }}"
|
|
aria-selected="true">{{ $item->nama_kelompok_kategori }}</a>
|
|
</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
<div class="card-body" id="batasitinggi" style="height:700px;overflow-y:scroll;margin-bottom: 5px">
|
|
<div class="tab-content" id="custom-tabs-four-tabContent">
|
|
@foreach ($KelompokKategori as $key => $item)
|
|
<div class="tab-pane fade show @if ($key == 0) active @endif"
|
|
id="custom-tabs-four-{{ $item->kode_kelompok_kategori }}" role="tabpanel"
|
|
aria-labelledby="custom-tabs-four-{{ $item->kode_kelompok_kategori }}-tab">
|
|
<div class="row">
|
|
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
|
|
<div class="col-lg-4">
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-header">
|
|
<h5 class="card-title m-0">
|
|
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<h6 class="card-title">Special title treatment</h6>
|
|
<p class="card-text">With supporting text below as a natural lead-in
|
|
to
|
|
additional
|
|
content.</p>
|
|
{{-- @if ($item->kode_kelompok_kategori == 'MIN-PAK')
|
|
<a class="btn btn-primary" id="ordered-menus"
|
|
onclick="selectPaket( '{{ url('/transaksi/select-paket', $kelompokKategoriPivot->produk->kode_produk) }}' )">Select
|
|
Paket
|
|
</a>
|
|
@else
|
|
<a class="btn btn-primary" id="ordered-menus"
|
|
onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )">Go
|
|
somewhere</a>
|
|
@endif --}}
|
|
<a class="btn btn-primary" id="ordered-menus"
|
|
onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )">Go
|
|
somewhere</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<!-- /.card -->
|
|
</div>
|
|
</div>
|
|
<!-- /.col-md-6 -->
|
|
<div class="col-lg-4">
|
|
<div class="card card-primary card-outline">
|
|
<div class="card-header">
|
|
<h5 class="col-lg-6 card-title m-0">Kode Pesanan <small>{{ $orderCode }}</small></h5>
|
|
<h5 class="col-lg-6 card-title m-0" style="text-align: right">
|
|
<small id="datetime-order"></small>
|
|
</h5>
|
|
</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<table class="table table-bordered table-striped" id="order-menus" width="100%">
|
|
<thead style="background-color: lightgray">
|
|
<tr>
|
|
<th width="60%" class="text-center">Menu</th>
|
|
<th>Qty</th>
|
|
<th width="10%">⚙️</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-order-menus">
|
|
</tbody>
|
|
<tfoot style="background-color: lightgray">
|
|
<tr>
|
|
<th class="text-center">Total</th>
|
|
<th colspan="2">
|
|
<span class="row">
|
|
<span class="col-6">Rp.</span>
|
|
<span class="col-6" style="text-align: right" id="total">0</span>
|
|
<span class="col-6" id="total-hidden" style="display: none">0</span>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-center">Diskon (%)</th>
|
|
<th colspan="2">
|
|
<div class="input-group input-group-sm">
|
|
<input type="number" name="diskon" class="form-control rounded-0">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-center">Grand Total</th>
|
|
<th colspan="2">
|
|
<span class="row">
|
|
<span class="col-6">Rp.</span>
|
|
<span class="col-6" style="text-align: right" id="total-diskon">0</span>
|
|
<span class="col-6" id="total-diskon-hidden" style="display: none">0</span>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-center">Bayar</th>
|
|
<th colspan="2">
|
|
<div class="input-group input-group-sm">
|
|
<input type="text" name="nominal-bayar" class="form-control rounded-0"
|
|
required id="nominal-bayar">
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th class="text-center">Kembali</th>
|
|
<th colspan="2">
|
|
<span class="row">
|
|
<span class="col-6">Rp.</span>
|
|
<span class="col-6" style="text-align: right" id="kembali">0</span>
|
|
<span class="col-6" id="kembali-hidden" style="display: none">0</span>
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
<tr>
|
|
<th colspan="3">
|
|
<span class="row">
|
|
<input type="text" name="nama-pemesan" class="form-control rounded-0"
|
|
placeholder="Nama Pemesan" id="nama-pemesan" required>
|
|
<input type="text" name="keterangan-pesanan"
|
|
placeholder="Keterangan Pesanan" class="form-control rounded-0"
|
|
id="keterangan-pesanan">
|
|
</span>
|
|
</th>
|
|
</tr>
|
|
<tr style="background-color: white">
|
|
<th colspan="3">
|
|
<button class="btn btn-primary btn-block" id="pesan-bayar">Bayar</button>
|
|
</th>
|
|
</tr>
|
|
</tfoot>
|
|
</table>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- /.col-md-6 -->
|
|
</div>
|
|
<!-- /.row -->
|
|
</div><!-- /.container-fluid -->
|
|
@endsection
|
|
|
|
@push('styles')
|
|
<!-- Toastr -->
|
|
<style>
|
|
@media only screen and (max-width : 991px) {
|
|
/* Styles */
|
|
}
|
|
|
|
@media only screen and (max-width : 768px) {
|
|
/* Styles */
|
|
}
|
|
|
|
@media only screen and (max-width : 414px) {
|
|
/* Styles */
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<!-- Toastr -->
|
|
<script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
|
|
<script>
|
|
// set interval waktu pesanan
|
|
function showTime() {
|
|
var date = new Date(),
|
|
utc = new Date(Date.UTC(
|
|
date.getFullYear(),
|
|
date.getMonth(),
|
|
date.getDate(),
|
|
date.getHours() - 7,
|
|
date.getMinutes(),
|
|
date.getSeconds()
|
|
));
|
|
|
|
// format datetime indonesia
|
|
var options = {
|
|
weekday: 'long',
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric',
|
|
hour: 'numeric',
|
|
hour12: true,
|
|
minute: 'numeric',
|
|
second: 'numeric'
|
|
};
|
|
|
|
// tampilkan pada id datetime-order
|
|
document.getElementById('datetime-order').innerHTML = utc.toLocaleDateString("id-ID", options);
|
|
}
|
|
|
|
setInterval(showTime, 1000);
|
|
|
|
// make function add menu to table and calculate qty and total price menu ordered and check menu ordered is exist or not in tbody table order-menus insert this in
|
|
function aadMenu(params) {
|
|
var table = document.getElementById("order-menus");
|
|
var menu = params;
|
|
var menuId = menu.id;
|
|
var menuName = menu.nama_produk;
|
|
var menuPrice = menu.harga_produk;
|
|
var menuQty = 1;
|
|
var menuTotal = menuPrice * menuQty;
|
|
|
|
var isExist = false;
|
|
var index = 0;
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var id = row.getAttribute('data-id');
|
|
|
|
if (id == menuId) {
|
|
isExist = true;
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
if (isExist) {
|
|
var qty = table.rows[index].getAttribute('data-qty');
|
|
var total = table.rows[index].getAttribute('data-total');
|
|
|
|
qty = parseInt(qty) + 1;
|
|
total = parseInt(total) + parseInt(menuPrice);
|
|
|
|
table.rows[index].setAttribute('data-qty', qty);
|
|
table.rows[index].setAttribute('data-total', total);
|
|
|
|
table.rows[index].cells[1].innerHTML = `
|
|
<td class="text-center">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id})"><b>-</b></button>
|
|
</span>
|
|
<input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id})">+</button>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
`;
|
|
table.rows[index].cells[2].innerHTML = `
|
|
<td class="text-center">
|
|
<button class="btn btn-danger btn-sm" onclick="deleteMenu(${params.id})">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
`;
|
|
calculateTotal();
|
|
} else {
|
|
$('#tbody-order-menus').append(`
|
|
<tr id="row-${params.id}" data-id="${params.id}" data-nama="${params.nama_produk}" data-harga="${params.harga_produk}" data-qty="1" data-total="${params.harga_produk}">
|
|
<td>
|
|
${params.nama_produk}
|
|
<br>
|
|
<small class="text-danger">Rp. ${params.harga_produk}</small>
|
|
</td>
|
|
<td class="text-center">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id})"><b>-</b></button>
|
|
</span>
|
|
<input type="number" name="bayar" class="form-control rounded-0" value="${menuQty}">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id})">+</button>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td class="text-center">
|
|
<button class="btn btn-danger btn-sm" onclick="deleteMenu(${params.id})">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`);
|
|
calculateTotal();
|
|
}
|
|
}
|
|
|
|
// delete menu from table and calculate qty and total price menu ordered
|
|
function deleteMenu(params) {
|
|
var table = document.getElementById("order-menus");
|
|
var index = 0;
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var id = row.getAttribute('data-id');
|
|
|
|
if (id == params) {
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
table.deleteRow(index);
|
|
calculateTotal();
|
|
}
|
|
|
|
// calculate qty and total price menu ordered
|
|
function calculateTotal() {
|
|
var table = document.getElementById("order-menus");
|
|
var total = 0;
|
|
var diskon = document.getElementsByName('diskon')?.[0]?.value ?? 0;
|
|
var bayar = document.getElementsByName('bayar')?.[0]?.value ?? 0;
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var harga = row.getAttribute('data-harga');
|
|
var qty = row.getAttribute('data-qty');
|
|
var total = total + (harga * qty);
|
|
}
|
|
|
|
var ribuantotal = toRupiah(total);
|
|
|
|
document.getElementById('total').innerHTML = ribuantotal;
|
|
document.getElementById('total-hidden').innerHTML = total;
|
|
|
|
var totalDiskon = total - (total * (diskon / 100));
|
|
var ribuantotalDiskon = toRupiah(totalDiskon);
|
|
document.getElementById('total-diskon').innerHTML = ribuantotalDiskon;
|
|
document.getElementById('total-diskon-hidden').innerHTML = totalDiskon;
|
|
|
|
calculatekembali();
|
|
}
|
|
|
|
// increment qty menu ordered
|
|
function incrementMenu(params) {
|
|
var table = document.getElementById("order-menus");
|
|
var index = 0;
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var id = row.getAttribute('data-id');
|
|
|
|
if (id == params) {
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
var qty = table.rows[index].getAttribute('data-qty');
|
|
var total = table.rows[index].getAttribute('data-total');
|
|
var harga = table.rows[index].getAttribute('data-harga');
|
|
|
|
qty = parseInt(qty) + 1;
|
|
total = parseInt(total) + parseInt(harga);
|
|
|
|
table.rows[index].setAttribute('data-qty', qty);
|
|
table.rows[index].setAttribute('data-total', total);
|
|
|
|
table.rows[index].cells[1].innerHTML = `
|
|
<td class="text-center">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params})"><b>-</b></button>
|
|
</span>
|
|
<input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params})">+</button>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
calculateTotal();
|
|
}
|
|
|
|
// decrement qty menu ordered
|
|
function decrementMenu(params) {
|
|
var table = document.getElementById("order-menus");
|
|
var index = 0;
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var id = row.getAttribute('data-id');
|
|
|
|
if (id == params) {
|
|
index = i;
|
|
}
|
|
}
|
|
|
|
var qty = table.rows[index].getAttribute('data-qty');
|
|
var total = table.rows[index].getAttribute('data-total');
|
|
var harga = table.rows[index].getAttribute('data-harga');
|
|
|
|
if (qty > 1) {
|
|
qty = parseInt(qty) - 1;
|
|
total = parseInt(total) - parseInt(harga);
|
|
|
|
table.rows[index].setAttribute('data-qty', qty);
|
|
table.rows[index].setAttribute('data-total', total);
|
|
|
|
table.rows[index].cells[1].innerHTML = `
|
|
<td class="text-center">
|
|
<div class="input-group input-group-sm">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params})"><b>-</b></button>
|
|
</span>
|
|
<input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
|
|
<span class="input-group-append">
|
|
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params})">+</button>
|
|
</span>
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
calculateTotal();
|
|
}
|
|
}
|
|
|
|
// diskon use keyup
|
|
document.getElementsByName('diskon')[0].addEventListener('keyup', function() {
|
|
var diskon = document.getElementsByName('diskon')[0].value;
|
|
var total = document.getElementById('total-hidden').innerHTML;
|
|
var totalDiskon = total - (total * (diskon / 100));
|
|
|
|
var ribuan = toRupiah(totalDiskon);
|
|
document.getElementById('total-diskon-hidden').innerHTML = totalDiskon;
|
|
document.getElementById('total-diskon').innerHTML = ribuan;
|
|
|
|
calculatekembali();
|
|
});
|
|
|
|
/* Dengan Rupiah */
|
|
var dengan_rupiah = document.getElementById('nominal-bayar');
|
|
dengan_rupiah.addEventListener('keyup', function(e) {
|
|
dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
|
|
});
|
|
|
|
/* Fungsi */
|
|
function formatRupiah(angka, prefix) {
|
|
var number_string = angka.replace(/[^,\d]/g, '').toString(),
|
|
split = number_string.split(','),
|
|
sisa = split[0].length % 3,
|
|
rupiah = split[0].substr(0, sisa),
|
|
ribuan = split[0].substr(sisa).match(/\d{3}/gi);
|
|
|
|
if (ribuan) {
|
|
separator = sisa ? '.' : '';
|
|
rupiah += separator + ribuan.join('.');
|
|
}
|
|
|
|
rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
|
|
return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
|
|
}
|
|
|
|
// bayar use keyup
|
|
document.getElementsByName('nominal-bayar')[0].addEventListener('keyup', function() {
|
|
calculatekembali();
|
|
});
|
|
|
|
function calculatekembali() {
|
|
var bayar = document.getElementsByName('nominal-bayar')[0].value;
|
|
var nonimalBayar = bayar.replace(/[^,\d]/g, '').toString();
|
|
var totalDiskon = document.getElementById('total-diskon-hidden').innerHTML;
|
|
var kembali = nonimalBayar - totalDiskon;
|
|
|
|
document.getElementById('kembali-hidden').innerHTML = kembali;
|
|
|
|
var ribuan = toRupiah(kembali);
|
|
if (totalDiskon == 0 || bayar == 0) {
|
|
ribuan = 0;
|
|
var bayar = document.getElementsByName('nominal-bayar')[0].value = '';
|
|
|
|
}
|
|
document.getElementById('kembali').innerHTML = ribuan;
|
|
}
|
|
|
|
// format rupiah with minus
|
|
function toRupiah(angka) {
|
|
var rupiah = '';
|
|
var angkarev = angka.toString().split('').reverse().join('');
|
|
for (var i = 0; i < angkarev.length; i++)
|
|
if (i % 3 == 0) rupiah += angkarev.substr(i, 3) + '.';
|
|
return rupiah.split('', rupiah.length - 1).reverse().join('');
|
|
}
|
|
|
|
// pesan bayar
|
|
document.getElementById('pesan-bayar').addEventListener('click', function() {
|
|
var table = document.getElementById("order-menus");
|
|
var orderMenus = [];
|
|
|
|
for (var i = 1, row; row = table.rows[i]; i++) {
|
|
var id = row.getAttribute('data-id');
|
|
var nama = row.getAttribute('data-nama');
|
|
var qty = row.getAttribute('data-qty');
|
|
var harga = row.getAttribute('data-harga');
|
|
var total = row.getAttribute('data-total');
|
|
|
|
if (id != null || qty != null || total != null) {
|
|
orderMenus.push({
|
|
id: id,
|
|
nama: nama,
|
|
qty: qty,
|
|
harga: harga,
|
|
total: total
|
|
});
|
|
}
|
|
}
|
|
|
|
var diskon = document.getElementsByName('diskon')[0].value;
|
|
var totalDiskon = document.getElementById('total-diskon-hidden').innerHTML;
|
|
var bayar = document.getElementsByName('nominal-bayar')[0].value;
|
|
var nominalBayar = bayar.replace(/[^,\d]/g, '').toString();
|
|
var kembaliHidden = document.getElementById('kembali-hidden').innerHTML;
|
|
var namaPemesan = document.getElementsByName('nama-pemesan')[0].value;
|
|
|
|
if (orderMenus.length == 0) {
|
|
alert('Menu tidak boleh kosong');
|
|
return false;
|
|
}
|
|
if (nominalBayar == '' || nominalBayar == 0) {
|
|
alert('Pembayaran tidak boleh kosong');
|
|
return false;
|
|
} else if (kembaliHidden < 0) {
|
|
alert('Pembayaran kurang');
|
|
return false;
|
|
} else if (namaPemesan == '') {
|
|
alert('Nama pemesan tidak boleh kosong');
|
|
return false;
|
|
}
|
|
|
|
|
|
|
|
var data = {
|
|
_token: "{{ csrf_token() }}",
|
|
orderCode: "{{ $orderCode }}",
|
|
orderMenus: orderMenus,
|
|
namaPemesan: namaPemesan,
|
|
keteranganPesanan: document.getElementsByName('keterangan-pesanan')[0].value,
|
|
diskon: diskon,
|
|
totalDiskon: totalDiskon,
|
|
nominalBayar: nominalBayar,
|
|
kembali: kembaliHidden
|
|
};
|
|
console.log(data);
|
|
$.ajax({
|
|
url: "{{ route('transaksi.store') }}",
|
|
method: "POST",
|
|
data: data,
|
|
success: function(result) {
|
|
console.log(result);
|
|
// show toastr success
|
|
toastr.success(result.message, 'Success', {
|
|
timeOut: 2000
|
|
});
|
|
// opem mew page print
|
|
window.open(result.url, '_blank');
|
|
|
|
// // refresh page
|
|
setTimeout(function() {
|
|
window.location.reload(1);
|
|
}, 2000);
|
|
},
|
|
error: function(xhr, status, error) {
|
|
toastr.error(xhr.responseJSON.message, 'Error', {
|
|
timeOut: 3000
|
|
});
|
|
console.log(xhr.responseJSON);
|
|
console.log(status);
|
|
console.log(error);
|
|
}
|
|
});
|
|
});
|
|
|
|
// select paket
|
|
function selectPaket(uri) {
|
|
console.log(uri);
|
|
$.ajax({
|
|
url: uri,
|
|
method: "GET",
|
|
success: function(data) {
|
|
console.log(data);
|
|
// data.forEach(item => {
|
|
// aadMenu(item);
|
|
// });
|
|
},
|
|
error: function(xhr, status, error) {
|
|
console.log(xhr.responseJSON);
|
|
console.log(status);
|
|
console.log(error);
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
@endpush
|