<html>
 <head> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <title>Personal Center</title> 
  <link rel="stylesheet" href="/mamber/layui.css"> 
  <link rel="stylesheet" href="/mamber/common.css"> 
  <link rel="stylesheet" href="/mamber/iconfont.css">
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.5.7/css/layui.min.css">-->
  <style>
        .setting_nav_item {
    display: block;
    padding: 10px;
    color: #053c8f;
    font-weight: bold;
    text-decoration: none;
}

</style> 
 </head> 
 <body style="background-image: url(/mamber/img/i1.png);background-size: 100%;background-repeat: no-repeat;"> 
  <!--<div id="user_dialog"> 
   <div style="background: #053c8f;height: 120px;"> 
    <div class="info_card flex_space" style="padding: 30px 15px"> 
     <div class="flex_left"> 
      <div class="username"> 
       <p href="javascript:;" class="nickname" style="color: #FFFFFf"> New User </p> 
       <p class="account" style="color: #ffffff"> 
        <!--                        (513895)-- 90******68 </p> 
      </div> 
     </div> 
    </div> 
   </div> 
   <div style="padding: 15px;"> 
    <a href="/setting" class="setting_nav_item flex_left"> <img src="/mamber/img/setting.png"> 
     <div class="setting_nav_item_right flex_space"> 
      <div class="setting_nav_item_title">
       User Information
      </div> 
      <i class="layui-icon layui-icon-right"></i> 
     </div> </a> 
    <a href="/loginPassword" class="setting_nav_item flex_left"> <img src="/mamber/img/password.png"> 
     <div class="setting_nav_item_right flex_space"> 
      <div class="setting_nav_item_title">
       Enter Password
      </div> 
      <i class="layui-icon layui-icon-right"></i> 
     </div> </a> 
    <!--<a href="/tradePassword" class="setting_nav_item flex_left">--> 
    <!--    <img src="/mamber/img/trade_password.png">--> 
    <!--    <div class="setting_nav_item_right flex_space">--> 
    <!--        <div class="setting_nav_item_title">Transaction Password</div>--> 
    <!--        <i class="layui-icon layui-icon-right"></i>--> 
    <!--    </div>--> 
    <!--</a>--
    <a href="/logout" class="layui-btn layui-btn-fluid" style="margin-top:30px;font-weight:700;background: #053c8f;box-shadow: 0px 4px 16px 0px rgba(103,173,79,0.251);border-radius: 100px"> Exit </a> 
   </div> 
  </div>-->
  <!-- Put this at the bottom of the page -->
<div id="user_dialog" style="display:none;">
    <div style="background: #053c8f; height: 120px; color: white; padding: 30px 15px;">
        <div class="username">
            <p class="nickname">New User</p>
            <p class="account">90******68</p>
        </div>
    </div>
    <div style="padding: 15px;">
        <a href="/setting" class="setting_nav_item">User Info</a><br>
        <a href="/loginPassword" class="setting_nav_item">Change Password</a><br>
        <a href="/logout" class="layui-btn layui-btn-fluid" style="margin-top:20px;">Logout</a>
    </div>
</div>

  <div class="user_header" style="text-align: center;margin-top: 50px;"> 
   <div class="info_card setting"> 
    <div style="display:flex;"> 
     <div>
      <img src="/mamber/img/avatar.png" class="avatar" style="width: 50px;height: 50px">
     </div> 
     <div class="username"> 
      <p href="/info" class="nickname" style="text-align: left;color:#fff;font-size:22px;font-weight:700;"> New User </p> 
      <p class="account" style="text-align: left;font-weight: 700;color:#fff;opacity:0.8;"> {{substr(auth()->user()->phone, 0, 3)}}******{{substr(strrev(auth()->user()->phone), 0, 2)}} ({{user()->ref_id}}) <img src="/mamber/img/copy.png" style="width: 20px;height: 20px;display: inline"> </p> 
     </div> 
    </div> 
   </div>
      @php
    $vipLevel = auth()->user()->vip_level ?? 0;
    $totalInvestment = \App\Models\Purchase::where('user_id', auth()->id())->sum('amount');

    $vipTargets = [
        1 => 500,
        2 => 1000,
        3 => 2000,
        4 => 4000,
        5 => 8000,
        6 => 16000,
        7 => 32000,
        8 => 64000,
        9 => 128000,
        10 => 256000,
    ];

    $nextVipLevel = $vipLevel < 10 ? $vipLevel + 1 : 10;
    $nextTarget = $vipTargets[$nextVipLevel] ?? $totalInvestment;

    $progressPercent = $nextTarget > 0 ? min(100, ($totalInvestment / $nextTarget) * 100) : 0;
