import { Component, OnInit, NgZone, ViewChild, ElementRef } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ValidationService } from './../../provider/validation.service';
import { WebService } from './../../provider/web.service';
import { MapsAPILoader } from '@agm/core';
import { SubjectService } from './../../provider/subject.service';
import { google } from '@google/maps';
import { apiConfig } from '../../../environments/server.config';
import { ImageStorage } from '../../../environments/server.config';
import { formatDate } from '@angular/common';

declare var $;
declare const google: any;

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
  tab: any;
  loader: boolean;
  carModel: any;
  imageUrl: any;
  user_name: string;
  vehDetails: any;
  testMilage: any = '';
  errMessage: any;
  modelDates: number[] = new Array();
  monthArray: any[] = new Array(12);
  mechanics: string = ''; 
  editProfile;
  loginDetails: any;
  selectedFile: File;
  selMechanics: any[] = new Array();
  profile_image: any;
  mechCustQuote: number[] = new Array();
  confirmParam: string = '';
  confirmCallBak: string = '';
  cfautocomplete: any;
  searchLocError: boolean;
  bookingDetails: any;
  successBookDtls: any;
  profileEditResp: any;
  autocompleteVin: any;
  carBrands: any;
  selBrand: string = '';
  autocompleteDetails: any;
  optionalDescription: string;
  editProfileSubmitClick: boolean;
  remainders: any;
  
  vehicleVinAddForm;
  vehicleVinFormSubmitClick;
  
  vehicleDetailsAddForm;
  vehicleDetailsFormSubmitClick;
  
  //Default Map Location
  lat: number = 51.678418;
  lng: number = 7.809007;
  
  wizardData: any;
  
  //Vehicle Details: TAB 2
  vehicleDataForm;
  vehicleDataFormSubmit;
  
  //Service Details: TAB 3
  issuesData: any;
  defIssuesData: any[] = new Array();
  selectedIssues: any[] = new Array();
  
  //Quote Page
  step: number;
  today: any = new Date();
  currDate: any;
  currentDate: any;
  currentTime: any;
  nextDate: any;
  dateStep: number = 0;
  dateSection: any[] = new Array();
  serverUrl: string;
  imageServer: string;
  mechanicData: any;
  autoSchedule: boolean;
  showLeftArrow: boolean;
  showRightArrow: boolean;
  estimatedPrice: number;
  scheduleDateInit: boolean;
  googlesearchLocError: boolean;
  scheduleMechanic: any;
  optionalImges: any = new Array({1:false,2:false,3:false,4:false});
  
  vehiYear:any;
  vehiBrand:any;
  vehiModel:any;
  carTrim:any;

  imageDisp1: any;
  imageDisp2: any;
  imageDisp3: any;
  imageDisp4: any;
  //minRoute:any;
  
  @ViewChild("closeWizard") public closeWizardRef: ElementRef;
  @ViewChild("confirmModal") public confirmModalRef: ElementRef;
  @ViewChild("googleLocVin") public googleLocVinRef: ElementRef;
  @ViewChild("goTostep1") public goTostep1Ref: ElementRef;
  @ViewChild("failureModel") public failureModelRef: ElementRef;
  @ViewChild("successModel") public successModelRef: ElementRef;
  @ViewChild("step2nextBtn") public step2nextRef: ElementRef;
  @ViewChild("step3nextBtn") public step3nextRef: ElementRef;
  @ViewChild("closeQuoteWizard") closeQuoteWizardRef: ElementRef;
  @ViewChild("googleLocDetails") public googleLocDetailsRef: ElementRef;
  @ViewChild("newGoogleLocSearch") public newGoogleLocRef: ElementRef;
  @ViewChild("appointmentTab") public appointmentTabRef: ElementRef;
  @ViewChild("vehicleTab") public vehicleTabRef: ElementRef;
  @ViewChild("reminderTab") public reminderTabRef: ElementRef;
  @ViewChild("serviceHistoryTab") public serviceHistoryTabRef: ElementRef;
  @ViewChild("closeVehicleAddForm") public closeVehicleAddFormRef: ElementRef;
  
  public scrollbarOptions = { axis: 'y', theme: 'minimal-dark' };
  
  constructor(private router        : Router, 
    public ngZone         : NgZone,
    private route         : ActivatedRoute,
    public mapsAPILoader  : MapsAPILoader,
    public errorMsg       : ValidationService,
    public webService     : WebService,
    public subjectService : SubjectService) {
      this.step             		          = 0;
      this.currDate                       = new Date();
      this.nextDate                       = new Date();
      this.issuesData      	            	= false;
      this.loader                         = false;
      this.errMessage                     = false;
      this.vehDetails                     = false;
      this.serverUrl                      = apiConfig;
      this.imageServer                    = ImageStorage;
      this.searchLocError                 = false;
      this.showLeftArrow    	          	= false;
      this.showRightArrow   	          	= true;
      this.scheduleDateInit               = false;
      this.googlesearchLocError           = false;
      this.editProfileSubmitClick         = false;
      this.scheduleMechanic 	            = false; 
      this.optionalDescription 	          = ''; 
      this.vehicleDetailsFormSubmitClick  = false;  
    }
    
    ngOnInit() {
      this.currentTime = this.today.getTime();
      this.currentDate = this.today.getDate();
      
      this.tab = 'active';
      this.route.queryParams.subscribe(params => {
        let payStatus = params['status'];
        let activeTab = params['tab'];
        let vehTab = params['redrct_tab'];
        
        if(payStatus && payStatus !=''){
          if(payStatus == 'success')
          this.successModelRef.nativeElement.click();
          if(payStatus == 'failure')
          this.failureModelRef.nativeElement.click();
        }
        
        if(activeTab && activeTab !=''){
          if(activeTab == 'service'){
            this.serviceHistoryTabRef.nativeElement.click();
          }
          if(activeTab == 'appointment'){
            this.appointmentTabRef.nativeElement.click();
          }
        }

        if(vehTab && vehTab !=''){
          if(vehTab == 'vehicle'){
            this.vehicleTabRef.nativeElement.click();
          }
          if(vehTab == 'reminder'){
            this.reminderTabRef.nativeElement.click();
          }
        }
      });
      
      this.vehicleVinAddForm = new FormGroup({
        vin: new FormControl('', [Validators.required]), 
        location: new FormControl('', [Validators.required])
      });
      
      this.vehicleDetailsAddForm = new FormGroup({
        maker: new FormControl('', [Validators.required]), 
        location: new FormControl('', [Validators.required]), 
        modelYear: new FormControl('', [Validators.required]), 
        modelName: new FormControl('', [Validators.required]),
        engine: new FormControl(''),
        trim: new FormControl(''),
        last_date: new FormControl(''),
        maintanence_interval: new FormControl('')
      });
      
      this.getVehicleBrand();
      this.subjectService.getLoginData().subscribe(loginData => {
        this.loginDetails = JSON.parse(this.webService.getLocalStorageItem('userData'));
        
        if(this.loginDetails){
          this.imageUrl = ImageStorage+this.loginDetails.profile_image;
          this.editProfile = new FormGroup({
            email: new FormControl(this.loginDetails.email, [Validators.required, Validators.maxLength(50), Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')]),
            phone: new FormControl(this.loginDetails.phone, [Validators.required, Validators.maxLength(15), Validators.pattern("^[0-9\ ( ) + , - ]+$")]),
            address: new FormControl(this.loginDetails.address, [Validators.required, Validators.maxLength(250)]),
            password: new FormControl('', [Validators.maxLength(16), Validators.minLength(6)]),
            cpassword: new FormControl('', [Validators.maxLength(16), Validators.minLength(6)]),
            last_name: new FormControl(this.loginDetails.last_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")]),
            first_name: new FormControl(this.loginDetails.first_name, [Validators.required, Validators.maxLength(50), Validators.pattern("^[a-zA-Z\ _ - ' \/]+$")])
          });
          this.getCustVehDetails();
          this.getCustBookDetails();
          this.getCustRemainders();
        } else {
          this.router.navigate(['index']);
        }
      });
      
      let currentYear = Number((new Date()).getFullYear());
      let startingYear = currentYear - 50;
      for (let date = currentYear ; date >= startingYear ; date --) {
        this.modelDates.push(date);
      }
      
      this.mapsAPILoader.load().then(() => {
        this.autocompleteVin = new google.maps.places.Autocomplete(this.googleLocVinRef.nativeElement, {
          types: ["address"]
        });
        this.autocompleteDetails = new google.maps.places.Autocomplete(this.googleLocDetailsRef.nativeElement, {
          types: ["address"]
        });
        this.cfautocomplete = new google.maps.places.Autocomplete(this.newGoogleLocRef.nativeElement, {
          types: ["address"]
        });
      });
      this.nextDate.setDate(this.nextDate.getDate() + 1);
      
      $('.modal-backdrop').remove();
      $('body').attr('class','');
      $('body').attr('style','');
    }

    getVehicleBrand(){
      this.loader = true;
      this.webService.get_data('getVehicleBrand').subscribe(response => { 
        if(response.status == 'success'){
          this.carBrands = response.data;
        }
        this.loader = false;
      });
    }
    
    get_vehiYear(year){
      if(year == ''){
        return;
      }
      this.carTrim = this.carModel = [];
      this.vehiYear = year;
      if(this.vehiBrand){
        this.get_model(this.vehiBrand);
      }
    }

    get_model(brand_id) {
      this.vehiBrand = brand_id;
      if(!this.vehiYear){
        return false;
      }
      this.carTrim = this.carModel = [];
      this.loader = true;
      const thisObj = this;
      thisObj.carBrands.forEach(function (brandData,index) {
        if(brandData.veh_brand_id == brand_id){
          thisObj.selBrand = brandData.maker;
        }
      });

      this.webService.post_data('getVehicleModel',{'vehBrand_id':brand_id,'type':0,'vehiYear':this.vehiYear}).subscribe(response => { 
        if(response.status == 'success'){
          this.carModel = response.data;
        }
        this.loader = false;
      });
    }
    
    get_trims(event){
      const model = event.target.options[event.target.selectedIndex].getAttribute('modelValue');
      this.loader = true;
      this.webService.post_data('getVehicleTrim',{'vehBrand_id':this.vehiBrand,'vehiYear':this.vehiYear,'vehiModel':model}).subscribe(response => { 
        if(response.status == 'success'){
          this.carTrim = response.data;
        }
        this.loader = false;
      });
    }

    getCustRemainders(){
      this.webService.post_data('getCustRemainders',{'customer_id':this.loginDetails.customer_id}).subscribe(response => { 
        if(response.status == 'success'){
          this.remainders = response.data;
        }else{
          this.remainders = false;
        }
      });
    }
    
    getCustBookDetails(){
      this.loader = true;
      this.webService.post_data('getCustBookDetails', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
        if ( response.status == '1' && response.bookData != 'undefined' && response.bookData != undefined && response.bookData != 'null' && response.bookData != null ) {
          let bookings = response.bookData;
          let successBooking: any[] = new Array();
          let bookingDetails: any[] = new Array();
          
          bookings.forEach(function (book) {
            if(book.status == 0 || book.status == 1 || book.status == 6){
              successBooking.push(book);
            } else {
              bookingDetails.push(book);
            }
          });
          
          if(successBooking.length > 0){
            this.successBookDtls = successBooking;
          } else {
            this.successBookDtls = false;
          }
          
          if(bookingDetails.length > 0){
            this.bookingDetails = bookingDetails;
          } else {
            this.bookingDetails = false;
          }
        }
        this.loader = false;
      });
    }
    
    getCustVehDetails(){
      this.loader = true;
      this.webService.post_data('customerVechiles', {'customer_id':this.loginDetails.customer_id}).subscribe(response => {
        if ( response.status == '1' && response.vehData != '' && response.vehData != 'undefined' && response.vehData != undefined && response.vehData != 'null' && response.vehData != null ) {
          this.vehDetails = response.vehData;
        } else {
          this.vehDetails = false;
        }
        this.loader = false;
      });
    }

    changeReminder(custVehId,status){
      this.loader = true;
      this.webService.post_data('changeReminderStatus', {'customer_veh_id':custVehId,'status':status}).subscribe(response => {
        if ( response.status == 'success') {
          this.getCustVehDetails();
        }
        this.loader = false;
      });
    }
    
    setIssueSelected(event){
      let issue_id = event.target.attributes.issue_id.value;
      let sub_issue_id = event.target.attributes.sub_issue_id.value;
      
      const thisObj = this;
      let index = thisObj.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
      if(index > -1){
        thisObj.selectedIssues.splice(index, 1);
      } else {
        thisObj.issuesData.forEach(function (issData) {
          if(issData.issue_id == issue_id){
            issData.sub_categories.forEach(function (subIssData) {
              if(subIssData.issue_cat_id == sub_issue_id){
                let issue = issData.issue, 
                issue_image = issData.issue_image,
                issue_category = subIssData.issue_category,
                issue_cat_image = subIssData.issue_cat_image,
                default_service_fee = subIssData.default_service_fee,
                default_description = subIssData.default_description;
                
                thisObj.selectedIssues.push({issue_id,sub_issue_id,issue,issue_image,issue_category,issue_cat_image,default_service_fee,default_description});
              }
            });
          }
        }); 
      }
      this.calculateEstimate();
    }
    
    calculateEstimate(){
      const thisObj = this;
      thisObj.estimatedPrice = 0;
      thisObj.selectedIssues.forEach(function (selIssues) {
        thisObj.estimatedPrice = thisObj.estimatedPrice + Number(selIssues.default_service_fee);
      });
    }
    
    get_newlocaion(lastLoc){
      this.cfautocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          let places: google.maps.places.PlaceResult = this.cfautocomplete.getPlace();
          if (places == undefined || places == null || places === undefined || places === null || 
            places.geometry == undefined || places.geometry == null || places.geometry === undefined || places.geometry === null || 
            places.formatted_address == undefined || places.formatted_address == null || places.formatted_address === undefined || places.formatted_address === null) {
              this.googlesearchLocError = true;
              return;
            }
            this.wizardData['pickup_data'] = {
              'disp_loc':places.name,
              'pickup_loc':places.formatted_address,
              'pickup_lat':places.geometry.location.lat(),
              'pickup_lng':places.geometry.location.lng()
            };
            this.googlesearchLocError = false;
            this.lat = places.geometry.location.lat();
            this.lng = places.geometry.location.lng();
          });
        })
      }
      
      get_newdate(lastdate){
        this.wizardData['vechile_info']['lastMaintanceDate']=formatDate(lastdate,'MM/dd/yyyy','en');
      }
      
      get_newmilage(event){
        this.wizardData['vechile_info']['milage']=event;
      }
      
      get_newmaintanence_date(newdate){
        this.wizardData['vechile_info']['maintanenceInterval']=newdate.target.value;
      }
      
      removeSelectedItem(issue_id,sub_issue_id){
        let index = this.selectedIssues.findIndex(x => x.sub_issue_id == sub_issue_id);
        if(index > -1){
          this.selectedIssues.splice(index, 1);
          
          $('[id="issue_'+issue_id+'_'+sub_issue_id+'"]').prop('checked', false);
        }
        if(this.selectedIssues.length == 0){
          this.goTostep1Ref.nativeElement.click();
        }
        this.calculateEstimate();
      }
      
      submitProfileEdit(data){
        if(this.editProfile.invalid){
          return false;
        }
        const This = this;
        this.loader = true;
        data.customer_id = this.loginDetails.customer_id;
        
        let formData: FormData = new FormData();
        formData.append('data', JSON.stringify(data));
        
        if(this.profile_image && this.profile_image != '' && this.profile_image != undefined && this.profile_image != 'undefined' && this.profile_image != null && this.profile_image != 'null'){
          formData.append('profile_image', this.profile_image);
        }
        
        this.webService.multipart_post('edit_customer_profile', formData).subscribe(response => {
          if ( response.status == '1') {
            const userData = this.webService.getLocalStorageItem('userData');
            this.webService.removeLocalStorageItem(userData);
            
            let ret_profile_image = (response.profile_image && response.profile_image != undefined && response.profile_image != 'undefined' && response.profile_image != null && response.profile_image != 'null')?response.profile_image:this.loginDetails.profile_image;
            this.imageUrl = ImageStorage+ret_profile_image;
            
            let newUserData = {"customer_id":this.loginDetails.customer_id,
            "phone":data.phone,
            "email":data.email,
            "address":data.address,
            "last_name":data.last_name,
            "first_name":data.first_name,
            "profile_image":ret_profile_image,
            "status":"1"}
            this.webService.setLocalStorageItem('userData', JSON.stringify(newUserData));
            
            response.status = 'success';
            this.profileEditResp = response;
            this.loader = false;
          } else {
            response.status = 'error';
            response.message = (response.message == '')?this.errorMsg.errorList.req_failure:response.message; 
            
            this.profileEditResp = response;
            this.loader = false;
          }
        },error => {
          this.loader = false;
          this.profileEditResp = {'status':'error','message':this.errorMsg.errorList.req_failure};
        },() => {
          setTimeout( function() {
            This.profileEditResp = false;
          }, 2000)
        });
      }
      
      vehicleDetailsFormSubmit(vehicleData){
        if(this.vehicleDetailsAddForm.invalid){
          this.vehicleDetailsFormSubmitClick = true;
          return false;
        }
        let location;
        this.vehicleDetailsFormSubmitClick = false;
        vehicleData.car_maker = this.selBrand;
        this.ngZone.run(() => {
          let place: google.maps.places.PlaceResult = this.autocompleteDetails.getPlace();
          if (place == undefined || place == null || place === undefined || place === null || 
            place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null || 
            place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
              this.searchLocError = true;
              return;
            }
            
            location = {'location':place.formatted_address,
            'location_lat':place.geometry.location.lat(),
            'location_lng':place.geometry.location.lng()
          };
        });
        
        this.addCustomerCar(1,vehicleData,location);
      }
      
      vehicleVinFormSubmit(vehicleData){
        if(this.vehicleVinAddForm.invalid){
          this.vehicleVinFormSubmitClick = true;
          return false;
        }
        
        let location;
        this.vehicleVinFormSubmitClick = false;
        this.ngZone.run(() => {
          let place: google.maps.places.PlaceResult = this.autocompleteVin.getPlace();
          if (place == undefined || place == null || place === undefined || place === null || 
            place.geometry == undefined || place.geometry == null || place.geometry === undefined || place.geometry === null || 
            place.formatted_address == undefined || place.formatted_address == null || place.formatted_address === undefined || place.formatted_address === null) {
              this.searchLocError = true;
              return;
            }
            
            location = {'location':place.formatted_address,
            'location_lat':place.geometry.location.lat(),
            'location_lng':place.geometry.location.lng()
          };
        });
        
        this.addCustomerCar(2,vehicleData,location);
      }
      
      addCustomerCar(type,vehicleData,location){
        vehicleData['lastMaintanceDate'] = (vehicleData['last_date'])?(formatDate(vehicleData['last_date'],'MM/dd/yyyy','en')):'';

        this.loader = true;
        let postData = {'type':type,'customer_id':this.loginDetails.customer_id,'vehicleData':vehicleData,'location':location};
        
        this.webService.post_data('addCustomerCar',postData).subscribe(response => {
          if ( response.status == '1' ) {
            this.getCustVehDetails();
            this.closeVehicleAddFormRef.nativeElement.click();
            this.resetVehicleForm();
            this.loader = false;
          } else {
            this.loader = false;
            this.errMessage = {'errMsg':response.message}
                setTimeout (() => {
                        this.errMessage = false;
                  }, 2000);
          }
        });
      }
      
      deleteCustomerCar(params){
        this.loader = true;
        this.webService.post_data('deleteCustomerCar', params).subscribe(response => {
          if ( response.status == '1' ) {
            this.getCustVehDetails();
            this.loader = false;
          }
        });
      }

      changeVehicleReminder(params){
        this.loader = true;
        this.webService.post_data('changeReminderStatus', params).subscribe(response => {
          if ( response.status == 'success' ) {
            this.getCustRemainders();
          }
          this.loader = false;
        });
      }
      
      optImgUpload(image_id,event){
        let reader = new FileReader();
        let optionalImg: any = event.target.files[0];
        
        reader.onloadend = () => {
          switch (image_id){
            case 1:
            this.optionalImges[1] = {'file':event.target.files[0],'file_url':reader.result};
            break;
            case 2:
            this.optionalImges[2] = {'file':event.target.files[0],'file_url':reader.result};
            break;
            case 3:
            this.optionalImges[3] = {'file':event.target.files[0],'file_url':reader.result};
            break;
            case 4:
            this.optionalImges[4] = {'file':event.target.files[0],'file_url':reader.result};
            break;
          }
        }
        reader.readAsDataURL(optionalImg);
      }
      
      imageUpload(e) {
        let reader = new FileReader();
        this.profile_image = e.target.files[0];
        reader.onloadend = () => {
          this.imageUrl = reader.result;
        }
        reader.readAsDataURL(this.profile_image);
      }
      
      resetVehicleForm(){
        this.vehicleVinAddForm.reset();
        this.vehicleDetailsAddForm.reset({
          maker: '', modelYear: '', modelName: '', location: '', last_date: '', maintanence_interval: '',engine: '',trim: ''
        });
      }
      
      routeToIndex(){
        this.router.navigate(["index"]);
      }
      
      bookVechile(customer_veh_id){
        this.loader = true;
        
        const thisObj = this;
        thisObj.vehDetails.forEach(function (vehData) {
          if(vehData.customer_veh_id == customer_veh_id){
            thisObj.wizardData = {'pickup_data': 
            {'pickup_loc':vehData.car_location,
            'pickup_lat':vehData.car_loc_lat,
            'pickup_lng':vehData.car_loc_lng
          }
        };
        
        thisObj.wizardData['vechile_info'] = {'trim':'','milage':'','emgine':'',
        'maker':vehData.car_maker,
        'modelName':vehData.car_model,
        'modelYear':vehData.car_model_year,
        'maintanenceInterval':vehData.maintanence_interval,
        'lastMaintanceDate':vehData.last_maintenance_date
      };
      
      thisObj.wizardData['customer_vehicle_id'] = vehData.customer_veh_id;
    }
  }); 
  this.getIssueData();
}

