<html>
    <head>
        <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Stripe Payment</title>
<link rel="icon" href="<%= tconfig.tsite_url %>views/payment/images/apptype/XBTYAIO/favicon.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/bootstrap-4.6.min.css">
<link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/fontawesome.css">
<link rel="stylesheet" type="text/css" href="<%= tconfig.tsite_url %>views/payment/css/snackbar.min.css">
<link rel="stylesheet" type="text/css" href="<%= tconfig.tsite_url %>views/payment/css/style_v1.css">
<link rel="stylesheet" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/style.less" type="text/less">

<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/jquery.min.js"></script>
<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/popper.min.js"></script>
<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/fontawesome.js"></script>
<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/snackbar.min.js"></script>
<script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/templates/XBTYAIO/assets/js/less.min.js"></script>
<script src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
    document.write('<style type="text/css">body{display:none}</style>');
    jQuery(function($) {
                document.documentElement.style.setProperty('--mainColor', '#6E2C91');
        document.documentElement.style.setProperty('--mainColorSecond', '#6E2C91');
        document.documentElement.style.setProperty('--mainTextColor', '#FFFFFF');
        document.documentElement.style.setProperty('--mainTextColorHover', '#FFFFFF');
        document.documentElement.style.setProperty('--mainTextMenuColorHoverDefault', '#000000');
        document.documentElement.style.setProperty('--mainColorHover', '#421b57');
        document.documentElement.style.setProperty('--mainfilterimg', 'invert(22%) sepia(14%) saturate(7398%) hue-rotate(257deg) brightness(99%) contrast(97%)');
        document.documentElement.style.setProperty('--mainfilterimgHover', 'invert(10%) sepia(67%) saturate(2448%) hue-rotate(264deg) brightness(93%) contrast(93%)');
        document.documentElement.style.setProperty('--buttonColor', '#000000');
        document.documentElement.style.setProperty('--mainColorLight', '#f1eaf4');
        document.documentElement.style.setProperty('--gotopBGColor', '#6E2C91');
        document.documentElement.style.setProperty('--gotopHoverBGColor', '#421b57');
        document.documentElement.style.setProperty('--gotopImgColor', 'invert(0)');
        document.documentElement.style.setProperty('--gotopHoverImgColor', 'invert(100%)');

                
        $('body').css('display','block');
    });
</script>       
 <!-- <script src="https://js.stripe.com/basil/stripe.js"></script> -->
    </head>

        <body class="stripe-pg">
        <div class="overlay">
            <div class="overlay__inner">
                <div class="overlay__content"><span class="spinner"></span></div>
            </div>
        </div>
        
                <div class="container py-4 custom-scroll-div">
            <div class="row payment-header" style="padding-top: calc(98px - 46px)">
    <div class="col-lg-8 py-2 payment-header-content">
        <div class="payment-title">
                                        <a class="text-reset float-left" href="#" onclick="backUrl()" style="width: 40px"><img src="<%= tconfig.tsite_url %>views/payment/images/back.png"></a>
                        <div class="mx-auto text-center">Add New Card</div>
            <div id="close-action">
                                <a href="<%= backendUrl %>/api/failure?success=0&page_action=close">Close</a>
                            </div>
        </div>
        
        <div class="payment-title-border" style="margin-left: 40px"></div>
    </div>
