@extends('layouts.app')

@section('title', $post->title)

@section('content')
<div class="container py-4">

  @if(session('success'))
    <div class="alert alert-success">
      {{ session('success') }}
    </div>
  @endif

  <div class="row">
    <div class="col-md-8">

      {{-- عرض البوست --}}
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <h2 class="card-title mb-2">{{ $post->title }}</h2>
          <p class="small text-muted mb-3">
            By {{ $post->user->name ?? 'Unknown' }} ·
            {{ $post->created_at->format('M d, Y') }}
          </p>
          <div class="card-text">
            {!! nl2br(e($post->content)) !!}
          </div>
        </div>
      </div>

      {{-- الكومنتات --}}
      <div class="card mb-4 shadow-sm">
        <div class="card-body">
          <h5 class="mb-3">Comments ({{ $post->comments->count() }})</h5>

          {{-- فورم إضافة كومنت --}}
          @auth
            <form action="{{ route('comments.store', $post->id) }}" method="POST" class="mb-4">
              @csrf
              <div class="mb-3">
                <label for="comment-body" class="form-label">Add a comment</label>
                <textarea 
                  id="comment-body" 
                  name="body" 
                  class="form-control @error('body') is-invalid @enderror" 
                  rows="3" 
                  placeholder="Write your comment here...">{{ old('body') }}</textarea>
                @error('body')
                  <div class="invalid-feedback">
                    {{ $message }}
                  </div>
                @enderror
              </div>
              <button type="submit" class="btn btn-primary btn-sm">Post Comment</button>
            </form>
          @else
            <p class="text-muted">
              <a href="{{ route('login') }}">Login</a> to add a comment.
            </p>
          @endauth

          {{-- عرض الكومنتات --}}
          @forelse($post->comments as $comment)
            <div class="mb-3 border-bottom pb-2">
              <div class="d-flex justify-content-between">
                <strong>{{ $comment->user->name ?? 'Unknown' }}</strong>
                <span class="small text-muted">
                  {{ $comment->created_at->diffForHumans() }}
                </span>
              </div>
              <p class="mb-1">{{ $comment->body }}</p>
            </div>
          @empty
            <p class="text-muted mb-0">No comments yet. Be the first to comment!</p>
          @endforelse

        </div>
      </div>

    </div>

    <div class="col-md-4">
      {{-- سايدبار --}}
    </div>
  </div>
</div>
@endsection