<style type="text/css">
.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1;
}
 .form-group {
    width: 290px;
}

.formInner {
    font-family: 'Abel' !important;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px auto;
    text-align: center;
}

#payButton {
    width: 150px;
    display: block;
    margin: 20px auto;
    height: 50px !important;
    font-size: 20px;
    background-color: #387b3b;
    border-color: #387b3b;
    color: #FFF;
    border-radius: 5px;
}

#payButton:hover {
    background-color: #387b3b;
    border-color: #387b3b;
    box-shadow: 0 3px 4px #bbbbbb;
}

#payButton:active {
    opacity: 0.7;
}

.payment-field {
    border-radius: 4px;
    width: 48%;
    margin-bottom: 14px;
    font-size: 16px;
    transition: 200ms;
}

.payment-field input:focus {
    border: 2px solid #CCC;
    outline: none !important;
}

.payment-field:hover {
    box-shadow: 0 2px 4px #dddddd;
}

.payment-field input {
    border: 2px solid rgb(28, 196, 139);
    width: 100%;
    border-radius: 2px;
    padding: 4px 8px;
    height: 45px !important;
}

#payment-fields {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#ccnumber {
    width: 100%;
    font-size: 32px;
    height: 55px !important;
}

#ccexp,
#cvv {
    font-size: 32px;
}

.CollectJSInlineIframe, .CollectJSInlineIframe #ccnumber{
    height: 55px !important;
}
@media only screen and (max-width: 600px) {
 .theForm {
        width: 300px;
        max-width: 90%;
        margin: auto;
    }

    .form-group {
        width: 100%;
    }
}
 .clsPgLoader{z-index: 9999;} 
 
 .clsPgLoader span {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../images/loading.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: spin 2.5s linear infinite;
}
  </style>
        <!-- COLLECT.JS INLINE -->
<script src="https://secure.nationalprocessinggateway.com/token/Collect.js" data-tokenization-key="2f2V28-923J23-42TRvc-F6t5K3"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript"> 
		
        document.addEventListener('DOMContentLoaded', function () {
  CollectJS.configure({ 
      'validationCallback' : function(field, status, message) {
                        if (status) {
                            var message = field + " is now OK: " + message;
                            if(field=='ccnumber')
                            {
                            $(".validation-form1").hide();    
                            $(".validation-form1").html();
                            }
                            else if(field=='ccexp')
                            {
                                $(".validation-form2").hide();
                                $(".validation-form2").html();
                            }
                            else if(field=='cvv')
                            {
                                $(".validation-form3").hide();
                                $(".validation-form3").html();
                            }
                        } else {
                            var message =  message;
                            if(field=='ccnumber')
                            {
                            $(".validation-form1").show();    
                            if(message=='Field is empty')
                            {
                                message='Card number field is empty'
                            }
                            else
                            {
                                message;
                            }
                            $(".validation-form1").html(message);
                            }
                            else if(field=='ccexp')
                            {
                                $(".validation-form2").show();
                                 if(message=='Field is empty')
                            {
                                message='Card exp field is empty'
                            }
                            else
                            {
                                message;
                            }
                                $(".validation-form2").html(message);
                            }
                            else if(field=='cvv')
                            {
                                $(".validation-form3").show();
                                 if(message=='Field is empty')
                            {
                                message='CVV field is empty'
                            }
                            else
                            {
                                message;
                            }
                                $(".validation-form3").html(message);
                            }
                            
                        }
                        console.log(message);
                        
                         
                    },
    'callback': function (response) {
            $(document).ready(function () {
                setTimeout(function(){
                    $.ajax({
                        url: "",
                        dataType: "json",
                        data: {ptoken: ''+ response.token, np_cnumber: ''+ response.card.number },
                        type: "POST",
                        success: function (results) {
						//$(".clsPgLoader").show();
                         if(results==1){
							//$(".clsPgLoader").hide();
                           window.location = 'thanks-order'
                            }else{
                            $(".clsPgLoader").hide();
                            document.getElementById("paymentErrorInfo").innerHTML ='Transaction failed, please try again!';
                            }
                            
                        },
                    });

                }, 2000);
            });
        
    },
    variant: 'inline',
    googleFont: 'Abel',
    invalidCss: {
      color: '#B40E3E',
      'border-color': '#B40E3E',
    },
    validCss: {
      color: '#14855F'
    },
    customCss: {
     'height':'55px',
     'border-color': '#ddd',
     'border-style': 'solid',
     'border-width':'1px',
    },
    focusCss: {
      'border-color': '#1CC48B',
      'border-style': 'solid',
      'border-width': '1px'
    },
    fields: {
      cvv: {
        placeholder: 'CVV'
      },
      ccnumber: {
          placeholder: 'Card Number'
      },
      ccexp: {
          placeholder: 'Expiration Date (MM / YY)   '
      }
    }
  });
});
</script>
</head>

