@extends('layout.user')

@section('title', $selectedLabel . ' হিস্টোরি')

@section('content')
@php
  $formattedAmount = number_format((float) $welcomeOfferAmount, 2);
  $themeFrom = (string) ($settings->icon_color ?? '#0B5D1E');
  $themeTo = (string) ($settings->hover_color ?? '#0F7A2E');
@endphp

<style>
  .woh-shell{
    --woh-pri: {{ $themeFrom }};
    --woh-pri-2: {{ $themeTo }};
    --woh-soft: color-mix(in srgb, var(--woh-pri) 10%, white);
    --woh-soft-2: color-mix(in srgb, var(--woh-pri-2) 12%, white);
    --woh-ring: color-mix(in srgb, var(--woh-pri) 20%, white);
    --woh-ring-strong: color-mix(in srgb, var(--woh-pri) 36%, white);
    --woh-text-soft: color-mix(in srgb, var(--woh-pri) 45%, #0f172a);
    --woh-shadow: color-mix(in srgb, var(--woh-pri) 12%, transparent);
  }
  .woh-shell{max-width:1100px;margin:0 auto;padding:8px 4px 96px}
  .woh-stack{display:grid;gap:16px}
  .woh-top{
    background:#fff;
    border:1px solid var(--woh-ring);
    border-radius:26px;
    padding:18px;
    box-shadow:0 18px 36px var(--woh-shadow);
  }
  .woh-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
  .woh-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 14px;
    border-radius:16px;
    background:linear-gradient(135deg, var(--woh-soft) 0%, var(--woh-soft-2) 100%);
    color:var(--woh-text-soft) !important;
    border:1px solid var(--woh-ring);
    font-weight:900;
    font-size:13px;
  }
  .woh-reward{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 14px;
    border-radius:16px;
    background:linear-gradient(135deg, var(--woh-pri), var(--woh-pri-2));
    color:#fff;
    font-weight:900;
    font-size:13px;
  }
  .woh-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:16px;margin-top:16px;align-items:start}
  .woh-title{margin:0;font-size:28px;font-weight:900;color:#0f172a}
  .woh-copy{margin:8px 0 0;font-size:14px;line-height:1.7;font-weight:700;color:#475569}
  .woh-tabs{display:grid;gap:10px}
  .woh-tab{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 15px;
    border-radius:18px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
  }
  .woh-tab.active{
    border-color:var(--woh-ring-strong);
    background:linear-gradient(135deg, var(--woh-soft) 0%, var(--woh-soft-2) 100%);
    box-shadow:inset 0 0 0 1px var(--woh-ring);
  }
  .woh-tab-title{font-size:14px;font-weight:900;color:#0f172a}
  .woh-tab-sub{margin-top:4px;font-size:12px;font-weight:700;color:#64748b}
  .woh-tab-badge{
    min-width:54px;
    padding:8px 12px;
    text-align:center;
    border-radius:999px;
    background:#fff;
    border:1px solid #cbd5e1;
    font-size:13px;
    font-weight:900;
    color:#0f172a;
  }
  .woh-search{
    background:#fff;
    border:1px solid var(--woh-ring);
    border-radius:22px;
    padding:16px;
    box-shadow:0 16px 28px rgba(15,23,42,.04);
  }
  .woh-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px}
  .woh-input{
    width:100%;
    min-width:0;
    border:1px solid #cbd5e1;
    border-radius:16px;
    padding:13px 14px;
    font-size:14px;
    font-weight:700;
    color:#0f172a;
    background:#fff;
  }
  .woh-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:16px;
    padding:13px 16px;
    font-size:13px;
    font-weight:900;
    border:1px solid transparent;
  }
  .woh-btn-primary{background:linear-gradient(135deg,var(--woh-pri),var(--woh-pri-2));color:#fff !important}
  .woh-btn-secondary{background:#f8fafc;color:#334155 !important;border-color:#cbd5e1}
  .wo-table-shell{
    overflow:auto;
    border-radius:24px;
    border:1px solid var(--woh-ring);
    background:#fff;
    box-shadow:0 20px 36px rgba(15,23,42,.05);
  }
  .wo-table{
    width:100%;
    min-width:980px;
    border-collapse:separate;
    border-spacing:0;
  }
  .wo-table thead th{
    position:sticky;
    top:0;
    z-index:1;
    padding:14px 14px;
    background:linear-gradient(180deg, var(--woh-soft) 0%, #ffffff 100%);
    color:var(--woh-text-soft);
    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    border-bottom:1px solid var(--woh-ring);
    text-align:left;
    white-space:nowrap;
  }
  .wo-table tbody td{
    padding:14px;
    border-bottom:1px solid #e2e8f0;
    vertical-align:top;
    color:#0f172a;
    background:#fff;
  }
  .wo-table tbody tr:hover td{background:color-mix(in srgb, var(--woh-pri) 4%, white)}
  .wo-cell-main{font-size:14px;font-weight:800;color:#0f172a;line-height:1.5}
  .wo-cell-sub{margin-top:4px;font-size:12px;font-weight:700;color:#64748b;line-height:1.5}
  .wo-empty{
    padding:20px !important;
    text-align:center;
    font-size:14px;
    font-weight:800;
    color:#64748b !important;
  }
  @media (max-width:860px){
    .woh-grid{grid-template-columns:1fr}
  }
  @media (max-width:620px){
    .woh-shell{padding-bottom:92px}
    .woh-title{font-size:23px}
    .woh-search-row{grid-template-columns:1fr}
  }
</style>

<div class="woh-shell">
  <div class="woh-stack">
    <section class="woh-top">
      <div class="woh-actions">
        <a href="{{ route('welcome-offer.index') }}" class="woh-back">
          <i class="fa-solid fa-arrow-left"></i>
          <span>Welcome Offer এ ফিরে যান</span>
        </a>
        <div class="woh-reward">
          <i class="fa-solid fa-sack-dollar"></i>
          <span>Reward: ৳{{ $formattedAmount }}</span>
        </div>
      </div>

      <div class="woh-grid">
        <div>
          <h1 class="woh-title">{{ $selectedLabel }} verified member history</h1>
          <p class="woh-copy">
            এখানে শুধু verified member count দেখানো হচ্ছে। Current count <b>{{ $selectedCount }}</b> / target <b>{{ $selectedTarget }}</b>।
            এই level-এর counted member, referral code, mobile, verify time এবং source table আকারে থাকবে।
          </p>
        </div>

        <div class="woh-tabs">
          @foreach($levelCards as $card)
            <a href="{{ route('welcome-offer.history', ['level' => $card['level']]) }}"
               class="woh-tab {{ $selectedLevel === $card['level'] ? 'active' : '' }}">
              <div>
                <div class="woh-tab-title">{{ $card['label'] }}</div>
                <div class="woh-tab-sub">Target {{ $card['target'] }} verified member</div>
              </div>
              <div class="woh-tab-badge">{{ $card['count'] }}</div>
            </a>
          @endforeach
        </div>
      </div>
    </section>

    <section class="woh-search">
      <form method="GET" action="{{ route('welcome-offer.history', ['level' => $selectedLevel]) }}" class="woh-search-row">
        <input type="text"
               name="search"
               value="{{ $search }}"
               class="woh-input"
               placeholder="মেম্বারের নাম, রেফার কোড বা মোবাইল দিয়ে সার্চ করুন">
        <button type="submit" class="woh-btn woh-btn-primary">
          <i class="fa-solid fa-magnifying-glass"></i>
          <span>সার্চ</span>
        </button>
        <a href="{{ route('welcome-offer.history', ['level' => $selectedLevel]) }}" class="woh-btn woh-btn-secondary">
          <i class="fa-solid fa-rotate-left"></i>
          <span>রিসেট</span>
        </a>
      </form>
    </section>

    @include('user.welcome_offer._members_table', ['members' => $members])
  </div>
</div>
@endsection
