<!DOCTYPE html>
<script>
var premiumval=0;
var premiumType="G";
var isenquiry = false;
</script>
<html>
<head>
  <meta charset="utf-8">
  <title>Payment</title>
  <style>
    .label-left-adjust {
        margin-left: 10px; /* Adjust the value as needed */
    }
    .flex-container{
      width: 100%;
      flex-direction: row;
    }
    .error-style{
      color: red; 
      margin-left: 10px; 
      font-size: 12px; 
    }
   
</style>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <script type="text/javascript" src="js/lib/aes.js"></script>
  <script type="text/javascript" src="js/lib/pbkdf2.js"></script>
  <script type="text/javascript" charset="UTF-8" src="Commondata.js" ></script>
  <script type="text/javascript" charset="UTF-8" src="VehicleDetCommonData.js"></script>
  <script type="text/javascript" charset="UTF-8" src="Apiservice.js"></script>
  <link rel="stylesheet" type="text/css" href="fonts/stylesheet.css">
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/framework.css">
  <link rel="stylesheet" type="text/css" href="css/axa.min.css">
  <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
  <script type="text/javascript" charset="UTF-8" src="js/axa-popup.js" ></script>
  <script src="js/webfont.js"></script>
  <script>
  WebFont.load({
    google: {
      families: ["Montserrat:400,700"]
    }
  });
  </script>
  <script type ="text/javascript">    
  //window onload
  var count1=0;
  window.onload = function what()
  {
    var userAgentResponse =  getItem("userlist");
    var userAgentResponseList=JSON.parse(userAgentResponse);
    if(userAgentResponseList.length<=1){
      document.getElementById('switchuserclass').style.display = 'none';
    }
    /* Motor and Non Motor Diff */
    motorhealthdiff();
    // document.getElementById('emailIdLabel').textContent = emailid;
    /* Motor and Non Motor Diff */
    var renewaldetails=JSON.parse(getItem("renewaldetails"));
    var emailid=renewaldetails.emailid;
    var phoneNumber=renewaldetails.phonenumber;
    emailInput.value = emailid ?? '';
    phoneInput.value = phoneNumber ?? '';

  // Initial check if input fields are empty
    // validateEmail();
    validatePhone();
    document.getElementById('policyholdername').innerHTML =renewaldetails.policyholdername;
    document.getElementById('policyno').innerHTML = renewaldetails.contracttype+"/"+renewaldetails.policyno;
    document.getElementById('grosspremium').innerHTML = currencyformat(renewaldetails.premiumPayable, "");
    premiumval = renewaldetails.premiumPayable;
    var statusid = getItem("policytype");
    localStorage.removeItem("requeryInd");
    localStorage.removeItem("requerypaymentDO");
    if (statusid > 10) {
      statusid = statusid % 10;
      isenquiry = true;
    }
    else
    {
      isenquiry = false;
    }
  };
  
function isEmpty(value) {
    return typeof value == 'string' && !value.trim() || typeof value == 'undefined' || value === null;
}
function validateEmail() {

var emailInput = document.getElementById('emailInput').value;
var emailError = document.getElementById('emailError');
var usernameSpceTrim = emailInput.replace(/\s/g, '');
var emailInput = usernameSpceTrim.toLowerCase();
atpos = emailInput.indexOf("@");
dotpos = emailInput.lastIndexOf(".");
if (isEmpty(emailInput)){
  emailError.style.display = 'block'; // Show error message
  emailError.textContent = 'Please enter your Email ID';
}
else if(isEmpty(emailInput)|| atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailInput.length){
  if (isEmpty(emailInput)) {
    emailError.style.display = 'block'; // Show error message
    emailError.textContent = 'Please enter your Email ID'
      } else {
        emailError.style.display = 'none';
      }
      if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailInput.length) {
        emailError.style.display = 'block'; // Show error message
        emailError.textContent = 'Please enter a valid Email ID in the correct format, eg. abc@gmail.com';
      } else {
        emailError.style.display = 'none';
      }
}
else {
  emailError.style.display = 'none';
  return true;
}
}

function validatePhone() {
var phoneInput = document.getElementById('phoneInput').value;
var phoneError = document.getElementById('phoneError');
if (phoneInput.length == 0){
  phoneError.style.display = 'block'; // Show error message
  phoneError.textContent = 'Please enter your phone number';
}
else if(phoneInput.length == 0 || phoneInput.length !== 10 ){
  if (phoneInput.length == 0) {
    phoneError.style.display = 'block'; // Show error message
    phoneError.textContent = 'Please enter your phone number';
    
      } else {
        phoneError.style.display = 'none';
       
      }
      if (phoneInput.length !== 10) {
        phoneError.style.display = 'block'; // Show error message
        phoneError.textContent = 'Please enter your valid phone number';
        
      } else {
        phoneError.style.display = 'none';
       
      }
}
else {
  phoneError.style.display = 'none';
  console.log("log");
  return true;

}
}

