<form [formGroup]="accessLogForm">
  <ngx-spinner bdColor = "rgba(0,0,0,0.8)" color="#fff" size="default" type="ball-spin-clockwise" [fullScreen]="true">
    <p style="color:white;">Working on your request, please wait.... </p>
  </ngx-spinner>

  <div class="mb-1 row">
    <div class="col-lg-2 col-md-2 col-sm-12">
      <span class="required">Access Type:</span>
      <br />
      <kendo-dropdownlist [data]="accessTypes"
                          id="accessType"
                          formControlName="accessType"
                          [textField]="'value'"
                          [valueField]="'id'"
                          [valuePrimitive]="true"
                          (valueChange)="clearData()"
                          [ngClass]="{ 'k-invalid': submitted && f.accessType.errors }">
      </kendo-dropdownlist>
      @if(submitted && f.accessType.errors)
      {
      <div class="invalid-feedback">
        <div>Access Type is required.</div>
      </div>
      }
    </div>

    <div class="col-lg-2 col-md-3 col-sm-12">
      <span>Login ID:</span>
      <br />
      <input type="text" placeholder="Login ID" id="loginId" formControlName="loginId" maxlength="50" (change)="clearData()" class="form-control form-control-sm" [ngClass]="{ 'is-invalid': submitted && f.loginId.errors }">
      @if(submitted && f.loginId.errors)
      {
      <div class="invalid-feedback">
        @if(f.loginId.errors.required)
        {
        <span>Login Id is required.</span>
        }
        @if(f.loginId.errors.pattern)
        {
        <span>Login Id is invalid format.</span>
        }
        @if(f.loginId.errors.minlength)
        {
        <span>Minimum length of Login Id is {{f.loginId.errors.minlength.requiredLength}}</span>
        }
      </div>
      }
    </div>

    <div class="col-lg-6 col-md-7 col-sm-12">
      <label for="startDate" class="label-top-align-nomargin">
        <span class="required">Start Date:</span>
        <br />
        <kendo-datepicker id="startDate" name="startDate" formControlName="startDate" [format]="'dd/MM/yyyy'" (valueChange)="clearData()" [ngClass]="{'k-invalid': submitted && f.startDate.errors}"></kendo-datepicker>
        @if(submitted && f.startDate.errors)
        {
        <span class="invalid-feedback">
          Start Date is required.
        </span>
        }
      </label>
      <label for="endDate" class="label-top-align-nomargin">
        <span class="required">End Date:</span>
        <br />
        <kendo-datepicker id="endDate" name="endDate" formControlName="endDate" [format]="'dd/MM/yyyy'" (valueChange)="clearData()" [ngClass]="{'k-invalid': submitted && f.endDate.errors}"></kendo-datepicker>
        @if(submitted && f.endDate.errors)
        {
        <span class="invalid-feedback">
          End Date is required.
        </span>
        }
      </label>
    </div>
  </div>

  <div class="mb-3">
    <button (click)="loadData()" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only">
      <span class="ui-button-text-only ui-c"><i class="fa fa-refresh button-refresh" aria-hidden="true"></i>&nbsp;&nbsp;Load Data</span>
    </button>
  </div>

  <div class="mb-2">
    <span>Existing Data:</span>
    <br />
    <kendo-grid [data]="gridView"
                [selectable]="true"
                [skip]="state.skip"
                [sort]="state.sort"
                [resizable]="true"
                [pageSize]="state.take"
                [groupable]="canEdit"
                [group]="state.group"
                [sortable]="{allowUnsort:true,mode:'single'}"
                [pageable]="{buttonCount:5,info:true,type:type,pageSizes:pageSizes,previousNext:true}"
                (dataStateChange)="dataStateChange($event)"
                class="grid-font-900">
        <kendo-grid-column field="loginId" title="Login ID" [width]="200" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'left'}"></kendo-grid-column>
        <kendo-grid-column field="loginTime" title="Login/Tried Time" [width]="150" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'center'}">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem.loginTime|date:'dd-MMM-yyyy H:mm:ss'}}
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="loginIp" title="Login/Tried Ip Address" [width]="170" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'center'}"></kendo-grid-column>
        <kendo-grid-column field="logoutTime" [width]="150" title="Logout Time" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'center'}">
            <ng-template kendoGridCellTemplate let-dataItem>
                {{dataItem.logoutTime|date:'dd-MMM-yyyy H:mm:ss'}}
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column field="logoutIp" title="Logout Ip Address" [width]="150" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'center'}"></kendo-grid-column>
        <kendo-grid-column field="loginStatus" title="Login Status" [width]="remainingWidth" [headerStyle]="{'font-weight':'bold'}" [style]="{'text-align':'left'}"></kendo-grid-column>
    </kendo-grid>
  </div>
</form>
