<div class="container mt-3 pb-5">
  <h2 class="text-center">Dessert Storm</h2>

  <div class="d-flex justify-content-center">
    <div class="alert alert-secondary w-auto text-center" role="alert">
      Current week <span class="fw-bold text-primary">{{currentDate | week}}</span>
    </div>
  </div>

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

  @if (isCreateDessertStorm) {
    <form [formGroup]="desertStormForm" (ngSubmit)="onSubmit()">
      <div class="form-floating mb-3 is-invalid">
        <input type="date" class="form-control" id="eventDate" placeholder="eventDate" formControlName="eventDate">
        <label for="eventDate">Event date</label>
      </div>

      <div class="form-floating mb-3 is-invalid">
        <input [ngClass]="{
        'is-invalid': f['opponentName'].invalid && (f['opponentName'].dirty || !f['opponentName'].untouched),
        'is-valid': f['opponentName'].valid}"
               type="text" class="form-control" id="opponentName" placeholder="opponentName" formControlName="opponentName">
        <label for="opponentName">Opponent name</label>
        @if (f['opponentName'].invalid && (f['opponentName'].dirty || !f['opponentName'].untouched)) {
          <div class="invalid-feedback">
            @if (f['opponentName'].hasError('required')) {
              <p>Opponent name is required</p>
            }
          </div>
        }
      </div>

      <div class="form-floating mb-3 is-invalid">
        <input [ngClass]="{
        'is-invalid': f['opponentServer'].invalid && (f['opponentServer'].dirty || !f['opponentServer'].untouched),
        'is-valid': f['opponentServer'].valid}"
               type="number" class="form-control" id="opponentServer" placeholder="opponentServer" formControlName="opponentServer">
        <label for="opponentServer">opponentServer</label>
        @if (f['opponentServer'].invalid && (f['opponentServer'].dirty || !f['opponentServer'].untouched)) {
          <div class="invalid-feedback">
            @if (f['opponentServer'].hasError('required')) {
              <p>opponentServer is required</p>
            }
          </div>
        }
      </div>

      <div class="form-floating mb-3 is-invalid">
        <input [ngClass]="{
        'is-invalid': f['OpposingParticipants'].invalid && (f['OpposingParticipants'].dirty || !f['OpposingParticipants'].untouched),
        'is-valid': f['OpposingParticipants'].valid}"
               type="number" class="form-control" id="OpposingParticipants" placeholder="OpposingParticipants" formControlName="OpposingParticipants">
        <label for="OpposingParticipants">OpposingParticipants</label>
        @if (f['OpposingParticipants'].invalid && (f['OpposingParticipants'].dirty || !f['OpposingParticipants'].untouched)) {
          <div class="invalid-feedback">
            @if (f['opponentPower'].hasError('required')) {
              <p>OpposingParticipants is required</p>
            }
          </div>
        }
      </div>

      <div class="form-floating mb-3 is-invalid">
        <select class="form-select" formControlName="team" id="team">
          <option [ngValue]="'A'">Team A</option>
          <option [ngValue]="'B'">Team B</option>
        </select>
        <label for="team">Team</label>
      </div>

      @if (f['isInProgress'].value === false) {
        <div class="form-check mb-3">
          <input class="form-check-input" type="checkbox" formControlName="won" id="won">
          <label class="form-check-label" for="won">
            Won
          </label>
        </div>
      }


      <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>

      @if (desertStormPlayers.length <= 0) {
        <div class="d-flex justify-content-center">
          <p class="text-warning">Please add participants</p>
        </div>
      } @else {
        <div class="d-flex justify-content-center">
          <p><span class="fw-bold text-warning">{{selectedPlayers}}</span> player(s) selected</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()" class="btn btn-warning" type="button">Cancel</button>
        <button [disabled]="desertStormForm.invalid || desertStormPlayers.length <= 0" class="btn btn-success" type="submit">{{isUpdate ? 'Update' : 'Create'}}</button>
      </div>
    </form>
  }

  @if(!isCreateDessertStorm) {
    @if (desertStorms.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">Opponent name</th>
            <th scope="col">Opponent server</th>
            <th scope="col">Opposing participants</th>
            <th scope="col">Allianz participants</th>
            <th scope="col">Team</th>
            <th scope="col">Won</th>
            <th scope="col">Action</th>
          </tr>
          </thead>
          <tbody>
            @for (desertStorm of desertStorms | paginate: { id: 'desertStormTable', itemsPerPage: pageSize, totalItems: totalRecord, currentPage: pageNumber}; track desertStorm.id) {
              <tr>
                <td>{{desertStorm.eventDate | date: 'dd.MM.yyyy'}}</td>
                <td>{{desertStorm.opponentName}}</td>
                <td>{{desertStorm.opponentServer}}</td>
                <td>{{desertStorm.opposingParticipants}}</td>
                <td>{{desertStorm.participants}}</td>
                <td>{{desertStorm.team}}</td>
                <td>
                  @if (desertStorm.isInProgress) {
                    <i class="bi bi-hourglass-split"></i> In Progress
                  } @else {
                    <i class="bi " [ngClass]="desertStorm.won ? 'bi-check-lg text-success' : 'bi-x-lg text-danger'"></i>
                  }
                </td>
                <td>
                  <div class="d-flex gap-3 justify-content-around">
                    <i ngbTooltip="Show details" placement="auto" (click)="onDesertStormDetail(desertStorm)" class="bi custom-info-icon bi-info-circle-fill"></i>
                    <i ngbTooltip="Edit" placement="auto" (click)="onEditDesertStorm(desertStorm)" class="bi custom-edit-icon bi-pencil-fill"></i>
                    <i ngbTooltip="Delete" placement="auto" (click)="onDeleteDesertStorm(desertStorm)" 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]="'desertStormTable'" [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 Desert storm events
      </div>
    }
  }
</div>
