<template>
  <div class="p-3">
    <div class="p-card border-t border-t-4 border-primary p-4">
      <div class="flex justify-between"><b>Név: </b>{{ user.nev }}</div>
      <div class="flex justify-between"><b>E-mail: </b>{{ user.email }}</div>
      <div class="flex justify-between"><b>Telefon: </b>{{ user.telefon }}</div>
      <div class="flex justify-between"><b>Anyja neve: </b>{{ user.anyja_neve }}</div>
      <div class="flex justify-between"><b>Születési hely: </b>{{ user.szuletesi_hely }}</div>
      <div class="flex justify-between"><b>Születési idő: </b>{{ user.szuletesi_ido }}</div>
      <div class="flex justify-between"><b>Állampolgárság: </b>{{ user.nemzetiseg }}</div>
      <div class="text-sm mt-3"><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 v-if="missingFields.length > 0" class="mt-2" severity="error">
        <div>Hiányzó adatok:</div>
        <ul class="list-disc list-inside">
          <li v-for="field in missingFields" :key="field.key">{{ field.label }}</li>
        </ul>
      </Message>
      <Message v-else class="mt-2 text-center" severity="warn">Amennyiben adataidban változás történt, módosítsd a <span class="text-nowrap"><i
          class="pi pi-user mx-1"></i> profilodban</span>.</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">{{ 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">{{ 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="sendRent()" 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 { apiRequest } = useApi()
const confirms = ref([])
const requiredFields = [
  { key: 'nev', label: 'Név' },
  { key: 'email', label: 'E-mail' },
  { key: 'telefon', label: 'Telefon' },
  { key: 'anyja_neve', label: 'Anyja neve' },
  { key: 'szuletesi_hely', label: 'Születési hely' },
  { key: 'szuletesi_ido', label: 'Születési idő' },
  { key: 'nemzetiseg', label: 'Állampolgárság' },
  { key: 'szigszam', label: 'Személyi igazolvány / Útlevél száma' },
  { key: 'jogositvany_szama', label: 'Jogosítvány száma' },
  { key: 'lakcim', label: 'Lakcím' },
  { key: 'tartozkodasicim', label: 'Tartózkodási cím' }
]

const missingFields = computed(() => {
  return requiredFields.filter(field => !user.value?.[field.key])
})

const isUserDataValid = computed(() => {
  return missingFields.value.length === 0
})

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

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

async function sendRent(){
  console.log(rent.value)
  const data = await apiRequest('/rent', {
    method: 'POST',
    body:{
      user:user.value,
      rent:rent.value
    }
  })

  if(data?.success){

  }

  if(data?.error){

  }
}
</script>

<style></style>