<%@ page extends="oneit.servlets.jsp.JSPInclude" %>

<%@ include file="/inc/stdimports50.jsp" %><%-- This is in cougar --%>
<%@ include file="/inc/stdcms.jsp" %><%-- This is in cougar --%>
<%@ include file="/extensions/performa/inc/stdimports.jsp" %>

<%
    Company company     =  (Company) getData(request, "Company");
    boolean isReplace   =  (boolean) getData(request, "IsReplace"); 
    boolean isEdit      =  (boolean) getData(request, "IsEdit");  
    String  nextPage    =   WebUtils.getSamePageInRenderMode(request, "Billing");
%>

<oneit:dynIncluded>
    <script>
        $(document).ready(function() {
            $('#cardExpiry').attr("maxlength", 7);

            $("#cardExpiry" ).keydown(function(e) {
                var val = $(this).val();

                if(e.keyCode == 8) {
                    temp_val = val.substring(0,1);
                    $(this).val(temp_val);
                }

                if(!isNaN(val)) {

                    if(val.length === 3 || val.length === 2)
                    {
                                temp_val = val + " / ";
                        $(this).val(temp_val);
                    }
                    else
                    {
                        if(val > 1 && val < 10 && val.length === 1) {
                            temp_val = "0" + val + " / ";
                            $(this).val(temp_val);
                        }
                        else if (val >= 1 && val < 10 && val.length === 2 && e.keyCode != 7) {
                            temp_val = val + " / ";
                            $(this).val(temp_val);			        	
                        }
                        else if(val > 9 && val.length === 2 && e.keyCode !== 7) {
                            temp_val = val + " / ";
                            $(this).val(temp_val);
                        }
                   }
                }
            });  
         });
    </script>
        <div class="form-group row">
            <div class="col-md-12 col-sm-12 col-xs-12 text-left">
                <label>Card Number</label>
                <div style="float: right; margin-top:-15px;">
                    <img src="images/master-small.png"    style="width:30px;"/>
                    <img src="images/visa.svg"    style="width:40px;"/>
                </div>

                <%
                    if(isEdit)
                    {
                %>
                        <input type="text" name="cardNumber" value="<%= company.getCardNumber() %>" class="form-control" readonly>
                <%
                    }
                    else
                    {
                %>
                        <div id="card-number"   class="form-control"    style="padding-top:15px;">
                        </div>
                <%
                    }
                %>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-md-12 col-sm-12 col-xs-12 text-left">
                <label>Name on Card</label>
                <oneit:ormInput obj="<%= company %>"    type="text" attributeName="NameOnCard"  cssClass="form-control"  id="NameOnCard"  data-stripe="name"/>                                
            </div>
        </div>
        <div class="form-group row">
            <div class="col-lg-4 col-md-4 col-sm-4">
                <label>Expires</label>
            <%
                if(isEdit)
                {
            %>
                    <input type="text" id="cardExpiry"  class="form-control"    placeholder="MM / YY"   value="<%= company.getExpiry() %>">            
            <%
                }
                else
                {
            %>
                    <div id="card-expiry"   class="form-control"    style="padding-top:15px;">
                    </div>
            <%
                }
            %>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4">
                <label>CCV</label>
                <%
                    if(isEdit)
                    {
                %>
                        <input type="text" name="ccv" value="" class="form-control" readonly>

                <%
                    }
                    else
                    {
                %>
                        <div id="card-cvc"  class="form-control"    style="padding-top:15px;">
                        </div>
                <%
                    }
                %>
            </div>
            <div class="col-md-4col-lg-4 col-md-4 col-sm-4">
                <label>Postal Code</label>
                <oneit:ormInput obj="<%= company %>"    type="text" attributeName="CardPostCode"    cssClass="form-control" id="PostCode" />      
            </div>
        </div>  
            
</oneit:dynIncluded>

