<template>
  <div class="d-flex justify-content-center">
    <div class="col-10">
      <h2 id="page-heading" data-cy="PrenotazioneFormUserHeading">
        <span>{{ t$('smartbookingApp.prenotazione.userForm.title') }}</span>
      </h2>

      <div v-if="isLoading" class="text-center my-5">
        <div class="spinner-border" role="status">
          <span class="visually-hidden">Loading...</span>
        </div>
      </div>

      <form v-else name="userBookingForm" novalidate @submit.prevent="save()">
        <!-- Booking Details Section -->
        <div class="card mb-4">
          <div class="card-header">
            <h4>{{ t$('smartbookingApp.prenotazione.userForm.bookingDetails') }}</h4>
          </div>
          <div class="card-body">
            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label" for="prenotazione-oraInizio">
                  {{ t$('smartbookingApp.prenotazione.oraInizio') }}
                </label>
                <input
                  id="prenotazione-oraInizio"
                  data-cy="oraInizio"
                  type="datetime-local"
                  class="form-control"
                  name="oraInizio"
                  :class="{ valid: !v$.oraInizio.$invalid, invalid: v$.oraInizio.$invalid }"
                  :value="convertDateTimeFromServer(v$.oraInizio.$model)"
                  @change="updateInstantField('oraInizio', $event)"
                />
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label" for="prenotazione-oraFine">
                  {{ t$('smartbookingApp.prenotazione.oraFine') }}
                </label>
                <input
                  id="prenotazione-oraFine"
                  data-cy="oraFine"
                  type="datetime-local"
                  class="form-control"
                  name="oraFine"
                  :class="{ valid: !v$.oraFine.$invalid, invalid: v$.oraFine.$invalid }"
                  :value="convertDateTimeFromServer(v$.oraFine.$model)"
                  @change="updateInstantField('oraFine', $event)"
                />
              </div>
            </div>

            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label" for="prenotazione-struttura">
                  {{ t$('smartbookingApp.prenotazione.struttura') }} <span class="text-danger">*</span>
                </label>
                <select
                  class="form-control"
                  id="prenotazione-struttura"
                  data-cy="struttura"
                  name="struttura"
                  v-model="prenotazione.struttura"
                  :class="{ valid: !v$.struttura.$invalid, invalid: v$.struttura.$invalid }"
                >
                  <option :value="null">{{ t$('global.item.select') }}</option>
                  <option :value="strutturaOption" v-for="strutturaOption in strutturas" :key="strutturaOption.id">
                    {{ strutturaOption.nome }}
                  </option>
                </select>
                <div v-if="v$.struttura.$invalid && v$.struttura.$dirty" class="invalid-feedback d-block">
                  {{ t$('entity.validation.required') }}
                </div>
              </div>

              <div class="col-md-6 mb-3">
                <label class="form-label" for="prenotazione-stato">
                  {{ t$('smartbookingApp.prenotazione.stato') }}
                </label>
                <select class="form-control" name="stato" id="prenotazione-stato" data-cy="stato" v-model="v$.stato.$model" disabled>
                  <option value="RICHIESTA">
                    {{ t$('smartbookingApp.StatoPrenotazione.RICHIESTA') }}
                  </option>
                </select>
              </div>
            </div>

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

            <div class="row">
              <div class="col-md-6 mb-3">
                <label class="form-label" for="prenotazione-numeroPartecipanti">
                  {{ t$('smartbookingApp.prenotazione.numeroPartecipanti') }}
                </label>
                <input
                  type="number"
                  class="form-control"
                  name="numeroPartecipanti"
                  id="prenotazione-numeroPartecipanti"
                  data-cy="numeroPartecipanti"
                  v-model.number="v$.numeroPartecipanti.$model"
                />
              </div>
            </div>

            <div class="mb-3">
              <label class="form-label" for="prenotazione-noteUtente">
                {{ t$('smartbookingApp.prenotazione.noteUtente') }}
              </label>
              <textarea
                class="form-control"
                name="noteUtente"
                id="prenotazione-noteUtente"
                data-cy="noteUtente"
                rows="3"
                v-model="v$.noteUtente.$model"
              ></textarea>
            </div>
          </div>
        </div>

        <!-- User Data Section -->
        <div class="card mb-4" v-if="currentUser">
          <div class="card-header">
            <h4>{{ t$('smartbookingApp.prenotazione.userForm.userData') }}</h4>
          </div>
          <div class="card-body">
            <!-- Personal Data -->
            <div class="mb-4">
              <h5 class="mb-3">{{ t$('smartbookingApp.prenotazione.userForm.personalData') }}</h5>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.nome') }}:</strong>
                  {{ currentUser.nome || '-' }}
                </div>
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.cognome') }}:</strong>
                  {{ currentUser.cognome || '-' }}
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.luogoNascita') }}:</strong>
                  {{ currentUser.luogoNascita || '-' }}
                </div>
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.dataNascita') }}:</strong>
                  {{ currentUser.dataNascita || '-' }}
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.residente') }}:</strong>
                  {{ currentUser.residente || '-' }}
                </div>
              </div>
            </div>

            <!-- User Type Radio Buttons -->
            <div class="mb-3">
              <label class="form-label">{{ t$('smartbookingApp.prenotazione.userForm.userType') }}</label>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="userType" id="userTypePrivato" value="privato" v-model="userType" />
                <label class="form-check-label" for="userTypePrivato">
                  {{ t$('smartbookingApp.prenotazione.userForm.privato') }}
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="userType" id="userTypeSocieta" value="societa" v-model="userType" />
                <label class="form-check-label" for="userTypeSocieta">
                  {{ t$('smartbookingApp.prenotazione.userForm.societa') }}
                </label>
              </div>
            </div>

            <!-- Company Data (conditional) -->
            <div v-if="userType === 'societa'" class="mt-4">
              <h5 class="mb-3">{{ t$('smartbookingApp.prenotazione.userForm.companyData') }}</h5>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.societa') }}:</strong>
                  {{ currentUser.societa || '-' }}
                </div>
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.sede') }}:</strong>
                  {{ currentUser.sede || '-' }}
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.codfiscale') }}:</strong>
                  {{ currentUser.codfiscale || '-' }}
                </div>
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.telefonoSoc') }}:</strong>
                  {{ currentUser.telefonoSoc || '-' }}
                </div>
              </div>
              <div class="row">
                <div class="col-md-6 mb-2">
                  <strong>{{ t$('smartbookingApp.utenteApp.emailSoc') }}:</strong>
                  {{ currentUser.emailSoc || '-' }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Liberatorie Section -->
        <div class="card mb-4" v-if="prenotazione.struttura">
          <div class="card-header">
            <h4>{{ t$('smartbookingApp.prenotazione.userForm.liberatorie') }}</h4>
          </div>
          <div class="card-body">
            <div v-if="isLoadingLiberatorie" class="text-center">
              <div class="spinner-border spinner-border-sm" role="status">
                <span class="visually-hidden">Loading...</span>
              </div>
            </div>

            <div v-else-if="liberatorieStatus.length === 0" class="alert alert-info">
              {{ t$('smartbookingApp.prenotazione.userForm.noLiberatorieRequired') }}
            </div>

            <div v-else class="list-group">
              <div
                v-for="item in liberatorieStatus"
                :key="item.modello.id"
                class="list-group-item d-flex justify-content-between align-items-center"
              >
                <div>
                  <span v-if="item.isAccepted" class="badge bg-success me-2">
                    <font-awesome-icon icon="check"></font-awesome-icon>
                  </span>
                  <span v-else class="badge bg-warning me-2">
                    <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon>
                  </span>

                  <span v-if="item.isAccepted">
                    {{ item.modello.nome }}
                  </span>
                  <a v-else href="javascript:void(0)" @click="showLiberatoriaModal(item.modello)">
                    {{ item.modello.nome }}
                  </a>
                </div>

                <span v-if="item.isAccepted" class="text-muted small">
                  {{ t$('smartbookingApp.liberatoria.accettata') }}:
                  {{ new Date(item.liberatoria.accettata).toLocaleDateString('it-IT') }}
                </span>
              </div>
            </div>

            <div v-if="!allLiberatorieAccepted" class="alert alert-warning mt-3 mb-0">
              <font-awesome-icon icon="exclamation-triangle"></font-awesome-icon>
              {{ t$('smartbookingApp.prenotazione.userForm.liberatorieWarning') }}
            </div>
          </div>
        </div>

        <!-- Action Buttons -->
        <div class="d-flex justify-content-between">
          <button type="button" class="btn btn-secondary" @click="resetForm()" :disabled="isSaving">
            <font-awesome-icon icon="undo"></font-awesome-icon>&nbsp;
            <span>{{ t$('smartbookingApp.prenotazione.userForm.reset') }}</span>
          </button>
          <button type="submit" class="btn btn-primary" :disabled="v$.$invalid || isSaving || !allLiberatorieAccepted">
            <font-awesome-icon icon="save"></font-awesome-icon>&nbsp;
            <span>{{ t$('smartbookingApp.prenotazione.userForm.submit') }}</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- Liberatoria Acceptance Modal -->
  <b-modal ref="liberatoriaModal" size="lg" @hidden="closeLiberatoriaModal">
    <template #title>
      <h4>{{ selectedModello?.nome }}</h4>
    </template>

    <div v-if="selectedModello">
      <!-- Modello Text -->
      <div v-if="selectedModello.testo" class="mb-3">
        <h5>{{ t$('smartbookingApp.modelloLiberatoria.testo') }}</h5>
        <div class="border p-3 bg-light" style="white-space: pre-wrap">
          {{ selectedModello.testo }}
        </div>
      </div>

      <!-- Modello Document -->
      <div v-if="selectedModello.documento" class="mb-3">
        <h5>{{ t$('smartbookingApp.modelloLiberatoria.documento') }}</h5>
        <a
          :href="'data:' + selectedModello.documentoContentType + ';base64,' + selectedModello.documento"
          :download="selectedModello.nome + '.pdf'"
          class="btn btn-sm btn-outline-primary"
        >
          <font-awesome-icon icon="download"></font-awesome-icon>
          {{ t$('smartbookingApp.modelloLiberatoria.download') }}
        </a>
      </div>

      <!-- Acceptance Statement -->
      <div class="alert alert-info mt-4">
        <strong>{{ t$('smartbookingApp.prenotazione.userForm.acceptanceStatement') }}</strong>
        <p class="mb-0 mt-2">
          Il sottoscritto <strong>{{ currentUser?.nome }} {{ currentUser?.cognome }}</strong>
          presa visione della documentazione proposta accetta le condizioni ivi indicate.
        </p>
      </div>
    </div>

    <template #footer>
      <button type="button" class="btn btn-secondary" @click="closeLiberatoriaModal" :disabled="isSaving">
        {{ t$('entity.action.cancel') }}
      </button>
      <button type="button" class="btn btn-primary" @click="acceptLiberatoria" :disabled="isSaving">
        <font-awesome-icon icon="check"></font-awesome-icon>
        {{ t$('smartbookingApp.prenotazione.userForm.accept') }}
      </button>
    </template>
  </b-modal>
</template>
<script lang="ts" src="./prenotazione-form-user.component.ts"></script>
