<!DOCTYPE html>
<html lang="en">
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"> 
  <title>Team Report </title> 
  
  <!-- External Resources -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.17/css/layui.css">

  <style>
    :root {
      --primary-gradient: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #ff8c00);
      --yellow-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
      --orange-btn: linear-gradient(90deg, #FF8C00, #FF4500);
      --glass: rgba(255, 255, 255, 0.12);
      --glass-border: rgba(255, 255, 255, 0.2);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

    body {
      font-family: 'Poppins', sans-serif;
      background: var(--primary-gradient);
      background-size: 400% 400%;
      animation: gradientBG 15s ease infinite;
      color: #fff;
      min-height: 100vh;
      display: flex;
      justify-content: center;
      padding-bottom: 80px;
    }

    @keyframes gradientBG {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    .app-container {
      width: 92%;
      max-width: 380px;
    }

    /* টপ বার */
    .top-bar { padding: 20px 0; text-align: center; }
    .top-bar h2 { font-size: 18px; font-weight: 600; letter-spacing: 1px; }

    /* ইনভাইট কার্ড */
    .invite-box {
      background: var(--glass);
      backdrop-filter: blur(15px);
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 20px;
      border: 1px solid var(--glass-border);
    }
    .invite-title { font-size: 12px; color: #FFD700; margin-bottom: 15px; font-weight: 500; text-align: center; }
    
    .copy-item {
      background: rgba(0,0,0,0.2);
      border-radius: 12px;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .copy-item span { font-size: 13px; color: #eee; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
    .copy-btn { background: var(--yellow-gradient); color: #222; font-size: 10px; font-weight: 700; padding: 5px 12px; border-radius: 8px; cursor: pointer; }

    /* স্ট্যাটাস গ্রিড */
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }
    .stat-card {
      background: var(--glass);
      padding: 15px 10px;
      border-radius: 15px;
      text-align: center;
      border: 1px solid var(--glass-border);
    }
    .stat-card b { display: block; font-size: 15px; color: #FFD700; margin-bottom: 4px; }
    .stat-card span { font-size: 10px; opacity: 0.8; font-weight: 500; }

    /* ট্যাব ডিজাইন */
    .tab-container { margin-bottom: 15px; }
    .tab-list { display: flex; background: rgba(0,0,0,0.2); border-radius: 12px; padding: 5px; margin-bottom: 10px; }
    .tab-list a { flex: 1; text-align: center; font-size: 11px; padding: 8px; color: #aaa; text-decoration: none; border-radius: 8px; font-weight: 500; }
    .tab-list a.active { background: var(--yellow-gradient); color: #222; }

    /* টেবিল ডিজাইন */
    .table-box {
      background: var(--glass);
      border-radius: 20px;
      padding: 15px;
      border: 1px solid var(--glass-border);
    }
    .table-box table { width: 100%; border-collapse: collapse; }
    .table-box thead td { font-size: 12px; font-weight: 600; color: #FFD700; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .table-box tbody td { font-size: 11px; padding: 12px 0; color: #eee; border-bottom: 1px solid rgba(255,255,255,0.05); }

    /* বটম ন্যাভিগেশন */
    .bottom-nav {
      position: fixed; bottom: 0; left: 0; right: 0;
      background: rgba(15, 32, 39, 0.95);
      backdrop-filter: blur(15px);
      display: flex; justify-content: space-around;
      padding: 12px 0; border-top: 1px solid var(--glass-border);
      z-index: 1000;
    }
    .nav-item { text-decoration: none; color: #888; text-align: center; flex: 1; }
    .nav-item i { font-size: 20px; display: block; margin-bottom: 4px; }
    .nav-item span { font-size: 10px; }
    .nav-item.active { color: #FFD700; }

  </style> 
</head> 
<body> 

<div class="app-container">
  
  <div class="top-bar">
    <h2>Team Management</h2>
  </div>

  <!-- Invite Section -->
  <div class="invite-box">
    <div class="invite-title">Invite friends to earn commission</div>
    <div class="copy-item">
      <span>Code: <b><?php echo e(auth()->user()->ref_id); ?></b></span>
      <div class="copy-btn" onclick="copyText('<?php echo e(auth()->user()->ref_id); ?>')">COPY</div>
    </div>
    <div class="copy-item">
      <span>Link: <?php echo e(route('register', ['inviteCode' => auth()->user()->ref_id])); ?></span>
      <div class="copy-btn" onclick="copyText('<?php echo e(route('register', ['inviteCode' => auth()->user()->ref_id])); ?>')">COPY LINK</div>
    </div>
  </div>

  <!-- Stats Grid -->
  <div class="stats-grid">
    <div class="stat-card">
      <b><?php echo e($team_size); ?></b>
      <span>Team Size</span>
    </div>
    <div class="stat-card">
      <b><?php echo e($totalCommission); ?></b>
      <span>Total Commission</span>
    </div>
    <div class="stat-card">
      <b><?php echo e(price($totalDeposit1)); ?></b>
      <span>Recharge (Month)</span>
    </div>
    <div class="stat-card">
      <b>10%-2%-1%</b>
      <span>Profit Ratio</span>
    </div>
  </div>

  <!-- Tabs Section -->
  <div class="tab-container">
    <div class="tab-list team-tab">
      <a href="javascript:void(0)" class="active" data-tab="active">ACTIVE</a>
      <a href="javascript:void(0)" data-tab="unrecharge">UNRECHARGE</a>
    </div>
    <div class="tab-list record-tab">
      <a href="javascript:void(0)" class="active" data-team="b">Level B</a>
      <a href="javascript:void(0)" data-team="c">Level C</a>
      <a href="javascript:void(0)" data-team="d">Level D</a>
    </div>
  </div>

  <!-- Team List Table -->
  <div class="table-box">
    <table>
      <thead>
        <tr>
          <td>Account</td>
          <td>Referrer</td>
          <td>Income</td>
        </tr>
      </thead>
      <tbody id="team-table">
        
        <?php $__currentLoopData = $first_level_users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
          <tr class="active-member" data-team="b">
            <td><?php echo e($u->phone); ?></td>
            <td><?php echo e(auth()->user()->name); ?></td>
            <td><?php echo e(price($u->total_income ?? 0)); ?></td>
          </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        
        <?php $__currentLoopData = $second_level_users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
          <tr class="active-member" data-team="c">
            <td><?php echo e($u->phone); ?></td>
            <td><?php echo e($u->ref_by_user->name ?? 'N/A'); ?></td>
            <td><?php echo e(price($u->total_income ?? 0)); ?></td>
          </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

        
        <?php $__currentLoopData = $third_level_users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $u): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
          <tr class="active-member" data-team="d">
            <td><?php echo e($u->phone); ?></td>
            <td><?php echo e($u->ref_by_user->name ?? 'N/A'); ?></td>
            <td><?php echo e(price($u->total_income ?? 0)); ?></td>
          </tr>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
      </tbody>
    </table>
  </div>

</div>

<!-- BOTTOM NAV -->
<nav class="bottom-nav">
  <a href="/dashboard" class="nav-item">
    <i class="fa-solid fa-house"></i>
    <span>Home</span>
  </a>
  <a href="/product" class="nav-item">
    <i class="fa-solid fa-layer-group"></i>
    <span>Products</span>
  </a>
  <a href="/my-team" class="nav-item active">
    <i class="fa-solid fa-users"></i>
    <span>Team</span>
  </a>
  <a href="/my-profile" class="nav-item">
    <i class="fa-solid fa-circle-user"></i>
    <span>Profile</span>
  </a>
</nav>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // কপি ফাংশন
  function copyText(text) {
    navigator.clipboard.writeText(text).then(function() {
      alert("Copied: " + text);
    });
  }

  // টেবিল ফিল্টার ফাংশন
  function filterTable(){
    let memberType = $(".team-tab a.active").data("tab"); 
    let teamType = $(".record-tab a.active").data("team"); 

    $("#team-table tr").hide(); 
    $("#team-table tr." + memberType + "-member[data-team='" + teamType + "']").show(); 
  }

  // ট্যাব সুইচিং
  $(".team-tab a, .record-tab a").on("click", function(){
    $(this).addClass("active").siblings().removeClass("active");
    filterTable();
  });

  $(document).ready(function(){
    filterTable();
  });
</script>

</body>
</html><?php /**PATH /home/goldenyi/public_html/resources/views/app/main/team/index.blade.php ENDPATH**/ ?>