@extends('layouts.app')
@section('title', (is_ar()?$post->title_ar:$post->title_en).' — '.site_name())
@section('description', is_ar()?$post->excerpt_ar:$post->excerpt_en)
@section('content')

<article>
  <section class="page-hero">
    <div class="container">
      <div style="font-size:13px;opacity:.7;margin-bottom:8px">
        {{ $post->published_at->format('Y-m-d') }} |
        <span style="background:rgba(255,255,255,.15);padding:2px 10px;border-radius:999px">{{ $post->category }}</span>
        @if($post->author) | ✍️ {{ $post->author->name }} @endif
        | 👁️ {{ $post->views }}
      </div>
      <h1 style="max-width:780px;margin:0 auto">{{ is_ar()?$post->title_ar:$post->title_en }}</h1>
    </div>
  </section>

  @if($post->cover)
  <div style="background:#f8fafc;text-align:center;padding:32px 20px">
    <img src="{{ asset($post->cover) }}" style="max-width:780px;width:100%;border-radius:14px;box-shadow:0 4px 24px rgba(0,0,0,.12)">
  </div>
  @endif

  <section class="section">
    <div class="container" style="max-width:780px">
      <div style="font-size:16px;line-height:1.9;color:#334155">
        {!! is_ar()?$post->content_ar:$post->content_en !!}
      </div>

      @if($post->tags)
      <div style="margin-top:32px;padding-top:20px;border-top:1px solid #e2e8f0;display:flex;flex-wrap:wrap;gap:6px">
        @foreach(explode(',',$post->tags) as $tag)
        <span style="background:#f1f5f9;color:#64748b;padding:4px 14px;border-radius:999px;font-size:12px">#{{ trim($tag) }}</span>
        @endforeach
      </div>
      @endif

      {{-- Related Posts --}}
      @if($related->count() > 0)
      <div style="margin-top:48px;padding-top:32px;border-top:2px solid #f1f5f9">
        <h3 style="margin-bottom:20px">{{ t('مقالات ذات صلة','Related Posts') }}</h3>
        <div style="display:grid;grid-template-columns:repeat({{ min($related->count(),3) }},1fr);gap:16px">
          @foreach($related as $r)
          <a href="{{ route('blog.post',$r->slug) }}" style="border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;text-decoration:none;color:#0f172a;display:block;transition:all .2s">
            @if($r->cover)<img src="{{ asset($r->cover) }}" style="width:100%;height:120px;object-fit:cover">@endif
            <div style="padding:14px">
              <div style="font-weight:700;font-size:14px;margin-bottom:4px;line-height:1.4">{{ is_ar()?$r->title_ar:$r->title_en }}</div>
              <div style="font-size:11px;color:#94a3b8">{{ $r->published_at->format('Y-m-d') }}</div>
            </div>
          </a>
          @endforeach
        </div>
      </div>
      @endif

      {{-- Comments Section --}}
      @php
        $commentsEnabled = setting('comments_enabled','1') === '1';
        try {
          $commentsTableExists = \Illuminate\Support\Facades\Schema::hasTable('ms_comments');
        } catch(\Exception $e) {
          $commentsTableExists = false;
        }
      @endphp
      @if($commentsEnabled && $commentsTableExists)
      <div style="margin-top:48px;padding-top:32px;border-top:2px solid #f1f5f9">
        <h3 style="margin-bottom:24px">
          💬 {{ t('التعليقات','Comments') }}
          @php $approvedCount = $post->comments()->where('status','approved')->count(); @endphp
          @if($approvedCount > 0)<span class="badge badge-blue" style="font-size:13px">{{ $approvedCount }}</span>@endif
        </h3>

        {{-- Existing Comments --}}
        @php $comments = $post->comments()->where('status','approved')->latest('created_at')->get(); @endphp
        @forelse($comments as $comment)
        <div style="padding:16px;background:#f8fafc;border-radius:12px;margin-bottom:12px;border-right:3px solid #2563eb">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
            <div style="width:36px;height:36px;border-radius:50%;background:#eff6ff;display:flex;align-items:center;justify-content:center;font-weight:700;color:#2563eb;flex-shrink:0">{{ mb_strtoupper(mb_substr($comment->name,0,1,'UTF-8')) }}</div>
            <div>
              <div style="font-weight:700;font-size:14px">{{ $comment->name }}</div>
              <div style="font-size:11px;color:#94a3b8">{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</div>
            </div>
          </div>
          <p style="font-size:14px;color:#334155;margin:0;line-height:1.7">{{ $comment->content }}</p>
        </div>
        @empty
        <p style="color:#94a3b8;font-size:14px;padding:20px;text-align:center;background:#f8fafc;border-radius:10px">
          {{ t('لا يوجد تعليقات بعد — كن أول من يعلق!','No comments yet — be the first to comment!') }}
        </p>
        @endforelse

        {{-- Comment Form --}}
        @if(session('success'))
        <div class="alert alert-success" style="margin:16px 0">✅ {{ session('success') }}</div>
        @endif
        @if($errors->has('captcha_answer'))
        <div class="alert alert-error" style="margin:16px 0">❌ {{ $errors->first('captcha_answer') }}</div>
        @endif

        <div style="background:#fff;border:1.5px solid #e2e8f0;border-radius:14px;padding:24px;margin-top:24px">
          <h4 style="margin-bottom:20px">✏️ {{ t('أضف تعليقاً','Add a Comment') }}</h4>
          <form method="POST" action="{{ route('comment.submit',$post->id) }}">
            @csrf
            <div class="form-row">
              <div class="form-group">
                <label class="form-label">{{ t('الاسم','Name') }} *</label>
                <input type="text" name="name" class="form-input" value="{{ old('name') }}" required>
              </div>
              <div class="form-group">
                <label class="form-label">{{ t('البريد الإلكتروني','Email') }} *</label>
                <input type="email" name="email" class="form-input" value="{{ old('email') }}" required>
                <div style="font-size:11px;color:#94a3b8;margin-top:3px">{{ t('لن يُنشر','Will not be published') }}</div>
              </div>
            </div>
            <div class="form-group">
              <label class="form-label">{{ t('تعليقك','Your Comment') }} *</label>
              <textarea name="content" class="form-input" rows="4" required>{{ old('content') }}</textarea>
            </div>

            {{-- Math Captcha --}}
            @php
              $n1 = rand(1,9); $n2 = rand(1,9);
              session(['captcha_result' => $n1 + $n2]);
            @endphp
            <div class="form-group">
              <label class="form-label">🔢 {{ t('تحقق بشري','Human Verification') }}: {{ $n1 }} + {{ $n2 }} = ?</label>
              <input type="number" name="captcha_answer" class="form-input" required style="max-width:120px" placeholder="...">
              <input type="hidden" name="captcha_result" value="{{ $n1 + $n2 }}">
            </div>

            <button type="submit" class="btn btn-primary">
              💬 {{ t('نشر التعليق','Post Comment') }}
            </button>
            @if(setting('comments_auto','0') === '0')
            <span style="font-size:12px;color:#94a3b8;margin-right:10px">
              ⏳ {{ t('سيظهر بعد المراجعة','Will appear after review') }}
            </span>
            @endif
          </form>
        </div>
      </div>
      @endif

      <div style="margin-top:32px">
        <a href="{{ route('blog') }}" class="btn btn-outline">← {{ t('رجوع للمدونة','Back to Blog') }}</a>
      </div>
    </div>
  </section>
</article>
@endsection