@extends($activeTemplate.'layouts.master')
@section('content')
  <div class="page-wrapper">
   

    <style>
    .text-col{
        color:#00525a !important;
    }
   
</style>

  <div id="invite" class="pt-5 mbjk">
       <div class="refer-image">
        <img src="https://static.vecteezy.com/system/resources/previews/001/904/871/original/woman-cartoon-with-laptop-on-chair-working-design-free-vector.jpg" alt="">
    </div>
   <div class="container">
    <div class="mt-4 mb-2 ">
        <div class="fw-600 fs-201 text-center transform text-col" >Invitaion Code</div>
        <input type="text" name="text" class="border-0 py-0 text-center w-100 fs-200 fw-500 "
        id="" value="{{ auth()->user()->username }}" readonly>
    </div>
    <div class="text-center text-black fw-600 fs-201 mt-4">Invite Your Friend </div>
    <div class="text-center">For Every Friend Who Invest and Earn Profit, You get 3 Levels Commission </div>
 
    
    
    <div class="fw-700 fs-202 text-col mt-4 px-2 mb-2">Copy Link</div>
    <div class="ref-borde px-2 ">
        <div class="input-group">
            <input type="text" name="text" class="ref-input form-control"
                id="referralURL" value="{{ route('home') }}?h5/index/reg_invitation_code={{ auth()->user()->username }}" readonly>
            <div class="input-group-append">
                <span class="input-group-text copytext btn-apna copyBoard card-bg text-white"
                    id="myTooltip"      onclick="myFunction()" onmouseout="outFunc()"    > <i class="las la-copy"        style="color:#00525a !important"></i> </span>
            </div>
        </div>
    </div>
    <p class="text-success text-center" id="copied"></p>
    
   </div>
  </div>
  
    
         
	<style type="text/css">
			.qrcode-img {
				/*   background: #283C48; */
				padding: 50px;
				border-radius: 10px;
				width: 250px;
				height: 250px;
				display: block;
				margin: 0 auto;
			}

			.share-qrcode p {
				font-size: .3rem;
				color: #fff;
				text-align: center;
				padding: 1rem 2rem 0 2rem;
			}

			.copy-code {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-radius: 10px;
				width: 70%;
				margin: auto;
				/* 		padding-bottom: 30px; */

			}

			.copy-code a {
				display: inline-block;
				background: #1984FF;
				color: #1984FF;
				font-size: 16px;
				width: 1.7rem;
				height: .40rem;
				line-height: .4rem;
				border-radius: .4rem;
				text-align: center;
				letter-spacing: .01rem;
			}


			.btn {
				text-transform: uppercase;
				background: #0160bf;
				color: white;
				padding: 10px;
				border-radius: 20px;
				cursor: pointer;
				margin: 50px 15%;
				width: 70%;
				text-align: center;
				border: none;

			}

			.btn:hover {
				background: #000000;
				color: #fff;
			}

			input,
			textarea {
				padding: 10px;
				border: 1px solid #000000;
				width: 220px
			}

			textarea {
				height: 80px
			}

			#foo {
				padding: 10px 20px;
				border-radius: 8px;
				font-size: 40px;
				color: #fff;
				font-weight: bold;
			}

			.appContent {
				border-radius: 6px;
			}

			.share-qrcode {
				border-top: 2px dashed #ccc;
			}

			.qrcode-img {
				align-items: center;
				display: flex;
			}

			.share-qrcode p {
				font-size: .3rem;
				color: #fff;
				text-align: center;
				padding: 0.5rem 0rem 0.5rem;
			}
			.cst-btn{
   background-image: linear-gradient(to right, #000000 0%, #000000  51%, #000000  100%);
    color: #fff;
    border: none;
    border-radius: 10px;
}
.cst-btn:hover {
   background-image: linear-gradient(to right, #000000 0%, #000000  51%, #000000  100%);
    color: #fff;
    border: none;
    border-radius: 10px;
}

		</style>
	<style>
	.popup {
    position: fixed;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    z-index: 999;
    animation: fadeInOut 2s;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0;
    }
    10%, 90% {
        opacity: 1;
    }
}
  *{
            	font-family: 'Prompt',sans-serif;
            
            }
	</style>
	</head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt&display=swap" rel="stylesheet">
<body style="background: linear-gradient(90deg, #f3f3f3 0%, #d9d9d9 100%);">


	<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
	<div style="display:none;">
<input type="text" value="{{ route('home') }}?h5/index/reg_invitation_code={{ auth()->user()->username }}" id="myInput">
</div>



	
	
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied "  ;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy";
}
</script>



	



@endsection


@push('script')
    <script>
        (function($){
            "use strict";
            $('#copyBoard').click(function(){
                var copyText = document.getElementsByClassName("copyURL");
                copyText = copyText[0];
                copyText.select();
                copyText.setSelectionRange(0, 99999);
                /*For mobile devices*/
                document.execCommand("copy");
                $('.copyText').text('Copied');
                setTimeout(() => {
                    $('.copyText').text('Copy');
                }, 2000);
            });
        })(jQuery);
    </script>
@endpush
