<?php $__env->startSection('content'); ?>
    <style>
        .pay_center_to h4 {
            font-size: 14px;
            width: 100%;
        }

        .pay_center_to ul {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .pay_center_to ul li {
            width: 31%;
            background: #090909;
            color: #fff;
            margin-top: 1rem;
            height: 2rem;
            font-size: 14px;
            line-height: 2rem;
            border-radius: 0.25rem;
            text-align: center;
        }

        .pay_center_to .inputs {
            width: 100%;
            height: 3rem;
            background: #090909;
            margin-top: 1rem;
        }

        .pay_center_to .inputs input {
            width: 100%;
            height: 3rem;
            background: transparent;
            border: none;
            padding-left: 1rem;
            box-sizing: border-box;
            font-size: 16px;
            color: #fff;
        }

        .pay_lis {
            width: 100%;
            height: 2rem;
            display: flex;
            justify-content: space-between;
            line-height: 2rem;
            padding: 0 0.75rem;
            box-sizing: border-box;
            background: #000;
            color: #fff;
            margin-top: 1rem;
            font-size: 13px;
            border-radius: 0.25rem;
        }

        .pay_lis img {
            height: 1rem;
            margin-top: 0.5rem;
            display: none;
        }

        .pay_lis.action {
            background: #6305b1;
            ;
            color: #fff;
        }

        .pay_lis.action img {
            display: block;
        }

        .pay_center_to button {
            width: 60%;
            height: 2.5rem;
            background: #6305b1;
            margin: 1.75rem auto 1rem;
            display: block;
            border: none;
            font-size: 16px;
            border-radius: 0.5rem;
            color: #fff;
        }

        .pay_center_tips {
            background: #232323;
            width: 100%;
            padding: 0.75rem;
            box-sizing: border-box;
            margin-top: 1rem;
            border-radius: 0.5rem;
        }

        .pay_center_tips h4 {
            font-size: 14px;
            width: 100%;
        }

        .pay_center_tips .text {
            width: 100%;
            line-height: 1.5rem;
            font-size: 13px;
            color: #999;
            margin-top: 1rem;
        }

        .pay_log_list {
            width: 92%;
            margin: 1rem 4%;
            background: #fff;
            border-radius: 0.5rem;
        }

        .pay_log_list li {
            padding: 1.25rem 1rem;
            box-sizing: border-box;
            border-bottom: 1px #f5f5f5 solid;
            position: relative;
        }

        .pay_log_list li:last-child {
            border: none;
        }

        .pay_log_list li h4 {
            width: 100%;

            font-size: 16px;
        }

        .pay_log_list li p {
            width: 100%;
            font-size: 12px;
            margin-top: 0.5rem;
            color: #999;
            overflow: hidden;
        }

        .pay_log_list li p.wws {
            color: red;
        }

        .pay_log_list li span {
            position: absolute;
            top: 1.25rem;
            right: 1rem;
            font-weight: bold;
            color: rgb(255, 170, 0);
        }
    </style>

    <section class="opay_wrap">
        <header class="header_top main_Wrap">
            <div class="inner">
                <h1>Welcome, <?php echo e(auth()->user()->mobile); ?></h1>
                <ul>
                    <li><a href="javascript:void(0)"><i class="fa fa-qrcode"></i></a></li>
                    <li><a href="javascript:void(0)"><i class="fa fa-user-circle-o"></i></a></li>
                    <li><a href="javascript:void(0)"><i class="fa fa-bell-o"></i></a></li>
                </ul>
            </div>
        </header>
        <div class="opay_body product_page">
            <div class="price_box invait_box_bg">
                <div class="content">
                    <h5 class="text-white f-35 mb-0">REFER & EARN</h5>
                    <h2 class="f-19 text-white text-center">INVITE NEW USER GET UPTO</h2>
                    <h1 class="total_price">₦300,000+</h1>
                    <h2 class="f-14 text-white txt_lit text-center">When they invest, Your friends can get ₦250 welcome
                        bouns</h2>
                </div>
            </div>
            <div class="btn_wrap">
                <button class="theme_btn bg_yellow_btn"
                    onclick="window.location.href = '<?php echo e(route('user.trx.log')); ?>'">Income History ></button>
                <button class="theme_btn_white" onclick="window.location.href = '<?php echo e(route('user.referrals')); ?>'">Referred
                    Users ></button>

            </div>
            <div class="bg-white price_box">
                <h2 class="f-19 txt-lit text-center"><b>My Invitation Code</b></h2>
                <h5 class="txt-Blue f-35"><?php echo e(auth()->user()->ref_code); ?></h5>
                <h2 class="f-16 text-center">
                    <span
                        style="word-wrap: break-word;"><?php echo e(route('home')); ?>?invite_code=<?php echo e(auth()->user()->ref_code); ?></span>
                    <a href="#"
                        onclick="copyToClipboard('<?php echo e(route('home')); ?>?invite_code=<?php echo e(auth()->user()->ref_code); ?>')">
                        <i class="fa fa-copy pl-3 d-inline">Copy</i>
                    </a>
                </h2>
            </div>

            <script>
                function copyToClipboard(text) {
                    const textArea = document.createElement("textarea");
                    textArea.value = text;
                    document.body.appendChild(textArea);
                    textArea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textArea);

                    // Add an alert to notify the user that the link has been copied
                    alert("Link copied to clipboard");

                    // You can customize the alert message or style it as needed.
                }
            </script>


            <div class="price_box bg-white more_details Share_box ">
                <h2 class="f-19 txt-lit text-center"><b>How to Earn</b></h2>
                <ul class="">
                    <li><a href="javascript:void(0)"><i class="fa fa-plus"></i><span>Share<br> link</span></a></li>
                    <li><a href="javascript:void(0)"><i class="fa fa-exchange"></i><span>Friends<br> register</span></a>
                    </li>
                    <li class="Withdrawal"><a href="javascript:void(0)"><i
                                class="fa fa-long-arrow-left"></i><span>Friends<br> Invest</span></a></li>
                </ul>
                <div class="Share_box_footer">
                    <p>The more friends you invite the more you earn</p>
                </div>
            </div>

            <div class="price_box bg-white more_details Share_box" style="padding-left:30px;">
                <h2 class="f-19 txt-lit text-center"><b>Reward Center</b></h2>
                <div class="pay_center" style="text-align: center;">

                    <div class="pay_center_to team_money" style="    margin-bottom: 0;text-align:center;">
                        <?php if($active_ref >= 5): ?>
                            <div class="lis">
                                <p>5 active downline for ₦1000</p>
                                <h4>5/5</h4>
                            </div>

                            <div class="lis">

                                <form action="<?php echo e(route('user.refreward')); ?>" method="post">
                                    <?php echo csrf_field(); ?>
                                    <button value="1000" name="amount"
                                        style="padding: 10px; border-radius:30px; background: linear-gradient(130deg, #6305b1, #6305b1);margin-top:-5px;">Claim</button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="lis">
                                <p>5 active downline for ₦1000</p>
                                <h4><?php echo e($active_ref); ?>/5</h4>
                            </div>

                            <div class="lis">

                                <button disabled
                                    style="padding: 10px; border-radius:30px; background: gray;margin-top:-5px;">Claim</button>
                            </div>
                        <?php endif; ?>


                    </div>

                    <div class="pay_center_to team_money" style="    margin-bottom: 0;">
                        <?php if($active_ref >= 10): ?>
                            <div class="lis">
                                <p>10 active downline for ₦2,000</p>
                                <h4>10/10</h4>
                            </div>

                            <div class="lis">

                                <form action="<?php echo e(route('user.refreward')); ?>" method="post">
                                    <?php echo csrf_field(); ?>
                                    <button value="2000" name="amount"
                                        style="padding: 10px; border-radius:30px; background: linear-gradient(130deg, #6305b1, #6305b1);margin-top:-5px;">Claim</button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="lis">
                                <p>10 active downline for ₦2,000</p>
                                <h4><?php echo e($active_ref); ?>/10</h4>
                            </div>

                            <div class="lis">

                                <button disabled
                                    style="padding: 10px; border-radius:30px; background: gray;margin-top:-5px;">Claim</button>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="pay_center_to team_money" style="    margin-bottom: 0;">
                        <?php if($active_ref >= 50): ?>
                            <div class="lis">
                                <p>50 active downline for ₦15,000</p>
                                <h4>50/50</h4>
                            </div>

                            <div class="lis">

                                <form action="<?php echo e(route('user.refreward')); ?>" method="post">
                                    <?php echo csrf_field(); ?>
                                    <button value="15000" name="amount"
                                        style="padding: 10px; border-radius:30px; background: linear-gradient(130deg, #213301, #76B900);margin-top:-5px;">Claim</button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="lis">
                                <p>50 active downline for ₦15,000</p>
                                <h4><?php echo e($active_ref); ?>/50</h4>
                            </div>

                            <div class="lis">

                                <button disabled
                                    style="padding: 10px; border-radius:30px; background: gray;margin-top:-5px;">Claim</button>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="pay_center_to team_money" style="    margin-bottom: 0;">
                        <?php if($active_ref >= 100): ?>
                            <div class="lis">
                                <p>100 active downline for ₦50,000</p>
                                <h4>100/100</h4>
                            </div>

                            <div class="lis">

                                <form action="<?php echo e(route('user.refreward')); ?>" method="post">
                                    <?php echo csrf_field(); ?>
                                    <button value="50000" name="amount"
                                        style="padding: 10px; border-radius:30px; background: linear-gradient(130deg, #213301, #76B900);margin-top:-5px;">Claim</button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="lis">
                                <p>100 active downline for ₦50,000</p>
                                <h4><?php echo e($active_ref); ?>/100</h4>
                            </div>

                            <div class="lis">

                                <button disabled
                                    style="padding: 10px; border-radius:30px; background: gray;margin-top:-5px;">Claim</button>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="pay_center_to team_money" style="    margin-bottom: 0;">
                        <?php if($active_ref >= 500): ?>
                            <div class="lis">
                                <p>500 active downline for ₦200,000</p>
                                <h4>500/500</h4>
                            </div>

                            <div class="lis">

                                <form action="<?php echo e(route('user.refreward')); ?>" method="post">
                                    <?php echo csrf_field(); ?>
                                    <button value="200000" name="amount"
                                        style="padding: 10px; border-radius:30px; background: linear-gradient(130deg, #213301, #76B900);margin-top:-5px;">Claim</button>
                                </form>
                            </div>
                        <?php else: ?>
                            <div class="lis">
                                <p>500 active downline for ₦200,000</p>
                                <h4><?php echo e($active_ref); ?>/500</h4>
                            </div>

                            <div class="lis">

                                <button disabled
                                    style="padding: 10px; border-radius:30px; background: gray;margin-top:-5px;">Claim</button>
                            </div>
                        <?php endif; ?>
                    </div>


                    <div class="pay_center_to reg_list user_box">

                    </div>
                    <div class="layui-flow-more"><a href="javascript:;"
                            style=" width: 100%;display: block; text-align: center;color: #999; line-height: 3rem;"></a>
                    </div>
                    <div class="load_gif" style="width:100%;text-align:center;display:none"><img
                            src="/static/home/img/loading.gif">
                    </div>
                    <div class="lno_data"
                        style="width:100%;text-align:center;font-size:14px;color:#999;display:none;line-height:35px">No
                        more data
                    </div>
                </div>
            </div>
        </div>


        <?php echo $__env->make('partials.user._bottom_menu', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

    </section>
<?php $__env->stopSection(); ?>


<?php $__env->startPush('script'); ?>
    <script type="text/javascript">
        var text = '<?php echo e(route('home')); ?>?invite_code=<?php echo e(auth()->user()->ref_code); ?>';
        $('.btncopy').click(function() {
            copy(text)
        });
    </script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.users', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /Applications/AMPPS/www/palmpay/core/resources/views/templates/basic/user/referral_link.blade.php ENDPATH**/ ?>