<template>
  <div>
    <div class="text-center">Autófelvétel helye</div>
    <div class="flex flex-col gap-3 p-3">
      <Card v-for="place in places" :pt="{ root: (rent.auto_felvetel_hely == place) ? 'bg-primary-500 text-white mb-3' : 'mb-3' }">
        <template #content>
          <div class="flex gap-3" @click="next(place)">
            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">
              <template v-if="place.icon == 'airplane'">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256">
                  <path fill="currentColor"
                    d="M256 216a8 8 0 0 1-8 8H104a8 8 0 0 1 0-16h144a8 8 0 0 1 8 8m-26.16-24.3L53.21 142.24A40.12 40.12 0 0 1 24 103.72V48a16 16 0 0 1 21.06-15.18l5.47 1.82a8 8 0 0 1 5 4.87l10.6 29.37L96 77.39V48a16 16 0 0 1 21.06-15.18l5.47 1.82a8 8 0 0 1 4.85 4.5l22.5 53.63l60.84 17A40.13 40.13 0 0 1 240 148.32V184a8 8 0 0 1-10.16 7.7M224 148.32a24.09 24.09 0 0 0-17.58-23.13l-64.57-18a8 8 0 0 1-5.23-4.61L114 48.67l-2-.67v40a8 8 0 0 1-10.19 7.7l-44-12.54a8 8 0 0 1-5.33-5L41.79 48.59L40 48v55.72a24.09 24.09 0 0 0 17.53 23.12L224 173.45Z" />
                </svg>
              </template>
              <template v-if="place.icon == 'office'">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256"><path fill="currentColor" d="M248 208h-16V96a8 8 0 0 0 0-16h-48V48a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16v160H24a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16M216 96v112h-32V96ZM56 48h112v160h-24v-48a8 8 0 0 0-8-8H88a8 8 0 0 0-8 8v48H56Zm72 160H96v-40h32ZM72 80a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8m-48 40a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8"/></svg>
              </template>
            </div>
            <div class="w-full">
              <div class="text-sm"><b>{{ place.name }}</b></div>
              <div class="text-sm">{{ place.address }}</div>
            </div>
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>

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

definePageMeta({
  rentStep: 2,
  title:'Autófelvétel helye'
})
const placeStore = useMyPlacesStore()

const places: PlaceType[] = computed(() => {
  return placeStore.places
})

let HUFormat = new Intl.NumberFormat('hu-HU', {
  style: 'currency',
  currency: 'HUF',
  maximumFractionDigits: 0
});

function next(val) {
  rent.value.auto_felvetel_hely=val
  if(val.id == '3'){
    navigateTo('/rent/jaratszam')
  }else{
    navigateTo('/rent/date-to')
  }
}

function prev() {
  navigateTo('/rent')
}
</script>

<style></style>