@extends('layouts.dashboardLayout')

@section('title', 'Referrals')

@section('logo', asset('images/' . $chain . '-logo.png'))
@section('fan', asset('images/' . $chain . '-fan.png'))

@section('content')

<!-- Header -->
<div class="header bg-gradient-primary pb-8"></div>


<div class="row mt-5">
    <div class="col-xl-12 mb-5 mb-xl-0">
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="mb-0">Referrals Tools</h3>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <p>You can earn coins by sharing referral link to your friends. For each referral deposit, you will
                    receive
                    10% of the deposit amount.</p>
                <div class="form-group focused">
                    <label for="link">Referral Link</label>
                    <div class="input-group input-group-merge">
                        <div class="input-group-prepend" title="Copy to Clipboard" onclick="copy_ref_link();">
                            <span class="input-group-text"><i class="fa fa-copy"></i>copy</span>
                        </div>
                        <input type="text" name="link" id="link" class="form-control text-center" readonly
                            value="{{ env('APP_URL') . '/r/' . $name }}">

                        <!-- <div class="input-group-append">
                                <span class="input-group-text"><i class="fa fa-retweet"></i>
                                    <span class="leading">
                                        0 hits
                                    </span>
                            </div> -->
                    </div>
                    <small class="form-text text-success" style="display: none" id="reflink_copied">Copied to
                        Clipboard</small>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row mt-3">
    <div class="col-xl-12 mb-5 mb-xl-0">
        <div class="card shadow">
            <div class="card-header border-0">
                <div class="row align-items-center">
                    <div class="col">
                        <h3 class="mb-0">Referrals List</h3>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped text-center">
                        <thead class="thead-light">
                            <tr>
                                <th scope="col">Wallet</th>
                                <th scope="col">Status</th>
                                <th scope="col">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($refCount > 0)
                            @foreach($referrals as $referral)
                            <tr>
                                <td class="text-center" colspan="1">{{ $referral->wallet_address }}</td>
                                <td class="text-center" colspan="1">Registered</td>
                                <td class="text-center" colspan="1">{{ $referral->created_at }}</td>
                            </tr>
                            @endforeach
                            @else
                            <tr>
                                <td class="text-center" colspan="3">No referrals found!</td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function copy_ref_link() {
        document.getElementById('link').select();
        document.execCommand('copy');
        document.getElementById('reflink_copied').style.display = 'block';
        const copied = $('#reflink_copied');
        setTimeout(function() {
            copied.fadeOut(1500);
        }, 3000);
    }
</script>
@endsection