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

538 lines
45 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" style="border-collapse: collapse; width: 100%; max-width: 600px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
<thead style="background-color: rgb(230, 230, 230)">
<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: rgb(230, 230, 230)">
<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-3">
</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-3"
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" class="text-center">
<button class="btn btn-outline-primary col-sm-12 col-md-12 col-lg-12" id="bayar_uang_pas">Uang Pas</button>
</th>
</tr>
<tr>
<th colspan="4">
<span class="row">
<input type="text" name="nama-pemesan"
class="form-control rounded-3 col-lg-6" placeholder="Nama Pemesan"
id="nama-pemesan" required>
<input type="text" name="nomor-pemesan"
class="form-control rounded-3 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-3 mt-1" placeholder="Nomor Meja" id="nomor-meja"
required>
<input type="text" name="keterangan-pesanan"
placeholder="Keterangan Pesanan" class="form-control rounded-3 mt-1"
id="keterangan-pesanan">
</span>
</th>
</tr>
<tr style="background-color: white">
<th colspan="4">
<div class="btn-group btn-block">
<button class="btn btn-warning btn-block col-sm-8 col-md-8 col-lg-8"
id="pesan-bayar-tunai">Bayar</button>
<button type="button" class="btn btn-success" id="pesan-bayar-nontunai">
Non Tunai
</button>
</div>
<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')
@include('pages.Kasir.modal_bayar')
@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
@include('pages.Kasir.js')
@endpush