<template>
  <div>
    <div class="text-center">
      <logo></logo>
      <CTitleBanner :title="$t('pages.SignUpArcadei')" :canopen="true" :visible="true">

        <div class="q-gutter-xs" v-if="signup">

          <!--<p class="q-ml-md text-center">
            Leggi
            <span class="underline"> <router-link to="/il-nostro-progetto" custom v-slot="{ navigate }">
            <span class="footer_link" @click="navigate" @keypress.enter="navigate" role="link">Il Nostro Progetto</span>
            </router-link></span>
          </p>-->

          <q-input
            v-model="signup.surname"
            rounded outlined
            @blur="v$.surname.$touch"
            :error="v$.surname.$error"
            maxlength="30"
            :error-message="errorMsg('surname', v$.surname)"
            :label="$t('reg.surname')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.name"
            rounded outlined
            @blur="v$.name.$touch"
            :error="v$.name.$error"
            maxlength="30"
            :error-message="errorMsg('name', v$.name)"
            :label="$t('reg.name')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.dateofbirth"
            debounce="1000"
            @blur="v$.dateofbirth.$touch"
            :error="v$.dateofbirth.$error"
            :error-message="errorMsg('dateofbirth', v$.dateofbirth)"
            stack-label
            :label="$t('reg.dateofbirth')"
            rounded
            type="date"
            mask="date"
            fill-mask
            outlined>
          </q-input>


          <q-input
            v-model="signup.born_country"
            rounded outlined
            @blur="v$.born_country.$touch"
            :error="v$.born_country.$error"
            maxlength="3"
            debounce="1000"
            :error-message="errorMsg('born_country', v$.born_country)"
            :label="$t('reg.born_country')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.born_city"
            rounded outlined
            @blur="v$.born_city.$touch"
            :error="v$.born_city.$error"
            maxlength="60"
            debounce="1000"
            :error-message="errorMsg('born_city', v$.born_city)"
            :label="$t('reg.born_city')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.born_province"
            rounded outlined
            @blur="v$.born_province.$touch"
            :error="v$.born_province.$error"
            maxlength="3"
            debounce="1000"
            :error-message="errorMsg('born_province', v$.born_province)"
            :label="$t('reg.born_province')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>



          <!--<q-input
            v-model="signup.fiscalcode"
            rounded outlined
            @blur="v$.fiscalcode.$touch"
            :error="v$.fiscalcode.$error"
            maxlength="20"
            mask="AAAAAA##A##A###A"
            debounce="1000"
            :error-message="errorMsg('fiscalcode', v$.fiscalcode)"
            :label="$t('reg.fiscalcode')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>-->

          <q-input
            v-model="signup.residency_address"
            rounded outlined
            @blur="v$.residency_address.$touch"
            :error="v$.residency_address.$error"
            maxlength="60"
            debounce="1000"
            :error-message="errorMsg('residency_address', v$.residency_address)"
            :label="$t('reg.residency_address')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.residency_city"
            rounded outlined
            @blur="v$.residency_city.$touch"
            :error="v$.residency_city.$error"
            maxlength="60"
            debounce="1000"
            :error-message="errorMsg('residency_city', v$.residency_city)"
            :label="$t('reg.residency_city')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.residency_province"
            rounded outlined
            @blur="v$.residency_province.$touch"
            :error="v$.residency_province.$error"
            maxlength="3"
            debounce="1000"
            :error-message="errorMsg('residency_province', v$.residency_province)"
            :label="$t('reg.residency_province')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.residency_zipcode"
            rounded outlined
            @blur="v$.residency_zipcode.$touch"
            :error="v$.residency_zipcode.$error"
            maxlength="10"
            debounce="1000"
            :error-message="errorMsg('residency_zipcode', v$.residency_zipcode)"
            :label="$t('reg.residency_zipcode')">

            <template v-slot:prepend>
              <q-icon name="person"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.cell_phone"
            @blur="v$.cell_phone.$touch"
            :error="v$.cell_phone.$error"
            :error-message="errorMsg('cell_phone', v$.cell_phone)"
            rounded outlined
            maxlength="20"
            debounce="1000"
            :label="$t('reg.phone')">

            <template v-slot:prepend>
              <q-icon name="fas fa-phone"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.cell_phone2"
            @blur="v$.cell_phone2.$touch"
            :error="v$.cell_phone2.$error"
            :error-message="errorMsg('cell_phone2', v$.cell_phone2)"
            rounded outlined
            maxlength="20"
            debounce="1000"
            :label="$t('reg.phone2')">

            <template v-slot:prepend>
              <q-icon name="fas fa-phone"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.email"
            rounded outlined
            @blur="v$.email.$touch"
            :error="v$.email.$error"
            :error-message="errorMsg('email', v$.email)"
            maxlength="50"
            debounce="1000"
            :label="$t('reg.email')">

            <template v-slot:prepend>
              <q-icon name="email"/>
            </template>

          </q-input>

          <q-input
            v-model="signup.email2"
            rounded outlined
            :error-message="errorMsg('email', v$.email2)"
            maxlength="50"
            debounce="1000"
            :label="$t('reg.email2')">

            <template v-slot:prepend>
              <q-icon name="email"/>
            </template>

          </q-input>

          <q-select
            rounded outlined v-model="signup.doctype"
            @blur="v$.doctype.$touch"
            :error="v$.doctype.$error"
            :error-message="errorMsg('doctype', v$.doctype)"

            :options="tools.SelectDocType"
            :label="$t('reg.doctype')" emit-value map-options>
          </q-select>

          <q-input
            v-model="signup.documentnumber"
            rounded outlined
            maxlength="50"
            debounce="1000"
            :label="$t('reg.documentnumber')">

            <template v-slot:prepend>
              <q-icon name="fas fa-id-card"/>
            </template>

          </q-input>

          <br>

          <div v-if="pagetesti_iscriz" v-html="pagetesti_iscriz.content1"></div>
          <br>

          <q-select
            rounded outlined v-model="signup.quota_versata"
            @blur="v$.quota_versata.$touch"
            :error="v$.quota_versata.$error"
            :error-message="errorMsg('quota_versata', v$.quota_versata)"

            :options="tools.SelectQuotaVersata"
            :label="$t('reg.quota_versata')" emit-value map-options>
          </q-select>

          <br>

          <div v-if="pagetesti_iscriz" v-html="pagetesti_iscriz.content2"></div>

          <!--<CDate :mydate="signup.dateofbirth" @input="setDateOfBirth(arguments[0])"
                 :rounded="true" :outlined="true"
                 :dense="false"
                 :label="$t('reg.dateofbirth')">
          </CDate>-->

          <br>
          <!--<div v-if="!tools.isMobile()"><br></div>-->


          <q-select
            rounded outlined v-model="signup.metodo_pagamento"
            @blur="v$.metodo_pagamento.$touch"
            :error="v$.metodo_pagamento.$error"
            :error-message="errorMsg('metodo_pagamento', v$.metodo_pagamento)"
            :options="tools.SelectMetodiPagamento"
            :label="$t('reg.metodopagamento')" emit-value map-options>
          </q-select>

          <div class="text-weight-bold">
            I campi d'Intervento che risuonano maggiormente con le mie passioni e competenze sono i seguenti:
          </div>
          <br>
          <!--
          <CMySelect
            myclass="myflex" :label="$t('reg.cat_interesse')"
            v-model:value="signup.categorie_interesse"
            style="min-width: 300px;"
            :multiple="true"
            optval="value" optlab="label"
            :options="shared_consts.Cat_Interesse_Arcadei" :useinput="false">
          </CMySelect>-->

          <q-option-group
            :options="shared_consts.Cat_Interesse_Arcadei"
            type="checkbox"
            v-model="signup.categorie_interesse"
          />

          <br>
          <q-input
            v-model="signup.altre_comunicazioni"
            autofocus
            filled
            bordered
            color="blue-12"
            @keyup.enter.stop
            type="textarea"
            :label="$t('reg.riflessioni')"
          >
          </q-input>

          <q-checkbox
            v-model="signup.accetta_carta_costituzionale_on"
            color="secondary">
            <span v-html="$t('reg.acconsento')"></span>
          </q-checkbox>

          <q-checkbox
            v-model="signup.terms"
            color="secondary"
            @blur="v$.terms.$touch"
            :error="v$.terms.$error"
            :error-message="`${errorMsg('terms', v$.terms)}`"
            :label="$t('reg.terms')">

          </q-checkbox>


          <div class="wrapper">
            <q-btn rounded size="lg" color="positive" @click="submitOk" :disabled='!allowSubmit'
                   :label="$t('reg.iscriviti')">
            </q-btn>
          </div>

          <br>
        </div>
      </CTitleBanner>
      <br>
    </div>

  </div>
</template>

<script lang="ts" src="./CSignUpIscrizioneArcadei.ts">
</script>
<style lang="scss" scoped>
@import './CSignUpIscrizioneArcadei.scss';
</style>
