@extends('layouts.superadmin')
@section('title','غرفة رولا — يوميات القائدة')
@section('page-title','📝 يوميات القائدة رولا')

@section('content')
<div class="p-4 md:p-6 space-y-6">
  {{-- هيرو ملحمي --}}
  <div class="relative overflow-hidden rounded-2xl border border-white/10 bg-gradient-to-b from-amber-200/40 via-white/50 to-white dark:from-[#1f1b14] dark:via-[#0f0d09] dark:to-black shadow-xl">
    <div class="absolute -top-24 -left-24 h-64 w-64 rounded-full blur-3xl opacity-30 bg-gradient-to-tr from-amber-400 via-rose-300 to-violet-400"></div>
    <div class="absolute -bottom-20 -right-20 h-72 w-72 rounded-full blur-3xl opacity-20 bg-gradient-to-tr from-cyan-300 via-emerald-300 to-amber-300"></div>

    <div class="relative px-5 md:px-8 py-6 md:py-8">
      <div class="flex items-center gap-3">
        <span class="inline-flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-xl bg-amber-500/10 border border-amber-400/40">
          <i class="fa-solid fa-feather-pointed text-amber-500 text-lg md:text-xl"></i>
        </span>
        <div class="min-w-0">
          <h1 class="text-xl md:text-2xl lg:text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">📝 يوميات القائدة رولا</h1>
          <p class="mt-1 text-sm md:text-base text-gray-600 dark:text-gray-300 leading-relaxed">
            اكتب عنوانًا قويًا ثم المحتوى بوضوح. حدّد الفئة، أضف وسومًا، ويمكنك تثبيت اليومية لتظهر أعلى الأرشيف.
          </p>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-3">
        <div class="rounded-xl p-4 bg-gradient-to-br from-amber-50 to-amber-100 dark:from-amber-900/20 dark:to-amber-900/5 border border-amber-300/50">
          <div class="text-xs text-amber-900/80 dark:text-amber-200">إجمالي اليوميات</div>
          <div class="mt-1 text-2xl md:text-3xl font-extrabold text-amber-900 dark:text-amber-200">{{ number_format($stats['total'] ?? 0) }}</div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 dark:from-emerald-900/20 dark:to-emerald-900/5 border border-emerald-300/50">
          <div class="text-xs text-emerald-900/80 dark:text-emerald-200">آخر 7 أيام</div>
          <div class="mt-1 text-2xl md:text-3xl font-extrabold text-emerald-900 dark:text-emerald-200">{{ number_format($stats['last7'] ?? 0) }}</div>
        </div>
        <div class="rounded-xl p-4 bg-gradient-to-br from-violet-50 to-violet-100 dark:from-violet-900/20 dark:to-violet-900/5 border border-violet-300/50">
          <div class="text-xs text-violet-900/80 dark:text-violet-200">المثبّتة</div>
          <div class="mt-1 text-2xl md:text-3xl font-extrabold text-violet-900 dark:text-violet-200">{{ number_format($stats['pinned'] ?? 0) }}</div>
        </div>
      </div>
    </div>
  </div>

  {{-- فلاش --}}
  @if(session('success'))
    <div class="bg-emerald-50 text-emerald-800 border border-emerald-300 p-3 rounded">{{ session('success') }}</div>
  @endif
  @if($errors->any())
    <div class="bg-rose-50 text-rose-800 border border-rose-300 p-3 rounded text-sm">
      <ul class="list-disc list-inside">
        @foreach($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  {{-- إنشاء --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200/60 dark:border-white/10 shadow-xl">
    <div class="px-5 md:px-6 py-4 border-b border-gray-100 dark:border-white/10 flex items-center gap-3">
      <i class="fa-solid fa-plus text-primary-600 dark:text-primary-400"></i>
      <h3 class="font-extrabold text-gray-900 dark:text-white">إنشاء يومية جديدة</h3>
      <span class="ms-auto text-xs text-gray-500 dark:text-gray-400">الحقول الأساسية مطلوبة</span>
    </div>

    <form method="POST" action="{{ route('superadmin.rola.diaries.store') }}" class="p-5 md:p-6 space-y-5" novalidate>
      @csrf
      <div>
        <label class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">🖋️ العنوان</label>
        <input id="title" type="text" name="title" maxlength="200" required
               class="w-full rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-4 py-3 font-semibold placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-amber-400"
               placeholder="اكتب عنوان اليومية هنا" />
        <div class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span>يظهر كبطاقة رئيسية في الأرشيف.</span>
          <span id="title-counter">0/200</span>
        </div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div>
          <label class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">الفئة المستهدفة</label>
          <select name="segment" class="w-full rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-2.5">
            <option value="all">جميع الأعضاء</option>
            <option value="official">الأعضاء الرسميون</option>
            <option value="beta">أعضاء بيتا</option>
            <option value="moderators">المشرفون</option>
            <option value="advisors">المستشارون</option>
            <option value="admins">الإداريون</option>
          </select>
        </div>
        <div class="md:col-span-2">
          <label class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">وسوم (مفصولة بفواصل)</label>
          <input type="text" name="tags" placeholder="تحفيز, متابعة, تقدير" class="w-full rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-2.5">
        </div>
      </div>

      <div>
        <label for="body" class="block text-sm font-semibold text-gray-800 dark:text-gray-200 mb-1">المحتوى</label>
        <textarea id="body" name="body" rows="6" maxlength="5000" required class="w-full rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-3"></textarea>
        <div class="mt-1 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span>اكتب الرسالة بشكل مباشر وواضح.</span>
          <span id="body-counter">0/5000</span>
        </div>
      </div>

      <div class="flex flex-wrap items-center gap-4">
        <label class="inline-flex items-center gap-2">
          <input type="checkbox" name="pin" value="1" id="pin-chk" class="rounded border-gray-300 dark:border-white/10">
          <span class="text-sm text-gray-700 dark:text-gray-200">تثبيت في الأعلى</span>
        </label>

        <div class="ms-auto flex items-center gap-2">
          <a href="{{ route('superadmin.rola.diaries.export.txt', request()->query()) }}" class="px-4 py-2 rounded-lg border border-gray-300 dark:border-white/10 bg-white/70 dark:bg-white/5 text-gray-700 dark:text-gray-200 hover:bg-gray-50">تصدير TXT</a>
          <button class="px-5 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-semibold">حفظ</button>
        </div>
      </div>
    </form>
  </div>

  {{-- فلاتر الأرشيف --}}
  <div class="bg-white dark:bg-gray-900 rounded-2xl border border-gray-200/60 dark:border-white/10 shadow-xl">
    <div class="px-5 md:px-6 py-4 border-b border-gray-100 dark:border-white/10 flex items-center gap-3">
      <i class="fa-solid fa-filter text-primary-600 dark:text-primary-400"></i>
      <h3 class="font-extrabold text-gray-900 dark:text-white">أرشيف اليوميات</h3>
      <span class="text-xs text-gray-500 dark:text-gray-400">تصفية سريعة حسب الفئة والزمن والبحث</span>
    </div>

    <form method="GET" class="p-5 md:p-6 flex flex-col lg:flex-row gap-3 lg:items-end">
      <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 flex-1">
        <select name="segment" class="rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-2 text-sm">
          <option value="">كل الفئات</option>
          <option value="all"        @selected($seg==='all')>الكل</option>
          <option value="official"   @selected($seg==='official')>رسمي</option>
          <option value="beta"       @selected($seg==='beta')>بيتا</option>
          <option value="moderators" @selected($seg==='moderators')>مشرفون</option>
          <option value="advisors"   @selected($seg==='advisors')>مستشارون</option>
          <option value="admins"     @selected($seg==='admins')>إداريون</option>
        </select>
        <select name="days" class="rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-2 text-sm">
          @foreach([7,14,30,60,90] as $d)
            <option value="{{ $d }}" @selected($days==$d)>{{ $d }} يوم</option>
          @endforeach
        </select>
        <input type="text" name="q" value="{{ $q }}" placeholder="بحث بالعنوان/المحتوى/وسم..." class="rounded-xl border border-gray-300 dark:border-white/10 bg-white/90 dark:bg-white/5 px-3 py-2 text-sm" />
      </div>
      <div>
        <button class="w-full lg:w-auto px-4 py-2 rounded-xl bg-primary-600 text-white text-sm hover:bg-primary-700">بحث</button>
      </div>
    </form>
  </div>

  {{-- بطاقات الأرشيف --}}
  <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
    @forelse($rows as $r)
      <div class="group rounded-2xl p-4 bg-white dark:bg-gray-900 border border-gray-200/60 dark:border-white/10 shadow hover:shadow-amber-300/20 hover:shadow-xl transition-shadow">
        <div class="flex items-center justify-between gap-3">
          <div class="min-w-0">
            <div class="font-extrabold text-base md:text-lg text-gray-900 dark:text-white truncate">{{ $r->title }}</div>
            <div class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
              {{ \Carbon\Carbon::parse($r->created_at)->timezone(config('app.timezone','Asia/Jerusalem'))->format('Y-m-d H:i') }}
              <span class="mx-2">•</span>
              <span class="inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5">
                <i class="fa-solid fa-layer-group text-[10px]"></i>
                {{ $r->segment ?? 'all' }}
              </span>
            </div>
          </div>
          @if(!empty($r->is_pinned) || !empty($r->pin))
            <span class="inline-flex items-center gap-1 text-amber-700 dark:text-amber-300 text-xs px-2 py-1 rounded-lg bg-amber-100/80 dark:bg-amber-900/20 border border-amber-300/40">
              <i class="fa-solid fa-thumbtack"></i> مثبّت
            </span>
          @endif
        </div>

      {{-- الوسوم (يعمل سواء كانت JSON Array أو CSV String) --}}
@if(!empty($r->tags))
  @php
    // كوّن مصفوفة وسوم بغض النظر عن النوع
    $tags = is_array($r->tags)
      ? $r->tags
      : (is_string($r->tags) ? preg_split('/\s*,\s*/', $r->tags, -1, PREG_SPLIT_NO_EMPTY) : []);

    // في حال بعض العناصر كانت آراي (مثلاً [{name:"تحفيز"}]) حوّلها لنص
    $tags = array_map(function($t){
      if (is_array($t)) {
        return (string)($t['name'] ?? ($t[0] ?? ''));
      }
      return (string)$t;
    }, $tags);
    // احذف الفارغ
    $tags = array_filter(array_map('trim', $tags), fn($x)=>$x!=='');
  @endphp

  @if(!empty($tags))
    <div class="mt-2 flex flex-wrap gap-1.5">
      @foreach($tags as $tg)
        <span class="text-[11px] px-2 py-0.5 rounded-full border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/5 text-gray-600 dark:text-gray-300">
          #{{ $tg }}
        </span>
      @endforeach
    </div>
  @endif
@endif

        <p class="mt-3 text-sm text-gray-700 dark:text-gray-200 line-clamp-4">{{ $r->body }}</p>

        <div class="mt-4 flex items-center justify-between">
          <div class="text-xs text-gray-500 dark:text-gray-400">ID: {{ $r->id }}</div>
          <div class="flex items-center gap-2">
            <a href="{{ route('superadmin.rola.diaries.show', $r->id) }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-white/10 text-sm hover:bg-gray-50 dark:hover:bg-white/10">عرض</a>
            <a href="{{ route('superadmin.rola.diaries.edit', $r->id) }}" class="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700">تعديل</a>
          </div>
        </div>
      </div>
    @empty
      <div class="col-span-full">
        <div class="rounded-2xl border border-dashed border-gray-300 dark:border-white/10 p-10 text-center">
          <div class="text-3xl">🗒️</div>
          <p class="mt-2 text-gray-600 dark:text-gray-300">لا توجد يوميات بعد في هذه الفترة. ابدأ بكتابة أول يومية الآن.</p>
        </div>
      </div>
    @endforelse
  </div>

  @if(method_exists($rows,'links'))
    <div class="pt-2">{{ $rows->links() }}</div>
  @endif
</div>

{{-- سكربت عدادات الحروف (بدون push لتفادي أي تعارض كاش) --}}
<script>
  (function(){
    const title = document.getElementById('title');
    const body  = document.getElementById('body');
    const tc    = document.getElementById('title-counter');
    const bc    = document.getElementById('body-counter');
    if(title && tc){
      const upd=()=>{ tc.textContent = title.value.length + '/200'; };
      title.addEventListener('input',upd); upd();
    }
    if(body && bc){
      const upd2=()=>{ bc.textContent = body.value.length + '/5000'; };
      body.addEventListener('input',upd2); upd2();
    }
  })();
</script>
@endsection