@extends("website.layouts.layout")
@section('title',"My Account")
@section("body")
<!--Banner-->

<!-- banner background image starts -->
<section class="banner-services">
    <img class="banner-background-ellipse" src="./assets/images/banner-bg-img.png" alt="">
</section>

<!--- services section -->
<section class="services-breadcrumb-section dashboard-breadcrumb">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">My Profile</li>
                <li class="breadcrumb-item active" aria-current="page">Refer & Earn</li>
            </ol>
        </nav>
    </div>
</section>

<section class="dashboard-main">
    <div class="container">
        <div class="row sidebar_row">
            @include("website.clients.includes.sidebar")

            <div class="main-content">
                <div class="main-content-wrapper my-profile">
                    <h3 class="font-size-18 refer-earn-heading">Refer & Earn</h3>
                    <div class="profile-refer-earn d-flex flex-column align-items-center">
                        <div class="refer-earn-block d-flex flex-column">
                            <div class="refer-earn-items refer-earn-img d-flex flex-column align-items-center">
                                <h3 class="font-size-24">Help Your Friends, Get Bouns</h3>
                                <img src="{{ asset('webAssets/assets/images/refer-earn.png') }}" alt="refer">
                                <h3 class="font-size-18">Refer and Earn</h3>
                                <p class="font-size-18">Invite a Friend and get Bounce. Share below code to refer
                                </p>

                                @if ($referral_code)
                                <div class="refer-earn-coupon d-flex gap-4px align-items-center">
                                    <p class="font-size-18" id="referCode">{{ $referral_code }}</p>
                                    <button class="btn" id="copyButton">
                                        <img src="{{ asset('webAssets/assets/images/copy-btn-img.svg') }}"
                                            alt="copy-btn">
                                    </button>
                                </div>
                                @else
                                <p>{{ $message }}</p>
                                @endif



                                <div class="refer-earn-action-btn w-100">
                                    <button class="btn btn-primary w-100" id="inviteFriendsButton"
                                        data-code="{{ $referral_code }}">Invite Friends</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal" id="shareModal" tabindex="-1" role="dialog">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Share with Friends</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></button>
                            </div>
                            <div class="modal-body">
                                <button class="btn btn-facebook" id="facebookShare">
                                    <i class="fab fa-facebook"></i>
                                    Share on Facebook
                                </button>
                                <button class="btn btn-twitter" id="twitterShare">
                                    <i class="fab fa-twitter"></i>
                                    Share on Twitter
                                </button>
                                <button class="btn btn-linkedin" id="linkedinShare">
                                    <i class="fab fa-linkedin"></i>
                                    Share on LinkedIn
                                </button>
                                <button class="btn btn-whatsapp" id="whatsappShare">
                                    <i class="fab fa-whatsapp"></i>
                                    Share on WhatsApp
                                </button>
                            </div>


                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
@endsection

@section('footerItems')
@endsection