@extends('layout.user')

@section('content')

@push('styles')
<!-- বাংলা ফন্ট -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;700&display=swap" rel="stylesheet">
<style>
  .bangla { font-family: 'Noto Sans Bengali', sans-serif; }
  /* নরম এন্ট্রি অ্যানিমেশন */
  @keyframes softIn { from {opacity:.0; transform: translateY(8px)} to {opacity:1; transform: translateY(0)} }
  .soft-in { animation: softIn .35s ease-out both; }
</style>
@endpush

@php
  // ১২-রেফার টার্গেট
  $TARGET = 12;
  $cycleDone = $activeReferralsCount % $TARGET;
  $need = $TARGET - $cycleDone;
  $progress = min(100, round(($cycleDone / $TARGET) * 100, 2));
@endphp

<section class="bangla min-h-screen py-6 px-3 sm:px-4 bg-gray-100">

  <!-- হেডার কার্ড -->
  <div class="max-w-2xl mx-auto soft-in">
    <div class="relative overflow-hidden rounded-2xl shadow-xl border border-gray-200">

      <!-- উপরের গ্রেডিয়েন্ট হেড -->
      <div class="bg-gradient-to-r from-emerald-700 via-emerald-600 to-emerald-500 text-white px-5 py-5">
        <div class="flex items-center gap-3">
          <span class="inline-flex items-center justify-center w-11 h-11 bg-white/15 rounded-xl">
            <i class="fa-solid fa-chess-king text-white text-xl"></i>
          </span>
          <div>
            <h1 class="text-xl sm:text-2xl font-extrabold">Visionary Captain Leadership</h1>
            <p class="text-white/90 text-sm font-medium mt-0.5">
              নিজের রেফার কোডে <strong class="font-bold">১২</strong> টি একাউন্ট ভেরিফাই করান
            </p>
          </div>
        </div>
      </div>

      <!-- বডি -->
      <div class="bg-white px-5 py-5">

        <!-- টার্গেট ইনফো -->
        <div class="grid grid-cols-2 gap-3">
          <div class="rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-gray-700 text-xs font-semibold mb-1">আপনার এচিভ</div>
            <div class="text-2xl font-extrabold text-gray-900">{{ $cycleDone }}</div>
          </div>
          <div class="rounded-xl border border-gray-200 p-4 text-center">
            <div class="text-gray-700 text-xs font-semibold mb-1">আরও লাগবে</div>
            <div class="text-2xl font-extrabold text-gray-900">{{ $need === $TARGET ? $TARGET : $need }}</div>
          </div>
        </div>

        <!-- প্রগ্রেস -->
        <div class="mt-4">
          <div class="flex items-center justify-between text-xs text-gray-700 font-semibold mb-1">
            <span>অগ্রগতি</span>
            <span>{{ number_format($progress,2) }}%</span>
          </div>
          <div class="w-full h-3 rounded-full bg-gray-200 overflow-hidden">
            <div class="h-3 bg-gradient-to-r from-emerald-600 to-emerald-500 rounded-full transition-all"
                 style="width: {{ $progress }}%"></div>
          </div>
          <div class="mt-2 text-[13px] text-gray-600">
            টার্গেট: <strong class="text-gray-900">{{ $TARGET }}</strong> রেফার (এই সাইকেল)
          </div>
        </div>

        <!-- নোটিশ/বর্ণনা -->
        <div class="mt-5 grid gap-3 sm:grid-cols-2">
          <div class="rounded-xl border border-gray-200 p-4">
            <div class="flex items-center gap-2 text-gray-900 font-extrabold mb-1">
              <i class="fa-solid fa-bullseye"></i>
              <span>লক্ষ্য</span>
            </div>
            <p class="text-sm text-gray-700 leading-relaxed">
              আপনার রেফার কোড ব্যবহার করে <strong>১২</strong> টি একাউন্ট ভেরিফাই করান। এতে ১২ জনের কর্মসংস্থানের সুযোগ তৈরি হবে এবং আপনি হবেন <strong>Visionary Captain Leader</strong>।
            </p>
          </div>
          <div class="rounded-xl border border-gray-200 p-4">
            <div class="flex items-center gap-2 text-gray-900 font-extrabold mb-1">
              <i class="fa-solid fa-gift"></i>
              <span>পুরস্কার</span>
            </div>
            <p class="text-sm text-gray-700 leading-relaxed">
              প্রতিবার এচিভ করার সাথে সাথে <strong>৳১২০</strong> ইনস্ট্যান্ট বোনাস। সুযোগ <strong>সীমাহীন</strong> — যতবার খুশি এচিভ করুন।
            </p>
          </div>
        </div>

        <!-- অ্যাচিভমেন্ট স্ট্যাটাস -->
        @if($hasNewAchievement)
          <div class="mt-5 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
            <div class="flex items-start gap-3">
              <div class="w-9 h-9 rounded-lg bg-emerald-600 text-white grid place-items-center shrink-0">
                <i class="fa-solid fa-medal"></i>
              </div>
              <div>
                <div class="text-emerald-900 font-extrabold">
                  অভিনন্দন! আপনি {{ $achievedLevel + 1 }}-তম বার Visionary Captain Leadership অর্জন করেছেন।
                </div>
                <div class="text-emerald-800 text-sm mt-1">
                  আপনার বোনাস ক্লেইম করে নিন।
                </div>

                <form method="POST" action="{{ route('user.smart.leadership.claim') }}" class="mt-3">
                  @csrf
                  <button type="submit"
                          class="w-full sm:w-auto inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white font-extrabold
                                 bg-gradient-to-r from-emerald-700 to-emerald-600 hover:opacity-95 active:scale-[.99] transition">
                    <i class="fa-solid fa-sack-dollar"></i>
                    বোনাস নিন (৳১২০)
                  </button>
                </form>
              </div>
            </div>
          </div>
        @else
          <div class="mt-5 rounded-xl border border-gray-200 p-4">
            <div class="flex items-center gap-2 text-gray-900 font-extrabold mb-1">
              <i class="fa-solid fa-circle-info"></i>
              <span>স্ট্যাটাস</span>
            </div>
            <p class="text-sm text-gray-700">
              এই সাইকেলে এখনো নতুন এচিভ হয়নি। লক্ষ্য পূরণ হলেই বোনাস ক্লেইম করতে পারবেন।
            </p>
          </div>
        @endif

        <!-- মোট অর্জন -->
        <div class="mt-4 text-center text-sm text-gray-700">
          মোট অর্জন: <strong class="text-gray-900">{{ $achievedLevel }}</strong> বার
        </div>

      </div> <!-- /body -->
    </div>
  </div>

  <!-- হিস্টরি বাটন -->
  <div class="max-w-2xl mx-auto mt-6 text-center soft-in" style="animation-delay:.08s">
    <a href="{{ route('user.smart.leadership.history') }}"
       class="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white font-extrabold
              bg-gradient-to-r from-gray-900 to-gray-800 hover:opacity-95 active:scale-[.99] transition">
      <i class="fa-solid fa-clock-rotate-left"></i>
      Achievement History
    </a>
  </div>

</section>

@endsection