diff --git a/resources/views/pages/Kasir/transaksi.blade.php b/resources/views/pages/Kasir/transaksi.blade.php
index e315218..c8504ee 100644
--- a/resources/views/pages/Kasir/transaksi.blade.php
+++ b/resources/views/pages/Kasir/transaksi.blade.php
@@ -20,532 +20,496 @@
 @endsection --}}
 
 @section('content')
-    <div class="container" style="display: contents;">
-        <div class="row" style="padding: 5px">
-            <div class="col-lg-8">
-                <div class="card card-primary card-outline card-outline-tabs">
-                    <div class="card-header p-0 border-bottom-0">
-                        <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
-                            @foreach ($KelompokKategori as $key => $item)
-                                <li class="nav-item">
-                                    <a class="nav-link @if ($key == 0) active @endif"
-                                        id="custom-tabs-four-{{ $item->kode_kelompok_kategori }}-tab" data-toggle="pill"
-                                        href="#custom-tabs-four-{{ $item->kode_kelompok_kategori }}" role="tab"
-                                        aria-controls="custom-tabs-four-{{ $item->kode_kelompok_kategori }}"
-                                        aria-selected="true">{{ $item->nama_kelompok_kategori }}</a>
-                                </li>
-                            @endforeach
-                        </ul>
-                    </div>
-                    <div class="card-body" id="batasitinggi"
-                        style="height: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" 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="nav flex-column nav-tabs h-100" id="vert-tabs-tab"
-                                                            role="tablist" aria-orientation="vertical">
+<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-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" 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="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 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>
 
-                                                            <div class="card card-primary card-outline"
-                                                                style="margin-top: auto;margin-right: 5px;height: auto;">
-                                                                <div class="card-header">
-                                                                    <h5 class="card-title m-0" id="nama-paket">
-                                                                        Paket Menu Terpilih
-                                                                    </h5>
+                                                <div class="card card-primary card-outline" style="margin-top: auto;margin-right: 5px;height: auto;">
+                                                    <div class="card-header">
+                                                        <h5 class="card-title m-0" id="nama-paket">
+                                                            Paket Menu Terpilih
+                                                        </h5>
+                                                    </div>
+                                                    <div class="card-body" style="padding: 2px 20px 2px">
+                                                        <ul style="padding: 0px 5px 0px;" id="menu-terpilih">
+                                                            <li>
+                                                                Pilih Paket Menu Terlebih Dahulu
+                                                            </li>
+                                                        </ul>
+                                                    </div>
+                                                    <a class="btn btn-primary 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="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="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="card-header">
+                                                                        <h5 class="card-title m-0">
+                                                                            {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                        </h5>
+                                                                    </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 ?? '' }}">
+
+                                                                    </div>
+                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                        Paket
+                                                                    </a>
                                                                 </div>
-                                                                <div class="card-body" style="padding: 2px 20px 2px">
-                                                                    <ul style="padding: 0px 5px 0px;" id="menu-terpilih">
-                                                                        <li>
-                                                                            Pilih Paket Menu Terlebih Dahulu
-                                                                        </li>
-                                                                    </ul>
-                                                                </div>
-                                                                <a class="btn btn-primary disabled"
-                                                                    id="select-ordered-menus" onclick="cariPaket()">Pilih
-                                                                    Paket Menu
-                                                                </a>
                                                             </div>
+                                                            @endif
+                                                            @endforeach
                                                         </div>
                                                     </div>
-                                                    <div class="col-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="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="card-header">
-                                                                                            <h5 class="card-title m-0">
-                                                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                                            </h5>
-                                                                                        </div>
-                                                                                        <div class="card-body">
-                                                                                            <img style="width: 100%;height: 200px;object-fit: cover;"
-                                                                                                src="
+                                                    <div class="tab-pane fade" 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="card-header">
+                                                                        <h5 class="card-title m-0">
+                                                                            {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                        </h5>
+                                                                    </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 ?? '' }}">
+                                                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
 
