<template>
  <div>
    <div class="d-flex justify-content-center">
      <div class="col-md-8">
        <h2 id="profile-title">
          <span v-html="t$('profile.title')"></span>
        </h2>

        <div class="alert alert-success" role="alert" v-if="success">
          {{ t$('profile.messages.success') }}
        </div>

        <div class="alert alert-danger" role="alert" v-if="error">
          {{ t$('profile.messages.error') }}
        </div>

        <div v-if="loading" class="text-center">
          <div class="spinner-border" role="status">
            <span class="visually-hidden">{{ t$('profile.messages.loading') }}</span>
          </div>
        </div>

        <form name="form" id="profile-form" @submit.prevent="save()" v-if="!loading && utenteApp" novalidate>
          <!-- Section 1: Personal Information -->
          <div class="mb-4">
            <h4>{{ t$('profile.sections.personal') }}</h4>

            <div class="mb-3">
              <label class="form-control-label" for="username">{{ t$('profile.form.username') }}</label>
              <input
                type="text"
                class="form-control"
                id="username"
                name="username"
                v-model="utenteApp.username"
                disabled
                data-cy="username"
              />
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="email">{{ t$('profile.form.email') }}</label>
              <input type="email" class="form-control" id="email" name="email" v-model="utenteApp.email" disabled data-cy="email" />
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="nome"> {{ t$('profile.form.nome') }} <span class="text-danger">*</span> </label>
              <input
                type="text"
                class="form-control"
                id="nome"
                name="nome"
                :class="{ 'is-valid': !v$.utenteApp.nome.$invalid, 'is-invalid': v$.utenteApp.nome.$invalid }"
                v-model="v$.utenteApp.nome.$model"
                required
                data-cy="nome"
              />
              <div v-if="v$.utenteApp.nome.$anyDirty && v$.utenteApp.nome.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.nome.required.$invalid">
                  {{ t$('profile.messages.validate.nome.required') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.nome.minLength.$invalid">
                  {{ t$('profile.messages.validate.nome.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.nome.maxLength.$invalid">
                  {{ t$('profile.messages.validate.nome.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="cognome"> {{ t$('profile.form.cognome') }} <span class="text-danger">*</span> </label>
              <input
                type="text"
                class="form-control"
                id="cognome"
                name="cognome"
                :class="{ 'is-valid': !v$.utenteApp.cognome.$invalid, 'is-invalid': v$.utenteApp.cognome.$invalid }"
                v-model="v$.utenteApp.cognome.$model"
                required
                data-cy="cognome"
              />
              <div v-if="v$.utenteApp.cognome.$anyDirty && v$.utenteApp.cognome.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.cognome.required.$invalid">
                  {{ t$('profile.messages.validate.cognome.required') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.cognome.minLength.$invalid">
                  {{ t$('profile.messages.validate.cognome.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.cognome.maxLength.$invalid">
                  {{ t$('profile.messages.validate.cognome.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="dataNascita">
                {{ t$('profile.form.dataNascita') }} <span class="text-danger">*</span>
              </label>
              <input
                type="date"
                class="form-control"
                id="dataNascita"
                name="dataNascita"
                :class="{ 'is-valid': !v$.utenteApp.dataNascita.$invalid, 'is-invalid': v$.utenteApp.dataNascita.$invalid }"
                v-model="v$.utenteApp.dataNascita.$model"
                required
                data-cy="dataNascita"
              />
              <div v-if="v$.utenteApp.dataNascita.$anyDirty && v$.utenteApp.dataNascita.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.dataNascita.required.$invalid">
                  {{ t$('profile.messages.validate.dataNascita.required') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="luogoNascita">
                {{ t$('profile.form.luogoNascita') }} <span class="text-danger">*</span>
              </label>
              <input
                type="text"
                class="form-control"
                id="luogoNascita"
                name="luogoNascita"
                :class="{ 'is-valid': !v$.utenteApp.luogoNascita.$invalid, 'is-invalid': v$.utenteApp.luogoNascita.$invalid }"
                v-model="v$.utenteApp.luogoNascita.$model"
                required
                data-cy="luogoNascita"
              />
              <div v-if="v$.utenteApp.luogoNascita.$anyDirty && v$.utenteApp.luogoNascita.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.luogoNascita.required.$invalid">
                  {{ t$('profile.messages.validate.luogoNascita.required') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.luogoNascita.minLength.$invalid">
                  {{ t$('profile.messages.validate.luogoNascita.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.luogoNascita.maxLength.$invalid">
                  {{ t$('profile.messages.validate.luogoNascita.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="residente">
                {{ t$('profile.form.residente') }} <span class="text-danger">*</span>
              </label>
              <input
                type="text"
                class="form-control"
                id="residente"
                name="residente"
                :class="{ 'is-valid': !v$.utenteApp.residente.$invalid, 'is-invalid': v$.utenteApp.residente.$invalid }"
                v-model="v$.utenteApp.residente.$model"
                required
                data-cy="residente"
              />
              <div v-if="v$.utenteApp.residente.$anyDirty && v$.utenteApp.residente.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.residente.required.$invalid">
                  {{ t$('profile.messages.validate.residente.required') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.residente.minLength.$invalid">
                  {{ t$('profile.messages.validate.residente.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.residente.maxLength.$invalid">
                  {{ t$('profile.messages.validate.residente.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="telefono">
                {{ t$('profile.form.telefono') }} <span class="text-danger">*</span>
              </label>
              <input
                type="tel"
                class="form-control"
                id="telefono"
                name="telefono"
                :class="{ 'is-valid': !v$.utenteApp.telefono.$invalid, 'is-invalid': v$.utenteApp.telefono.$invalid }"
                v-model="v$.utenteApp.telefono.$model"
                required
                data-cy="telefono"
              />
              <div v-if="v$.utenteApp.telefono.$anyDirty && v$.utenteApp.telefono.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.telefono.required.$invalid">
                  {{ t$('profile.messages.validate.telefono.required') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.telefono.minLength.$invalid">
                  {{ t$('profile.messages.validate.telefono.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.telefono.maxLength.$invalid">
                  {{ t$('profile.messages.validate.telefono.maxlength') }}
                </small>
              </div>
            </div>
          </div>

          <!-- Section 2: Company/Organization Information (Optional) -->
          <div class="mb-4">
            <h4>{{ t$('profile.sections.company') }}</h4>
            <p class="text-muted">{{ t$('profile.sections.companyDescription') }}</p>

            <div class="mb-3">
              <label class="form-control-label" for="societa">{{ t$('profile.form.societa') }}</label>
              <input
                type="text"
                class="form-control"
                id="societa"
                name="societa"
                :class="{ 'is-valid': !v$.utenteApp.societa.$invalid, 'is-invalid': v$.utenteApp.societa.$invalid }"
                v-model="v$.utenteApp.societa.$model"
                data-cy="societa"
              />
              <div v-if="v$.utenteApp.societa.$anyDirty && v$.utenteApp.societa.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.societa.maxLength.$invalid">
                  {{ t$('profile.messages.validate.societa.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="sede">{{ t$('profile.form.sede') }}</label>
              <input
                type="text"
                class="form-control"
                id="sede"
                name="sede"
                :class="{ 'is-valid': !v$.utenteApp.sede.$invalid, 'is-invalid': v$.utenteApp.sede.$invalid }"
                v-model="v$.utenteApp.sede.$model"
                data-cy="sede"
              />
              <div v-if="v$.utenteApp.sede.$anyDirty && v$.utenteApp.sede.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.sede.maxLength.$invalid">
                  {{ t$('profile.messages.validate.sede.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="codfiscale">{{ t$('profile.form.codfiscale') }}</label>
              <input
                type="text"
                class="form-control"
                id="codfiscale"
                name="codfiscale"
                :class="{ 'is-valid': !v$.utenteApp.codfiscale.$invalid, 'is-invalid': v$.utenteApp.codfiscale.$invalid }"
                v-model="v$.utenteApp.codfiscale.$model"
                data-cy="codfiscale"
              />
              <div v-if="v$.utenteApp.codfiscale.$anyDirty && v$.utenteApp.codfiscale.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.codfiscale.minLength.$invalid">
                  {{ t$('profile.messages.validate.codfiscale.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.codfiscale.maxLength.$invalid">
                  {{ t$('profile.messages.validate.codfiscale.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="telefonoSoc">{{ t$('profile.form.telefonoSoc') }}</label>
              <input
                type="tel"
                class="form-control"
                id="telefonoSoc"
                name="telefonoSoc"
                :class="{ 'is-valid': !v$.utenteApp.telefonoSoc.$invalid, 'is-invalid': v$.utenteApp.telefonoSoc.$invalid }"
                v-model="v$.utenteApp.telefonoSoc.$model"
                data-cy="telefonoSoc"
              />
              <div v-if="v$.utenteApp.telefonoSoc.$anyDirty && v$.utenteApp.telefonoSoc.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.telefonoSoc.minLength.$invalid">
                  {{ t$('profile.messages.validate.telefonoSoc.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.telefonoSoc.maxLength.$invalid">
                  {{ t$('profile.messages.validate.telefonoSoc.maxlength') }}
                </small>
              </div>
            </div>

            <div class="mb-3">
              <label class="form-control-label" for="emailSoc">{{ t$('profile.form.emailSoc') }}</label>
              <input
                type="email"
                class="form-control"
                id="emailSoc"
                name="emailSoc"
                :class="{ 'is-valid': !v$.utenteApp.emailSoc.$invalid, 'is-invalid': v$.utenteApp.emailSoc.$invalid }"
                v-model="v$.utenteApp.emailSoc.$model"
                data-cy="emailSoc"
              />
              <div v-if="v$.utenteApp.emailSoc.$anyDirty && v$.utenteApp.emailSoc.$invalid">
                <small class="form-text text-danger" v-if="v$.utenteApp.emailSoc.email.$invalid">
                  {{ t$('profile.messages.validate.emailSoc.email') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.emailSoc.minLength.$invalid">
                  {{ t$('profile.messages.validate.emailSoc.minlength') }}
                </small>
                <small class="form-text text-danger" v-if="v$.utenteApp.emailSoc.maxLength.$invalid">
                  {{ t$('profile.messages.validate.emailSoc.maxlength') }}
                </small>
              </div>
            </div>
          </div>

          <button type="submit" :disabled="v$.utenteApp.$invalid" class="btn btn-primary" data-cy="submit">
            {{ t$('profile.form.button') }}
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./profile.component.ts"></script>
