@extends('layouts.master')

@section('title', __('Star Rank'))

@push('styles')
<style>
    .cab-title{
        min-width: 300px;
        width: 300px;
        font-size: 1.1rem;
    }
    @media(max-width:1366px){
        .cab-title{
            min-width: 200px;
            width: 200px;
        }
    }
    .ul-vertical-line{
        height: 99%;
    }
    .collapse.show{
        visibility: visible !important;
    }
</style>
@endpush

@section('breadcrumb-text')
    <div class="w-100 d-flex justify-content-between">
        <div>
            <h2 class="p-0 m-0">{{ __('My Career') }}</h2>
        </div>
    </div>
@endsection

@section('content')
    <section class="star_rank_dashboard">
        <div class="row">
            <div class="col-12 col-sm-12 col-lg-6 col-md-6 pb-3">
                <div class="card h-100">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center pt-2">
                            <h4 class="box-title m-0 p-0">{{ __('Statistics') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row pt-1">
                            <div class="col-md-6 col-lg-6">
                                <div class="card mb-4 pb-1">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-graph-up-arrow text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('Total BV') }}</p>
                                                <h4 class="heading">{{ formatDisplayNumber(rand(100,100000)) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6">
                                <div class="card mb-4 pb-1">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-receipt text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('Total Sales Volume') }}</p>
                                                <h4 class="heading">€ {{ formatDisplayNumber(rand(100,100000)) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6">
                                <div class="card mb-4 pb-1">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-diagram-3 text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('TSV Of All Other Legs') }}</p>
                                                <h4 class="heading">€ {{ formatDisplayNumber(rand(100,100000)) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6">
                                <div class="card mb-4 pb-1">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-coin text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('Last Week commission') }}</p>
                                                <h4 class="heading">€ {{ formatDisplayNumber(rand(100,100000)) }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-person-check text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('Uni-level status') }}</p>
                                                <h4 class="heading">{{ __('Senior Associate') }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6 col-lg-6">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="ul-widget__row">
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-person-gear text-primary"></i>
                                            </div>
                                            <div class="ul-widget__content">
                                                <p class="m-0">{{ __('Your Placement Sponsor') }}</p>
                                                <h4 class="heading">{{ __('Jhone012') }}</h4>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-lg-6 col-md-6">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center pt-2">
                            <h4 class="box-title m-0 p-0">{{ __('Customer Acquisition Bonus Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="ul-widget-s7n">
                            <div class="ul-widget-s7__items mb-1">
                                <span class="ul-widget-s7__item-time ul-middle cab-title fw-bold">{{ __('Customer') }}</span>
                                <div class="ul-widget-s7__item-circle">
                                    <p class="ul-vertical-line bg-success"></p>
                                </div>
                                <div class="ul-widget-s7__item-text">
                                    <ul class="my-2">
                                        <li>
                                            <i class="bi bi-check-square text-success"></i>
                                            Personally sponsored zero (0) customers
                                        </li>
                                        <li>
                                            <i class="bi bi-check-square text-success"></i>
                                            Accumulated purchases of 0 BV
                                        </li>
                                        <li>
                                            <i class="bi bi-check-square text-success"></i>
                                            Has generated BV
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ul-widget-s7__items mb-1">
                                <span class="ul-widget-s7__item-time ul-middle cab-title">{{ __('Referral Customer') }}</span>
                                <div class="ul-widget-s7__item-circle">
                                    <p class="ul-vertical-line bg-primary"></p>
                                </div>
                                <div class="ul-widget-s7__item-text">
                                    <ul class="my-2">
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Personally sponsored five (5) customers
                                        </li>
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Accumulated purchases of 1,000 BV
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ul-widget-s7__items mb-1">
                                <span class="ul-widget-s7__item-time ul-middle cab-title">{{ __('Senior Customer') }}</span>
                                <div class="ul-widget-s7__item-circle">
                                    <p class="ul-vertical-line bg-primary"></p>
                                </div>
                                <div class="ul-widget-s7__item-text">
                                    <ul class="my-2">
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Personally sponsored ten (10) customers
                                        </li>
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Accumulated purchases of 10,000 BV
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="ul-widget-s7__items">
                                <span class="ul-widget-s7__item-time ul-middle cab-title">{{ __('Executive Customer') }}</span>
                                <div class="ul-widget-s7__item-circle">
                                    <p class="ul-vertical-line bg-primary"></p>
                                </div>
                                <div class="ul-widget-s7__item-text">
                                    <ul class="my-2">
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Personally sponsored twenty (20) customers
                                        </li>
                                        <li>
                                            <i class="bi bi-x-square text-danger"></i>
                                            Accumulated purchases of 20,000 BV
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-lg-12 col-md-12">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center pt-2">
                            <div class="form-group m-0 p-0" style="min-width: 272px">
                                <label for="star_rank" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label ml-2">{{ __('Select Rank to View Requirement') }}</label>
                                <select id="star_rank" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-white border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-8">
                                    <option value="1">1 Rank</option>
                                    <option value="2">2 Rank</option>
                                    <option value="3">3 Rank</option>
                                    <option value="4">4 Rank</option>
                                    <option value="5">5 Rank</option>
                                    <option value="6">6 Rank</option>
                                    <option value="7">7 Rank</option>
                                </select>
                            </div>
                            <h4 class="box-title m-0 p-0">{{ __('Star Rank Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-lg-2 col-md-2 ">
                                {{--<h5 class="text-mute text-center mt-4 pt-2">You do not have any Star Rank.</h5>--}}
                                <div class="mt-4 pt-2">
                                    <img class="img-fluid m-auto" src="{{ asset('frontend/images/star_rank/1.png') }}" alt="1" style="max-height: 100px"/>
                                    <h3 class="text-muted text-center fw-bold w-100 mt-3">1 {{ __('STAR') }}</h3>
                                    <p class="box-title m-0 p-0 w-100 text-center">{{ __('Your Current Star Rank') }}</p>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-lg-5 col-md-5">
                                <div class="ul-widget-app__poll-list mb-4">
                                    <h3 class="heading me-2">{{ 0 }}</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Personally sponsor Two (0) IAS') }}</span><span class="t-font-boldest ms-auto">100%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ul-widget-app__poll-list mb-4">
                                    <h3 class="heading me-2">{{ formatDisplayNumber(5000) }}</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Accumulated Team Sales Volume of 10,000 BV') }}</span><span class="t-font-boldest ms-auto">50%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 50%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ul-widget-app__poll-list">
                                    <h3 class="heading me-2">{{ __('No') }}</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Have activated Business license	') }}</span><span class="t-font-boldest ms-auto">0%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 0%" 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 h-100">
                                    <div class="card-title text-white"><i class="bi bi-info-lg me-1"></i> {{ __('Information') }}</div>
                                    <ul class="list-disc">
                                        <li><b>{{ __('1st to 2nd level Matching bonus') }}</b></li>
                                        <li><b>{{ __('2% Infinity Star Bonus') }}</b></li>
                                        <li>{{ __('Please note that a maximum 50% of the Accumulated Team Sales Volume requirement can originate from one leg.') }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="col-12 col-sm-12 col-lg-12 col-md-12">
                <div class="card mb-3">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center pt-2">
                            <div class="form-group m-0 p-0" style="min-width: 300px">
                                <label for="uni_level" class="form-label z-50 form-label ml-2 p-2 py-0 peer-focus:font-medium absolute left-0 text-sm text-gray-600 duration-300 transform -translate-y-6 scale-75 top-3 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-indigo-400 peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6 bg-white peer-focus:z-10 custom-label ml-2">{{ __('Select Uni Level to View Requirement') }}</label>
                                <select id="uni_level" class="form-select rounded-lg block py-2.5 px-2.5 w-full text-sm text-gray-800 bg-white border-2 border-gray-300 appearance-none dark:text-gray-400 dark:border-gray-700 focus:outline-none focus:ring-0 focus:border-gray-200 peer h-8">
                                    <option value="1">{{ __('Independent Associate') }}</option>
                                    <option value="2">{{ __('Junior Associate') }}</option>
                                    <option value="3">{{ __('Senior Associate') }}</option>
                                    <option value="4">{{ __('Executive Associate') }}</option>
                                    <option value="5">{{ __('Senior Executive Associate') }}</option>
                                </select>
                            </div>
                            <h4 class="box-title m-0 p-0">{{ __('Uni Level Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-12 col-sm-12 col-lg-2 col-md-2 pt-5">
                                {{--<h5 class="text-mute text-center mt-4 pt-2">You do not have any Uni Level.</h5>--}}
                                <div class="mt-4 pt-2">
                                    <h3 class="text-muted text-center fw-bold w-100 mt-4">{{ __('Senior Associate') }}</h3>
                                    <p class="box-title m-0 p-0 w-100 text-center">{{ __('Your current Uni Level') }}</p>
                                </div>
                            </div>
                            <div class="col-12 col-sm-12 col-lg-5 col-md-5">
                                <div class="ul-widget-app__poll-list mb-4">
                                    <h3 class="heading me-2">{{ formatDisplayNumber(2000) }}</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Greater than Accumulated 6,000BV in Personal Group Volume') }}</span><span class="t-font-boldest ms-auto">33%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: 33%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ul-widget-app__poll-list mb-4">
                                    <h3 class="heading me-2">0</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Minimum of zero (0) Personally Sponsored IAs/Customers') }}</span><span class="t-font-boldest ms-auto">100%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                                </div>
                                <div class="ul-widget-app__poll-list">
                                    <h3 class="heading me-2">{{ __('Yes') }}</h3>
                                    <div class="d-flex">
                                        <span class="text-muted text-12">{{ __('Have activated Business license') }}</span><span class="t-font-boldest ms-auto">100%</span>
                                    </div>
                                    <div class="progress progress--height-2 mb-3">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: 100%" 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">
                                        <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>
                                    </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>
                        <hr class="border border-light my-3">
                        <div class="d-flex justify-content-around flex-wrap">
                            <div class="card mb-2">
                                <div class="ul-widget__chart-info">
                                    <h5 class="heading me-3 h-6">{{ __('1st level Commissions 12%') }}</h5>
                                    <div class="ul-widget__chart-number">
                                        <h2 class="t-font-boldest">€ {{ formatDisplayNumber(rand(1,1000)) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="ul-widget__chart-info">
                                    <h5 class="heading me-3 h-6">{{ __('2nd level Commissions 8%') }}</h5>
                                    <div class="ul-widget__chart-number">
                                        <h2 class="t-font-boldest">€ {{ formatDisplayNumber(rand(1,1000)) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="ul-widget__chart-info">
                                    <h5 class="heading me-3 h-6">{{ __('3rd level Commissions 8%') }}</h5>
                                    <div class="ul-widget__chart-number">
                                        <h2 class="t-font-boldest">€ {{ formatDisplayNumber(rand(1,1000)) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="ul-widget__chart-info">
                                    <h5 class="heading me-3 h-6">{{ __('4th level Commissions 5%') }}</h5>
                                    <div class="ul-widget__chart-number">
                                        <h2 class="t-font-boldest">€ {{ formatDisplayNumber(rand(1,1000)) }}</h2>
                                    </div>
                                </div>
                            </div>
                            <div class="card mb-2">
                                <div class="ul-widget__chart-info">
                                    <h5 class="heading me-3 h-6">{{ __('5th level Commissions 5%') }}</h5>
                                    <div class="ul-widget__chart-number">
                                        <h2 class="t-font-boldest">€ {{ formatDisplayNumber(rand(1,1000)) }}</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
@endpush
