@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=>'১০ম লেভেল'];
  $levelLabel = $bnLevels[$level] ?? ('লেভেল '.$level);
@endphp

<div class="level-page">
  <div class="lvl-head">
    <div class="lvl-icon"><i class="fa-solid fa-layer-group"></i></div>
    <div>
      <div class="lvl-sub">{{ auth()->id() === $rootUser->id ? 'আমার নেটওয়ার্ক' : $rootUser->name.' এর নেটওয়ার্ক' }}</div>
      <div class="lvl-title">{{ $levelLabel }} মেম্বার</div>
      <div class="lvl-count">মোট সদস্য: {{ $totalCount }}</div>
    </div>
  </div>

  <form method="GET" action="{{ route('network.level', ['user' => $rootUser->id, 'level' => $level]) }}" class="lvl-filter">
    <select name="status">
      <option value="all" {{ $statusKey === 'all' ? 'selected' : '' }}>সব সদস্য</option>
      <option value="customer" {{ $statusKey === 'customer' ? 'selected' : '' }}>Customer</option>
      <option value="business" {{ $statusKey === 'business' ? 'selected' : '' }}>Business</option>
    </select>
    <input type="text" name="q" value="{{ request('q') }}" placeholder="সার্চ করুন...">
    <button type="submit"><i class="fa-solid fa-magnifying-glass"></i></button>
  </form>

  @if($members->isEmpty())
    <div class="lvl-empty">
      <i class="fa-solid fa-circle-info"></i>
      <div>এই লেভেলে কোনো সদস্য নেই</div>
    </div>
  @else
    <div class="lvl-list">
      @foreach($members as $m)
        @php
          $isActive = (int)$m->is_active === 1;
          $photo = !empty($m->profile_photo) ? asset(ltrim($m->profile_photo, '/')) : asset('images/logo.png');
        @endphp
        <div class="lvl-card">
          <div class="lvl-top">
            <img src="{{ $photo }}" alt="{{ $m->name }}">
            <div class="member-info">
              <div class="name">{{ $m->name }}</div>
              <div class="mobile">{{ $m->mobile ?? $m->email }}</div>
            </div>
            <span class="badge {{ $isActive ? 'active' : 'inactive' }}">{{ $isActive ? 'Business' : 'Customer' }}</span>
          </div>
          <div class="lvl-mid">
            <div><i class="fa-solid fa-id-card"></i> আইডি: {{ $m->referral_code ?? '-' }}</div>
            <div><i class="fa-regular fa-calendar-plus"></i> জয়েন: {{ $m->created_at ? date('d M Y', strtotime($m->created_at)) : '-' }}</div>
          </div>
          <a href="{{ route('network.member', $m->id) }}" class="lvl-btn">বিস্তারিত দেখুন</a>
        </div>
      @endforeach
    </div>
    <div class="pagination-box">{{ $members->appends(request()->except('page'))->links() }}</div>
  @endif
</div>

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

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

.lvl-head { display: flex; gap: 15px; align-items: center; padding: 20px; border-radius: 25px; background: var(--white); box-shadow: 0 10px 20px rgba(0,168,255,0.05); margin-bottom: 20px; }
.lvl-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; }
.lvl-sub { font-size: 12px; color: var(--sky-blue); font-weight: 800; text-transform: uppercase; }
.lvl-title { font-size: 18px; font-weight: 900; color: var(--text-main); }
.lvl-count { font-size: 12px; color: var(--text-sub); font-weight: 700; margin-top: 3px; }

.lvl-filter { display: flex; gap: 10px; padding: 15px; border-radius: 20px; background: var(--white); box-shadow: 0 5px 15px rgba(0,0,0,0.03); margin-bottom: 20px; border: 1px solid var(--soft-blue); }
.lvl-filter select, .lvl-filter input { height: 45px; border: 1px solid var(--soft-blue); border-radius: 12px; background: #f8fafc; padding: 0 15px; font-weight: 700; outline: none; }
.lvl-filter input { flex: 1; }
.lvl-filter button { width: 50px; background: var(--main-gradient); border: none; border-radius: 12px; color: #fff; }

.lvl-card { padding: 18px; border-radius: 20px; background: var(--white); margin-bottom: 12px; border: 1px solid var(--soft-blue); box-shadow: 0 5px 10px rgba(0,0,0,0.02); }
.lvl-top { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.lvl-top img { width: 50px; height: 50px; border-radius: 15px; object-fit: cover; }
.name { font-size: 15px; font-weight: 900; color: var(--text-main); }
.mobile { font-size: 12px; color: var(--text-sub); font-weight: 700; }
.badge { font-size: 10px; padding: 4px 10px; border-radius: 8px; font-weight: 800; }
.badge.active { background: #dcfce7; color: #16a34a; }
.badge.inactive { background: #f1f5f9; color: #64748b; }

.lvl-mid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; color: var(--text-sub); font-weight: 700; margin-bottom: 15px; }
.lvl-mid i { color: var(--sky-blue); margin-right: 5px; }
.lvl-btn { display: block; text-align: center; padding: 12px; border-radius: 12px; background: var(--soft-blue); color: var(--sky-blue); font-size: 13px; font-weight: 900; text-decoration: none; }
.lvl-btn:hover { background: var(--sky-blue); color: #fff; }

.lvl-empty { text-align: center; padding: 40px; color: var(--text-sub); font-weight: 800; }
</style>

@endsection