@if (!isCreateCustomEvent) {
  <div class="d-grid gap-2 col-6 mx-auto">
    <button (click)="onCreateEvent()" class="btn btn-primary" type="button">Create new Event</button>
  </div>
}

@if (isCreateCustomEvent) {
  <form [formGroup]="customEventForm">
    <!--      Event date-->
    <div class="form-floating mb-3 is-invalid">
      <input [ngClass]="{
        'is-invalid': f['eventDate'].invalid && (f['eventDate'].dirty || !f['eventDate'].untouched),
        'is-valid': f['eventDate'].valid}"
             type="date" class="form-control" id="eventDate" placeholder="eventDate" formControlName="eventDate">
      <label for="eventDate">Event date</label>
      @if (f['eventDate'].invalid && (f['eventDate'].dirty || !f['eventDate'].untouched)) {
        <div class="invalid-feedback">
          @if (f['eventDate'].hasError('required')) {
            <p>eventDate is required</p>
          }
        </div>
      }
    </div>
    <!--      Event name-->
    <div class="form-floating mb-3 is-invalid">
      <input [ngClass]="{
        'is-invalid': f['name'].invalid && (f['name'].dirty || !f['name'].untouched),
        'is-valid': f['name'].valid}"
             type="text" class="form-control" maxlength="151" id="name" placeholder="name" formControlName="name">
      <label for="name">Event name</label>
      @if (f['name'].invalid && (f['name'].dirty || !f['name'].untouched)) {
        <div class="invalid-feedback">
          @if (f['name'].hasError('required')) {
            <p>Name is required</p>
          }
          @if (f['name'].hasError('maxlength')) {
            <p>Maximum 150 characters allowed</p>
          }
        </div>
      }
    </div>
    <!--      Description-->
    <div class="form-floating mb-3">
          <textarea [ngClass]="{
          'is-valid': f['description'].valid,
          'is-invalid': f['description'].invalid && (!f['description'].untouched || f['description'].dirty)
          }" class="form-control" maxlength="501" formControlName="description" placeholder="description" id="description" style="height: 100px"></textarea>
      <label for="description">description</label>
      @if (f['description'].invalid && (!f['description'].untouched || f['description'].dirty)) {
        <div class="invalid-feedback">
          @if (f['description'].hasError('required')) {
            <p>Description is required</p>
          }
          @if (f['description'].hasError('maxlength')) {
            <p>Maximum 500 characters allowed</p>
          }
        </div>
      }
    </div>
    <!--      Category-->
    <div class="form-floating mb-3" (change)="onCategoryChange()">
      <select class="form-select" id="customEventCategoryId"  formControlName="customEventCategoryId">
        <option [ngValue]="null">No Category</option>
        @for (customEventCategory of customEventCategories; track customEventCategory.id) {
          <option [ngValue]="customEventCategory.id">{{customEventCategory.name}}</option>
        }
      </select>
      <label for="customEventCategoryId">Category</label>
    </div>
    <!--      In progress-->
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" formControlName="isInProgress" id="isInProgress">
      <label class="form-check-label" for="isInProgress">
        In Progress
      </label>
    </div>
    <!--      Is point event-->
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" formControlName="isPointsEvent" id="isPointsEvent">
      <label class="form-check-label" for="isPointsEvent">
        Points Event
      </label>
    </div>
    <!--      Is participation event-->
    <div class="form-check mb-3">
      <input class="form-check-input" type="checkbox" formControlName="isParticipationEvent" id="isParticipationEvent">
      <label class="form-check-label" for="isParticipationEvent">
        Participation Event
      </label>
    </div>


    @if (!playerSelected) {
      <div class="d-flex justify-content-center">
        <p class="text-warning">Please add participants</p>
      </div>
    }

    <div class="d-grid gap-2 col-6 mx-auto">
      <button (click)="onAddParticipants()" class="btn btn-primary" type="button">{{isUpdate ? 'Update Participants' : 'Add Participants'}}</button>
    </div>
    <div class="d-flex justify-content-between">
      <button (click)="onCancel()" type="button" class="btn btn-warning">Cancel</button>
      <button [disabled]="customEventForm.invalid || playerParticipated.length <= 0" (click)="onSubmit()" type="submit" class="btn btn-success">{{isUpdate ? 'Update': 'Create'}}</button>
    </div>
  </form>
}

@if (!isCreateCustomEvent) {
  @if (customEvents.length > 0) {
    <div class="table-responsive mt-5">
      <table class="table table-striped table-bordered">
        <thead>
        <tr>
          <th scope="col">Event Date</th>
          <th scope="col">Name</th>
          <th scope="col">Category</th>
          <th scope="col">Point event</th>
          <th scope="col">Participation event</th>
          <th scope="col">Status</th>
          <th scope="col">Creator</th>
          <th scope="col">Action</th>
        </tr>
        </thead>
        <tbody>
          @for (customEvent of customEvents | paginate: { id: 'customEventTable', itemsPerPage: pageSize, totalItems: totalRecord, currentPage: pageNumber}; track customEvent.id) {
            <tr>
              <td>{{customEvent.eventDate | date: 'dd.MM.yyyy'}}</td>
              <td>{{customEvent.name}}</td>
              <td>{{customEvent.categoryName ?? ' - '}}</td>
              <td>
                <i class="bi " [ngClass]="customEvent.isPointsEvent ? 'bi-check-lg text-success' : 'bi-x-lg text-danger'"></i>
              </td>
              <td>
                <i class="bi " [ngClass]="customEvent.isParticipationEvent ? 'bi-check-lg text-success' : 'bi-x-lg text-danger'"></i>
              </td>
              <td>
                @if (customEvent.isInProgress) {
                  <i class="bi bi-hourglass-split"></i> In Progress
                } @else {
                  Done
                }
              </td>
              <td>{{customEvent.createdBy}}</td>
              <td>
                <div class="d-flex gap-3 justify-content-around">
                  <i ngbTooltip="Show details" placement="auto" (click)="onGoToCustomEventDetail(customEvent)" class="bi custom-info-icon bi-info-circle-fill"></i>
                  <i ngbTooltip="Edit" placement="auto" (click)="onEditCustomEvent(customEvent)" class="bi custom-edit-icon bi-pencil-fill"></i>
                  <i ngbTooltip="Delete" placement="auto" (click)="onDeleteCustomEvent(customEvent)" class="bi custom-delete-icon bi-trash3"></i>
                </div>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <!-- Pagination Controls -->
    <div class="d-flex justify-content-between mt-3 flex-column flex-md-row">
      <pagination-controls class="custom-pagination" [id]="'customEventTable'" [responsive]="true" [autoHide]=" true"
                           (pageChange)="pageChanged($event)"></pagination-controls>

      <!-- Showing total results with improved styling -->
      <div class="align-self-center text-muted mt-2 mt-md-0">
        <small>
          Showing
          <strong>{{ (pageNumber - 1) * pageSize + 1 }} - {{ pageNumber * pageSize > totalRecord ? totalRecord : pageNumber * pageSize }}</strong>
          of <strong>{{ totalRecord }}</strong> results
        </small>
      </div>
    </div>
  } @else {
    <div class="alert alert-secondary text-center mt-5" role="alert">
      No saved custom events
    </div>
  }
}