resto-dhepot/resources/views/pages/Kasir/transaksi.blade.php

1334 lines
79 KiB
PHP

@extends('layouts.base')
{{-- @section('content-header')
<div class="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 -->
</div>
@endsection --}}
@section('content')
<div class="container" style="display: contents;">
<div class="row" style="padding: 5px">
<div class="col-xl-8 col-lg-6 col-md-6 col-sm-12">
<div class="card card-warning 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:720px;overflow-y:scroll;margin-bottom: 5px;padding-top: 2px;padding-bottom: 2px">
<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">
@if ($item->kode_kelompok_kategori == 'PAK-SKOM')
<div class="col-lg-12 col-md-6 col-sm-6" style="padding: 0px">
<div class="row" style="padding: 0px">
<div class="col-xl-3 col-lg-4 col-md-4 col-sm-3"
style="margin-left: 0px;padding-left: 0px;">
<div class="nav flex-column nav-tabs h-100" id="vert-tabs-tab"
role="tablist" aria-orientation="vertical">
<a class="nav-link vert-nav-content active"
id="vert-tabs-nasi-tab" data-toggle="pill"
href="#vert-tabs-nasi" role="tab"
aria-controls="vert-tabs-nasi" aria-selected="true">Nasi</a>
<a class="nav-link vert-nav-content" id="vert-tabs-telur-tab"
data-toggle="pill" href="#vert-tabs-telur" role="tab"
aria-controls="vert-tabs-telur"
aria-selected="false">Telur</a>
<a class="nav-link vert-nav-content" id="vert-tabs-sambel-tab"
data-toggle="pill" href="#vert-tabs-sambel" role="tab"
aria-controls="vert-tabs-sambel"
aria-selected="false">Sambel</a>
<a class="nav-link vert-nav-content" id="vert-tabs-topping-tab"
data-toggle="pill" href="#vert-tabs-topping" role="tab"
aria-controls="vert-tabs-topping"
aria-selected="false">Topping</a>
<a class="nav-link vert-nav-content" id="vert-tabs-free-tab"
data-toggle="pill" href="#vert-tabs-free" role="tab"
aria-controls="vert-tabs-free"
aria-selected="false">Free</a>
<div class="card card-warning card-outline"
style="margin-top: auto;margin-right: 5px;height: auto;">
<div class="card-header">
<h6 class="text-sm m-0" id="nama-paket">
Paket Menu Terpilih
</h6>
</div>
<div class="card-body" style="padding: 2px 20px 2px">
<ul style="padding: 0px 5px 0px;" id="menu-terpilih">
<li class="text=xs">
Pilih Paket Menu Terlebih Dahulu
</li>
</ul>
</div>
<a class="btn btn-warning disabled"
id="select-ordered-menus" onclick="cariPaket()">Pilih
Paket Menu
</a>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-8 col-md-8 col-sm-9" style="padding: 0px;">
<div class="card-body" style="height:700px;overflow-y:scroll;">
<div class="tab-content" id="vert-tabs-tabContent">
<div class="tab-pane vert-tab-content fade text-left show active"
id="vert-tabs-nasi" role="tabpanel"
aria-labelledby="vert-tabs-nasi-tab">
<div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 1)
<div
class="col-xl-4 col-lg-6 col-md-4 col-sm-4">
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-telur')"
class="card card-warning card-outline btn">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div>
<a class="btn btn-warning"
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
Pilih Paket
</a>
</div>
</div>
@endif
@endforeach
</div>
</div>
<div class="tab-pane vert-tab-content"
id="vert-tabs-telur" role="tabpanel"
aria-labelledby="vert-tabs-telur-tab">
<div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 2)
<div
class="col-xl-4 col-lg-6 col-md-4 col-sm-4">
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-sambel')"
class="card card-warning card-outline btn">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div>
<a class="btn btn-warning"
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
Pilih Paket
</a>
</div>
</div>
@endif
@endforeach
</div>
</div>
<div class="tab-pane vert-tab-content"
id="vert-tabs-sambel" role="tabpanel"
aria-labelledby="vert-tabs-sambel-tab">
<div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 3)
<div
class="col-xl-4 col-lg-6 col-md-4 col-sm-4">
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-topping')"
class="card card-warning card-outline btn">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div>
<a class="btn btn-warning"
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
Paket
</a>
</div>
</div>
@endif
@endforeach
</div>
</div>
<div class="tab-pane vert-tab-content"
id="vert-tabs-topping" role="tabpanel"
aria-labelledby="vert-tabs-topping-tab">
<div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 4)
<div
class="col-xl-4 col-lg-6 col-md-4 col-sm-4">
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-free')"
class="card card-warning card-outline btn">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div>
<a class="btn btn-warning"
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
Paket
</a>
</div>
</div>
@endif
@endforeach
</div>
</div>
<div class="tab-pane vert-tab-content" id="vert-tabs-free"
role="tabpanel" aria-labelledby="vert-tabs-free-tab">
<div class="row">
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
@if ($kelompokKategoriPivot->produk->urutan == 5)
<div
class="col-xl-4 col-lg-6 col-md-4 col-sm-4">
<div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )"
class="card card-warning card-outline btn">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
</div>
<a class="btn btn-warning"
id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
Pilih Paket
</a>
</div>
</div>
@endif
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@else
@foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
{{-- Jika paket irit --}}
@if ($kelompokKategoriPivot->kelompok_kategori_id == 9)
@if (
$kelompokKategoriPivot->produk->tgl_start_promo <= \Carbon\Carbon::now() &&
$kelompokKategoriPivot->produk->tgl_end_promo >= \Carbon\Carbon::now())
@if ($kelompokKategoriPivot->produk->stok_promo === 0)
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="card card-warning card-outline btn disabled">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<div class="col-md-12">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
<div class="col-md-12 mt-1"
style="align-items: center;align-content: center;">
<h5>
{{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
</h5>
</div>
<div class="col-md-12">
<a class="col-sm-6 col-md-8 col-lg-12 btn btn-secondary disabled"
id="ordered-menus">Promo Habis</a>
</div>
</div>
<div class="col-md-12 mt-3">
@if (
$kelompokKategoriPivot->produk->stok_promo != '' ||
$kelompokKategoriPivot->produk->stok_promo != 0 ||
$kelompokKategoriPivot->produk->stok_promo != null)
<h6 style="color: red">Promo Tersisa:
{{ $kelompokKategoriPivot->produk->stok_promo ?? 0 }}
</h6>
@endif
</div>
</div>
</div>
</div>
@else
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="card card-warning card-outline btn"
onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<div class="col-md-12">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
<div class="col-md-12 mt-1"
style="align-items: center;align-content: center;">
<h5>
{{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
</h5>
</div>
<div class="col-md-12">
<a class="col-sm-6 col-md-8 col-lg-12 btn btn-warning"
id="ordered-menus">Pesan</a>
</div>
</div>
<div class="col-md-12 mt-3">
@if (
$kelompokKategoriPivot->produk->stok_promo != '' ||
$kelompokKategoriPivot->produk->stok_promo != 0 ||
$kelompokKategoriPivot->produk->stok_promo != null)
<h6 style="color: red">Promo Tersisa:
{{ $kelompokKategoriPivot->produk->stok_promo ?? 0 }}
</h6>
@endif
</div>
</div>
</div>
</div>
@endif
@endif
@else
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="card card-warning card-outline btn"
onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )">
<div class="card-header">
<h6 class="m-0 text-xs">
{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
</h6>
</div>
<div class="card-body">
<div class="col-md-12">
<img style="width: 100%;height: 100%;object-fit: cover;"
src="{{ $kelompokKategoriPivot->produk->gambar_produk }}"
alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
<div class="col-md-12 mt-1"
style="align-items: center;align-content: center;">
<h5>
{{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
</h5>
</div>
<div class="col-md-12">
<a class="col-sm-6 col-md-8 col-lg-12 btn btn-warning"
id="ordered-menus">Pesan</a>
</div>
</div>
</div>
</div>
</div>
@endif
@endforeach
@endif
</div>
</div>
@endforeach
</div>
</div>
<!-- /.card -->
</div>
</div>
<!-- /.col-md-6 -->
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
<div class="card card-warning 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>
</div>
<div class="card-body">
<table class="table table-bordered table-striped" id="order-menus" width="100%">
<thead style="background-color: lightgray">
<tr>
<th class="text-center">Menu</th>
<th class="text-center" width="110px">Qty</th>
<th class="text-center" width="65px">(%)</th>
<th class="text-center" width="30px">
<i class="fas fa-cog"></i>
</th>
</tr>
</thead>
<tbody id="tbody-order-menus">
</tbody>
<tfoot style="background-color: lightgray">
<tr>
<th class="text-center">Total</th>
<th colspan="3">
<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="3">
<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="3">
<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="3">
<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="3">
<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="4">
<span class="row">
<input type="text" name="nama-pemesan"
class="form-control rounded-0 col-lg-6" placeholder="Nama Pemesan"
id="nama-pemesan" required>
<input type="text" name="nomor-pemesan"
class="form-control rounded-0 col-lg-6" placeholder="Nomor Pemesan"
id="nomor-pemesan" oninput="inputNum(this)" required>
<input type="number" min="1" name="nomor-meja"
class="form-control rounded-0" placeholder="Nomor Meja" id="nomor-meja"
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="4">
<button class="btn btn-warning btn-block" id="pesan-bayar">Bayar</button>
<div class="row">
<div class="col-6 mt-2">
<button class="btn btn-info btn-block" id="print-dapur">Print
Dapur</button>
</div>
<div class="col-6 mt-2">
<button class="btn btn-danger btn-block" id="refresh">Refresh
Halaman</button>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
<div class="modal fade" id="modal-default">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Pilih Paket Komplit</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="show-modal-paket">
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
@include('pages.Kasir.modal_print_dapur')
@endsection
@push('styles')
<!-- Toastr -->
<style>
</style>
<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/datatables/datatables.min.css') }}">
@endpush
@push('scripts')
<!-- Toastr -->
<script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#print-dapur').on('click', function() {
$('#modal_print_dapur').modal('show')
})
})
</script>
<script>
$(document).ready(function() {
$('#refresh').on('click', function() {
location.reload()
})
})
</script>
<script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
<script>
$(document).ready(function() {
$('#tabelku').DataTable({
processing: true,
serverSide: true,
ajax: '{{ route('transaksi.getCetakTigaKali') }}',
columns: [{
data: 'nomor',
name: 'nomor',
orderable: false,
className: 'text-center'
},
{
data: 'kode_pesanan',
name: 'kode_pesanan'
},
{
data: 'nama_user',
name: 'nama_user'
},
{
data: 'created_at',
name: 'created_at',
className: 'text-center'
},
{
data: 'total_pesanan',
name: 'total_pesanan',
className: 'text-center'
},
{
data: 'diskon_persen',
name: 'diskon_persen',
className: 'text-center',
render: function(data) {
return data ?? 0;
}
},
{
data: 'grand_total',
name: 'grand_total'
},
{
data: 'ubah',
name: 'ubah',
className: 'text-center'
},
]
})
})
</script>
<script>
function printDapurTigaKali(id) {
var url = "{{ route('transaksi.printDapurTigaKali', '') }}/" + id + '?print=true'
window.open(url, '_blank');
location.reload(true);
}
function printDapurDuaKali(id) {
var url = "{{ route('transaksi.printDapurDuaKali', '') }}/" + id + '?print=true'
window.open(url, '_blank');
location.reload(true);
}
function printDapurSatuKali(id) {
var url = "{{ route('transaksi.printDapurSatuKali', '') }}/" + id + '?print=true'
window.open(url, '_blank');
location.reload(true);
}
</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) {
// console.log(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 diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
var total = table.rows[index].getAttribute('data-total');
qty = parseInt(qty) + 1;
var totalLama = parseInt(total) + parseInt(menuPrice);
diskonSatuan = parseInt(diskonSatuan);
total = (parseInt(total) + parseInt(menuPrice)) - ((parseInt(total) + parseInt(menuPrice)) * (diskonSatuan /
100));
table.rows[index].setAttribute('data-qty', qty);
table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
table.rows[index].setAttribute('data-total', totalLama);
var harga = menuPrice;
table.rows[index].cells[0].innerHTML = `
<td>
${params.nama_produk}
<br>
${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
<div class="input-group input-group-sm mt-1">
<input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
</div>
</td>
`;
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}, '${params.nama_produk}')"><b>-</b></button>
</span>
<input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
<span class="input-group-append">
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id}, '${params.nama_produk}')">+</button>
</span>
</div>
</td>
`;
table.rows[index].cells[2].innerHTML = `
<td class="text-center">
<div class="input-group input-group-sm">
<input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-0" value="${diskonSatuan}" onkeyup="diskonSatuanMenu(${params.id}, '${params.nama_produk}', this.value)">
</div>
</td>
`;
table.rows[index].cells[3].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();
$('#modal-default').modal('hide');
} 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-diskon-satuan="0" data-total="${params.harga_produk}">
<td>
${params.nama_produk}
<br>
<small class="text-primary">Rp. ${params.harga_produk}</small>
<div class="input-group input-group-sm mt-1">
<input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
</div>
</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}, '${params.nama_produk}')"><b>-</b></button>
</span>
<input type="text" name="bayar" class="form-control rounded-0" readonly value="${menuQty}">
<span class="input-group-append">
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params.id}, '${params.nama_produk}')">+</button>
</span>
</div>
</td>
<td class="text-center">
<div class="input-group input-group-sm">
<input type="number" name="diskon_satuan" oninput="inputNum(this)" class="form-control rounded-0" value="0" onkeyup="diskonSatuanMenu(${params.id}, '${params.nama_produk}', this.value)">
</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();
$('#modal-default').modal('hide');
}
}
// 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 diskonSatuan = row.getAttribute('data-diskon-satuan');
var total = total + ((harga * qty) - ((harga * qty) * (diskonSatuan / 100)));
}
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, nama_produk) {
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 diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
var total = table.rows[index].getAttribute('data-total');
var harga = table.rows[index].getAttribute('data-harga');
qty = parseInt(qty) + 1;
var totalLama = parseInt(total) + parseInt(harga);
diskonSatuan = parseInt(diskonSatuan);
total = (parseInt(total) + parseInt(harga)) - ((parseInt(total) + parseInt(harga)) * (diskonSatuan / 100));
table.rows[index].setAttribute('data-qty', qty);
table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
table.rows[index].setAttribute('data-total', totalLama);
table.rows[index].cells[0].innerHTML = `
<td>
${nama_produk}
<br>
${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
<div class="input-group input-group-sm mt-1">
<input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
</div>
</td>
`;
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}, '${nama_produk}')"><b>-</b></button>
</span>
<input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
<span class="input-group-append">
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
</span>
</div>
</td>
`;
calculateTotal();
}
// decrement qty menu ordered
function decrementMenu(params, nama_produk) {
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 diskonSatuan = table.rows[index].getAttribute('data-diskon-satuan');
var total = table.rows[index].getAttribute('data-total');
var harga = table.rows[index].getAttribute('data-harga');
if (qty > 1) {
qty = parseInt(qty) - 1;
var totalLama = parseInt(total) - parseInt(harga);
diskonSatuan = parseInt(diskonSatuan);
total = (parseInt(total) - parseInt(harga)) - ((parseInt(total) - parseInt(harga)) * (diskonSatuan / 100));
table.rows[index].setAttribute('data-qty', qty);
table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
table.rows[index].setAttribute('data-total', totalLama);
table.rows[index].cells[0].innerHTML = `
<td>
${nama_produk}
<br>
${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
<div class="input-group input-group-sm mt-1">
<input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
</div>
</td>
`;
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}, '${nama_produk}')"><b>-</b></button>
</span>
<input type="text" name="bayar" class="form-control rounded-0" readonly value="${qty}">
<span class="input-group-append">
<button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
</span>
</div>
</td>
`;
calculateTotal();
}
}
// diskon satuan menu ordered
function diskonSatuanMenu(params, nama_produk, diskon = 0) {
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 diskonSatuan = parseInt(diskon);
var total = table.rows[index].getAttribute('data-total');
var harga = table.rows[index].getAttribute('data-harga');
// if (diskonSatuan >= 1) {
// console.log(diskonSatuan);
var totalLama = total;
qty = parseInt(qty);
diskonSatuan = parseInt(diskonSatuan);
total = (parseInt(total)) - ((parseInt(total)) * (diskonSatuan / 100));
table.rows[index].setAttribute('data-qty', qty);
table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
table.rows[index].setAttribute('data-total', totalLama);
table.rows[index].cells[0].innerHTML = `
<td>
${nama_produk}
<br>
${(diskonSatuan >= 1) ? '<small class="text-primary"><s>Rp. ' + (harga * qty) + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + totalLama + '</small>'}
<div class="input-group input-group-sm mt-1">
<input type="text" name="keterangan_satuan" class="form-control rounded-0" placeholder="Keterangan..">
</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() {
document.getElementById('pesan-bayar').disabled = true;
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 diskonSatuan = row.getAttribute('data-diskon-satuan');
var harga = row.getAttribute('data-harga');
var total = row.getAttribute('data-total');
if (diskonSatuan != 0 && diskonSatuan != null && diskonSatuan != undefined) {
total = total - (total * (diskonSatuan / 100));
} else {
total = total
}
if (id != null || qty != null || total != null) {
orderMenus.push({
id: id,
nama: nama,
qty: qty,
diskonSatuan: diskonSatuan,
harga: harga,
total: total,
keterangan: document.getElementsByName('keterangan_satuan')[i - 1].value
});
}
}
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;
var nomorPemesan = document.getElementsByName('nomor-pemesan')[0].value;
var nomorMeja = document.getElementsByName('nomor-meja')[0].value;
// console.log('orderMenus : ' + orderMenus + '\n' +
// 'diskon : ' + diskon + '\n' +
// 'totalDiskon : ' + totalDiskon + '\n' +
// 'nominalBayar : ' + nominalBayar + '\n' +
// 'kembaliHidden : ' + kembaliHidden + '\n' +
// 'namaPemesan : ' + namaPemesan + '\n' +
// 'nomorPemesan : ' + nomorPemesan + '\n' +
// 'nomorMeja : ' + nomorMeja + '\n');
if (orderMenus.length == 0) {
alert('Menu tidak boleh kosong');
document.getElementById('pesan-bayar').disabled = false;
return false;
}
if (totalDiskon != 0) {
if (nominalBayar == '' || nominalBayar == 0) {
alert('Pembayaran tidak boleh kosong');
document.getElementById('pesan-bayar').disabled = false;
return false;
}
} else if (kembaliHidden < 0) {
alert('Pembayaran kurang');
document.getElementById('pesan-bayar').disabled = false;
return false;
} else if (namaPemesan == '') {
alert('Nama pemesan tidak boleh kosong');
document.getElementById('pesan-bayar').disabled = false;
return false;
} else if (nomorMeja == '') {
alert('Nomor meja tidak boleh kosong');
document.getElementById('pesan-bayar').disabled = false;
return false;
}
var data = {
_token: "{{ csrf_token() }}",
orderCode: "{{ $orderCode }}",
orderMenus: orderMenus,
namaPemesan: namaPemesan,
nomorPemesan: nomorPemesan,
nomorMeja: nomorMeja,
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) {
document.getElementById('pesan-bayar').disabled = false;
// 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);
}, 1000);
},
error: function(xhr, status, error) {
document.getElementById('pesan-bayar').disabled = false;
toastr.error(xhr.responseJSON.message, 'Error', {
timeOut: 3000
});
// console.log(xhr.responseJSON);
// console.log(status);
// console.log(error);
}
});
});
// select paket
var selectedMenus = [];
var menu_terpilih = document.getElementById('menu-terpilih');
// pilih paket menu terlebih dahulu kemudian cocokkan dengan menu yang ada di menu terpilih jika ada maka tidak bisa memilih paket menu yang sama
function selectPaket(params) {
var isExist = false;
var index = 0;
for (var i = 0; i < selectedMenus.length; i++) {
// lakukan periksa kembali apabila menu dengan urutan yang sama sudah ada maka hapus menu tersebut dari array selectedMenus kecuali menu dengan urutan 5 boleh lebih dari 1
if (params.urutan == 5) {
if (selectedMenus[i].id == params.id) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
isExist = true;
index = i;
}
} else if (selectedMenus[i].urutan == params.urutan) {
changeOrderedMenus(selectedMenus[i].id, 'batal');
selectedMenus.splice(i, 1);
} else if (selectedMenus[i].id == params.id) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
isExist = true;
index = i;
}
}
if (isExist) {
selectedMenus.splice(index, 1);
document.getElementById('select-ordered-menus').classList.remove('disabled');
// document.getElementById('ordered-menus').setAttribute('onclick', 'orderedMenus()');
} else {
selectedMenus.push(params);
document.getElementById('select-ordered-menus').classList.remove('disabled');
// document.getElementById('ordered-menus').classList.add('disabled');
// document.getElementById('ordered-menus').setAttribute('onclick', '');
}
menu_terpilih.innerHTML = '';
for (var i = 0; i < selectedMenus.length; i++) {
changeOrderedMenus(selectedMenus[i].id, 'pilih');
menu_terpilih.innerHTML += `
<li>
${selectedMenus[i].nama_produk}
</li>
`;
}
if (selectedMenus.length == 0) {
menu_terpilih.innerHTML = `
<li>
Pilih Paket Menu Terlebih Dahulu
</li>
`;
}
}
// ordered menus change button text and onclick
function changeOrderedMenus(id, status) {
if (status == 'batal') {
var orderedMenus = document.getElementById('ordered-menus-' + id);
orderedMenus.innerHTML = 'Pilih Paket';
orderedMenus.classList.remove('btn-secondary');
orderedMenus.classList.add('btn-warning');
return false;
} else if (status == 'pilih') {
var orderedMenus = document.getElementById('ordered-menus-' + id);
orderedMenus.innerHTML = 'Batal Pilih';
orderedMenus.classList.remove('btn-warning');
orderedMenus.classList.add('btn-secondary');
return false;
}
}
// cari paket
function cariPaket(params) {
var show_modal_paket = document.getElementById('show-modal-paket');
show_modal_paket.innerHTML = ``;
// loop selectedMenus ambil kode produk
var kodeProduk = [];
if (selectedMenus.length == 0) {
alert('Pilih Paket Menu Terlebih Dahulu');
return false;
}
for (var i = 0; i < selectedMenus.length; i++) {
if (selectedMenus[i].urutan != 5) {
kodeProduk.push({
urutan: selectedMenus[i].urutan,
kode_produk: selectedMenus[i].kode_produk
});
}
}
var data = {
_token: "{{ csrf_token() }}",
kodeProduk: kodeProduk
};
$.ajax({
url: "{{ route('transaksi.cari-paket') }}",
method: "POST",
data: data,
success: function(result) {
var dataParse = JSON.stringify(result);
// Replace karakter kutipan ganda dengan HTML entities
var htmlEntitiesData = dataParse.replace(/\"/g, '&quot;');
// Tampilkan hasil
var show_modal_paket = document.getElementById('show-modal-paket');
show_modal_paket.innerHTML += `
<div class="card card-warning card-outline btn"
onclick="aadMenu(${htmlEntitiesData});clearSelected()">
<div class="card-header">
<h5 class="card-title m-0" id="nama-produk-modal">
${result.nama_produk ?? ''}
</h5>
</div>
<div class="card-body">
<div class="col-md-12">
<img style="width: 80%;height: 80%;object-fit: cover;"
src="${result.gambar_produk}"
alt="${result.nama_produk ?? ''}">
<div class="col-md-12 mt-1"
style="align-items: center;align-content: center;">
<h5>
Rp ${result.harga_produk ?? ''}
</h5>
</div>
<div class="col-md-12">
<a class="col-6 btn btn-warning" id="ordered-menus">Pesan</a>
</div>
</div>
</div>
</div>
`;
$('#modal-default').modal('show');
},
error: function(xhr, status, error) {
toastr.error(xhr.responseJSON.message, 'Error', {
timeOut: 3000
});
// console.log(xhr.responseJSON);
// console.log(status);
// console.log(error);
}
})
}
// clear selected menus
function clearSelected() {
// console.log(selectedMenus);
for (var i = 0; i < selectedMenus.length; i++) {
changeOrderedMenus(selectedMenus[i].id, 'batal');
menu_terpilih.innerHTML = ` `;
}
selectedMenus = [];
}
function changeTab(tabId) {
// Hide all tabs
var tabContents = document.getElementsByClassName('vert-tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove('text-left', 'show', 'active');
}
var navLinks = document.getElementsByClassName('vert-nav-content');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].classList.remove('active');
// aria-selected
navLinks[i].setAttribute('aria-selected', false);
}
document.getElementById(tabId).classList.add('text-left', 'show', 'active');
document.getElementById(tabId + '-tab').classList.add('active');
// aria-selected
document.getElementById(tabId + '-tab').setAttribute('aria-selected', true);
}
function inputNum(inputElement) {
// Hapus karakter selain angka
inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
if (inputElement.value == '') {
inputElement.value = 0;
}
}
</script>
</script>
@endpush