@extends('dashboard.layouts.base')
@section('content')
<style>
    .card-header::after {
        content: none !important;
    }
    #stories-table th, #stories-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.success_stories.create') }}" class="btn btn-success">
        إضافة قصة
      </a>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table id="stories-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 ($stories as $index => $story)
              <tr>
                <td>{{ $stories->firstItem() + $index }}</td>
                <td>{{ $story->title }}</td>
                <td>
                  @if (strlen($story->description) > 100)
                    {{ Str::limit($story->description, 100) }}
                    <a href="#" class="read-more" data-content="{{ $story->description }}">...اقرأ المزيد</a>
                  @else
                    {{ $story->description }}
                  @endif
                </td>
                <td>
                  <img src="{{ $story->image }}" alt="story.jpg" style="width: 4rem; border-radius: 5px;">
                </td>
                <td>
                  <a href="{{ route('dashboard.success_stories.edit', $story->id) }}" class="btn btn-info btn-sm mb-1">تعديل</a>
                  <form action="{{ route('dashboard.success_stories.delete', $story->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.success_stories.change_published_status', $story->id) }}" 
                     class="btn {{ $story->published_status == 1 ? 'btn-success' : 'btn-warning' }} btn-sm">
                    {{ $story->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">
          {{ $stories->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