<!DOCTYPE html>
<script>
 var Imagesource;
 var paymentLink;
 var linkmsg;
 var cuspaystatus=0;
 var cuspaymessage;
 var renewaldetails;
 var msgstartswith;
 var msgendswith;
 </script>
<html>
<head>
  <meta charset="utf-8">
  <title>Customer Pay</title>
  <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" 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
  window.onload = function what()
  {
    var scrollTableDiv = document.getElementById("cnt-sec-h");
    resizeElementHeight(scrollTableDiv);
    var userAgentResponse =  getItem("userlist");
    var customerpayres =  getItem("customerpayList");
    var customerpayresponse = JSON.parse(customerpayres);
    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 statusid = getItem("policytype");

    localStorage.removeItem("requeryInd");
    localStorage.removeItem("requerypaymentDO");
    renewaldetails=JSON.parse(getItem("renewaldetails"));
    if (statusid > 10) {
      statusid = statusid % 10;
      isenquiry = true;
    }
    else
    {
      isenquiry = false;
    }
        cuspaystatus= customerpayresponse.status;
        cuspaymessage= customerpayresponse.message;
        paymentLink = customerpayresponse.link;
        linkmsg = customerpayresponse.linkmessage;
        Imagesource = customerpayresponse.qrcode;
        var DefaultString = "data:image/png;base64,";
        Imagesource = DefaultString.concat(Imagesource);
        msgstartswith = customerpayresponse.message1;
        msgendswith = customerpayresponse.message2;
        $('.loading-mask').addClass('stop-loading');
  };

  function viewLink(){
    if(cuspaystatus!=0)
    {
      window.plugins.toast.showShortBottom('Link copied!',
        function(a)
        {
        cordova.plugins.clipboard.copy(paymentLink);
        },
        function(b)
        {
          showAlert('Link not copied!');
        });
    }
    else {
      showAlert(cuspaymessage);
    }
  }
  function shareLink(){
    if(cuspaystatus!=0)
    {
      socialShare(true);
    }
    else
    {
      showAlert(cuspaymessage);
    }
  }
  function shareQr(){
    hide('showpop-qrcode');
    if(cuspaystatus!=0)
    {
      socialShare(false);
    }
    else
    {
      showAlert(cuspaymessage);
    }
  }
  //Share view and share qr code
  function viewQr(isviewqr){
    if(cuspaystatus!=0)
    {
      qrAlert();
    }
    else
    {
      showAlert(cuspaymessage);
    }
  //  showAlert("The selected application is not installed. Please download the app to proceed or choose other options.");
  }
  function hideQrAlert()
  {
    hide('showpop-qrcode');
  }
  //qr code popup
  function qrAlert(){
    $('#showpop-qrcode').empty();
    $('#showpop-qrcode').append("<div class='big-div-qrimg'><img src="+Imagesource+"><div class='text-center'><button class='popup-btn flt' id='comm-dismiss' onclick='hideQrAlert()';>CANCEL</button><button id='butsendqr' class='popup-btn flt' onclick='shareQr();'>SEND QR</button></div></div>");
    show('showpop-qrcode');
  }

  function socialShare(switchShre){
  if(checkOnline()){
    var message = "";
    var imageSource = "";
    if(switchShre)
    {
      var str1 = String(msgstartswith);
      var str2 = String(msgendswith);
      message = ""+str1+" "+paymentLink+" "+str2+"";
    }
    else
    {
      imageSource = Imagesource;
    }
    var options = {
      message: message ,
      subject: renewaldetails.productname,
      files: [imageSource],
      url: "",
    };

    var onSuccess = function(result) {
      console.log("Share completed? " + result.completed);
      console.log("Shared to app: " + result.app);
    };

    var onError = function(msg) {
      console.log("Sharing failed with message: " + msg);
    };

    window.plugins.socialsharing.shareWithOptions(options, onSuccess, onError);
  }
  }

  //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');
  }
  }

  //pop up close
  function onDismiss(issuccess) {
    if (issuccess) {
      backbuttonclk();
    }
    else {
      hide('showpop');
    }
  }
  //respective back page redirect
  function backbuttonclk() {
    hide('showpop');
    if(checkOnline()){
    $('.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');
  }
  }
  //common popup
  function showAlert(message) {
    $('#showpop').empty();
    $('#showpop').append("<h5>Message</h5><p>"+message+"</p><button class='popup-btn' onclick=hide('showpop')>OK</button>");
    show('showpop');
  }

  function resizeElementHeight(element) {
  var Ls_ViewElement = document.getElementById("Ls-View");
  var View_TopElement = document.getElementById("axawrapperid");
  var note_idElement = document.getElementById("noteid");


   var height = 0;
   var body = window.document.body;
   height = note_idElement.offsetTop;

   console.log("height===="+height);
   element.style.minHeight = (((height+55) - element.offsetTop) + "px");
  }

  //backbutton function
  document.addEventListener("backbutton", onBackKeyDown, false);
  function onBackKeyDown() {
    if(document.getElementById("showpop").style.display != "none"||document.getElementById("showpop-qrcode").style.display != "none") {
    //its visible
        hide('showpop-qrcode');
        hide('showpop');
      }
    else 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" id="containeraxaid">
          <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_icon_img" 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="leftimg_icon_img" class="left-icon" src="images/left-arrow.svg" /></div>
            </a>
          </div>
          <div class="icon-logo-rgt"><img alt="navLogo4_icon_img" src="images/logo-4.svg"></div>
          <div class="navbar-title-bck" id="navbartitle">Customer Pay</div>
          <div class="home-menuicon">
            <a id="icon_home" onclick = "redirectionpage('dashboard.html');"><img alt="homeimg_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" id = "axawrapperid">
          <div class="axa-content-sec">
            <div class="row cnt-sec-hgh" id = "cnt-sec-h">
              <div class="axa-col-12 pay-pd">
                <div class="payment-box">
                 <div class="axa-col-12 cus-pay-field1">
                   <div class="box-left">
                     <span class="wel-box" id="txtpaid">Send Payment Link
                     </span>
                   </div>
                   <div class="box-right">
                   <div class="cus-pay-sec" onclick ="viewLink();">
                     <span class="pay-pd cus-pay-img cus-pay-link-tp"><a href="#"><img alt="link_icon_img" src="images/link.svg" class="pay-img"></a></span>
                     <span id="span_copylink" class="cus-pay-link-btm">Copy</span>
                   </div>
                   <div class="cus-pay-sec" onclick ="shareLink();">
                     <span class="cus-pay-img cus-pay-link-tp"><a href="#"><img alt="share_icon_img" src="images/share.svg" class="pay-img"></a></span>
                     <span id="span_sharelink" class="cus-pay-link-btm">Share</span>
                   </div>
                   </div>
                   </div>
                   <div class="axa-col-12 cus-pay-field2">
                   <div class="box-left">
                     <span class="wel-box" id="txtpaid">QR Code
                     </span>
                   </div>
                   <div class="box-right">
                     <div class="cus-pay-sec" onclick = "viewQr(true);">
                     <span class="pay-pd cus-pay-img cus-pay-link-tp"><a href="#"><img alt="view_icon_img" src="images/view.svg" class="pay-img"></a></span>
                     <span class="cus-pay-link-btm" id = "Ls-View">View</span>
                   </div>
                    <div class="cus-pay-sec" onclick = "shareQr();">
                     <span class="cus-pay-img cus-pay-link-tp"><a href="#"><img alt="share_icon_img" src="images/share.svg" class="pay-img"></a></span>
                     <span id = "span_shareqr" class="cus-pay-link-btm">Share</span>
                   </div>
                   </div>
                   <div id="noteid" style="padding-top: 10px;text-align: center;"><span style="top: 0px; color:#000;font-size: 87.5%;">Note : Best shared on WhatsApp, Wechat and SMS</div>
                   </div>
                 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content loading-mask" id="new-stack">
      <div class="loading-icon">
        <div class="navbar-button-icon icon ion-load-d"></div>
      </div>
    </div>
    <div class="shadow-layer"></div>
    <div id="showpop" class="popup"></div>
    <div id="showpop-qrcode" class="popup qrwidth"></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>
