import { NgxSpinnerService } from 'ngx-spinner';
import { HttpClient } from '@angular/common/http';
import { AuthServiceService } from './../../../shared/auth-service.service';
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-report-current-employee-officer',
  templateUrl: './report-current-employee-officer.component.html',
  styleUrls: ['./report-current-employee-officer.component.css']
})
export class ReportCurrentEmployeeOfficerComponent implements OnInit {

  constructor(public authSer: AuthServiceService, 
    private toastr: ToastrService,
    private spinner: NgxSpinnerService,
    private http: HttpClient) { }

  adminstrations = [];
  departments = [];
  adminstraion_officers = [];
  department_officers = [];
  adminId: number = null;
  departId: number = null;
  defaultAdminstrationValue: string = ' ';
  defaultdepartmentValue: string = '';

  ngOnInit() {

    this.spinner.show();

    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', '61');


    this.http.get(this.authSer.pathApi + '/page_list/3/1/1000/all').subscribe(
      (responce) => {
        this.adminstrations = responce['adminstrations'];
        this.spinner.hide();
      },
      (error) => {
        console.log(error);
      }
    )
  }


  getAdminstrationsData(event) {
    this.adminId = event.target.value;
    console.log(this.adminId);
    this.getDepartments(this.adminId);
  }

  getDepartmentsData(event) {
    this.departId = event.target.value;
    console.log(this.departId);
  }

  getDepartments(adminId) {
    this.http.get(this.authSer.pathApi + '/page_list/4/1/1000/' + adminId).subscribe(
      (response) => {
        console.log(response);
        this.departments = response['departments'];
      },
      (error) => {
        console.log(error);
      }
    )
  }


  getReport() {
    
    if(this.adminId == null) {
      this.toastr.warning('قم بإختيار إدراه اولا !'); 
    } else {
      this.http.get(this.authSer.pathApi + '/report_current_employees_officer/' + this.adminId + '/' + (this.departId ? this.departId : 'all') ).subscribe(
        (response) => {
          console.log(response);
          this.adminstraion_officers = response['adminstraion_officers'];
          this.department_officers = response['department_officers'];
        },
        (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;
            }
            .heading {
              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();
  }

}
