@extends('layout.user')
@section('page-title', __('basic.Profile'))
@section('nav-title', __('basic.Profile'))
@section('container')
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 0 5px;
            border-color: #FF323C transparent transparent transparent;
            position: absolute;
            top: -5px;
            left: -5px;
        }

        .speech-bubble {
            background: #FF323C;
            color: #FFF;
            display: inline-block;
            position: absolute;
            text-align: center;
            vertical-align: top;
            top: -25px;
            left: {{ -3 + $numList['level']['percent'] . '%' }};
        }

        .speech-bubble:after {
            border: 5px solid transparent;
            border-top-color: #FF323C;
            content: '';
            margin-left: -1.5em;
            position: absolute;
            top: 98%;
            left: 20px;
            width: 0;
            height: 0;
        }
    </style>
    {{-- <div class="row align-items-start m-0">
        @include('partial.aside._user', [
            'userName' => 'UserName',
            'userMoney' => '0',
        ])
    </div> --}}
    {{-- Member Menu (Mobile) --}}
    <div class="l-member-nav-mb">
        <div class="d-flex flex-column justify-content-start gap-4">
            <div class="d-flex align-items-center flex-row gap-4">
                <img class="col-4 rounded-circle" src="{{ asset('image/avatar.jpg') }}" alt="">
                <div class="d-flex flex-column justify-content-start align-content-start">
                    <div class="d-flex mb-1">
                        @if ($numList['level']['id'] == 'platinum')
                            <span class="d-flex align-items-center badge text-bg-primary me-2" style="width: fit-content">{{ $numList['level']['name'] }}</span>
                        @endif

                        {{-- <ion-icon class="icon-check" name="checkmark-circle"></ion-icon> --}}
                        {{-- <div class="d-flex align-items-center badge text-bg-warning" style="width: fit-content">
                            <ion-icon class="text-base-r bg-gray-900" name="checkmark-circle" style="opacity:0.4;"></ion-icon>
                            <span class="">實名驗證</span>
                        </div> --}}
                    </div>

                    {{-- <span class="tag tag-lg tag-primary me-auto">{{ __('member.Partner') }}</span> --}}
                    <h3>{{ $data['name'] ?? 'UserName' }}</h3>
                    <div class="d-flex flex-row">
                        <span class="text-base-r me-1">{{ __('basic.TotalEarn') }}</span>
                        <span class="text-base-r text-warning">$</span>
                        <span class="text-base-r text-warning">0</span>
                    </div>
                </div>
            </div>
            <div class="px-5 py-3" style="background:#f3f3f9;"> {{-- bg-gray-200 --}}
                <div class="d-flex fw-bold align-items-center" id="div_vip_date" style="font-size: 14px; left:24px">
                    <span>{{ __('robot.My') }}</span>
                    <img class="px-1" src="{{ asset('image/logo/CLC LOGO.png') }}" alt="" style="width: 32px">
                    <span class="" id="text_vip">{{ __('robot.VipExpiredDate') }} ：</span>
                    @if ($numList['level']['id'] == 'platinum')
                        <span>{{ date('Y-m', strtotime($numList['level']['end_date'])) }}</span>
                    @else
                        <span>--</span>
                    @endif
                </div>
                <div class="position-relative">
                    <div class="speech-bubble badge">${{ $numList['level']['sale_amount'] }}</div>
                    <div class="progress rounded-5 mt-8" style="background:#D9D9D9;">
                        {{-- bg-teal --}}
                        <div class="progress-bar rounded-5" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: {{ $numList['level']['percent'] }}%;background:#259c8c;"></div>
                    </div>
                </div>
                <span class="text-xs">
                    @if ($numList['level']['diff'] > 0)
                        {{ __('robot.UpgrateAmount', ['price' => $numList['level']['diff']]) }}
                    @else
                        {{ __('robot.GetNextStage') }}
                    @endif
                </span>
            </div>
            <button class="btn btn-warning icon icon-left w-100 d-flex justify-content-center align-items-center" data-bs-toggle="modal" data-bs-target="#modal_share_profile" type="button">
                <i class="icon-qrcode me-2"></i>
                {{ __('basic.ShareProfile') }}
            </button>
        </div>
        <!--
                                                                                <div class="h6 border-bottom mt-6 pb-2">{{ __('member.MyOrder') }}</div>
                                                                                <div class="d-none row row-cols-4 align-items-start border-bottom m-0 mb-4 p-0">
                                                                                    {{-- 已付款 --}}
                                                                                    <a class="nav-link-col py-4 text-center" href="">
                                                                                        <i class="icon-card"></i>
                                                                                        <p class="text-base-m">{{ __('member.Payment') }}</p>
                                                                                    </a>
                                                                                    {{-- 已出貨 --}}
                                                                                    <a class="nav-link-col py-4 text-center" href="">
                                                                                        <i class="icon-truck"></i>
                                                                                        <p class="text-base-m">{{ __('member.Shipping') }}</p>
                                                                                    </a>
                                                                                    {{-- 延遲出貨 --}}
                                                                                    <a class="nav-link-col py-4 text-center" href="">
                                                                                        <i class="icon-box"></i>
                                                                                        <p class="text-base-m">{{ __('member.Pending') }}</p>
                                                                                    </a>
                                                                                    {{-- 訂單評論 --}}
                                                                                    <a class="nav-link-col py-4 text-center" href="">
                                                                                        <i class="icon-star"></i>
                                                                                        <p class="text-base-m">{{ __('member.Comment') }}</p>
                                                                                    </a>
                                                                                </div>
                                                                            -->
        <div class="row row-cols-3 align-items-start m-0 p-0">
            {{-- CLC 回饋金 --}}
            <a class="nav-link-col py-4 px-0 text-center" href="{{ route('coin') }}">
                <i class="icon-money"></i>
                <p class="text-base-m">{{ __('basic.Coin') }}</p>
            </a>
            {{-- 訂單紀錄 --}}
            <a class="nav-link-col py-4 text-center" href="{{ route('orderlist') }}">
                <i class="icon-order"></i>
                <p class="text-base-m">{{ __('basic.Orderlist') }}</p>
            </a>
            {{-- 系統通知 --}}
            <a class="nav-link-col py-4 text-center" href="{{ route('notice') }}">
                <i class="icon-notice"></i>
                <p class="text-base-m">{{ __('basic.Notification') }}</p>
            </a>
            {{-- 願望清單 --}}
            <a class="nav-link-col py-4 text-center" href="{{ route('wishlist') }}">
                <i class="icon-heart"></i>
                <p class="text-base-m">{{ __('basic.Wishlist') }}</p>
            </a>
            {{-- 個人資料 --}}
            <a class="nav-link-col py-4 text-center" href="{{ route('profile') }}">
                <i class="icon-user"></i>
                <p class="text-base-m">{{ __('basic.Profile') }}</p>
            </a>
            {{-- 免費領取 --}}
            <a class="nav-link-col py-4 text-center" href="{{ route('freecardlist') }}">
                <i class='fs-2 bx bx-credit-card-front'></i>
                <p class="text-base-m">{{ __('robot.ReceiveFree') }}</p>
            </a>
            <!--
                                                                            {{-- 賣場管理 --}}
                                                                            <a class="nav-link-col disabled py-4 text-center" href="">
                                                                                <i class="icon-store"></i>
                                                                                <p class="text-base-m">{{ __('basic.StoreManager') }}</p>
                                                                            </a>
                                                                        -->
            {{-- 登出 --}}
            <a class="nav-link-col logout_btn py-4 text-center" href="javascript:void(0);">
                <i class="icon-logout"></i>
                <p class="text-base-m">{{ __('basic.Logout') }}</p>
            </a>
        </div>
    </div>
@endsection