@extends('layouts.landing')

@section('title', 'Referrals')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
            @include('elements.settings-menu')
        </div>
        <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
                <div class="card-body p-4">
                    @if (Auth::user()->id == $tenant->id)
                        <h5>Users settings</h5>
                    @else
                        <h5>My Referrals</h5>
                    @endif
                    <div class="row">
                        <div class="col-12">
                            <div class="text-center">
                                <p class="pt-6 font-lg lh-2">Invite Your Friends <br> & Get Free points</p>
                                <span class="pt-4 text-gray-500">Get 10 points for every referred that subscribes</span><br>
                                <img src="{{asset('assets/images/rafiki.png')}}" class="w80 mt-6" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <div class="form-group">
                                    <label class="form-label mb-1" id="hide-label">
                                        Your referral link, copy and share
                                    </label>
                                    <span class="text-color" id="show-status" style="display: none;">Link copied!</span>
                                    <div class="d-flex">
                                        @if($user->parent_id == '')
                                            <input type="text" id="paste-box" class="form-control" value="{{url('/register?userId='.$user->id)}}" style="height: 52px">
                                        @else
                                            <input type="text" id="paste-box" class="form-control" value="{{url('/register?referralCode='.$user->referral_code)}}" style="height: 52px">
                                        @endif
                                        <a class="custom-btn cursor-pointer ml-3 rounded-2" onclick="Copy()" id="hide-copy">Copy</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row border-bottom-xs ">
                        <div class="col-12">
                            <div class="form-group mt-4">
                                <label class="form-label mb-1">
                                    Share to:
                                </label>
                                <div class="row p-4 text-center">
                                    <div class="col-3">
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <i class="mdi mdi-facebook font-50 text-color"></i>
                                        </a><br>
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <span class="text-gray-500">Facebook</span>
                                        </a>
                                    </div>
                                    <div class="col-3">
                                        <a href="http://twitter.com/share?text=Sign up with my referral link&url={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <i class="mdi mdi-twitter font-50 text-color"></i>
                                        </a><br>
                                        <a href="http://twitter.com/share?text=Sign up with my referral link&url={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <span class="text-gray-500">Twitter</span>
                                        </a>
                                    </div>
                                    <div class="col-3">
                                        <a href="https://api.whatsapp.com/send?text={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <i class="mdi mdi-whatsapp font-50 text-color"></i>
                                        </a><br>
                                        <a href="https://api.whatsapp.com/send?text={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <span class="text-gray-500">Whatsapp</span>
                                        </a>
                                    </div>
                                    <div class="col-3">
                                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <i class="mdi mdi-linkedin font-50 text-color"></i>
                                        </a><br>
                                        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{url('/register?referralCode='.$user->referral_code)}}" target="_blank">
                                            <span class="text-gray-500">Linkedin</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-4">
                        @forelse ($referrers as $referrer)
                            <div class="col-12 col-xl-4 col-xxl-4 col-lg-4">
                                <div class="text-center follow-card custom-shadow p-4">
                                    @php
                                        $user = App\Models\User::where('id', $referrer->referee)->first();
                                    @endphp
                                    <div class="rounded-circle pt-5">
                                        <img src="{{$user->avatar}}" class="rounded-circle w60 h60" alt="">
                                    </div>
                                    <h6 class="mt-2 mb-2">{{$user->first_name}} {{$user->last_name}}</h6>
                                    <p class="mt-4">
                                        <a href="" class="btn alert-primary br-50 pl-3 pr-3"><i class="mdi mdi-account-check-outline"></i> Following</a>
                                    </p>
                                </div>
                            </div>
                        @empty
                            <div class="row mt-4">
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a  class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-account-group font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">You have no affiliates</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        function Copy()
        {
            var Url = document.getElementById("paste-box");
            var parentId = '{{$user->parent_id}}'
            if(parentId == '') {
                Url.value = '{{url('/register?userId='.$user->id)}}';
            } else {
                Url.value = '{{url('/referralCode='.$user->referral_code)}}';
            }
            Url.focus();
            Url.select();
            document.execCommand("Copy");

            document.getElementById('hide-label').style.display = 'none';
            document.getElementById('show-status').style.display = 'inline-block';
        }
    </script>
@endsection