@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>Referral Id</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($user_referral_l3 as $user_referrals)
                            <tr>
                                <td>{!! $user_referrals->name ?? '' !!}</td>
                                <td>{!! $user_referrals->email ?? '' !!}</td>
                                <td>{!! $user_referrals->ref_id ?? '' !!}</td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Total Referrals</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