@extends('layouts.frontend')
@section('title', 'Wall of Fame - Yahya Playland')

@section('styles')
<link href="{{ asset('css/wall-of-fame.css') }}" rel="stylesheet">
<style>
/* Override the green section background for wall of fame */
.feature-wof { background: #f9f9f9 !important; }
.feature-wof h2 { color: #2d2d2d; }
.feature-wof .about-para { color: #555; }
.wof-section-title { color: #2d2d2d !important; font-size: 22px; margin-bottom: 24px; text-align: center; }
</style>
@endsection

@section('content')
  <!-- Hero -->
  <section class="hero" role="region">
    <img src="{{ asset('images/hero-banner.jpg') }}" alt="banner">
  </section>

  <!-- Wall of Fame -->
  <section class="feature feature-wof" role="region">
    <div class="container">
      <div class="about-heading text-center mb-4">
        <h2 style="color:#2d2d2d">WALL OF FAME</h2>
        <p class="about-para" style="color:#555;max-width:720px;margin:0 auto">
          Honouring the generous hearts who help every child belong. We are deeply grateful to the
          individuals and businesses listed below whose generosity is shaping Yahya Playland into reality.
        </p>
      </div>

      @php
        $individuals = $donors->where('type','individual');
        $businesses  = $donors->where('type','business');
        $indCount    = $individuals->count();
        $bizCount    = $businesses->count();
      @endphp

      <!-- Tabs -->
      <div class="wof-tabs">
        <button class="wof-tab active" data-tab="individuals" onclick="switchWofTab('individuals',this)">
          <i class="bi bi-person-fill"></i> Individuals <span class="count-badge">{{ $indCount }}</span>
        </button>
        <button class="wof-tab" data-tab="businesses" onclick="switchWofTab('businesses',this)">
          <i class="bi bi-building-fill"></i> Businesses <span class="count-badge">{{ $bizCount }}</span>
        </button>
      </div>

      {{-- INDIVIDUALS --}}
      <div class="tab-panel active" id="panel-individuals">
        @php $sorted = $individuals->sortByDesc('amount')->values(); $top3 = $sorted->take(3); $rest = $sorted->skip(3)->values(); @endphp

        @if($top3->count() >= 3)
        <h2 class="wof-section-title">🏆 Top Individual Contributors</h2>
        <div class="podium">
          {{-- Rank 2 (left) --}}
          <div class="podium-card rank-2">
            <div class="rank-medal">2</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($top3[1]->anonymous ? 'AN' : $top3[1]->name) }}&background=A8A8A8&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $top3[1]->anonymous ? 'Anonymous' : $top3[1]->name }}</div>
            <div class="donor-type">Individual</div>
            <div class="donor-amount">${{ number_format($top3[1]->amount) }}</div>
          </div>
          {{-- Rank 1 (center) --}}
          <div class="podium-card rank-1">
            <div class="rank-medal">1</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($top3[0]->anonymous ? 'AN' : $top3[0]->name) }}&background=F2A900&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $top3[0]->anonymous ? 'Anonymous' : $top3[0]->name }}</div>
            <div class="donor-type">Individual</div>
            <div class="donor-amount">${{ number_format($top3[0]->amount) }}</div>
          </div>
          {{-- Rank 3 (right) --}}
          <div class="podium-card rank-3">
            <div class="rank-medal">3</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($top3[2]->anonymous ? 'AN' : $top3[2]->name) }}&background=CD7F32&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $top3[2]->anonymous ? 'Anonymous' : $top3[2]->name }}</div>
            <div class="donor-type">Individual</div>
            <div class="donor-amount">${{ number_format($top3[2]->amount) }}</div>
          </div>
        </div>
        @endif

        @if($rest->count() > 0)
        <div class="honour-roll">
          <div class="honour-roll-header"><h3>🎖️ Individual Honour Roll</h3></div>
          @foreach($rest as $i => $d)
          <div class="donor-row ind-row" data-idx="{{ $i }}" style="{{ $i >= 10 ? 'display:none' : '' }}">
            <div class="donor-rank">{{ $i + 4 }}</div>
            <div class="donor-info">
              <img src="https://ui-avatars.com/api/?name={{ urlencode($d->anonymous ? 'AN' : $d->name) }}&background=f7941d&color=fff&bold=true" alt="">
              <div>
                <p class="name">{{ $d->anonymous ? 'Anonymous Donor' : $d->name }}</p>
                <span class="type">Individual</span>
              </div>
            </div>
            <div class="amount">${{ number_format($d->amount) }}</div>
          </div>
          @endforeach
        </div>
        @if($rest->count() > 10)
          <div style="text-align:center;margin-top:20px">
            <button id="loadMoreInd" onclick="loadMore('ind')"
              style="padding:12px 32px;background:#fff;color:#f7941d;border:2px solid #f7941d;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s">
              ⬇ Load More <span style="font-weight:400;font-size:13px;color:#aaa">({{ $rest->count() - 10 }} more)</span>
            </button>
          </div>
        @endif
        @endif

        @if($individuals->isEmpty())
          <div style="text-align:center;padding:50px;color:#aaa">
            <p style="font-size:16px">No individual donors yet.</p>
            <a href="{{ route('customer.donate.individual') }}" style="color:#f7941d;font-weight:700">Be the first to donate! →</a>
          </div>
        @endif
      </div>

      {{-- BUSINESSES --}}
      <div class="tab-panel" id="panel-businesses">
       @php $bsorted = $businesses->sortByDesc('amount')->values(); $btop3 = $bsorted->take(3); $brest = $bsorted->skip(3)->values(); @endphp

        @if($btop3->count() >= 3)
        <h2 class="wof-section-title">🏆 Top Business Contributors</h2>
        <div class="podium">
          <div class="podium-card rank-2">
            <div class="rank-medal">2</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($btop3[1]->anonymous ? 'AN' : $btop3[1]->name) }}&background=A8A8A8&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $btop3[1]->anonymous ? 'Anonymous' : $btop3[1]->name }}</div>
            <div class="donor-type">Business</div>
            <div class="donor-amount">${{ number_format($btop3[1]->amount) }}</div>
          </div>
          <div class="podium-card rank-1">
            <div class="rank-medal">1</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($btop3[0]->anonymous ? 'AN' : $btop3[0]->name) }}&background=F2A900&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $btop3[0]->anonymous ? 'Anonymous' : $btop3[0]->name }}</div>
            <div class="donor-type">Business</div>
            <div class="donor-amount">${{ number_format($btop3[0]->amount) }}</div>
          </div>
          <div class="podium-card rank-3">
            <div class="rank-medal">3</div>
            <img src="https://ui-avatars.com/api/?name={{ urlencode($btop3[2]->anonymous ? 'AN' : $btop3[2]->name) }}&background=CD7F32&color=fff&size=200&bold=true" alt="" class="donor-avatar">
            <div class="donor-name">{{ $btop3[2]->anonymous ? 'Anonymous' : $btop3[2]->name }}</div>
            <div class="donor-type">Business</div>
            <div class="donor-amount">${{ number_format($btop3[2]->amount) }}</div>
          </div>
        </div>
        @endif

        @if($brest->count() > 0)
        <div class="honour-roll">
          <div class="honour-roll-header"><h3>🎖️ Business Honour Roll</h3></div>
          @foreach($brest as $i => $d)
          <div class="donor-row biz-row" data-idx="{{ $i }}" style="{{ $i >= 10 ? 'display:none' : '' }}">
            <div class="donor-rank">{{ $i + 4 }}</div>
            <div class="donor-info">
              <img src="https://ui-avatars.com/api/?name={{ urlencode($d->anonymous ? 'AN' : $d->name) }}&background=f7941d&color=fff&bold=true" alt="">
              <div>
                <p class="name">{{ $d->anonymous ? 'Anonymous' : $d->name }}</p>
                <span class="type">Business</span>
              </div>
            </div>
            <div class="amount">${{ number_format($d->amount) }}</div>
          </div>
          @endforeach
        </div>
        @if($brest->count() > 10)
          <div style="text-align:center;margin-top:20px">
            <button id="loadMoreBiz" onclick="loadMore('biz')"
              style="padding:12px 32px;background:#fff;color:#f7941d;border:2px solid #f7941d;border-radius:25px;font-size:14px;font-weight:700;cursor:pointer;transition:.2s">
              ⬇ Load More <span style="font-weight:400;font-size:13px;color:#aaa">({{ $brest->count() - 10 }} more)</span>
            </button>
          </div>
        @endif
        @endif

        @if($businesses->isEmpty())
          <div style="text-align:center;padding:50px;color:#aaa">
            <p style="font-size:16px">No business donors yet.</p>
            <a href="{{ route('customer.donate.business') }}" style="color:#f7941d;font-weight:700">Be the first! →</a>
          </div>
        @endif
      </div>

      {{-- Donate CTA --}}
      <div style="text-align:center;margin:40px 0 10px">
        <a href="{{ route('customer.donate') }}"
           style="display:inline-block;padding:14px 36px;background:linear-gradient(135deg,#f7941d,#e8820a);color:#fff;border-radius:30px;text-decoration:none;font-size:16px;font-weight:700;box-shadow:0 6px 20px rgba(247,148,29,.35)">
          🤲 Make a Donation
        </a>
      </div>
    </div>
  </section>
