@extends('dashboard.layout')
@section('title','الفئات')
@section('container','container-fluid')

@section('content')
<div class="card card-dark p-3">
  <div class="d-flex flex-wrap gap-2 align-items-center justify-content-between mb-3">
    <h2 class="h6 m-0">قائمة الفئات</h2>
    <a href="{{ route('dashboard.catalogs.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus ms-1"></i> فئة جديدة</a>
  </div>

  <div class="table-responsive-stack">
    <table class="table align-middle mb-0">
      <thead><tr><th>#</th><th>الصورة</th><th>اسم الفئة</th><th>الوصف</th><th>المنتجات</th><th>خيارات</th></tr></thead>
      <tbody>
      @forelse($catalogs as $c)
        <tr>
          <td>{{ $c->id }}</td>
          <td>
            <img src="{{ $c->image ? asset('storage/'.$c->image) : 'https://ui-avatars.com/api/?name='.urlencode($c->name) }}"
                 style="width:46px;height:46px;object-fit:cover;border-radius:8px;">
          </td>
          <td class="fw-bold">{{ $c->name }}</td>
          <td class="text-muted">{{ \Illuminate\Support\Str::limit($c->description, 80) }}</td>
          <td>{{ $c->products_count ?? $c->products()->count() }}</td>
          <td class="d-flex flex-wrap gap-1">
            <a href="{{ route('dashboard.catalogs.edit',$c) }}" class="btn btn-sm btn-primary">تعديل</a>
            <form action="{{ route('dashboard.catalogs.destroy',$c) }}" method="POST" onsubmit="return confirm('حذف الفئة؟')">
              @csrf @method('DELETE')
              <button class="btn btn-sm btn-danger">حذف</button>
            </form>
          </td>
        </tr>
      @empty
        <tr><td colspan="6" class="text-muted">لا توجد فئات.</td></tr>
      @endforelse
      </tbody>
    </table>
  </div>

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