From a04bac47db9c2d0d689bc6bff7cdb5ece4ea3681 Mon Sep 17 00:00:00 2001
From: philipp lang <philipp@aweos.de>
Date: Wed, 11 May 2022 18:38:13 +0200
Subject: [PATCH] mod stepper

---
 assets/js/Stepper.vue               | 310 +++++++------
 assets/js/components/Pagination.vue |  16 +-
 assets/js/components/RadioGrid.vue  |   4 +-
 assets/js/components/VBtn.vue       |   8 +-
 composer.json                       |   4 +-
 composer.lock                       | 694 +++++++++++++++++++++++++++-
 package-lock.json                   |   2 +-
 package.json                        |   2 +-
 src/Stepper.php                     |  21 +-
 9 files changed, 900 insertions(+), 161 deletions(-)

diff --git a/assets/js/Stepper.vue b/assets/js/Stepper.vue
index 633f034..2d90d95 100644
--- a/assets/js/Stepper.vue
+++ b/assets/js/Stepper.vue
@@ -1,103 +1,145 @@
 <template>
-    <carousel :per-page="1" :navigate-to="innerStep" class="flex gap-8 overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
-        <slide>
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
-            <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
-            <radio-grid v-model="value.category_id" @input="innerStep++" class="mt-8" :options="categories"></radio-grid>
-        </slide>
+    <form action="#" method="POST" @submit.prevent="submit" class="px-3">
+        <carousel :per-page="1" :navigate-to="innerStep" :pagination-enabled="false" class="flex gap-8 shadow-xl my-10 border-2 border-primary rounded-xl overflow-auto max-w-[1260px] py-16 px-8 mx-auto">
+            <slide>
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 1</div>
+                <heading>Welche <span class="text-primary">Immobilie</span><br />möchten Sie verkaufen?</heading>
+                <radio-grid v-model="value.category_id" class="mt-8" :options="categories"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :prev="false" :nextable="value.category_id !== null"></pagination>
+            </slide>
 
-        <!-- ********************************* Haus ********************************** -->
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
-            <h2 class="text-4xl font-bold text-gray-700 text-center mt-2">Bitte wählen Sie<br />die <span class="text-primary">Art</span> des Hauses</h2>
-            <radio-grid v-model="value.kind_id" @input="innerStep++" class="mt-8" :options="kinds[value.category_id]"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
-            <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
-            <radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
-            <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
-            <radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
-            <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
-            <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
-            <pagination v-model="innerStep" class="mt-24"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
-            <heading>Wie viele<br /><span class="text-primary">Etagen</span> hat das Haus?</heading>
-            <radio-grid v-model="value.number_of_floors" @input="innerStep++" class="mt-8" :options="numbersOfFloors"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 7</div>
-            <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
-            <radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'house'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 8</div>
-            <heading>Welche <span class="text-primary">Parkmöglichkeiten</span><br />sind am Haus vorhanden?</heading>
-            <radio-grid v-model="value.parking_space_type" @input="innerStep++" class="mt-8" :options="parkingSpaceTypes"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
+            <!-- ********************************* Haus ********************************** -->
+            <slide v-if="value.category_id == 'Haus'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Hauses?</heading>
+                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Haus'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Hauses?</heading>
+                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Haus'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Haus?</heading>
+                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Haus'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
+                <heading>Wann wurde das<br />Haus <span class="text-primary">erbaut?</span></heading>
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <pagination v-model="innerStep" class="mt-24"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Haus'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
+                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Hauses?</heading>
+                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+            </slide>
 
-        <!-- ******************************** Wohnung ******************************** -->
-        <slide v-if="value.category_id == 'apartment'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
-            <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
-            <radio-grid v-model="value.living_area" @input="innerStep++" class="mt-8" :options="livingAreas"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'apartment'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
-            <heading>Wann wurde das<br />Wohnhaus <span class="text-primary">erbaut?</span></heading>
-            <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
-            <pagination v-model="innerStep" class="mt-24"></pagination>
-        </slide>
-        <slide v-if="value.category_id == 'apartment'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
-            <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
-            <radio-grid v-model="value.number_of_rooms" @input="innerStep++" class="mt-8" :options="numbersOfRooms"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
+            <!-- ********************************* Gewerbe ********************************** -->
+            <slide v-if="value.category_id == 'Gewerbe'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Grundstücksfläche</span> des Gewerbes?</heading>
+                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Gewerbe'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Gewerbes?</heading>
+                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Gewerbe'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat das Gewerbe?</heading>
+                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Gewerbe'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
+                <heading>Wann wurde das<br />Gewerbe <span class="text-primary">erbaut?</span></heading>
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <pagination v-model="innerStep" class="mt-24"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Gewerbe'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 6</div>
+                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Gewerbes?</heading>
+                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+            </slide>
 