@endphp
   <div class="layui-row user_nav" style="padding-top: 10px;margin: 20px 0;background: #ffffff;border-radius: 8px"> 
    <div class="layui-col-xs12 flex_left" style="font-weight:700;align-items:center;"> 
     <img src="{{ asset('mamber/img/lv' . $vipLevel . '.svg') }}" style="height:50px;margin:0px 10px;"> 
     <div class="layui-progress" lay-showpercent="false" lay-filter="demo-filter-progress" style="width: 90%;height: 10px;margin-top: 5px;margin-bottom: 10px"> 
      <div class="layui-progress-bar" lay-percent="0 / 340.00" style="width: 0%; height: 10px; background: rgb(255, 207, 139);"></div> 
     </div> 
    </div> 
    <div> 
     <p class="balance_label" style="padding-left: 20px;line-height:22px;margin-top: 0px;text-align:left;font-size:14px;">Account Balance</p> 
     <p class="balance_value" style="padding-left: 20px;color:#d2aa69;text-align:left;font-size:26px;padding-top:3px;"> {{price(user()->balance)}}</p> 
    </div> 
    <div style="display:flex;padding-top:15px;"> 
     <div> 
      <p class="balance_label" style="padding-left: 20px;line-height:22px;margin-top: 0px;text-align:left;font-size:14px;">Deposit Balance</p> 
      <p class="balance_value" style="padding-left: 20px;color:#000;text-align:left;font-size:14px;padding-top:3px;"> {{ price(\App\Models\Deposit::where('user_id', user()->id)->sum('amount')) }} </p> 
     </div> 
     <div> 
      <p class="balance_label" style="padding-left: 20px;line-height:22px;margin-top: 0px;text-align:left;font-size:14px;">Withdrawal Balance</p> 
      <p class="balance_value" style="padding-left: 20px;color:#000;text-align:left;font-size:14px;padding-top:3px;">{{ price(\App\Models\Withdrawal::where('user_id', user()->id)->sum('amount')) }} </p> 
     </div> 
    </div> 
   </div> 
   <div class="layui-row user_nav" style="padding-top: 10px;margin: 20px 0;background: #ffffff;border-radius: 8px;color:#fff;display:flex;justify-content: space-between;"> 
    <a href="/deposi" class=" user_nav_item" style="background:#053c8f;width:46%;padding:15px 0px;clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);"> 
     <!--<img src="/mamber/img/recharge.png" alt="Deposit">--> <p style="font-size:20px;color:#fff;font-weight:bold;margin-top:0px;">Deposit</p> <p style="font-size:16px;color:#fff;opacity:0.5;">{{ price(\App\Models\Deposit::where('user_id', user()->id)->sum('amount')) }}</p> </a> 
    <a href="/withdraw" class=" user_nav_item" style="text-align: center;background:#d2aa69;width:46%;padding:15px 0px;clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%);"> 
     <!--<img src="/mamber/img/withdraw.png" alt="Withdraw">--> <p style="font-size:20px;color:#fff;font-weight:bold;margin-top:0px;">Interesting</p> <p style="font-size:16px;color:#fff;opacity:0.5;">{{ price(\App\Models\Withdrawal::where('user_id', user()->id)->sum('amount')) }}</p> </a> 
   </div> 
   <!--<div class="layui-row user_nav" style="padding-top: 10px;margin: 20px 0;background: #ffffff;border-radius: 8px">--> 
   <!--    <div class="layui-col-xs12 flex_left" style="font-weight:700;">--> 
   <!--        <p class="balance_label" style="padding-left: 20px;line-height:22px;margin-top: 0px">My Balance:</p>--> 
   <!--        <p class="balance_value" style="color:#d2aa69;text-align:right;">₱0</p>--> 
   <!--    </div>--> 
   <!--</div>--> 
   <div class="layui-row user_nav" style="padding-top: 10px;margin: 20px 0;background: #ffffff;border-radius: 8px"> 
    <a href="/ordered"> 
     <div style="display:flex;align-items:center;justify-content:space-between;"> 
      <div style="width:80%;display:flex;align-items:center;"> 
       <div style="padding:5px 10px;border-radius:15px;"> 
        <!--<i class="layui-icon layui-icon-test" style="font-size: 40px;background: linear-gradient(304deg, #eeeeee 3.03%, #f0f0f0 27.62%, #ffffff 76.39%, #f0f0f0 112.44%);border-radius:15px;color:#2a415c;"></i> --> 
        <img src="/mamber/img/rewards.png" class="nav_image" style="height:35px;"> 
       </div> 
       <div style="font-size:14px;font-weight:bold;color:#2a415c;">
         My Order 
       </div> 
      </div> 
      <div style="font-size:14px;font-weight:bold;color:#2a415c;padding-right:15px;opacity:0.5;">
        &gt; 
      </div> 
     </div> </a> 
    <a href="/add-bank"> 
     <div style="display:flex;align-items:center;justify-content:space-between;"> 
      <div style="width:80%;display:flex;align-items:center;"> 
       <div style="padding:5px 10px;border-radius:15px;"> 
        <!--<i class="layui-icon layui-icon-email" style="font-size: 40px;background: linear-gradient(304deg, #eeeeee 3.03%, #f0f0f0 27.62%, #ffffff 76.39%, #f0f0f0 112.44%);border-radius:15px;color:#2a415c;"></i> --> 
        <img src="/mamber/img/balance.png" class="nav_image" style="height:35px;"> 
       </div> 
       <div style="font-size:14px;font-weight:bold;color:#2a415c;">
         Fund notes 
       </div> 
      </div> 
      <div style="font-size:14px;font-weight:bold;color:#2a415c;padding-right:15px;opacity:0.5;">
        &gt; 
      </div> 
     </div> </a> 
   </div> 
   <!--<div class="layui-row user_nav" style="padding-top: 10px;margin: 20px 0;background: #ffffff;border-radius: 8px">--> 
   <!--    <a href="/deposi" class="layui-col-xs3 layui-col-md3 user_nav_item">--> 
   <!--        <img src="/mamber/img/recharge.png" alt="Deposit">--> 
   <!--        <p>Deposit</p>--> 
   <!--    </a>--> 
   <!--    <a href="/withdraw" class="layui-col-xs3 layui-col-md3 user_nav_item" style="text-align: center">--> 
   <!--        <img src="/mamber/img/withdraw.png" alt="Withdraw">--> 
   <!--        <p>Withdraw</p>--> 
   <!--    </a>--> 
   <!--    <a href="/orderLists" class="layui-col-xs3 layui-col-md3 user_nav_item" style="text-align: center">--> 
   <!--        <img src="/mamber/img/order.png" alt="Orders">--> 
   <!--        <p>Orders</p>--> 
   <!--    </a>--> 
   <!--    <a href="/cardBag" class="layui-col-xs3 layui-col-md3 user_nav_item">--> 
   <!--        <img src="/mamber/img/bank_card.png" alt="Card Wallet">--> 
   <!--        <p>Card Wallet</p>--> 
   <!--    </a>--> 
   <!--</div>--> 
   <!--<div class="user_card">--> 
   <!--    <div class="user_vip_card flex_space" style="height: 100px;background:#e1be87;">--> 
   <!--        <div style="width: 100%">--> 
   <!--            <div class="flex_left">--> 
   <!--                <p class="user_my_vip">VIP 0</p>--> 
   <!--            </div>--> 
   <!--            <p class="next_vip_text">Upgrade now to <strong>VIP1</strong>, remaining <strong>340</strong></p>--> 
   <!--            <div class="layui-progress" lay-showpercent="false" lay-filter="demo-filter-progress" style="width: 90%;height: 10px;margin-top: 5px;margin-bottom: 10px">--> 
   <!--                <div class="layui-progress-bar" lay-percent="0 / 340.00" style="width:80%;height: 10px;background: #FFCF8B;"></div>--> 
   <!--            </div>--> 
   <!--            <a href="/vip" style="display:block;color:#fff;font-weight:700;text-align: left;margin-top: 10px">How to upgrade to VIP</a>--> 
   <!--        </div>--> 
   <!--        <img src="/public/site/img/vip/lv0.png" style="width: 70px;height:70px;">--> 
   <!--    </div>--> 
   <!--</div>--> 
   <div class="user_card"> 
    <p class="nav_title">My Profile</p> 
    <!-- Profil Saya --> 
    <div class="layui-row user_nav" style="padding-top: 10px"> 
     <a href="/myTeam" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/team.png" class="nav_image"> <p>Team</p> 
      <!-- Tim --> </a> 
     <a href="/history" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/balance.png" class="nav_image"> <p>Balance</p> 
      <!-- Saldo --> </a> 
     <a href="/get-bonus" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/rewards.png" class="nav_image"> <p>Rewards</p> 
      <!-- Hadiah --> </a> 
     <!--<a href="/public/uploads/app/app.apk" class="layui-col-xs3 layui-col-md3 user_nav_item">--> 
     <!--    <img src="/public/site/img/index/app.jpg" class="nav_image">--> 
     <!--    <p>App</p> --> 
     <!--</a>--> 
    </div> 
   </div>
   <div class="user_card"> 
    <p class="nav_title">More Options</p> 
    <!-- Opsi Lainnya -->
    <div class="layui-row user_nav" style="padding-top: 10px"> 
     <a href="/vip" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/vip.png" class="nav_image"> <p>VIP</p> </a> 
     <a href="/help" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/help.png" class="nav_image"> <p>Help</p> 
      <!-- Bantuan -- </a> 
     <a href="javascript:;" class="layui-col-xs3 layui-col-md3 user_nav_item setting"> <img src="/mamber/img/setting.png" class="nav_image"> <p>Settings</p> 
      <!-- Pengaturan -- </a> -->
      <a href="/logout" class="layui-col-xs3 layui-col-md3 user_nav_item setting">
    <img src="/mamber/img/setting.png" class="nav_image">
    <p>logout</p>
