diff --git a/app/Http/Controllers/Kasir/Menu.php b/app/Http/Controllers/Kasir/Menu.php
index 8842dc2..3eb690f 100644
--- a/app/Http/Controllers/Kasir/Menu.php
+++ b/app/Http/Controllers/Kasir/Menu.php
@@ -18,7 +18,6 @@ class Menu extends Controller
 {
     public function index()
     {
-        // return $data = KelompokKategoriPivot::with(['kelompokKategori', 'produk'])->first();
         $kategori_produks = KategoriProduk::get();
 
         return view('pages.Menu.index', compact('kategori_produks'));
@@ -26,8 +25,13 @@ class Menu extends Controller
 
     public function kelompokKategori($id) {
         $kelompok_kategoris = KelompokKategori::where('kategori_produk_id', $id)->get();
+
+        if (empty($kelompok_kategoris[0])) {
+            return response()->json(['message' => 'Data Kosong']);
+        } else {
+            return $kelompok_kategoris;
+        }
         
-        return $kelompok_kategoris;
     }
 
     public function getDataMenu()
diff --git a/resources/views/pages/Menu/index.blade.php b/resources/views/pages/Menu/index.blade.php
index 005ed01..e6aaaf3 100644
--- a/resources/views/pages/Menu/index.blade.php
+++ b/resources/views/pages/Menu/index.blade.php
@@ -1,22 +1,22 @@
 @extends('layouts.base')
 
 @section('content-header')
-    <div class="col-12">
-        <div class="container" style="display: contents">
-            <div class="row mb-2">
-                <div class="col-sm-6">
-                    <h3 class="m-0"> Master Data</h3>
-                </div>
-                <div class="col-sm-6">
-                    <ol class="breadcrumb float-sm-right">
-                        <li class="breadcrumb-item"><a href="#">Home</a></li>
-                        <li class="breadcrumb-item"><a href="#">Admin</a></li>
-                        <li class="breadcrumb-item active">Menus</li>
-                    </ol>
-                </div>
+<div class="col-12">
+    <div class="container" style="display: contents">
+        <div class="row mb-2">
+            <div class="col-sm-6">
+                <h1 class="m-0"> Kasir <small>kasir 3.0</small></h1>
+            </div>
+            <div class="col-sm-6">
+                <ol class="breadcrumb float-sm-right">
+                    <li class="breadcrumb-item"><a href="#">Home</a></li>
+                    <li class="breadcrumb-item"><a href="#">Kasir</a></li>
+                    <li class="breadcrumb-item active">History</li>
+                </ol>
             </div>
         </div>
     </div>
+</div>
 @endsection
 
 @section('content')
@@ -29,7 +29,7 @@
                     <h3>Daftar Menu</h3>
                     <!-- Button trigger modal -->
                     <div class="ml-auto">
-                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-default">
+                        <button type="button" class="btn btn-primary" onclick="tambahMenu()">
                             Tambah Menu
                         </button>
                     </div>
@@ -46,6 +46,7 @@
                                 <th>Nama Produk</th>
                                 <th>Harga Produk</th>
                                 <th>Kategori Produk</th>
+                                <th>Kelompok Kategori</th>
                                 <th class="text-center"><i class="fas fa-cog"></i></th>
                             </tr>
                         </thead>
@@ -57,30 +58,67 @@
 </div>
 
 <!-- Modal Tambah Menu -->
-<div class="modal fade" id="modal-default">
-    <div class="modal-dialog modal-lg">
+<div class="modal fade" id="modal-produk" data-backdrop="static">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
             <div class="modal-header">
-                <h4 class="modal-title">Default Modal</h4>
+                <h4 class="modal-title" id="title-form-menu">Tambah Menu</h4>
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
             </div>
             <div class="modal-body">
-                <form>
-                    <div class="form-group">
-                        <label for="recipient-name" class="col-form-label">Recipient:</label>
-                        <input type="text" class="form-control" id="recipient-name">
+                <form method="post" id="formMenu" data-url="" data-method="">
+                    <div class="form-group row">
+                        <div class="col-md-6">
+                            <label for="kategori_produk" class="col-form-label">Kategori Produk:</label>
+                            <input type="hidden" name="pivot_id" id="pivot_id">
+                            <select type="text" class="form-control select2" id="kategori_produk" name="kategori_produk" onchange="kelompokKategori(this.value)" required>
+                                <option value="0">Pilih Kategori</option>
+                                @foreach ($kategori_produks as $kategori)
+                                <option value="{{ $kategori->id }}">{{ $kategori->nama_kategori_produk }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="kelompok_produk" class="col-form-label">Kelompok Produk:</label>
+                            <select type="text" class="form-control select2" id="kelompok_produk" name="kelompok_produk" required>
+                                <option value="default" selected disabled>Pilih Kelompok Produk</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <div class="col-md-6">
+                            <label for="kode_produk" class="col-form-label">Kode Produk:</label>
+                            <input type="text" class="form-control" id="kode_produk" name="kode_produk" value="" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="nama_produk" class="col-form-label">Nama Produk:</label>
+                            <input type="text" class="form-control" id="nama_produk" name="nama_produk" value="" required>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <div class="col-md-6">
+                            <label for="harga_produk" class="col-form-label">Harga Produk:</label>
+                            <input type="number" class="form-control" id="harga_produk" name="harga_produk" value="" required>
+                        </div>
+                        <div class="col-md-6">
+                            <label for="tersedia" class="col-form-label">Tersedia:</label>
+                            <select type="text" class="form-control select2" id="tersedia" name="tersedia" required>
+                                <option value="1">Iya</option>    
+                                <option value="0">Tidak</option>    
+                            </select>
+                        </div>
                     </div>
                     <div class="form-group">
-                        <label for="message-text" class="col-form-label">Message:</label>
-                        <textarea class="form-control" id="message-text"></textarea>
+                        <label for="deskripsi_produk" class="col-form-label">Deskripsi Produk:</label>
+                        <textarea class="form-control" id="deskripsi_produk" name="deskripsi_produk"></textarea>
                     </div>
                 </form>
             </div>
-            <div class="modal-footer justify-content-between">
-                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                <button type="button" class="btn btn-primary">Save changes</button>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
+                <button type="button" class="btn btn-primary" id="btn-simpan-menu" onclick="saveMenu()">Simpan</button>
             </div>
         </div>
     </div>
@@ -88,15 +126,15 @@
 @endsection
 
 @push('styles')
-    <!-- Toastr -->
-    <style>
-        @media only screen and (max-width : 991px) {
-            /* Styles */
-        }
+<!-- Toastr -->
+<style>
+    @media only screen and (max-width : 991px) {
+        /* Styles */
+    }
 
-        @media only screen and (max-width : 768px) {
-            /* Styles */
-        }
+    @media only screen and (max-width : 768px) {
+        /* Styles */
+    }
 
     @media only screen and (max-width : 414px) {
         /* Styles */
@@ -106,8 +144,15 @@
 <link rel="stylesheet" href="{{asset('assets/datatables/datatables.min.css')}}">
 @endpush
 
+@push('style2')
+<link rel="stylesheet" href="{{ asset('assets/plugins/select2/css/select2.min.css') }}">
+<link rel="stylesheet" href="{{ asset('assets/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">
+@endpush
+
 @push('scripts')
 <script src="{{ asset('assets/datatables/datatables.min.js') }}"></script>
+<script src="{{ asset('assets/plugins/select2/js/select2.full.min.js') }}"></script>
+<script src="{{ asset('assets/plugins/toastr/toastr.min.js') }}"></script>
 <script>
     $(document).ready(function() {
         $('#tabelku').DataTable({
@@ -136,6 +181,10 @@
                     data: 'kategori_produk',
                     name: 'kategori_produk'
                 },
+                {
+                    data: 'nama_kelompok_kategori',
+                    name: 'nama_kelompok_kategori'
+                },
                 {
                     data: 'ubah',
                     name: 'ubah',
@@ -145,4 +194,126 @@
         })
     })
 </script>
-@endpush
+<script>
+    $('.select2').select2();
+
+    function kelompokKategori(id) {
+        $.ajax({
+            url: "{{ route('menu.kelompok-kategori', '') }}/" + id,
+            method: "GET",
+            dataType: "json",
+            success: function(response) {
+                console.log(response);
+                $('#kelompok_produk').empty();
+                
+                if (response.message) {
+                    $('#kelompok_produk').append(`<option value="">Pilih Dulu Kategori Produk</option>`);
+                } else {
+                response?.forEach(function(item, index) {
+                    $('#kelompok_produk').append(
+                        `<option value="${item?.id}">${item?.nama_kelompok_kategori}</option>`)
+                    })
+                }
+            },
+            error: function(xhr, status, error) {
+                toastr.error(xhr.responseJSON.message, 'Error', {
+                    timeOut: 3000
+                });
+            }
+        })
+    }
+
+    function saveMenu() {
+        document.getElementById('btn-simpan-menu').disabled = true;
+        document.getElementById('btn-simpan-menu').innerText = "Loading...";
+
+        var url = $('#formMenu').data('url');
+        var method = $('#formMenu').data('method');
+        var data = {
+            _token: "{{ csrf_token() }}",
+            kategori_produk: $('#kategori_produk').val(),
+            kelompok_produk: $('#kelompok_produk').val(),
+            kode_produk: $('#kode_produk').val(),
+            nama_produk: $('#nama_produk').val(),
+            harga_produk: $('#harga_produk').val(),
+            tersedia: $('#tersedia').val(),
+            deskripsi_produk: $('#deskripsi_produk').val(),
+        };
+
+        $.ajax({
+            url: url,
+            method: method,
+            data: data,
+            success: function(result) {
+                if (result.errors) {
+                    toastr.error(result.errors, 'Gagal', {
+                        timeOut: 2000
+                    });
+                    document.getElementById('btn-simpan-menu').disabled = false;
+                    document.getElementById('btn-simpan-menu').innerText = "Simpan";
+                } else {
+                    toastr.success(result.message, 'Berhasil', {
+                        timeOut: 2000
+                    });
+
+                    $('#modal-produk').modal('hide');
+                    $('#formMenu')[0].reset();
+                    document.getElementById('btn-simpan-menu').disabled = false;
+                    document.getElementById('btn-simpan-menu').innerText = "Simpan";
+
+                    // console.log(result);
+                    setTimeout(function() {
+                        window.location.reload(1);
+                    }, 1000);
+                }
+            },
+            error: function(xhr, status, error) {
+                toastr.error(xhr.responseJSON.message, 'Error', {
+                    timeOut: 3000
+                });
+                document.getElementById('btn-simpan-menu').disabled = false;
+                document.getElementById('btn-simpan-menu').innerText = "Simpan";
+            }
+        });
+    }
+
+    function tambahMenu() {
+        $('#formMenu')[0].reset();
+        // $('#kategori_produk').val('').trigger('change');
+        $('#modal-produk').modal('show');
+        $('#title-form-menu').text("Tambah Menu");
+        
+        let formMenu = document.getElementById('formMenu');
+        formMenu.setAttribute('data-url', "{{ route('menu.store') }}");
+        formMenu.setAttribute('data-method', "post");
+    }
+    function editMenu(id) {
+        $('#modal-produk').modal('show');
+        $('#title-form-menu').text("Ubah Menu");
+        let formMenu = document.getElementById('formMenu');
+        formMenu.setAttribute('data-url', "{{ route('menu.update', '') }}/" + id);
+        formMenu.setAttribute('data-method', "put");
+        
+        $.ajax({
+            url: "{{ route('menu.show', '') }}/" + id,
+            method: "GET",
+            success: function(response) {
+                console.log(response);
+
+                $('#kategori_produk').val(response.produk.kategori_produk_id).trigger('change');
+                $('#kelompok_produk').val(response.kelompok_kategori_id);
+                $('#kode_produk').val(response.produk.kode_produk);
+                $('#nama_produk').val(response.produk.nama_produk);
+                $('#harga_produk').val(response.produk.harga_produk);
+                $('#tersedia').val(response.produk.tersedia);
+                $('#deskripsi_produk').val(response.produk.deskripsi_produk);
+            },
+            error: function(xhr, status, error) {
+                toastr.error(xhr.responseJSON.message, 'Error', {
+                    timeOut: 3000
+                });
+            }
+        })
+    }
+</script>
+@endpush
\ No newline at end of file