@extends('layouts.index')

@section('content')

    <div class="pt-3 ">
        {{-- Breadcrumb Section --}}
        @php
            $pages = [] ; $page = [] ;
            $page['title'] = __('lang.home') ; $page['route'] = route('home') ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.myAccount') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_3' ;
            $pages[] = $page ;
            $page['title'] = __('lang.points_levels') ; $page['route'] = 'javascript:void(0)' ; $page['color'] = 'text_1' ;
            $pages[] = $page ;
        @endphp
        @include('components.breadcrumb',$pages)

        @php
            $levels_color = ['AFAEAE','813215','716F6F','B57E10','2F42B4'];
            $activeLevel = 0 ;
            $levelProgress = 0 ;
            $progess = 0 ;
            if(isset($customerLevel)){
                foreach ($pointsLevels as $key => $pointLevel){
                    if($customerLevel->points_levels_id == $pointLevel->points_levels_id){
                        $activeLevel = $key ;
                        if(sizeof($pointsLevels) > $key+1){
                            $nextLevel = $pointsLevels[$key+1];
                        }
                    }
                    if(sizeof($pointsLevels) == $key+1){
                        $lastLevel = $pointLevel;
                    }
                }
                $from = $customerLevel->points_levels_from ;
                $to = $customerLevel->points_levels_to ;
                $levelProgress = ($customer_points - $customerLevel->points_levels_from) * 100 / ($to - $from);

                $progess = isset($nextLevel) && $nextLevel && $customer_points < $nextLevel->points_levels_from ? (($levelProgress + $activeLevel * 100) * 100 ) / ((sizeof($pointsLevels) - 1 ) * 100 ) : 100 ;
            }
         
        @endphp
        @if($account->accounts_show_points)
        <div class="container mb-5 ">
            <div class="row points-information">
                <div class="col-lg-3 col-12">
                    @include('auth.account-menu',['activePage'=>'points_levels','route'=>'pointsLevels'])
                </div>
                <div class="col-lg-9 col-12 points-level">
                    @include('includes.errors')
                    <div class="">
                        
                        @if(sizeof($pointsLevels) > 1)
                            <!-- Levels Progress -->
                            <div class="{{ !isset($nextLevel) || !$nextLevel ? 'd-md-block d-none' : '' }}">

                                <div class="d-flex justify-content-between align-items-center mb-1 position-relative">
                                    @foreach ($pointsLevels as $key => $pointLevel)
                                        {{-- @if($key < 5) --}}
                                            <div class="level-icon {{ !in_array($key,[$activeLevel,$activeLevel+1]) ? 'd-md-inline d-none' : '' }} {{ $activeLevel == $key ? 'active' : '' }} {{ $activeLevel + 1 == $key ? 'next-level' : '' }}">
                                                <img src="{{ $imagesBaseUrl.'uploads/'.env('accountId').'/points_levels/original/'.$pointLevel->points_levels_image }}">
                                            </div>
                                        {{-- @endif --}}
                                    @endforeach
                                </div>
                            
                                <div class=" d-flex justify-content-between align-items-center mb-1 position-relative points-badges-div">
                                    <div class="progress-line"></div>
                                    <div class="progress-active-line"></div>
                                    @foreach ($pointsLevels as $key => $pointLevel)
                                        {{-- @if($key < 5) --}}
                                            <div class="level-badge-div text-center {{ !in_array($key,[$activeLevel,$activeLevel+1]) ? 'd-md-inline d-none' : '' }}">
                                                <div class="level-badge level_{{ $key + 1 }} {{ $activeLevel == $key ? 'active' : '' }}"></div>
                                            </div>
                                        {{-- @endif --}}
                                    @endforeach

                                </div>

                                <div class=" d-flex justify-content-between align-items-center mb-4 position-relative points-badges-div text_3">
                                    @foreach ($pointsLevels as $key => $pointLevel)
                                        {{-- @if($key < 5) --}}
                                            <div class="ps-2 {{ !in_array($key,[$activeLevel,$activeLevel+1]) ? 'd-md-inline d-none' : '' }}">{{ $pointLevel->points_levels_from }}</div>
                                        {{-- @endif --}}
                                    @endforeach
                                </div>
                            </div>
                        

                            @if(isset($customerLevel) && $customerLevel)
                            <div class="{{ !isset($nextLevel) || !$nextLevel ? 'd-md-none d-block' : 'd-none' }}">
                                <div class="d-flex flex-row align-items-center my-3">
                                    <div class="me-2">
                                        <img src="{{ $imagesBaseUrl.'uploads/'.env('accountId').'/points_levels/original/'.$customerLevel->points_levels_image  }}" alt="" width="60px" height="56px">
                                    </div>
                                    <div class="capitalize">
                                        <div class="kaisei-opti-bold font-16 text_4">{{ $customerLevel->points_levels_name }} <span class="text_3 inter-regular font-14">({{ __('theme6.level') }} {{ $activeLevel + 1 }})</span></div>
                                        <div class="text_1 font-14">
                                            {{ __('theme6.youHaveReachedTheTop') }} @include('points_levels.icon-top')
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif

                            <!-- Points Info -->
                            <div class="card p-md-4 p-3 mb-4 bg-transparent">
                                <div class="row">
                                    <div class="col me-auto text_3 order-md-1 order-2">
                                        <h5 class="text-danger mb-1 text_1 font-20">
                                            <span class="fw-bold">{{ __('theme6.youEarned') }}</span>: <span class="">{{ $customer_points }}</span> {{ __('lang.point') }}
                                            @if(isset($customer_points_value) && $customer_points_value > 0)
                                            = @include('components.currency',['price'=> $customer_points_value ])
                                            @endif
                                        </h5>


                                        <hr>
                                        @if(isset($customerLevel) && $customerLevel )
                                        <h5 class="fw-normal text_4"><span class="k ">{{ __('theme6.level') }}</span>: <span class="">{{ $customerLevel->points_levels_name }} </span></h5>
                                        <p class="mb-1 ">
                                            <span class="text_3">
                                                {{ __('theme6.atLevel',['level'=>$customerLevel->points_levels_name]) }} 100 {{ $locale =='ar' ? __('lang.point')  : __('lang.points') }}
                                                = @include('components.currency',['price'=> $customerLevel->points_levels_value ])
                                            </span>
                                        </p>
                                        @endif
                                        @if(isset($nextLevel) && $nextLevel)
                                            <p class="text_3 small mb-0">
                                                {{ $nextLevel->points_levels_from - $customer_points }} {{ __('theme6.remainingToReachLevel',['nextLevel'=>$nextLevel->points_levels_name]) }}
                                            </p>
                                        @endif
                                    </div>
                                    <div class="col-12 col-md-auto order-md-2 order-1 text-md-start text-center mb-md-0 mb-3 d-md-inline d-none">
                                        <img src="{{ asset('images/'.$account->accounts_website_theme.'/points_levels/coins.webp') }}">
                                    </div>
                                </div>

                            </div>

                            
                            <!-- Info List -->
                            {{-- @if(isset($nextLevel) && $nextLevel) --}}
                                <div class="text_3 font-18 ms-xl-4 level-info-list">
                                    <p class="d-md-inline d-none">{{ __('theme6.dearCustomer') }},</p>
                                    <ul class="list-disc">
                                        @foreach ($pointsLevels as $key => $pointLevel)
                                            {{-- @if($key > $activeLevel) --}}
                                                <li class=" ">
                                                    <span class="pe-2 d-inline d-md-none">
                                                        <img src="{{ $imagesBaseUrl.'uploads/'.env('accountId').'/points_levels/original/'.$pointLevel->points_levels_image }}" width="48px" height="40px">
                                                    </span>
                                                    <div>
                                                        <div class="text_4 kaisei-opti-bold d-inline d-md-none capitalize">{{ $pointLevel->points_levels_name }} <span class="inter-regular text_3 font-10">({{ __('theme6.level') }} {{ $key+1 }})</span></div>
                                                        <div class="">
                                                            {{ __('theme6.atLevel',['level'=>$pointLevel->points_levels_name]) }} <span class="text_1"> 100 {{ __('lang.points') }} = @include('components.currency',['price'=> $pointLevel->points_levels_value ])</span>
                                                        </div>
                                                    </div>
                                                </li>
                                            {{-- @endif --}}
                                        @endforeach
                                    </ul>
                                </div>
                            {{-- @endif --}}
                        @elseif(sizeof($pointsLevels) > 0)
                            <!-- Points Info -->
                            <div class="card p-md-4 p-3 mb-4 mt-md-0 mt-4 bg-transparent">
                                <div class="row mx-md-5 mx-0 px-md-5 px-0 align-items-center justify-content-center">
                                    <div class="col-md-6 text_3 text-center mb-md-0 mb-3">
                                        <h5 class="text-danger mb-1 text_1 font-20">
                                            <span class="fw-bold">{{ __('theme6.youEarned') }}</span>: <span class="">{{ $customer_points }}</span> {{ __('lang.point') }}
                                            = @include('components.currency',['price'=> isset($customer_points_value) ? $customer_points_value : 0 ])
                                        </h5>

                                      
                                            <p class="mb-1 ">
                                                <span class="text_3">
                                                    {{ __('theme6.startFromPoint',['from'=> $pointsLevels[0]->points_levels_from ]) }}  
                                                    = @include('components.currency',['price'=> $pointsLevels[0]->points_levels_value ])
                                                </span>
                                            </p>
                                         
                                    </div>
                                    <div class="col-md-6 text-center">
                                        <img src="{{ $imagesBaseUrl.'uploads/'.env('accountId').'/points_levels/original/'.$pointsLevels[0]->points_levels_image  }}">
                                    </div>
                                </div>

                            </div>

                        @endif

                    </div>

                </div>
            </div>
        </div>
        @endif
    </div>