-        <!-- ******************************** Grundstueck ******************************** -->
-        <slide v-if="value.category_id == 'plot'">
-            <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
-            <heading>Welche Fläche hat<br />das <span class="text-primary">Grundstück</span>?</heading>
-            <radio-grid v-model="value.plot_area" @input="innerStep++" class="mt-8" :options="plotAreas"></radio-grid>
-            <pagination v-model="innerStep" class="mt-5" :next="false"></pagination>
-        </slide>
-        <!--
-        <div class="w-full flex-none ">
-            <div v-show="innerStep === 9">
-                <h2 class="text-xl font-bold text-primary text-center">Bitte geben Sie ihre Daten ein</h2>
+            <!-- ******************************** Wohnung ******************************** -->
+            <slide v-if="value.category_id == 'Wohnung'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> der Wohnung?</heading>
+                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Wohnung'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+                <heading>Wie viele<br /><span class="text-primary">Zimmer</span> hat die Wohnung?</heading>
+                <radio-grid v-model="value.number_of_floors" class="mt-8" :options="numbersOfRooms"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.number_of_floors !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Wohnung'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+                <heading>Wann wurde die<br />Wohnung <span class="text-primary">erbaut?</span></heading>
+                <veeno :pipsy="pipsy" :tooltips="tooltips" :step="5" :handles="[1950]" class="w-4/5 mx-auto mt-10" :range="range" v-model="value.construction_year" />
+                <pagination v-model="innerStep" class="mt-24"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Wohnung'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 5</div>
+                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> der Wohnung?</heading>
+                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+            </slide>
+
+            <!-- ******************************** Grundstueck ******************************** -->
+            <slide v-if="value.category_id == 'Grundstück'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 2</div>
+                <heading>Wie ist die <span class="text-primary">Fläche</span><br />des Grundstücks?</heading>
+                <radio-grid v-model="value.plot_area" class="mt-8" :options="plotAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.plot_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Grundstück'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 3</div>
+                <heading>Wie ist die gesamte<br /><span class="text-primary">Wohnfläche</span> des Grundstücks?</heading>
+                <radio-grid v-model="value.living_area" class="mt-8" :options="livingAreas"></radio-grid>
+                <pagination v-model="innerStep" class="mt-5" :nextable="value.living_area !== null"></pagination>
+            </slide>
+            <slide v-if="value.category_id == 'Grundstück'">
+                <div class="text-center font-semibold text-gray-700 text-sm">Frage 4</div>
+                <heading>Wie ist der<br /><span class="text-primary">Zustand</span> des Grundstücks?</heading>
+                <radio-grid v-model="value.condition" class="mt-8" :options="conditions"></radio-grid>
+                <pagination v-model="innerStep" :nextable="value.condition !== null"></pagination>
+            </slide>
+
+            <slide class="w-full flex-none ">
+                <heading>Bitte geben Sie die Daten des Objekts ein</heading>
                 <div class="grid grid-cols-2 gap-6">
-                    <input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname">
-                    <input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname">
-                    <input type="text" v-model="value.address" name="address" placeholder="Adresse">
-                    <input type="text" v-model="value.plz" name="plz" placeholder="PLZ">
-                    <input type="text" v-model="value.location" name="location" placeholder="Ort">
-                    <input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer">
-                    <input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse">
+                    <input type="text" v-model="value.object_address" name="object_address" placeholder="Straße & Hausnr" />
+                    <input type="text" v-model="value.object_zip" name="object_zip" placeholder="PLZ" />
+                    <input type="text" v-model="value.object_location" name="object_location" placeholder="Ort" />
                 </div>
-                <h2 class="text-xl font-bold text-primary text-center">Daten des Objekts</h2>
+                <pagination v-model="innerStep" class="mt-12" :nextable="value.object_address.length > 0 && value.object_zip.length > 0 && value.object_location.length > 0"></pagination>
+            </slide>
+
+            <slide class="w-full flex-none ">
+                <heading>Bitte geben Sie Ihre Daten ein</heading>
                 <div class="grid grid-cols-2 gap-6">
