From dbc080f447217f0961bb9b4412b7d449596ac155 Mon Sep 17 00:00:00 2001
From: Zelda Ababil <zeldaababil01@gmail.com>
Date: Sat, 20 Jan 2024 01:16:40 +0700
Subject: [PATCH] action button

---
 .../views/pages/Kasir/transaksi.blade.php     | 140 +++++++++++-------
 routes/web.php                                |   2 +-
 2 files changed, 91 insertions(+), 51 deletions(-)

diff --git a/resources/views/pages/Kasir/transaksi.blade.php b/resources/views/pages/Kasir/transaksi.blade.php
index e315218..b595f01 100644
--- a/resources/views/pages/Kasir/transaksi.blade.php
+++ b/resources/views/pages/Kasir/transaksi.blade.php
@@ -52,23 +52,24 @@
                                                         <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"
+                                                            <a class="nav-link vert-nav-content active"
+                                                                id="vert-tabs-nasi-tab" data-toggle="pill"
+                                                                href="#vert-tabs-nasi" role="tab"
                                                                 aria-controls="vert-tabs-nasi" aria-selected="true">Nasi</a>
-                                                            <a class="nav-link" id="vert-tabs-telur-tab" data-toggle="pill"
-                                                                href="#vert-tabs-telur" role="tab"
+                                                            <a class="nav-link vert-nav-content" id="vert-tabs-telur-tab"
+                                                                data-toggle="pill" href="#vert-tabs-telur" role="tab"
                                                                 aria-controls="vert-tabs-telur"
                                                                 aria-selected="false">Telur</a>
-                                                            <a class="nav-link" id="vert-tabs-sambel-tab" data-toggle="pill"
-                                                                href="#vert-tabs-sambel" role="tab"
+                                                            <a class="nav-link vert-nav-content" id="vert-tabs-sambel-tab"
+                                                                data-toggle="pill" href="#vert-tabs-sambel" role="tab"
                                                                 aria-controls="vert-tabs-sambel"
                                                                 aria-selected="false">Sambel</a>
-                                                            <a class="nav-link" id="vert-tabs-topping-tab"
+                                                            <a class="nav-link vert-nav-content" id="vert-tabs-topping-tab"
                                                                 data-toggle="pill" href="#vert-tabs-topping" role="tab"
                                                                 aria-controls="vert-tabs-topping"
                                                                 aria-selected="false">Topping</a>
-                                                            <a class="nav-link" id="vert-tabs-free-tab" data-toggle="pill"
-                                                                href="#vert-tabs-free" role="tab"
+                                                            <a class="nav-link vert-nav-content" id="vert-tabs-free-tab"
+                                                                data-toggle="pill" href="#vert-tabs-free" role="tab"
                                                                 aria-controls="vert-tabs-free"
                                                                 aria-selected="false">Free</a>
 
@@ -96,15 +97,15 @@
                                                     <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"
+                                                                <div class="tab-pane vert-tab-content fade text-left show active"
                                                                     id="vert-tabs-nasi" role="tabpanel"
                                                                     aria-labelledby="vert-tabs-nasi-tab">
                                                                     <div class="row">
                                                                         @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                                                             @if ($kelompokKategoriPivot->produk->urutan == 1)
                                                                                 <div class="col-lg-4">