getIssueData(){
  const This = this;
  this.loader = true;
  this.webService.get_data('getGeneralIssues').subscribe(response => {
    if(response.status == '1'){
      this.issuesData = response.issue_data;
      this.defIssuesData = this.issuesData;
      this.loader = false;
    } else {
      this.loader = false;
      return false;
    }
  },error => {
    this.loader = false;
    return false;
  });
}

searchIssues(event){
  if(event.target.value == '' || event.target.value == 'undefined' || event.target.value == undefined || event.target.value == 'null' || event.target.value == null ){
    this.issuesData = this.defIssuesData;
  } else {
    const thisObj = this;
    let subCatArr: any;
    let data: any[] = new Array();
    let serRegExp = new RegExp(event.target.value,"gi");
    
    thisObj.defIssuesData.forEach(function (issues,index) {
      let issueCat = issues.issue;
      if(issueCat.search(serRegExp) != -1){
        data.push(thisObj.defIssuesData[index]);
      } else {
        subCatArr = issues.sub_categories;
        subCatArr.forEach(function (issues_cat) {
          let sub_issue_cat = issues_cat.issue_category;
          if(sub_issue_cat.search(serRegExp) != -1){
            data.push(thisObj.defIssuesData[index]);
          }
        });
      }
    });
    this.issuesData = (data.length > 0)?data:false;
  }
  
  setTimeout(()=>{
    this.selectedIssues.forEach(function (issues) {
      $('[id="issue_'+issues.issue_id+'_'+issues.sub_issue_id+'"]').prop('checked', true);
    });
  },500);
}

