<template>
  <div class="p-3">
    <div class="p-card border-t border-t-4 border-primary p-4">
      <div><b>Név: </b>{{ user.nev }}</div>
      <div><b>E-mail: </b>{{ user.email }}</div>
      <div><b>Telefon: </b>{{ user.telefon }}</div>
      <div><b>Anyja neve: </b>{{ user.anyja_neve }}</div>
      <div><b>Születési hely: </b>{{ user.szuletesi_hely }}</div>
      <div><b>Születési idő: </b>{{ user.szuletesi_ido }}</div>
      <div><b>Állampolgárság: </b>{{ user.nemzetiseg }}</div>
      <div class="text-sm"><b>Személyi igazolvány / Útlevél száma: </b><br>{{ user.szigszam }}</div>
      <div class="text-sm"><b>Jogosítvány száma: </b><br>{{ user.jogositvany_szama }}</div>
      <div class="text-sm"><b>Lakcím: </b><br>{{ user.lakcim }}</div>
      <div class="text-sm"><b>Tartózkodási cím: </b><br>{{ user.tartozkodasicim }}</div>

      <Message class="mt-2" severity="warn">Amennyiben adataidban változás történt, módosítsd a <i
          class="pi pi-user mx-2"></i> profilodban.</Message>

      <div class="text-center">
        <Button variant="link" @click="$router.push({ path: '/profile' })">Adatok módosítása</Button>
      </div>
    </div>
    <div class="space-y-4 mt-4">
      <div class="p-card border-t border-t-4 border-primary">
        <div v-if="rent.jaratszam" class="text-end text-xs pe-3"><span class="">járatszám:</span><b>{{
          rent.jaratszam
        }}</b></div>
        <div class="flex items-baseline flex-row">
          <div class="text-center p-2 w-full items-top">
            <div class="text-xs">{{ useLocaleDateString(rent.auto_felvetel_datum) }}</div>
            <div class="text-2xl">{{ rent.auto_felvetel_idopont }}</div>
            <div class="text-xs">{{ rent.auto_felvetel_hely?.name }}</div>
          </div>
          <div class="w-4"></div>
          <div class="text-center p-2 w-full">
            <div class="text-xs">{{ useLocaleDateString(rent.auto_leadas_datum) }}</div>
            <div class="text-2xl">{{ rent.auto_leadas_idopont }}</div>
            <div class="text-xs">{{ rent.auto_leadas_hely?.name }}</div>
          </div>
        </div>
      </div>

      <div class="flex items-start gap-1" v-for="t in config?.rent.confirms">
        <Checkbox v-model="confirms" :inputId="`confirm${t.id}`" name="confirms[]" :value="t.id" />
        <label :for="`confirm${t.id}`" class="text-sm">{{ t.label }}</label>
      </div>
    </div>
    <div class="py-5">
      <Button @click="$router.push({ path: '/rent/thanks' })" class="w-full" :disabled="isValid">Foglalás
        elküldése</Button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { rent, user } = storeToRefs(useAuthStore())
const { config } = storeToRefs(useMyConfigStore())
const confirms = ref([])

definePageMeta({
  rentStep: 7,
  title: 'Foglalás áttekintése'
})

const isValid = computed(() => {
  if (config.value?.rent.confirms.length > confirms.value?.length) return true
  return false
})
</script>

<style></style>