@extends('user.user_panal.layouts.main')
@section('content')

<!--**********************************
            Content body start
        ***********************************-->
<style>
    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() {
									// Get the text field
									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 2 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>Total Referrals</th>
                                <th>Options</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($user_referral_l2 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_referral3', $user_referrals->id) }}">View Level 3 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 class="col-xl-12 d-none">
    <div class="card">
        <div class="card-body">
            <div id="tradingview_e8053" class="tranding-chart"></div>
        </div>
    </div>
</div>

<!--**********************************
            Content body end
        ***********************************-->


<!--**********************************
        Main wrapper end
    ***********************************-->

<!--**********************************
        Scripts
    ***********************************-->
<!--**********************************
        Copy Referral Link
    ***********************************-->
<script>
    function shareFacebook() {
        const url = 'https://www.example.com';
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`);
    }

    function shareWhatsApp() {
        const text = 'Check out this link: https://www.example.com';
        window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(text)}`);
    }

    function shareInstagram() {
        const url = 'https://www.example.com';
        window.open(`https://www.instagram.com/share?url=${url}`);
    }

    function shareTwitter() {
        const text = 'Check out this link: https://www.example.com';
        window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`);
    }

    function copyText() {
        const text = 'Text to be copied';
        navigator.clipboard.writeText(text).then(function() {
            alert('Text copied to clipboard');
        }, function(err) {
            console.error('Could not copy text: ', err);
        });
    }
</script>

@endsection