<!DOCTYPE html>
<html lang="en" class="light-style layout-wide customizer-hide" dir="ltr" data-theme="theme-semi-dark" data-assets-path="../assets_inside/" data-template="vertical-menu-template-semi-dark">

<head>
    <?php require_once './partials/head.php'; ?>
</head>

<body style="background: #130F40;">
    <!-- Layout wrapper -->
    <div class="layout-wrapper layout-content-navbar">
        <div class="layout-container">
            <!-- Menu -->

            <?php require_once './partials/aside.php'; ?>
            <!-- / Menu -->
            <!-- Layout container -->
            <div class="layout-page">
                <!-- Navbar -->

                <?php require_once './partials/header.php'; ?>

                <!-- / Navbar -->
                <!-- Content wrapper -->
                <div class="content-wrapper">
                    <!-- Content -->

                    <div class="container-xxl flex-grow-1 container-p-y">
                        <h4 class="py-3 mb-4"><span class="text-muted fw-light">Wallet/</span> Deposit</h4>
                        <!-- Basic Layout -->
                        <div class="row">
                            <div class="col-xl">
                                <div class="card mb-4">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">Make Deposit</h5>
                                        <small class="text-muted float-end"></small>
                                    </div>
                                    <div class="card-body">
                                        <form role="form" id="deposite_form" onsubmit="return false;" autocomplete="off">
                                            <div class="mb-3">
                                                <label class="form-label" for="amount">Amount</label>
                                                <div class="input-group">
                                                    <div class="input-group-text">$</div>
                                                    <input class="form-control" id="amount" type="number" name="amount" required="" placeholder="e.g 1000" onkeypress="return /[0-9.]/i.test(event.key)">

                                                </div>
                                                <div id="defaultFormControlHelp" class="form-text text-danger">Minimum deposit: <b id="min_holder">$20</b></div>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label md-5" for="fund_method">Select currency:</label>
                                                <div class="row mt-3">
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio1" data-info="bitcoin|bc1q45p822chehjlnpu3sft9qary3dljv8660jtjqv|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=bc1q45p822chehjlnpu3sft9qary3dljv8660jtjqv&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio1">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">BITCOIN</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio2" data-info="bitcoin cash|qquweq57vrdza69s2hyyr0vcd4mhancvsvwl9fsd2e|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=qquweq57vrdza69s2hyyr0vcd4mhancvsvwl9fsd2e&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio2">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">BITCOIN CASH</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio3" data-info="ethereum|0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio3">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">ETHEREUM</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio4" data-info="litecoin|LfQJD3fKDGZz41zW1yfQXahxKxjQBVJizw|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=LfQJD3fKDGZz41zW1yfQXahxKxjQBVJizw&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio4">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">LITECOIN</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio5" data-info="usdt trc20|TC6MotVARLm8Da84Y7U94cF8wxxbyqJBoU|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=TC6MotVARLm8Da84Y7U94cF8wxxbyqJBoU&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio5">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">USDT TRC20</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio6" data-info="usdt erc20|0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio6">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">USDT ERC20</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                    <div class="col-md mb-2">
                                                        <div class="form-check custom-option custom-option-basic ">
                                                            <label class="form-check-label custom-option-content walletRadio" for="walletRadio7" data-info="usdc eth|0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9|https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=0x3a561B79c860B14F8649EAEAa9C710eEE92CecD9&amp;choe=UTF-8">
                                                                <input name="walletRadio" class="form-check-input  d-none" type="radio" value="" id="walletRadio7">
                                                                <span class="custom-option-header">
                                                                    <span class="h6 mb-0">USDC ETH</span>
                                                                </span>
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>

                                                <input type="hidden" name="fund_method" id="fund_method">
                                                <input type="hidden" name="min_dep" id="min_dep" value="20">
                                            </div>

                                            <div class="mb-3">
                                                <div id="dep_status" style="width: 100%;"></div>
                                            </div>
                                            <button type="submit" class="btn btn-primary btn-lg waves-effect waves-light step_1_btn mt-5" id="funds_btn">Proceed</button>
                                        </form>
                                        <div class=" p-2 rounded-md d-none" id="preview3">

                                            <div class="flex items-center">
                                                <i data-lucide="clipboard" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Invoice:
                                                <a href="javascript:void(0)" class="underline decoration-dotted ml-1" id="dep_invoice">
                                                </a>
                                            </div>

                                            <div class="flex items-center mt-3">
                                                <i data-lucide="clock" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Status:
                                                <div class="status_display">
                                                    <span class="bg-success/20 text-warning rounded px-2 ml-1">Pending</span>
                                                    <div class="spinner-border text-warning spinner-border-sm" role="status">
                                                        <span class="visually-hidden">Loading...</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center mt-3">
                                                <i data-lucide="clipboard" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Payment Type: &nbsp;&nbsp;
                                                <span style="text-transform: capitalize;">
                                                    <b class="fund_method"></b>
                                                </span>
                                            </div>
                                            <div class="flex items-center mt-3">
                                                <i data-lucide="credit-card" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Asset: &nbsp;&nbsp;
                                                <span class="">
                                                    <b class="coin_amount2"></b>
                                                </span>
                                                <span id="coin_amount2_btn" class="cur_p ml-2" onclick="copy_text('coin_amount2')">
                                                    <i class="ti ti-copy  ti-sm"></i>
                                                </span>
                                                <input type="text" id="coin_amount2" class="form-control d-none" value="" readonly="">
                                            </div>
                                            <div class="flex items-center mt-3">
                                                <i data-lucide="credit-card" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Fiat: &nbsp;&nbsp;
                                                <span class="">
                                                    <b class="coin_amount"></b>
                                                </span>
                                                <span id="coin_amount_btn" class="cur_p ml-2" onclick="copy_text('coin_amount')">
                                                    <i class="ti ti-copy  ti-sm"></i>
                                                </span>
                                                <input type="text" id="coin_amount" class="form-control d-none" value="" readonly="">
                                            </div>
                                            <div class="flex items-center mt-3">
                                                <i data-lucide="clipboard" class="w-4 h-4 text-slate-500  mr-2 "></i>
                                                Wallet Address:&nbsp;&nbsp;
                                                <span class="">
                                                    <b class="coin_address"></b>
                                                </span>
                                                <span id="coin_address_btn" class="cur_p ml-2" onclick="copy_text('coin_address')">
                                                    <i class="ti ti-copy ti-sm"></i>
                                                </span>
                                                <input type="text" id="coin_address" class="form-control d-none" value="" readonly="">
                                            </div>
                                            <div class="flex items-center mt-3">
                                                <div class="" id="dep_qr_code"></div>
                                            </div>
                                            <div class="mt-1">
                                                <p class="text-info mb-1 mt-3">
                                                    Copy wallet or scan bar code to make deposit.
                                                </p>
                                                <p class="text-danger mb-3">
                                                    Make sure you only send <b class="coin_name"></b> to the address above. Any other asset sent might be lost forever.
                                                </p>
                                                <p class="text-danger status_display2">
                                                    Note: You can close this page after making payment...
                                                </p>
                                                <p class="text-danger status_display2">
                                                    Note: It takes 15 - 40 minutes for transactions to be confirmed on the blockchain network.
                                                </p>
                                            </div>
                                            <div class="d-none">
                                                <a href="index" class="btn btn-primary w-30 ml-2">Payment Made</a>
                                            </div>
                                        </div>
                                        <div class=" p-2 rounded-md d-none" id="preview4">
                                            <div class="flex text-center">
                                                Transaction Completed
                                            </div>
                                            <div class="flex items-center mt-5">
                                                <i data-lucide="clock" class="w-4 h-4 text-slate-500 mr-2"></i>
                                                Status: <span class="bg-success/20 text-success rounded px-2 ml-1">Payment approved</span>
                                                <div class="spinner-border text-success spinner-border-sm" role="status">
                                                    <span class="visually-hidden">Loading...</span>
                                                </div>
                                            </div>
                                            <div class="mt-1">
                                                <p class="text-info mb-1 mt-4">
                                                    Your payment has been verified and confirmed...
                                                </p>
                                                <a href="index" class="btn btn-primary w-30 ml-2 mt-4">Go to Dashboard</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <style>
                                    .custom-option-basic .custom-option-content {
                                        /* padding: 1.07em !important */
                                    }
                                </style>
                            </div>
                            <div class="col-xl">

                            </div>
                        </div>


                        <!-- BEGIN: Dark Mode Switcher-->
                    </div>
                    <!-- / Content -->

                    <!-- Footer -->
                    <footer class="content-footer footer bg-footer-theme">
                        <div class="container-xxl">
                            <div class="footer-container d-flex align-items-center justify-content-between py-2 flex-md-row flex-column">
                                <div>
                                    ©
                                    <script>
                                        document.write(new Date().getFullYear());
                                    </script>, made by <a href="" target="_blank" class="footer-link text-primary fw-medium">ClockEarnings Limited</a>
                                </div>
                            </div>
                        </div>
                    </footer>
                    <!-- / Footer -->

                    <div class="content-backdrop fade"></div>
                </div>
                <!-- Content wrapper -->
            </div>
            <!-- / Layout page -->
        </div>

        <!-- Overlay -->
        <div class="layout-overlay layout-menu-toggle"></div>

        <!-- Drag Target Area To SlideIn Menu On Small Screens -->
        <div class="drag-target"></div>
    </div>
    <!-- / Layout wrapper -->

    <div class="buy-now">
        <div id="msg_div"></div>
    </div>

    <!-- Core JS -->
    <!-- build:js assets/vendor/js/core.js -->
    <?php require_once './partials/scripts.php'; ?>
    <script>
        $(".walletRadio").click(function(){    
    var data = $(this).attr('data-info');	
    if(data.length > 0 ){
        var dataSetValues = data.split("|");
        var currency = dataSetValues[0];
        var address = dataSetValues[1];
        var bar_code = dataSetValues[2];
        var img1 = '<img src="'+bar_code+'" alt="'+address+'" class="" />';
        $("#fund_method").val(currency);
        $(".fund_method").html(currency);
        $(".coin_name").html(currency);
        $(".coin_address").html(address);
        $("#coin_address").val(address);
        $("#dep_qr_code").html(img1);
    }
});
/////////////////////////
$(".step_1_btn").click(function(){    
    var status = '#dep_status';
    var min = parseFloat($("#min_dep").val());
    var val = parseFloat($("#amount").val());
    if($("#amount").val().length == 0){
        Msg("<i class='fa fa-warning'></i>&nbsp; Enter amount...","alert-danger",0,status,12000);
    } else if($("#fund_method").val().length == 0 ){
        Msg("<i class='fa fa-warning'></i>&nbsp; Currency is required...","alert-danger",0,status,12000);
    } else if(val < min){
        Msg("<i class='fa fa-warning'></i>&nbsp; Minimum deposit is $"+min,"alert-danger",0,status,12000);
    } else{
        $(status).html('');
        deposit_funds();
    }
});
/////////////////////////
////////////////////////
function deposit_funds(){
    var method = $("#fund_method").val();
    var status = '#dep_status';
    var min = parseFloat($("#min_dep").val());
	var data = $("#deposite_form").serialize();
    var btn = $('#funds_btn');
    var btn_content = btn.html();
    btn.prop('disabled',true); 
	$.ajax({
		type:'POST',
		url:'../controller/post.php?make_deposit',
		data:data,
		beforeSend: function(){	
            btn.html(spinner);
		},
		success: function(data){
            if(data == 1){
                Msg("<strong><i class='fa fa-check-square'></i>&nbsp;</strong>  Request sent successfuly. An email has been sent to you.","alert-success",0,status,10000);
                setTimeout(function() {
                        $("#deposite_form").trigger('reset');
                },12000);
            } else if (data == 2){
                    Msg("<strong><i class='fa fa-warning'></i>&nbsp;</strong> All fields required","alert-danger",0,status,12000);
            }else if(data == 3){
                Msg("<strong><i class='fa fa-times-circle'></i>&nbsp;</strong> account does not exist","alert-danger",0,status,12000);				
            }else if(data == 33){
                Msg("<strong><i class='fa fa-times-circle'></i></strong>&nbsp; Minimum deposit $"+min,"alert-danger",0,status,12000);				
            }else if(data == 21){
                    Msg("<strong><i class='fa fa-times-circle'></i></strong>&nbsp; Multiple pending transactions on your account, complete them or conatct support.","alert-danger",0,status,12000);				
            }else if(data == 4){
                    Msg("<strong><i class='fa fa-times-circle'></i>&nbsp;</strong> Error!!! Your first deposit can not be below 50 USD.","alert-danger",0,status,12000);				

            }else if(data == 5){
                    Msg("<strong><i class='fa fa-times-circle'></i>&nbsp;</strong> Error! Bank Wire is allowed for only deposits from $50,000 above","alert-danger",0,status,12000);				

            }else{
                var check = data.split("|||")[0];
                if(check == 0){
                    data = data.split("|||")[1];
                    var qr = data.split("||")[0];
                    var addr = data.split("||")[1];
                    var invoice = data.split("||")[2];
                    var amount = data.split("||")[3];
                    var symbol = data.split("||")[4];
                    var payment_Id = data.split("||")[5];
                    var asset_amount = data.split("||")[6];
                    $("#dep_invoice").html('#'+invoice);
                    $(".coin_amount2").html(asset_amount + " "+method);
                    $("#coin_amount2").val(asset_amount);
                    $(".coin_amount").html("$"+amount);
                    $("#coin_amount").val(amount);
                    $(".coin_address").html(addr);
                    $("#coin_address").val(addr);
                    $("#dep_qr_code").html(qr);
                    $("#deposite_form").trigger('reset');                            
                    ///////////////////////
                    $("#deposite_form").addClass("d-none");
                    $("#preview3").removeClass("d-none");
                    startTimer(1,payment_Id);
                }else{
                    Msg("<strong><i class='fa fa-times-circle'></i>&nbsp; </strong> "+data,"alert-danger",0,status,12000);				
                }
            } 
            btn.html(btn_content);
            btn.prop('disabled',false);
		}
	});
}
function copy_text(x) {
    //    $("#"+x+"_btn").html('<i class="fas fa-spinner fa-spin"></i>');
    /* Get the text field */
    var copyText = document.getElementById(x);
    var btn = $("#"+x+"_btn");
    var btn_content = btn.html();
    btn.html('Copied');
    setTimeout(function () {
        btn.html(btn_content);
    }, 2000);
    /* Select the text field */
    copyText.select();
    copyText.setSelectionRange(0, 99999); /* For mobile devices */

    /* Copy the text inside the text field */
    navigator.clipboard.writeText(copyText.value);
    
    
    /* Alert the copied text */
    //    $("#"+x+"_btn").html('<i class="fa fa-copy"></i>');
}
// Update the count down every 10 second
$(".pay_btn").click(function(){
    var value = $(this).data("value");
    if(value.length > 0 ){
        var dataSetValues = value.split("|");
        var wallet = dataSetValues[0];
        var amount = dataSetValues[1];
        var method = dataSetValues[2];
        var qr = '<img src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl='+wallet+'&amp;choe=UTF-8" title="'+wallet+'">';
        $(".dp_type").html(method);
        $(".dp_amount").html('$'+amount.toLocaleString('en-US'));
        $("#dp_amount").val(amount);
        $(".dp_address").html(wallet);
        $("#dp_address").val(wallet);
        $("#dep_qr").html(qr);
        /////////////
        // $('#myModal').modal('show');
    }
});
    </script>

</body>

</html>