<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/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 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(21%) sepia(22%) saturate(6311%) hue-rotate(263deg) brightness(90%) contrast(91%)');
        document.documentElement.style.setProperty('--mainfilterimgHover', 'invert(15%) sepia(17%) saturate(3722%) hue-rotate(246deg) brightness(98%) contrast(103%)');
        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="showOverlay(); backUrl();" style="width: 40px">
            <img src="<%= tconfig.tsite_url %>views/payment/images/back.png"></a>
            <div class="mx-auto text-center">Credit Cards</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 saved-cards-list">
    <div class="col-lg-5 col-md-6 col-sm-12 p-0">
        <div class="card">
            <div class="tab-content">
                <div class="tab-pane fade show active">
                    <div class="list-group card-list">
                       <% if (userPaymentInfoData && userPaymentInfoData.length) { %>
    <% userPaymentInfoData.forEach(function(paymentInfoData) { %>

        <div class="list-group-item list-group-item-action">
            <div class="d-flex align-items-center card-text">

                <% if (reqQuery.IS_SELECT_CARD === "Yes") { %>

                    <div class="custom-control custom-radio saved-card-checkbox">

                        <input
                            type="radio"
                            name="saved_card"
                            value="<%= paymentInfoData.iPaymentInfoId %>"
                            class="custom-control-input"
                            id="saved_card_<%= paymentInfoData.iPaymentInfoId %>"
                            <%= (paymentInfoData.eDefault === "Yes")
    ? "checked"
    : "" %>>

                        <label
                            class="custom-control-label"
                            for="saved_card_<%= paymentInfoData.iPaymentInfoId %>"
                        >
                            <span class="card-brand">
                                <img
                                    src="<%= tconfig.tsite_url %>views/payment/icons/DefaultImg/ic_<%= paymentInfoData.vCardBrand %>_system.svg"
                                    class="mr-2"
                                    onerror="this.src='<%= tconfig.tsite_url %>views/payment/DefaultImg/ic_card_default.svg'"
                                >

                                <%= paymentInfoData.tCardNum.replace(/X/g, "*") %>
                            </span>
                        </label>

                    </div>

                <% } else { %>

                    <span class="card-brand">

                        <img
                            src="<%= tconfig.tsite_url %>views/payment/icons/DefaultImg/ic_<%= paymentInfoData.vCardBrand %>_system.svg"
                            class="mr-3"
                            onerror="this.src='<%= tconfig.tsite_url %>views/payment/icons/DefaultImg/ic_card_default.svg'"
                        >

                        <span>

                            <%= paymentInfoData.tCardNum.replace(/X/g, "*") %>

                            <br>

                            <% if (paymentInfoData.eDefault !== "Yes") { %>

                                <button
                                    type="button"
                                    class="btn btn-secondary btn-sm set-default-card"
                                    data-cardid="<%= paymentInfoData.iPaymentInfoId %>"
                                >
                                    <%= languageLabelsArr.LBL_SET_AS_DEFAULT_TXT %>
                                </button>

                            <% } else { %>

                                <span class="default-text">
                                    <%= languageLabelsArr.LBL_PRIMARY_TXT %>
                                </span>

                            <% } %>

                        </span>

                    </span>

                <% } %>

                <span>

                    <img
                        src="<%= tconfig.tsite_url %>views/payment/images/delete.png"
                        data-toggle="tooltip"
                        title="<%= languageLabelsArr.LBL_DELETE_CARD_TXT %>"
                        data-cardid="<%= paymentInfoData.iPaymentInfoId %>"
                        data-cardtoken="<%= paymentInfoData.tCardToken %>"
                        data-cardno="<%= paymentInfoData.tCardNum.replace(/X/g, '*') %>"
                        class="delete-card"
                    >

                </span>

            </div>
        </div>

    <% }) %>
<% } %>
                                            </div>
                    <div class="card-footer"> 
                        <div class="row">
                                                        <div class="col-sm-6 pr-2" style="width: 50%;">
                                <a href="javascript:void(0);" class="btn btn-primary btn-block shadow-sm" id="add-card-button"> Add New Card </a>
                            </div>
                            <div class="col-sm-6 pl-2" style="width: 50%">
                                <button type="submit" class="btn btn-primary btn-block shadow-sm confirm-btn" id="confirm_card"> Confirm </button>
                            </div>
                                                    </div>
                    </div>
                </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>     

