@if (gs('user_ranking'))
    @php
        $userRanking = getContent('ranking.content', true);
        $userRankings = App\Models\UserRanking::active()->get();
    @endphp

    @if ($userRankings->count())
        <section class="referral-level-section border-top-1 pt-120 pb-60">
            <div class="container">
                <div class="row justify-content-center py-3">
                    <div class="section-heading style-two">
                        <span class="section-heading__subtitle">{{ __(@$userRanking->data_values->sub_heading) }}
                        </span>
                        <h1 class="section-heading__title"> {{ __(@$userRanking->data_values->heading) }} </h1>
                        <p>{{ __($userRanking->data_values->content) }}</p>
                    </div>
                </div>
                <div class="referral__level__area">
                    @php
                        $firstPercent = 20;
                        $lastPercent = 100;
                        $perItem = ($lastPercent - $firstPercent) / ($userRankings->count() > 1 ? $userRankings->count() - 1 : $userRankings->count());
                    @endphp

                    @foreach ($userRankings as $rank)
                        <div class="referral__level__item">
                            <div class="referral__level__item__inner">
                                <div class="referral__left">
                                    <div class="referral__level__thumb">
                                        <img src="{{ getImage(getFilePath('userRanking') . '/' . $rank->icon, getFileSize('userRanking')) }}" alt="referral">
                                    </div>
                                    <div class="referral__level__name">
                                        {{ __($rank->name) }}
                                    </div>
                                </div>
                                <div class="referral__right">
                                    <div class="referral__level__content custom-width" data-custom_width="{{ $perItem * $loop->index + $firstPercent }}">
                                        <div class="referral__level__content__content">
                                            <span><i class="las la-coins"></i> @lang('Bonus'):
                                                {{ showAmount($rank->bonus) }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="referral__tooltip">
                                <ul>
                                    <li class="d-flex justify-content-between">
                                        @lang('Level')
                                        <span>{{ __($rank->level) }}</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        @lang('Minimum Invest')
                                        <span>{{ showAmount($rank->minimum_invest) }}</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        @lang('Team Invest')
                                        <span>{{ showAmount($rank->min_referral_invest) }}</span>
                                    </li>
                                    <li class="d-flex justify-content-between">
                                        @lang('No. of Direct Referral')
                                        <span>{{ $rank->min_referral }}</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    @push('script')
        <script>
            (function($) {
                "use strict";
                $('.custom-width').each(function(index, value) {
                    $(value).css("max-width", `${$(value).data('custom_width')}%`);
                });
            })(jQuery);
        </script>
    @endpush

    @push('style')
        <style>
            /* Ranking section */
            .table--responsive {
                max-width: 100%;
                overflow-y: hidden;
                overflow-x: auto;
            }

            .referral__level__item__inner {
                display: flex;
            }

            @media (max-width:991px) {
                .referral__level__item__inner {
                    align-items: flex-end;
                }
            }

            .referral__left {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                width: 240px;
            }

            @media (max-width: 991px) {
                .referral__left {
                    width: 220px;
                }
            }



            .referral__right {
                width: calc(100% - 240px);
                padding-left: 15px;
            }

            @media (max-width: 991px) {
                .referral__right {
                    width: calc(100% - 180px);
                }
            }

            @media (max-width: 767px) {
                .referral__right {
                    width: calc(100% - 150px);
                }
            }

            .referral__level__item__inner .referral__level__thumb {
                width: 40px;
                height: 40px;
                align-self: center;
            }

            .referral__level__item__inner .referral__level__thumb img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }

            .referral__level__item__inner .referral__level__name,
            .referral__level__item__inner .referral__level__profit,
            .referral__level__item__inner .referral__level__content {
                padding: 10px 20px;
                background: hsl(var(--section-bg));
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
                color: #fff;
                -webkit-transition: all ease 0.3s;
                -moz-transition: all ease 0.3s;
                transition: all ease 0.3s;
                height: 54px;
                line-height: 38px;
            }

            @media (max-width: 991px) {

                .referral__level__item__inner .referral__level__name,
                .referral__level__item__inner .referral__level__profit,
                .referral__level__item__inner .referral__level__content {
                    padding: 10px;
                }
            }

            .referral__level__item__inner .referral__level__name:not(:last-child),
            .referral__level__item__inner .referral__level__profit:not(:last-child),
            .referral__level__item__inner .referral__level__content:not(:last-child) {
                margin-right: 15px;
            }

            .referral__level__item__inner .referral__level__profit {
                width: 100px;
            }

            .referral__level__item__inner .referral__level__content.custom-width {
                transition: all ease 0.3s;
            }

            .referral__level__item__inner .referral__level__name {
                width: 200px;
                font-size: 20px;
            }

            @media (max-width: 991px) {
                .referral__level__item__inner .referral__level__name {
                    width: 140px;
                    font-size: 16px;
                }
            }

            .referral__level__item:hover .referral__level__item__inner .referral__level__content.custom-width {
                max-width: 1000% !important;
                transition: all ease 0.3s;
            }

            .referral__level__item__inner .referral__level__content__content {
                display: none;
            }

            .referral__level__item__inner .hover__none {
                display: flex;
            }

            .referral__level__item {
                position: relative;
            }

            .referral__level__item:not(:last-child) {
                margin-bottom: 15px;
            }

            .referral__level__item:hover .referral__level__name,
            .referral__level__item:hover .referral__level__profit,
            .referral__level__item:hover .referral__level__content {
                background: var(--base-gradient);
                color: #fff;
            }

            .referral__level__item:hover .referral__level__content {
                flex-grow: 1;
            }

            .referral__level__item:hover .hover__none {
                display: none;
            }

            .referral__level__item:hover .referral__level__content__content {
                display: flex;
            }

            .referral__level__item:hover .referral__tooltip {
                opacity: 1;
                visibility: visible;
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%);
            }

            .referral__level__item:nth-last-of-type(3) .referral__tooltip {
                top: 100%;
                bottom: unset;
            }

            .referral__level__item:nth-last-of-type(2) .referral__tooltip,
            .referral__level__item:nth-last-of-type(1) .referral__tooltip {
                bottom: 100%;
                top: unset;
                margin-bottom: 5px;
            }

            @media (max-width:991px) {

                .referral__level__item:nth-last-of-type(2) .referral__tooltip,
                .referral__level__item:nth-last-of-type(1) .referral__tooltip {
                    bottom: 100%;
                }
            }

            .referral__level__item:nth-last-of-type(3) .referral__tooltip::before {
                bottom: 100%;
                top: unset;
            }

            .referral__level__item:nth-last-of-type(2) .referral__tooltip::before,
            .referral__level__item:nth-last-of-type(1) .referral__tooltip::before {
                top: 100%;
                bottom: unset;
                clip-path: polygon(50% 100%, 0 0, 100% 0);
            }

            .referral__tooltip {
                position: absolute;
                top: 100%;
                left: 50%;
                -webkit-transform: translateX(-50%) translateY(15px);
                -ms-transform: translateX(-50%) translateY(15px);
                transform: translateX(-50%) translateY(15px);
                width: 100%;
                max-width: 350px;
                background: #fff;
                padding: 12px;
                text-align: center;
                font-size: 14px;
                line-height: 1.6;
                box-shadow: 0 0 5px rgba(4, 38, 86, 0.2);
                visibility: hidden;
                opacity: 0;
                -webkit-transition: all ease 0.3s;
                -moz-transition: all ease 0.3s;
                transition: all ease 0.3s;
                z-index: 9;
                border: 1px solid #dddddd3d;
                background-color: hsl(var(--section-bg));
                border-radius: 3px;
                margin-top: 5px;
            }

            .referral__tooltip::before {
                clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                background: inherit;
                width: 15px;
                height: 10px;
                content: "";
                position: absolute;
                bottom: 99%;
                left: 50%;
                border: 6px solid #dddddd3d;
                margin-left: -10px;
            }

            @media screen and (max-width: 424px) {
                .referral__tooltip {
                    max-width: 280px;
                    padding: 30px 15px;
                }
            }

            @media (max-width: 424px) {
                .referral__level__item .referral__level__name {
                    position: absolute !important;
                    top: -20px;
                    background: transparent !important;
                    padding: 0 !important;
                    line-height: 1 !important;
                    font-size: 15px !important;
                }

                .referral__left {
                    width: auto !important;
                }

                .referral__level__item {
                    margin-top: 40px;
                }

                .referral__right {
                    width: 100% !important;
                }

                .referral__level__item__inner {
                    align-items: center;
                }
            }

            .user-profile .ranking-user {
                width: 50px;
            }

            .user-profile .btn {
                padding: 10px;
            }
        </style>
    @endpush

@endif
