<div class="container">
  <div class="row">
    <div class="content-block">
      <form #newUserForm="ngForm">
        <h2 class="title">新增使用者</h2>

        <div class="form-group">
          <label for="account">帳號</label>
          <span *ngIf="(account.invalid && (account.dirty || account.touched))">
            <span class="invalidMessage" *ngIf="account?.errors.required">*此欄必填</span>
            <span class="invalidMessage" *ngIf="account?.errors.minlength">*帳號長度最少五碼</span>
          </span>
          <span class="invalidMessage" *ngIf="isAccountExisted">*帳號已存在</span>
          <span class="validMessage" *ngIf="!isAccountExisted && !account.invalid">*此帳號可用</span>
          <input type="text" class="form-control" id="account" name="account" (keyup)="checkUserNameExist()" [(ngModel)]="userData.Account"
            #account="ngModel" required minlength="5" placeholder="帳號">
        </div>

        <div class="form-group">
          <label for="userName">使用者名稱</label>
          <span *ngIf="userName.invalid && (userName.dirty || userName.touched)">
            <span class="invalidMessage" *ngIf="userName?.errors.required">*此欄必填</span>
          </span>
          <input type="text" class="form-control" id="userName" name="userName" [(ngModel)]="userData.UserName" #userName="ngModel"
            required placeholder="使用者名稱">
        </div>
        <div class="form-group">
          <label for="email">使用者信箱</label>
          <span *ngIf="email.invalid && (email.dirty || email.touched)">
            <span class="invalidMessage" *ngIf="email?.errors.required">*此欄必填</span>
            <span class="invalidMessage" *ngIf="email?.errors.pattern">*請輸入正確信箱格式</span>
          </span>
          <input type="email" class="form-control" id="email" name="email" [(ngModel)]="userData.Email" #email="ngModel" required pattern="[^ @]*@[^ @]*"
            placeholder="使用者信箱">
        </div>
        <div class="form-group">
          <label for="phoneNum">使用者電話</label>
          <span *ngIf="phoneNum.invalid && (phoneNum.dirty || phoneNum.touched)">
            <span class="invalidMessage" *ngIf="phoneNum?.errors.required">*此欄必填</span>
          </span>
          <input type="tel" class="form-control" id="phoneNum" name="phoneNum" [(ngModel)]="userData.PhoneNumber" #phoneNum="ngModel"
            required placeholder="使用者電話">
        </div>
        <div class="form-group">
          <label for="group">所屬分局</label>
          <span *ngIf="groupCodeId.invalid && (groupCodeId.dirty || groupCodeId.touched)">
            <span class="invalidMessage" *ngIf="groupCodeId?.errors.required">*請選擇使用者所屬分局</span>
          </span>
          <select class="form-control" id="GroupCodeId" name="GroupCodeId" [(ngModel)]="userData.GroupCode_Id" #groupCodeId="ngModel"
            required>
            <option value="">請選擇分局</option>
            <option *ngFor="let group of selectGroup" [value]="group.Id">{{group.StationName}}</option>
          </select>
        </div>
        <div class="form-group">
          <label for="role">所屬權限</label>
          <span *ngIf="roleCodeId.invalid && (roleCodeId.dirty || roleCodeId.touched)">
            <span class="invalidMessage" *ngIf="roleCodeId?.errors.required">*請選擇使用者帳號權限</span>
          </span>
          <select class="form-control" id="RoleCodeId" name="RoleCodeId" [(ngModel)]="userData.RoleCode_Id" #roleCodeId="ngModel" required>
            <option value="">請選擇權限</option>
            <option *ngFor="let role of selectRole" [value]="role.Id">{{role.RoleName}}</option>
          </select>
        </div>
        <div class="form-group">
          <div class="card" *ngFor="let area of newAreaList">
            <div class="card-header">
              {{area.Area}}
              <input class="check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" name="flexCheckDefault{{area.Area}}" id="flexCheckDefault{{area.Area}}" [(ngModel)]="area.IsChecked" (change)="selectAllSiteInformation(area)">
                    <label class="check-label" for="flexCheckDefault{{area.Area}}">
                      全選
                    </label>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-3" *ngFor="let siteInformation of siteInformationList | filter : area.Area : 'Area'">
                    <input class="check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" name="flexCheckDefault{{siteInformation.Id}}" id="flexCheckDefault{{siteInformation.Id}}" [(ngModel)]="siteInformation.IsChecked" value={{siteInformation.Id}} (click)="selectSiteInformation(siteInformation.Id)">
                    <label class="check-label" for="flexCheckDefault{{siteInformation.Id}}">
                      {{siteInformation.SiteName}}
                    </label>
                  </div>
                  </div>
              </div>
            </div>
          </div>

        <div class="btn-footer">
          <button type="submit" class="btn btn-danger" (click)="backPreviousPage()">
            <i class=" fa fa-chevron-left " aria-hidden="true "></i> 回上一頁
          </button>
          <button type="submit" class="btn btn-success" [disabled]="!newUserForm.form.valid || isAccountExisted" (click)="createNewUser()">送出
            <i class=" fa fa-chevron-right " aria-hidden="true "></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
