@php
  $user = auth()->user();
  $role = $user->membership_status ?? 'member';

  switch ($role) {
      case 'super-admin': $layout = 'layouts.superadmin'; break;
      case 'advisor':     $layout = 'layouts.advisor'; break;
      case 'admin':
      case 'moderator':   $layout = 'layouts.moderator'; break;
      default:            $layout = 'layouts.member';
  }
@endphp

@extends($layout)
@section('title','تحديثات مهمة')

@section('content')
<div class="max-w-3xl mx-auto px-3 sm:px-4 lg:px-6 py-6 rtl space-y-4">

  <div class="rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 shadow overflow-hidden">
    <div class="p-5 sm:p-6 border-b border-slate-200 dark:border-slate-800">
      <div class="flex items-start justify-between gap-3">
        <div>
          <h1 class="text-xl sm:text-2xl font-extrabold text-slate-900 dark:text-white">
            تحديثات إلزامية ✅
          </h1>
          <p class="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-1">
            اقرأ التحديثات واضغط التالي. في النهاية لازم توافق حتى تتابع استخدام الموقع.
          </p>
        </div>
        <div class="text-[11px] text-slate-500 dark:text-slate-400">
          <span id="su-step">1</span>/<span id="su-total">{{ $updates->count() }}</span>
        </div>
      </div>
    </div>

    <div class="p-5 sm:p-6">
      <div id="su-slides" class="space-y-4">
        @foreach($updates as $i => $u)
          <div class="su-slide {{ $i === 0 ? '' : 'hidden' }}">
            <div class="flex items-center justify-between gap-2 mb-2">
              <div class="text-[11px] text-slate-500 dark:text-slate-400">
                الإصدار: <span class="font-semibold">{{ $u->version }}</span>
              </div>
              <div class="text-[11px] text-slate-500 dark:text-slate-400">
                #{{ $u->id }}
              </div>
            </div>

            <h2 class="text-lg sm:text-xl font-extrabold text-slate-900 dark:text-white">
              {{ $u->title }}
            </h2>

            @if($u->goal)
              <div class="mt-2 text-[12px] rounded-2xl px-3 py-2 bg-indigo-50 text-indigo-800
                          dark:bg-indigo-900/25 dark:text-indigo-200 border border-indigo-100 dark:border-indigo-800">
                🎯 الهدف: {{ $u->goal }}
              </div>
            @endif

            @if($u->image_path)
              <div class="mt-3 rounded-2xl overflow-hidden border border-slate-200 dark:border-slate-700">
                <img src="{{ asset($u->image_path) }}" alt="update image" class="w-full max-h-64 object-cover">
              </div>
            @endif

            <div class="mt-3 text-sm leading-relaxed text-slate-700 dark:text-slate-200 whitespace-pre-line">
              {{ $u->body }}
            </div>
          </div>
        @endforeach
      </div>

      {{-- dots --}}
      <div class="mt-5 flex items-center justify-center gap-1.5">
        @foreach($updates as $i => $u)
          <span class="su-dot h-2.5 w-2.5 rounded-full {{ $i===0 ? 'bg-sky-500' : 'bg-slate-300 dark:bg-slate-700' }}"></span>
        @endforeach
      </div>

      {{-- actions --}}
      <div class="mt-5 flex items-center justify-between gap-2">
        <button id="su-prev" type="button"
                class="px-4 py-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800
                       dark:bg-slate-800 dark:hover:bg-slate-700 dark:text-slate-100 text-sm font-semibold disabled:opacity-40"
                disabled>
          السابق
        </button>

        <button id="su-next" type="button"
                class="px-4 py-2 rounded-xl bg-sky-600 hover:bg-sky-700 text-white text-sm font-semibold">
          التالي
        </button>
      </div>

      {{-- accept (آخر خطوة) --}}
      <form id="su-accept-box" method="POST" action="{{ route('site-updates.accept') }}"
            class="hidden mt-5 p-4 rounded-2xl border border-amber-200 bg-amber-50
                   dark:bg-amber-900/20 dark:border-amber-700/60 space-y-3">
        @csrf

        <label class="flex items-start gap-2 text-sm text-amber-900 dark:text-amber-100">
          <input type="checkbox" name="ack" value="1" class="mt-1">
          <span>أؤكد أنني قرأت كل التحديثات.</span>
        </label>

        @if($needsTerms)
          <label class="flex items-start gap-2 text-sm text-amber-900 dark:text-amber-100">
            <input type="checkbox" name="terms" value="1" class="mt-1">
            <span>
              أوافق على <a class="underline font-semibold" href="{{ $termsUrl }}" target="_blank">الشروط والاستخدام</a>.
            </span>
          </label>
        @endif

        <button id="su-accept-btn" type="submit"
                class="w-full px-4 py-2.5 rounded-2xl bg-emerald-600 hover:bg-emerald-700 text-white text-sm font-extrabold">
          موافق والمتابعة ✅
        </button>

        <div class="text-[11px] text-amber-800 dark:text-amber-200">
          * لن تستطيع متابعة استخدام الموقع قبل الموافقة.
        </div>
      </form>
    </div>
  </div>
</div>

<script>
(() => {
  const slides = Array.from(document.querySelectorAll('.su-slide'));
  const dots   = Array.from(document.querySelectorAll('.su-dot'));
  const prev   = document.getElementById('su-prev');
  const next   = document.getElementById('su-next');
  const stepEl = document.getElementById('su-step');
  const acceptBox = document.getElementById('su-accept-box');

  let i = 0;

  function render(){
    slides.forEach((s,idx)=>s.classList.toggle('hidden', idx!==i));
    dots.forEach((d,idx)=>{
      d.classList.toggle('bg-sky-500', idx===i);
      d.classList.toggle('bg-slate-300', idx!==i);
      d.classList.toggle('dark:bg-slate-700', idx!==i);
    });
    stepEl.textContent = String(i+1);
    prev.disabled = (i===0);

    const last = (i === slides.length - 1);
    next.classList.toggle('hidden', last);
    acceptBox.classList.toggle('hidden', !last);
  }

  prev.addEventListener('click', ()=>{ if(i>0){ i--; render(); } });
  next.addEventListener('click', ()=>{ if(i<slides.length-1){ i++; render(); } });

  render();
})();
</script>
@endsection