@extends('layouts.app')

@section('content')
<div class="lg:col-span-2">
  <x-custom.card title="Blogs">
    <x-slot:header>
      <x-custom.button href="{{ route('blogs.create') }}">New Blog</x-custom.button>
    </x-slot:header>

    <div class="custom-scrollbar max-w-full overflow-x-auto overflow-y-visible">
      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
        <form method="GET" class="flex items-center gap-3">
          <select name="category" class="rounded-lg border border-gray-300 bg-transparent px-3 py-2">
            <option value="">All Categories</option>
            @foreach($categories as $cat)
              <option value="{{ $cat->id }}" @selected($categoryId == $cat->id)>{{ $cat->name }}</option>
            @endforeach
          </select>
          <input type="text" name="q" value="{{ request('q') }}" placeholder="Search..."
            class="w-1/3 px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white" />
          <button class="bg-brand-500 hover:bg-brand-600 text-white px-3 py-2 rounded-lg">Filter</button>
        </form>
      </div>

      <x-custom.table :pagination="$blogs" bodyId="blogs-body">
        <x-slot:head>
          <tr>
            <th class="w-12"></th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Title</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Category</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Meta Keywords</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Meta Description</th>
            <th class="px-4 py-3 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Image</th>
            <th class="px-4 py-3 text-right text-sm font-medium text-gray-600 dark:text-gray-300">Actions</th>
          </tr>
        </x-slot:head>
        <x-slot:body>
          @forelse($blogs as $blog)
            <tr data-id="{{ $blog->id }}">
              <td class="px-4 py-3 text-gray-400 cursor-grab">⋮⋮</td>
              <td class="px-4 py-3 font-medium">{{ $blog->title }}</td>
              <td class="px-4 py-3 text-gray-500">{{ $blog->category?->name }}</td>
              <td class="px-4 py-3 text-gray-500">{{ $blog->status }}</td>
              <td class="px-4 py-3 text-gray-500">{{ Str::limit($blog->meta_keywords ?? '', 50) }}</td>
              <td class="px-4 py-3 text-gray-500">{{ Str::limit($blog->meta_description ?? '', 80) }}</td>
              <td class="px-4 py-3">
                @php $img = $blog->image ?? null; @endphp
                @if(!empty($img))
                  <img src="{{ Str::startsWith($img, ['http://','https://']) ? $img : asset('storage/' . $img) }}" class="h-10 w-10 object-cover rounded-md border border-gray-200 dark:border-gray-700" alt="thumb">
                @else
                  <span class="text-gray-400 text-sm">—</span>
                @endif
              </td>
              <td class="px-4 py-3">
                <div class="flex items-center gap-2">
                  <x-custom.button href="{{ route('blogs.edit', $blog) }}">
                    <i class="fa fa-pencil"></i>
                  </x-custom.button>
                  <form method="POST" action="{{ route('blogs.delete', $blog) }}" class="inline" onsubmit="return confirm('Are you sure?')">
                    @csrf
                    <x-custom.button type="submit" btntype="btn-danger">
                      <i class="fa fa-trash"></i>
                    </x-custom.button>
                  </form>
                </div>
              </td>
            </tr>
          @empty
            <tr><td class="px-4 py-6 text-center text-gray-500" colspan="8">No blogs yet.</td></tr>
          @endforelse
        </x-slot:body>
      </x-custom.table>
    </div>
  </x-custom.card>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const el = document.getElementById('blogs-body');
    if (!el) return;

    new Sortable(el, {
      animation: 150,
      handle: 'td:first-child',
      draggable: 'tr',
      onEnd: () => {
        const ids = Array.from(el.querySelectorAll('tr[data-id]')).map(x => parseInt(x.dataset.id, 10));
        fetch("{{ route('blogs.sort') }}", {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').getAttribute('content')
          },
          body: JSON.stringify({ order: ids })
        }).then(r => r.json()).then(() => {
          // Optional: show toast
        });
      }
    });
  });
</script>
@endpush
@endsection