@extends('layout.user')

@section('content')
@php
  $primary = '#0ea5e9';
  $dark = '#0f172a';
@endphp

<style>
  .ls-page{max-width:960px;margin:0 auto;padding:16px 12px 96px}
  .hero{background:linear-gradient(135deg,#0ea5e9,#2563eb);border-radius:22px;padding:18px 16px;color:#fff;box-shadow:0 14px 32px rgba(14,165,233,.18)}
  .hero-title{font-weight:1000;font-size:18px;letter-spacing:-0.01em}
  .hero-sub{margin-top:6px;font-size:13px;opacity:.9}
  .ls-list{margin-top:16px;display:flex;flex-direction:column;gap:12px}
  .ls-card{border:1.5px solid #e2e8f0;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(15,23,42,.04);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;text-align:left}
  .ls-card:hover{border-color:#bae6fd;box-shadow:0 14px 32px rgba(14,165,233,.10)}
  .ls-left{display:flex;gap:12px;align-items:center}
  .avatar{width:60px;height:60px;border-radius:999px;background:radial-gradient(circle at 20% 20%, #e0f2fe, #bfdbfe);display:flex;align-items:center;justify-content:center;font-weight:1000;color:#0ea5e9;border:1px solid #e2e8f0;overflow:hidden;background-size:cover;background-position:center}
  .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-weight:900;font-size:11px;background:#e0f2fe;color:#0ea5e9;margin-bottom:4px}
  .name{font-weight:1000;color:#0f172a;font-size:16px;line-height:1.2}
  .title{color:#64748b;font-size:12px;margin-top:2px}
  .chevron{font-size:20px;color:#94a3b8;font-weight:900}
  .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#0f172a;color:#fff;padding:12px 16px;border-radius:14px;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;max-width:90vw}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
  .alerts{margin-top:12px}
  .alert{border-radius:14px;padding:10px 12px;font-weight:1000;border:1.5px solid #0ea5e9;margin-bottom:10px}
  .alert.ok{background:#ecfeff;color:#0f172a}
  .alert.err{background:#fef2f2;color:#991b1b;border-color:#fecdd3}
</style>

<div class="ls-page">
  @php
    $heroTitle = trim((string) ($settings->leadership_tracks_title ?? '')) ?: 'Leadership Tracks';
    $heroSub = trim((string) ($settings->leadership_tracks_subtitle ?? '')) ?: 'ট্যাপ করে আপডেট নোটিশ দেখুন। সব কনটেন্ট অ্যাডমিন প্যানেল থেকে এডিট করা যাবে।';
  @endphp
  <div class="hero">
    <div class="hero-title">{{ $heroTitle }}</div>
    <div class="hero-sub">{{ $heroSub }}</div>
  </div>

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

  <div class="ls-list">
    @foreach($ranks as $rank)
      @php
        $order = $rank->sort_order ?? $loop->iteration;
        $image = $rank->display_image ? asset($rank->display_image) : null;
        $notice = trim((string) ($rank->notice_text ?? ''));
        if ($notice === '') {
          $notice = 'আপডেট নোটিশ শীঘ্রই পাবেন';
        }
        $link = route('leadership.rank.show', $rank->key);
      @endphp
      <button class="ls-card" type="button" data-notice="{{ $notice }}" data-link="{{ $link }}">
        <div class="ls-left">
          <div class="avatar" @if($image) style="background-image:url('{{ $image }}')" @endif>
            @unless($image)
              <span>{{ strtoupper(substr($rank->name,0,1)) }}</span>
            @endunless
          </div>
          <div>
            <div class="badge">Rank {{ $order }}</div>
            <div class="name">{{ $rank->name }}</div>
            <div class="title">{{ $rank->display_title ?? 'Tap to view notice' }}</div>
          </div>
        </div>
        <div class="chevron">›</div>
      </button>
    @endforeach
  </div>
</div>

<div id="lsToast" class="toast"></div>

<script>
  (function(){
    const toast = document.getElementById('lsToast');
    let timer;
    function showToast(msg){
      toast.textContent = msg;
      toast.classList.add('show');
      clearTimeout(timer);
      timer = setTimeout(()=>toast.classList.remove('show'), 2600);
    }
    document.querySelectorAll('.ls-card').forEach(btn=>{
      btn.addEventListener('click', ()=>{
        const link = btn.dataset.link;
        if (link) {
          window.location.href = link;
          return;
        }
        const msg = btn.dataset.notice || 'Update coming soon';
        showToast(msg);
      });
    });
  })();
</script>
@endsection