-                                                                                        </div>
-                                                                                        <a class="btn btn-primary"
-                                                                                            id="ordered-menus"
-                                                                                            onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                                            Paket
-                                                                                        </a>
-                                                                                    </div>
-                                                                                </div>
-                                                                            @endif
-                                                                        @endforeach
-                                                                    </div>
-                                                                </div>
-                                                                <div class="tab-pane fade" 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="card-header">
-                                                                                            <h5 class="card-title m-0">
-                                                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                                            </h5>
-                                                                                        </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 ?? '' }}">
-
-                                                                                        </div>
-                                                                                        <a class="btn btn-primary"
-                                                                                            id="ordered-menus"
-                                                                                            onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                                            Paket
-                                                                                        </a>
-                                                                                    </div>
-                                                                                </div>
-                                                                            @endif
-                                                                        @endforeach
-                                                                    </div>
-                                                                </div>
-                                                                <div class="tab-pane fade" 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="card-header">
-                                                                                            <h5 class="card-title m-0">
-                                                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                                            </h5>
-                                                                                        </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 ?? '' }}">
-
-                                                                                        </div>
-                                                                                        <a class="btn btn-primary"
-                                                                                            id="ordered-menus"
-                                                                                            onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                                            Paket
-                                                                                        </a>
-                                                                                    </div>
-                                                                                </div>
-                                                                            @endif
-                                                                        @endforeach
-                                                                    </div>
-                                                                </div>
-                                                                <div class="tab-pane fade" 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="card-header">
-                                                                                            <h5 class="card-title m-0">
-                                                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                                            </h5>
-                                                                                        </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 ?? '' }}">
-
-                                                                                        </div>
-                                                                                        <a class="btn btn-primary"
-                                                                                            id="ordered-menus"
-                                                                                            onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                                            Paket
-                                                                                        </a>
-                                                                                    </div>
-                                                                                </div>
-                                                                            @endif
-                                                                        @endforeach
-                                                                    </div>
-                                                                </div>
-                                                                <div class="tab-pane fade" 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="card-header">
-                                                                                            <h5 class="card-title m-0">
-                                                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                                                            </h5>
-                                                                                        </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 ?? '' }}">
-
-                                                                                        </div>
-                                                                                        <a class="btn btn-primary"
-                                                                                            id="ordered-menus"
-                                                                                            onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
-                                                                                            Paket
-                                                                                        </a>
-                                                                                    </div>
-                                                                                </div>
-                                                                            @endif
-                                                                        @endforeach
                                                                     </div>
+                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                        Paket
+                                                                    </a>
                                                                 </div>
                                                             </div>
+                                                            @endif
+                                                            @endforeach
+                                                        </div>
+                                                    </div>
+                                                    <div class="tab-pane fade" 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="card-header">
+                                                                        <h5 class="card-title m-0">
+                                                                            {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                        </h5>
+                                                                    </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 ?? '' }}">
+
+                                                                    </div>
+                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                        Paket
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                            @endif
+                                                            @endforeach
+                                                        </div>
+                                                    </div>
+                                                    <div class="tab-pane fade" 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="card-header">
+                                                                        <h5 class="card-title m-0">
+                                                                            {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                        </h5>
+                                                                    </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 ?? '' }}">
+
+                                                                    </div>
+                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                        Paket
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                            @endif
+                                                            @endforeach
+                                                        </div>
+                                                    </div>
+                                                    <div class="tab-pane fade" 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="card-header">
+                                                                        <h5 class="card-title m-0">
+                                                                            {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                                                        </h5>
+                                                                    </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 ?? '' }}">
+
+                                                                    </div>
+                                                                    <a class="btn btn-primary" id="ordered-menus" onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )">Pilih
+                                                                        Paket
+                                                                    </a>
+                                                                </div>
+                                                            </div>
+                                                            @endif
+                                                            @endforeach
                                                         </div>
                                                     </div>
                                                 </div>
                                             </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 }} )">
