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

let config = {
  apiKey: "AIzaSyBwWWPyMCr2qOFQxlM-4ui2gMCSkIsozss",
  authDomain: "credit-app-9be53.firebaseapp.com",
  projectId: "credit-app-9be53",
  storageBucket: "credit-app-9be53.appspot.com",
  messagingSenderId: "876031595606",
  appId: "1:876031595606:web:10da02dc14e23baff757f7",
  measurementId: "G-V9PFG9KFS9"
}
@Component({
  selector: 'app-personal-loan',
  templateUrl: './personal-loan.component.html',
  styleUrls: ['./personal-loan.component.scss']
})
export class PersonalLoanComponent implements OnInit {
  public payment: string = "0.00";
  //public isShow: boolean = false;
  public interest: string = "0.00";
  public amountPayable: string = "0.00";
  public displayAmount: string = "0.00";
  public test: any
  public emiCalculatorForm!: FormGroup;
  public customFieldForm!: FormGroup;
  // form = new FormGroup({
  //   mobileNo: new FormControl('', Validators.required),
  // });
  // public mobileNo = new FormControl('');
  // public isVerifyOtp: boolean = true;
  //public isShow: boolean = true;
  // public isDetailForm: boolean = false;
  // public isPersonalDetailForm: boolean = false;
  // public isOtpInput: boolean = false;
  // public selectedType: string = '';
  // public isAgreed: boolean = false;
  // public agreedmsg: string = '';
  //public selectedTab = "Overview"
  // public cities: any = [
  //   {
  //     name: "Bardoli"
  //   },
  //   {
  //     name: "Surat"
  //   },
  //   {
  //     name: "Kamrej"
  //   },
  //   {
  //     name: "Ahmedabad"
  //   }

  // ];
  // 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 amount: number = 0;
  //public contactForm: FormGroup;
  // public detailForms: FormGroup;
  // public reCaptchaVerifier: any;
  // public otp: any;
  // public verify: any;
  //public isCityAvailable: boolean;
  // public employmentTypes = [{
  //   name: "Salarised"
  // },
  // {
  //   name: "Self Employeed"
  // }]
  // public faqs = [
  //   {
  //     que: "Is there a formula for determining the proper monthly payment?",
  //     ans: "<p>The first step is to figure out how much money you have available each month to pay in EMIs. Using this information,you may calculate the EMI for various loan terms at a set interest rate. To make repayment of your loan as easy as possible,choose the  lowest possible monthly payment.</p>",
  //     isCollapsed: false
  //   },
  //   {
  //     que: "How do most banks figure out how much an EMI would cost?",
  //     ans: "Calculating an EMI for a loan is often done using a formula known as the declining balance technique. At the time of applying for the loan, it's a good idea to clarify this with the lender",
  //     isCollapsed: true
  //   },
  //   {
  //     que: " How do I alter the due date for my monthly payment on my personal loan?",
  //     ans: "Contact your lender's customer service if you wish to adjust your personal loan EMI payment date, and follow their instructions. Depending on the lender, the procedure for implementing this modification differs greatly",
  //     isCollapsed: true
  //   },
  //   {
  //     que: "Is the personal loan EMI calculator inclusive of the GST component?",
  //     ans: "Not yet. When calculating an EMI for a loan, EMI calculator does not include the GST component.",
  //     isCollapsed: true
  //   },
  // ]

  public leads = new Leads();
  public basicDetailForm: FormGroup;
  public selectedCity: any;
  public cities: Cities[] = new Array<Cities>();
  public serviceId: number = 0;
  public selectedEmployeeType: string = '';
  public employmentTypes: EmploymentType[] = new Array<EmploymentType>();
  public city: string = "";
  public _title: string = '';
  public documentMasters: DocumentMasters[] = new Array<DocumentMasters>();