</a>

     <a href="https://t.me/+OamnjpaO1iZDY1" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/telegram.png" class="nav_image"> <p>Telegram</p> </a> 
    </div> 
    <div class="layui-row user_nav" style="padding-top: 10px; margin-bottom: 80px;"> 
    </div>
   </div> 
  </div>
  </div>
  </div> 
   </div> 
  </div>
  </div>
  <div class="user_card"> 
    <!--<p class="nav_title">More Options</p> 
    <!-- Opsi Lainnya --
    <div class="layui-row user_nav" style="padding-top: 10px"> 
     <a href="/vip" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/vip.png" class="nav_image"> <p>VIP</p> </a> 
     <a href="/help" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/help.png" class="nav_image"> <p>Help</p> 
      <!-- Bantuan -- </a> 
     <a href="javascript:;" class="layui-col-xs3 layui-col-md3 user_nav_item setting"> <img src="/mamber/img/setting.png" class="nav_image"> <p>Settings</p> 
      <!-- Pengaturan -- </a> --
      <a href="javascript:;" class="layui-col-xs3 layui-col-md3 user_nav_item setting">
    <img src="/mamber/img/setting.png" class="nav_image">
    <p>Settings</p>--
</a>

     <a href="https://t.me/+OamnjpaO1iZDY1" class="layui-col-xs3 layui-col-md3 user_nav_item"> <img src="/mamber/img/telegram.png" class="nav_image"> <p>Telegram</p> </a> -->
    </div> 
    <div class="layui-row user_nav" style="padding-top: 10px; margin-bottom: 80px;"> 
    </div> -->
   </div> 
  </div>
  </div>
  </div> 
   </div> 
  </div>
  </div>
  <!--	底部内容-开始	  --> 
  <div class="footer_menu"> 
   <div class="content"> 
    <a href="/" class="item "> <img src="/mamber/img/logo.svg"> <p>About</p> </a> 
    <a href="/invest" class="item "> <img src="/mamber/img/INCEST.svg"> <p>Investments</p> </a> 
    <a href="/club" class="item "> <img src="/mamber/img/clbu.jpg" style="width:28px;"> <p>Club</p> </a> 
    <a href="/myTeam" class="item "> <img src="/mamber/img/GIFTBOS.svg"> <p>Welfare</p> </a> 
    <a href="/account" class="item active"> <img src="/mamber/img/Account.svg"> <p>Account</p> </a> 
   </div> 
  </div> 
  <!--	底部内容-结束	  --> 
  <!-- body 末尾处引入 layui --> 
  <script>
layui.use(['jquery', 'layer'], function(){
    var $ = layui.jquery;
    var layer = layui.layer;

    // Click handler for Settings button
    $('.setting').off('click').on('click', function () {
        console.log("Settings clicked");
        layer.open({
            type: 1,
            title: false,
            closeBtn: true,
            offset: 'l', // slide from left
            anim: 5,
            area: ['260px', '100%'],
            shade: 0.5,
            shadeClose: true,
            id: 'product_details_dialog',
            content: $('#user_dialog')
        });
    });
});
</script>

 </body>
</html>