-                                                        <div class="card-header">
-                                                            <h5 class="card-title m-0">
-                                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
-                                                            </h5>
-                                                        </div>
-                                                        <div class="card-body">
-                                                            <div class="col">
-                                                                <img style="width: 100%;height: 200px;object-fit: cover;"
-                                                                    src="
+                                        </div>
+                                    </div>
+                                </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 }} )">
+                                        <div class="card-header">
+                                            <h5 class="card-title m-0">
+                                                {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
+                                            </h5>
+                                        </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">
-                                                                        {{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
-                                                                    </h5>
-                                                                    <a class="col-6 btn btn-primary"
-                                                                        id="ordered-menus">Pesan</a>
-                                                                </div>
-                                                            </div>
-                                                        </div>
-                                                    </div>
+                                                                " alt="{{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}">
+                                                <div class="row" style="margin: 5px;display: flex;align-items: center;align-content: center;">
+                                                    <h5 class="col-6">
+                                                        {{ convert_to_rupiah($kelompokKategoriPivot->produk->harga_produk) }}
+                                                    </h5>
+                                                    <a class="col-6 btn btn-primary" id="ordered-menus">Pesan</a>
                                                 </div>
-                                            @endforeach
-                                        @endif
+                                            </div>
+                                        </div>
                                     </div>
                                 </div>
-                            @endforeach
+                                @endforeach
+                                @endif
+                            </div>
                         </div>
-                    </div>
-                    <!-- /.card -->
-                </div>
-            </div>
-            <!-- /.col-md-6 -->
-            <div class="col-lg-4">
-                <div class="card card-primary card-outline">
-                    <div class="card-header">
-                        <h5 class="col-lg-6 card-title m-0">Kode Pesanan
-                            <small>{{ $orderCode }}</small>
-                        </h5>
-                        <h5 class="col-lg-6 card-title m-0" style="text-align: right">
-                            <small id="datetime-order"></small>
-                        </h5>
-                    </div>
-                    <div class="card-body">
-                        <table class="table table-bordered table-striped" id="order-menus" width="100%">
-                            <thead style="background-color: lightgray">
-                                <tr>
-                                    <th width="60%" class="text-center">Menu</th>
-                                    <th>Qty</th>
-                                    <th width="10%">⚙️</th>
-                                </tr>
-                            </thead>
-                            <tbody id="tbody-order-menus">
-                            </tbody>
-                            <tfoot style="background-color: lightgray">
-                                <tr>
-                                    <th class="text-center">Total</th>
-                                    <th colspan="2">
-                                        <span class="row">
-                                            <span class="col-6">Rp.</span>
-                                            <span class="col-6" style="text-align: right" id="total">0</span>
-                                            <span class="col-6" id="total-hidden" style="display: none">0</span>
-                                        </span>
-                                    </th>
-                                </tr>
-                                <tr>
-                                    <th class="text-center">Diskon (%)</th>
-                                    <th colspan="2">
-                                        <div class="input-group input-group-sm">
-                                            <input type="number" name="diskon" class="form-control rounded-0">
-                                        </div>
-                                    </th>
-                                </tr>
-                                <tr>
-                                    <th class="text-center">Grand Total</th>
-                                    <th colspan="2">
-                                        <span class="row">
-                                            <span class="col-6">Rp.</span>
-                                            <span class="col-6" style="text-align: right" id="total-diskon">0</span>
-                                            <span class="col-6" id="total-diskon-hidden" style="display: none">0</span>
-                                        </span>
-                                    </th>
-                                </tr>
-                                <tr>
-                                    <th class="text-center">Bayar</th>
-                                    <th colspan="2">
-                                        <div class="input-group input-group-sm">
-                                            <input type="text" name="nominal-bayar" class="form-control rounded-0"
-                                                required id="nominal-bayar">
-                                        </div>
-                                    </th>
-                                </tr>
-                                <tr>
-                                    <th class="text-center">Kembali</th>
-                                    <th colspan="2">
-                                        <span class="row">
-                                            <span class="col-6">Rp.</span>
-                                            <span class="col-6" style="text-align: right" id="kembali">0</span>
-                                            <span class="col-6" id="kembali-hidden" style="display: none">0</span>
-                                        </span>
-                                    </th>
-                                </tr>
-                                <tr>
-                                    <th colspan="3">
-                                        <span class="row">
-                                            <input type="text" name="nama-pemesan" class="form-control rounded-0"
-                                                placeholder="Nama Pemesan" id="nama-pemesan" required>
-                                            <input type="text" name="keterangan-pesanan"
-                                                placeholder="Keterangan Pesanan" class="form-control rounded-0"
-                                                id="keterangan-pesanan">
-                                        </span>
-                                    </th>
-                                </tr>
-                                <tr style="background-color: white">
-                                    <th colspan="3">
-                                        <button class="btn btn-primary btn-block" id="pesan-bayar">Bayar</button>
-                                    </th>
-                                </tr>
-                            </tfoot>
-                        </table>
-
+                        @endforeach
                     </div>
                 </div>
+                <!-- /.card -->
             </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">Spesial Paket Komplit</h4>
-                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
+        <!-- /.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-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="modal-body" id="show-modal-paket">
+                <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 width="110px">Qty</th>
+                                <th width="60px">Diskon (%)</th>
+                                <th width="30px">⚙️</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" placeholder="Nama Pemesan" id="nama-pemesan" required>
+                                        <input type="text" name="keterangan-pesanan" placeholder="Keterangan Pesanan" class="form-control rounded-0" id="keterangan-pesanan">
+                                    </span>
+                                </th>
+                            </tr>
+                            <tr style="background-color: white">
+                                <th colspan="4">
+                                    <button class="btn btn-primary btn-block" id="pesan-bayar">Bayar</button>
+                                </th>
+                            </tr>
+                        </tfoot>
+                    </table>
+
                 </div>
             </div>
-            <!-- /.modal-content -->
         </div>
-        <!-- /.modal-dialog -->
+        <!-- /.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">Spesial 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>
 @endsection
 
 @push('styles')
-    <!-- Toastr -->
-    <style>
+<!-- Toastr -->
+<style>
 
-    </style>
-    <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
+</style>
+<link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
 @endpush
 
 @push('scripts')
-    <!-- Toastr -->
-    <script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
-    <script>
-        //  set interval waktu pesanan
-        function showTime() {
-            var date = new Date(),
-                utc = new Date(Date.UTC(
-                    date.getFullYear(),
-                    date.getMonth(),
-                    date.getDate(),
-                    date.getHours() - 7,
-                    date.getMinutes(),
-                    date.getSeconds()
-                ));
+<!-- Toastr -->
+<script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
+<script>
+    //  set interval waktu pesanan
+    function showTime() {
+        var date = new Date(),
+            utc = new Date(Date.UTC(
+                date.getFullYear(),
+                date.getMonth(),
+                date.getDate(),
+                date.getHours() - 7,
+                date.getMinutes(),
+                date.getSeconds()
+            ));
 
-            // format datetime indonesia
-            var options = {
-                weekday: 'long',
-                year: 'numeric',
-                month: 'long',
-                day: 'numeric',
-                hour: 'numeric',
-                hour12: true,
-                minute: 'numeric',
-                second: 'numeric'
-            };
+        // 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);
+        // 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;
+            }
         }
 
-        setInterval(showTime, 1000);
+        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');
 
-        //  make function add menu to table and calculate qty and total price menu ordered and check menu ordered is exist or not in tbody table order-menus insert this in
-        function aadMenu(params) {
-            var table = document.getElementById("order-menus");
-            var menu = params;
-            var menuId = menu.id;
-            var menuName = menu.nama_produk;
-            var menuPrice = menu.harga_produk;
-            var menuQty = 1;
-            var menuTotal = menuPrice * menuQty;
+            qty = parseInt(qty) + 1;
+            diskonSatuan = parseInt(diskonSatuan);
+            total = (parseInt(total) + parseInt(menuPrice)) - ((parseInt(total) + parseInt(menuPrice)) * (diskonSatuan / 100));
 
-            var isExist = false;
-            var index = 0;
+            table.rows[index].setAttribute('data-qty', qty);
+            table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
+            table.rows[index].setAttribute('data-total', total);
 
-            for (var i = 1, row; row = table.rows[i]; i++) {
-                var id = row.getAttribute('data-id');
-
-                if (id == menuId) {
-                    isExist = true;
-                    index = i;
-                }
-            }
-
-            if (isExist) {
-                var qty = table.rows[index].getAttribute('data-qty');
-                var total = table.rows[index].getAttribute('data-total');
-
-                qty = parseInt(qty) + 1;
-                total = parseInt(total) + parseInt(menuPrice);
-
-                table.rows[index].setAttribute('data-qty', qty);
-                table.rows[index].setAttribute('data-total', total);
-
-                table.rows[index].cells[1].innerHTML = `
+            table.rows[index].cells[0].innerHTML = `
+                <td>
+                    ${params.nama_produk}
+                    <br>
+                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</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})"><b>-</b></button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id}, '${params.nama_produk}')"><b>-</b></button>
                         </span>
-                        <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                        <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})">+</button>
+                            <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 = `
+            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">
+                    </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-total="${params.harga_produk}">
+            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-danger">Rp. ${params.harga_produk}</small>
+                        <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})"><b>-</b></button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params.id}, '${params.nama_produk}')"><b>-</b></button>
                             </span>
-                            <input type="number" name="bayar" class="form-control rounded-0" value="${menuQty}">
+                            <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})">+</button>
+                                <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" class="form-control rounded-0" value="0">
+                        </div>
+                    </td>
                     <td class="text-center">
                         <button class="btn btn-danger btn-sm" onclick="deleteMenu(${params.id})">
                             <i class="fas fa-trash"></i>
@@ -553,383 +517,414 @@
                     </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();
+            $('#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;
+            }
         }
 
-        //  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;
+        table.deleteRow(index);
+        calculateTotal();
+    }
 
-            for (var i = 1, row; row = table.rows[i]; i++) {
-                var harga = row.getAttribute('data-harga');
-                var qty = row.getAttribute('data-qty');
-                var total = total + (harga * qty);
-            }
+    //  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;
 
-            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();
+        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)));
         }
 
-        //  increment qty menu ordered
-        function incrementMenu(params) {
-            var table = document.getElementById("order-menus");
-            var index = 0;
+        var ribuantotal = toRupiah(total);
 
-            for (var i = 1, row; row = table.rows[i]; i++) {
-                var id = row.getAttribute('data-id');
+        document.getElementById('total').innerHTML = ribuantotal;
+        document.getElementById('total-hidden').innerHTML = total;
 
-                if (id == params) {
-                    index = i;
-                }
+        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 total = table.rows[index].getAttribute('data-total');
-            var harga = table.rows[index].getAttribute('data-harga');
+        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;
-            total = parseInt(total) + parseInt(harga);
+        qty = parseInt(qty) + 1;
+        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-total', total);
+        table.rows[index].setAttribute('data-qty', qty);
+        table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
+        table.rows[index].setAttribute('data-total', total);
 
-            table.rows[index].cells[1].innerHTML = `
+        table.rows[index].cells[0].innerHTML = `
+            <td>
+                ${nama_produk}
+                <br>
+                ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</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})"><b>-</b></button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params}, '${nama_produk}')"><b>-</b></button>
                         </span>
-                        <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                        <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})">+</button>
+                            <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
                         </span>
                     </div>
                 </td>
             `;
 
-            calculateTotal();
+        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;
+            }
         }
 