// searchIssues(event){
//   if(event.target.value == '' || event.target.value == 'undefined' || event.target.value == undefined || event.target.value == 'null' || event.target.value == null ){
//     this.issuesData = this.defIssuesData;
//   } else {
//     const thisObj = this;
//     let data: any[] = new Array();
//     let serRegExp = new RegExp(event.target.value,"gi");
//     thisObj.defIssuesData.forEach(function (issues,index) {
//       let issueCat = issues.issue;
//       let subIssueCat =issues.sub_categories;
//       if(issueCat.search(serRegExp) != -1){
//         thisObj.defIssuesData['exception'] = '0';
//         data.push(thisObj.defIssuesData[index]);
//       }else {
//         issues.sub_categories.forEach(function (issues_cat_1,index_1) {
//           let subIssueCat = issues_cat_1.issue_category;
//           if(subIssueCat.search(serRegExp) != -1){
//             thisObj.defIssuesData['exception'] = '1';
//             data.push(thisObj.defIssuesData[index]);
//           }
//         })
//       }
//     });
//     this.issuesData = (data.length > 0)?data:false;
//   }

//   setTimeout(()=>{
//     this.selectedIssues.forEach(function (issues) {
//       $('[id="issue_'+issues.issue_id+'_'+issues.sub_issue_id+'"]').prop('checked', true);
//     });
//   },500);
// }

