
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="expires" content="Sun, 01 Jan 2014 00:00:00 GMT"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <title>Profile & 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" type="text/css" href="<%= tconfig.tsite_url %>views/payment/css/owl.carousel.min.css">
    <link rel="stylesheet" type="text/css" href="<%= tconfig.tsite_url %>views/payment/css/owl.theme.default.min.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" type="text/less" href="<%= tconfig.tsite_url %>views/payment/css/apptype/XBTYAIO/style.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/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="<%= tconfig.tsite_url %>views/payment/js/snackbar.min.js"></script>
    <script 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(24%) sepia(32%) saturate(2811%) hue-rotate(253deg) brightness(91%) contrast(100%)');
            document.documentElement.style.setProperty('--mainfilterimgHover', 'invert(11%) sepia(28%) saturate(4958%) hue-rotate(262deg) brightness(93%) contrast(94%)');
            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>
</head>
<body class="payment-mode">
<div class="overlay" style="display: block;">
    <div class="overlay__inner" style="display: none;">
        <div class="overlay__content">
            <span class="spinner"></span>
        </div>
    </div>
</div>
<div class="container py-4 px-0 custom-scroll-div">
    <div class="row payment-header" >
        <div class="col-lg-12 py-2 payment-header-content">
            <div class="float-left" id="close-action">
                <a href="<%= backendUrl %>/api/failure?success=0&page_action=close">
                    <img src="<%= tconfig.tsite_url %>views/payment/images/back.png"></a>
                </div>
            <div class="mx-auto text-center">Select Payment Mode</div>
        </div>
        <input type="hidden" name="pay_by_organization" id="pay_by_organization" value="No">
        <input type="hidden" id="selected_payment_mode" value="card">
    </div>
    <form method="POST" action="" id="payment_mode_form">
        <input type="hidden" name="form_submit" value="Yes">
        <input type="hidden" name="form_return" value="Yes">
        <input type="hidden" name="returnUrl" value="">
        <div class="row custom-mb-footer mx-0" style="margin-top: 20px">
            <ul class="profile-section  justify-content-center w-100 profile-select" id="profile-select">
                <li class="profile-section-item mr-0 active" id="personal-tab" style="display: none">
                    <label class="mb-0">
                        <span class="personal-tab-text">Personal</span>
                        <input type="radio" name="profile" value="personal" checked>
                    </label>
                </li>
                            </ul>
            
            
            <div class="business-tab-content w-100" id="business-tab-content" >
                                    <div class="org-info-img mb-3">
                        <img src="<%= tconfig.tsite_url %>views/payment/images/business-profile.png">
                    </div>
                    <div class="org-info mb-3">
                        <p class="org-info-title">Get more with business travel</p>
                    </div>
                    <div class="alert alert-secondary" id="org-info">
                       
                    </div>
                                <div class="alert alert-secondary d-none-alt" role="alert" id="org_note" >
                    <img src="<%= tconfig.tsite_url %>views/payment/images/exclamation-mark.svg"> Organization will pay for the job on your behalf.                </div>
            </div>
            <div class="modal fade custom-select-modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" id="select_org">
                <div class="modal-dialog modal-dialog-centered modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Select Organization</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&#x2715;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <ul class="list-group">
                                                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="personal-tab-content" class="personal-tab-content" >

                
                    <div  class="payment-option-item  ">
                        <label class="payment-mode-block mb-3 " id="payment_mode_cash">
                            <div class="payment-mode-content">
                                <span class="payment-mode-title">
                                    <img class="payment-mode" src="<%= tconfig.tsite_url %>views/payment/images/cash-payment.svg" alt="Cash">Cash                                </span>

                                                            </div>
                            <div class="payment-option-selected">
                                <img src="<%= tconfig.tsite_url %>views/payment/images/check-circle.png">
                            </div>
                                                            <input type="radio" name="payment_mode" value="cash" >

                                                    </label>
                    </div>
                                    <div class="payment-option-item">
                        <label class="payment-mode-block mb-3 active" id="payment_mode_card">
                            <div class="payment-mode-content">
                                <span class="payment-mode-title">
                                    <img class="payment-mode" src="<%= tconfig.tsite_url %>views/payment/images/card.svg" alt="Card">Card                                </span>
                            </div>
                            <div class="payment-option-selected">
                                <img src="<%= tconfig.tsite_url %>views/payment/images/check-circle.png">
                            </div>
                            <input type="radio" name="payment_mode" value="card" checked>
                        </label>
                    </div>
                                    <div class="payment-option-item">
                        <label class="payment-mode-block mb-3 " id="payment_mode_wallet" onclick="return false;">

                            <div class="payment-mode-content">
                                <span class="payment-mode-title">
                                    <img class="payment-mode" src="<%= tconfig.tsite_url %>views/payment/images/wallet-payment.svg" alt="Wallet"><span>Wallet<br /><span class="in-app-wallet-amount"><%= userCurrency + ' ' + walletAmount %></span></span>
                                </span>
                            </div>
                            <div class="payment-option-selected">
                                                                <button type="button" class="btn btn-link add-money-btn-option mr-2" onclick="openInAppWallet()">Add</button>
                                                                <img src="<%= tconfig.tsite_url %>views/payment/images/check-circle.png">
                            </div>
                            <input type="radio" name="payment_mode" value="wallet" >
                        </label>
                    </div>
                            </div>
            <input type="hidden" id="payment_mode_error" value="Please select a payment mode">
                            <div class="card-info my-4 w-100" style="display: block;">
                    <ul class="list-group">
                        <input
    type="hidden"
    value="<%= CardsDetails ? CardsDetails.iPaymentInfoId : '' %>"
    id="payid"