@endsection
@push('css')
    <style>
        .points-badges-div{
            margin: 0px 52px 0px 53px;
        }
        .card {
            border-color: var(--border_1);
        }
        hr {

            background-color: var(--border_1) !important;
            opacity: 1 !important;
        }
        .progress-line {
            position: absolute;
            top: 50%;
            left: 0%;
            right: 0%;
            height: 1px;
            background-color: #ECEAE8;
            z-index: 0;
            transform: translateY(-50%);
            border-radius: 10px;

        }

        .progress-active-line{
            position: absolute;
            top: 50%;
            left: 0%;
            right: {{ 100 -  ($progess && $progess > 0 && $progess <= 100 ? $progess : 0)  }}%;
            height: 8px;
            background-color: {{ '#'.(isset($levels_color[$activeLevel]) ? $levels_color[$activeLevel] : '2F42B4') }};
            z-index: 0;
            transform: translateY(-50%);
            border-radius: 10px;
        }


        .rtl .progress-active-line{
            right: 0%;
            left: {{ 100 -  ($progess && $progess > 0 && $progess <= 100 ? $progess : 0)  }}%;
        }

        .level-badge {
            z-index: 1;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #999;
            position: relative;
            text-align: center;
            /* left: 50%;
            transform: translate(-50%, -0%); */
        }

        .level-badge { background: #{{$levels_color[0]}}; }
        .level-badge.level_1 { background: #{{$levels_color[0]}}; }
        .level-badge.level_2 { background: #{{$levels_color[1]}}; }
        .level-badge.level_3 { background: #{{$levels_color[2]}}; }
        .level-badge.level_4 { background: #{{$levels_color[3]}}; }
        .level-badge.level_5 { background: #{{$levels_color[4]}}; }


        .level-badge.active {
            box-shadow: 0 0 8px rgba(0,0,0,0.4);
            /* transform: scale(1.2); */
        }

        .level-icon img {
            width: 120px;
            height: 100px;
            object-fit: contain;
        }
        ul.list-disc{
            list-style-type: disc;
        }

        {

        }

        @media (max-width: 768px) {
            .level-info-list{
                border: 1px solid var(--border_1);
            }
            ul.list-disc{
                list-style-type: none;
                padding: 0.7rem 1rem;
                margin-bottom: 0px;
            }
            ul.list-disc li{
                border-bottom: 1px solid var(--border_1);
                padding: .7rem 0rem;
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                font-size: 14px;
            }
            ul.list-disc li:last-child{
                border-bottom: none;
            }
            .progress-line{
                right: 0% !important;
            }
            .progress-active-line{
                right: {{ isset($levelProgress) && $levelProgress > 0 ? 100 - $levelProgress : 0 }}% !important;
            }
            .rtl .progress-active-line{
                right: 0% !important;
                left: {{ isset($levelProgress) && $levelProgress > 0 ? 100 - $levelProgress : 0 }}% !important;
            }

            .level-icon img {
                width: 60px;
                height: 56px;
            }
            .next-level {
                display: flex;
                align-items: end;
                justify-content: center;
                width: 60px;
                height: 56px;
            }
            .next-level img{
                width: 36px;
                height: 32px;
            }
            .points-badges-div {
                margin: 0px 28px 0px 28px;
            }
            .level-badge {
                z-index: 1;
                width: 5.56px;
                height: 5.56px;
            }
            .progress-active-line{
                height: 3.7px;
            }

        }



    </style>

@endpush
@push('js')

@endpush