<template>
  <div class="row justify-content-center">
    <div class="col-12">
      <div v-if="event">
        <!--        <h2 class="jh-entity-heading" data-cy="eventDetailsHeading"><span>Event</span> {{ event.id }}</h2>-->
        <dl class="row jh-entity-details">
          <dt>
            <span>Nazwa</span>
          </dt>
          <dd>
            <span>{{ event.name }}</span>
          </dd>
          <dt>
            <span>Data</span>
          </dt>
          <dd>
            <span>{{ event.date }}</span>
          </dd>
          <dt>
            <span>Limit graczy</span>
          </dt>
          <dd>
            <span>{{ event.playersLimit }}</span>
          </dd>
          <dt>
            <span>Koszt do podziału</span>
          </dt>
          <dd>
            <span>{{ event.cost }}</span>
          </dd>
          <dt>
            <span>Komentarz</span>
          </dt>
          <dd>
            <span>{{ event.comment }}</span>
          </dd>
        </dl>
        <router-link
          :to="{ name: 'RegistrationCreateForEvent', params: { eventId: event.id } }"
          custom
          v-slot="{ navigate }"
          v-if="event.active"
        >
          <button @click="navigate" class="btn btn-primary">
            <font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Dołącz do wydarzenia</span>
          </button>
        </router-link>
        <!--        <router-link-->
        <!--          :to="{ name: 'TransactionFieldPayment', params: { paymentForFieldByEventId: event.id } }"-->
        <!--          custom-->
        <!--          v-slot="{ navigate }"-->
        <!--          v-if="hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])"-->
        <!--        >-->
        <!--          <button @click="navigate" class="btn btn-primary">-->
        <!--            <font-awesome-icon icon="plus"></font-awesome-icon>&nbsp;<span>Opłać boisko</span>-->
        <!--          </button>-->
        <!--        </router-link>-->

        <div class="table-responsive" v-if="event.registrations && event.registrations.length > 0">
          <table class="table table-striped" aria-describedby="event.registrations">
            <thead>
              <tr>
                <th scope="col"><span>#</span></th>
                <th scope="col"><span>Czas zapisu</span></th>
                <th scope="col"><span>Gracz</span></th>
                <th scope="col"><span>Komentarz</span></th>
                <!--                <th scope="col"><span>Active</span></th>-->
                <th scope="col"></th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(registration, index) in sortedAndIndexedRegistrations" :key="registration.id" data-cy="entityTable">
                <td>
                  <!-- Display row number or empty if not active -->
                  {{ getRegistrationIndex(index) }}
                </td>
                <td>
                  <span :class="{ strikethrough: registration.active === false }">{{ formatDateShort(registration.dateTime) || '' }}</span>
                </td>
                <td>
                  <span :class="{ strikethrough: registration.active === false }">{{ registration.playerName }}</span>
                  <b-button
                    @click="prepareRemove(registration)"
                    variant="danger"
                    class="btn btn-sm"
                    data-cy="entityDeleteButton"
                    v-if="
                      ((registration.id && registration.user?.id == currentUserId && isCurrentEvent) ||
                        hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])) &&
                      registration.active !== false &&
                      (event.active || (event.editable && hasAnyAuthority(['ROLE_COUNTER'])) || hasAnyAuthority(['ROLE_ADMIN']))
                    "
                    v-b-modal.removeEntity
                  >
                    <font-awesome-icon icon="times"></font-awesome-icon>
                    <span class="d-none d-md-inline">Delete</span>
                  </b-button>
                </td>
                <td>{{ registration.comment }}</td>
                <!--                <td>{{ registration.active }}</td>-->

                <td class="text-right">
                  <div class="btn-group">
                    <router-link
                      :to="{ name: 'RegistrationView', params: { registrationId: registration.id } }"
                      custom
                      v-slot="{ navigate }"
                    >
                      <button @click="navigate" 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">View</span>
                      </button>
                    </router-link>
                    <!--                                      <b-button-->
                    <!--                                        @click="prepareRemove(registration)"-->
                    <!--                                        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">Delete</span>-->
                    <!--                                      </b-button>-->
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <b-modal ref="removeEntity" id="removeEntity">
          <template #modal-title>
            <span id="sasiedziApp.registration.delete.question" data-cy="registrationDeleteDialogHeading">Confirm delete operation</span>
          </template>
          <div class="modal-body">
            <p id="jhi-delete-registration-heading">Are you sure you want to delete Registration {{ removeId }}?</p>
          </div>
          <template #modal-footer>
            <div>
              <button type="button" class="btn btn-secondary" @click="closeDialog()">Cancel</button>
              <button
                type="button"
                class="btn btn-primary"
                id="jhi-confirm-delete-registration"
                data-cy="entityConfirmDeleteButton"
                @click="removeRegistration()"
              >
                Delete
              </button>
            </div>
          </template>
        </b-modal>

        <!--        <button type="submit" @click.prevent="previousState()" class="btn btn-info" data-cy="entityDetailsBackButton">-->
        <!--          <font-awesome-icon icon="arrow-left"></font-awesome-icon>&nbsp;<span>Back</span>-->
        <!--        </button>-->
        <!--        <router-link v-if="event.id" :to="{ name: 'EventEdit', params: { eventId: event.id } }" custom v-slot="{ navigate }">-->
        <!--          <button @click="navigate" class="btn btn-primary">-->
        <!--            <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Edit</span>-->
        <!--          </button>-->
        <!--        </router-link>-->
      </div>
    </div>
  </div>

  <button
    class="btn btn-primary float-right"
    v-if="(event.editable && hasAnyAuthority(['ROLE_COUNTER'])) || hasAnyAuthority(['ROLE_ADMIN'])"
    @click="settle()"
  >
    <font-awesome-icon icon="sync"></font-awesome-icon> <span v-if="!event.charged">Rozlicz wydarzenie</span
    ><span v-if="event.charged">Przelicz ponownie zobowiązania</span>
  </button>
  <router-link
    v-if="event.id && event.paid == false"
    :to="{ name: 'TransactionFieldPayment', params: { paymentForFieldByEventId: event.id } }"
    custom
    v-slot="{ navigate }"
    ><!-- <router-link
          v-if="transaction.id"
          :to="{ name: 'TransactionCreateOpposite', params: { opposingTransactionId: transaction.id } }"
          custom
          v-slot="{ navigate }"
        >-->
    <button @click="navigate" class="btn btn-primary" v-if="hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])">
      <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Dodaj płatność za boisko</span>
    </button>
  </router-link>

  <router-link
    v-if="event.charged && event.editable"
    :to="{ name: 'TransactionPaymentsForTransaction', params: { paymentsForTransactionId: event.chargeTransactionId } }"
    custom
    v-slot="{ navigate }"
    ><!-- <router-link
          v-if="transaction.id"
          :to="{ name: 'TransactionCreateOpposite', params: { opposingTransactionId: transaction.id } }"
          custom
          v-slot="{ navigate }"
        >-->
    <button @click="navigate" class="btn btn-primary" v-if="hasAnyAuthority(['ROLE_ADMIN', 'ROLE_COUNTER'])">
      <font-awesome-icon icon="pencil-alt"></font-awesome-icon>&nbsp;<span>Dodaj wpłaty na konto</span>
    </button>
  </router-link>
  <div class="table-responsive" v-if="event.transactions && event.transactions.length > 0">
    Rozliczenie:
    <table class="table table-striped" aria-describedby="transactions">
      <thead>
        <tr>
          <!--            <th/>-->
          <!--            <th/>-->
          <!--            <th/>-->
          <th />
        </tr>
      </thead>
      <tbody>
        <tr v-for="transaction in event.transactions" :key="transaction.id" data-cy="entityTable">
          <td>
            <router-link :to="{ name: 'TransactionView', params: { transactionId: transaction.id } }"
              >{{ transaction.date }} {{ transaction.type }}
            </router-link>
            <div v-if="transaction.comment">{{ transaction.comment }}</div>
          </td>
          <!--            <td>{{ transaction.type }}</td>-->
          <!--            <td>{{ transaction.date }}</td>-->
          <!--            <td>{{ transaction.comment }}</td>-->
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" src="./event-details.component.ts"></script>
