<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>
<style>
    .amount-options {
    display: flex;
    gap: 10px;
    margin: 16px 0;
    flex-wrap: wrap;
    padding-left: 10px;
}

.amount-btn {
    min-width: 78px;
    height: 42px;
    padding: 0 14px;
    border: 1px solid #702c91;
    border-radius: 8px;
    background: #fff;
    color: #702c91;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amount-btn:hover {
    background: #702c91;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(112, 44, 145, 0.20);
}

.amount-btn.active {
    background: #702c91;
    color: #fff;
    box-shadow: 0 3px 8px rgba(112, 44, 145, 0.25);
}

.add-btn {
    width: 190px;
    height: 46px;
    border: none;
    border-radius: 9px;
    background: #702c91;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.add-btn:hover {
    background: #5e247c;
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(112, 44, 145, 0.25);
}

.add-btn span {
    font-size: 20px;
    margin-right: 6px;
    vertical-align: -1px;
}

.payment-area {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.amount-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 5px;
}

.add-btn {
    position: static !important;
    margin-top: 12px;
    width: 100%;
}

.add-btn {
    position: absolute;
}


.loading-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.55);
    z-index: 999999;
    
    display: none;
    align-items: center;
    justify-content: center;
}

.loading-content {
    background: #fff;
    padding: 25px 40px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
}

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 15px;
    border: 4px solid #e5d5ed;
    border-top: 4px solid #6e2c91;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    font-size: 15px;
    font-weight: 600;
    color: #333;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

</style>
<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">Payment</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="card-header amt-header d-flex align-items-center justify-content-between">
                    <div class="float-left">Payable Amount </div>
                        <div class="float-right h6 mb-0">
                            <span class="currency-symbol"><%= currency.vSymbol %>   <%= AMOUNT %></span>     
                        </div>
                </div>
            <div class="tab-content">
                <div class="tab-pane fade show active">
                    <div class="list-group card-list">
                        <div class="payment-area">

                        <div class="amount-options">
    <button type="button" class="amount-btn" data-amount="100">100</button>
    <button type="button" class="amount-btn" data-amount="500">500</button>
    <button type="button" class="amount-btn" data-amount="1000">1,000</button>
    <button type="button" class="amount-btn" data-amount="2000">2,000</button>
     <button type="button" class="amount-btn" data-amount="5000">5000</button>
</div>

<button type="button" id="doneBtn" class="add-btn">
    <span>+</span> Done
</button>
           
</div>
                  </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

   <div id="loadingOverlay" class="loading-overlay">
    <div class="loading-content">
        <div class="spinner"></div>
        <div class="loading-text">Processing ...</div>
    </div>
</div>


<script>

    const params = new URLSearchParams(window.location.search);

const reqAmount = Number(params.get('AMOUNT')) || 0;
console.log("reqAmount",reqAmount)

// Round UP to nearest 100
const baseAmount = Math.ceil(reqAmount / 100) * 100;
    console.log("baseAmount",baseAmount)


document.querySelectorAll('.amount-btn').forEach(button => {

    const addAmount = Number(button.dataset.amount);

    console.log("addAmount",addAmount)

    // Add amount to rounded base amount
    const finalAmount = baseAmount + addAmount;

    // Change displayed value
    button.textContent = finalAmount.toLocaleString();

    // Change data-amount value
    button.dataset.amount = finalAmount;
});


function hideOverlay() {
    $('.overlay').hide();
    $('.overlay__content').show();
    $('body').css('overflow', 'auto');
    $('.overlay').removeClass('bg-overlay');
}


function showSnackbar(alert_text) {
    $('.overlay').addClass('bg-overlay');
    Snackbar.show({
        text: alert_text,
        duration: 100000000,
        actionText: "&times;",
        customClass: 'snackbar-text-custom',
        // width: '-webkit-fill-available',
        onActionClick: function(element) {
            $(element).css('opacity', 0);
            hideOverlay();
        },
        actionTextColor: '#FF0000'
    });

    showOverlay('Yes');
}

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();
    }
}




function backUrl(){
    var url = window.location.href;
    window.location.href = window.location.href.replace('/savedCard', '/paymentModePage');
}


    let selectedAmount = null;

    // Amount button click
    document.querySelectorAll('.amount-btn').forEach(button => {
        button.addEventListener('click', function () {

            // Remove selected from other buttons
            document.querySelectorAll('.amount-btn').forEach(btn => {
                btn.classList.remove('selected');
            });

            // Select clicked button
            this.classList.add('selected');

            // Get amount
            selectedAmount = this.dataset.amount;

            console.log('Selected Amount:', selectedAmount);
        });
    });

    // Done button click
    document.getElementById('doneBtn').addEventListener('click', function () {

        if (!selectedAmount) {
            showSnackbar('Please select an amount');
             hideOverlay();
            return;
        }
       

         document.getElementById('loadingOverlay').style.display = 'flex';

         this.disabled = true;



        const url = new URL(window.location.href);
         url.searchParams.set("newAmount", selectedAmount);
        fetch(`<%= backendUrl %>/api/amountAdd?${url.searchParams.toString()}`, {
                                method: 'GET'
                                })
                                .then(res => res.json())
                                .then(data => {
                                hideOverlay();
                                if (data.success) {
                                            const currentUrl = new URL(window.location.href);
        const params = currentUrl.searchParams;
        const eType = params.get("eType");
        const ePaymentType = params.get("ePaymentType");
        const tSessionId = params.get("tSessionId");
        const GeneralMemberId = params.get("GeneralMemberId");
        const GeneralUserType = params.get("GeneralUserType");
        const iServiceId = params.get("iServiceId");
        const AMOUNT = params.get("AMOUNT");
        const description = params.get("description");
        const walletParams = new URLSearchParams();

walletParams.set("PAGE_TYPE", "WALLET_MONEY_ADD");
walletParams.set("AMOUNT", AMOUNT);
walletParams.set("tSessionId", tSessionId);
walletParams.set("GeneralUserType", GeneralUserType);
walletParams.set("GeneralMemberId", GeneralMemberId);
walletParams.set("ePaymentOption", "Card");
walletParams.set("vPayMethod", "Instant");
walletParams.set("SYSTEM_TYPE", "APP");
walletParams.set("vCurrentTime", Date.now());
walletParams.set("vCurrentTime", Date.now());
walletParams.set("IS_SELECT_CARD", "Yes");



 const newUrl =
        "<%= backendUrl %>/api/walletPayment?" +
        walletParams.toString();
        window.location.href = newUrl;

    }
                                 else {
                                     document.getElementById('loadingOverlay').style.display = 'none';

    // Enable button
    this.disabled = false;
                                    showSnackbar(data.message || "Unable to Add");

                                }
                            })
                            .catch(err => {
                                 document.getElementById('loadingOverlay').style.display = 'none';

    // Enable button
    this.disabled = false;
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });              
       
  
    });



    

$('#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/paymentProcess?${url.searchParams.toString()}`, {
                                method: 'GET'
                                })
                                .then(res => res.json())
                                .then(data => {
                                hideOverlay();
                                let rurl;
                                if (data.success) {
                                      rurl = '<%= backendUrl %>/api/paymentsuccessful?success=1&paymentModeSelected=Yes&transctionId='+data.data;
                                    window.location.href = rurl;
                                } else {
                                     rurl = '<%= backendUrl %>/api/failure?success=0&paymentModeSelected=Yes';
                                      window.location.href = rurl;
                                }
                            })
                            .catch(err => {
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });              
               //  $('#select-card-form').submit();
                $('.overlay').show();
                $('body').css('overflow', 'hidden');
            });
</script>