<template>
  <div v-if="contact">
    <div class="text-center bg-green text-white text-h6">
      {{ $t('tutorial.title') }} -
      <span class="text-h7"
        >({{
          $t('tutorial.step', { step: slidestep, numstep: numstep })
        }})</span
      >
    </div>
    <q-linear-progress size="25px" :value="progressStep" color="accent">
      <div class="absolute-full flex flex-center">
        <q-badge color="white" text-color="accent" :label="progressLabel1" />
      </div>
    </q-linear-progress>

    <div class="q-gutter-sm">
      <q-carousel
        ref="carousel"
        v-model="slidestep"
        transition-prev="slide-right"
        transition-next="slide-left"
        swipeable
        animated
        control-color="white"
        padding
        arrows
        height="250px"
        class="bg-blue text-white shadow-1 rounded-borders"
      >
        <q-carousel-slide
          v-for="(recstep, index) in arrStep"
          :key="index"
          :name="recstep.step"
          class="column no-wrap flex-center"
        >
          <q-icon :name="recstep.icon" size="36px" />
          <div class="q-mt-sm text-center"></div>
          <div v-if="recstep.step === '1'" class="q-mt-sm text-center">
            <CMySelectCity
              :label="$t('reg.resid_province')"
              table="users"
              jointable="provinces"
              v-model="contact.profile.resid_province"
              myclass="selectorwide"
              :db_type="costanti.FieldType.string"
              db_field="profile"
              db_subfield="resid_province"
              :db_id="contact._id"
              :db_rec="contact"
            >
            </CMySelectCity>
          </div>
        </q-carousel-slide>

        <template v-slot:control>
          <q-carousel-control
            position="bottom-right"
            :offset="[18, 18]"
            class="q-gutter-xs"
          >
            <q-btn
              v-if="slidestep !== '1'"
              push
              icon="arrow_left"
              :label="$t('dialog.indietro')"
              @click="$refs.carousel.previous()"
            />
            <q-btn
              v-if="slidestep !== '4'"
              push
              icon="arrow_right"
              :label="$t('dialog.avanti')"
              :disabled="checkifDisabled"
              @click="!checkifDisabled ? $refs.carousel.next() : null"
            />
          </q-carousel-control>
        </template>
      </q-carousel>
      <div class="row justify-center">
        <q-btn-toggle
          glossy
          v-model="slidestep"
          :options="[
            { label: '1', value: '1' },
            { label: 2, value: '2' },
            { label: 3, value: '3' },
            { label: 4, value: '4' },
          ]"
        />
      </div>
    </div>
  </div>
  <q-dialog v-model="showAccountInfo" full-height full-width>
    <q-card v-if="true">
      <q-toolbar class="bg-primary text-white">
        <q-toolbar-title class="text-h7">
          {{ tools.getNomeUtenteByRecUser(contact) }}
        </q-toolbar-title>
        <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
      </q-toolbar>
    </q-card>
  </q-dialog>
</template>

<script lang="ts" src="./CMyProfileTutorial.ts">
</script>

<style lang="scss" scoped>
@import './CMyProfileTutorial.scss';
</style>
