@section('style')

<style>
    .achivement-box {
        margin-bottom: 2rem;
    }
    .achivement-box .inner-box {
        width: 100%;
        text-align: center;
        background: #fff;
        padding-top: 1rem;
        border: 1px solid var(--dark-color);
        -moz-box-shadow:    3px 3px 5px 3px rgb(0, 0, 0, 0.05);
        -webkit-box-shadow: 3px 3px 5px 3px rgb(0, 0, 0, 0.05);
        box-shadow:         3px 3px 5px 3px rgb(0, 0, 0, 0.05);
    }
    .achivement-box img {
        width: 40%;
        margin-top: 1rem;
    }
    .achivement-box .completed {
        display: inline-block;
        position: absolute;
        right: 30px;
        top: 0.2rem;
        font-size: 1.5rem;
        color: var(--primary-color);
    }
    .achivement-box .section-title {
        margin: 0;
    }
    .achivement-box .achivement-box .btn {
        border-radius: 0;
    }
    .achivement-box .list-group-item {
        border-color: #fff;
        text-align: left;
    }
    .achivement-box .list-group-item {
        border-radius: 0;
    }
    .achivement-box .progress {
        margin: 0 1rem 1rem 1rem;
    }
    .progress-bar {
        background-color: var(--primary-color);
    }
    .achivement-box p {
        padding: 1rem 1rem 1rem 1rem;
        margin: 0;
    }
    .encouragement {
        font-size: 0.8rem;
        margin: 1rem 0 0.2rem 0;
        padding: 0;
        color: var(--primary-color);
    }
</style>

@endsection

    <div class="row mb-2">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Rewards</div>
            <p><strong>&pound;{!! $referral_value !!}</strong> credit for every person that becomes a {{ config('app.name') }} customer using your links.</p>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

    <div class="row mb-5">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Your share buttons </div>
            <p>Use the below buttons/link and we will track the people that engage. Below you can see how you are doing so far.</p>
            <x-elements.champion_share :link="$share_link" :areaname="($user->lead->getArea()->name ?? null)" />
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

    <div class="row pb-5 mb-5">
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
        <div class="col-lg-8 col-md-8 col-sm-10 col-12 pb-2">
            <div class="section-title">Your impact</div>
            <p>Here you can see how many people you have brought to our community.</p>
            <table class="table table-bordered">
                <tbody>
                    @foreach($referred as $row)
                    <tr class="{{$row['class']}}">
                        <th scope="row">{!!$row['title']!!}</th>
                        <td>{{$row['count']}}</td>
                        <td>&pound;{{($row['count']*$referral_value)}}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>