@extends('layouts.front')

@section('title', $cat->name)

@section('breadcrumbs')
<nav class="text-sm text-slate-500 mb-6">
  <a href="/" class="hover:text-primary">الرئيسية</a>
  <span class="mx-2">/</span>
  <span class="text-slate-700 dark:text-slate-200">{{ $cat->name }}</span>
</nav>
@endsection

@section('content')
<div class="max-w-7xl mx-auto">

  {{-- 🧭 عنوان القسم --}}
  <div class="text-center mb-10">
    <h1 class="text-3xl font-extrabold text-primary mb-2">
      📰 {{ $cat->name }}
    </h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm">
      تصفح أحدث المقالات ضمن هذا القسم
    </p>
  </div>

  {{-- 🌿 الأقسام الفرعية --}}
  @if($cat->children->count())
    <div class="mb-10">
      <h3 class="font-bold text-xl text-primary mb-4 flex items-center gap-2">
        <i class="fa-solid fa-layer-group"></i> الأقسام الفرعية
      </h3>

      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        @foreach($cat->children as $child)
          <a href="{{ route('front.category', $child->slug) }}"
             class="block bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 
                    p-4 rounded-xl shadow hover:-translate-y-1 hover:shadow-lg transition-all text-center">
            <span class="font-semibold text-slate-700 dark:text-slate-200">
              {{ $child->name }}
            </span>
          </a>
        @endforeach
      </div>
    </div>
  @endif

  {{-- 🧾 شبكة المقالات --}}
  @if($posts->count())
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
      @foreach($posts as $p)
        @include('front.partials.post-card', ['post' => $p])
      @endforeach
    </div>

    {{-- 📑 الترقيم --}}
    <div class="mt-10">
      {{ $posts->links() }}
    </div>

  @else
    {{-- 🚫 لا توجد مقالات --}}
    <div class="bg-yellow-50 dark:bg-slate-800/50 text-yellow-800 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-700 rounded-2xl p-6 text-center">
      <i class="fa-regular fa-folder-open text-3xl mb-3"></i>
      <p class="font-semibold">لا توجد مقالات في هذا القسم حالياً.</p>
    </div>
  @endif

</div>
@endsection