import { AuthServiceService } from './../../../shared/auth-service.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { ActivatedRoute, Router, Params } from '@angular/router';
import { DashboardService } from './../../../shared/dashboard.service';
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { Modal } from 'ngx-modialog/plugins/bootstrap';
import { UserService } from '../../../shared/user.service';
import { ToastrService } from 'ngx-toastr';


@Component({
  selector: 'app-living-system-reports',
  templateUrl: './living-system-reports.component.html',
  styleUrls: ['./living-system-reports.component.css']
})

export class LivingSystemReportsComponent implements OnInit {
  reportValue : number = 0;
  housing_complex_id: any = 'all';
  building_type_id: any = 'all';
  building_id: any = 'all';
  unitId: any = 'all';
  assigned_count: number;
  empty_count: number;
  searchValue: any;
  employee: any;
  unit: any;
  placeholder: string;
  reportName: string;

  complex_list = [];
  building_types = [];
  buildings = [];
  assigned_units = [];
  empty_units = [];
  employees = [];
  requests = [];
  units = [];
  covenants = [];
  units2 :any;


  isComplex: boolean = false;
  isBuildingType: boolean = false;
  isUnit: boolean = false;
  showFilters: boolean = false;
  showSearchBtn: boolean = false;
  fristReport: boolean = false;
  secondReport: boolean = false;
  thirdReport:boolean = false;
  fourthReport: boolean = false;
  


  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private modal: Modal,
    private userSer: UserService,
    private spinner: NgxSpinnerService,
    public authSer: AuthServiceService,
    private toastr: ToastrService,
    private dashboardSer: DashboardService,
    private http: HttpClient
  ) { }

  ngOnInit() {

    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;
    // localStorage.setItem('pageIdActive', '62');


    this.http.get(this.authSer.pathApi + '/housing_complexes_list').subscribe(
      res => {
        console.log(res);
        this.complex_list = res[('housing_complexes')];
        this.complex_list.splice(0, 0 ,  {
          id: 'all',
          name:'أختار مجمع سكني'
        },
          );
        console.log(this.complex_list)  ;
        
      },
      err => {
        console.log(err);
        
      }
    );


  }

  getBuildingsType(event){
    console.log('sdsdsd',event);
    const id = event;
  this.housing_complex_id = id;
  console.log(id);


  this.building_types = [];
  this.buildings = [];
  this.building_type_id = 'all'
  this.building_id = 'all';
  
  if(id != 'all'){
    this.http.get(this.authSer.pathApi+ '/building_types_list/' + id ).subscribe(
      res => {
        console.log(res);
        this.building_types = res[('building_types')];
        this.building_types.splice(0, 0 ,  {
          id: 'all',
          name:'أختار نوع المبنى'
        },
          );
        if(this.building_types.length > 1)
        this.isComplex = true;

        console.log(this.isComplex);
        
      },
      err => {
        console.log(err);
        
      }
    );
  }
}
getBuilding(event){
  this.building_type_id = event;
  this.buildings = [];
  this.building_id = 'all'

  if(event != 'all'){
  
    this.http.get(this.authSer.pathApi + '/buildings_list_by_type_id/' + event ).subscribe(
      res => {
        console.log(res);
        this.buildings = res['buildings'];
        const x = this.buildings.length
        this.buildings.splice(0, 0 ,  {
          id: 'all',
          building_name:'أختار اسم المبنى'
        
        },
          );
          if(x > 0)
          this.isBuildingType= true;

          console.log(this.building_id , this.building_type_id , this.housing_complex_id);
       
          
      },
      err =>{
        console.log(err);
        
      }
    );
  }
}

