@extends('layouts.front')

@section('title', $post->title)
@section('meta_description', $post->meta['description'] ?? Str::limit(strip_tags($post->excerpt ?: $post->body), 150))

@section('breadcrumbs')
<nav class="text-sm text-slate-500 dark:text-slate-400 mb-6 flex flex-wrap items-center gap-1">
  <a href="/" class="hover:text-primary">الرئيسية</a>
  <span>/</span>
  <a href="{{ route('front.category', $post->category->slug) }}" class="hover:text-primary">{{ $post->category->name }}</a>
  <span>/</span>
  <span class="text-slate-700 dark:text-slate-200">{{ Str::limit($post->title, 60) }}</span>
</nav>
@endsection

@section('content')
<article class="max-w-4xl mx-auto bg-white/80 dark:bg-slate-800/50 backdrop-blur-md rounded-3xl p-6 shadow-md">

  {{-- 🖼️ صورة المقال --}}
  @if($post->cover)
    <img src="{{ Storage::url($post->cover) }}" alt="{{ $post->title }}"
         class="w-full h-auto object-cover rounded-2xl shadow mb-6">
  @endif

  {{-- 🧾 معلومات المقال --}}
  <div class="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400 mb-3">
    <a href="{{ route('front.category', $post->category->slug) }}" class="text-primary font-semibold">{{ $post->category->name }}</a>
    <span>•</span>
    <a href="{{ route('front.author', $post->author->id) }}" class="hover:text-primary">{{ $post->author->name }}</a>
    <span>•</span>
    <time datetime="{{ $post->published_at }}">{{ $post->published_at->translatedFormat('d F Y') }}</time>
  </div>

  {{-- 🏷️ العنوان --}}
  <h1 class="text-3xl font-extrabold text-slate-900 dark:text-white leading-snug mb-4">{{ $post->title }}</h1>

  {{-- 🧩 الملخص --}}
  @if($post->excerpt)
    <p class="text-slate-600 dark:text-slate-300 text-lg leading-relaxed mb-6 border-r-4 border-primary pr-3">
      {{ $post->excerpt }}
    </p>
  @endif

  {{-- ✍️ المحتوى --}}
  <div class="prose prose-slate dark:prose-invert max-w-none leading-8">
    {!! $post->body !!}
  </div>

  {{-- 🏷️ الوسوم --}}
  @if($post->tags->count())
    <div class="mt-8 flex flex-wrap gap-2">
      @foreach($post->tags as $t)
        <a href="{{ route('front.tag', $t->slug) }}"
           class="text-xs px-3 py-1 rounded-full bg-primary/10 text-primary hover:bg-primary hover:text-white transition">
           #{{ $t->name }}
        </a>
      @endforeach
    </div>
  @endif

  {{-- 📢 إعلان داخل المقال --}}
  <div class="mt-8">
    @include('front.partials.ads.dynamic', ['position' => 'in_article'])
  </div>
</article>


{{-- 🔁 مقالات ذات صلة --}}
@if($related->count())
<section class="mt-14 max-w-5xl mx-auto">
  <h2 class="text-xl font-bold border-r-4 border-primary pr-3 mb-5">قد يعجبك أيضاً</h2>
  <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-6">
    @foreach($related as $p)
      <article class="group bg-white/70 dark:bg-slate-800/50 rounded-2xl overflow-hidden shadow hover:shadow-xl transition-all">
        @if($p->cover)
          <img src="{{ Storage::url($p->cover) }}" alt="{{ $p->title }}"
               class="w-full h-44 object-cover group-hover:scale-105 transition-transform duration-700">
        @endif
        <div class="p-3">
          <div class="text-xs text-primary mb-1 font-semibold">
            {{ optional($p->category)->name }}
          </div>
          <h3 class="font-bold text-slate-800 dark:text-white line-clamp-2">
            <a href="{{ route('front.post', $p->slug) }}" class="hover:text-primary transition">{{ $p->title }}</a>
          </h3>
        </div>
      </article>
    @endforeach
  </div>
