@extends('layout.admin') {{-- আপনার admin layout নাম এটা --}}
@section('content')

<style>
  .wrap{max-width:1100px;margin:0 auto;padding:14px}
  .card{background:#fff;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 10px 24px rgba(0,0,0,.04);overflow:hidden}
  .head{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f5f9}
  .btn{display:inline-flex;gap:8px;align-items:center;text-decoration:none;border:none;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer}
  .btnBlue{background:#2563eb;color:#fff}
  .btnSoft{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe}
  .btnRed{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}
  table{width:100%;border-collapse:collapse}
  th,td{padding:12px;border-bottom:1px solid #f1f5f9;font-size:13px;vertical-align:middle}
  th{text-align:left;color:#334155;font-weight:900;background:#f8fafc}
  .pill{padding:6px 10px;border-radius:999px;font-weight:900;font-size:12px;display:inline-block}
  .on{background:#dcfce7;color:#166534;border:1px solid #86efac}
  .off{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0}
  .msg{margin-bottom:10px;padding:10px 12px;border-radius:12px;font-weight:900}
  .ok{background:#ecfeff;color:#155e75;border:1px solid #06b6d433}
  .err{background:#fef2f2;color:#991b1b;border:1px solid #ef444433}
  .avatar{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid #e2e8f0}
</style>

<div class="wrap">
  @if(session('success')) <div class="msg ok">{{ session('success') }}</div> @endif
  @if(session('error')) <div class="msg err">{{ session('error') }}</div> @endif

  <div class="card">
    <div class="head">
      <div style="font-weight:1000;font-size:16px;color:#0f172a">Leadership Ranks</div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a class="btn btnSoft" href="{{ route('admin.leadership.claims.index') }}">Claims History</a>
        <a class="btn btnBlue" href="{{ route('admin.leadership.ranks.create') }}">+ New Rank</a>
      </div>
    </div>

    <div style="overflow:auto">
      <table>
        <thead>
          <tr>
            <th>Order</th>
            <th>Image</th>
            <th>Name</th>
            <th>Title</th>
            <th>Verified</th>
            <th>Count L2?</th>
            <th>L2 Need</th>
            <th>Count L3?</th>
            <th>L3 Need</th>
            <th>Keep After Unverify?</th>
            <th>Gmail</th>
            <th>Facebook</th>
            <th>Reward</th>
            <th>Status</th>
            <th style="width:240px">Actions</th>
          </tr>
        </thead>
        <tbody>
          @forelse($ranks as $r)
            <tr>
              <td>{{ (int)$r->sort_order }}</td>
              <td>
                @if($r->display_image)
                  <img class="avatar" src="{{ asset($r->display_image) }}" alt="Img">
                @else
                  <div style="width:44px;height:44px;border-radius:12px;border:1px dashed #cbd5e1;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-weight:900">
                    {{ strtoupper(substr($r->name,0,1)) }}
                  </div>
                @endif
              </td>
              <td style="font-weight:900;color:#0f172a">{{ $r->name }}</td>
              <td style="max-width:180px">{{ $r->display_title ?? '—' }}</td>
              <td>{{ (int)$r->need_verified_members }}</td>
              <td>{{ $r->include_level2_verified ? 'Yes' : 'No' }}</td>
              <td>{{ (int)$r->need_level2_members }}</td>
              <td>{{ $r->include_level3_verified ? 'Yes' : 'No' }}</td>
              <td>{{ (int)$r->need_level3_members }}</td>
              <td>{{ $r->keep_count_after_unverify ? 'Yes' : 'No' }}</td>
              <td>{{ (int)$r->need_gmail_completed }}</td>
              <td>{{ (int)$r->need_fb_approved }}</td>
              <td style="font-weight:1000;color:#1e40af">৳{{ number_format((float)$r->reward_amount,2) }}</td>
              <td>
                @if($r->is_active)
                  <span class="pill on">ACTIVE</span>
                @else
                  <span class="pill off">OFF</span>
                @endif
              </td>
              <td>
                <div style="display:flex;gap:8px;flex-wrap:wrap">
                  <a class="btn btnSoft" href="{{ route('admin.leadership.ranks.edit',$r->id) }}">Edit</a>

                  <form method="POST" action="{{ route('admin.leadership.ranks.toggle',$r->id) }}">
                    @csrf
                    @method('PATCH')
                    <button class="btn btnSoft" type="submit">
                      {{ $r->is_active ? 'Disable' : 'Enable' }}
                    </button>
                  </form>

                  <form method="POST" action="{{ route('admin.leadership.ranks.destroy',$r->id) }}"
                        onsubmit="return confirm('ডিলিট করলে র‍্যাঙ্ক ডাটা চলে যাবে। নিশ্চিত?')">
                    @csrf
                    @method('DELETE')
                    <button class="btn btnRed" type="submit">Delete</button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="11" style="text-align:center;color:#64748b;font-weight:900;padding:18px">
                কোনো র‍্যাঙ্ক নেই।
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
</div>
@endsection