@endsection

@section('scripts')
<script>
function switchWofTab(name, btn) {
    document.querySelectorAll('.wof-tab').forEach(b => b.classList.remove('active'));
    document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
    btn.classList.add('active');
    document.getElementById('panel-' + name).classList.add('active');
}

const shownCounts = { ind: 10, biz: 10 };

function loadMore(type) {
    const cls = type === 'ind' ? '.ind-row' : '.biz-row';
    const rows = document.querySelectorAll(cls);
    const currentShown = shownCounts[type];
    const newShown = currentShown + 10;
    let totalCount = 0;
    let visibleNow = 0;

    rows.forEach(r => {
        totalCount++;
        const idx = parseInt(r.dataset.idx);
        if (idx < newShown) {
            r.style.display = '';
            visibleNow++;
        }
    });

    shownCounts[type] = newShown;

    const btn = document.getElementById(type === 'ind' ? 'loadMoreInd' : 'loadMoreBiz');
    if (btn && visibleNow >= totalCount) {
        btn.style.display = 'none';
    } else if (btn) {
        const remaining = totalCount - visibleNow;
        btn.innerHTML = '⬇ Load More <span style="font-weight:400;font-size:13px;color:#aaa">(' + remaining + ' more)</span>';
    }
}
</script>
@endsection