-                                                                                    <div
-                                                                                        class="card card-primary card-outline">
+                                                                                    <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-telur')"
+                                                                                        class="card card-primary card-outline btn">
                                                                                         <div class="card-header">
                                                                                             <h5 class="card-title m-0">
                                                                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@@ -118,12 +119,10 @@
                                                                                                     {{ 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
+                                                                                            id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                                            Pilih Paket
                                                                                         </a>
                                                                                     </div>
                                                                                 </div>
@@ -131,14 +130,15 @@
                                                                         @endforeach
                                                                     </div>
                                                                 </div>
-                                                                <div class="tab-pane fade" id="vert-tabs-telur"
-                                                                    role="tabpanel" aria-labelledby="vert-tabs-telur-tab">
+                                                                <div class="tab-pane vert-tab-content"
+                                                                    id="vert-tabs-telur" role="tabpanel"
+                                                                    aria-labelledby="vert-tabs-telur-tab">
                                                                     <div class="row">
                                                                         @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                                                             @if ($kelompokKategoriPivot->produk->urutan == 2)
                                                                                 <div class="col-lg-4">
-                                                                                    <div
-                                                                                        class="card card-primary card-outline">
+                                                                                    <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-sambel')"
+                                                                                        class="card card-primary card-outline btn">
                                                                                         <div class="card-header">
                                                                                             <h5 class="card-title m-0">
                                                                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@@ -152,12 +152,10 @@
                                                                                                     {{ 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
+                                                                                            id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                                            Pilih Paket
                                                                                         </a>
                                                                                     </div>
                                                                                 </div>
@@ -165,15 +163,15 @@
                                                                         @endforeach
                                                                     </div>
                                                                 </div>
-                                                                <div class="tab-pane fade" id="vert-tabs-sambel"
-                                                                    role="tabpanel"
+                                                                <div class="tab-pane vert-tab-content"
+                                                                    id="vert-tabs-sambel" role="tabpanel"
                                                                     aria-labelledby="vert-tabs-sambel-tab">
                                                                     <div class="row">
                                                                         @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                                                             @if ($kelompokKategoriPivot->produk->urutan == 3)
                                                                                 <div class="col-lg-4">
-                                                                                    <div
-                                                                                        class="card card-primary card-outline">
+                                                                                    <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-topping')"
+                                                                                        class="card card-primary card-outline btn">
                                                                                         <div class="card-header">
                                                                                             <h5 class="card-title m-0">
                                                                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@@ -187,11 +185,9 @@
                                                                                                     {{ 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
+                                                                                            id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
                                                                                             Paket
                                                                                         </a>
                                                                                     </div>
@@ -200,15 +196,15 @@
                                                                         @endforeach
                                                                     </div>
                                                                 </div>
-                                                                <div class="tab-pane fade" id="vert-tabs-topping"
-                                                                    role="tabpanel"
+                                                                <div class="tab-pane vert-tab-content"
+                                                                    id="vert-tabs-topping" role="tabpanel"
                                                                     aria-labelledby="vert-tabs-topping-tab">
                                                                     <div class="row">
                                                                         @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                                                             @if ($kelompokKategoriPivot->produk->urutan == 4)
                                                                                 <div class="col-lg-4">
-                                                                                    <div
-                                                                                        class="card card-primary card-outline">
+                                                                                    <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} );changeTab('vert-tabs-free')"
+                                                                                        class="card card-primary card-outline btn">
                                                                                         <div class="card-header">
                                                                                             <h5 class="card-title m-0">
                                                                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@@ -222,11 +218,9 @@
                                                                                                     {{ 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
+                                                                                            id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">Pilih
                                                                                             Paket
                                                                                         </a>
                                                                                     </div>
@@ -235,14 +229,14 @@
                                                                         @endforeach
                                                                     </div>
                                                                 </div>
-                                                                <div class="tab-pane fade" id="vert-tabs-free"
+                                                                <div class="tab-pane vert-tab-content" id="vert-tabs-free"
                                                                     role="tabpanel" aria-labelledby="vert-tabs-free-tab">
                                                                     <div class="row">
                                                                         @foreach ($item->kelompokKategoriPivot as $key2 => $kelompokKategoriPivot)
                                                                             @if ($kelompokKategoriPivot->produk->urutan == 5)
                                                                                 <div class="col-lg-4">
-                                                                                    <div
-                                                                                        class="card card-primary card-outline">
+                                                                                    <div onclick="selectPaket( {{ $kelompokKategoriPivot->produk }} )"
+                                                                                        class="card card-primary card-outline btn">
                                                                                         <div class="card-header">
                                                                                             <h5 class="card-title m-0">
                                                                                                 {{ $kelompokKategoriPivot->produk->nama_produk ?? '' }}
@@ -256,12 +250,10 @@
                                                                                                     {{ 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
+                                                                                            id="ordered-menus-{{ $kelompokKategoriPivot->produk->id }}">
+                                                                                            Pilih Paket
                                                                                         </a>
                                                                                     </div>
                                                                                 </div>
@@ -434,7 +426,6 @@
 @push('styles')
     <!-- Toastr -->
     <style>
-
     </style>
     <link rel="stylesheet" href="{{ asset('assets/plugins/toastr/toastr.min.css') }}">
 @endpush
@@ -795,8 +786,6 @@
                 return false;
             }
 
-
-
             var data = {
                 _token: "{{ csrf_token() }}",
                 orderCode: "{{ $orderCode }}",
@@ -850,12 +839,15 @@
                 // lakukan periksa kembali apabila menu dengan urutan yang sama sudah ada maka hapus menu tersebut dari array selectedMenus kecuali menu dengan urutan 5 boleh lebih dari 1
                 if (params.urutan == 5) {
                     if (selectedMenus[i].id == params.id) {
+                        changeOrderedMenus(selectedMenus[i].id, 'pilih');
                         isExist = true;
                         index = i;
                     }
                 } else if (selectedMenus[i].urutan == params.urutan) {
+                    changeOrderedMenus(selectedMenus[i].id, 'batal');
                     selectedMenus.splice(i, 1);
                 } else if (selectedMenus[i].id == params.id) {
+                    changeOrderedMenus(selectedMenus[i].id, 'pilih');
                     isExist = true;
                     index = i;
                 }
@@ -874,6 +866,7 @@
 
             menu_terpilih.innerHTML = '';
             for (var i = 0; i < selectedMenus.length; i++) {
+                changeOrderedMenus(selectedMenus[i].id, 'pilih');
                 menu_terpilih.innerHTML += `
                 <li>
                     ${selectedMenus[i].nama_produk}
@@ -890,6 +883,24 @@
             }
         }
 
+        // ordered menus change button text and onclick
+        function changeOrderedMenus(id, status) {
+            if (status == 'batal') {
+                var orderedMenus = document.getElementById('ordered-menus-' + id);
+                orderedMenus.innerHTML = 'Pilih Paket';
+                orderedMenus.classList.remove('btn-secondary');
+                orderedMenus.classList.add('btn-primary');
+                return false;
+
+            } else if (status == 'pilih') {
+                var orderedMenus = document.getElementById('ordered-menus-' + id);
+                orderedMenus.innerHTML = 'Batal Pilih';
+                orderedMenus.classList.remove('btn-primary');
+                orderedMenus.classList.add('btn-secondary');
+                return false;
+            }
+        }
+
         // cari paket
         function cariPaket(params) {
             var show_modal_paket = document.getElementById('show-modal-paket');
@@ -922,7 +933,6 @@
                     // 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;
@@ -931,7 +941,7 @@
                     }
                     show_modal_paket.innerHTML += `
                     <div class="card card-primary card-outline btn"
-                        onclick="aadMenu(${htmlEntitiesData})">
+                        onclick="aadMenu(${htmlEntitiesData});clearSelected()">
                         <div class="card-header">
                             <h5 class="card-title m-0" id="nama-produk-modal">
                                 ${result.nama_produk ?? ''}
@@ -965,5 +975,35 @@
                 }
             })
         }
+
+        // clear selected menus
+        function clearSelected() {
+            console.log(selectedMenus);
+            for (var i = 0; i < selectedMenus.length; i++) {
+                changeOrderedMenus(selectedMenus[i].id, 'batal');
+                menu_terpilih.innerHTML = ` `;
+            }
+            selectedMenus = [];
+        }
+
+        function changeTab(tabId) {
+            // Hide all tabs
+            var tabContents = document.getElementsByClassName('vert-tab-content');
+            for (var i = 0; i < tabContents.length; i++) {
+                tabContents[i].classList.remove('text-left', 'show', 'active');
+            }
+
+            var navLinks = document.getElementsByClassName('vert-nav-content');
+            for (var i = 0; i < navLinks.length; i++) {
+                navLinks[i].classList.remove('active');
+                // aria-selected
+                navLinks[i].setAttribute('aria-selected', false);
+            }
+
+            document.getElementById(tabId).classList.add('text-left', 'show', 'active');
+            document.getElementById(tabId + '-tab').classList.add('active');
+            // aria-selected
+            document.getElementById(tabId + '-tab').setAttribute('aria-selected', true);
+        }
     </script>
 @endpush
diff --git a/routes/web.php b/routes/web.php
index 7a68e24..89f7106 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -29,4 +29,4 @@ Route::group(['prefix' => 'history'], function () {
     Route::get('/', [History::class, 'index'])->name('history.index');
     Route::get('/getDataHistory', [History::class, 'getDataHistory'])->name('history.getDataHistory');
     Route::get('/print/{id}', [History::class, 'print'])->name('history.print');
-});
\ No newline at end of file
+});