-                    <input type="text" v-model="value.property_plz" name="property_plz" placeholder="PLZ der Immobilie">
+                    <input type="text" v-model="value.firstname" name="firstname" placeholder="Vorname" />
+                    <input type="text" v-model="value.lastname" name="lastname" placeholder="Nachname" />
+                    <input type="text" v-model="value.email" name="email" placeholder="E-Mail-Adresse" />
+                    <input type="text" v-model="value.phone" name="phone" placeholder="Telefonnummer" />
                 </div>
-            </div>
-        </div>
-        -->
-    </carousel>
+                <v-btn href="#" class="mt-4" :disabled="value.firstname.length == 0 || value.lastname.length == 0 || value.email.length == 0 || value.phone.length == 0" type="submit">Absenden</v-btn>
+            </slide>
+        </carousel>
+    </form>
 </template>
 
 <script>
@@ -106,6 +148,7 @@ import Heading from './components/Heading.vue';
 import veeno from 'veeno';
 import wNumb from 'wnumb';
 import 'nouislider/distribute/nouislider.min.css';
+import axios from 'axios';
 
 export default {
     data: function() {
@@ -121,35 +164,26 @@ export default {
             },
             range: {min: 1600, max: 2020},
             value: {
-                category_id: 'plot',
-                kind_id: null,
+                category_id: null,
                 living_area: null,
                 plot_area: null,
                 construction_year: null,
                 number_of_floors: null,
-                parking_space_type: null,
-
-                wohnflaeche: null,
-                rooms: 1,
-                constructedAt: 1950,
+                condition: null,
+                object_address: '',
+                object_zip: '',
+                object_location: '',
                 firstname: '',
                 lastname: '',
-                address: '',
-                zip: '',
-                location: '',
                 phone: '',
-                email: '',
-                etagen: null,
-                property_plz: '',
-                sellable: null,
-                furnishing: null
+                email: ''
             },
-            innerStep: 2,
+            innerStep: 0,
             categories: [
-                {key: 'house', label: 'Haus', icon: 'category-house'},
-                {key: 'plot', label: 'Grundstück', icon: 'category-plot'},
-                {key: 'apartment', label: 'Wohnung', icon: 'category-apartment'},
-                {key: 'gewerbe', label: 'Gewerbe', icon: 'category-business'}
+                {key: 'Haus', label: 'Haus', icon: 'category-house'},
+                {key: 'Grundstück', label: 'Grundstück', icon: 'category-plot'},
+                {key: 'Wohnung', label: 'Wohnung', icon: 'category-apartment'},
+                {key: 'Gewerbe', label: 'Gewerbe', icon: 'category-business'}
             ],
             kinds: {
                 house: [
@@ -176,34 +210,35 @@ export default {
                 ]
             },
             livingAreas: [
-                {key: 'sm', label: 'bis 100 m²', icon: 'living-area-sm'},
-                {key: 'md', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
-                {key: 'lg', label: 'mehr als 200 m²', icon: 'living-area-lg'},
-                {key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
+                {key: 'bis 100 m²', label: 'bis 100 m²', icon: 'living-area-sm'},
+                {key: 'bis 101 - 200 m²', label: 'bis 101 - 200 m²', icon: 'living-area-md'},
+                {key: 'mehr als 200 m²', label: 'mehr als 200 m²', icon: 'living-area-lg'},
+                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
+            ],
+            conditions: [
+                {key: 'Renovierungsbedürftig', label: 'Renovierungsbedürftig', icon: 'living-area-sm'},
+                {key: 'Sanierungsbedürftig', label: 'Sanierungsbedürftig', icon: 'living-area-md'},
+                {key: 'Gepflegt', label: 'Gepflegt', icon: 'living-area-lg'},
+                {key: 'Gehoben', label: 'Gehoben', icon: 'living-area-lg'},
+                {key: 'Luxuroiös', label: 'Luxuriös', icon: 'living-area-lg'}
             ],
             plotAreas: [
-                {key: 'sm', label: 'bis 200 m²', icon: 'plot-area-sm'},
-                {key: 'md', label: 'bis 201 - 800 m²', icon: 'plot-area-md'},
-                {key: 'lg', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
-                {key: 'unknown', label: 'nicht bekannt', icon: 'unknown'}
+                {key: 'bis 200 m²', label: 'bis 200 m²', icon: 'plot-area-sm'},
+                {key: '201 - 800 m²', label: '201 - 800 m²', icon: 'plot-area-md'},
+                {key: 'mehr als 800 m²', label: 'mehr als 800 m²', icon: 'plot-area-lg'},
+                {key: 'nicht bekannt', label: 'nicht bekannt', icon: 'unknown'}
             ],
             numbersOfFloors: [
-                {key: 'sm', label: '1', icon: 'plot-area-sm'},
-                {key: 'md', label: '2', icon: 'plot-area-md'},
-                {key: 'lg', label: '3', icon: 'plot-area-lg'},
-                {key: 'xl', label: 'mehr als 3', icon: 'plot-area-lg'}
+                {key: '1', label: '1', icon: 'plot-area-sm'},
+                {key: '2', label: '2', icon: 'plot-area-md'},
+                {key: '3', label: '3', icon: 'plot-area-lg'},
+                {key: 'mehr als 3', label: 'mehr als 3', icon: 'plot-area-lg'}
             ],
             numbersOfRooms: [
-                {key: 'sm', label: '1-2', icon: 'plot-area-sm'},
-                {key: 'md', label: '3-5', icon: 'plot-area-md'},
-                {key: 'lg', label: '5-8', icon: 'plot-area-lg'},
-                {key: 'xl', label: 'mehr als 8', icon: 'plot-area-lg'}
-            ],
-            parkingSpaceTypes: [
-                {key: 'garage', label: 'Garage', icon: 'plot-area-sm'},
-                {key: 'im-freien', label: 'im Freien', icon: 'plot-area-md'},
-                {key: 'carport', label: 'Carport', icon: 'plot-area-lg'},
-                {key: 'tiefgarage', label: 'Tiefgarage', icon: 'plot-area-lg'}
+                {key: '1-2', label: '1-2', icon: 'plot-area-sm'},
+                {key: '3-5', label: '3-5', icon: 'plot-area-md'},
+                {key: '5-8', label: '5-8', icon: 'plot-area-lg'},
+                {key: 'mehr als 8', label: 'mehr als 8', icon: 'plot-area-lg'}
             ],
             wohnflaechen: [{label: 'bis 50 m²'}, {label: '51 - 150 m²'}, {label: 'mehr als 151 m²'}, {label: 'nicht bekannt'}],
             etagen: [{label: '1'}, {label: '2'}, {label: '3'}, {label: '4 oder mehr'}],
@@ -216,12 +251,11 @@ export default {
             this.value.category_id = id;
             this.innerStep++;
         },
-        setKindId(id) {
-            this.value.kind_id = id;
-            this.innerStep++;
-        },
         back() {
             this.innerStep--;
+        },
+        submit() {
+            axios.post('/wp-admin/admin-ajax.php?action=stepper_submit', this.value);
         }
     },
     components: {
diff --git a/assets/js/components/Pagination.vue b/assets/js/components/Pagination.vue
index 49ee031..9a831ea 100644
--- a/assets/js/components/Pagination.vue
+++ b/assets/js/components/Pagination.vue
@@ -1,7 +1,11 @@
 <template>
     <div class="flex w-4/5 mx-auto justify-between">
-        <v-btn href="#" v-show="prev" @click.prevent="$emit('input', value - 1)" :disabled="value === 0">Zurück</v-btn>
-        <v-btn href="#" v-show="next" @click.prevent="$emit('input', value + 1)">Weiter</v-btn>
+        <div>
+            <v-btn href="#" v-show="prev" @click.prevent="$emit('input', value - 1)" :disabled="!prevable">Zurück</v-btn>
+        </div>
+        <div>
+            <v-btn href="#" v-show="next" @click.prevent="$emit('input', value + 1)" :disabled="!nextable">Weiter</v-btn>
+        </div>
     </div>
 </template>
 
@@ -18,6 +22,14 @@ export default {
         },
         value: {
             default: null
+        },
+        prevable: {
+            type: Boolean,
+            default: true
+        },
+        nextable: {
+            type: Boolean,
+            default: true
         }
     }
 };
diff --git a/assets/js/components/RadioGrid.vue b/assets/js/components/RadioGrid.vue
index a4a0a03..c5f6b69 100644
--- a/assets/js/components/RadioGrid.vue
+++ b/assets/js/components/RadioGrid.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="flex space-x-4 justify-center">
-        <label :key="index" v-for="(item, index) in options" class="w-36">
+        <label :key="index" v-for="(item, index) in options" class="w-40">
             <input class="invisible absolute left-0 top-0 peer" :checked="value === item.key" @click="$emit('input', item.key)" :value="item.key" type="radio" name="category" />
             <span
                 class="flex cursor-pointer flex-col rounded-lg items-center justify-center border border-b-[10px] border-transparent border-solid peer-checked:border-b-primary peer-checked:border-gray-200 peer-checked:shadow-xl h-40 transition-all duration-200"
             >
                 <img :src="`/wp-content/plugins/stepper/resources/img/icons/${item.icon}.svg`" class="w-16 h-16 flex-none" />
-                <span class="mt-4 font-semibold text-gray-700" v-text="item.label"></span>
+                <span class="mt-4 font-semibold text-gray-700 text-sm" v-text="item.label"></span>
             </span>
         </label>
     </div>
diff --git a/assets/js/components/VBtn.vue b/assets/js/components/VBtn.vue
index 78ee634..06f7969 100644
--- a/assets/js/components/VBtn.vue
+++ b/assets/js/components/VBtn.vue
@@ -1,9 +1,13 @@
 <template>
-    <button v-on="$listeners" class="bg-primary px-5 py-2 leading-none rounded text-xs font-semibold text-white disabled:bg-gray-300"><slot></slot></button>
+    <button v-on="$listeners" :type="type" class="bg-primary px-6 py-3 leading-none rounded  text-lg font-semibold text-white disabled:bg-gray-300"><slot></slot></button>
 </template>
 
 <script>
 export default {
-    
+    props: {
+        type: {
+            default: 'button'
+        }
+    }
 };
 </script>
diff --git a/composer.json b/composer.json
index 0e72685..9b97963 100644
--- a/composer.json
+++ b/composer.json
@@ -5,7 +5,9 @@
         "illuminate/support": "^8.12",
         "illuminate/validation": "^8.48",
         "vlucas/phpdotenv": "^5.3",
-        "twig/twig": "^3.3"
+        "twig/twig": "^3.3",
+        "guzzle/guzzle": "^3.9",
+        "guzzlehttp/guzzle": "^7.4"
     },
     "authors": [
         {
diff --git a/composer.lock b/composer.lock
index e5bc3ea..d129f0e 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "daa339a17e3a1f0370898f194e443cf8",
+    "content-hash": "8b9079dc4af8c806d1687e4788087483",
     "packages": [
         {
             "name": "doctrine/inflector",
@@ -303,6 +303,429 @@
             ],
             "time": "2020-04-13T13:17:36+00:00"
         },
+        {
+            "name": "guzzle/guzzle",
+            "version": "v3.9.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/guzzle3.git",
+                "reference": "0645b70d953bc1c067bbc8d5bc53194706b628d9"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/guzzle3/zipball/0645b70d953bc1c067bbc8d5bc53194706b628d9",
+                "reference": "0645b70d953bc1c067bbc8d5bc53194706b628d9",
+                "shasum": ""
+            },
+            "require": {
+                "ext-curl": "*",
+                "php": ">=5.3.3",
+                "symfony/event-dispatcher": "~2.1"
+            },
+            "replace": {
+                "guzzle/batch": "self.version",
+                "guzzle/cache": "self.version",
+                "guzzle/common": "self.version",
+                "guzzle/http": "self.version",
+                "guzzle/inflection": "self.version",
+                "guzzle/iterator": "self.version",
+                "guzzle/log": "self.version",
+                "guzzle/parser": "self.version",
+                "guzzle/plugin": "self.version",
+                "guzzle/plugin-async": "self.version",
+                "guzzle/plugin-backoff": "self.version",
+                "guzzle/plugin-cache": "self.version",
+                "guzzle/plugin-cookie": "self.version",
+                "guzzle/plugin-curlauth": "self.version",
+                "guzzle/plugin-error-response": "self.version",
+                "guzzle/plugin-history": "self.version",
+                "guzzle/plugin-log": "self.version",
+                "guzzle/plugin-md5": "self.version",
+                "guzzle/plugin-mock": "self.version",
+                "guzzle/plugin-oauth": "self.version",
+                "guzzle/service": "self.version",
+                "guzzle/stream": "self.version"
+            },
+            "require-dev": {
+                "doctrine/cache": "~1.3",
+                "monolog/monolog": "~1.0",
+                "phpunit/phpunit": "3.7.*",
+                "psr/log": "~1.0",
+                "symfony/class-loader": "~2.1",
+                "zendframework/zend-cache": "2.*,<2.3",
+                "zendframework/zend-log": "2.*,<2.3"
+            },
+            "suggest": {
+                "guzzlehttp/guzzle": "Guzzle 5 has moved to a new package name. The package you have installed, Guzzle 3, is deprecated."
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.9-dev"
+                }
+            },
+            "autoload": {
+                "psr-0": {
+                    "Guzzle": "src/",
+                    "Guzzle\\Tests": "tests/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "Guzzle Community",
+                    "homepage": "https://github.com/guzzle/guzzle/contributors"
+                }
+            ],
+            "description": "PHP HTTP client. This library is deprecated in favor of https://packagist.org/packages/guzzlehttp/guzzle",
+            "homepage": "http://guzzlephp.org/",
+            "keywords": [
+                "client",
+                "curl",
+                "framework",
+                "http",
+                "http client",
+                "rest",
+                "web service"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/guzzle3/issues",
+                "source": "https://github.com/guzzle/guzzle3/tree/master"
+            },
+            "abandoned": "guzzlehttp/guzzle",
+            "time": "2015-03-18T18:23:50+00:00"
+        },
+        {
+            "name": "guzzlehttp/guzzle",
+            "version": "7.4.2",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/guzzle.git",
+                "reference": "ac1ec1cd9b5624694c3a40be801d94137afb12b4"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/guzzle/zipball/ac1ec1cd9b5624694c3a40be801d94137afb12b4",
+                "reference": "ac1ec1cd9b5624694c3a40be801d94137afb12b4",
+                "shasum": ""
+            },
+            "require": {
+                "ext-json": "*",
+                "guzzlehttp/promises": "^1.5",
+                "guzzlehttp/psr7": "^1.8.3 || ^2.1",
+                "php": "^7.2.5 || ^8.0",
+                "psr/http-client": "^1.0",
+                "symfony/deprecation-contracts": "^2.2 || ^3.0"
+            },
+            "provide": {
+                "psr/http-client-implementation": "1.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.4.1",
+                "ext-curl": "*",
+                "php-http/client-integration-tests": "^3.0",
+                "phpunit/phpunit": "^8.5.5 || ^9.3.5",
+                "psr/log": "^1.1 || ^2.0 || ^3.0"
+            },
+            "suggest": {
+                "ext-curl": "Required for CURL handler support",
+                "ext-intl": "Required for Internationalized Domain Name (IDN) support",
+                "psr/log": "Required for using the Log middleware"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "7.4-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions_include.php"
+                ],
+                "psr-4": {
+                    "GuzzleHttp\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "Jeremy Lindblom",
+                    "email": "jeremeamia@gmail.com",
+                    "homepage": "https://github.com/jeremeamia"
+                },
+                {
+                    "name": "George Mponos",
+                    "email": "gmponos@gmail.com",
+                    "homepage": "https://github.com/gmponos"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://github.com/sagikazarmark"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                }
+            ],
+            "description": "Guzzle is a PHP HTTP client library",
+            "keywords": [
+                "client",
+                "curl",
+                "framework",
+                "http",
+                "http client",
+                "psr-18",
+                "psr-7",
+                "rest",
+                "web service"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/guzzle/issues",
+                "source": "https://github.com/guzzle/guzzle/tree/7.4.2"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/guzzle",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-03-20T14:16:28+00:00"
+        },
+        {
+            "name": "guzzlehttp/promises",
+            "version": "1.5.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/promises.git",
+                "reference": "fe752aedc9fd8fcca3fe7ad05d419d32998a06da"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/promises/zipball/fe752aedc9fd8fcca3fe7ad05d419d32998a06da",
+                "reference": "fe752aedc9fd8fcca3fe7ad05d419d32998a06da",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.5"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "^4.4 || ^5.1"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.5-dev"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "src/functions_include.php"
+                ],
+                "psr-4": {
+                    "GuzzleHttp\\Promise\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                }
+            ],
+            "description": "Guzzle promises library",
+            "keywords": [
+                "promise"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/promises/issues",
+                "source": "https://github.com/guzzle/promises/tree/1.5.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/promises",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-10-22T20:56:57+00:00"
+        },
+        {
+            "name": "guzzlehttp/psr7",
+            "version": "2.2.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/guzzle/psr7.git",
+                "reference": "c94a94f120803a18554c1805ef2e539f8285f9a2"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/guzzle/psr7/zipball/c94a94f120803a18554c1805ef2e539f8285f9a2",
+                "reference": "c94a94f120803a18554c1805ef2e539f8285f9a2",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.2.5 || ^8.0",
+                "psr/http-factory": "^1.0",
+                "psr/http-message": "^1.0",
+                "ralouphie/getallheaders": "^3.0"
+            },
+            "provide": {
+                "psr/http-factory-implementation": "1.0",
+                "psr/http-message-implementation": "1.0"
+            },
+            "require-dev": {
+                "bamarni/composer-bin-plugin": "^1.4.1",
+                "http-interop/http-factory-tests": "^0.9",
+                "phpunit/phpunit": "^8.5.8 || ^9.3.10"
+            },
+            "suggest": {
+                "laminas/laminas-httphandlerrunner": "Emit PSR-7 responses"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.2-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "GuzzleHttp\\Psr7\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Graham Campbell",
+                    "email": "hello@gjcampbell.co.uk",
+                    "homepage": "https://github.com/GrahamCampbell"
+                },
+                {
+                    "name": "Michael Dowling",
+                    "email": "mtdowling@gmail.com",
+                    "homepage": "https://github.com/mtdowling"
+                },
+                {
+                    "name": "George Mponos",
+                    "email": "gmponos@gmail.com",
+                    "homepage": "https://github.com/gmponos"
+                },
+                {
+                    "name": "Tobias Nyholm",
+                    "email": "tobias.nyholm@gmail.com",
+                    "homepage": "https://github.com/Nyholm"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://github.com/sagikazarmark"
+                },
+                {
+                    "name": "Tobias Schultze",
+                    "email": "webmaster@tubo-world.de",
+                    "homepage": "https://github.com/Tobion"
+                },
+                {
+                    "name": "Márk Sági-Kazár",
+                    "email": "mark.sagikazar@gmail.com",
+                    "homepage": "https://sagikazarmark.hu"
+                }
+            ],
+            "description": "PSR-7 message implementation that also provides common utility methods",
+            "keywords": [
+                "http",
+                "message",
+                "psr-7",
+                "request",
+                "response",
+                "stream",
+                "uri",
+                "url"
+            ],
+            "support": {
+                "issues": "https://github.com/guzzle/psr7/issues",
+                "source": "https://github.com/guzzle/psr7/tree/2.2.1"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/GrahamCampbell",
+                    "type": "github"
+                },
+                {
+                    "url": "https://github.com/Nyholm",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/guzzlehttp/psr7",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-03-20T21:55:58+00:00"
+        },
         {
             "name": "illuminate/collections",
             "version": "v8.12.3",
@@ -917,6 +1340,166 @@
             ],
             "time": "2017-02-14T16:28:37+00:00"
         },
+        {
+            "name": "psr/http-client",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-client.git",
+                "reference": "2dfb5f6c5eff0e91e20e913f8c5452ed95b86621"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-client/zipball/2dfb5f6c5eff0e91e20e913f8c5452ed95b86621",
+                "reference": "2dfb5f6c5eff0e91e20e913f8c5452ed95b86621",
+                "shasum": ""
+            },
+            "require": {
+                "php": "^7.0 || ^8.0",
+                "psr/http-message": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Client\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP clients",
+            "homepage": "https://github.com/php-fig/http-client",
+            "keywords": [
+                "http",
+                "http-client",
+                "psr",
+                "psr-18"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-client/tree/master"
+            },
+            "time": "2020-06-29T06:28:15+00:00"
+        },
+        {
+            "name": "psr/http-factory",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-factory.git",
+                "reference": "12ac7fcd07e5b077433f5f2bee95b3a771bf61be"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-factory/zipball/12ac7fcd07e5b077433f5f2bee95b3a771bf61be",
+                "reference": "12ac7fcd07e5b077433f5f2bee95b3a771bf61be",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.0.0",
+                "psr/http-message": "^1.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Message\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interfaces for PSR-7 HTTP message factories",
+            "keywords": [
+                "factory",
+                "http",
+                "message",
+                "psr",
+                "psr-17",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-factory/tree/master"
+            },
+            "time": "2019-04-30T12:38:16+00:00"
+        },
+        {
+            "name": "psr/http-message",
+            "version": "1.0.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/php-fig/http-message.git",
+                "reference": "f6561bf28d520154e4b0ec72be95418abe6d9363"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/php-fig/http-message/zipball/f6561bf28d520154e4b0ec72be95418abe6d9363",
+                "reference": "f6561bf28d520154e4b0ec72be95418abe6d9363",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.0.x-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Psr\\Http\\Message\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "PHP-FIG",
+                    "homepage": "http://www.php-fig.org/"
+                }
+            ],
+            "description": "Common interface for HTTP messages",
+            "homepage": "https://github.com/php-fig/http-message",
+            "keywords": [
+                "http",
+                "http-message",
+                "psr",
+                "psr-7",
+                "request",
+                "response"
+            ],
+            "support": {
+                "source": "https://github.com/php-fig/http-message/tree/master"
+            },
+            "time": "2016-08-06T14:39:51+00:00"
+        },
         {
             "name": "psr/simple-cache",
             "version": "1.0.1",
@@ -965,6 +1548,50 @@
             ],
             "time": "2017-10-23T01:57:42+00:00"
         },
