Level 1
Here ist the Script Setup for it:
import { ref } from 'vue'
import { CheckIcon } from '@heroicons/vue/20/solid'
import { useForm } from '@inertiajs/vue3'
import Price from '@/Pages/Reservation/Partials/Price.vue'
const form = useForm({
package_id: '',
customer_first_name: '',
customer_last_name: '',
customer_birhdate: '',
customer_nationality: '',
customer_email: '',
customer_phone: '',
customer_address: '',
customer_zip: '',
customer_city: '',
customer_country: '',
reservation_passenger_amount: '1',
reservation_companion_name: '',
cc_number: '',
cc_validuntil: '',
cc_holder: '',
})
const submit = () => {
form.post(route('reservation.store'), {
onSuccess: () => {
form.reset(),
(formStep.value = 1)
},
})
}
const formStep = ref(1)
const countSteps = ref(5)
const thePackage = ref(0)
function selectStep(stepId) {
const stepValue = Number(stepId)
formStep.value = stepValue
}
function selectPackageActive(select) {
thePackage.value = 0
const selected = Number(select)
thePackage.value = selected
}
function setStyle(id, selected) {
if(id == selected) {
return 'selected'
}
}
function nextStep() {
if (formStep.value < countSteps.value) {
formStep.value++
}
}
function prevStep() {
if (formStep.value > 1) {
formStep.value--
}
}
const steps = [
{ id: '01', name: 'Package', href: '#', status: 'complete' },
{ id: '02', name: 'Personendaten', href: '#', status: 'current' },
{ id: '03', name: 'Adressdaten', href: '#', status: 'upcoming' },
{ id: '04', name: 'Mitreisende', href: '#', status: 'upcoming' },
{ id: '05', name: 'Zahlungsmittel', href: '#', status: 'upcoming' },
]
function SelectPackage(PackageId) {
const inputPackageId = document.getElementById('package_id')
inputPackageId.setAttribute('value', Number(PackageId))
inputPackageId.value = Number(PackageId)
}