@extends('user.layout')

@section('title','আমার নেটওয়ার্ক')

@section('content')

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

@php
  $bnLevels = [
    1=>'১ম লেভেল',2=>'২য় লেভেল',3=>'৩য় লেভেল',4=>'৪র্থ লেভেল',5=>'৫ম লেভেল',
    6=>'৬ষ্ঠ লেভেল',7=>'৭ম লেভেল',8=>'৮ম লেভেল',9=>'৯ম লেভেল',10=>'১০ম লেভেল',
  ];

  $totalAll = max(1, (int)($summary['total'] ?? 0));
  $customerPercent = ($summary['customer'] ?? 0) > 0 ? round(($summary['customer'] / $totalAll) * 100) : 0;
  $businessPercent = ($summary['business'] ?? 0) > 0 ? round(($summary['business'] / $totalAll) * 100) : 0;
@endphp

<div class="network-page">

  <div class="net-head">
    <div class="net-icon">
      <i class="fa-solid fa-sitemap"></i>
    </div>
    <div>
      <div class="net-sub">{{ auth()->id()===$rootUser->id ? 'আমার নেটওয়ার্ক' : $rootUser->name.' এর নেটওয়ার্ক' }}</div>
      <div class="net-title">১০ লেভেল টিম রিপোর্ট</div>
    </div>
  </div>

  <div class="net-summary">
    <a href="{{ route('network.all',['user'=>$rootUser->id,'status'=>'all']) }}" class="sum-box">
      <div class="sum-icon"><i class="fa-solid fa-users"></i></div>
      <div class="num">{{ $summary['total'] ?? 0 }}</div>
      <div class="txt">Total</div>
    </a>
    <a href="{{ route('network.all',['user'=>$rootUser->id,'status'=>'customer']) }}" class="sum-box">
      <div class="sum-icon"><i class="fa-solid fa-user-check"></i></div>
      <div class="num">{{ $summary['customer'] ?? 0 }}</div>
      <div class="txt">Customer</div>
      <small>{{ $customerPercent }}%</small>
    </a>
    <a href="{{ route('network.all',['user'=>$rootUser->id,'status'=>'business']) }}" class="sum-box">
      <div class="sum-icon"><i class="fa-solid fa-briefcase"></i></div>
      <div class="num">{{ $summary['business'] ?? 0 }}</div>
      <div class="txt">Business</div>
      <small>{{ $businessPercent }}%</small>
    </a>
  </div>

  <div class="net-grid">
    @foreach($levels as $levelData)
      @php
        $lvl = $levelData['level'];
        $total = $levelData['total'];
        $customer = $levelData['customer'];
        $business = $levelData['business'];
        $progress = $total > 0 ? round(($total / $totalAll) * 100) : 0;
      @endphp
      <a href="{{ route('network.level',['user'=>$rootUser->id,'level'=>$lvl]) }}" class="net-card">
        <div class="top">
          <span>{{ $bnLevels[$lvl] }}</span>
          <b>{{ $total }}</b>
        </div>
        <div class="mid">
          <div><i class="fa-solid fa-user"></i> {{ $customer }}</div>
          <div><i class="fa-solid fa-briefcase"></i> {{ $business }}</div>
        </div>
        <div class="bar"><i style="width:{{ $progress }}%"></i></div>
        <div class="bottom">{{ $progress }}% অগ্রগতি</div>
      </a>
    @endforeach
  </div>
</div>

<style>
:root{
  --sky-blue: #00a8ff;
  --soft-blue: #e0f2fe;
  --main-gradient: linear-gradient(135deg, #00a8ff, #007bff);
  --bg: #f0f7ff;
  --text-main: #0c4a6e;
  --text-sub: #334155;
  --white: #ffffff;
}

.network-page{ background: var(--bg); min-height: 100vh; padding: 20px 15px 100px; font-family: sans-serif; }

.net-head{ display: flex; align-items: center; gap: 15px; padding: 20px; border-radius: 25px; background: var(--white); box-shadow: 0 10px 25px rgba(0,168,255,0.1); margin-bottom: 20px; }
.net-icon{ width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--main-gradient); color: #fff; font-size: 22px; }
.net-sub{ font-size: 13px; color: var(--sky-blue); font-weight: 800; text-transform: uppercase; }
.net-title{ font-size: 18px; font-weight: 900; color: var(--text-main); }

.net-summary{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.sum-box{ background: var(--white); border-radius: 20px; padding: 15px 10px; text-align: center; text-decoration: none; box-shadow: 0 8px 15px rgba(0,0,0,0.03); border: 1px solid var(--soft-blue); }
.sum-icon{ width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 12px; background: var(--soft-blue); color: var(--sky-blue); display: flex; align-items: center; justify-content: center; }
.sum-box .num{ font-size: 20px; font-weight: 900; color: var(--text-main); }
.sum-box .txt{ font-size: 11px; color: var(--text-sub); font-weight: 700; margin-top: 2px; }
.sum-box small{ display: block; font-size: 10px; color: var(--sky-blue); font-weight: 800; margin-top: 3px; }

.net-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.net-card{ background: var(--white); border-radius: 20px; padding: 16px; text-decoration: none; box-shadow: 0 5px 15px rgba(0,0,0,0.03); border: 1px solid var(--soft-blue); transition: 0.3s; }
.net-card:hover{ transform: translateY(-5px); border-color: var(--sky-blue); }
.net-card .top{ display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: var(--text-sub); }
.net-card .top b{ color: var(--sky-blue); font-size: 18px; }
.net-card .mid{ display: flex; justify-content: space-between; margin-top: 10px; font-size: 11px; color: var(--text-sub); font-weight: 700; }
.net-card .mid i{ color: var(--sky-blue); margin-right: 5px; }
.bar{ height: 6px; background: #e0f2fe; border-radius: 10px; margin-top: 12px; overflow: hidden; }
.bar i{ display: block; height: 100%; background: var(--main-gradient); border-radius: 10px; }
.bottom{ font-size: 10px; color: var(--sky-blue); margin-top: 6px; text-align: right; font-weight: 800; }
</style>

@endsection