import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
// import firebase from 'firebase/compat/app';
import 'firebase/compat/auth'
import 'firebase/compat/firestore'
import { NgxSpinnerService } from 'ngx-spinner';
import { ToastrService } from 'ngx-toastr';
import { Cities } from '../../entities/cities';
import { Leads } from '../../entities/leads';
import { CommonService } from '../../shared/services/common/common.service';
import { GlobalService } from '../../shared/services/common/global.service';
import { LinkService } from '../../shared/services/link.service';
import { LeadService } from '../../shared/services/loanService/lead.service';
import { environment } from '../../../../environments/environment';
import Swal from 'sweetalert2';
import { DocumentMasters } from '../../entities/documentMasters';

@Component({
  selector: 'app-professional-loan',
  templateUrl: './professional-loan.component.html',
  styleUrls: ['./professional-loan.component.scss']
})
export class ProfessionalLoanComponent implements OnInit {
  // public isVerifyOtp: boolean = true;
  // //public isShow: boolean = true;
  // public isDetailForm: boolean = false;
  // public isPersonalDetailForm: boolean = false;
  // public mobileNumber: number = 0;
  // public isOtpInput: boolean = false;
  // public mobileNo: number = 0;
  // public interest_rate: number
  // public payment: string = "0.00";
  // public months: number = 0;
  // public interest: string = "0.00";
  // public amountPayable: string = "0.00";
  // public displayAmount: string = "0.00";
  // public test: any;
  // public amount: number = 0;
  // public contactForm: FormGroup;
  // public basicDetailForm: FormGroup;
  // public detailForms: FormGroup;
  // public reCaptchaVerifier: any;
  // public otp: any;
  // public verify: any;
  // public cities: Cities[] = new Array<Cities>();
  // public selectedTab: string = "Overview";
  // // public cities: any = [
  // //   {
  // //     name: "Bardoli"
  // //   },
  // //   {
  // //     name: "Surat"
  // //   },
  // //   {
  // //     name: "Kamrej"
  // //   },
  // //   {
  // //     name: "Ahmedabad"
  // //   }

  // // ];
  // public selectedCity: any :any = [] :any = [];
  // public serviceId: number = 0;
  // public leads = new Leads();
  // public city: string = "";
  // public _title: string = '';
  // public isAgreed: boolean = false;
  // public agreedmsg: string = '';
  // public faqs = [
  //   {
  //     que: "Why should I use the EMI calculator for a professional loan in India?",
  //     ans: "The key benefit of using this digital tool is that it makes loan planning easier. It allows you to correctly calculate the cost of borrowing and make selections that best suit your needs.",
  //     isCollapsed: false
  //   },
  //   {
  //     que: "How to Reduce the Monthly Professional Loan Installment Payment?",
  //     ans: "<p>When borrowing sensibly, it's vital to keep your monthly payments modest. Monthly payments that are reasonable offer two benefits: they help you to pay your bills onschedule and save you from sliding into default. To earn the rewards, follow these steps:</p><ul class='padding'> <li>Increase the amount of money you put down.</li>  <li>Take out a loan with a lower interest rate.</li> <li>During the loan's term, make payments to the lender</li><li>You must first pick whether or not you want to transfer your balance.</li> <li>Make an effort to persuade your lender to lower your interest rate.  </li> <li>You should look for a job that would provide you with long-term employment.</li> </ul>",
  //     isCollapsed: true
  //   },
  //   {
  //     que: "How can I access the professional loan online repayment schedule?",
  //     ans: "The accelerated depreciation schedule is another name for the online repayment schedule. To get to this table, first figure out how much your professional loan EMI is, then click 'Check Repayment Schedule.' This will bring up an interactive window where you can view the entire payback schedule.",
  //     isCollapsed: true
  //   },
  //   {
  //     que: "Do I have to pay to use the professional loan monthly EMI calculator?",
  //     ans: "No. The expert loan calculator is available online for free and can be used as many times as you need it.",
  //     isCollapsed: true
  //   },
  //   {
  //     que: "Can I access the repayment schedule offline?",
  //     ans: "Yes. Simply compute the results for the selected loan particulars and then click on 'Download Repayment Schedule' to view this schedule offline. This will initiate the download of a '.PDF' file with the payback details",
  //     isCollapsed: true
  //   },
  // ];