jumpToStep3(){
  if(this.selectedIssues.length != 0){
    this.step3nextRef.nativeElement.click();
  }
}

getQuote(){
  const thisObj = this;
  this.loader = true;
  
  let selSubIssues: any[] = new Array();
  thisObj.selectedIssues.forEach(function (selIssues) {
    selSubIssues.push(selIssues.sub_issue_id);
  });
  let searchData = {'pickup_data':this.wizardData.pickup_data,'sub_issues':selSubIssues}
  this.webService.post_data('getNearByMechanics',searchData).subscribe(response => {
    if(response.status == '1'){
      this.mechanicData = response.mechanic_data;
      this.dateSection.push(new Date(this.today.setDate(this.today.getDate())));
      this.dateSection.push(new Date(this.today.setDate(this.today.getDate() + 1)));
      
      this.loader = false;
    } else {
      this.loader = false;
      return false;
    }
  },error => {
    this.loader = false;
    return false;
  });
}

onMouseOver(infoWindow, gm) {
  if (gm.lastOpen != null) {
    gm.lastOpen.close();
  }
  gm.lastOpen = infoWindow;
  infoWindow.open();
}

onMouseOut(gm){
  if (gm.lastOpen != null) {
    gm.lastOpen.close();
  }
}

next(event) {
  if(this.dateStep > 30){
    this.showLeftArrow = true;
    this.showRightArrow = false;
    return false;
  }
  this.showLeftArrow = true;
  this.showRightArrow = true;
  this.dateSection = new Array();
  this.nextDate.setDate(this.nextDate.getDate() + 1);
  this.currDate.setDate(this.currDate.getDate() + 1);
  this.dateSection[0] = new Date(this.currDate);
  this.dateSection[1] = new Date(this.nextDate);
  this.dateStep += 1;
}

