<div class="addHospital-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" style="cursor:pointer" > تقارير السكن </li>
            </ul>
          </div>
      </div>
      <div class="containerContent-w" id="print-section">
          <!-- <div class="row printClass">
            <div class="col-12 col-md-4">

               
            </div>   
           </div> -->
           <div class="row fit-filter-style printClass" >
              <div class="col-12 col-sm-3 col-md-3 col-lg-2">
                  <div class="form-group">
                      <span class="spanSelect-w" style="margin-right:10px;">
                        <select [ngModel]="reportValue" class="form-control selectButton-w full"  (input)="getReport($event.target.value)">
                          <option value="0"> رجاء الاختيار التقرير</option>
                          <option value="1">تقارير عن الوحدات السكنية</option>
                          <option value="2">تقارير عن السكان في مجمعات و المباني</option>
                          <option value="3">تقارير عن ساكن</option>
                          <option value="4">تقارير عن العهد الموجوده</option>
                        </select>
                      </span>
                    </div>
              </div>
              <div class="col-12 col-sm-3 col-md-3 col-lg-2">
                <div class="form-group" *ngIf="showFilters">
                  <span class="spanSelect-w" style="width: 100%;">
                    <select [ngModel]="housing_complex_id" class="form-control selectButton-w full" (input)="getBuildingsType($event.target.value)">
                      <option *ngFor="let complex of complex_list" [value]="complex.id">{{complex.name}}</option>
                    </select>
                  </span>
                </div>
              </div>
              <div class="col-12 col-sm-3 col-md-3 col-lg-2" *ngIf="isComplex">
                <div class="form-group">
                  <span class="spanSelect-w" style="width: 100%;">
                    <select [ngModel]="building_type_id" class="form-control selectButton-w full" (input)="getBuilding($event.target.value)">
                    <option *ngFor="let type of building_types" [value]="type.id">{{type.name}}</option>
                    </select>
                  </span>
                </div>
              </div>
              <div class="col-12 col-sm-3 col-md-3 col-lg-2" *ngIf="isBuildingType">
                <div class="form-group">
                  <span class="spanSelect-w"style="width: 100%;">
                    <select [ngModel]="building_id" class="form-control selectButton-w full " (input)="getBuildingID($event.target.value)">
                      <option *ngFor="let building of buildings" [value]="building.id">{{building.building_name}}</option>
                    </select>
                  </span>
                </div>
              </div>  

              <div class="col-12 col-sm-12 col-md-12 col-lg-2" *ngIf="isUnit">
                <div class="form-group">
                  <span class="spanSelect-w" style="width: 100%;">
                    <select [ngModel]="unitId" class="form-control selectButton-w full" (input)="unitNum($event.target.value)">
                     <option *ngFor="let unit of units" [value]="unit.id">{{unit.unit_number}}</option>
                    </select>
                  </span>
                </div>
              </div>   
              <div class="col-12 col-sm-12 col-md-12 col-lg-2">
                <div class="row printClass" *ngIf="reportValue == 3 && showSearchBtn " style="justify-content: center;">
                  <input type="text" placeholder="{{placeholder}}" class="form-control numberReport-s" [(ngModel)]="searchValue" style="width: 100%"/>
                 </div>
                </div>  
           </div>
          
           <div class="row fit-filter-style printClass" *ngIf="showSearchBtn " style="    padding: 25px;">
              <button class="btn btn-success buttonS" (click)="onSearch()">أبحث</button>            
          </div>

          <div class="col-12" *ngIf="fristReport">
              <h2 class="title table-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>
                            <th>رمز الوحدة</th>
                            <th>حالة الوحدة</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let data of assigned_units | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                            <td>{{data.unit_name}}</td>
                            <td>{{data.unit_number}}</td>
                            <td>{{data.unit_code}}</td>
                            <td>{{data.unit_status == 'new' ? 'جديد' : data.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
                        </tr>
                      </tbody>
                    </table>

                    <div class="col-12" *ngIf="this.assigned_count == 0" >
                        <h2 class="title nothingToShow"> لا يوجد بيانات لعرضها </h2>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="fristReport">
              <h2 class="title table-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>
                            <th>رمز الوحدة</th>
                            <th>حالة الوحدة</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let data of empty_units | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                            <td>{{data.unit_name}}</td>
                            <td>{{data.unit_number}}</td>
                            <td>{{data.unit_code}}</td>
                            <td>{{data.unit_status == 'new' ? 'جديد' : data.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
                        </tr>
                      </tbody>
                    </table>

                    <div class="col-12" *ngIf="this.empty_count == 0" >
                        <h2 class="title nothingToShow"> لا يوجد بيانات لعرضها </h2>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="secondReport">
              <h2 class="title table-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>
                            <th>رقم الهوية</th>
                            <th>اسم المبنى</th>
                            <th>رقم الوحدة</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let data of employees | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                            <td>{{data.employee_name}}</td>
                            <td>{{data.employee_functional_number}}</td>
                            <td>{{data.employee_identity_number}}</td>
                            <td>{{data.building_information_name }}</td>
                            <td>{{data.unit_name}}</td>
                        </tr>
                      </tbody>
                    </table>

                    <div class="col-12" *ngIf="employees.length == 0" >
                        <h2 class="title nothingToShow"> لا يوجد بيانات لعرضها </h2>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="thirdReport">
              <h2 class="title table-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>
                            <th>رقم الجوال</th>
                            <th> المنصب الوظيفي</th>
                            <th>الأدارة</th>
                            <th>البريد الالكتروني</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>{{employee.employee_name}}</td>
                            <td>{{employee.employee_nationality}}</td>
                            <td>{{employee.employee_phone}}</td>
                            <td>{{employee.employee_position}}</td>
                            <td>{{employee.employee_adminstration_name}}</td>
                            <td>{{employee.employee_email}}</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="thirdReport">
              <h2 class="title table-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>
                            <th> حالة الطلب</th>
                           
                          </tr>
                        </thead>
                        <tbody>
                          <tr *ngFor="let data of requests | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                            <td>{{data.id}}</td>
                            <td>{{data.type_name}}</td>
                            <td>{{data.status == 'accepted' ? 'مبقول' : data.status == 'refused' ? 'مرفوض' :  'جديد'}}</td>
                          
                        </tr>
                      </tbody>
                    </table>

                    <div class="col-12" *ngIf="requests.length == 0" >
                        <h2 class="title nothingToShow"> لا يوجد بيانات لعرضها </h2>
                    </div>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="thirdReport">
              <h2 class="title table-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>
                            <th> اسم المبنى</th>
                            <th>  رقم الوحدة</th>
                            <th>رمز الوحدة</th>
                            <th> حالة الوحدة </th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>{{employee.housing_complex_name}}</td>
                            <td>{{employee.building_type_name}}</td>
                            <td>{{employee.building_information_name}}</td>
                            <td>{{unit.unit_number}}</td>
                            <td>{{unit.unit_code}}</td>
                            <td>{{unit.unit_status == 'new' ? 'جديد' : unit.unit_status == 'old' ? 'قديمة' : 'Not Found'}}</td>
                            
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
            </div>
          </div>
          <div class="col-12" *ngIf="fourthReport">
            <h2 class="title table-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>
                          <th> اسم المبنى</th>
                          <th> اسم الوحدة</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr >
                          <td>{{units2.housing_complex_name}}</td>
                          <td>{{units2.building_type_name}}</td>
                          <td>{{units2.building_information_name }}</td>
                          <td>{{units2.unit_name}}</td>        
                      </tr>
                    </tbody>
                  </table>
                  <div class="col-12" *ngIf="units2.length == 0" >
                      <h2 class="title"> لا يوجد بيانات لعرضها </h2>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <div class="col-12" *ngIf="fourthReport">
          <h2 class="title table-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>
                        <th> عدد العهد</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let data of covenants | paginate: { itemsPerPage: perPagePagenation, currentPage: currentPage, totalItems: count }; let i = index ">
                        <td>{{data.covenant_name}}</td>
                        <td>{{data.category_name}}</td>
                        <td>{{data.covenant_amount }}</td>                   
                    </tr>
                  </tbody>
                </table>

                <div class="col-12" *ngIf="units2.length == 0" >
                    <h2 class="title nothingToShow"> لا يوجد بيانات لعرضها </h2>
                </div>
              </div>
            </div>
        </div>
      </div>


          <div class="col-12 printClass" *ngIf="fristReport || secondReport || thirdReport || fourthReport">
              <button class="btn btn-success" style="float: right; margin: 10px 0;" (click)="onPrint()">طباعه</button> 
            </div>
      </div>
  </div>
</div>