window.addEventListener('keypress', function (e) {
    if ((e.keyCode < 48 || e.keyCode > 57)) {
      validatePhone();
    }
  });

  window.addEventListener('keypress', function(e) {
    console.log("keycode========"+e.key);
    if (e.key.match(/[a-zA-Z0-9@._-]/)) {
        validateEmail();
    }
});

  //logout popup
  function exitAlert() {
    if(checkOnline()){
    $('#showpop').empty();
    $('#showpop').append("<h5>Message</h5><p>Are you sure want to logout?</p><button class='popup-btn' onclick='logout()'>OK</button><button class='popup-btn' onclick=hide('showpop')>CANCEL</button>");
    show('showpop');
  }
  }
  //payment option change
  function Paymenttype(value) {
    console.log("Paymenttype"+value);
    var enquirydetails=JSON.parse(getItem("renewaldetails"));
    if(value==1)
    {
      premiumType="G";
      premiumval=enquirydetails.premiumPayable
      document.getElementById('grosspremium').innerHTML = currencyformat(enquirydetails.premiumPayable,"");
    }
    else
    {
      premiumType="N";
      premiumval=enquirydetails.netPremiumPayable;
      document.getElementById('grosspremium').innerHTML = currencyformat(enquirydetails.netPremiumPayable, "");
    }
  }
  //pop up close
  function onDismiss(issuccess) {
    if (issuccess) {
      backbuttonclk();
    }
    else {
      hide('showpop');
    }
  }
  //respective back page redirect
  function backbuttonclk() {
  if(checkOnline()){
    hide('showpop');
    $('.loading-mask').removeClass('stop-loading')
    if (isenquiry) {
      window.location.href = 'Enquiry-detail.html';
    }
    else {
      window.location.href = 'Renewal-info.html';
    }
    $('.loading-mask').addClass('stop-loading');
  }
  }

  function permissioncheck() {
    
      console.log("if working====")
        cordova.plugins.diagnostic.requestRuntimePermission(function(status) {
            switch(status) {
                case cordova.plugins.diagnostic.permissionStatus.GRANTED:
                    if (validateEmail() && validatePhone()) {
                    console.log("Permission granted to use the camera");
                    paynowdetails();
                    }
                    else{
                      console.log("else working====");
                    }
                    break;
                case cordova.plugins.diagnostic.permissionStatus.NOT_REQUESTED:
                    showAlert("Allow SmartPolicy to access your device details to proceed to Payment", false);
                    break;
                case cordova.plugins.diagnostic.permissionStatus.DENIED:
                    showAlert("Allow SmartPolicy to access your device details to proceed to Payment", false);
                    break;
                case cordova.plugins.diagnostic.permissionStatus.DENIED_ALWAYS:
                    showAlert("Please provide necessary APP Permissions for SmartPolicy to proceed to Payment", false);
                    break;
            }
        }, function(error) {
            console.error("The following error occurred: " + error);
        }, cordova.plugins.diagnostic.permission.READ_PHONE_STATE);
   
}
  //No d2Record or mail sent
  function paynowdetails()
  {
  if(checkOnline()){
    hide('showpop');
    count1=0;
  var manualPaymentuserData = JSON.parse(getItem("renewaldetails"));
  console.log("manualPaymentuserData"+manualPaymentuserData)
  for (var i = 0 ; i < manualPaymentuserData.insuredResponseDOs.length; i++)
  {
        if(manualPaymentuserData.insuredResponseDOs[i].grosspremium != 0){
        }
        else{
          count1 = count1+1;
        }
  }
  if((manualPaymentuserData.grosspremium==0 && count1==manualPaymentuserData.insuredResponseDOs.length) || (manualPaymentuserData.grosspremium==0 && count1==manualPaymentuserData.insuredResponseDOs.length && manualPaymentuserData.data.d2recordsDos!=null)){
    backbuttonclk();
  }
    else{
      var paymentopt = getItem("paymentOption");
      var renewaldetails=JSON.parse(getItem("renewaldetails"));
      var policyholder_name=renewaldetails.policyholdername;
      var policy_no=renewaldetails.policyno;
      var email=emailInput.value;
      var phone=phoneInput.value;
      //  var request = {agentid: getItem("agentcode"),paymenttype:premiumType, policyno:policy_no,amount:premiumval,policyholdername:policyholder_name,renwalpolicyid:getItem("renwalpolicyid")};
      var request = {agentid: getItem("agentcode"),paymenttype:premiumType, policyno:policy_no,amount:premiumval,policyholdername:policyholder_name,renwalpolicyid:getItem("renwalpolicyid"),ipaypaymentuseremailid:email,usercontact:phone,};
      console.log("payment_request",JSON.stringify(request));
      console.log("payment_details"+payment_details);
      Apiservicecall(function(result)
      {
        if(result.status==1)
        {
          var response=result.response;
           if(response.status == 1)
            {
              if(response.data.paymentalreadyinitiatedind == 'Y'){
                  showAlert(response.data.paymentinitiatedmsg, false);
              }
              else{
                  setItem("paymentdetails",JSON.stringify(response.data));
                  if(response.data.receiptmessage == "" || response.data.receiptmessage == null){
                    //paynowdetails1(response.data);
                      makepayment(response.data);
                      console.log("response.data++"+JSON.stringify(response.data));
                  }
                  else{
                    showAlert(response.data.receiptmessage, false);
                  }
                }
            }
            else if(response.status== 3){
              showAlert(response.message, false);
            }
            else {
              showAlert(response.message, false);
            }
          }
      },payment_details,request);
    }
   }
  }
  //ipay88 payment
  function makepayment(data) {
  var amountva = premiumval.toString();
  var decimalcountamount = amountva.split('.');
  var amountVal = amountva.split('.').join("");
  if (amountva.indexOf('.') > -1) {
    if (decimalcountamount[1].length == 1)
      amountVal += "0";
  } else {
    amountVal += "00";
  }
  
  var paymentData = {
    name: "Generali Finance",
    email: emailInput.value,
    phone: phoneInput.value,
    amount: amountVal,
    refNo: data.paymentid,
    currency: getItem("paycurrency"),
    lang: getItem("language"),
    country: getItem("permanentcountry"),
    description: data.productname,
    remark: "",
    paymentId: getItem("paymentid"),
    merchantKey: getItem("merchentkey"),
    merchantCode: getItem("merchantcode"),
    backendPostUrl: backendPayment
  };

  console.log("=====request data====== " + JSON.stringify(paymentData));

  cloudSky.iPay88.makePayment(
    paymentData,
    function (resp) {
      // Success callback
      console.log("=====response====== " + JSON.stringify(resp));
      paynowdetails1(data, resp, 1, "Success");
      // resp = {
      //     transactionId: transId,
      //     referenceNo: refNo,
      //     amount: amount,
      //     remarks: remarks,
      //     authCode: auth,
      // }
    },
    function (err) {
      // Failure callback
      console.log("=====error====== " + JSON.stringify(err));
      paynowdetails1(data, err, 0, err.err);
      // err = "some error string" OR
      // err = {
      //     transactionId: transId,
      //     referenceNo: refNo,
      //     amount: amount,
      //     remarks: remarks,
      //     err: error message, // "canceled" if user canceled the payment.
      // }
      //alert(err.err);
      if (err.err == "canceled")
        showAlert("Canceled");
      else
        showAlert(err);
    }
  );
}

  //ipay88 response paymentdetail
  function paynowdetails1(data,resp,status,message)
  {
    var paymentdata=JSON.stringify(data);
    var requestdata = { policyno: data.policyno, amount: data.amount, dateTime: data.dateTime, policyholdername: data.policyholdername, agentid: data.agentid, branchcode: data.branchcode, receiptNo: data.receiptNo, paymentRefNo: resp.transactionId, status:status,chequeno: resp.authCode,statusdescription:message,contracttype: data.contracttype, productname: data.productname,paymenttype:premiumType, paymentid:data.paymentid,renwalpolicyid:getItem("renwalpolicyid")}
    //var requestdata = { policyno: data.policyno, amount: data.amount, dateTime: data.dateTime, policyholdername: data.policyholdername, agentid: data.agentid, branchcode: data.branchcode, receiptNo: data.receiptNo, paymentRefNo: "IPAY23424", status: "1", contracttype: data.contracttype, productname: data.productname, paymenttype:premiumType,paymentid:data.paymentid,statusdescription:message,renwalpolicyid:getItem("renwalpolicyid")}
    console.log("====requestdata========"+JSON.stringify(requestdata));
    Apiservicecall(function(result)
    {
      if(result.status==1)
      {
        var response=result.response;
        if(response.status=="1")
        {
          // setItem("paymentref",JSON.stringify(response.data));
          window.location.href = 'Payment-detail.html';
        }
        else if(response.status=="3")
        {
          // setItem("paymentref",JSON.stringify(response.data.data));
          window.location.href = 'Payment-detail.html';
        }
      }
    },payment_details,requestdata);
  }

  //common popup
  function showAlert(message) {
    $('#showpop').empty();
    $('#showpop').append("<h5>Message</h5><p id='para_messageid'>"+message+"</p><button class='popup-btn' id='comm-dismiss' onclick=hide('showpop')>OK</button>");
    show('showpop');
  }
  //backbutton function
  document.addEventListener("backbutton", onBackKeyDown, false);
  function onBackKeyDown() {
  if(checkOnline()){
    window.location.href = 'Renewal-detail.html';
  }
  }
  </script>
  <script type="text/javascript" src="js/modernizr.js"></script>
  <link rel="shortcut icon" type="image/x-icon" href="images/logoStandford32.ico">
  <link rel="apple-touch-icon" href="images/logoStandford32.ico">
  <link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <section class="axa-section mobile-wrapper">
    <div class="page-content" id="main-stack">
      <div class="axa-nav navbar" data-collapse="all" data-animation="over-left" data-duration="400" data-contain="1" data-easing="ease-out-quint" data-no-scroll="1">
        <div class="axa-container">
          <nav class="axa-nav-menu nav-menu" role="navigation">
            <a class="nav-menu-header" id="navi_welcomepage" onclick = "redirectionpage('dashboard.html');">
              <div class="logo"><img alt="navlogo_img_icon" src="images/nav-logo.svg"></div>
            </a>
            <div id="health_div_header">
              <a class="axa-clearfix axa-inline-block nav-menu-link">
                <div class="icon-list-menu">
                  <div class="icon ion-ios-pulse"></div>
                </div>
                <div class="nav-menu-titles">Health</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link1" id="navi_renewalinfo" onclick = "redirectionpage('welcome.html');">
                <div class="sub-icon-list-menu">
                  <div class="icon ion-clipboard"></div>
                </div>
                <div class="nav-menu-titles">Renewal Info</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link1" id="navi_enquiry" onclick = "redirectionpage('Enquiry.html');">
                <div class="sub-icon-list-menu">
                  <div class="icon ion-ios-help-outline"></div>
                </div>
                <div class="nav-menu-titles">Enquiry</div>
              </a>
            </div>
            <div id="motor_div_header">
              <a class="axa-clearfix axa-inline-block nav-menu-link">
                <div class="icon-list-menu">
                  <div class="icon ion-android-car"></div>
                </div>
                <div class="nav-menu-titles">Motor</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link1" id="navi_vehicledet" onclick = "redirectionpage('vehicle-details.html');">
                <div class="sub-icon-list-menu">
                  <div class="icon ion-ios-calculator-outline"></div>
                </div>
                <div class="nav-menu-titles">New Quote</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link1" id="navi_retrivequote" onclick = "redirectionpage('retrieve-quote.html');">
                <div class="sub-icon-list-menu">
                  <div class="icon ion-document"></div>
                </div>
                <div class="nav-menu-titles">Retrieve Quote</div>
              </a>
              </div>
              <a class="axa-clearfix axa-inline-block nav-menu-link" id="navi_agenttools" onclick = "redirectionpage('Contact-us.html');">
                <div class="icon-list-menu">
                  <div class="icon ion-ios-telephone-outline"></div>
                </div>
                <div class="nav-menu-titles">Agent Tools</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link" id="switchuserclass" onclick="switchuser()">
                <div class="icon-list-menu">
                  <div class="icon ion-ios-personadd-outline"></div>
                </div>
                <div class="nav-menu-titles">Switch Agent</div>
              </a>
              <a class="axa-clearfix axa-inline-block nav-menu-link" id="nav_logoutid" onclick="exitAlert()">
                <div class="icon-list-menu">
                  <div class="icon ion-log-out"></div>
                </div>
                <div class="nav-menu-titles">Logout</div>
              </a>
            <div class="separator-bottom"></div>
            <div class="separator-bottom"></div>
            <div class="separator-bottom"></div>
          </nav>
          <div class="wrapper-mask" data-ix="menu-mask"></div>
          <div class="left-back" id="menu_icon" data-ix="hide-navbar-icons">
            <a onclick = "redirectionpage('Renewal-detail.html');" class=" back-icon">
              <div class="left-arrow"><img alt="left_icon_img" class="left-icon" src="images/left-arrow.svg" /></div>
            </a>
          </div>
          <div class="icon-logo-rgt"><img alt="logo4_icon_img" src="images/logo-4.svg"></div>
          <div class="navbar-title-bck" id="navbartitle">Payment</div>
          <div class="home-menuicon">
            <a id="icon_home" onclick = "redirectionpage('dashboard.html');"><img alt="home_icon_img" class="hmeicon" src="images/home1.svg" /></a>
            <div class="axa-nav-button navbar-button left" id="menu-button" data-ix="hide-navbar-icons">
              <div class="navbar-button-icon home-icon">
                <div class="bar-home-icon"></div>
                <div class="bar-home-icon"></div>
                <div class="bar-home-icon"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-body">
        <div class="hero-image">
          <div class="hero-image-title">
          </div>
          <div class="hero-image-img">
          </div>
        </div>
        <div class="axa-wrapper">
          <div class="axa-content-sec">
            <!--Table Header-->
            <table class="pay-th">
              <tr>
                <td colspan="3">
                  <table class="pay-th" style="width:100%">
                    <tr>
                      <td class="pay-th-axa pay-th-exleft">Policy No.</td>
                      <td class="pay-th-axa pay-th-exright">Policyholder</td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            <!--Table tbody-->
            <table class="pay-t">
              <tr>
                <td colspan="3">
                  <table class="pay-t tbl-layout" style="width:100%">
                    <tr>
                      <td class="pay-t-axa pay-t-exleft"><span id="policyno">05/08/2017</span></td>
                      <td class="pay-t-axa pay-t-exright rd-txt-dot"><span id="policyholdername">Yong Hiew Leng</span></td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
  
  <div class="row mg-tp">
    <div class="axa-col-12" >
        <div class="payment" >
            <div class="axa-clearfix input-form payment one-line">
                <div class="axa-clearfix radios-container flex-container" >
                  <label class="axa-form-label label-left-adjust" for="node-9" style="width:28%;">Email</label>
                  <label class="axa-form-label">:</label>
                <input type="text" placeholder="Email Id" id="emailInput" name="email"  onkeyup="validateEmail()" maxlength="50" style="width: 61%; " />
                <span id="emailError" class="axa-form-label error-style" ></span>
                </div>
                <div class="axa-clearfix radios-container flex-container">
                    <label class="axa-form-label label-left-adjust" for="node-6" style="width:28%;">Phone Number</label>
                    <label class="axa-form-label">:</label>
                    <input type="text" placeholder="Phone number" id="phoneInput" maxlength="10" oninput="this.value = this.value.replace(/[^0-9]/g, '');" pattern="\d{1,10}" inputmode="numeric" onkeyup="validatePhone()"style="width: 61%;">
                    <span id="phoneError" class="axa-form-label error-style" ></span>
                </div>
              </div>
            </div>  
        </div>
    </div>

            <!--Table tbody End-->
            <div class="row mg-tp">
              <div class="axa-col-9 no-padding"><h5>Payment Type</h5></div>
              <div class="axa-col-12">
                <div class="payment">
                  <div class="axa-clearfix input-form payment one-line">
                    <div class="axa-clearfix radios-container">
                      <div class="axa-radio axa-clearfix radio-button">
                        <div class="radio-bullet-replacement checked"></div>
                        <input class="axa-radio-input radio-bullet" id="node-9" type="radio" name="Radio3" value="1" data-name="Radio3" onclick="Paymenttype(1);">
                        <label class="axa-form-label" for="node-9">Premium Payable</label>
                      </div>
                      <div class="axa-radio axa-clearfix radio-button">
                        <div class="radio-bullet-replacement"></div>
                        <input class="axa-radio-input radio-bullet" id="node-6" type="radio" name="Radio3" value="2" data-name="Radio3" onclick="Paymenttype(2);">
                        <label class="axa-form-label" for="node-6">Net Premium Payable</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="axa-clearfix"></div>
              <div class="axa-col-12">
                <label class="axa-col-12 pay-label">Payment Amount : RM <span id="grosspremium">1,139.85</span></label>
              </div>
              <div class="axa-col-12 mg-tp text-centered">
                <input type="button" class="axa-btn" id="btn_onlinepay" onclick="permissioncheck()" value="PAY NOW">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content loading-mask stop-loading" id="new-stack">
      <div class="loading-icon">
        <div class="navbar-button-icon icon ion-load-d"></div>
      </div>
    </div>
    <div  id="container1"></div>
    <div class="shadow-layer"></div>
    <div id="showpop" class="popup"></div>
    <div id="showpop1" class="popup"></div>
  </section>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/framework.js"></script>
  <!--[if lte IE 9]><script src="js/placeholders.min.js"></script><![endif]-->
</body>
</html>