prev(event) {
  if(this.dateStep <= 0){
    this.showLeftArrow = false;
    this.showRightArrow = true;
    return false;
  }
  this.showLeftArrow = true;
  this.showRightArrow = true;
  this.dateSection = new Array();
  this.nextDate.setDate(this.nextDate.getDate() - 1);
  this.currDate.setDate(this.currDate.getDate() - 1);
  this.dateSection[0] = new Date(this.currDate);
  this.dateSection[1] = new Date(this.nextDate);
  this.dateStep -= 1;
}

getSchedule(time,index){
  this.wizardData['schedule_date'] = {'date':this.formatDate(this.dateSection[index]),'time':time};
}

formatDate(date) {
  const d = new Date(date);
  let day = '' + d.getDate();
  let month = ''+(d.getMonth()+1);
  const year = d.getFullYear();
  if (day.length < 2) { day = '0'+day; }
  if (month.length < 2) { month = '0'+month; }
  return [year,month,day].join('-');
}

scheduleNow(mechanic_id,cost){
  this.wizardData['mechanic_id'] = mechanic_id+':'+cost;
  
  if(!this.loginDetails){
    this.routeToIndex();
  }
  this.loader = true;
  
  this.wizardData['cost'] = cost;
  this.wizardData['multiple'] ='0';
  this.confirmBooking();
}

