@extends('user.user_dashboard')
@section('home')






    <!-- ================================
        START BREADCRUMB AREA
    ================================= -->
    <section class="breadcrumb-area section-padding img-bg-2 ">
        <div class="overlay"></div>

        <div class="container">

            <div class="breadcrumb-content d-flex flex-wrap align-items-center justify-content-between">




                <div class="section-heading">
                    <h2 class="section__title text-white"> <a href="{{ route('dashboard') }}"> <i
                                class="la la-chevron-left icon text-white"> </i> </a> Referrals &nbsp; &nbsp; &nbsp; </h2>
                </div>

                <ul
                    class="generic-list-item generic-list-item-white generic-list-item-arrow d-flex flex-wrap align-items-center">
                    <li> <a href="{{ route('dashboard') }}"> Dashboard </a> </li>
                    <li> <a href="{{ route('dashboard.referral') }}"> Referrals </a> </li>
                </ul>


            </div><!-- end breadcrumb-content -->



        </div><!-- end container -->
    </section><!-- end breadcrumb-area -->
    <!-- ================================
       END BREADCRUMB AREA
    ================================= -->



    <!-- ================================
           START CONTACT AREA
    ================================= -->
    <section class="cart-area section--padding">

        <div class="container">


            <div class="row">


                <!--Section A-->
                <div class="col-lg-12">


                     <div class="card card-item">
                            <div class="card-body">

                                <h3 class="card-title fs-22 pb-3">
                                    E-library Digital Influencer Program
                                </h3>

                                

                                <div class="payment-option-wrap">

                                    <p class="mb-3">

                                        <span>Earn monthly income by sharing your E-library influencer link: </span>  <br>
                                         <span> When people subscribe to the LoveWorld Books E-Library through your link, you receive 30% monthly commission for as long as they stay active.  </span> 
                                    
                                    </p>


                                </div>

                            </div><!-- end card-body -->
                        </div><!-- end card -->






                    @php
                        $username = auth()->user()->username;
                    @endphp

                    @if (empty($username))
                        <div class="card card-item">
                            <div class="card-body">

                                <h3 class="card-title fs-22 pb-3">
                                    <i class="la la-sync mr-2"> </i> Generate Your Influencer Link
                                </h3>

                                <div class="divider"><span></span></div>

                                <div class="payment-option-wrap">

                                    <p class="mb-3">Click Button below to generate your referral link:</p>

                                    <a href="{{ route('dashboard.referral.generate') }}" class="btn btn-sm btn-danger">
                                        Generate </a>

                                </div>

                            </div><!-- end card-body -->
                        </div><!-- end card -->
                    @elseif(!empty($username))
                        <div class="card card-item">
                            <div class="card-body">


                                <h3 class="card-title fs-22 pb-3">
                                    <i class="la la-user-plus mr-2"></i> Influencer (Referral) Link
                                </h3>

                                <div class="divider mb-3"><span></span></div>


                                <div class="payment-option-wrap">
                                    @php
                                        $referralLink = url('/register?ref=' . auth()->user()->username);
                                    @endphp

                                    <p class="mb-3">Your referral link:</p>

                                    <div class="d-flex align-items-center flex-wrap gap-2 mb-3">

                                        <input id="referralLink" type="text" class="form-control mr-2"
                                            value="{{ $referralLink }}" readonly
                                            style="max-width: 100%; min-width: 250px;" />


                                        <button class="btn btn-sm btn-success mt-2 mr-2"
                                            onclick="copyReferralLink()">Copy</button>

                                        <!-- <button class="btn btn-sm btn-success mt-2" onclick="shareReferralLink()">Share</button> -->



                                    </div>

                                    <div id="copySuccess" class="text-success small d-none">Copied to clipboard!</div>

                                </div>


                            </div><!-- end card-body -->

                        </div><!-- end card -->
                    @endif




                </div><!-- end col-lg-10 -->





                <!--Section B--> <!-- Digital Influencer -->
                @if (empty($username))
                @elseif(!empty($username))
                    <div class="col-lg-12 mt-2">



                        @php
                            $influencer = auth()->user()->influencer_status;
                        @endphp


                        @if (empty($influencer))
                            <div class="card card-item">
                                <div class="card-body">

                                    <h3 class="card-title fs-22 pb-3">
                                        <i class="la la-bullhorn mr-2"> </i> Become A Digital Influencer
                                    </h3>

                                    <div class="divider"><span></span></div>

                                    <div class="payment-option-wrap">

                                        <p class="mb-3"> Enlist users to sign-up with your referral link and subscribe,
                                            and receive commissions in Espees on subscriptions </p>


                                        <a href="{{ route('referral.influencer.onboarding') }}"
                                            class="btn btn-sm btn-danger"> Get Started </a>

                                    </div>

                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        @elseif(!empty($influencer))
                            <div class="card card-item">
                                <div class="card-body">

                                    <h3 class="card-title fs-22 pb-3">
                                        <i class="la la-bullhorn mr-2"> </i> You are onboarded as a digital Influencer
                                    </h3>

                                    <div class="divider"><span></span></div>

                                    <div class="payment-option-wrap">

                                        <p class="mb-3"> Click on buttons below to view users signed up with your referral
                                            links, users subscription & commission details and Resource Hub  </p>

                                        {{-- <a href="{{ route('referral.influencer.dashboard') }}" class="btn btn-sm btn-danger"> View Influencer Dashboard </a>   <a href="{{ route('referral.influencer.dashboard') }}" class="btn btn-sm btn-primary"> Influencer Resource Hub </a> --}}


                                        <div class="d-flex gap-2" style="max-width: 600px;">
                                            <a href="{{ route('referral.influencer.dashboard') }}"
                                                class="btn btn-sm btn-danger flex-fill">View Influencer Dashboard</a>
                                            <a href="{{ route('influencer.resource.hub') }}"
                                                class="btn btn-sm btn-primary flex-fill">Influencer Resource Hub</a>
                                        </div>


                                    </div>

                                </div><!-- end card-body -->
                            </div><!-- end card -->
                        @endif



                    </div><!-- end col-lg-10 -->
                @endif






            </div><!-- end row -->





            <div class="section-block"></div>


        </div><!-- end container -->
    </section>
    <!-- ================================
           END CONTACT AREA
    ================================= -->

    {{--  
<script>
    document.addEventListener('contextmenu', function(event) {
        event.preventDefault();
      
    });
</script>
--}}



    <script>
        function copyReferralLink() {
            const linkInput = document.getElementById('referralLink');
            linkInput.select();
            linkInput.setSelectionRange(0, 99999); // For mobile devices
            document.execCommand('copy');

            // Show success message
            const successMsg = document.getElementById('copySuccess');
            successMsg.classList.remove('d-none');
            setTimeout(() => successMsg.classList.add('d-none'), 2000);
        }

        function shareReferralLink() {
            const link = document.getElementById('referralLink').value;

            if (navigator.share) {
                navigator.share({
                    title: 'Join me on the LoveWorld Books E-library!',
                    text: 'Use my referral link to sign up and subscribe:',
                    url: link
                }).catch((err) => {
                    console.error('Error sharing:', err);
                });
            } else {
                alert('Your browser does not support sharing. Please copy the link instead.');
            }
        }
    </script>




















@endsection