  public leads = new Leads();
  public basicDetailForm: FormGroup;
  public selectedCity: any;
  public cities: Cities[]  = [];
  public serviceId: number = 0;
  public city: string = "";
  public _title: string = '';
  public payment: string = "0.00";
  public interest: string = "0.00";
  public amountPayable: string = "0.00";
  public displayAmount: string = "0.00";
  public test: any
  public emiCalculatorForm: FormGroup;
  public documentMasters: DocumentMasters[] = new Array<DocumentMasters>();
  public customFieldForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private commonService: CommonService,
    private toastrService: ToastrService,
    private leadService: LeadService,
    private globalService: GlobalService,
    private meta: Meta,
    private title: Title,
    private route: ActivatedRoute,
    @Inject(PLATFORM_ID) public platformId: object,
    private spinnerService: NgxSpinnerService,
    private linkService: LinkService
  ) {
    this.linkService.createLinkForCanonicalURL();
    let sub = this.route.params.subscribe(async (params) => {
      this.city = params['city'] ? params['city'] : '';
      if (this.city) {
        if (isPlatformBrowser(this.platformId))
          sessionStorage.setItem("selectedCity", this.city);
      }
    });
    // let cityList;
    // if (isPlatformBrowser(this.platformId))
    //   cityList = sessionStorage.getItem("cityList");
    // let isCityAvailable = false;
    // if (cityList) {
    //   let cityArray = JSON.parse(cityList) as string[];
    //   isCityAvailable = cityArray.findIndex(c => c == this.city.toLowerCase()) > -1;
    // }

    //if (isCityAvailable) {
    this._title = `Grow your expertise without any financial worry with professional business loans in ` + this.city
    this.route.snapshot.data['title'] = this._title;
    this.title.setTitle(this.route.snapshot.data['title']);

    this.meta.updateTag({
      name: 'description', content: ' Featured with easy eligibility criteria and instant approval procedure, avail professional loan in ' + this.city + ' at minimum rates and fulfill professional expenses.'
    });
    this.meta.updateTag({
      name: 'author', content: `Credit`
    });
    this.meta.updateTag({
      name: 'og:locale', property: "og:locale", content: `en_US`
    });
    this.meta.updateTag({
      name: 'og:title', property: "og:title", content: `Grow your expertise without any financial worry with professional business loans in ` + this.city
    });
    this.meta.updateTag({
      name: 'og:description', property: "og:description", content: 'Featured with easy eligibility criteria and instant approval procedure, avail professional loan in ' + this.city + ' at minimum rates and fulfill professional expenses.'
    });
    this.meta.updateTag({
      name: 'og:url', property: "og:url", content: `https://credit.nsserver.in`
    });
    this.meta.updateTag({
      name: 'og:site_name', property: "og:site_name", content: `Credit`
    });
    this.meta.updateTag({
      name: 'og:type', property: "og:type", content: `Website`
    });
    this.meta.updateTag({
      name: 'og:image', property: "og:image", content: `https://credit.nsserver.in/assets/img/logo/logo.webp`
    });
    this.meta.updateTag({
      'http-equiv': "X-UA-Compatible", content: "IE=edge"
    });
    this.meta.updateTag({
      name: 'copyright', content: `Copyright 2022, Credit`
    });
    this.meta.updateTag({
      name: 'robots', content: `index, follow`
    });
    this.meta.updateTag({
      name: 'Googlebot', content: `Index, Follow`
    });
    this.meta.updateTag({
      name: 'rating', content: `Safe For Kids`
    });
    this.meta.updateTag({
      name: 'tweeter:card', content: `compare & apply for business loan`
    });
    this.meta.updateTag({
      name: 'tweeter:title', content: `compare & apply for business loan`
    });
    this.meta.updateTag({
      name: 'tweeter:description', content: 'Featured with easy eligibility criteria and instant approval procedure, avail professional loan in ' + this.city + ' at minimum rates and fulfill professional expenses.'
    });
    this.meta.updateTag({
      name: 'tweeter:site', content: `Credit`
    });
    this.meta.updateTag({
      name: 'tweeter:image', content: `https://credit.nsserver.in/assets/img/logo/logo.webp`
    });


    this.basicDetailForm = formBuilder.group({
      'contactNo': [null, [Validators.minLength(10)]],
      'loanAmount': [null, [Validators.required]],
      'customerFullName': [null, [Validators.required]],
      'cityName': [null, [Validators.required]],
      'pincode': [null, [Validators.required, Validators.minLength(6)]],
      //'email': [null, [Validators.required, Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$")]],
      'annualIncome': [null, [Validators.required]],
      // 'panCardNo': [null, [Validators.required, Validators.pattern('[A-Z]{5}[0-9]{4}[A-Z]{1}')]],
    })
    this.emiCalculatorForm = formBuilder.group({
      'amount': [null, [Validators.required]],
      'interest_rate': [null, [Validators.required]],
      'months': [null, [Validators.required]],
    })
    // this.contactForm = formBuilder.group({
    //   'contactNo': [null, [Validators.required, Validators.minLength(10)]],
    // });
    // this.detailForms = formBuilder.group({
    //   'experience': [null, [Validators.required]],
    //   'annualIncome': [null, [Validators.required]],
    //   'aadhaarCardNo': [null, [Validators.required, Validators.pattern('^[2-9]{1}[0-9]{3}[0-9]{4}[0-9]{4}$')]],
    //   'panCardNo': [null, [Validators.required, Validators.pattern('[A-Z]{5}[0-9]{4}[A-Z]{1}')]],
    // })
  }

  async ngOnInit() {
    //firebase.initializeApp(environment.firebase)
    //setTimeout(() => {
    //  this.isShow = false;
    //}, 1000);
    // this.cities = await this.commonService.getCitites();
    // this.selectedCity = [...this.cities];
    this.serviceId = this.commonService.getServiceId("Professional Loan");
    console.log(this.serviceId);
    await this.getDocumentMaster();
    if (this.documentMasters && this.documentMasters.length > 0) {
      this.customFieldForm = this.formBuilder.group({})
      for (let index = 0; index < this.documentMasters.length; index++) {
        if (this.documentMasters[index].allowDocumentField) {
          this.customFieldForm.addControl(this.documentMasters[index].documentFieldName, this.formBuilder.control(''));
        }
      }
    }
    //this.setStep(0, 'initial')
  }

  // public verifyOtp() {
  //   this.isOtpInput = true;
  //   this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  // }

  // public async detailForm(isNext?: boolean) {
  //   if (isNext == true) {
  //     this.isDetailForm = true;
  //     this.isPersonalDetailForm = false;
  //     try {
  //       //this.isShow = true;
  //       if (this.leads.id) {
  //         let id = this.leads.id
  //         this.leads = this.basicDetailForm.value;
  //         this.leads.serviceId = this.serviceId;
  //         this.leads.cityId = this.basicDetailForm.value.cityName.id;
  //         this.leads.id = id;
  //         this.leads.countryCode = "+91";
  //         let res = await this.leadService.updateLeads(this.leads);
  //         if (res && res.status == 200) {
  //         }
  //       }
  //       else {
  //         this.leads = this.basicDetailForm.value;
  //         this.leads.serviceId = this.serviceId;
  //         this.leads.cityId = this.basicDetailForm.value.cityName.id;
  //         this.leads.countryCode = "+91";
  //         let res = await this.leadService.insertLeads(this.leads);
  //         if (res && res.status == 200) {
  //           if (res.recordList && res.recordList.length > 0) {
  //             this.leads.id = res.recordList[0].id
  //           }
  //         }
  //       }
  //       //this.isShow = false;
  //       this.isDetailForm = true;
  //       this.isPersonalDetailForm = false;
  //     } catch (error: any) {
  //       //this.isShow = false;
  //       let err = error;
  //       if (error && error.error && error.error.message) {
  //         err = error.error.message
  //       }
  //       this.toastrService.error(err, "Error");
  //     }

  //   }
  //   else if (isNext == false) {
  //     this.isDetailForm = false;
  //     this.isPersonalDetailForm = true;
  //   }
  //   else {
  //     if (this.isAgreed)
  //       if (this.leads.id) {
  //         try {
  //           //this.isShow = true;
  //           let id = this.leads.id
  //           this.leads = this.basicDetailForm.value;
  //           this.leads.aadhaarCardNo = this.detailForms.value.aadhaarCardNo
  //           this.leads.panCardNo = this.detailForms.value.panCardNo
  //           this.leads.experience = this.detailForms.value.experience
  //           this.leads.annualIncome = this.detailForms.value.annualIncome
  //           this.leads.serviceId = this.serviceId;
  //           this.leads.cityId = this.basicDetailForm.value.cityName.id;
  //           this.leads.id = id;
  //           this.leads.countryCode = "+91";
  //           let res = await this.leadService.updateLeads(this.leads);
  //           if (res && res.status == 200) {
  //             this.sucessReponse();
  //           }
  //           //this.isShow = false;
  //         } catch (error: any) {
  //           //this.isShow = false;
  //           let err = error;
  //           if (error && error.error && error.error.message) {
  //             err = error.error.message
  //           }
  //           this.toastrService.error(err, "Error");
  //         }
  //       }
  //       else {
  //         this.agreedmsg = "Please agree to our terms & Condition";
  //       }
  //   }

  // }

  // public calculateLoan() {
  //   if (this.amount && this.interest_rate && this.months) {
  //     let rate = this.interest_rate / (12 * 100);
  //     let rate1 = (Math.pow(1 + rate, this.months))
  //     let payment = this.amount * rate * (rate1 / (rate1 - 1));
  //     this.payment = payment.toFixed(2);
  //     this.amountPayable = (parseFloat(this.payment) * this.months).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  //     this.interest = (parseFloat(this.payment) * this.months - this.amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  //     this.displayAmount = this.amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  //   }
  // }

  // //#region getOtp
  // public getOtp() {
  //   // this.isVerifyOtp = false;
  //   // this.isPersonalDetailForm = true;
  //   // this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //   // this.isOtpInput = true;
  //   this.spinnerService.show();
  //   this.reCaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', { size: 'invisible' })
  //   firebase.auth().signInWithPhoneNumber('+91' + this.contactForm.value.contactNo, this.reCaptchaVerifier).then((confirmationResult) => {
  //     if (confirmationResult && confirmationResult.verificationId) {
  //       this.verify = JSON.parse(JSON.stringify(confirmationResult.verificationId));
  //       this.isOtpInput = true;
  //       this.spinnerService.hide();
  //     }
  //   }).catch((error) => {
  //     this.spinnerService.hide();
  //     //alert(error.message);
  //     this.toastrService.error(error.message, "Firebase");
  //     setTimeout(() => {
  //       window.location.reload();
  //     }, 5000);
  //   });
  // }

  // public onOtpChange(otpCode: any) {
  //   this.otp = otpCode;
  // }

  // public handleClick() {
  //   // this.isVerifyOtp = false;
  //   this.spinnerService.show();
  //   // this.isPersonalDetailForm = true;
  //   // this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //   // this.getLeadsByContactNo();
  //   var credential = firebase.auth.PhoneAuthProvider.credential(this.verify, this.otp);
  //   firebase.auth().signInWithCredential(credential)
  //     .then((response) => {
  //       this.isVerifyOtp = false;
  //       this.spinnerService.hide();
  //       this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //       //this.isShow = true;
  //       this.getLeadsByContactNo();
  //       //this.isShow = false;
  //       this.isPersonalDetailForm = true;
  //     }).catch((error) => {
  //       this.spinnerService.hide();
  //       this.commonService.showWarning();
  //       //alert(error.message);
  //       // this.toastrService.error(error.message, "Firebase");
  //     });
  // }
  // //#endregion

  // public onKey(value) {
  //   this.selectedCity = this.search(value);
  // }

  // public search(value: string) {
  //   let filter = this.cities.filter(item =>
  //     item.name.toLowerCase().includes(value.toLowerCase())
  //   );
  //   return [...filter];
  // }

  // public async getLeadsByContactNo() {
  //   try {
  //     let res = await this.globalService.getLeadsByContactNo(this.contactForm.value.contactNo, this.serviceId);
  //     if (res && res.status == 200) {
  //       if (res.recordList && res.recordList.length > 0) {
  //         this.leads = res.recordList[0];
  //         if (res.recordList[0].pincode) {
  //           let data = await this.getCityByPincode(res.recordList[0].pincode);
  //         }
  //         this.basicDetailForm.setValue(
  //           {
  //             "contactNo": this.leads.contactNo,
  //             "loanAmount": this.leads.loanAmount,
  //             "customerFullName": this.leads.customerFullName,
  //             "panCardNo": this.leads.panCardNo,
  //             "pincode": this.leads.pincode ? this.leads.pincode : null,
  //             "cityName": this.cities.find((c:any) => c.id == this.leads.cityId),
  //             "email": this.leads.email
  //           }
  //         )
  //         this.detailForms.setValue(
  //           {
  //             "aadhaarCardNo": this.leads.aadhaarCardNo,
  //             "panCardNo": this.leads.panCardNo,
  //             "annualIncome": this.leads.annualIncome,
  //             "experience": this.leads.experience
  //           }
  //         )
  //       }
  //     }
  //   } catch (error: any) {
  //     //this.isShow = false;
  //     let err = error;
  //     if (error && error.error && error.error.message) {
  //       err = error.error.message
  //     }
  //     this.toastrService.error(err, "Error");
  //   }
  // }
  //  public setStep(n: any, initial?: string) {
  //   if (initial) {
  //     this.faqs[0].isCollapsed = false;
  //   }
  //   else {
  //     if (this.faqs[n].isCollapsed == false) {
  //       this.faqs[n].isCollapsed = true;
  //     }
  //     else {
  //       for (let index = 0; index < this.faqs.length; index++) {
  //         if (this.faqs[index].isCollapsed == false) {
  //           this.faqs[index].isCollapsed = true;
  //         }
  //       }
  //       this.faqs[n].isCollapsed = false;
  //     }
  //   }
  // }

  public async getDocumentMaster() {
    try {
      let res = await this.globalService.getDocumentMaster();
      if (res && res.status == 200) {
        this.documentMasters = res.recordList;
      }
    } catch (error: any) {
      this.toastrService.error(error)
    }
  }

  public async detailForm() {
    if (this.basicDetailForm.valid) {
      try {

        this.spinnerService.show();
        this.leads = this.basicDetailForm.value;
        this.leads.serviceId = this.serviceId;
        this.leads.cityId = this.basicDetailForm.value.cityName.id;
        this.leads.countryCode = "+91";

        // this.leads.employmentTypeId = this.basicDetailForm.value.employmentTypeId.id;
        // if (this.basicDetailForm.value.employmentTypeId == "Self Employee") {
        //   this.leads.employmentTypeId = 2;
        //   this.leads.annualIncome = this.basicDetailForm.value.income
        // }
        // else if (this.basicDetailForm.value.employmentTypeId == "Salaried") {
        //   this.leads.monthlyIncome = this.basicDetailForm.value.income
        //   this.leads.employmentTypeId = 1;
        // }
        if (this.documentMasters && this.documentMasters.length > 0) {
          for (let index = 0; index < this.documentMasters.length; index++) {
            if (this.documentMasters[index].allowDocumentField)
              this.documentMasters[index].documentData = this.customFieldForm.get(this.documentMasters[index].documentFieldName)?.value
          }
          this.leads.customfields = this.documentMasters
        }
        let res = await this.leadService.insertLeads(this.leads);
        if (res && res.status == 200) {
          this.sucessReponse();
        }

        this.spinnerService.hide();
      } catch (error: any) {
        this.spinnerService.hide();
        let err = error;
        if (error && error.error && error.error.message) {
          err = error.error.message
        }
        this.toastrService.error(err, "Error");
      }
    }
    else {
      Object.keys(this.basicDetailForm.controls).forEach(key => {
        this.basicDetailForm.controls[key].markAsTouched();
      });
    }
  }

  public sucessReponse() {
    //this.commonService.showSuccess();
    Swal.fire({
      icon: 'success',
      text: 'Your Professional loan inquiry is submitted successfully.',
      confirmButtonColor: '#0162e8'
    })
    // this.isDetailForm = false;
    // this.isVerifyOtp = true;
    // this.isOtpInput = false;
    this.leads = new Leads();
    this.basicDetailForm.reset();
    this.customFieldForm.reset();
  }

  public applyNow() {
    window.scroll({
      top: 0,
      left: 0,
      behavior: 'smooth'
    })
  }

  public async getCityByPincode(event: KeyboardEvent) {
    this.cities  = [];
    const value = (event.target as HTMLInputElement)!.value;;
    if (value && value.length == 6) {
      try {
        let res = await this.globalService.getCityByPincode(value);
        if (res && res.recordList.length > 0) {
          this.cities = res.recordList;
          this.selectedCity = [...this.cities]
          if (this.selectedCity && this.selectedCity.length > 0)
            this.basicDetailForm.get('cityName')?.setValue(this.selectedCity[0])
        }
      } catch (error: any) {
        let err = '';
        if (error && error.error.message) {
          err = error.error.message
        }
        else if (error && error.message) {
          err = error.message
        }
        this.toastrService.error(error);
      }

    }
  }

  public calculateLoan() {

    if (this.emiCalculatorForm.value.amount && this.emiCalculatorForm.value.interest_rate && this.emiCalculatorForm.value.months) {
      let rate = this.emiCalculatorForm.value.interest_rate / (12 * 100);
      let rate1 = (Math.pow(1 + rate, this.emiCalculatorForm.value.months))
      let payment = this.emiCalculatorForm.value.amount * rate * (rate1 / (rate1 - 1));
      this.payment = payment.toFixed(2);
      this.amountPayable = (parseFloat(this.payment) * this.emiCalculatorForm.value.months).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      this.interest = (parseFloat(this.payment) * this.emiCalculatorForm.value.months - this.emiCalculatorForm.value.amount).toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
      this.displayAmount = this.emiCalculatorForm.value.amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

    }
  }
  public keyPressAlphanumeric(event: { keyCode: number; preventDefault: () => void; }) {
    var inp = String.fromCharCode(event.keyCode);
    if (/[a-zA-Z0-9 ]/.test(inp)) {
      // only alphabet a-z A-Z
      return true;
    } else {
      event.preventDefault();
      return false;
    }
  }
}