import { Subscription } from 'rxjs';
import { ActivatedRoute, Params } from '@angular/router';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { UserService } from './../../../shared/user.service';
import { NgxSpinnerService } from 'ngx-spinner';
import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-user-report',
  templateUrl: './user-report.component.html',
  styleUrls: ['./user-report.component.css']
})
export class UserReportComponent implements OnInit, OnDestroy {

  userId: number;
  subscriptionReportData: Subscription;
  reportData = [];
  pages = [];
  userLoginId: any;
  serviceId: any;

  constructor(private userService: UserService, 
    public authService: AuthServiceService,
    private spinner: NgxSpinnerService, 
    public authSer: AuthServiceService,
    private route: ActivatedRoute) { }

  ngOnInit() {
    this.authSer.showPrintBtn = false;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;
    //show / hide notification search in header
    this.authSer.notificationLogin = true;
    this.authSer.showSearchHeader = false;
    this.authSer.showHeaderLogin = false;
    this.authSer.showHeaderDashBoard = true;
    this.authSer.showDashboardHeader = true;
    this.authSer.internalHeader = false;

    this.spinner.show();
    this.userLoginId = localStorage.getItem('userId');
    this.serviceId = localStorage.getItem('serviceId');
    this.userService.getPagesPermetiotns(this.userLoginId, this.serviceId).subscribe(
      (responce)=>{
        this.pages = responce['pages'];
        console.log(this.pages);            
        for(let i = 0; i< this.pages.length; i++) {
          if(this.pages[i].name == 'التقارير') {
            for(let j = 0; j < this.pages[i].permissions.length; j++) {
              if(this.pages[i].permissions[j].name == 'show_and_print_report'){
                this.authSer.showPrintBtn = true;
              }
            }
          }else {
            console.log('no users');
          }
        }
      },
      (error) => {
        console.log(error);
      }
    );
    //get profile data
    this.userService.getUserDataProfile();
    this.route.params.subscribe(
      (params:Params) => {
        this.userId = params['reportUserId'];
      }
    );

   this.subscriptionReportData = this.userService.onGetReportData(this.userId).subscribe(
      (responce) => {
        console.log(responce);
        this.reportData.push(responce['data']);
        console.log('report data => ', this.reportData);
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    )

  };

  ngOnDestroy() {
    this.subscriptionReportData.unsubscribe();
  }

  // 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;
            }
          </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();
}

}