</div>
            <div class="row justify-content-center custom-mt-header add-card-form">
                <div class="col-lg-5 col-md-6 col-sm-12 p-0">
                    <div class="card">
                        <div class="card-header p-0">
                            <!-- Credit card form content -->                            
                            <div class="tab-content">
                                <!-- credit card info-->
                                <div id="credit-debit-card" class="tab-pane fade show active">
                                    <form id="payment-form" class="mb-0" action="" method="POST">
                                        <div class="form-group">
                                            <label for="cardholder-name">
                                                <h6 class="mb-0">Card Holder Name</h6>
                                            </label>
                                            <div class="input-group">
                                                <!-- <div class="input-group-prepend">
                                                    <span class="input-group-text"><i class="fa fa-user"></i></span>
                                                </div> -->
                                                <input type="text" class="form-control" name="cardholder-name" id="cardholder-name" placeholder="Card Holder Name" value="sathya p" onkeypress="return alphabetsOnly(this, event)" tabindex="1">
                                            </div>
                                            <small id="card-name-error" class="text-danger mb-2 float-left"></small>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="form-group">
                                            <label for="cardNumber">
                                                <h6 class="mb-0">Card Number</h6>
                                            </label>

                                            <div class="input-group-prepend">
                                                <div id="cardNumber" tabindex="2"></div>
                                                <span class="input-group-text card-type">
                                                    <img src="<%= tconfig.tsite_url %>views/payment/icons/DefaultImg/ic_card_default.svg" />
                                                </span>
                                            </div>
                                            <small id="card-num-error" class="text-danger mb-2 float-left"></small>
                                            <div class="clearfix"></div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-7">
                                                <div class="form-group">
                                                    <label>
                                                        <span class="hidden-xs">
                                                            <h6 class="mb-0">Expiry (MM / YY)</h6>
                                                        </span>
                                                    </label>
                                                    <div class="input-group-prepend">
                                                        <div id="cardExpiry" tabindex="3"></div>
                                                        <span class="input-group-text card-expiry">
                                                            <img src="<%= tconfig.tsite_url %>views/payment/images/expiry-calendar.png" />
                                                        </span>
                                                    </div>
                                                    
                                                    <div class="clearfix"></div>
                                                    <small id="card-exp-error" class="text-danger mb-2 float-left"></small>
                                                    <div class="clearfix"></div>
                                                </div>
                                            </div>
                                            <div class="col-sm-5">
                                                <div class="form-group mb-0">
                                                    <label>
                                                        <h6 class="mb-0">CVV <span class="cvv-info" data-toggle="tooltip" title="The 3 digit code on the back of your card"><i class="fa fa-question-circle d-inline"></i></span>
                                                        </h6>
                                                    </label>
                                                    <div id="cardCvc" tabindex="4"></div>
                                                    <div class="clearfix"></div>
                                                    <small id="card-cvc-error" class="text-danger mb-2 float-left"></small>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer"> 
                                            <div class="row">
                                                                                                <div class="col-sm-6 pl-2" style="width: 100%;" >
                                                    <button type="submit" class="btn btn-primary btn-block shadow-sm submit-card-btn" id="card-button">Submit </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <!-- End -->
                            </div>
                        </div>
                    </div>
                </div>

                                <div class="col-lg-5 col-md-6 col-sm-12">
                <div class="row">
    <div class="col-md-12 d-none-alt px-0" id="accepted-cards" style="display: block">
        <div class="card ">
            <div class="card-header bg-white">
                <h5 class="card-title">We Accept:</h5>
                               <ul class="accepted-cards">
                    <% supportCards.forEach(function(supported_card) { %>
                        <li <%= supported_card === "mada" ? 'style="width: 100px"' : '' %>>
                            <img src="<%= tconfig.tsite_url %>views/payment/icons/DefaultImg/ic_<%= supported_card %>_system.svg" alt="<%= supported_card %>">
                        </li>
                    <% }) %>
                </ul>

                <p class="card-text"><strong>Note: </strong>Other card type may not be supported by us.</p>
            </div>
        </div>
    </div>
</div>                </div>

                <div class="col-lg-12">
    <div class="secure-section">
        <img src="<%= tconfig.tsite_url %>views/payment/images/secure.svg">
        <span>Secure</span>
    </div>
</div>     

 <script type="text/javascript">




