@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-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. Check out the <strong>Rewards</strong> below that you will receive for your contribution.</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 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">Goals &amp; Rewards</div>
            <p>You will receive bonuses and rewards as more people sign-up using your links above. Click the <strong>Goals</strong> tab to see what you need to do.</p>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

	<div class="row">
	    <div class="col-md-2 col-0"></div>
        <x-champion_reward
            title="{{$champ_levels[0]['title']}}"
            img="{{$champ_levels[0]['img']}}"
            :rewards="$champ_levels[0]['rewards']"
            :objectives="$champ_levels[0]['objectives']"
            encouragement="{{$champ_levels[0]['encouragement']}}"
            progress="{{$champ_levels[0]['progress']}}"
            incomplete_objectives="{{$champ_levels[0]['incomplete_objectives']}}" />
        <x-champion_reward
            title="{{$champ_levels[1]['title']}}"
            img="{{$champ_levels[1]['img']}}"
            :rewards="$champ_levels[1]['rewards']"
            :objectives="$champ_levels[1]['objectives']"
            encouragement="{{$champ_levels[1]['encouragement']}}"
            progress="{{$champ_levels[1]['progress']}}"
            incomplete_objectives="{{$champ_levels[1]['incomplete_objectives']}}" />
	</div>

	<div class="row mb-5">
	    <div class="col-md-4 col-3"></div>
        <x-champion_reward
            title="{{$champ_levels[2]['title']}}"
            img="{{$champ_levels[2]['img']}}"
            :rewards="$champ_levels[2]['rewards']"
            :objectives="$champ_levels[2]['objectives']"
            encouragement="{{$champ_levels[2]['encouragement']}}"
            progress="{{$champ_levels[2]['progress']}}"
            incomplete_objectives="{{$champ_levels[2]['incomplete_objectives']}}" />
	</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>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="col-lg-2 col-md-2 col-sm-1 col-0"></div>
    </div>

@section('script')
<script>
$(document).ready(function() {
@foreach($champ_levels as $champ_level)
    $('#{{$champ_level['title']}}-objectives').hide();
    $('body').on('click', '#show-{{$champ_level['title']}}-rewards', function() {
        $('#{{$champ_level['title']}}-rewards').show();
        $('#{{$champ_level['title']}}-objectives').hide();
    });
    $('body').on('click', '#show-{{$champ_level['title']}}-objectives', function() {
        $('#{{$champ_level['title']}}-objectives').show();
        $('#{{$champ_level['title']}}-rewards').hide();
    });
@endforeach
});
</script>
@endsection