@php
    $userDetails = auth()->user();
    $routeLink = $blade_data['routesLink'] ?? 'admin.memberships';
@endphp
@extends('user.layouts.app')
@section('page-title', $blade_data['title'])
@section('content')
    <div class="row mb-3">
        <div class="col-12">
            <div class="page-title-box ">{{-- d-flex align-items-center justify-content-between --}}
                <h4 class="mb-0 font-size-18">{{ $blade_data['title'] }}</h4>
                <p style="font-size: 1rem" class="mb-0 mt-1">Earn ${{get_setting('referral_commission')}} for every referral, refer by sharing your link every where online.</p>
            </div>
        </div>
    </div>
    <div class=" ">
        <div class="input-group mb-3">
            <input type="text" value="{{ route('refferals.view', ['id' => $userDetails->rand_id]) }}" class="form-control"
                id="i-referral-link" readonly>
            <button class="btn btn-outline-secondary" type="button" onclick="copyText()">Copy Link</button>
        </div>
        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-2">
            <div class="col">
                <a href="{{ route('user.referrals.earns') }}">
                    <div class="card card-shadow radius-10 border-start border-0 border-4 border-info">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Referred Users</p>
                                    <h4 class="my-1 text-info">{{ $total_register }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-blues text-white ms-auto">
                                    <i class="fas fa-shopping-cart"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

            <div class="col">
                <a href="{{ route('user.referrals.earns') }}">
                    <div class="card card-shadow radius-10 border-start border-0 border-4 border-danger">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Referral Earning</p>
                                    <h4 class="my-1 text-danger">${{ $earn_amount }}</h4>
                                    {{-- <p class="mb-0 font-13">+5.4% from last week</p> --}}
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-burning text-white ms-auto">
                                    <i class="fa fa-wallet"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
@endsection
@section('javascript')
    <script>
        function copyText() {
            // Get the input field
            var inputField = document.getElementById("i-referral-link");

            // Copy the text inside the text field
            navigator.clipboard.writeText(inputField.value).then(function() {
                // Text copied successfully
                var outputText = document.getElementById("outputText");
                toastr.success("Link Copied", 'Success', {
                    timeOut: 5000
                });
            }, function(err) {
                // Error in copying text
            });
        }
    </script>
@endsection