Delete nominal bayar 0 atau null

Update: Desc Order on History Controller

app/Http/Controllers/Kasir/History.php

@@ -9,12 +9,14 @@ use Illuminate\Http\Request;
 
 class History extends Controller
 {
-  public function index(){
-    return view('pages.history.index');
+    public function index()
+    {
+        return view('pages.History.index');
     }
 
-  public function getDataHistory(){
-    $data = Pesanan::with(['detailPesanan', 'user'])->get();
+    public function getDataHistory()
+    {
+        $data = Pesanan::with(['detailPesanan', 'user'])->orderBy('created_at', 'desc')->get();
         $nomor = 1;
 
         return $datatables = datatables()
@@ -39,9 +41,10 @@ class History extends Controller
             ->make(true);
     }
 
-  public function print($id){
+    public function print($id)
+    {
         $pesanan = \App\Models\Pesanan::with('detailPesanan', 'user')->find($id);
 
-    return view('pages.kasir.print_dapur', compact('pesanan'));
+        return view('pages.Kasir.print_dapur', compact('pesanan'));
     }
 }

app/Http/Controllers/Kasir/Transaksi.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Kasir;
 
 use App\Http\Controllers\Controller;
+use App\Models\DetailPesanan;
 use App\Models\KelompokKategori;
 use App\Models\Produk;
 use Illuminate\Http\Request;
@@ -15,8 +16,18 @@ class Transaksi extends Controller
     {
         $orderCode =  "ORD -" . strtoupper(random_str(6, random_str()));
         $KelompokKategori = KelompokKategori::with('kelompokKategoriPivot.produk')->get();
+
+        foreach ($KelompokKategori as $item) {
+            foreach ($item->kelompokKategoriPivot as $kelompokKategoriPivot) {
+                // Query tambahan untuk mendapatkan total pembelian berdasarkan produk
+                $totalPembelianByProduk[$kelompokKategoriPivot->produk->id] = DetailPesanan::select('detail_pesanans.produk_id', DB::raw('SUM(detail_pesanans.jumlah_produk) as total_beli'))
+                    ->where('detail_pesanans.produk_id', '=', $kelompokKategoriPivot->produk->id)
+                    ->groupBy('detail_pesanans.produk_id')
+                    ->first();
+            }
+        }
         $produk = Produk::all();
-        return view('pages.Kasir.transaksi', compact('orderCode', 'KelompokKategori', 'produk'));
+        return view('pages.Kasir.transaksi', compact('orderCode', 'KelompokKategori', 'produk', 'totalPembelianByProduk'));
     }
 
     public function store(Request $request)
@@ -24,10 +35,12 @@ class Transaksi extends Controller
         $request->validate([
             'orderCode' => 'required',
             'namaPemesan' => 'required',
+            'nomorMeja' => 'required',
             'orderMenus' => 'required',
         ], [
             'orderCode.required' => 'Kode pesanan tidak boleh kosong',
             'namaPemesan.required' => 'Nama pemesan tidak boleh kosong',
+            'nomorMeja.required' => 'Nomor meja tidak boleh kosong',
             'orderMenus.required' => 'Pesanan tidak boleh kosong',
         ]);
 
@@ -43,6 +56,8 @@ class Transaksi extends Controller
             $pesananDatas = [
                 'kode_pesanan' => $request->orderCode,
                 'nama_pemesan' => $request->namaPemesan,
+                'nomor_pemesan' => $request->nomorPemesan,
+                'nomor_meja' => $request->nomorMeja,
                 'status_pesanan' => '1',
                 'tanggal_pesanan' => date('Y-m-d H:i:s'),
                 'keterangan_pesanan' => $request->keteranganPesanan ?? null,
@@ -66,6 +81,8 @@ class Transaksi extends Controller
                     'jumlah_produk' => $value['qty'],
                     'harga_produk' => $value['harga'],
                     'total_harga_produk' => $value['total'],
+                    'diskon_persen' => $value['diskonSatuan'] ?? null,
+                    'keterangan_produk' => $value['keterangan'] ?? null,
                 ];
                 $detailPesananModels = \App\Models\DetailPesanan::create($oderDatas);
             }

app/Models/DetailPesanan.php

@@ -20,6 +20,7 @@ class DetailPesanan extends Model
         'harga_produk',
         'jumlah_produk',
         'total_harga_produk',
+        'keterangan_produk',
         'diskon_id',
         'nama_diskon',
         'kode_diskon',

app/Models/Pesanan.php

@@ -16,6 +16,7 @@ class Pesanan extends Model
     protected $fillable = [
         'kode_pesanan',
         'nama_pemesan',
+        'nomor_pemesan',
         'status_pesanan',
         'tanggal_pesanan',
         'nomor_meja',

app/Models/Produk.php

@@ -17,13 +17,25 @@ class Produk extends Model
         'kategori_produk_id',
         'kode_produk',
         'nama_produk',
-        'gambar_produk',
+        'varian_produk',
         'deskripsi_produk',
         'harga_produk',
         'stok_produk',
         'tersedia',
+        'gambar_produk',
+        'urutan',
     ];
 
+    // full path to reach image from storage folder and check if image exists or not
+    public function getGambarProdukAttribute($value)
+    {
+        $storage = storage_path('app/public/produk/' . $this->kategori_produk_id . '/' . $value);
+        if (file_exists($storage)) {
+            return asset('storage/produk/' . $this->kategori_produk_id . '/' . $value);
+        } else {
+            return asset('assets/images/menu_image.jpeg');
+        }
+    }
 
     public function kategori_produk()
     {

database/migrations/2024_01_20_234338_add_nomor_pemesan_in_pesanans_table.php

@@ -0,0 +1,28 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('pesanans', function (Blueprint $table) {
+            $table->string('nomor_pemesan')->nullable()->after('nama_pemesan');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::table('pesanans', function (Blueprint $table) {
+            $table->dropColumn('nomor_pemesan');
+        });
+    }
+};

resources/views/components/main-footer.blade.php

@@ -1,10 +1,9 @@
 <!-- Main Footer -->
-<footer class="main-footer">
+{{-- <footer class="main-footer">
     <!-- To the right -->
     <div class="float-right d-none d-sm-inline">
-        Anything you want
+        version 1.0.0
     </div>
     <!-- Default to the left -->
-    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights
-    reserved.
-</footer>
+    <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+</footer> --}}

resources/views/components/navbar.blade.php

@@ -1,11 +1,12 @@
 <!-- Navbar -->
 <nav class="main-header navbar navbar-expand-lg navbar-light navbar-warning">
     <div class="container" style="display: contents">
-        <a href="#" class="navbar-brand">
-            <span class="brand-text font-weight-light">Sepiring Telur Keriting</span>
+        <a href="/" class="navbar-brand">
+            <span class="brand-text font-weight-bold ml-2" style="color: rgba(62, 62, 62, 0.526)">Sepiring Telur
+                Keriting</span>
         </a>
 
-        <div class="collapse navbar-collapse order-3" id="navbarCollapse">
+        {{-- <div class="collapse navbar-collapse order-3" id="navbarCollapse">
             <!-- Left navbar links -->
             <ul class="navbar-nav">
                 <li class="nav-item">
@@ -66,18 +67,11 @@
                     </div>
                 </div>
             </form>
-        </div>
+        </div> --}}
 
         <!-- Right navbar links -->
         <ul class="order-1 order-md-3 navbar-nav navbar-no-expand ml-auto">
             <!-- Messages Dropdown Menu -->
-            <li class="nav-item">
-                <a class="nav-link" id="full-screen" data-widget="control-sidebar" data-slide="true" href="#"
-                    role="button">
-                    <i class="fas fa-th-large"></i>
-                    Fullscreen
-                </a>
-            </li>
             <li class="nav-item dropdown">
                 <a class="nav-link" id="transaksi @if (Request::is('transaksi')) active @endif"
                     href="{{ route('transaksi.index') }}" role="button">
@@ -91,11 +85,22 @@
                     History
                 </a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link" id="full-screen" data-widget="control-sidebar" data-slide="true"
+                    href="javascript:void(0)" role="button">
+                    <i class="fas fa-expand"></i>
+                </a>
+            </li>
+            {{-- <li class="nav-item">
+                <a class="nav-link" id="full-screen" data-widget="control-sidebar" data-slide="true"
+                    href="javascript:void(0)" role="button">
+                    <i class="fa fa-arrows-rotate"></i>
+                </a>
+            </li> --}}
             <li class="nav-item">
                 <a class="nav-link" id="logout" data-widget="control-sidebar" data-slide="true" href="#"
                     role="button">
-                    <span>Keluar</span>
-                    <i class="fas fa-sign-out-alt"></i>
+                    <i class="fas fa-user"></i>
                 </a>
             </li>
         </ul>

resources/views/layouts/base.blade.php

@@ -14,10 +14,26 @@ scratch. This page gets rid of all links and provides the needed markup only.
     <link rel="stylesheet"
         href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
     <!-- Font Awesome Icons -->
+    <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/fontawesome.min.css') }}">
     <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/all.min.css') }}">
+    <link rel="stylesheet" href="{{ asset('assets/plugins/fontawesome-free/css/solid.min.css') }}">
     <!-- Theme style -->
     <link rel="stylesheet" href="{{ asset('assets/dist/css/adminlte.min.css') }}">
 
+    <style>
+        /* Chrome, Safari, Edge, Opera */
+        input::-webkit-outer-spin-button,
+        input::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        /* Firefox */
+        input[type=number] {
+            -moz-appearance: textfield;
+        }
+    </style>
+
     @stack('styles')
 
 </head>

resources/views/pages/Kasir/print.blade.php

@@ -6,15 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />
     <title>Document</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300;400&display=swap"
-        rel="stylesheet">
+    {{-- <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> --}}
+    {{-- <link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300;400&display=swap"
+        rel="stylesheet"> --}}
 </head>
 
 <style>
+    @font-face {
+        font-family: Bitum;
+        src: url('/assets/font/Bitum.ttf');
+    }
+
     @page {
-        margin: 0.2cm;
+        margin: 0cm;
     }
 
     html {
@@ -22,7 +27,7 @@
     }
 
     body {
-        font-family: 'Oswald';
+        font-family: Bitum;
         font-size: 8pt;
         /* transform: scaleY(1.5); */
     }
@@ -64,9 +69,13 @@
     hr.style2 {
         border-top: 1px solid #8c8b8b;
     }
+
+    .dashed-line {
+        border: 1.5px dashed black;
+    }
 </style>
 
-<body style="width: 80mm;">
+<body style="width: 58mm;">
     <h2 style="text-align: center">Sepiring Telur Keriting</h2>
     <p style="text-align: center">Jln. Jawa No. 28A, Jember</p>
     <hr class="style2">
@@ -74,10 +83,12 @@
         <span>
             <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
             <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
+            <p>Meja: {{ $pesanan->nomor_meja }}</p>
         </span>
         <span style="text-align: right">
             <p>{{ $pesanan->kode_pesanan }}</p>
-            <p>{{ $pesanan->user->name }}</p>
+            <p>Kasir: {{ $pesanan->user->name }}</p>
+            <p>Order: {{ $pesanan->nama_pemesan }}</p>
         </span>
     </span>
     <p></p>
@@ -85,16 +96,17 @@
     <table class="literely-table" style="width: 100%;">
         <tbody>
             @foreach ($pesanan->detailPesanan as $item)
-                {{-- @dd($item) --}}
                 <tr>
-                    <td style="width: 2px;">{{ $loop->iteration }}</td>
-                    <td style="width: 80px;" colspan="3">{{ $item->nama_produk }}</td>
+                    <td style="width: 100px;" colspan="5">{{ $item->nama_produk }}</td>
                 </tr>
                 <tr>
                     <td></td>
                     <td style="text-align: right">{{ $item->jumlah_produk }}</td>
                     <td style="text-align: right">{{ convert_to_rupiah($item->harga_produk) }}</td>
-                    <td style="text-align: right">{{ convert_to_rupiah($item->total_harga_produk) }}</td>
+                    <td style="text-align: right;width: 30px">
+                        {{ $item->diskon_persen != '' || $item->diskon_persen != 0 || $item->diskon_persen != null ? $item->diskon_persen . '%' : '' }}
+                    </td>
+                    <td style="text-align: right;width: 70px">{{ convert_to_rupiah($item->total_harga_produk) }}</td>
                 </tr>
             @endforeach
         </tbody>
@@ -132,8 +144,52 @@
     <hr class="style1">
     <p style="text-align: center">Terima Kasih, Selamat Datang Kembali</p>
     <p style="text-align: center;font-size: 7pt;">@sepiringtelurkeriting</p>
-
-
+    <hr class="dashed-line" style="margin-top: 15px;">
+    <p style="text-align: center;font-size: 7pt">untuk dapur</p>
+    <hr class="dashed-line" style="margin-top: 10px;">
+    <span style="display: flex; justify-content: space-between;margin-top: 10px;">
+        <span>
+            <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
+            <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
+            <p>Meja: {{ $pesanan->nomor_meja }}</p>
+        </span>
+        <span style="text-align: right">
+            <p>{{ $pesanan->kode_pesanan }}</p>
+            <p>Kasir: {{ $pesanan->user->name }}</p>
+            <p>Order: {{ $pesanan->nama_pemesan }}</p>
+        </span>
+    </span>
+    <p></p>
+    <hr class="style2">
+    <p style="text-align: left; margin-top:3px;">Menu Order</p>
+    <table class="table" style="width: 100%;">
+        <tbody>
+            @foreach ($pesanan->detailPesanan as $item)
+                <tr>
+                    <td style="width: 80px;" colspan="3">
+                        ({{ $item->jumlah_produk }} X)
+                        {{ $item->nama_produk }}
+                        @if ($item->keterangan_produk != '')
+                            <br>
+                            <small>
+                                &nbsp;&nbsp;&nbsp;&nbsp; ket: {{ $item->keterangan_produk }}
+                            </small>
+                        @endif
+                    </td>
+                </tr>
+            @endforeach
+        </tbody>
+    </table>
+    <p style="text-align: left; margin-top:5px;">Keterangan Pesanan Keseluruhan</p>
+    <table class="table" style="width: 100%;">
+        <tbody>
+            <tr>
+                <td style="width: 80px;" colspan="3">
+                    {{ $pesanan->keterangan_pesanan != '' ? $pesanan->keterangan_pesanan : '-' }}</td>
+            </tr>
+        </tbody>
+    </table>
+    <hr class="style2">
 </body>
 <script>
     window.print();

resources/views/pages/Kasir/print_dapur.blade.php

@@ -1,19 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="Content-Type" content="text/html; charset=Windows-1252" />
     <title>Document</title>
-        <link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300;400&display=swap"
-            rel="stylesheet">
+    {{-- <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> --}}
+    {{-- <link href="https://fonts.googleapis.com/css2?family=Oswald&family=Roboto:wght@300;400&display=swap"
+        rel="stylesheet"> --}}
 </head>
 
 <style>
+    @font-face {
+        font-family: Bitum;
+        src: url('/assets/font/Bitum.ttf');
+    }
+
     @page {
-            margin: 0.2cm;
+        margin: 0cm;
     }
 
     html {
@@ -21,7 +27,7 @@
     }
 
     body {
-            font-family: 'Oswald';
+        font-family: Bitum;
         font-size: 8pt;
         /* transform: scaleY(1.5); */
     }
@@ -63,12 +69,13 @@
     hr.style2 {
         border-top: 1px solid #8c8b8b;
     }
+
     .dashed-line {
         border: 1.5px dashed black;
     }
 </style>
 
-    <body style="width: 80mm;">
+<body style="width: 58mm;">
     <h2 style="text-align: center">Sepiring Telur Keriting</h2>
     <p style="text-align: center">Jln. Jawa No. 28A, Jember</p>
     <hr class="style2">
@@ -76,10 +83,12 @@
         <span>
             <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
             <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
+            <p>Meja: {{ $pesanan->nomor_meja }}</p>
         </span>
         <span style="text-align: right">
             <p>{{ $pesanan->kode_pesanan }}</p>
-                <p>{{ $pesanan->user->name }}</p>
+            <p>Kasir: {{ $pesanan->user->name }}</p>
+            <p>Order: {{ $pesanan->nama_pemesan }}</p>
         </span>
     </span>
     <p></p>
@@ -87,16 +96,17 @@
     <table class="literely-table" style="width: 100%;">
         <tbody>
             @foreach ($pesanan->detailPesanan as $item)
-                    {{-- @dd($item) --}}
                 <tr>
-                        <td style="width: 2px;">{{ $loop->iteration }}</td>
-                        <td style="width: 80px;" colspan="3">{{ $item->nama_produk }}</td>
+                    <td style="width: 100px;" colspan="5">{{ $item->nama_produk }}</td>
                 </tr>
                 <tr>
                     <td></td>
                     <td style="text-align: right">{{ $item->jumlah_produk }}</td>
                     <td style="text-align: right">{{ convert_to_rupiah($item->harga_produk) }}</td>
-                        <td style="text-align: right">{{ convert_to_rupiah($item->total_harga_produk) }}</td>
+                    <td style="text-align: right;width: 30px">
+                        {{ $item->diskon_persen != '' || $item->diskon_persen != 0 || $item->diskon_persen != null ? $item->diskon_persen . '%' : '' }}
+                    </td>
+                    <td style="text-align: right;width: 70px">{{ convert_to_rupiah($item->total_harga_produk) }}</td>
                 </tr>
             @endforeach
         </tbody>
@@ -135,34 +145,47 @@
     <p style="text-align: center">Terima Kasih, Selamat Datang Kembali</p>
     <p style="text-align: center;font-size: 7pt;">@sepiringtelurkeriting</p>
     <hr class="dashed-line" style="margin-top: 15px;">
-        <hr class="style2" style="margin-top: 15px;">
-        <span style="display: flex; justify-content: space-between">
+    <p style="text-align: center;font-size: 7pt">untuk dapur</p>
+    <hr class="dashed-line" style="margin-top: 10px;">
+    <span style="display: flex; justify-content: space-between;margin-top: 10px;">
         <span>
             <p>{{ tanggal_indonesia($pesanan->tanggal_pesanan) }}</p>
             <p>{{ date('H:i', strtotime($pesanan->tanggal_pesanan)) }}</p>
+            <p>Meja: {{ $pesanan->nomor_meja }}</p>
         </span>
         <span style="text-align: right">
             <p>{{ $pesanan->kode_pesanan }}</p>
-                <p>{{ $pesanan->user->name }}</p>
+            <p>Kasir: {{ $pesanan->user->name }}</p>
+            <p>Order: {{ $pesanan->nama_pemesan }}</p>
         </span>
     </span>
     <p></p>
     <hr class="style2">
-        <p style="text-align: left; margin-top:3px;">Menu</p>
+    <p style="text-align: left; margin-top:3px;">Menu Order</p>
     <table class="table" style="width: 100%;">
         <tbody>
             @foreach ($pesanan->detailPesanan as $item)
                 <tr>
-                        <td style="width: 80px;" colspan="3">* {{ $item->nama_produk }}</td>
+                    <td style="width: 80px;" colspan="3">
+                        ({{ $item->jumlah_produk }} X)
+                        {{ $item->nama_produk }}
+                        @if ($item->keterangan_produk != '')
+                            <br>
+                            <small>
+                                &nbsp;&nbsp;&nbsp;&nbsp; ket: {{ $item->keterangan_produk }}
+                            </small>
+                        @endif
+                    </td>
                 </tr>
             @endforeach
         </tbody>
     </table>
-        <p style="text-align: left; margin-top:3px;">Keterangan Pesanan</p>
+    <p style="text-align: left; margin-top:5px;">Keterangan Pesanan Keseluruhan</p>
     <table class="table" style="width: 100%;">
         <tbody>
             <tr>
-                    <td style="width: 80px;" colspan="3">* {{ $pesanan->keterangan_pesanan }}</td>
+                <td style="width: 80px;" colspan="3">
+                    {{ $pesanan->keterangan_pesanan != '' ? $pesanan->keterangan_pesanan : '-' }}</td>
             </tr>
         </tbody>
     </table>

resources/views/pages/Kasir/transaksi.blade.php

@@ -23,7 +23,7 @@
 <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-primary card-outline card-outline-tabs">
+            <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)
@@ -39,60 +39,55 @@
                         <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" style="padding: 0px">
+                                <div class="col-lg-12 col-md-6 col-sm-6" style="padding: 0px">
                                     <div class="row" style="padding: 0px">
-                                        <div class="col-4 col-sm-3" style="margin-left: 0px;padding-left: 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 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" 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" 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" 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" id="vert-tabs-free-tab" data-toggle="pill" href="#vert-tabs-free" role="tab" aria-controls="vert-tabs-free" aria-selected="false">Free</a>
+                                                <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-primary card-outline" style="margin-top: auto;margin-right: 5px;height: auto;">
+                                                <div class="card card-warning card-outline" style="margin-top: auto;margin-right: 5px;height: auto;">
                                                     <div class="card-header">
-                                                        <h5 class="card-title m-0" id="nama-paket">
+                                                        <h6 class="text-sm m-0" id="nama-paket">
                                                             Paket Menu Terpilih
-                                                        </h5>
+                                                        </h6>
                                                     </div>
                                                     <div class="card-body" style="padding: 2px 20px 2px">
                                                         <ul style="padding: 0px 5px 0px;" id="menu-terpilih">
-                                                            <li>
+                                                            <li class="text=xs">
                                                                 Pilih Paket Menu Terlebih Dahulu
                                                             </li>
                                                         </ul>
                                                     </div>
-                                                    <a class="btn btn-primary disabled" id="select-ordered-menus" onclick="cariPaket()">Pilih
+                                                    <a class="btn btn-warning disabled" id="select-ordered-menus" onclick="cariPaket()">Pilih
                                                         Paket Menu
                                                     </a>
                                                 </div>
                                             </div>
                                         </div>
-                                        <div class="col-8 col-sm-9" style="padding: 0px;">
+                                        <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 text-left fade show active" id="vert-tabs-nasi" role="tabpanel" aria-labelledby="vert-tabs-nasi-tab">
+                                                    <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-lg-4">
-                                                                <div class="card card-primary card-outline">
+                                                            <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">
-                                                                        <h5 class="card-title m-0">
+                                                                        <h6 class="m-0 text-xs">
                                                                             {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                        </h5>
+                                                                        </h6>
                                                                     </div>
                                                                     <div class="card-body">
-                                                                        <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                                                @else
-                                                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;" src="{{ $kelompokKategoriPivot->produk->gambar_produk }}" alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
                                                                     </div>
-                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                        Paket
+                                                                    <a class="btn btn-warning" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                        Pilih Paket
                                                                     </a>
                                                                 </div>
                                                             </div>
@@ -100,27 +95,22 @@
                                                             @endforeach
                                                         </div>
                                                     </div>
-                                                    <div class="tab-pane fade" id="vert-tabs-telur" role="tabpanel" aria-labelledby="vert-tabs-telur-tab">
+                                                    <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-lg-4">
-                                                                <div class="card card-primary card-outline">
+                                                            <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">
-                                                                        <h5 class="card-title m-0">
+                                                                        <h6 class="m-0 text-xs">
                                                                             {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                        </h5>
+                                                                        </h6>
                                                                     </div>
                                                                     <div class="card-body">
-                                                                        <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                                                @else
-                                                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;" src="{{ $kelompokKategoriPivot->produk->gambar_produk }}" alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
                                                                     </div>
-                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                        Paket
+                                                                    <a class="btn btn-warning" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                        Pilih Paket
                                                                     </a>
                                                                 </div>
                                                             </div>
@@ -128,26 +118,21 @@
                                                             @endforeach
                                                         </div>
                                                     </div>
-                                                    <div class="tab-pane fade" id="vert-tabs-sambel" role="tabpanel" aria-labelledby="vert-tabs-sambel-tab">
+                                                    <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-lg-4">
-                                                                <div class="card card-primary card-outline">
+                                                            <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">
-                                                                        <h5 class="card-title m-0">
+                                                                        <h6 class="m-0 text-xs">
                                                                             {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                        </h5>
+                                                                        </h6>
                                                                     </div>
                                                                     <div class="card-body">
-                                                                        <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                                                @else
-                                                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;" src="{{ $kelompokKategoriPivot->produk->gambar_produk }}" alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
                                                                     </div>
-                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                    <a class="btn btn-warning" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
                                                                         Paket
                                                                     </a>
                                                                 </div>
@@ -156,26 +141,21 @@
                                                             @endforeach
                                                         </div>
                                                     </div>
-                                                    <div class="tab-pane fade" id="vert-tabs-topping" role="tabpanel" aria-labelledby="vert-tabs-topping-tab">
+                                                    <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-lg-4">
-                                                                <div class="card card-primary card-outline">
+                                                            <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">
-                                                                        <h5 class="card-title m-0">
+                                                                        <h6 class="m-0 text-xs">
                                                                             {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                        </h5>
+                                                                        </h6>
                                                                     </div>
                                                                     <div class="card-body">
-                                                                        <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                                                @else
-                                                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;" src="{{ $kelompokKategoriPivot->produk->gambar_produk }}" alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
                                                                     </div>
-                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                    <a class="btn btn-warning" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
                                                                         Paket
                                                                     </a>
                                                                 </div>
@@ -184,27 +164,22 @@
                                                             @endforeach
                                                         </div>
                                                     </div>
-                                                    <div class="tab-pane fade" id="vert-tabs-free" role="tabpanel" aria-labelledby="vert-tabs-free-tab">
+                                                    <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-lg-4">
-                                                                <div class="card card-primary card-outline">
+                                                            <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">
-                                                                        <h5 class="card-title m-0">
+                                                                        <h6 class="m-0 text-xs">
                                                                             {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                        </h5>
+                                                                        </h6>
                                                                     </div>
                                                                     <div class="card-body">
-                                                                        <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                                                @else
-                                                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-
+                                                                        <img style="width: 100%;height: 100%;object-fit: cover;" src="{{ $kelompokKategoriPivot->produk->gambar_produk }}" alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
                                                                     </div>
-                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                        Paket
+                                                                    <a class="btn btn-warning" id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                        Pilih Paket
                                                                     </a>
                                                                 </div>
                                                             </div>
@@ -219,30 +194,60 @@
                                 </div>
                                 @else
                                 @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
-                                <div class="col-lg-4">
-                                    <div class="card card-primary card-outline btn" onclick="aadMenu( {{ $kelompokKategoriPivot->produk }} )">
+                                {{-- Jika paket irit  --}}
+                                @if ($kelompokKategoriPivot->kelompok_kategori_id == 2)
+                                <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">
-                                            <h5 class="card-title m-0">
+                                            <h6 class="m-0 text-xs">
                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                            </h5>
+                                            </h6>
                                         </div>
                                         <div class="card-body">
-                                            <div class="col">
-                                                <img style="width: 100%;height: 200px;object-fit: cover;" src="
-                                                                @if ($kelompokKategoriPivot->produk->gambar_produk != null) {{ asset('storage/' . $kelompokKategoriPivot->produk->gambar_produk) }}
-                                                                @else
-                                                                    {{ asset('assets/images/menu_image.jpeg') }} @endif
-                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
-                                                <div class="row" style="margin: 5px;display: flex;align-items: center;align-content: center;">
-                                                    <h5 class="col-6">
+                                            <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>
-                                                    <a class="col-6 btn btn-primary" id="ordered-menus">Pesan</a>
+                                                </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">
+                                                <h6 style="color: red">Jumlah terjual :
+                                                    {{ $totalPembelianByProduk[$kelompokKategoriPivot->produk->id]->total_beli ?? 0 }}
+                                                </h6>
+
+                                            </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>
                                     </div>
                                 </div>
+                                @endif
                                 @endforeach
                                 @endif
                             </div>
@@ -255,7 +260,7 @@
         </div>
         <!-- /.col-md-6 -->
         <div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
-            <div class="card card-primary card-outline">
+            <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>
@@ -269,9 +274,11 @@
                         <thead style="background-color: lightgray">
                             <tr>
                                 <th class="text-center">Menu</th>
-                                <th width="110px">Qty</th>
-                                <th width="60px">Diskon (%)</th>
-                                <th width="30px">⚙️</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">
@@ -326,14 +333,16 @@
                             <tr>
                                 <th colspan="4">
                                     <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="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-primary btn-block" id="pesan-bayar">Bayar</button>
+                                    <button class="btn btn-warning btn-block" id="pesan-bayar">Bayar</button>
                                 </th>
                             </tr>
                         </tfoot>
@@ -369,7 +378,6 @@
 @push('styles')
 <!-- Toastr -->
 <style>
-
 </style>
 <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
 @endpush
@@ -439,12 +447,14 @@
             qty = parseInt(qty) + 1;
             var totalLama = parseInt(total) + parseInt(menuPrice);
             diskonSatuan = parseInt(diskonSatuan);
-            total = (parseInt(total) + parseInt(menuPrice)) - ((parseInt(total) + parseInt(menuPrice)) * (diskonSatuan / 100));
+            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}
@@ -471,7 +481,7 @@
             table.rows[index].cells[2].innerHTML = `
                 <td class="text-center">
                     <div class="input-group input-group-sm">
-                        <input type="number" name="diskon_satuan" class="form-control rounded-0" value="0" onkeyup="diskonSatuanMenu(${params.id}, '${params.nama_produk}', this.value)">
+                        <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>
             `;
@@ -508,7 +518,7 @@
                     </td>
                     <td class="text-center">
                         <div class="input-group input-group-sm">
-                            <input type="number" name="diskon_satuan" class="form-control rounded-0" value="0" onkeyup="diskonSatuanMenu(${params.id}, '${params.nama_produk}', this.value)">
+                            <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">
@@ -776,7 +786,7 @@
         var ribuan = toRupiah(kembali);
         if (totalDiskon == 0 || bayar == 0) {
             ribuan = 0;
-            var bayar = document.getElementsByName('nominal-bayar')[0].value = '';
+            // var bayar = document.getElementsByName('nominal-bayar')[0].value = '';
 
         }
         document.getElementById('kembali').innerHTML = ribuan;
@@ -803,6 +813,14 @@
             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
+            }
+            console.log('id : ' + id + ' | nama : ' + nama + ' | qty : ' + qty + ' | diskonSatuan : ' +
+                diskonSatuan +
+                ' | harga : ' + harga + ' | total : ' + total);
 
             if (id != null || qty != null || total != null) {
                 orderMenus.push({
@@ -811,7 +829,8 @@
                     qty: qty,
                     diskonSatuan: diskonSatuan,
                     harga: harga,
-                    total: total
+                    total: total,
+                    keterangan: document.getElementsByName('keterangan_satuan')[i - 1].value
                 });
             }
         }
@@ -822,6 +841,8 @@
         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;
 
         if (orderMenus.length == 0) {
             alert('Menu tidak boleh kosong');
@@ -836,15 +857,19 @@
         } else if (namaPemesan == '') {
             alert('Nama pemesan tidak boleh kosong');
             return false;
+        } else if (nomorMeja == '') {
+            alert('Nomor meja tidak boleh kosong');
+            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,
@@ -893,12 +918,15 @@
             // 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;
             }
@@ -917,6 +945,7 @@
 
         menu_terpilih.innerHTML = '';
         for (var i = 0; i < selectedMenus.length; i++) {
+            changeOrderedMenus(selectedMenus[i].id, 'pilih');
             menu_terpilih.innerHTML += `
                 <li>
                     ${selectedMenus[i].nama_produk}
@@ -933,6 +962,24 @@
         }
     }
 
+    // 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');
@@ -965,32 +1012,28 @@
                 // Replace karakter kutipan ganda dengan HTML entities
                 var htmlEntitiesData = dataParse.replace(/\"/g, '&quot;');
                 // Tampilkan hasil
-                console.log(htmlEntitiesData);
                 var show_modal_paket = document.getElementById('show-modal-paket');
-                if (result.gambar_produk != null) {
-                    var gambar_produk = result.full_path;
-                } else {
-                    var gambar_produk = "{{ asset('assets/images/menu_image.jpeg') }}";
-                }
                 show_modal_paket.innerHTML += `
-                    <div class="card card-primary card-outline btn"
-                        onclick="aadMenu(${htmlEntitiesData})">
+                    <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">
-                                <img style="width: 100%;height: 200px;object-fit: cover;"
-                                    src="${gambar_produk}"
+                            <div class="col-md-12">
+                                <img style="width: 80%;height: 80%;object-fit: cover;"
+                                    src="${result.gambar_produk}"
                                     alt="${result.nama_produk ?? ''}">
-                                <div class="row"
-                                    style="margin: 5px;display: flex;align-items: center;align-content: center;">
-                                    <h5 class="col-6">
-                                        ${result.harga_produk ?? ''}
+                                <div class="col-md-12 mt-1"
+                                    style="align-items: center;align-content: center;">
+                                    <h5>
+                                        Rp ${result.harga_produk ?? ''}
                                     </h5>
-                                    <a class="col-6 btn btn-primary" id="ordered-menus">Pesan</a>
+                                </div>
+                                <div class="col-md-12">
+                                    <a class="col-6 btn btn-warning" id="ordered-menus">Pesan</a>
                                 </div>
                             </div>
                         </div>
@@ -1008,5 +1051,45 @@
             }
         })
     }
+
+    // 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