@extends('admin.layout')

@section('title', '📚 المقالات — نظام مقالاتي')

@push('css')
<style>
.table-glass {
  background: rgba(255,255,255,0.85);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.table thead {
  background: linear-gradient(90deg,#6C63FF,#00B4D8);
  color: #fff;
}
.table th, .table td {
  vertical-align: middle;
  text-align: center;
}
.status-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 13px;
}
.status-published { background: #d1fae5; color: #065f46; }
.status-draft { background: #fef3c7; color: #92400e; }
.action-btn {
  border: none;
  background: none;
  color: #6C63FF;
  transition: 0.2s;
}
.action-btn:hover { color: #00B4D8; transform: scale(1.2); }
</style>
@endpush

@section('content')
<div class="table-glass p-4">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h3 class="fw-bold text-primary m-0">📚 إدارة المقالات</h3>
    <a href="{{ route('admin.posts.create') }}" class="btn btn-gradient">🖋️ مقال جديد</a>
  </div>

  <div class="table-responsive">
    <table class="table align-middle">
      <thead>
        <tr>
          <th>#</th>
          <th>العنوان</th>
          <th>القسم</th>
          <th>الحالة</th>
          <th>تاريخ النشر</th>
          <th>العمليات</th>
        </tr>
      </thead>
      <tbody>
        @forelse($posts as $post)
        <tr>
          <td>{{ $post->id }}</td>
          <td class="text-start">{{ $post->title }}</td>
          <td>{{ $post->category->name ?? '-' }}</td>
          <td>
            <span class="status-pill {{ $post->status == 'published' ? 'status-published' : 'status-draft' }}">
              {{ $post->status == 'published' ? 'منشور' : 'مسودة' }}
            </span>
          </td>
          <td>{{ optional($post->published_at)->format('Y-m-d') ?? '-' }}</td>
          <td>
            <a href="{{ route('admin.posts.edit', $post) }}" class="action-btn"><i class="fas fa-edit"></i></a>
            <form method="POST" action="{{ route('admin.posts.destroy', $post) }}" style="display:inline">
              @csrf @method('DELETE')
              <button type="submit" class="action-btn text-danger" onclick="return confirm('هل تريد حذف المقال؟')">
                <i class="fas fa-trash"></i>
              </button>
            </form>
          </td>
        </tr>
        @empty
        <tr><td colspan="6" class="text-muted">لا توجد مقالات بعد.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div class="mt-3">
    {{ $posts->links() }}
  </div>
</div>
@endsection