@extends('new_layouts.app')
@section('content')
<style>
    header .osahan-header{
        display:none!important;
    }
</style>
<div class="notification d-flex flex-column vh-100">
<div class="d-flex  main-head align-items-center justify-content-between mb-auto p-3  shadow-lg osahan-header">
            <a href="javascript: history.go(-1)" class="text-white icon back-arrow">
            <img width="12" height="12" src="https://img.icons8.com/ios-filled/50/FFFFFF/back.png" alt="back"></a>
            <h6 class="mb-0 w-100 text-center fw-bold text-white">Invite & Earn</h6>
          
         </div>
    <div class="vh-100 my-auto overflow-auto body-fix-osahan-footer ">
        <div class="container">
            <!-- <h6 class=" fw-bold text-black pb-2  mb-0">Notification</h6> -->
            <!--<h6 class=" fw-bold text-white p-3 mb-0 text-center">Invite & Earn</h6>-->

            @php
                $refer = App\Models\Transcation::where('user_id', Auth::user()->id)
                    ->where('payment_type', 'refral_bouns')
                    ->sum('amount');
                $count = App\Models\Transcation::where('user_id', Auth::user()->id)
                    ->where('payment_type', 'refral_bouns')
                    ->count();
            @endphp
            <div class="bg-grey rounded-3 p-3 text-center">


                <div class=" " style="    font-size: 22px;     color: #afafaf;" for="lname">Total Commission <br>Earned
                </div>
                <p class="m-0 p-0 refer-amnt" style="    font-size: 40px;    color: #afafaf;"><img width="20"
                        height="20" style="margin:0 2px 0 0"
                        src="https://img.icons8.com/wired/64/FAB005/rating-circled.png"
                        alt="rating-circled" />{{ $refer }}</p>

            </div>
            <div class="bg-grey rounded-2  mt-3 d-flex justify-content-between align-items-center p-2  ">
                <p class="m-0 p-0 text-center f-15">
                    Total people added
                </p>
                <p class="m-0 p-0 text-center f-15">{{ $count }}</p>
            </div>

            <p class="mt-3 p-0 text-center f-15">
                Your Refferal Code
            </p>

            <div class="copy-text text-center mb-3">
                <input type="text" class="text copy-code" id="linkInput"
                    value="{{ Auth::user()->referral_code_generate }}" />
                <button class="copy-icon "onclick="copyLink()"><i class="fa fa-clone"></i></button>
            </div>
            <button onclick="" class=" payamount btn yellow-common-btn text-dark btn-sm mt-1 m-auto d-block">SEND
                FRIENDS </button>

        </div>
        <div class="container">
            
        <div class="note mt-3 mb-5 p-3">
                                <p class="m-0 p-0 f-12 text-light-grey mb-2">* If you add a friend you will get 3% commission for is game</p>
                                <p class="m-0 p-0 f-12 text-light-grey mb-2">* Get Point 20 bonus on inviting your friend with your referal code</p>
                                
                            </div>
        </div>


    </div>
    <script>
        function copyLink() {
            // Select the link input field
            var linkInput = document.getElementById("linkInput");

            // Select the text in the input field
            linkInput.select();
            linkInput.setSelectionRange(0, 99999); // For mobile devices

            // Copy the text to the clipboard
            document.execCommand("copy");

            // Deselect the input field
            linkInput.blur();

        }
    </script>
@endsection