scheduleMultipleRequest(){
  if(!this.loginDetails){
    this.routeToIndex();
  }
  let coma = '';
  const thisObj = this;
  this.mechanics = '';
  this.selMechanics.forEach(function (mechanic_data) {
    thisObj.mechanics += coma+mechanic_data.mechanic_id+':'+mechanic_data.amount; 
    coma = ',';
  })      
  this.wizardData['mechanic_id'] = thisObj.mechanics;
  this.wizardData['cost'] = this.estimatedPrice;
  this.wizardData['multiple'] ='1';
  this.confirmBooking();
}

confirmBooking(){
  this.wizardData['customer_id'] = this.loginDetails.customer_id;
  this.wizardData['selected_issues'] = this.selectedIssues;
  this.wizardData['optionalDescription'] = this.optionalDescription;
  
  let formData: FormData = new FormData();
  formData.append('data', JSON.stringify(this.wizardData));
  
  this.optionalImges.forEach(function (imgData,index) {
    if(!imgData){
      return true;
    }
    formData.append("optFile_" + (index), imgData.file);
  });
  
  this.webService.multipart_post('scheduleNow', formData).subscribe(response => {
    // this.webService.post_data('scheduleNow',this.wizardData).subscribe(response => {
    if(response.status == '1'){
      this.closeWizardRef.nativeElement.click();
      this.closeQuoteWizardRef.nativeElement.click();
      
      this.goTostep1Ref.nativeElement.click();
      this.selectedIssues = [];
      
      this.appointmentTabRef.nativeElement.click();
      
      this.getCustBookDetails();
    } else {
      this.loader = false;
      return false;
    }
  },error => {
    this.loader = false;
    return false;
  });
}

