import { AuthServiceService } from './../../shared/auth-service.service';
import { Component, OnInit } from '@angular/core';

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

  constructor(public authSer: AuthServiceService) { }

  ngOnInit() {
  }

  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>
          <style>
            //........Customized 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;
            }
            .rightLogo {
              text-align: left;
              direction: rtl;
            }

            .printSpan {
              direction: ltr;
              text-align: right;
            }
          </style>
        </head>
    <body onload="window.print();window.close()">${printContents}</body>
      </html>`
    );
    popupWin.document.close();
}

}