/>
                    <% if (CardsDetails) { %>
                        <li class="list-group-item d-flex align-items-center justify-content-between">
                                                                <span><%= CardsDetails.tCardNum %></span>
                                    <span>
                                        <button type="button" class="btn card-btn" 
                                        onclick="addOrChangeCard('PAYMENT_LIST','')">Change Card</button>
                                    </span>
                                                        </li>
                                                        <% } else { %>
        <li class="list-group-item d-flex align-items-center justify-content-between">
    <span>
    <button type="button" class="btn card-btn" 
    onclick="addOrChangeCard('ADD_CARD','');">Add Card</button>
    </span>
        </li>
    <% } %>
                    </ul>
                </div>
                    </div>
        <input type="hidden" id="promocode_val" name="promocode_val" value="">
        <input type="hidden" id="promocode_val_temp" value="">
    </form>
    <div class="row payment-footer pb-4">
        <div class="col-lg-8 mx-auto text-center pt-3 payment-footer-content">
                        <input type="hidden" id="ePaymentType" value="">
                            <button type="button" class="btn btn-primary btn-block btn-lg payment-mode-btn" id="payment_mode_btn" onclick="paymentModeForm()">Done</button>
                    </div>
    </div>
</div>
<script src="<%= tconfig.tsite_url %>views/payment/js/custom.js"></script>
<script type="text/javascript">
    var org_available = 'No';

    function setPaymentModeBtnText() {
        if ($('[name="profile"]:checked').val() == "business" && org_available == "No") {
            $('#payment_mode_btn').html("SETUP NOW");
            $('#payment_mode_btn').attr("onclick", "profileAdd()");
        } else {
            $('#payment_mode_btn').html("Done");
            $('#payment_mode_btn').attr("onclick", "paymentModeForm()");

                    }
    }

    function openInAppWallet() {
        redirectToUrl("#");
    }

    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 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 hideOverlay() {
    $('.overlay').hide();
    $('.overlay__content').show();
    $('body').css('overflow', 'auto');
    $('.overlay').removeClass('bg-overlay');
}
    function paymentModeForm(){
        showOverlay();
         if ($('#selected_payment_mode').val() == 'card') {
            console.log("$('#payid').val() ",$('#payid').val() )
                if ($('#payid').val() == "") {

                    hideOverlay();

                    console.error("card missing error");
                    showSnackbar("Please add Card Details");

                    return; // IMPORTANT
                }else{
                    console.log("working else")
                }

            

                const pval =  $('#payid').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;
                                     redirectToUrl(rurl);
                                } else {
                                     rurl = '<%= backendUrl %>/api/failure?success=0&paymentModeSelected=Yes';
                                     redirectToUrl(rurl);
                                }
                            })
                            .catch(err => {
                                hideOverlay();
                                console.error(err);
                                showSnackbar("Something went wrong");
                            });              
               //  $('#select-card-form').submit();
                $('.overlay').show();
                $('body').css('overflow', 'hidden');

            }
    }
    



    function addOrChangeCard(pageType,paymentId) {
        let changeUrl;
        if(pageType == 'PAYMENT_LIST'){
            changeUrl = "/api/savedCard";
        }else{
            changeUrl = "/api/addNewCard";
        }

         const currentUrl = new URL(window.location.href);
                                    currentUrl.pathname = currentUrl.pathname.replace("/api/paymentModePage", changeUrl);
                                    currentUrl.searchParams.set("iPaymentInfoId", "");
                                    currentUrl.searchParams.set("PAGE_TYPE", pageType);
                                    currentUrl.searchParams.set("IS_SELECT_CARD", "Yes");

        
         redirectToUrl(currentUrl);
    }





   
        
    </script>
</body>
</html>