<?php
/*!
* iPayLinks支付,信用卡信息入口页面
* @author LYT <lyt@hainatravel.com>
* @date   2017-08-11
*/
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Pay with credit card - China Highlights</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="referrer" content="always">
    <link href="//data.chinahighlights.com/css/min.php?f=/public/css/global.min.css&amp;v=20170811" rel="stylesheet" type="text/css" />
    <!-- ,/css/dist/magic-input.css -->
    <style>
    body {background: #f1f1f1;}
    p{margin-bottom: 8.5px;}
    .text-danger{color: #a31022!important;}
    .pageTitle{margin-left: 300px;}
    .pageTitle h1{color: #fff;border:none;font-size: 30px;}
    .mobileTitle h1{color: #fff;border:none;font-size: 20px;}
    .marginTop{margin-top: 40px;}
    .pay_form{padding: 30px 15px 15px 15px ;box-shadow: 0 0 10px #999;background: #fff;border-radius: 5px; margin-bottom: 15px;}
    .pay_form .btn-danger{background: #a31022;}
    .pay_footer{padding: 30px 0 10px;font-size: 12px;}
    .orderinfo{padding: 30px 5px 5px 5px!important;}
    .orderinfo p{padding-left: 5px;padding-right: 5px;}
    .orderinfo_label{color: grey;margin-bottom: 8.5px;}
    ul li {clear: both;}
    .requiredArea {border-bottom: 1px dashed #a31022;clear: both;color: #a31022;display: block;font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;font-size: 1em;margin-top: 10px;padding: 2px 0 4px 10px;    }
    </style>
  </head>
  <body>
    <div id="wrapper" class="chkVisible">
      <div id="header" >
        <div id="mainnav" class="nav navbar-inverse" role="navigation">
          <div class="container">
            <div class="col-lg-21 col-sm-20 col-lg-offset-3 col-sm-offset-3">
              <div class="navbar-header">
                <div class="visible-xs text-left mobileTitle">
                <h1>Pay with credit card </h1>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container hidden-xs">
          <div class="row hidden-sm" id="headerLinkRight">
            <div  class="col-lg-24">&nbsp;</div>
          </div>
        </div>
        <div id="mainnav" class="nav navbar navbar-inverse hidden-xs" >
          <div class="container">
            <div class="row">
              <div class="col-lg-3 col-sm-4 logobox hidden-xs">
                <a href="//www.chinahighlights.com/">
                  <img src="/pic/logo/logo-132x104.png" alt="china highlights" class="img-responsive">
                </a>
              </div>
              <div class="col-md-17 col-sm-17 pageTitle">
                <h1>Pay with credit card</h1>
              </div>
            </div>
          </div>
          <!--container-->
        </div>
        <!--end of mainnav -->
      </div>
    </div>
    <div id="content">
      <div class="container marginTop">
        <div class="row">
          <div class="col-md-8">
            <div class="tourSelected pay_form">
                <ul class="row">
                    <li><label class="col-md-12 col-xs-12 orderinfo_label">Tracking Code:</label><label class="col-md-12 col-xs-12">
                    <?php echo $orderId; ?>
                    </label></li>
                    <li>
                      <label class="col-md-12 col-xs-12 orderinfo_label">Total:</label>
                      <label class="col-md-12 col-xs-12"><span class="text-danger">
                      <?php if($amount) echo $amount; ?>
                      </span>
                      <?php if($currencyCode) echo $currencyCode; ?>
                      </label>
                    </li>

                    <li><label class="col-md-12 col-xs-12 orderinfo_label">Description:</label>
                    </li>
                    <li>
                      <label class="col-md-24 col-xs-24">
                        <?php if($description) echo $description; ?>
                      </label>
                    </li>
                </ul>
            </div>
          </div>
          <div class="pay_form_div col-md-16 col-sm-24">
            <form action="https://www.chinahighlights.com/secureipay/order_pay" method="post" id="Form1" name="Form1" class="form-horizontal pay_form" onsubmit="return checkForm();" novalidate>
              <div class="form-group">
                <label class="col-md-5 control-label"></label>
                <div class="col-md-18 col-xs-24">
                  <p class="">We don’t share your financial details with the merchant.</p>
                </div>
              </div>
              <div class="form-group">
                <label for="cardHolderNumber" class="col-md-5 control-label">Card Number</label>
                <div class="col-md-18 col-xs-24">
                  <input type="text" class="form-control" id="cardHolderNumber" name="cardHolderNumber" placeholder="Card Number">
                </div>
              </div>
              <div class="form-group">
                <label for="cardHolderFirstName" class="col-md-5 col-xs-24 control-label">Full Name</label>
                <div class="col-md-9 col-xs-12">
                  <input type="text" class="form-control" id="cardHolderFirstName" name="cardHolderFirstName" placeholder="First Name">
                </div>
                <div class="col-md-9 col-xs-12">
                  <input type="text" class="form-control" id="cardHolderLastName" name="cardHolderLastName" placeholder="Last Name">
                </div>
                <div class="col-md-5 col-xs-24"></div>
                <div class="col-md-18 col-xs-24 name_error"></div>
              </div>
              <div class="form-group ">
                <label for="cardExpirationMonth" class="col-md-5 col-xs-24 control-label">Expiration M/Y</label>
                <div class="col-md-4 col-xs-10">
                  <select class="form-control" id="cardExpirationMonth" name="cardExpirationMonth">
                    <option value="">MM</option>
                    <?php echo $month_html; ?>
                  </select>
                </div>
                <div class="col-md-5 col-xs-14">
                  <select class="form-control" id="cardExpirationYear" name="cardExpirationYear">
                    <option value="">YY</option>
                    <?php echo $year_html; ?>
                  </select>
                </div>
                <div class="col-md-24 col-xs-24 row">
                <div class="col-md-5 col-xs-24"></div>
                <div class="col-md-18 col-xs-24 date_error"></div></div>
              </div>
              <div class="form-group">
                <label for="securityCode" class="col-md-5 control-label">CVV</label>
                <div class="col-md-9 col-xs-24">
                  <input type="text" class="form-control" id="securityCode" name="securityCode" placeholder="Security Code">
                </div>
              </div>
              <div class="form-group">
                <label for="cardHolderEmail" class="col-md-5 control-label">Email Address</label>
                <div class="col-md-18 col-xs-24">
                  <input type="email" class="form-control" id="cardHolderEmail" name="cardHolderEmail" placeholder="Email Address" >
                </div>
              </div>
              <!-- 可选的寄账单 -->
<!--               <div class="form-group">
                <label class="col-md-10">
                  <input type="checkbox" name="flexible" value="Yes" class="mgc mgc-danger">
                  Ship to my billing address
                </label>
              </div> -->
              <?php if($form_html) echo $form_html ?>
              <div class="form-group">
                <div class="col-md-5"></div>
                <div class="col-md-18 col-xs-24 ">
                  <button type="submit" class="btn btn-default btn-danger col-md-24 col-xs-24" id="sub_b" data-loading-text="Please wait...">SUBMIT</button>
                </div>
              </div>
            </form>
            <div class="pay_footer text-right">
              <p>©  1998 China Highlights.
                <a href="https://www.chinahighlights.com/privacy.htm" rel="nofollow">Privacy Statement</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="main" class="container">
    </div>
  </body>
  <script src="//data.chinahighlights.com/js/min.php?f=/js/jquery-1.8.2.min.js,/public/js/bootstrap.min.js&v=20170811" type="text/javascript"></script>
  <script language="javascript">
  $(function() {
    $('select[name="cardExpirationMonth"],select[name="cardExpirationYear"]').focus(function(){
      $('.date_error').children('.requiredArea').remove();
    });
    $('input[name="cardHolderFirstName"],input[name="cardHolderLastName"]').click(function(){
      $('.name_error').children('.requiredArea').remove();
    });
    $('input[name="cardHolderNumber"],input[name="securityCode"],input[name="cardHolderEmail"]').focus(function(){
      $(this).parent().children('.requiredArea').remove();
    });
  })
      function checkForm(){
        $("#sub_b").button('loading');

        $('.requiredArea').remove();
        var requirei = 0;
        var windowHeight = $(window).height();
        var scrollTopWhere = windowHeight;

        var calcScrollTop = function($jqElement) {
          var visibleTop = $jqElement.offset().top - $jqElement.height();
          scrollTopWhere = visibleTop < scrollTopWhere ? visibleTop : scrollTopWhere;
        }

        var $startingDate = $("#cardHolderNumber");
        if($('input[name="cardHolderNumber"]').val()==''){
          $('#cardHolderNumber').parent().append('<div class="requiredArea">Please enter your credit card</div>');
          calcScrollTop($startingDate);
          requirei ++;
        }
        var $realname = $("#cardHolderFirstName");
        if($('#cardHolderFirstName').val()=='' || $('#cardHolderLastName').val()==''){
          $('.name_error').append('<div class="requiredArea">Please enter your full name</div>');
          calcScrollTop($realname);
          requirei ++;
        }
        var $realname = $("#cardExpirationMonth");
        if($('#cardExpirationMonth').val()=='' || $('#cardExpirationYear').val()==''){
          $('.date_error').append('<div class="requiredArea">Please select Expiration</div>');
          calcScrollTop($realname);
          requirei ++;
        }
        var $Nationality = $("#securityCode");
        if($('#securityCode').val()==''){
          $('#securityCode').parent().append('<div class="requiredArea">Please enter your securityCode</div>');
          calcScrollTop($Nationality);
          requirei ++;
        }
        var $email = $("#cardHolderEmail");
        if($('#cardHolderEmail').val()==''){
          $('#cardHolderEmail').parent().append('<div class="requiredArea">Please enter your email</div>');
          calcScrollTop($email);
          requirei ++;
        } else {
          var emailPattern = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/;
          if (!emailPattern.test($('#cardHolderEmail').val())) {
            $('#cardHolderEmail').parent().append('<div class="requiredArea">Please verify your email</div>');
            calcScrollTop($email);
            requirei++;
          }
        }
        if (scrollTopWhere < windowHeight) {
          $("body,html").animate({
            scrollTop: scrollTopWhere
          })
        }
        if(requirei>0){
          $("#sub_b").button('reset');
          return false;
        }
        return true;
      }
  </script>
</html>
