import { AuthServiceService } from 'src/app/shared/auth-service.service';
import { UserService } from './../../../shared/user.service';
import { ActivatedRoute, Params } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { NgxSpinnerService } from 'ngx-spinner';
import { DashboardService } from '../../../shared/dashboard.service';

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


export class RoleReportComponent implements OnInit {
  
  roleId: number;
  rolesList: any;
  selectedAll: any;
  showRoleReport: boolean = false;

  constructor(private route: ActivatedRoute, 
    private dashboardSer: DashboardService, 
    private userService: UserService,
    public authSer: AuthServiceService,
    private spinner: NgxSpinnerService ) { 
      this.spinner.show();
    }

  ngOnInit() {
    
   //init values of permisions
   this.authSer.showAddBtn = false;
   this.authSer.showDeleteBtn = false;
   this.authSer.showEditBtn = false;
   this.authSer.showPermissionsBtn = 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.userService.getUserDataProfile();
    
    this.route.params.subscribe(
      (params: Params) => {
        this.roleId = params['roleReportId'];
        this.dashboardSer.get_report_pages_inside_roles(this.roleId).subscribe(
          (responce) => {
            //console.log(responce);
            this.rolesList = responce['role'];
            console.log('role list', this.rolesList);
            this.showRoleReport = true;
            this.spinner.hide();
          }, 
          (error) => {
            console.log(error);
          }
        );
      }
    )  
  };

  //print function
  // onPrint() {
  //   window.print();
  // }

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

}
