<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
  <title>Mine</title>
  
  <link rel="stylesheet" href="/static/home/layui/css/layui.css"> 
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

 <style>
/* -----------------------------------
   GENERAL RESET
----------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: #f4f7ff;
  color: #333;
  padding-bottom: 50px;
}

/* -----------------------------------
   PAGE HEADING
----------------------------------- */
.products-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  margin: 20px 0;
  position: relative;
}

/* हल्की ऊपर की छाया */
.products-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -6px;
  width: 80px;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  filter: blur(6px);
  border-radius: 50%;
}

/* -----------------------------------
   PROFILE CARD
----------------------------------- */


/* -----------------------------------
   MY SERVICE HEADER
----------------------------------- */
.my-header {
  display: flex;
  align-items: center;
  margin: 25px 15px 10px;
  gap: 10px;
}

.my-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: #03316C;
}

.side-border {
  width: 4px;
  height: 28px;
  background: #0057D9;
  border-radius: 2px;
}

/* -----------------------------------
   GRID MENU
----------------------------------- */

</style>
<style>
.profile-card {
  background: #fff;
  margin: 15px;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Avatar on left */
.profile-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid #0057D9;
}

/* Info on right */
.profile-info {
  flex: 1;
}

.profile-info h3 {
  font-size: 16px;
  font-weight: 700;
  color: #03316C;
  margin-bottom: 6px;
}

.profile-info p {
  font-size: 14px;
  color: #4a4a4a;
}

/* Horizontal Balance Boxes below details */
.balance-container {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.balance-box {
  background: #f0f5ff;
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.balance-box h4 {
  font-size: 16px;
  font-weight: 700;
  color: #03316C;
  margin-bottom: 4px;
}

.balance-box p {
  font-size: 12px;
  color: #4a4a4a;
}
</style>
<style>
.my-list {
  margin: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  padding: 12px 15px;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  text-decoration: none;
  color: #03316C;
  font-weight: 600;
  transition: 0.3s;
}

.list-item i {
  font-size: 20px;
  color: #0057D9;
}

.list-item span {
  flex: 1;
  margin-left: 12px;
  font-size: 15px;
}

.arrow-icon {
  font-size: 14px;
  color: #888;
}

.list-item:hover {
  transform: translateX(3px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

/* Logout special color */
.logout-item {
  background: #ffe6e6;
  color: #ff4747;
}

.logout-item i {
  color: #ff4747;
}
  /* -----------------------------------
   FOOTER MENU
----------------------------------- */
/* Footer Menu */
.footer-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  z-index: 100;
}

.footer-menu a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: #4a4a4a;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: 0.25s;
}

.footer-menu a .icon-box {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.25s;
}

/* Active Tab */
.footer-menu a.active .icon-box {
  background: #03316C; /* Blue background for active */
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.footer-menu a i {
  font-size: 20px;
}

.footer-menu a.active i {
  color: #fff;
}

.footer-menu a span {
  font-size: 12px;
}

.footer-menu a.active span {
  color: #03316C; /* Optional: highlight text if needed */
}

</style>

</head>
<body>

<h2 class="products-heading">Profile</h2>


 <div class="profile-card">
  <img src="victory/67f63c57c6b84c00013d4354_cryptocom-logo-png-transparent-background-1536x1536.png" class="profile-avatar" alt="avatar">
  
  <div class="profile-info">
    <h3>ID : {{ auth()->user()->id }}</h3>
    <p>{{ auth()->user()->phone }}</p>

    <div class="balance-container">
      <div class="balance-box">
        <h4>{{ price(auth()->user()->balance ?? 0) }}</h4>
        <p>Main Balance</p>
      </div>
      <div class="balance-box">
        <h4>{{ price(auth()->user()->recharge_balance ?? 0) }}</h4>
        <p>Recharge</p>
      </div>
    </div>
  </div>
</div>

<div class="my-container"> 
  <div class="my-header">
    <span class="side-border"></span>
    <h2>My Service</h2>
  </div>

  <div class="my-list">
    <a href="/card" class="list-item">
      <i class="fa-solid fa-credit-card"></i>
      <span>Add Bank Card</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    <a href="/ordered" class="list-item">
      <i class="fa-solid fa-clock-rotate-left"></i>
      <span>Products Runing</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="/history" class="list-item">
      <i class="fa-solid fa-clock-rotate-left"></i>
      <span>Balance History</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="/about" class="list-item">
      <i class="fa-solid fa-circle-info"></i>
      <span>Cro Exchange About</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="/change/password" class="list-item">
      <i class="fa-solid fa-key"></i>
      <span> Change Password</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="https://t.me/srt_web_developer" class="list-item">
      <i class="fa-solid fa-headset"></i>
      <span>Service</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="https://t.me/srt_web_developer" class="list-item">
      <i class="fa-solid fa-download"></i>
      <span>App</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
    
    <a href="/logout" class="list-item logout-item">
      <i class="fa-solid fa-right-from-bracket"></i>
      <span>Logout</span>
      <i class="fa-solid fa-chevron-right arrow-icon"></i>
    </a>
  </div>
</div>

 
<!-- Bottom Menu Footer -->
<div class="footer-menu">
  <a href="/dashboard" >
    <div class="icon-box">
      <i class="fa-solid fa-house"></i>
    </div>
    <span>Home</span>
  </a>
  <a href="/product" >
    <div class="icon-box">
      <i class="fa-solid fa-bag-shopping"></i>
    </div>
    <span>Products</span>
  </a>
  <a href="/my-team">
    <div class="icon-box">
      <i class="fa-solid fa-users"></i>
    </div>
    <span>Team</span>
  </a>
  <a href="/my-profile" class="active">
    <div class="icon-box">
      <i class="fa-solid fa-user"></i>
    </div>
    <span>Mine</span>
  </a>
</div>
<!-- Font Awesome CDN --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

</body>
</html>
