<div class="addRequest-w">
  <div class="container">

    <div class="row" style="margin-bottom:8px;">
      <div class="col-12">
        <ul class="list-unstyled titileLi-w">
          <li class="headingText-w" style="cursor: pointer;" (click)="authSer.perviousLocation()">خدمه السكن</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">  طلب سكن</li>
        </ul>
      </div>
    </div>

    <div class="contentBorder-w">

      <form #f="ngForm">
        <div class="row">
          <div class="col-12" >
            <h2 class="title" >بيانات صاحب الطلب</h2>
            <div class="row">
              <div class="col-12">
                <div class="wrapper">
                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="form-group">
                      <label  style="float: right;margin-right: 5px">رقم الهوية</label>
                      <input type="text" placeholder="رقم الهوية" class="form-control" name="id_number" [ngModel]="userData.identity_number" [disabled]="true" />
                    </div>
                  </div>
                  <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                    <div class="form-group">
                      <label for="name"  style="float: right;margin-right: 5px">الاسم</label>
                      <input type="text" placeholder="الاسم" class="form-control" name="name" [ngModel]="userData.name" [disabled]="true" />
                    </div>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                        <div class="form-group">
                          <label  style="float: right;margin-right: 5px">رقم الوظيفي</label>
                          <input type="text" placeholder="" class="form-control" name="functional_number" [ngModel]="userData.functional_number" [disabled]="true" />
                        </div>
                      </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                        <label for="phoneNum"  style="float: right;margin-right: 5px"> الهاتف </label>
                        <input type="number" placeholNeedder=" الهاتف" class="form-control" name="phoneNum" [ngModel]="userData.phone" [disabled]="true" />
                      </div>  
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4">
                      <div class="form-group">
                          <label for="email"  style="float: right;margin-right: 5px">البريد الالكتروني</label>
                          <input type="email" placeholder="" class="form-control" name="email" [ngModel]="userData.email" [disabled]="true" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-12">
              <h2 class="title">المرفقات</h2>
              <div class="row">
                <div class="col-12">
                  <div class="wrapper"> 
                    <table class="table table-bordered">
                      <thead class="headBackground-w">
                        <tr>
                          <th> إسم المرفق</th>
                          <th>عرض الملف</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr style="text-align:center;" *ngFor="let file of files; let i = index">
                            <td><h3  class="form-control" >{{file.title}}</h3></td>
                            <td><a href="{{authSer.pathImg + file.nameFile}}" target="_blank"><i class="fas fa-download"></i></a></td>
                       </tr>
                          </tbody>
                        </table>
                      </div>
                      <div class="col-12" *ngIf="refusedCheak">
                      <h2 class="title" > سبب الرفض</h2>
                      <div class="row">
                        <div class="col-12">
                          <div class="wrapper">
                            <textarea name="refused_reason" id="refused_reason"  [(ngModel)]="formData.refused_reason" maxlength="250"  cols="110" rows="5" [disabled]="true"></textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12" *ngIf="waitingCheak">
                      <h2 class="title" > سبب الانتظار</h2>
                      <div class="row">
                        <div class="col-12">
                          <div class="wrapper">
                            <textarea name="waiting_reason" id="waiting_reason"  [(ngModel)]="formData.waiting_reason" maxlength="250"  cols="110" rows="5" ></textarea>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-12" *ngIf="acceptCheak || confirmedcheck">
                        <h2 class="title" style="background-color: #5cce5c">تفاصيل السكن</h2>
                        <div class="row">
                          <div class="col-12">
                            <div class="wrapper">
                                <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)]="unitInformation.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)]="unitInformation.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)]="unitInformation.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)]="unitInformation.unit_id "  required>
                                             <option *ngFor="let unit of units" [value]="unit.id" >{{unit.unit_number}}</option>
                                          </select>
                                       </div>
                                  </div>
                            </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12" *ngIf="acceptCheak || confirmedcheck  ">
                          <h2 class="title" style="background-color: #5cce5c">تفاصيل الوحدة</h2>
                          <div class="row">
                            <div class="col-12">
                              <div class="wrapper">
                                  <div class="col-12 col-sm-12 col-md-4" >
                                      <div class="form-group">
                                        <label style="float: right; margin-right: 5px">  عدد غرف النوم </label>
                                        <h3>{{unitInformation.bedrooms_number}}</h3>
                                      </div>
                                   </div>
                                   <div class="col-12 col-sm-12 col-md-4" >
                                    <div class="form-group">
                                      <label style="float: right; margin-right: 5px">  عدد غرف الجلوس </label>
                                      <h3>{{unitInformation.sittingrooms_number}}</h3>
                                    </div>
                                 </div>
                                 <div class="col-12 col-sm-12 col-md-4" >
                                  <div class="form-group">
                                    <label style="float: right; margin-right: 5px">  عدد الحمامات </label>
                                    <h3>{{unitInformation.bathrooms_number}}</h3>
                                  </div>
                               </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-12" *ngIf="acceptCheak">
                          <h2 class="title" style="background-color: #5cce5c">تفاصيل العهد</h2>
                          <div class="row">
                            <div class="col-12">
                              <div class="wrapper">
                                  <div class="col-12 col-sm-12 col-md-4"  *ngFor="let item of covenants">
                                     <div class="form-group">
                                        <label style="float: right; margin-right: 5px"> {{item.covenant_name}} </label>
                                        <h3>{{item.covenant_amount}}</h3>
                                      </div>
                                    </div>  
                              </div>
                          </div>
                        </div>
                      </div>
                    
                      <div class="col-12 col-md-6" *ngIf="acceptCheak">
                        <div class="form-group">
                          <input type="checkbox" class="form-check-input checkReport" name="report" id="report" [checked]="!notvailed" required (change)="notvailed = !notvailed">
                          <label class="form-check-label" for="report" style="margin: 0 20px; float: right;"> تم الإطلاع على العهد المسجلة ومقارنتها مع الواقع والموافقة عليها السكن</label>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              
            <div class="row">
              <div class="col-12">
                  <button type="button" class="btn btn-success rightW"  [disabled]="notvailed" (click)="onSubmitted('confirmed')" *ngIf="acceptCheak" >تأكيد الطلب</button>
                  <button type="button" class="btn btn-danger rightW"  [disabled]="notvailed"  (click)="onSubmitted('refused')" *ngIf="acceptCheak" >رفض الطلب</button>
                <button type="button" class="btn btn-warning rightW" (click)="authSer.backFromEdit()" style="margin:20px 10px;">رجوع</button>
              </div>
            </div>
          </div>
      </form>
      
   </div>
 </div>
</div>


                
  
            

