<div class="container">
  <div class="row">
    <div class="content-block">
      <form #editUserDataForm="ngForm">
        <h2 class="title">修改使用者資料</h2>
        <div class="form-group">
          <label for="account">帳號</label>
          <input type="text" class="form-control" id="account" name="account" [(ngModel)]="selectedUser.Account" readonly>
        </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" #userName="ngModel" required [(ngModel)]="selectedUser.UserName">
        </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" #email="ngModel" required pattern="[^ @]*@[^ @]*" [(ngModel)]="selectedUser.Email">
        </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" #phoneNum="ngModel" required [(ngModel)]="selectedUser.PhoneNumber">
        </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" placeholder="請選擇" [(ngModel)]="selectedUser.GroupCode_Id" name="GroupCodeId" #groupCodeId="ngModel"
            required>
            <option value="" disabled>請選擇分局</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" placeholder="請選擇" [(ngModel)]="selectedUser.RoleCode_Id" name="RoleCodeId" #roleCodeId="ngModel"
            required>
            <option value="" disabled>請選擇權限</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 areaArray">
            <div class="card-header">
              {{area}}
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-3" *ngFor="let siteInformation of siteInformationList | filter : area : 'Area'">
                    <input class="check-input" type="checkbox" style="width: 1.55rem; height: 1.55rem;" id="flexCheckDefault" [checked]=isChecked(siteInformation.SiteID) value={{siteInformation.Id}} (click)="selectSiteInformation(siteInformation)">
                    <label class="check-label" for="flexCheckDefault">
                      {{siteInformation.SiteName}}
                    </label>
                  </div>
                  </div>
              </div>
            </div>
          </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}}"  [(ngModel)]="siteInformation.IsChecked" id="flexCheckDefault{{siteInformation.Id}}" value={{siteInformation.Id}} (click)="selectSiteInformation(siteInformation)">
                    <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]="!editUserDataForm.form.valid" (click)="doEditUser()">送出
            <i class=" fa fa-chevron-right " aria-hidden="true "></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
