From 3bb49dc15ddfcf425c03ed3146a8c37829c4f4b6 Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Tue, 30 Aug 2022 12:42:15 +0200
Subject: [PATCH] add delele product function

---
 content/master.blade.php | 39 ++++++++++++++++++++++++++++-----------
 1 file changed, 28 insertions(+), 11 deletions(-)

diff --git a/content/master.blade.php b/content/master.blade.php
index f11a2f3..3eb8f3a 100644
--- a/content/master.blade.php
+++ b/content/master.blade.php
@@ -105,12 +105,15 @@
         function updateProductsInLocalStorage(){
             localStorage.setItem("products", JSON.stringify(objProducts));
             $('#count-products-in-bag').text(objProducts.length);
+            $('#list-products-in-bag').html('');
             if(objProducts.length > 0) {
                 $('#count-products-in-bag').show();
-                $.get($('meta[name="get-contents"]').attr('content')+"/"+objProducts.join(","), function(response, status){
-                    $('#list-products-in-bag').html('');
+                let ids = objProducts.map(obj => obj.id);
+                $.get($('meta[name="get-contents"]').attr('content')+"/"+ids.join(","), function(response, status){
                     response.contents.forEach(function(item){
-                        $('#list-products-in-bag').append(`
+                        let objProductInfo = objProducts.find(obj => obj.id == item.id);
+
+                        let elementProduct = `
                         <tr>
                             <td class="text-start">
                                 <img class="rounded img-fluid" src="https://picsum.photos/120/120">
@@ -120,26 +123,40 @@
                                 <br>
                                 <small class="text-success">sofort verfügbar</small>
                                 <br>
-                                <select class="form-select form-select-sm" style="width:125px;" aria-label="Default select example">
-                                    <option selected value="1">Anzahl: 1</option>
-                                    <option value="2">Anzahl: 2</option>
-                                    <option value="3">Anzahl: 3</option>
-                                </select>
-                                <a href="" class="text-muted small text-decoration-none">Löschen</a>
+                                <select class="form-select form-select-sm select-quantity" style="width:125px;" aria-label="Default select example">`;
+                                for(let i = 1; i <= 5; i++){
+                                    if(objProductInfo.quantity == i) elementProduct += `<option selected value="${i}">Anzahl: ${i}</option>`;
+                                    else elementProduct += `<option value="${i}">Anzahl: ${i}</option>`;
+                                }
+                                elementProduct += `
+                                    </select>
+                               <button data-id="${item.id}" class="btn-remove-product text-muted small text-decoration-none" style="padding: 0; border: none; background: transparen;">Löschen</button>
                             </td>
                             <td class="align-middle text-end">18,00€</td>
-                        </tr>`);
+                        </tr>`;
+
+                        $('#list-products-in-bag').append(elementProduct);
                     });
                 });
             }else $('#count-products-in-bag').hide();
         }
         function addToBag(productId){
-            if(objProducts.indexOf(productId) == -1) objProducts.push(productId+':'+1);
+            if(objProducts.indexOf(productId) == -1) objProducts.push({id: productId, quantity: 1});
             updateProductsInLocalStorage();
         }
         $(window).on('load', function(){
             if(localStorage.getItem("products") != null) objProducts = JSON.parse(localStorage.getItem("products"));
             updateProductsInLocalStorage();
+            $(document).on('click', '.btn-remove-product', function(){
+                let objProductInfo = objProducts.find(obj => obj.id == $(this).attr('data-id'));
+                let productId = $(this).attr('data-id');
+                let index = objProducts.indexOf(objProductInfo);
+                if(index != -1) objProducts.splice(index, 1);
+                updateProductsInLocalStorage();
+            });
+            $(document).on('change', '.select-quantity', function(){
+                
+            });
         });
     </script>
     @yield('scripts')