resetQuoteWizard(){
  this.selectedIssues = [];
  this.scheduleMechanic = false;
  this.scheduleDateInit = false;
  this.goTostep1Ref.nativeElement.click();
  
  this.optionalImges[1] = false;
  this.optionalImges[2] = false;
  this.optionalImges[3] = false;
  this.optionalImges[4] = false;
  this.optionalDescription = '';
}

showCustQuote(booking_id,mechanic_id,type){
  if(!booking_id || !mechanic_id){
    return false;
  }
  this.loader = true;
  const thisObj= this;
  
  if(type == '2'){
    thisObj.successBookDtls = this.bookingDetails;
  }
  thisObj.successBookDtls.forEach(function (data,index) {
    if(data.booking_id == booking_id){
      // let bookdata = data;
      data.mechanic_data.forEach(function (mechdata,mechindex) {
        if(mechdata.mechanic_id == mechanic_id){
          let mechdatadetails = mechdata;
          thisObj.mechCustQuote = mechdatadetails.custom_service_quote;
        }
      })
    }
  });
  this.loader = false;
}

cancelBooking(booking: any){
  let bookingId: number;
  if(!booking.bookingId){
    return false;
  }
  bookingId = booking.bookingId;
  
  this.loader = true;
  this.webService.post_data('cancelBooking', {'customer_id':this.loginDetails.customer_id,'booking_id':bookingId}).subscribe(response => {
    if ( response.status == '1' ) {
      this.getCustBookDetails();
      this.loader = false;
    }
  });
}

