@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }
    #blogs-table th, #blogs-table td {
        vertical-align: middle;
        text-align: center;
    }
</style>

<div class="col-12">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center w-100" style="direction: rtl;">
      <h3 class="card-title mb-0">المدونات</h3>
      <a href="{{ route('dashboard.blogs.create') }}" class="btn btn-success">إضافة مدونة</a>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table id="blogs-table" class="table table-bordered table-hover text-center" style="direction: rtl;">
          <thead>
            <tr>
              <th>#</th>
              <th>العنوان</th>
              <th>التفاصيل</th>
              <th>الصورة</th>
              <th>العمليات</th>
              <th>حالة النشر</th>
            </tr>
          </thead>
          <tbody>
            @forelse ($blogs as $index => $blog)
              <tr>
                <td>{{ $blogs->firstItem() + $index }}</td>
                <td>{{ $blog->title }}</td>
                <td>
                  @if (strlen($blog->content) > 100)
                    {{ Str::limit($blog->content, 100) }}
                    <a href="#" class="read-more" data-content="{{ $blog->content }}">...اقرأ المزيد</a>
                  @else
                    {{ $blog->content }}
                  @endif
                </td>
                <td>
                  <img src="{{ $blog->image }}" alt="blog.jpg" style="width: 4rem; border-radius: 5px;">
                </td>
                <td>
                  <a href="{{ route('dashboard.blogs.edit', $blog->id) }}" class="btn btn-info btn-sm mb-1">تعديل</a>
                  <form action="{{ route('dashboard.blogs.delete', $blog->id) }}" method="POST" style="display: inline-block;" onsubmit="return confirm('هل أنت متأكد من حذف هذه المدونة؟');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger btn-sm">حذف</button>
                  </form>
                </td>
                <td>
                  <a href="{{ route('dashboard.blogs.change_published_status', $blog->id) }}" 
                     class="btn {{ $blog->published_status == 1 ? 'btn-success' : 'btn-warning' }} btn-sm">
                    {{ $blog->published_status == 1 ? 'تعطيل' : 'تفعيل' }}
                  </a>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="6" class="text-muted">لا توجد مدونات حالياً</td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      {{-- ✅ الباجيناشن داخل الكارد بشكل منسق --}}
      <div class="row mt-4">
        <div class="col-12 d-flex justify-content-end">
          {{ $blogs->links() }}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.read-more').forEach(function(link) {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      let td = this.parentElement;
      td.innerHTML = this.dataset.content;
    });
  });
});
</script>
@endsection