put progress bar on top

assets/css/app.css

@@ -16,6 +16,7 @@ body {
         background: var(--bg-color);
         & > div {
             h2 {
+                margin: 3rem auto;
                 font-size: 2.3rem;
                 color: var(--secondary);
                 text-align: center;

assets/js/app.js

@@ -95,6 +95,8 @@ window.stepper = {
     submit() {
         axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', {
             ...this.value
+        }).then(ret => {
+            this.step++;
         });
     }
 };

src/Stepper.php

@@ -27,6 +27,7 @@ class Stepper {
     public function init() {
         add_action('wp_enqueue_scripts', [ $this, 'enqueue' ]);
         add_action('wp_ajax_nopriv_stepper_submit', [ $this, 'onSubmit' ]);
+        add_action('wp_ajax_stepper_submit', [ $this, 'onSubmit' ]);
         add_shortcode('stepper', [ $this, 'handle' ]);
     }
 

views/stepper.twig.htm

@@ -15,6 +15,7 @@
             </div>
         </div>
 
+        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
         {% include 'vorhaben.twig.htm' with {
             'kind': "bau",
             bezahlt: true,
@@ -56,14 +57,19 @@
                 <div class="separator primary"></div>
                 <div>
                     <div>Darlehensbetrag</div>
-                    <div x-text="units.currency.to(value.anschluss.objektwert + value.anschluss.umschuldung + value.anschluss.zuskap)"></div>
+                    <div x-text="units.currency.to(Math.round(parseInt(value.anschluss.umschuldung) / 1000 + parseInt(value.anschluss.zuskap) / 1000) * 1000)"></div>
                 </div>
                 <div class="separator gray"></div>
                 <button @click="step++" type="button">Werte übernehmen und weiter zum letzten Schritt</button>
             </div>
         </div>
 
-        <div class="step"><div :style="'width: '+parseInt(step / 3 * 100)+'%;'"></div></div>
+        <div x-show="step === 3">
+            <div class="form-container">
+                Vielen Dank für Ihre Anfrage.
+            </div>
+        </div>
+
 
     </form>
 </div>