purchase(carId){
  this.goToPage('productlist',{'car_id':carId})
}

mechanicQuoteAccept(event,booking_id,mechanic_id){
  if(!booking_id || !mechanic_id){
    return false;
  }
  
  let amount = event.target.attributes.bookAmount.value;
  this.showConfirmPopUp('acceptQuote',{bookingId:booking_id,mechanicId:mechanic_id,amount:amount});
}

cnfCancelBook(booking_id){
  if(!booking_id){
    return false;
  }
  this.showConfirmPopUp('cancelBooking',{bookingId:booking_id});
}

cnfdeleteCustomerCar(customer_id,vehicle_id){
  if(!customer_id || !vehicle_id){
    return false;
  }
  this.showConfirmPopUp('deleteCustomerCar',{'customer_id':customer_id,'customer_veh_id':vehicle_id});
}

cnfdeleteVehReminder(customer_veh_id,status){
  if(!customer_veh_id){
    return false;
  }
  this.showConfirmPopUp('changeVehicleReminder',{'customer_veh_id':customer_veh_id,'status':status});
}

showConfirmPopUp(fn_name: string, param: any){
  if(fn_name === ''){
    return false;
  }
  if(param){
    param = JSON.stringify(param);
  }
  this.confirmParam = param;
  this.confirmCallBak = fn_name;
  this.confirmModalRef.nativeElement.click();
}

confirmCallBack(fn_name: string,param: string){
  if(fn_name === '' || !this[fn_name]){
    return false;
  }
  if(param !== ''){
    param = JSON.parse(param);
    this[fn_name](param);
  } else {
    this[fn_name]();
  }
}

acceptQuote(param: any){
  this.loader=true;
  this.webService.post_data('acceptMechanicQuote',param).subscribe(response => {
    if(response.status == 'success'){
      document.location.href = this.serverUrl+'payNow/'+response.data;
      // this.getCustBookDetails();
    }else{
      this.loader = false;
      this.failureModelRef.nativeElement.click();
    }
  })
}

checkboxChange(index,mechanic_id,event,estimate){
  if (event.target.checked) {
    this.selMechanics.push({id:index,mechanic_id:mechanic_id,amount:estimate});
  } else {
    let id = this.selMechanics.findIndex(x => x.id == index);
    if (id != -1) {
      this.selMechanics.splice(id, 1);
    }
  }
}

goToPage(path,data=null){
  this.router.navigate([path],{queryParams:  data});
  document.body.scrollTop  =  document.documentElement.scrollTop  =  0;
}

scrollToTop(id){
  $('#'+id).stop().animate({scrollTop: 0}, 800);
}

scrollToBottom(id){
  $('#'+id).stop().animate({scrollTop: $('#'+id)[0].scrollHeight}, 1500);
}

tab_swap(type) { this.tab = type; }
}