-        //  decrement qty menu ordered
-        function decrementMenu(params) {
-            var table = document.getElementById("order-menus");
-            var index = 0;
+        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');
 
-            for (var i = 1, row; row = table.rows[i]; i++) {
-                var id = row.getAttribute('data-id');
+        if (qty > 1) {
+            qty = parseInt(qty) - 1;
+            diskonSatuan = parseInt(diskonSatuan);
+            total = (parseInt(total) - parseInt(harga)) - ((parseInt(total) - parseInt(harga)) * (diskonSatuan / 100));
 
-                if (id == params) {
-                    index = i;
-                }
-            }
+            table.rows[index].setAttribute('data-qty', qty);
+            table.rows[index].setAttribute('data-diskon-satuan', diskonSatuan);
+            table.rows[index].setAttribute('data-total', total);
 
-            var qty = table.rows[index].getAttribute('data-qty');
-            var total = table.rows[index].getAttribute('data-total');
-            var harga = table.rows[index].getAttribute('data-harga');
+            table.rows[index].cells[0].innerHTML = `
+                <td>
+                    ${nama_produk}
+                    <br>
+                    ${(diskonSatuan > 0) ? '<small class="text-primary"><s>Rp. ' + harga + '</s></small> | <small class="text-danger">Rp. ' + total + '</small>' : '<small class="text-primary">Rp. ' + total + '</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>
+            `;
 
-            if (qty > 1) {
-                qty = parseInt(qty) - 1;
-                total = parseInt(total) - parseInt(harga);
-
-                table.rows[index].setAttribute('data-qty', qty);
-                table.rows[index].setAttribute('data-total', total);
-
-                table.rows[index].cells[1].innerHTML = `
+            table.rows[index].cells[1].innerHTML = `
                     <td class="text-center">
                         <div class="input-group input-group-sm">
                             <span class="input-group-append">
-                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params})"><b>-</b></button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="decrementMenu(${params}, '${nama_produk}')"><b>-</b></button>
                             </span>
-                            <input type="number" name="bayar" class="form-control rounded-0" value="${qty}">
+                            <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})">+</button>
+                                <button type="button" class="btn btn-default btn-xs btn-flat" onclick="incrementMenu(${params}, '${nama_produk}')">+</button>
                             </span>
                         </div>
                     </td>
                 `;
 
-                calculateTotal();
+            calculateTotal();
+        }
+    }
+
+    // diskon use keyup
+    document.getElementsByName('diskon')[0].addEventListener('keyup', function() {
+        var diskon = document.getElementsByName('diskon')[0].value;
+        var total = document.getElementById('total-hidden').innerHTML;
+        var totalDiskon = total - (total * (diskon / 100));
+
+        var ribuan = toRupiah(totalDiskon);
+        document.getElementById('total-diskon-hidden').innerHTML = totalDiskon;
+        document.getElementById('total-diskon').innerHTML = ribuan;
+
+        calculatekembali();
+    });
+
+    /* Dengan Rupiah */
+    var dengan_rupiah = document.getElementById('nominal-bayar');
+    dengan_rupiah.addEventListener('keyup', function(e) {
+        dengan_rupiah.value = formatRupiah(this.value, 'Rp. ');
+    });
+
+    /* Fungsi */
+    function formatRupiah(angka, prefix) {
+        var number_string = angka.replace(/[^,\d]/g, '').toString(),
+            split = number_string.split(','),
+            sisa = split[0].length % 3,
+            rupiah = split[0].substr(0, sisa),
+            ribuan = split[0].substr(sisa).match(/\d{3}/gi);
+
+        if (ribuan) {
+            separator = sisa ? '.' : '';
+            rupiah += separator + ribuan.join('.');
+        }
+
+        rupiah = split[1] != undefined ? rupiah + ',' + split[1] : rupiah;
+        return prefix == undefined ? rupiah : (rupiah ? 'Rp. ' + rupiah : '');
+    }
+
+    // bayar use keyup
+    document.getElementsByName('nominal-bayar')[0].addEventListener('keyup', function() {
+        calculatekembali();
+    });
+
+    function calculatekembali() {
+        var bayar = document.getElementsByName('nominal-bayar')[0].value;
+        var nonimalBayar = bayar.replace(/[^,\d]/g, '').toString();
+        var totalDiskon = document.getElementById('total-diskon-hidden').innerHTML;
+        var kembali = nonimalBayar - totalDiskon;
+
+        document.getElementById('kembali-hidden').innerHTML = kembali;
+
+        var ribuan = toRupiah(kembali);
+        if (totalDiskon == 0 || bayar == 0) {
+            ribuan = 0;
+            var bayar = document.getElementsByName('nominal-bayar')[0].value = '';
+
+        }
+        document.getElementById('kembali').innerHTML = ribuan;
+    }
+
+    // format rupiah with minus
+    function toRupiah(angka) {
+        var rupiah = '';
+        var angkarev = angka.toString().split('').reverse().join('');
+        for (var i = 0; i < angkarev.length; i++)
+            if (i % 3 == 0) rupiah += angkarev.substr(i, 3) + '.';
+        return rupiah.split('', rupiah.length - 1).reverse().join('');
+    }
+
+    //  pesan bayar
+    document.getElementById('pesan-bayar').addEventListener('click', function() {
+        var table = document.getElementById("order-menus");
+        var orderMenus = [];
+
+        for (var i = 1, row; row = table.rows[i]; i++) {
+            var id = row.getAttribute('data-id');
+            var nama = row.getAttribute('data-nama');
+            var qty = row.getAttribute('data-qty');
+            var diskonSatuan = row.getAttribute('data-diskon-satuan');
+            var harga = row.getAttribute('data-harga');
+            var total = row.getAttribute('data-total');
+
+            if (id != null || qty != null || total != null) {
+                orderMenus.push({
+                    id: id,
+                    nama: nama,
+                    qty: qty,
+                    diskonSatuan: diskonSatuan,
+                    harga: harga,
+                    total: total
+                });
             }
         }
 
-        // 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 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 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 : '');
+        if (orderMenus.length == 0) {
+            alert('Menu tidak boleh kosong');
+            return false;
+        }
+        if (nominalBayar == '' || nominalBayar == 0) {
+            alert('Pembayaran tidak boleh kosong');
+            return false;
+        } else if (kembaliHidden < 0) {
+            alert('Pembayaran kurang');
+            return false;
+        } else if (namaPemesan == '') {
+            alert('Nama pemesan tidak boleh kosong');
+            return false;
         }
 
-        // bayar use keyup
-        document.getElementsByName('nominal-bayar')[0].addEventListener('keyup', function() {
-            calculatekembali();
+
+
+        var data = {
+            _token: "{{ csrf_token() }}",
+            orderCode: "{{ $orderCode }}",
+            orderMenus: orderMenus,
+            namaPemesan: namaPemesan,
+            keteranganPesanan: document.getElementsByName('keterangan-pesanan')[0].value,
+            diskon: diskon,
+            totalDiskon: totalDiskon,
+            nominalBayar: nominalBayar,
+            kembali: kembaliHidden
+        };
+        console.log(data);
+        $.ajax({
+            url: "{{ route('transaksi.store') }}",
+            method: "POST",
+            data: data,
+            success: function(result) {
+                console.log(result);
+                // show toastr success
+                toastr.success(result.message, 'Success', {
+                    timeOut: 2000
+                });
+                // opem mew page print
+                window.open(result.url, '_blank');
+
+                // // refresh page
+                setTimeout(function() {
+                    window.location.reload(1);
+                }, 2000);
+            },
+            error: function(xhr, status, error) {
+                toastr.error(xhr.responseJSON.message, 'Error', {
+                    timeOut: 3000
+                });
+                console.log(xhr.responseJSON);
+                console.log(status);
+                console.log(error);
+            }
         });
+    });
 
-        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;
+    // 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;
 
-            document.getElementById('kembali-hidden').innerHTML = kembali;
-
-            var ribuan = toRupiah(kembali);
-            if (totalDiskon == 0 || bayar == 0) {
-                ribuan = 0;
-                var bayar = document.getElementsByName('nominal-bayar')[0].value = '';
-
-            }
-            document.getElementById('kembali').innerHTML = ribuan;
-        }
-
-        // format rupiah with minus
-        function toRupiah(angka) {
-            var rupiah = '';
-            var angkarev = angka.toString().split('').reverse().join('');
-            for (var i = 0; i < angkarev.length; i++)
-                if (i % 3 == 0) rupiah += angkarev.substr(i, 3) + '.';
-            return rupiah.split('', rupiah.length - 1).reverse().join('');
-        }
-
-        //  pesan bayar
-        document.getElementById('pesan-bayar').addEventListener('click', function() {
-            var table = document.getElementById("order-menus");
-            var orderMenus = [];
-
-            for (var i = 1, row; row = table.rows[i]; i++) {
-                var id = row.getAttribute('data-id');
-                var nama = row.getAttribute('data-nama');
-                var qty = row.getAttribute('data-qty');
-                var harga = row.getAttribute('data-harga');
-                var total = row.getAttribute('data-total');
-
-                if (id != null || qty != null || total != null) {
-                    orderMenus.push({
-                        id: id,
-                        nama: nama,
-                        qty: qty,
-                        harga: harga,
-                        total: total
-                    });
-                }
-            }
-
-            var diskon = document.getElementsByName('diskon')[0].value;
-            var totalDiskon = document.getElementById('total-diskon-hidden').innerHTML;
-            var bayar = document.getElementsByName('nominal-bayar')[0].value;
-            var nominalBayar = bayar.replace(/[^,\d]/g, '').toString();
-            var kembaliHidden = document.getElementById('kembali-hidden').innerHTML;
-            var namaPemesan = document.getElementsByName('nama-pemesan')[0].value;
-
-            if (orderMenus.length == 0) {
-                alert('Menu tidak boleh kosong');
-                return false;
-            }
-            if (nominalBayar == '' || nominalBayar == 0) {
-                alert('Pembayaran tidak boleh kosong');
-                return false;
-            } else if (kembaliHidden < 0) {
-                alert('Pembayaran kurang');
-                return false;
-            } else if (namaPemesan == '') {
-                alert('Nama pemesan tidak boleh kosong');
-                return false;
-            }
-
-
-
-            var data = {
-                _token: "{{ csrf_token() }}",
-                orderCode: "{{ $orderCode }}",
-                orderMenus: orderMenus,
-                namaPemesan: namaPemesan,
-                keteranganPesanan: document.getElementsByName('keterangan-pesanan')[0].value,
-                diskon: diskon,
-                totalDiskon: totalDiskon,
-                nominalBayar: nominalBayar,
-                kembali: kembaliHidden
-            };
-            console.log(data);
-            $.ajax({
-                url: "{{ route('transaksi.store') }}",
-                method: "POST",
-                data: data,
-                success: function(result) {
-                    console.log(result);
-                    // show toastr success
-                    toastr.success(result.message, 'Success', {
-                        timeOut: 2000
-                    });
-                    // opem mew page print
-                    window.open(result.url, '_blank');
-
-                    // // refresh page
-                    setTimeout(function() {
-                        window.location.reload(1);
-                    }, 2000);
-                },
-                error: function(xhr, status, error) {
-                    toastr.error(xhr.responseJSON.message, 'Error', {
-                        timeOut: 3000
-                    });
-                    console.log(xhr.responseJSON);
-                    console.log(status);
-                    console.log(error);
-                }
-            });
-        });
-
-        // select paket
-        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) {
-                        isExist = true;
-                        index = i;
-                    }
-                } else if (selectedMenus[i].urutan == params.urutan) {
-                    selectedMenus.splice(i, 1);
-                } else if (selectedMenus[i].id == params.id) {
+        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) {
                     isExist = true;
                     index = i;
                 }
+            } else if (selectedMenus[i].urutan == params.urutan) {
+                selectedMenus.splice(i, 1);
+            } else if (selectedMenus[i].id == params.id) {
+                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', '');
-            }
+        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++) {
-                menu_terpilih.innerHTML += `
+        menu_terpilih.innerHTML = '';
+        for (var i = 0; i < selectedMenus.length; i++) {
+            menu_terpilih.innerHTML += `
                 <li>
                     ${selectedMenus[i].nama_produk}
                 </li>
             `;
-            }
+        }
 
-            if (selectedMenus.length == 0) {
-                menu_terpilih.innerHTML = `
+        if (selectedMenus.length == 0) {
+            menu_terpilih.innerHTML = `
                 <li>
                     Pilih Paket Menu Terlebih Dahulu
                 </li>
             `;
+        }
+    }
+
+    // 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);
 
-        // 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
-                    });
+                // 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') }}";
                 }
-            }
-            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
-                    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 += `
+                show_modal_paket.innerHTML += `
                     <div class="card card-primary card-outline btn"
                         onclick="aadMenu(${htmlEntitiesData})">
                         <div class="card-header">
@@ -953,17 +948,17 @@
                         </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);
-                }
-            })
-        }
-    </script>
-@endpush
+                $('#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);
+            }
+        })
+    }
+</script>
+@endpush
\ No newline at end of file