@extends('layouts.master')

@section('title', __('My Career'))

@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-12 col-md-12 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 justify-center items-center pt-1">

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">

                                        <div class="flex justify-between items-center">
                                             <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Total BV') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">{{ formatDisplayNumber($member->abv) }}</h4>
                                            </div>

                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-graph-up-arrow text-primary"></i>
                                            </div>
                                         </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">

                                        <div class="flex justify-between items-center">
                                            <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Total Sales Volume') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">{{ formatDisplayNumber($member->tsv) }}</h4>
                                            </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-receipt text-primary"></i>
                                            </div>
                                        </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">
                                        <div class="flex justify-between items-center">
                                            <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('TSV Of All Other Legs') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">{{ formatDisplayNumber(($member->tsv - $member->abv)) }}
                                                </h4>
                                        </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-diagram-3 text-primary"></i>
                                            </div>
                                        </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">
                                        <div class="flex justify-between items-center">
                                            <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Uni-level status') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">
                                                    {{ str_replace('_', ' ', ucwords(strtolower($uniLevel->level_name ?? '-')))}}
                                                 </h4>
                                            </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-person-check text-primary"></i>
                                            </div>
                                        </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">
                                        <div class="flex justify-between items-center">
                                            <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Sponsor') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">
                                                    {{ (isset($member->sponsor)) ? ($member->sponsor->user->details->username ?? '') : '-' }}
                                                </h4>
                                            </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-person-gear text-primary"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                              <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">

                                        <div class="flex justify-between items-center">
                                             <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Last Week commission') }}</p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">€ {{ formatDisplayNumber($lastWeekCommission) }}</h4>
                                            </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-coin text-primary"></i>
                                            </div>
                                        </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3 col-lg-3">
                                <div class="border rounded-lg p-3 hover:shadow mb-4">

                                        <div class="flex justify-between items-center">
                                            <div class="m-0">
                                                <p class="text-xs text-gray-500 mb-1">{{ __('Currant week commission') }} <i class="bi bi-info-circle ml-1"  data-toggle="tooltip" data-placement="top" title="This is an estimated earning; the final amount may vary"></i></p>
                                                <h4 class="font-extrabold text-gray-900 text-sm md:text-base mb-0">€ {{ formatDisplayNumber($currentWeekCommission) }}</h4>
                                            </div>
                                            <div class="ul-widget-stat__font">
                                                <i class="bi bi-coin text-primary"></i>
                                            </div>
                                        </div>
                                    </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: 320px">
                                <label for="customer_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 Customer Level to View Requirement') }}</label>
                                <select id="customer_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">
                                    @foreach($allCustomerLevel as $row)
                                        <option value="{{ $row['level'] }}" @if((($member->customer != 5 ? $member->customer + 1 : $member->customer) == $row['level'])) selected @endif>{{ $row['name'] }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <h4 class="box-title m-0 p-0">{{ __('Customer Acquisition Bonus Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="customerLevelRenderDiv">
                            <div class="w-100 my-5 text-center">
                                <i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;{{ __('Loading...') }}
                            </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="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 Star 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">
                                    @foreach($allRank as $rank)
                                        <option value="{{ $rank }}" @if((($member->rank != 5 ? $member->rank + 1 : $member->rank) == $rank)) selected @endif>{{ $rank }} {{ __('Star Rank') }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <h4 class="box-title m-0 p-0">{{ __('Star Rank Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="starRankRenderDiv">
                            <div class="w-100 my-5 text-center">
                                <i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;{{ __('Loading...') }}
                            </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">
                                    @foreach($allUniLevel as $level)
                                        <option value="{{ $level->level_no }}" @if((($member->level != 5 ? $member->level + 1 : $member->level) == $level->level_no)) selected @endif>
                                            {{ str_replace('_', ' ', ucwords(strtolower($level->level_name ?? '-')))}}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <h4 class="box-title m-0 p-0">{{ __('Uni Level Requirement') }}</h4>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="uniLevelRenderDiv">
                            <div class="w-100 my-5 text-center">
                                <i class="fa fa-spinner fa-spin"></i>&nbsp;&nbsp;{{ __('Loading...') }}
                            </div>
                        </div>

                        <hr class="border border-light my-3 d-none">
                        <div class="d-flex justify-content-around flex-wrap d-none">
                            <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')
    <script src="{{asset('frontend/js/page-js/my-career.js')}}"></script>
@endpush