getBuildingID(event){
  this.building_id = event;
  console.log(this.housing_complex_id , this.building_type_id, this.building_id);
  this.http.get(this.authSer.pathApi + '/units_list_by_building_id/' + event).subscribe(
    res =>{
      console.log(res);
      this.units = res['units']
      const x = this.units.length;
      this.units.splice(0, 0 ,  {
        id: 'all',
        unit_number:'أختار رقم الوحدة',
      });

   
            if(x > 1)
            this.isUnit = true;
          

    },

    err => {
      console.log(err);
      
    }
  );

}
unitNum(event){
 this.unitId = event;
 this.showSearchBtn = true;


  }

  getReport(event){
    this.housing_complex_id = 'all';
    this.reportValue = event
    this.isUnit = false;
    this.isComplex = false;
    this.showFilters = true;
    this.showSearchBtn= true;
    this.isBuildingType = false;
    this.building_types = [];
    this.buildings = [];
    this.assigned_units = [];
    this.empty_units = [];
    this.employees = [];
    this.requests = [];
    this.units = [];
    this.covenants = [];
    if(this.reportValue == 1 ){
      this.secondReport = false;
      this.thirdReport = false;
      this.fourthReport = false;

      this.reportName ='الوحدات الساكنيه'
    }
    if(this.reportValue == 2){
      this.fristReport = false;
      this.thirdReport = false;
      this.fourthReport = false;

      
      this.reportName ='تقرير السكان في المحمع و المباني'

    }
    if(this.reportValue == 3 ){
      this.fristReport = false;
      this.secondReport = false;
      this.fourthReport = false;
      this.placeholder = 'ادخل رقم هوية الموظف'
      this.searchValue = '';
      this.reportName ='تقرير ساكن'

    }
    if(this.reportValue == 4 ){
      this.fristReport = false;
      this.secondReport = false;
      this.showSearchBtn= false;
      this.thirdReport = false;
      this.placeholder = 'ادخل رقم او كود الوحدة'
      this.searchValue = '';
      this.reportName ='تقرير العهد'


    }
  }

  onSearch(){
    console.log(this.reportValue);
    this.fristReport = false;
    
    if(this.reportValue == 1){
      this.assigned_count = null;
      this.empty_count = null;
      this.assigned_units = [];
      this.empty_units = [];
     
      this.http.get(this.authSer.pathApi + '/units_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id).subscribe(
        res => {
          console.log( res);
          this.assigned_count = res['data'].assigned_count;
          this.assigned_units = res['data'].assigned_units;
          this.empty_count = res['data'].empty_count;
          this.empty_units = res['data'].empty_units
          this.fristReport = true;
        },
        err => {
          console.log(err);
          
        }
      )
    }
    if(this.reportValue == 2){
      this.employees = [];
      this.secondReport = false;
      this.http.get(this.authSer.pathApi + '/tenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id + '/' + 'all').subscribe(
        res => {
          console.log('>>>>',res);
          this.employees  = res['data'].employees;
          this.secondReport = true;
        },
        err => {
          console.log(err);
          
        }
      )
    }
    if(this.reportValue == 3 ){
      this.thirdReport = false;

      this.http.get(this.authSer.pathApi + '/tenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id + '/' + 'single' + '/' + this.searchValue).subscribe(
        res => {
          console.log('>>>>',res);
          this.employee  = res['data'].employee;
          this.requests =  res['data'].requests;
          this.unit = res['data'].unit;
          this.thirdReport = true;
        },
        err => {
          console.log(err);
          
        }
      )

    }
    if(this.reportValue == 4 ){
      this.fourthReport = false;
      
      this.http.get(this.authSer.pathApi + '/covenants_report/' + this.housing_complex_id + '/' + this.building_type_id + '/' + this.building_id  + '/' + this.unitId).subscribe(
        res => {
          console.log('>>>>',res);
          this.units2 = res['units'];

          
            this.covenants = this.units2.covenants;
            
          
          this.fourthReport = true;
        },
        err => {
          console.log(err);
          
        }
      )

    }
    
  }

  onPrint(): void {
    let printContents, popupWin;
    printContents = document.getElementById('print-section').innerHTML;
    popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>Print tab</title>
          <style>
          .row{
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
          }
          .col-6{
            float: right;
            flex: 0 0 50%;
            max-width: 50%
          }
          .col-12{
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
          }
          table {
            font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
            border-collapse: collapse;
            width: 100%;
            direction: rtl;
            text-align: center;
            
          }
          
          table td, table th {
            border: 1px solid #ddd;
            padding: 8px;
          }
          
          table tr:nth-child(even){background-color: #f2f2f2;}
          
          table tr:hover {background-color: #ddd;}
          
          table th {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: center;
            background-color: #4CAF50;
            color: white;

          }
          .d3{
            font-size: 15px;
            padding-left: 10px;
            width: 25%;
            text-align: center;
            direction: rtl;
            margin-left: 20px;
          }
          v3{
            direction: rtl;              
          }
          .printClass{
            display: none;
           }
           .nothingToShow{
             text-align: center;
           }
           .table-title{
               text-align: right;
               margin-right:5px;
           }
            </style>
          </head>
          <body onload="window.print();window.close()">
            <div class="row">
              <div class="col-6" style="float: left">
               <img class="logo1" src="../../assets/image/logo2.png" style="width: 130px;float: left; margin-left: 20px;">
              </div>
              <div class="col-6" style="float: right">
                <img  class="logo2" src="../../assets/image/logo1.png" style="width: 200px;float: right; margin-right: 20px;">
              </div>
             </div>
             <div class="row">
               <div class="col-12" style="width:100%;text-align: center">
                 <h1>تقرير السكن </h1>
               </div>
              </div>
                
              <div class="row">
                <div class="col-12">
                     ${printContents}
                  </div>
               </div>
            </body>
      </html>`
    );
    popupWin.document.close();
}
//  //print function 
//  onPrint() {
//   window.print();
// }
//   //print function
// //   onPrint(): void {
// //     let printContents, popupWin;
// //     printContents = document.getElementById('print-section').innerHTML;
// //     popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
// //     popupWin.document.open();
// //     popupWin.document.write(`
// //       <html>
// //         <head>
// //           <title>تقرير المركبات الموجوده</title>
// //           <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </link>
// //           <style>
          // .row{
          //   display: flex;
          //   flex-wrap: wrap;
          //   margin-right: -15px;
          //   margin-left: -15px;
          // }
          // .col-6{
          //   float: right;
          //   flex: 0 0 50%;
          //   max-width: 50%
          // }
          // .col-12{
          //   flex-basis: 0;
          //   flex-grow: 1;
          //   max-width: 100%;
          // }
          // table {
          //   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
          //   border-collapse: collapse;
          //   width: 100%;
          //   direction: rtl;
          //   text-align: center;
            
          // }
          
          // table td, table th {
          //   border: 1px solid #ddd;
          //   padding: 8px;
          // }
          
          // table tr:nth-child(even){background-color: #f2f2f2;}
          
          // table tr:hover {background-color: #ddd;}
          
          // table th {
          //   padding-top: 12px;
          //   padding-bottom: 12px;
          //   text-align: center;
          //   background-color: #4CAF50;
          //   color: white;

          // }
          // .d3{
          //   font-size: 15px;
          //   padding-left: 10px;
          //   width: 25%;
          //   text-align: center;
          //   direction: rtl;
          //   margin-left: 20px;
          // }
          // v3{
          //   direction: rtl;              
          // }
// //           </style>
// //         </head>
// //        <body onload="window.print();window.close()">
      //  <div class="row">
      //   <div class="col-6" style="float: left">
      //    <img class="logo1" src="../../assets/image/logo2.png" style="width: 130px;float: left; margin-left: 20px;">
      //   </div>
      // <div class="col-6" style="float: right">
      //     <img  class="logo2" src="../../assets/image/logo1.png" style="width: 200px;float: right; margin-right: 20px;">
      //  </div>
      // </div>
      // <div class="row">
      //   <div class="col-12" style="width:100%;text-align: center">
      //     <h1>تقرير حركة المركبات </h1>
      //   </div>
      // </div>
    
// //    <div class="row">
// //    <div class="col-12">
// //    ${printContents}
// //    </div>
// // </div>
// //     </body>
// //       </html>`
// //     );
// //     popupWin.document.close();
// // }


}
