From 269a2cd4345880b350d9a392f1a02487a37e308d Mon Sep 17 00:00:00 2001
From: Gustavo Luigi <gustavoluigisouza@gmail.com>
Date: Mon, 11 Jul 2022 23:05:20 +0200
Subject: [PATCH] add form calc

---
 content/pages/buchen.blade.php | 107 ++++++++++++++++++++-------------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/content/pages/buchen.blade.php b/content/pages/buchen.blade.php
index 6776928..3d72d65 100644
--- a/content/pages/buchen.blade.php
+++ b/content/pages/buchen.blade.php
@@ -53,18 +53,17 @@
     </thead>
     <tbody>
         <tr>
-        <td>Erwachsene mit Alpaka</td>
-        <td>20 €</td>
+        <td>Erwachsene</td>
+        <td>10 €</td>
         </tr>
         <tr>
-        <td>Kinder mit Alpaka</td>
-        <td>15 €</td>
-        </tr>
-        <tr>
-        <td>Jede Person ohne Alpaka</td>
+        <td>Kinder</td>
         <td>5 €</td>
         </tr>
-    
+        <tr>
+        <td>Alpaka</td>
+        <td>10 €</td>
+        </tr>
     </tbody>
     </table>
     </div>
@@ -124,6 +123,7 @@
                                 <label for="anzahlkinder" class="form-label">Anzahl Kinder</label>
                                 <select class="form-select" aria-label="Default select example" id="anzahlkinder">
                                     <option selected disabled>Anzahl Kinder</option>
+                                    <option value="0">0</option>
                                     <option value="1">1</option>
                                     <option value="2">2</option>
                                     <option value="3">3</option>
@@ -153,39 +153,20 @@
                     </div>
                     <br>
                     <div style="margin-left: 20px;">
-                    <h5>Kosten</h5>
-                    <table class="table">
-                    <thead>
-                        <tr>
-                        <th scope="col">Anzahl</th>
-                        <th scope="col">Beschreibung</th>
-                        <th scope="col">Kosten</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                        <td>1X</td>
-                        <td>Kinder</td>
-                        <td>3456€</td>
-                        </tr>
-                        <tr>
-                        <td>2X</td>
-                        <td>Erwachsene</td>
-                        <td>345€</td>
-                        </tr>
-                        <tr>
-                        <td>4X</td>
-                        <td>Erwachsene</td>
-                        <td>28€</td>
-                        </tr>
-                        <tr class="fw-bolder">
-                        <td>Gesammt:</td>
-                        <td></td>
-                        <td>28€</td>
-                        </tr>
-                    </tbody>
-                    </table>
-                    <p class="fw-light fst-italic" style="font-size:13px;">Geld wird nach Bestätigung per Überweisung oder Bar vor der Tour bezahlt.</p>
+                        <h5>Kosten</h5>
+                        <table class="table" style="display: none;">
+                            <thead>
+                                <tr>
+                                <th scope="col">Anzahl</th>
+                                <th scope="col">Beschreibung</th>
+                                <th scope="col">Kosten</th>
+                                </tr>
+                            </thead>
+                            <tbody id="extract">
+                            </tbody>
+                        </table>
+                        <p class="fw-light fst-italic" style="font-size:13px;">Geld wird nach Bestätigung per Überweisung oder Bar vor der Tour bezahlt.</p>
+                        <input type="hidden" name="kosten" id="kosten">
                     </div>
                     <button type="submit" class="btn btn-ci btn-lg d-block mt-5">
                         <svg style="fill: white; width: 18px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M424 336h-96c-22.1 0-40-17.9-40-40s17.9-40 40-40h88s96-107 96-160-43-96-96-96-96 43-96 96c0 29.8 30.3 76.7 56.9 112H328c-48.5 0-88 39.5-88 88s39.5 88 88 88h96c22.1 0 40 17.9 40 40s-17.9 40-40 40H135.1c26.6-35.3 56.9-82.2 56.9-112 0-53-43-96-96-96S0 299 0 352s96 160 96 160h328c48.5 0 88-39.5 88-88s-39.5-88-88-88zM368 96c0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4-27.2-36.2-47.5-70.9-48-84.3zM96 436.3c-27.2-36.2-47.5-70.9-48-84.3 0-26.5 21.5-48 48-48s48 21.5 48 47.9c-.5 13.4-20.8 48.2-48 84.4zM96 336c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16zM432 96c0-8.8-7.2-16-16-16s-16 7.2-16 16 7.2 16 16 16 16-7.2 16-16z"/></svg>
@@ -214,4 +195,48 @@
 </section>
 @stop
 @section('scripts')
+<script>
+    let priceReserveAnzahlErwachsene = 10;
+    let priceReserveAnzahlKinder = 5;
+    let priceReserveAnzahlAlpakas = 10;
+    function addExtractRow(count, total){
+        $('#extract').append(`
+            <tr>
+                <td>${count}x</td>
+                <td>Anzahl Alpakas</td>
+                <td>${total} €</td>
+            </tr> 
+        `);
+    }
+    function addExtractTotalRow(value){
+        $('#extract').append(`
+            <tr class="fw-bolder">
+                <td>Gesammt:</td>
+                <td></td>
+                <td>${value} €</td>
+            </tr>
+        `);
+    }
+    $('#anzahlerwachsene').change(function(){ showPrices(); });
+    $('#anzahlkinder').change(function(){ showPrices(); });
+    $('#anzahlalpakas').change(function(){ showPrices(); });
+    function showPrices(){
+        $('#extract').html(``);
+        let countReserveAnzahlErwachsene = $('#anzahlerwachsene').val() != null?$('#anzahlerwachsene').val():0;
+        let totalReserveAnzahlErwachsene = countReserveAnzahlErwachsene*priceReserveAnzahlErwachsene;
+        let countReserveAnzahlKinder = $('#anzahlkinder').val() != null?$('#anzahlkinder').val():0;
+        let totalReserveAnzahlKinder = countReserveAnzahlKinder*priceReserveAnzahlKinder;
+        let countReserveAnzahlAlpakas = $('#anzahlalpakas').val() != null?$('#anzahlalpakas').val():0;
+        let totalReserveAnzahlAlpakas = countReserveAnzahlAlpakas*priceReserveAnzahlAlpakas;
+        if(totalReserveAnzahlErwachsene > 0) addExtractRow(countReserveAnzahlErwachsene, totalReserveAnzahlErwachsene);
+        if(totalReserveAnzahlKinder > 0) addExtractRow(countReserveAnzahlKinder, totalReserveAnzahlKinder);
+        if(totalReserveAnzahlAlpakas > 0) addExtractRow(countReserveAnzahlAlpakas, totalReserveAnzahlAlpakas);
+        let totalPrice = totalReserveAnzahlErwachsene+totalReserveAnzahlKinder+totalReserveAnzahlAlpakas;
+        if(countReserveAnzahlErwachsene != 0 || countReserveAnzahlKinder != 0 || countReserveAnzahlAlpakas != 0) {
+            addExtractTotalRow(totalPrice);
+            $('#kosten').val(totalPrice);
+            $('#extract').parent().show();
+        }else $('#extract').parent().hide();
+    }
+</script>
 @stop
\ No newline at end of file