<body>
    
<img src="https://secure.nationalprocessinggateway.com/shared/images/clear.gif" width="280px" height ="40px" border="0" style="position:absolute"/>
 <div style="color:red; margin-top:45px;" id="paymentErrorInfo"></div>
<br /><br />
<?php if($subtotal<'0.5'){ ?>
<p align="center">Your cart is empty, please add some items in the cart.</p>
    <p align="center"><br><a href="indian-grocery-delivery" style="text-decoration:none"><input type="button" value="Keep Shopping" name="shopping" style="height:40px; width:200px; font-size:20px; color:#fff; background:rgba(0,153,204,1); border:1px solid rgba(0,153,204,1); border-radius:4px"></a></p>
    <?php
} else { ?>

    <img src="images/cards.PNG">
    <hr>
  
    <form class="theForm" action="results-sandbox-np.php">
              <div class="formInner">
            <div id="payment-fields">
               <div class="payment-field" id="ccnumber"></div>
                <div class="payment-field" id="ccexp"></div>
                <div class="payment-field" id="cvv"></div>
                <div class="payment-field" id="token"></div>
            </div>
        </div>
         <div class="validation-form1 alert alert-danger" style="display:none;"></div>
         <div class="validation-form2 alert alert-danger" style="display:none;"></div>
         <div class="validation-form3 alert alert-danger" style="display:none;"></div>
        <!-- <input type="submit" id="pay_amount"  value="Pay" name="pay_amount" style="height:45px; width:120px; font-size:20px; color:#fff; background:rgb(23, 162, 64); border:1px solid rgba(0,153,204,1); border-radius:4px"> -->
        <button type="submit" id="payButton" style="height:45px; width:120px; font-size:20px; color:#fff; background:rgb(23, 162, 64); border:1px solid rgba(0,153,204,1); border-radius:4px">
            Pay Now
        </button>
    </form>

<?php } ?>
    <div id="paymentTokenInfo"></div>
    <script>
 $("#payButton").on('click', function(e){
     
     $(".clsPgLoader").show();
     setTimeout(function(){
     var a = $(".validation-form1").html();
     var b = $(".validation-form2").html();
     var c = $(".validation-form3").html();
     if(a=='' && b=='' && c=='')
     {
     $(".clsPgLoader").show();
     }
     else
     {
         $(".clsPgLoader").hide();
     }
     }, 2000);
  });
   $("#payWithSaveCard").on('click', function(e){
     //$(".clsPgLoader").show();
         
  });
  function submitOrder()
  {
      $(".clsPgLoader").show();
      var customervault=$("#customervault").val();
      var user_cd=$("#user_cd").val();
      $.ajax({
        url: 'results-sandbox-np.php',
        type: 'post',
        data: { "customervault": customervault,"user_cd": user_cd},
        success: function(response) { 
            if(response==1){
							//$(".clsPgLoader").hide();
                            window.location = 'thanks-order'
                            }else{
                            $(".clsPgLoader").hide();
                            document.getElementById("paymentErrorInfo").innerHTML ='Transaction failed, please try again!';
                            }
            
        }
    });
  }
  function changePaymentMethod()
  {
      $("#paywithsavedcards").hide();
      $('#changemethod').show();
  }
  function backToSaveCards()
  {
      $("#paywithsavedcards").show();
      $('#changemethod').hide();
  }
</script>