<template>
  <div>
    <!-- Header -->
    <h2>
      <span>{{ t$('smartbookingApp.struttura.disponibilitaConfig.title') }}</span>
    </h2>

    <!-- Loading state -->
    <div v-if="isLoading" class="text-center">
      <b-spinner></b-spinner>
    </div>

    <div v-else>
      <!-- Struttura Details Section (read-only) -->
      <div class="card mb-3">
        <div class="card-header">
          <h5>{{ t$('smartbookingApp.struttura.disponibilitaConfig.strutturaDetails') }}</h5>
        </div>
        <div class="card-body">
          <dl class="row">
            <dt class="col-sm-3">{{ t$('smartbookingApp.struttura.nome') }}</dt>
            <dd class="col-sm-9">{{ struttura.nome }}</dd>

            <dt class="col-sm-3">{{ t$('smartbookingApp.struttura.descrizione') }}</dt>
            <dd class="col-sm-9">{{ struttura.descrizione }}</dd>

            <dt class="col-sm-3">{{ t$('smartbookingApp.struttura.indirizzo') }}</dt>
            <dd class="col-sm-9">{{ struttura.indirizzo }}</dd>

            <dt class="col-sm-3">{{ t$('smartbookingApp.struttura.capienzaMax') }}</dt>
            <dd class="col-sm-9">{{ struttura.capienzaMax }}</dd>

            <dt class="col-sm-3">{{ t$('smartbookingApp.struttura.attiva') }}</dt>
            <dd class="col-sm-9">{{ struttura.attiva }}</dd>
          </dl>
        </div>
      </div>

      <!-- Add Disponibilita Form -->
      <div class="card mb-3">
        <div class="card-header">
          <h5>{{ t$('smartbookingApp.struttura.disponibilitaConfig.addDisponibilita') }}</h5>
        </div>
        <div class="card-body">
          <form @submit.prevent="save">
            <!-- Section 1: Tipo Disponibilita -->
            <div class="mb-3">
              <label for="tipo">{{ t$('smartbookingApp.disponibilita.tipo') }}</label>
              <select
                id="tipo"
                v-model="v$.tipo.$model"
                class="form-control"
                :class="{ valid: !v$.tipo.$invalid, invalid: v$.tipo.$invalid }"
              >
                <option v-for="tipo in tipoDisponibilitaValues" :key="tipo" :value="tipo">
                  {{ t$('smartbookingApp.TipoDisponibilita.' + tipo) }}
                </option>
              </select>
            </div>

            <!-- Section 2: Time Range (String fields) -->
            <div class="row mb-3">
              <div class="col-md-6">
                <label for="orarioInizio">{{ t$('smartbookingApp.disponibilita.orarioInizio') }}</label>
                <input
                  id="orarioInizio"
                  type="time"
                  v-model="v$.orarioInizio.$model"
                  class="form-control"
                  :class="{ valid: !v$.orarioInizio.$invalid, invalid: v$.orarioInizio.$invalid }"
                />
              </div>
              <div class="col-md-6">
                <label for="orarioFine">{{ t$('smartbookingApp.disponibilita.orarioFine') }}</label>
                <input
                  id="orarioFine"
                  type="time"
                  v-model="v$.orarioFine.$model"
                  class="form-control"
                  :class="{ valid: !v$.orarioFine.$invalid, invalid: v$.orarioFine.$invalid }"
                />
              </div>
            </div>

            <!-- Section 3: Data Specifica -->
            <div class="mb-3">
              <label for="dataSpecifica">{{ t$('smartbookingApp.disponibilita.dataSpecifica') }}</label>
              <input
                id="dataSpecifica"
                type="date"
                v-model="v$.dataSpecifica.$model"
                class="form-control"
                :class="{ valid: !v$.dataSpecifica.$invalid, invalid: v$.dataSpecifica.$invalid }"
              />
              <small class="form-text text-muted">
                {{ t$('smartbookingApp.disponibilita.help.dataSpecificaOrGiorno') }}
              </small>
            </div>

            <!-- Section 4: Giorno Settimana -->
            <div class="mb-3">
              <label for="giornoSettimana">{{ t$('smartbookingApp.disponibilita.giornoSettimana') }}</label>
              <select id="giornoSettimana" v-model="v$.giornoSettimana.$model" class="form-control">
                <option :value="null">{{ t$('smartbookingApp.disponibilita.selectGiorno') }}</option>
                <option v-for="giorno in giornoSettimanaValues" :key="giorno" :value="giorno">
                  {{ t$('smartbookingApp.GiornoSettimana.' + giorno) }}
                </option>
              </select>
            </div>

            <!-- Section 5: Note -->
            <div class="mb-3">
              <label for="note">{{ t$('smartbookingApp.disponibilita.note') }}</label>
              <textarea id="note" v-model="v$.note.$model" class="form-control" rows="3"></textarea>
            </div>

            <!-- Buttons -->
            <div class="d-flex justify-content-end">
              <button type="button" class="btn btn-secondary me-2" @click="cancel">
                {{ t$('entity.action.cancel') }}
              </button>
              <button type="submit" class="btn btn-primary" :disabled="v$.$invalid || isSaving">
                {{ t$('smartbookingApp.disponibilita.insertButton') }}
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Existing Disponibilita List -->
      <div class="card">
        <div class="card-header">
          <h5>{{ t$('smartbookingApp.struttura.disponibilitaConfig.existingDisponibilita') }}</h5>
        </div>
        <div class="card-body">
          <div v-if="disponibilitas.length === 0" class="alert alert-warning">
            {{ t$('smartbookingApp.struttura.disponibilitaConfig.noDisponibilita') }}
          </div>
          <table v-else class="table table-striped">
            <thead>
              <tr>
                <th>{{ t$('smartbookingApp.disponibilita.tipo') }}</th>
                <th>{{ t$('smartbookingApp.disponibilita.orarioInizio') }}</th>
                <th>{{ t$('smartbookingApp.disponibilita.orarioFine') }}</th>
                <th>{{ t$('smartbookingApp.disponibilita.dataSpecifica') }}</th>
                <th>{{ t$('smartbookingApp.disponibilita.giornoSettimana') }}</th>
                <th>{{ t$('smartbookingApp.disponibilita.note') }}</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="disp in disponibilitas" :key="disp.id">
                <td>{{ t$('smartbookingApp.TipoDisponibilita.' + disp.tipo) }}</td>
                <td>{{ disp.orarioInizio }}</td>
                <td>{{ disp.orarioFine }}</td>
                <td>{{ disp.dataSpecifica }}</td>
                <td>{{ disp.giornoSettimana ? t$('smartbookingApp.GiornoSettimana.' + disp.giornoSettimana) : '' }}</td>
                <td>{{ disp.note }}</td>
                <td>
                  <button class="btn btn-danger btn-sm" @click="deleteDisponibilita(disp.id)">
                    <font-awesome-icon icon="times"></font-awesome-icon>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./struttura-disponibilita-config.component.ts"></script>
