@if(isset($nextLevel) && !empty($nextLevel))
    <div class="row">
    <div class="col-12 col-sm-12 col-lg-2 col-md-2 pt-5">
        @if(isset($member->level) && (empty($member->level) || $member->level == 0))
            <h5 class="text-mute text-center mt-5 pt-5">{{ __('You do not have any Uni Level.') }}</h5>
        @else
            <div class="mt-4 pt-2">
                <h3 class="text-muted text-center fw-bold w-100 mt-4">
                    {{ str_replace('_', ' ', ucwords(strtolower($memberLevelName ?? '-')))}}
                </h3>
                <p class="box-title m-0 p-0 w-100 text-center">{{ __('Your current Uni Level') }}</p>
            </div>
        @endif
    </div>
    <div class="col-12 col-sm-12 col-lg-5 col-md-5">
        <h5 class="card-title">{{ __('Requirements for') }} {{ $nextLevelName }}</h5>
        <div class="ul-widget-app__poll-list mb-4">
            <h4 class="heading me-2">{{ formatDisplayNumber($nextLevel['qbv']) }}</h4>
            <div class="d-flex">
                <span class="text-muted text-12">Greater than Accumulated {{  $nextLevel['minimumQbv']   }} BV in Personal Group Volume</span>
                <span class="t-font-boldest ms-auto">{{ $nextLevel['qbvPercentage'] }}%</span>
            </div>
            <div class="progress progress--height-2 mb-3">
                <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $nextLevel['qbvPercentage'] }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="ul-widget-app__poll-list mb-4">
            <h4 class="heading me-2">{{ $nextLevel['sponsor'] }}</h4>
            <div class="d-flex">
                <span class="text-muted text-12">Minimum of three ({{  $nextLevel['minimumSponsored']   }}) Personally Sponsored IAs/Customers</span>
                <span class="t-font-boldest ms-auto">{{ $nextLevel['sponsorPercentage'] }}%</span>
            </div>
            <div class="progress progress--height-2 mb-3">
                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $nextLevel['sponsorPercentage'] }}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="ul-widget-app__poll-list">
            <h4 class="heading me-2">@if($nextLevel['active_teamsite_license']) {{ __('Yes') }} @else {{ __('No') }} @endif</h4>
            <div class="d-flex">
                <span class="text-muted text-12">{{ __('Have activated Business license') }}</span><span class="t-font-boldest ms-auto">@if($nextLevel['active_teamsite_license']) 100% @else 0% @endif</span>
            </div>
            <div class="progress progress--height-2 mb-3">
                <div class="progress-bar bg-primary" role="progressbar" style="width: @if($nextLevel['active_teamsite_license']) 100% @else 0% @endif;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
    </div>
    <div class="col-12 col-sm-12 col-lg-5 col-md-5">
        <div class="bg-primary p-3 text-white rounded-2">
            <div class="card-title text-white"><i class="bi bi-info-lg me-1"></i> {{ __('Information') }}</div>
            <ul class="list-disc">
                @if($nextLevel['level'] == 1)
                    <li>{{ __('PGV is 100% of Personal Purchases BV and/or 25% of the Personal Purchases BV of your Personally sponsored IAs') }}</li>
                    <li>{{ __('Qualified for First Level Commissions') }}</li>
                @elseif($nextLevel['level'] == 2)
                    <li>{{ __('PGV is 100% of Personal Purchases BV and/or 25% of the Personal Purchases BV of your Personally sponsored IAs') }}</li>
                    <li>{{ __('Qualified for First and Second Level Commissions') }}</li>
                @elseif($nextLevel['level'] == 3)
                    <li>{{ __('PGV is 100% of Personal Purchases BV and/or 25% of the Personal Purchases BV of your Personally sponsored IAs') }}</li>
                    <li>{{ __('Qualified for First, Second and Third Level Commissions') }}</li>
                @elseif($nextLevel['level'] == 4)
                    <li>{{ __('PGV is 100% of Personal Purchases BV and/or 25% of the Personal Purchases BV of your Personally sponsored IAs') }}</li>
                    <li>{{ __('Qualified for First, Second, Third and Fourth Level Commissions') }}</li>
                @elseif($nextLevel['level'] == 5)
                    <li>{{ __('PGV is 100% of Personal Purchases BV and/or 25% of the Personal Purchases BV of your Personally sponsored IAs') }}</li>
                    <li>{{ __('Qualified for First, Second, Third, Fourth and Fifth Level Commissions') }}</li>
                @endif
            </ul>
        </div>

        <div class="accordion" id="uniLevelAboutDetail">
            <div class="card mt-2">
                <div class="header-elements-inline bg-primary text-white p-2">
                    <h6 class="card-title ul-collapse__icon--size ul-collapse__right-icon mb-0">
                        <a class="text-white collapsed fw-normal h5" data-toggle="collapse" href="#uniLevelAbout" aria-expanded="false">
                            {{ __('About Commission Level') }}
                        </a>
                    </h6>
                </div>
                <div class="collapse" id="uniLevelAbout" data-parent="#uniLevelAboutDetail">
                    <div class="card-body">
                        <ul class="list-disc m-0">
                            <li>{{ __('First Level pays 12% of BV to Cash Account') }}</li>
                            <li>{{ __('Second Level pays 8% of BV to Cash Account') }}</li>
                            <li>{{ __('Third Level pays 8% of BV to Cash Account') }}</li>
                            <li>{{ __('Fourth Level pays 5% of BV to Cash Account') }}</li>
                            <li>{{ __('Fifth Level pays 5% of BV to Cash Account') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card mt-2">
                <div class="header-elements-inline bg-primary text-white p-2">
                    <h6 class="card-title ul-collapse__icon--size ul-collapse__right-icon mb-0">
                        <a class="text-white collapsed fw-normal h5" data-toggle="collapse" href="#uniLevelNote" aria-expanded="false">
                            {{ __('Please Note') }}
                        </a>
                    </h6>
                </div>
                <div class="collapse" id="uniLevelNote" data-parent="#uniLevelAboutDetail">
                    <div class="card-body">
                        <ul class="list-disc m-0">
                            <li>{{ __('70% of commissions will be paid to your Online Cash Account') }}</li>
                            <li>{{ __('30% of commissions will be paid to your Online Bonus Account.') }}</li>
                            <li>{{ __('With these funds, you can purchase any individual product/service (No “Bundled Packages“) that are available in the shop.') }}</li>
                            <li>{{ __('Please further note that the products/services that can be purchased individually with your Bonus Account do not have any BV value and thus are not commissionable.') }}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@else
    <h3 class="text-center text-mute">{{ __('No Data Found') }}</h3>
@endif