  constructor(
    private formBuilder: FormBuilder,
    private commonService: CommonService,
    private toastrService: ToastrService,
    private leadService: LeadService,
    private globalService: GlobalService,
    private meta: Meta,
    private route: ActivatedRoute,
    private title: Title,
    private router: Router,
    @Inject(PLATFORM_ID) public platformId: object,
    private spinnerService: NgxSpinnerService,
    private linkService: LinkService
  ) {

    //this.linkService.addTag( { rel: 'canonical', href: window.location.href} );
    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);
      }
    });
    // if (isPlatformBrowser(this.platformId))
    //   cityList = sessionStorage.getItem("cityList");
    // this.isCityAvailable = false;
    // if (cityList) {
    //   let cityArray = JSON.parse(cityList) as string[];
    //   this.isCityAvailable = cityArray.findIndex(c => c == this.city.toLowerCase()) > -1;
    // }

    this.basicDetailForm = formBuilder.group({
      'contactNo': [null, [Validators.required, Validators.minLength(10)]],
      'loanAmount': [null, [Validators.required]],
      'customerFullName': [null, [Validators.required]],
      'pincode': [null, [Validators.required, Validators.minLength(6)]],
      'cityName': [null, [Validators.required]],
      'employmentTypeId': [null, [Validators.required]],
      'income': [null, [Validators.required]],
      // 'panCardNo': [null, [Validators.required, Validators.pattern('[A-Z]{5}[0-9]{4}[A-Z]{1}')]],
      //'email': [null, [Validators.required, Validators.pattern("[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$")]],
    })
    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]],
    //   '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}')]],
    // })
  }

  public async ngOnInit() {
    
    this._title = `Personal Loan with low interest rates in ` + this.city + ` - Instant Approval & Hassle-free Process.`
    this.route.snapshot.data['title'] = this._title;
    this.title.setTitle(this.route.snapshot.data['title']);
    this.meta.updateTag({
      name: 'description', content: `Apply for a low interest personal loans & get instant approval in ` + this.city + `, with minimum documentation. Enjoy benefits like flexible EMIs, and lots more from personal loan providers.`
    });
    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: `Personal Loan with low interest rates in ` + this.city + ` - Instant Approval & Hassle-free Process.`
    });
    this.meta.updateTag({
      name: 'og:description', property: "og:description", content: `Apply for a low interest personal loans & get instant approval in ` + this.city + `, with minimum documentation. Enjoy benefits like flexible EMIs, and lots more from personal loan providers.`
    });
    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: `Apply for a low interest personal loans & get instant approval in ` + this.city + `, with minimum documentation. Enjoy benefits like flexible EMIs, and lots more from personal loan providers.`
    });
    this.meta.updateTag({
      name: 'tweeter:site', content: `Credit`
    });
    this.meta.updateTag({
      name: 'tweeter:image', content: `https://credit.nsserver.in/assets/img/logo/logo.webp`
    });
    if (isPlatformBrowser(this.platformId)) {
      //firebase.initializeApp(config)
      //setTimeout(() => {
      //  this.isShow = false;
      //}, 1000);
      $('.apply').on('click', function () {
        $('html, body').animate({
          scrollTop: '0'
        }, 500);
      });
      this.serviceId = this.commonService.getServiceId("Personal Loan");
      console.log(this.serviceId);
      await this.getEmploymentType();
      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 async getEmploymentType() {
    try {
      let res = await this.globalService.getEmploymentType();
      if (res && res.status == 200) {
        this.employmentTypes = res.recordList;
      }
    } catch (error: any) {
      this.toastrService.error(error)
    }
  }

  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 verifyOtp() {
  //   this.isOtpInput = true;
  //   this.basicDetailForm.controls['contactNo'].setValue(this.contactForm.value.contactNo);
  //   console.log('Your form data : ', this.contactForm.value);
  // }

  public async detailForm() {
    debugger;
    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();
      });
    }
    // if (isNext == true) {
    //   this.isDetailForm = true;
    //   this.isPersonalDetailForm = false;
    //   try {
    //     if (this.leads.id) {
    //       //this.isShow = true;
    //       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) {
    //       }
    //       //this.isShow = false;
    //     }
    //     else {
    //       //this.isShow = true;
    //       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.employmentTypeId = this.detailForms.value.employmentTypeId.id;
    //         if (this.basicDetailForm.value.employmentTypeId == "Self Employee") {
    //           this.leads.employmentTypeId = 2;
    //           this.leads.annualIncome = this.detailForms.value.income
    //         }
    //         else if (this.basicDetailForm.value.employmentTypeId == "Salaried") {
    //           this.leads.monthlyIncome = this.detailForms.value.income
    //           this.leads.employmentTypeId = 1;
    //         }

    //         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 from firebase

  // 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();
  //     //error.message);
  //     this.toastrService.error(error.message, "Firebase");
  //     setTimeout(() => {
  //       window.location.reload();
  //     }, 5000);
  //   });
  // }

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

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

  //#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 ? this.leads.contactNo : '',
  //             "loanAmount": this.leads.loanAmount,
  //             "customerFullName": this.leads.customerFullName,
  //             "cityName": this.cities ? this.cities.find((c:any) => c.id == this.leads.cityId) : '',
  //             "pincode": this.leads.pincode ? this.leads.pincode : null,
  //             "email": this.leads.email
  //           }
  //         )
  //         let id = this.employmentTypes.find((c:any) => c.name == "Self Employee")?.id
  //         this.detailForms.setValue(
  //           {
  //             "aadhaarCardNo": this.leads.aadhaarCardNo,
  //             "panCardNo": this.leads.panCardNo,
  //             "employmentTypeId": this.leads.employmentTypeId ? this.employmentTypes.find((c:any) => c.id == this.leads.employmentTypeId) : null,
  //             "income": this.leads.employmentTypeId == id ? this.leads.annualIncome : this.leads.monthlyIncome,
  //             "experience": this.leads.experience
  //           }
  //         )
  //       }
  //     }
  //   } catch (error: any) {
  //     let err = error;
  //     if (error && error.error && error.error.message) {
  //       err = error.error.message
  //     }
  //     this.toastrService.error(err, "Error");
  //   }
  // }

  // public async verifyContactNo() {
  //   try {
  //     this.leads = new Leads();
  //     let res = await this.globalService.verifyContactNo(this.contactForm.value.contactNo);
  //     if (res && res.status == 200) {
  //       if (res.recordList && res.recordList.length > 0) {
  //         this.leads.userId = res.recordList[0].id;
  //       }
  //     }
  //   } catch (error: any) {
  //     let err = error;
  //     if (error && error.error && error.error.message) {
  //       err = error.error.message
  //     }
  //     this.toastrService.error(err, "Error");
  //   }
  // }

  public selectEmployeeType() {
    this.selectedEmployeeType = this.basicDetailForm.value.employmentTypeId.name
  }

  public sucessReponse() {
    //this.commonService.showSuccess();
    Swal.fire({
      icon: 'success',
      text: 'Your Personal 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: KeyboardEvent) {
    let 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;
    }
  }
}