<div class="modal fade payment-modal" tabindex="-1" role="dialog" id="delete_card_modal" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <form action="" method="post" id="delete-form" class="mb-0">
                <input type="hidden" name="eStatus" value="Delete">
                <input type="hidden" name="iPaymentInfoId" id="iPaymentInfoId" value="">
                <input type="hidden" name="vCardToken" id="vCardToken" value="">
                <div class="modal-header">
                    <h5 class="modal-title">Delete Card</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&#x2715;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p class="text-center">Are you sure want to delete ?></p>
                    <h5 id="card_no" class="text-center"></h5>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" id="delete_card_btn">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>


function hideOverlay() {
    $('.overlay').hide();
    $('.overlay__content').show();
    $('body').css('overflow', 'auto');
    $('.overlay').removeClass('bg-overlay');
}


function showOverlay(hideLoader = "No", hideContent = "No") {
    $('body').css('overflow', 'hidden');
    $('.overlay__inner').show();    
    if(hideLoader == "Yes") {
        $('.overlay__content').hide();
        if(hideContent == "No") {
            $('.overlay').fadeIn();    
        }
        else {
            $('.overlay').show();    
        }
    }
    else {
        $('.overlay').show();
        $('.overlay__content').show();
    }
}

$('.delete-card').click(function() {
    $('#iPaymentInfoId').val($(this).data('cardid'));
    $('#vCardToken').val($(this).data('cardtoken'));
    $('#card_no').text($(this).data('cardno'));
    $('#delete_card_modal').modal('show');
});

$('#add-card-button').click(function() {
    showOverlay();
    var url = window.location.href;
    url = url.replace('PAYMENT_LIST', 'ADD_CARD');
    url = window.location.href.replace(
            "/api/savedCard",
           "/api/addNewCard"
        );
    window.location.href = url;
});

function backUrl(){
    var url = window.location.href;
    window.location.href = window.location.href.replace('/savedCard', '/paymentModePage');
}


$('#delete_card_btn').click(function() {
    const paymentInfoId = document.querySelector("#iPaymentInfoId").value;
    const cardToken = document.querySelector("#vCardToken").value;
    const qString = '?paymentInfoId='+paymentInfoId+'&cardToken='+cardToken;
    fetch(`<%= backendUrl %>/api/deleteCard${qString}`, {
                                method: 'GET'
                                })
                                .then(res => res.json())
                                .then(data => {
                                hideOverlay();
                                if (data.success) {
                                    const currentUrl = new URL(window.location.href);
                                    currentUrl.searchParams.set("iPaymentInfoId", cardToken);
                                    currentUrl.searchParams.set("PAGE_TYPE", "PAYMENT_LIST");
                                    window.location.href = currentUrl.toString();
                                } else {
                                    showSnackbar(data.message || "Unable to save card");
                                }
                            })
                            .catch(err => {
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });              
    $('#delete_card_modal').modal('hide');
    showOverlay();
});
    $('#confirm_card').click(function() {
                $('[name="selected_iPaymentInfoId"]').val($('[name="saved_card"]:checked').val()); 
               const pval = $('[name="saved_card"]:checked').val(); 
                             const url = new URL(window.location.href);
                                url.searchParams.set("iPaymentInfoId", pval);
                            fetch(`<%= backendUrl %>/api/defaultcardSet?${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("savedCard", "paymentModePage");
                                    currentUrl.searchParams.set("iPaymentInfoId", data.data);
                                    currentUrl.searchParams.set("PAGE_TYPE", "PAYMENT_LIST");
                                    console.log("currentUrl",currentUrl);
                                    // window.location.href = currentUrl.toString();
                                     window.location.href = currentUrl;
                                } else {
                                    showSnackbar(data.message || "Unable to save card");
                                }
                            })
                            .catch(err => {
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });              
               //  $('#select-card-form').submit();
                $('.overlay').show();
                $('body').css('overflow', 'hidden');
            });
</script>