<template>
  <div>
    <!-- ============================= ROLE_USER VIEW ============================= -->
    <template v-if="!isIncaricato">
      <h2 id="page-heading" data-cy="PrenotazioneHeading">
        <span id="prenotazione">{{ t$('smartbookingApp.prenotazione.home.title') }}</span>
        <div class="d-flex justify-content-end">
          <button class="btn btn-info me-2" @click="handleSyncList" :disabled="isFetching">
            <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
            <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
          </button>
          <router-link :to="{ name: 'PrenotazioneNuova' }" custom v-slot="{ navigate }">
            <button
              @click="navigate"
              id="jh-create-entity"
              data-cy="entityCreateButton"
              class="btn btn-primary jh-create-entity create-prenotazione"
            >
              <font-awesome-icon icon="plus"></font-awesome-icon>
              <span>{{ t$('smartbookingApp.prenotazione.home.createLabel') }}</span>
            </button>
          </router-link>
        </div>
      </h2>
      <br />
      <div class="alert alert-warning" v-if="!isFetching && prenotaziones?.length === 0">
        <span>{{ t$('smartbookingApp.prenotazione.home.notFound') }}</span>
      </div>
      <div class="table-responsive" v-if="prenotaziones?.length > 0">
        <table class="table table-striped" aria-describedby="prenotaziones">
          <thead>
            <tr>
              <th scope="col" @click="changeOrder('id')">
                <span>{{ t$('global.field.id') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'id'"></jhi-sort-indicator>
              </th>
              <th scope="col" @click="changeOrder('oraInizio')">
                <span>{{ t$('smartbookingApp.prenotazione.oraInizio') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraInizio'"></jhi-sort-indicator>
              </th>
              <th scope="col" @click="changeOrder('oraFine')">
                <span>{{ t$('smartbookingApp.prenotazione.oraFine') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'oraFine'"></jhi-sort-indicator>
              </th>
              <th scope="col" @click="changeOrder('stato')">
                <span>{{ t$('smartbookingApp.prenotazione.stato') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'stato'"></jhi-sort-indicator>
              </th>
              <th scope="col" @click="changeOrder('struttura.nome')">
                <span>{{ t$('smartbookingApp.prenotazione.struttura') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'struttura.nome'"></jhi-sort-indicator>
              </th>
              <th scope="col" @click="changeOrder('motivoEvento')">
                <span>{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</span>
                <jhi-sort-indicator :current-order="propOrder" :reverse="reverse" :field-name="'motivoEvento'"></jhi-sort-indicator>
              </th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prenotazione in prenotaziones" :key="prenotazione.id" data-cy="entityTable">
              <td>
                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
                  prenotazione.id
                }}</router-link>
              </td>
              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
              <td>
                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
              </td>
              <td>{{ prenotazione.motivoEvento }}</td>
              <td class="text-end">
                <div class="btn-group">
                  <router-link
                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
                    class="btn btn-info btn-sm details"
                    data-cy="entityDetailsButton"
                  >
                    <font-awesome-icon icon="eye"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
                  </router-link>
                  <!-- Show conferma link when conferma exists -->
                  <router-link
                    v-if="prenotazione.conferma"
                    :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }"
                    class="btn btn-secondary btn-sm"
                    data-cy="entityConfermaButton"
                  >
                    <font-awesome-icon icon="file-alt"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.viewConferma') }}</span>
                  </router-link>
                  <!-- Edit and Delete only when no conferma -->
                  <template v-if="!prenotazione.conferma">
                    <router-link
                      :to="{ name: 'PrenotazioneEdit', params: { prenotazioneId: prenotazione.id } }"
                      class="btn btn-primary btn-sm edit"
                      data-cy="entityEditButton"
                    >
                      <font-awesome-icon icon="pencil-alt"></font-awesome-icon>
                      <span class="d-none d-md-inline">{{ t$('entity.action.edit') }}</span>
                    </router-link>
                    <b-button
                      @click="prepareRemove(prenotazione)"
                      variant="danger"
                      class="btn btn-sm"
                      data-cy="entityDeleteButton"
                      v-b-modal.removeEntity
                    >
                      <font-awesome-icon icon="times"></font-awesome-icon>
                      <span class="d-none d-md-inline">{{ t$('entity.action.delete') }}</span>
                    </b-button>
                  </template>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <b-modal ref="removeEntity" id="removeEntity">
        <template #title>
          <span id="smartbookingApp.prenotazione.delete.question" data-cy="prenotazioneDeleteDialogHeading">{{
            t$('entity.delete.title')
          }}</span>
        </template>
        <div class="modal-body">
          <p id="jhi-delete-prenotazione-heading">{{ t$('smartbookingApp.prenotazione.delete.question', { id: removeId }) }}</p>
        </div>
        <template #footer>
          <div>
            <button type="button" class="btn btn-secondary" @click="closeDialog()">{{ t$('entity.action.cancel') }}</button>
            <button
              type="button"
              class="btn btn-primary"
              id="jhi-confirm-delete-prenotazione"
              data-cy="entityConfirmDeleteButton"
              @click="removePrenotazione"
            >
              {{ t$('entity.action.delete') }}
            </button>
          </div>
        </template>
      </b-modal>
      <div v-show="prenotaziones?.length > 0">
        <div class="d-flex justify-content-center">
          <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
        </div>
        <div class="d-flex justify-content-center">
          <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
        </div>
      </div>
    </template>

    <!-- ============================= ROLE_INCARICATO VIEW ============================= -->
    <template v-if="isIncaricato">
      <h2 id="page-heading" data-cy="PrenotazioneHeading">
        <span>{{ t$('smartbookingApp.prenotazione.home.titleIncaricato') }}</span>
        <div class="d-flex justify-content-end">
          <button class="btn btn-info" @click="handleSyncList" :disabled="isFetching">
            <font-awesome-icon icon="sync" :spin="isFetching"></font-awesome-icon>
            <span>{{ t$('smartbookingApp.prenotazione.home.refreshListLabel') }}</span>
          </button>
        </div>
      </h2>
      <br />

      <!-- Table 1: Pending (no conferma) -->
      <h4>{{ t$('smartbookingApp.prenotazione.pendenti.title') }}</h4>
      <div class="alert alert-warning" v-if="!isFetching && prenotazioniPendenti.length === 0">
        <span>{{ t$('smartbookingApp.prenotazione.pendenti.notFound') }}</span>
      </div>
      <div class="table-responsive" v-if="prenotazioniPendenti.length > 0">
        <table class="table table-striped" aria-describedby="prenotazioni-pendenti">
          <thead>
            <tr>
              <th scope="col">{{ t$('global.field.id') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraInizio') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraFine') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.stato') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.utente') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.struttura') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.motivoEvento') }}</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prenotazione in prenotazioniPendenti" :key="prenotazione.id" data-cy="entityTablePendenti">
              <td>
                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
                  prenotazione.id
                }}</router-link>
              </td>
              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
              <td>
                <div v-if="prenotazione.utente">{{ prenotazione.utente.username }}</div>
              </td>
              <td>
                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
              </td>
              <td>{{ prenotazione.motivoEvento }}</td>
              <td class="text-end">
                <div class="btn-group">
                  <router-link
                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
                    class="btn btn-info btn-sm details"
                    data-cy="entityDetailsButton"
                  >
                    <font-awesome-icon icon="eye"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
                  </router-link>
                  <button
                    class="btn btn-success btn-sm"
                    data-cy="prendiInCaricoButton"
                    @click="prendiInCarico(prenotazione)"
                  >
                    <font-awesome-icon icon="check"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.prendiInCarico.button') }}</span>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <br />

      <!-- Table 2: Completed (with conferma) -->
      <h4>{{ t$('smartbookingApp.prenotazione.completate.title') }}</h4>
      <div class="alert alert-warning" v-if="!isFetching && prenotazioniCompletate.length === 0">
        <span>{{ t$('smartbookingApp.prenotazione.completate.notFound') }}</span>
      </div>
      <div class="table-responsive" v-if="prenotazioniCompletate.length > 0">
        <table class="table table-striped" aria-describedby="prenotazioni-completate">
          <thead>
            <tr>
              <th scope="col">{{ t$('global.field.id') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraInizio') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.oraFine') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.stato') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.utente') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.struttura') }}</th>
              <th scope="col">{{ t$('smartbookingApp.prenotazione.conferma') }}</th>
              <th scope="col"></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="prenotazione in prenotazioniCompletate" :key="prenotazione.id" data-cy="entityTableCompletate">
              <td>
                <router-link :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }">{{
                  prenotazione.id
                }}</router-link>
              </td>
              <td>{{ formatDateShort(prenotazione.oraInizio) || '' }}</td>
              <td>{{ formatDateShort(prenotazione.oraFine) || '' }}</td>
              <td>{{ t$('smartbookingApp.StatoPrenotazione.' + prenotazione.stato) }}</td>
              <td>
                <div v-if="prenotazione.utente">{{ prenotazione.utente.username }}</div>
              </td>
              <td>
                <div v-if="prenotazione.struttura">{{ prenotazione.struttura.nome }}</div>
              </td>
              <td>
                <span class="badge bg-success">
                  {{ t$('smartbookingApp.TipoConferma.' + prenotazione.conferma?.tipoConferma) }}
                </span>
              </td>
              <td class="text-end">
                <div class="btn-group">
                  <router-link
                    :to="{ name: 'PrenotazioneView', params: { prenotazioneId: prenotazione.id } }"
                    class="btn btn-info btn-sm details"
                    data-cy="entityDetailsButton"
                  >
                    <font-awesome-icon icon="eye"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('entity.action.view') }}</span>
                  </router-link>
                  <router-link
                    :to="{ name: 'ConfermaView', params: { confermaId: prenotazione.conferma.id } }"
                    class="btn btn-secondary btn-sm"
                    data-cy="entityConfermaButton"
                  >
                    <font-awesome-icon icon="file-alt"></font-awesome-icon>
                    <span class="d-none d-md-inline">{{ t$('smartbookingApp.prenotazione.viewConferma') }}</span>
                  </router-link>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- Pagination (shared) -->
      <div v-show="prenotaziones?.length > 0">
        <div class="d-flex justify-content-center">
          <jhi-item-count :page="page" :total="queryCount" :items-per-page="itemsPerPage"></jhi-item-count>
        </div>
        <div class="d-flex justify-content-center">
          <b-pagination size="md" :total-rows="totalItems" v-model="page" :per-page="itemsPerPage"></b-pagination>
        </div>
      </div>

      <!-- "Prendi in carico" modal -->
      <b-modal v-model="showPrendiInCaricoModal" :title="t$('smartbookingApp.prenotazione.prendiInCarico.title')" @hidden="closePrendiInCaricoModal">
        <div v-if="selectedPrenotazione">
          <p class="text-muted mb-3">
            {{ t$('smartbookingApp.prenotazione.prendiInCarico.subtitle', { id: selectedPrenotazione.id }) }}
          </p>
          <div class="mb-3">
            <label for="tipoConfermaSelect" class="form-label fw-bold">
              {{ t$('smartbookingApp.conferma.tipoConferma') }} <span class="text-danger">*</span>
            </label>
            <select id="tipoConfermaSelect" class="form-select" v-model="confermaForm.tipoConferma">
              <option value="">{{ t$('smartbookingApp.prenotazione.prendiInCarico.selectTipo') }}</option>
              <option value="CONFERMATA">{{ t$('smartbookingApp.TipoConferma.CONFERMATA') }}</option>
              <option value="RIFIUTATA">{{ t$('smartbookingApp.TipoConferma.RIFIUTATA') }}</option>
            </select>
          </div>
          <div class="mb-3">
            <label for="motivoConfermaInput" class="form-label fw-bold">
              {{ t$('smartbookingApp.conferma.motivoConferma') }}
            </label>
            <textarea
              id="motivoConfermaInput"
              class="form-control"
              rows="4"
              v-model="confermaForm.motivoConferma"
              :placeholder="t$('smartbookingApp.prenotazione.prendiInCarico.motivoPlaceholder')"
            ></textarea>
          </div>
        </div>
        <template #footer>
          <button type="button" class="btn btn-secondary" @click="closePrendiInCaricoModal">
            {{ t$('entity.action.cancel') }}
          </button>
          <button
            type="button"
            class="btn btn-primary"
            :disabled="!confermaForm.tipoConferma || isSubmittingConferma"
            @click="submitConferma"
          >
            <span v-if="isSubmittingConferma">
              <b-spinner small></b-spinner>
            </span>
            {{ t$('smartbookingApp.prenotazione.prendiInCarico.submit') }}
          </button>
        </template>
      </b-modal>
    </template>
  </div>
</template>

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