+        {
+            "name": "ralouphie/getallheaders",
+            "version": "3.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/ralouphie/getallheaders.git",
+                "reference": "120b605dfeb996808c31b6477290a714d356e822"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/ralouphie/getallheaders/zipball/120b605dfeb996808c31b6477290a714d356e822",
+                "reference": "120b605dfeb996808c31b6477290a714d356e822",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.6"
+            },
+            "require-dev": {
+                "php-coveralls/php-coveralls": "^2.1",
+                "phpunit/phpunit": "^5 || ^6.5"
+            },
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "src/getallheaders.php"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Ralph Khattar",
+                    "email": "ralph.khattar@gmail.com"
+                }
+            ],
+            "description": "A polyfill for getallheaders.",
+            "support": {
+                "issues": "https://github.com/ralouphie/getallheaders/issues",
+                "source": "https://github.com/ralouphie/getallheaders/tree/develop"
+            },
+            "time": "2019-03-08T08:55:37+00:00"
+        },
         {
             "name": "symfony/deprecation-contracts",
             "version": "v2.4.0",
@@ -1029,6 +1656,69 @@
             ],
             "time": "2021-03-23T23:28:01+00:00"
         },
+        {
+            "name": "symfony/event-dispatcher",
+            "version": "v2.8.52",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/event-dispatcher.git",
+                "reference": "a77e974a5fecb4398833b0709210e3d5e334ffb0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/event-dispatcher/zipball/a77e974a5fecb4398833b0709210e3d5e334ffb0",
+                "reference": "a77e974a5fecb4398833b0709210e3d5e334ffb0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.9"
+            },
+            "require-dev": {
+                "psr/log": "~1.0",
+                "symfony/config": "^2.0.5|~3.0.0",
+                "symfony/dependency-injection": "~2.6|~3.0.0",
+                "symfony/expression-language": "~2.6|~3.0.0",
+                "symfony/stopwatch": "~2.3|~3.0.0"
+            },
+            "suggest": {
+                "symfony/dependency-injection": "",
+                "symfony/http-kernel": ""
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "2.8-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\EventDispatcher\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony EventDispatcher Component",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/event-dispatcher/tree/v2.8.50"
+            },
+            "time": "2018-11-21T14:20:20+00:00"
+        },
         {
             "name": "symfony/finder",
             "version": "v5.3.0",
@@ -2193,5 +2883,5 @@
     "prefer-lowest": false,
     "platform": [],
     "platform-dev": [],
-    "plugin-api-version": "2.0.0"
+    "plugin-api-version": "2.2.0"
 }
