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

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

  constructor(private http: HttpClient, 
    private toastr: ToastrService,
    private route : ActivatedRoute,
    private authSer: AuthServiceService) { }

  searchData: string = '';
  showTableData: boolean = false;
  showTableData2: boolean = false;
  vehicleData = [];
  movements = [];
  maintenances = [];
  typeReport:string = '';
  typeReportPage:string = '';
  

  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;
     //to show / hide permissions


    this.route.params.subscribe(
      (params: Params) => {
        this.typeReport = params['typeReport'];
        if(params['typeReport'] == 'Movement') {
          this.typeReportPage = 'تقارير حركه المركبات';
          localStorage.setItem('pageIdActive', '49');
          this.searchData = '';
          this.vehicleData = [];
          this.showTableData = false;
          this.showTableData2 = false;
        } else if(params['typeReport'] == 'General') {
          this.typeReportPage = 'تقرير عام عن المركبه';
          localStorage.setItem('pageIdActive', '50');
          this.searchData = '';
          this.vehicleData = [];
          this.showTableData = false;
          this.showTableData2 = false;
        }
      }
    );
  }

  onGetData() {
    this.vehicleData = [];
    if(this.typeReport == 'Movement') {
      this.http.get(this.authSer.pathApi + '/report_vehicle_movement/' + this.searchData).subscribe(
        (responce) => {
          console.log(responce);
          this.vehicleData.push(responce['vehicle']);
          console.log(this.vehicleData);
          if(this.vehicleData[0] == null) {
            this.toastr.warning('لا يوجد بيانات لهذا المركبه');
            this.showTableData = false;
            this.showTableData2 = false;
          } else {
            this.showTableData = true;
            this.showTableData2 = false;
          }
          
        },
        (error) => {
          console.log(error);
          this.toastr.error('خطأ في البحث ، حاول ثانيه');
        }
      );
    } else if(this.typeReport == 'General') {

      this.http.get(this.authSer.pathApi + '/report_general_on_vehicle/' + this.searchData).subscribe(
        (responce) => {
          console.log(responce);
          this.vehicleData.push(responce['vehicle']);
          console.log(this.vehicleData);
          if(this.vehicleData[0] == null) {
            this.toastr.warning('لا يوجد بيانات لهذا المركبه');
            this.showTableData = false;
            this.showTableData2 = false;
          } else {
            this.showTableData = true;
            this.showTableData2 = true;
          }
          
        },
        (error) => {
          console.log(error);
          this.toastr.error('خطأ في البحث ، حاول ثانيه');
        }
      );
    } else {

    }
  };

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

}
