<!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%;
       height :"10%"
       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();
    /* Motor and Non Motor Diff */
    var renewaldetails=JSON.parse(getItem("renewaldetails"));
    console.log("renewaldetails" + getItem("renewaldetails"));
       var emailid=renewaldetails.emailid;
        var phoneNumber=renewaldetails.phonenumber;
        var emailInput = document.getElementById('emailInput');
        var phoneInput = document.getElementById('phoneInput');
        emailInput.value = emailid ?? '';
            phoneInput.value = phoneNumber ?? '';
        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');
      console.log("emailInputjk"+emailInput);
      var usernameSpceTrim = emailInput.replace(/\s/g, '');
      var emailInput = usernameSpceTrim.toLowerCase();
      atpos = emailInput.indexOf("@");
      dotpos = emailInput.lastIndexOf(".");
      console.log("email----"+emailInput);
      if (isEmpty(emailInput)){
        console.log("emailInputhi dd"+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');
      console.log("phoneInput??????"+phoneInput);
      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');
  }
  }
      
  //No d2Record or mail sent
  function paynowdetails(){
      if (validateEmail() && validatePhone()) {
  if(checkOnline()){
    hide('showpop');
    count1=0;
  var manualPaymentuserData = JSON.parse(getItem("renewaldetails"));
  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);
                  }
                  else{
                    showAlert(response.data.receiptmessage, false);
                  }
                }
            }
            else if(response.status== 3){
              showAlert(response.message, false);
            }
            else {
              showAlert(response.message, false);
            }
          }
      },payment_details,request);
    }
   }
  }
      else{
           console.log("else working====");
         }
  }
      
  //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";
          
      }
      console.log("makepayment");
    cloudSky.iPay88.makePayment(
      {
        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
      },
      function (resp) {
        // <!--http://59.144.118.82/response/response.php-->
        console.log("=====resp======"+JSON.stringify(resp))
        paynowdetails1(data,resp,1,"Success");
        // Success callback
        // resp = {
        //     transactionId: transId,
        //     referenceNo: refNo,
        //     amount: amount,
        //     remarks: remarks,
        //     authCode: auth,
        // }
      },
      function (err) {
        paynowdetails1(data,err,0,err.err);
        console.log("=====resp======"+JSON.stringify(err))
        // Failure callback
        // 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.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');
  }
  history.pushState(null, null, document.URL);
  window.addEventListener('popstate', function () {
    console.log("payment");
  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%; height:10%;" />
                           <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%; height:10%;">
                               <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="paynowdetails();" 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>