function backUrl(){
    var url = window.location.href;
    window.location.href = window.location.href.replace('/addNewCard', '/savedCard');
}

            // Create a Stripe client.
            var stripe = Stripe('<%= STRIPE_PUBLISH_KEY %>');
           
            // Create an instance of Elements.
            var elements = stripe.elements();

            // Custom styling can be passed to options when creating an Element.
            // (Note that this demo uses a wider set of styles than the guide below.)
            var style = {
                base: {
                    color: '#000000',
                    backgroundColor: '#ffffff',
                    fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
                    fontSmoothing: 'antialiased',
                    fontSize: '16px',
                    padding: '.375rem .75rem',
                    '::placeholder': {
                        color: '#a1a1a1'
                    },
                    lineHeight: '1.5'
                },
                invalid: {
                    color: '#fa755a',
                    iconColor: '#fa755a'
                }
            };

            // Add an instance of the card Element into the `card-element` <div>.
            var cardNumberElement = elements.create('cardNumber', {style: style, placeholder: 'XXXX XXXX XXXX XXXX'});
            cardNumberElement.mount('#cardNumber');

            var cardExpiryElement = elements.create('cardExpiry', {style: style, placeholder: 'Month / Year'});
            cardExpiryElement.mount('#cardExpiry');

            var cardCvcElement = elements.create('cardCvc', {style: style, placeholder: 'XXX'});
            cardCvcElement.mount('#cardCvc');
            
            // Handle real-time validation errors from the card Element.
            cardNumberElement.addEventListener('change', function(event) {
                if (event.error) {
                    if(event.empty == true)
                    {
                        $('#card-num-error').text("required");
                    }
                    else{
                        $('#card-num-error').text("required");
                    }
                } else {
                     $('#card-num-error').text('');
                }

                var cardType = event.brand;
                if(cardType == "unknown" || cardType == undefined)
                {
                    $('.card-type').find('img').attr('src', '<%= tconfig.tsite_url %>views/payment'+'/icons/DefaultImg/ic_card_default.svg');
                }
                else{
                    $('.card-type').find('img').attr('src', '<%= tconfig.tsite_url %>views/payment'+'/icons/DefaultImg/ic_'+cardType+'_system.svg');
                }
            });

            cardExpiryElement.addEventListener('change', function(event) {
                if (event.error) {
                    if(event.empty == true)
                    {
                        $('#card-exp-error').text("Required");
                    }
                    else{
                        $('#card-exp-error').text("Invaliad");
                    }
                } else {
                     $('#card-exp-error').text('');
                }
            });

            cardCvcElement.addEventListener('change', function(event) {
                if (event.error) {
                    if(event.empty == true)
                    {
                        $('#card-cvc-error').text("REQUIRED");
                    }
                    else{
                        $('#card-cvc-error').text("REQUIRED");
                    }
                } else {
                     $('#card-cvc-error').text('');
                }
            });

            $('#cardholder-name').on('change, keyup', function(){
                if($(this).val().length > 0)
                {
                    $('#card-name-error').text("");
                }
            });

            var cardholderName = document.getElementById('cardholder-name');
            // Handle form submission.
            var form = document.getElementById('payment-form');
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                // $('.overlay').show();
                // $('body').css('overflow', 'hidden');
                var ownerInfo = {
                    billing_details: {
                        name: $('#cardholder-name').val(),
                        email: '<?= $userData[0]["vEmail"] ?>'
                    },
                };
                if($('#cardholder-name').val() == "")
                {
                    $('#card-name-error').text("REQUIRED");
                } else {
                     $('#card-name-error').text('');
                }
                $('#card-button').append(' <i class="fa fa-spinner fa-spin"></i>');
                $('#cardholder-name').prop('readonly', true);
                $('#card-button').prop('disabled', true);
               
                showOverlay();
                const clientSecret = "<%= setupIntent.client_secret %>";
                stripe.confirmCardSetup(
                        clientSecret,
                        {
                            payment_method: {
                                card: cardNumberElement,
                                billing_details: {name: cardholderName.value, email: '<%= user.vEmail %>'}
                            }
                        }
                ).then(function (result) {
                    
                    if (result.error) {
                        hideOverlay();
                        // Display error.message in your UI.
                        cardNumberElement.update({disabled:false});
                        cardExpiryElement.update({disabled:false});
                        cardCvcElement.update({disabled:false});
                        $('#card-button').find('.fa-spinner').remove();
                        $('#cardholder-name').prop('readonly', false);
                        $('#card-button, #cancel-btn').prop('disabled', false);
                        $('#saved_card_tab').removeClass('disabled');

                        showSnackbar(result.error.message);
                        
                        return false;
                    } else {
                        if (result.setupIntent.status === 'succeeded') {
                           showOverlay();
                           const paymentMethodId = result.setupIntent.payment_method;
                            const url = new URL(window.location.href);
                                url.searchParams.set("iPaymentInfoId", paymentMethodId);
                            fetch(`<%= backendUrl %>/api/cardAdd?${url.searchParams.toString()}`, {
                                method: 'GET'
                                })
                                .then(res => res.json())
                                .then(data => {
                                hideOverlay();
                                if (data.success) {
                                    const currentUrl = new URL(window.location.href);
                                    currentUrl.pathname = currentUrl.pathname.replace("addNewCard", "savedCard");
                                    currentUrl.searchParams.set("iPaymentInfoId", paymentMethodId);
                                    currentUrl.searchParams.set("PAGE_TYPE", "PAYMENT_LIST");
                                    currentUrl.searchParams.set("IS_SELECT_CARD", "Yes");
                                    window.location.href = currentUrl.toString();
                                } else {
                                    showSnackbar(data.message || "Unable to save card");
                                }
                            })
                            .catch(err => {
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });
                        } else {
                            hideOverlay();
                            $('#card-num-error').text(result.setupIntent.status);
                        }
                    }
                });
            });

            function stripeSourceHandler(source) {
                if($('#cardholder-name').val() == "")
                {
                    $('#card-name-error').text("REQUIRED");
                    return false;
                } else {
                     $('#card-name-error').text('');
                }
                // Insert the source ID into the form so it gets submitted to the server
                var form = document.getElementById('payment-form');
                var hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeSource');
                hiddenInput.setAttribute('value', source.id);
                form.appendChild(hiddenInput);

                // Submit the form
                form.submit();
            }

            function backToPaymentList(){
                    window.location.href = window.location.href.replace('/addNewCard', '/savedCard');

            }

            $('#cancel-btn').click(function() {
                backToPaymentList();
            });
        </script>
        <script src="<%= tconfig['tsite_url'] %>views/payment/js/custom.js"></script>