</section>
@endif

{{-- 📤 مشاركة المقال --}}
<section class="mt-14 max-w-4xl mx-auto bg-white/70 dark:bg-slate-800/50 p-6 rounded-3xl shadow backdrop-blur">
  <h2 class="text-xl font-bold border-r-4 border-primary pr-3 mb-4">شارك هذا المقال</h2>
  @php
    $url = urlencode(request()->fullUrl());
    $title = urlencode($post->title);
  @endphp

  <div class="flex flex-wrap justify-center gap-3 text-sm font-semibold">
    <a href="https://wa.me/?text={{ $title }}%20{{ $url }}"
       target="_blank"
       class="flex items-center gap-2 bg-green-500 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
      <i class="fab fa-whatsapp"></i> واتساب
    </a>

    <a href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}"
       target="_blank"
       class="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
      <i class="fab fa-facebook-f"></i> فيسبوك
    </a>

    <a href="https://twitter.com/intent/tweet?text={{ $title }}&url={{ $url }}"
       target="_blank"
       class="flex items-center gap-2 bg-sky-500 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
      <i class="fab fa-x-twitter"></i> تويتر
    </a>

    <a href="https://t.me/share/url?url={{ $url }}&text={{ $title }}"
       target="_blank"
       class="flex items-center gap-2 bg-blue-400 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
      <i class="fab fa-telegram-plane"></i> تلغرام
    </a>

    <button onclick="navigator.clipboard.writeText('{{ request()->fullUrl() }}'); alert('تم نسخ الرابط!');"
            class="flex items-center gap-2 bg-slate-600 text-white px-4 py-2 rounded-full hover:opacity-90 transition">
      <i class="fas fa-link"></i> نسخ الرابط
    </button>
  </div>
</section>


{{-- 💬 التعليقات --}}
<section id="comments" class="mt-16 max-w-4xl mx-auto bg-white/70 dark:bg-slate-800/50 p-6 rounded-3xl shadow backdrop-blur">
  <h2 class="text-xl font-bold border-r-4 border-primary pr-3 mb-6">التعليقات</h2>

  {{-- ✅ عرض التعليقات --}}
  @forelse($post->comments()->where('status', 'approved')->latest()->get() as $c)
    <div class="border-b border-slate-200 dark:border-slate-700 pb-3 mb-3">
      <div class="font-semibold text-primary">{{ $c->author_name }}</div>
      <div class="text-sm text-gray-400">{{ $c->created_at->diffForHumans() }}</div>
      <p class="mt-2 text-slate-700 dark:text-slate-300 leading-relaxed">{{ $c->content }}</p>
    </div>
  @empty
    <p class="text-gray-500">لا توجد تعليقات بعد، كن أول من يعلّق!</p>
  @endforelse

  {{-- 📝 نموذج إضافة تعليق --}}
  <h3 class="text-lg font-bold mt-8 mb-3">أضف تعليقك</h3>
  @if(session('ok'))
    <div class="bg-green-100 text-green-800 p-3 rounded mb-3">{{ session('ok') }}</div>
  @endif

  <form method="POST" action="{{ route('front.comment.store', $post->id) }}" class="space-y-3">
    @csrf
    <input name="author_name" placeholder="الاسم" required
           class="w-full rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 bg-white/60 dark:bg-slate-800/50 focus:outline-none focus:ring-2 focus:ring-primary">
    <input type="email" name="author_email" placeholder="البريد الإلكتروني" required
           class="w-full rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 bg-white/60 dark:bg-slate-800/50 focus:outline-none focus:ring-2 focus:ring-primary">
    <textarea name="content" placeholder="اكتب تعليقك..." required rows="4"
              class="w-full rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 bg-white/60 dark:bg-slate-800/50 focus:outline-none focus:ring-2 focus:ring-primary"></textarea>
    <button type="submit"
            class="bg-gradient-to-l from-primary to-secondary text-white px-6 py-2 rounded-lg hover:opacity-90 transition">
      إرسال
    </button>
  </form>
</section>

@endsection