diff --git a/package-lock.json b/package-lock.json
index 81062a1..cac6fc0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "axios": "^0.21.0",
+        "axios": "^0.21.4",
         "laravel-mix": "^6.0.7",
         "postcss-import": "^14.0.2",
         "postcss-nested": "^4.0",
diff --git a/package.json b/package.json
index a358f54..ca7afea 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "axios": "^0.21.0",
+    "axios": "^0.21.4",
     "laravel-mix": "^6.0.7",
     "postcss-import": "^14.0.2",
     "postcss-nested": "^4.0",
diff --git a/src/Stepper.php b/src/Stepper.php
index 8a7d488..49210cb 100644
--- a/src/Stepper.php
+++ b/src/Stepper.php
@@ -2,6 +2,7 @@
 
 namespace Zoomyboy\Stepper;
 
+use GuzzleHttp\Client;
 use Dotenv\Dotenv;
 use Twig\Environment;
 use Twig\Loader\FilesystemLoader;
@@ -101,20 +102,16 @@ class Stepper {
     }
 
     public function onSubmit() {
-        $payload = json_decode(file_get_contents('php://input'), true);
-
-        $errors = $this->validate($payload);
-        if (count($errors)) {
-            echo json_encode(['errors' => $errors]);
-            die();
-        }
+        $client = new Client();
 
-        wp_mail(data_get($_ENV, 'RECEIVER'), 'Neue Finanzierungs-Anfrage', $this->twig->render('mail.twig.htm', $payload, true), [
-        ]);
-        wp_mail($payload['email'], 'Vielen Dank für Ihre Finanzierungs-Anfrage', $this->twig->render('client.twig.htm', $payload, true), [
+        $payload = json_decode(file_get_contents('php://input'), true);
+        $client->post(STEPPER_URL, [
+            'json' => $payload,
+            'headers' => [
+                'Content-Type' => 'application/json',
+                'Authorization' => 'Bearer '.STEPPER_TOKEN,
+            ]
         ]);
-
-        die();
     }
 
 }