<template>
  <div class="p-3">



    <div>
      <div><span class="text-red-500">*</span>  Autó használata:</div>
      <div class="flex flex-col gap-4 p-3">
        <div class="flex items-center gap-2">
          <RadioButton v-model="rent.hasznalat" inputId="hasznalat-belfold" name="hasznalat" value="belfold" />
          <label for="hasznalat-belfold" class="text-sm">Belföld</label>
        </div>
        <div class="flex items-center gap-2">
          <RadioButton v-model="rent.hasznalat" inputId="hasznalat-kulfold" name="hasznalat" value="kulfold" />
          <label for="hasznalat-kulfold" class="text-sm">Belföld és külföld</label>
        </div>
      </div>
    </div>
    <Divider />
    <div class="flex items-center gap-2 text-small">
      <ToggleSwitch name="matrica" v-model="rent.palyamatrica" input-id="palyamatrica" />
      <label for="palyamatrica">Magyar autópálya matrica</label>
    </div>
    <Divider />
    <div>
      <div>Opcionálisan bérelhető tartozékok:</div>
      <div class="flex flex-col gap-4 p-3">
        <div class="flex items-center gap-2">
          <Checkbox v-model="rent.tartozekok" inputId="tartozekok-snowchain" name="tartozekok[]" value="snowchain" />
          <label for="tartozekok-snowchain" class="text-sm">Hólánc</label>
        </div>
        <div class="flex items-center gap-2">
          <Checkbox v-model="rent.tartozekok" inputId="tartozekok-childsheat" name="tartozekok[]" value="childsheat" />
          <label for="tartozekok-childsheat" class="text-sm">Gyerekülés</label>
        </div>
      </div>
    </div>
    <Divider />
    <div>
      <div><span class="text-red-500">*</span> Fizetési mód:</div>
      <div class="flex flex-col gap-4 p-3">
        <div class="flex items-center gap-2">
          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-1" name="payment" value="1" />
          <label for="fizetesi_mod-1" class="text-sm">Készpénzzel a helyszínen</label>
        </div>
        <div class="flex items-center gap-2">
          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-2" name="payment" value="2" />
          <label for="fizetesi_mod-2" class="text-sm">Banki előre utalás</label>
        </div>
        <div class="flex items-center gap-2">
          <RadioButton v-model="rent.fizetesi_mod" inputId="fizetesi_mod-3" name="payment" value="3" />
          <label for="fizetesi_mod-3" class="text-sm">Bankkártyával  a helyszínen</label>
        </div>
      </div>
    </div>
    <Divider />
    <div>
      <div>Üzenet:</div>
      <Textarea rows="4" class="w-full text-sm" placeholder="Ha szeretnél nekünk üzenni az autóbérléssel kapcsolatosan, akkor itt megteheted."></Textarea>
    </div>
    <div class="py-3">
      <Button @click="next()" class="w-full" :disabled="isValid">Tovább</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { rent } = storeToRefs(useAuthStore())

definePageMeta({
  rentStep:5,
  title: ''
})
const hasznalatOptions = ref([{ value: 'belfold', label: 'Belföld' }, { value: 'kulfold', label: 'Belföld és külföld' }])
function next() {
  navigateTo('/rent/category')
}

const isValid = computed(()=>{
  if(!rent.value?.hasznalat) return true
  if(!rent.value?.fizetesi_mod) return true
  return false
})
</script>

<style></style>