<div class="addDepartment-w">

    
  <div class="container">
      <div class="row">
        <div class="col-12">
          <ul class="list-unstyled titileLi-w">
            <li class="headingText-w"> خدمه  السكن </li>
            <li class="headingText-w activeLi-w" style="margin-right:5px;cursor: pointer;" (click)="authSer.backFromEdit()">ربط السكن بالعهد</li>
            <li class="headingText-w activeLi-w" style="margin-right:5px"> {{typePage}} </li>
          </ul>
        </div>
      </div>

    <div class="containerContent-w">
        <form (ngSubmit)="onSubmitted()" #f="ngForm" style="margin-top: 40px;">
            <div class="row">

            <div class="col-12 col-sm-12 col-md-4" >
                <div class="form-group">
                  <label style="float: right; margin-right: 5px"> اسم المجمع </label>
                  <select class="form-control" name="housing_complex_id" [(ngModel)]="formData.housing_complex_id"  (input)="getBuildingType($event.target.value)" required>
                    <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
                  </select>
                </div>
              </div>
              <div class="col-12 col-sm-12 col-md-4" *ngIf="isComplex ">
                  <div class="form-group">
                    <label style="float: right; margin-right: 5px">نوع المبنى</label>
                    <select class="form-control" name="building_type_id" [(ngModel)]="formData.building_type_id" (input)="getBuilding($event.target.value)" required>
                      <option *ngFor="let type of building_types" [value]="type.id" >{{type.name}}</option>
                    </select>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4" *ngIf="isBuildingType">
                  <div class="form-group">
                      <label style="float: right; margin-right: 5px">اسم المبنى </label>
                      <select class="form-control" name="building_id" [(ngModel)]="formData.building_id " (input)="getUnit($event.target.value)" required>
                        <option *ngFor="let building of buildings" [value]="building.id" >{{building.building_name}}</option>
                      </select>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-4"  *ngIf="isBuilding">
                  <div class="form-group">
                      <label style="float: right; margin-right: 5px">رقم الوحدة </label>
                      <select class="form-control" name="unit_id" [(ngModel)]="formData.unit_id " (input)="showcovenant_categories()"   required>
                        <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
                      </select>
                  </div>
                </div>
             </div>
            <div class="row" *ngIf="isConvenat"> 
             <div class="col-12 col-sm-12 col-md-4">
              <div class="form-group">
                <label style="float: right; margin-right: 5px"> تصنيف العهدة </label>
                <select class="form-control" name="category_id" [(ngModel)]="categoryId" (input)="covenant($event.target.value)" required>
                  <option *ngFor="let unit of covenant_categories" [value]="unit.id" >{{unit.name}}</option>
                </select>
              </div>
            </div>   
          </div>
          <div class="row" *ngIf="isConvenat">
            <div class="col-12 col-sm-12 col-md-4">
              <div class="category-amount">
                <div class=row>
                  <div  *ngFor="let category of formData.covenants">
                    <div *ngFor="let category_conv of category.covenants_data let i = index">
                      <div>
                          <div class="col-6"  *ngIf="categoryId == category_conv.category_id">
                              <div class=form-group>
                                <div class="custom-control custom-checkbox centerIneerItem">
                                  <input type="checkbox" class="custom-control-input checkboxx" id="{{category_conv.id}}" [(ngModel)]="category_conv.selected" [value]='category_conv.id' name="{{category_conv.id}}" style="cursor: pointer;" (change)="checked($event.target.value)">
                                  <label class="custom-control-label disblayBlock-w" for="{{category_conv.id}}" style="color:#2a2a2a; cursor:pointer; padding: 0 20px; margin: -3px 5px">{{category_conv.name}}</label>
                                </div>
                              </div>
                            </div> 
                            <div class="col-6"  *ngIf="categoryId == category_conv.category_id ">
                              <div class="form-group">
                                <input type="number" class="form-control" placeholer="amount" min="1" max="{{category_conv.available_amount}}"  [(ngModel)]="category_conv.covenant_amount"  [ngModelOptions]="{standalone: true}"  (input)="check_max(category_conv.covenant_amount, category_conv.available_amount, category_conv.name)" />
                              </div>
                            </div>
                      </div>
                        
                    </div>
                    
                  </div>
                </div>
              </div>
            </div>
          </div>
            
             <div class=" row col-12">
              <button type="submit" class="btn btn-success rightW" [disabled]="!f.valid">حفظ</button>
              <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()">إلغاء</button>
             </div>
            </form>
          </div>
      </div>
  </div>  


               
              
            
                
                   
               
                    
                      
                        
                       
    

    