@extends('user.user_panal.layouts.main')
@section('content')
<!--**********************************
            Content body start
        ***********************************-->
		
		
		
<style>
	#tradingview_e8053 {
		display: none !important;
	}

	table.dataTable thead th,
	table.dataTable thead td {
		border-bottom: 0.125rem solid #eeee;
		border-top: 0;
	}
</style>

<div class="content-body" style="outline: none">
	<!-- row -->
	<div class="row">
		<div class="col-lg-8 col-sm-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">Share Referral URL</h4>
				</div>
				<div class="card-body">
					<div class="mb-3">
						<div class="row">
							<div class="col-8 mb-3">
								<input disabled type="text" id="myInput" class="form-control" placeholder="http://atlantisive.com/shekhobaba" value="{!! $user->ref_id ?? '' !!}">
							</div>
							<div class="col-4">
								<button onclick="myFunction()"  class="btn btn-primary">Copy</button>
							</div>
							<script>
								function myFunction() {
									var copyText = document.getElementById("myInput");
									copyText.select();
									copyText.setSelectionRange(0, 99999); 
									navigator.clipboard.writeText(copyText.value);
									toastr.info("Copied the text: " + copyText.value);
								}
							</script>
						</div>
					</div>
				</div>
				<div class="card-body">
					<button type="button" onclick="shareFacebook()" class="btn btn-facebook mb-3">Facebook <span class="btn-icon-end"><i class="fab fa-facebook-f"></i></span>
					</button>
					<button type="button" onclick="shareTwitter()" class="btn btn-twitter mb-3">Twitter <span class="btn-icon-end"><i class="fab fa-twitter"></i></span>
					</button>
					<button type="button" onclick="shareInstagram()" class="btn btn-instagram mb-3">Instagram <span class="btn-icon-end"><i class="fab fa-instagram"></i></span>
					</button>
					<button type="button" onclick="shareWhatsApp()" class="btn btn-whatsapp mb-3">Whatsapp <span class="btn-icon-end"><i class="fab fa-whatsapp"></i></span>
					</button>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-8 col-sm-12">
		<div class="card">
			<div class="card-header">
				<h4 class="card-title">Level 1 Referrals</h4>
			</div>
			<div class="card-body">
				<div class="table-responsive">
					<table id="example" class="display">
						<thead>
							<tr>
								<th>Name</th>
								<th>Email</th>
								<th>Referral Id</th>
								<th>Options</th>
							</tr>
						</thead>
						<tbody>
							@foreach($user_referral as $user_referrals)
							<tr>
								<td>{{$user_referrals->name}}</td>
								<td>{{$user_referrals->email}}</td>
								<td>{{$user_referrals->ref_id}}</td>
								<td class="text">
									<div class="dropdown custom-dropdown mb-0">
										<div class="btn sharp btn-primary tp-btn" data-bs-toggle="dropdown">
											<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1">
												<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
													<rect x="0" y="0" width="24" height="24"></rect>
													<circle fill="#000000" cx="12" cy="5" r="2"></circle>
													<circle fill="#000000" cx="12" cy="12" r="2"></circle>
													<circle fill="#000000" cx="12" cy="19" r="2"></circle>
												</g>
											</svg>
										</div>
										<div class="dropdown-menu dropdown-menu-end">
											<a class="dropdown-item" href="{{ route('userPanal_referral2', $user_referrals->id) }}">View Level 2 Referrals</a>
										</div>
									</div>
								</td>
							</tr>
							@endforeach
						</tbody>
						<tfoot>
							<tr>
								<th>Name</th>
								<th>Email</th>
								<th>Total Referrals</th>
								<th>Options</th>
							</tr>
						</tfoot>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
</div>

<div class="col-xl-12 d-none">
	<div class="card">
		<div class="card-body">
			<div id="tradingview_e8053" class="tranding-chart"></div>
		</div>
	</div>
</div>
@endsection