@extends('layouts.admin')

@section('pageTitle', 'مدیریت کتاب‌ها')

@section('content')
<div class="container mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h3 class="text-gray-700 text-3xl font-medium">مدیریت کتاب‌ها</h3>
        <a href="{{ route('books.create') }}" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:bg-indigo-700">
            <i class="fas fa-plus ml-2"></i>افزودن کتاب
        </a>
    </div>

    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="p-4 overflow-x-auto">
            <table class="w-full display datatable">
                <thead>
                    <tr>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">عنوان</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">نویسنده</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">دسته‌بندی</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">فایل‌ها</th>
                        <th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-right text-xs font-semibold text-gray-600 uppercase tracking-wider">عملیات</th>
                    </tr>
                </thead>
                <tbody class="bg-white">
                    @foreach($books as $book)
                    <tr>
                        <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <div class="flex items-center">
                                @if($book->cover_image)
                                    <div class="flex-shrink-0 w-10 h-10">
                                        <img class="w-full h-full rounded-full object-cover" src="{{ asset('storage/' . $book->cover_image) }}" alt="" />
                                    </div>
                                @else
                                    <div class="flex-shrink-0 w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center">
                                        <i class="fas fa-book text-gray-500"></i>
                                    </div>
                                @endif
                                <div class="ml-3">
                                    <p class="text-gray-900 whitespace-no-wrap font-medium">
                                        {{ $book->title }}
                                    </p>
                                </div>
                            </div>
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <p class="text-gray-900 whitespace-no-wrap">{{ $book->author }}</p>
                        </td>
                         <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <span class="relative inline-block px-3 py-1 font-semibold text-indigo-900 leading-tight">
                                <span aria-hidden class="absolute inset-0 bg-indigo-200 opacity-50 rounded-full"></span>
                                <span class="relative">{{ $book->category->title ?? 'بدون دسته' }}</span>
                            </span>
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                            <div class="flex gap-2">
                                @if($book->pdf_file)
                                    <a href="{{ asset('storage/' . $book->pdf_file) }}" target="_blank" class="text-red-600 hover:text-red-900" title="PDF">
                                        <i class="fas fa-file-pdf text-xl"></i>
                                    </a>
                                @endif
                                @if($book->epub_file)
                                    <a href="{{ asset('storage/' . $book->epub_file) }}" target="_blank" class="text-green-600 hover:text-green-900" title="EPUB">
                                        <i class="fas fa-book-open text-xl"></i>
                                    </a>
                                @endif
                            </div>
                        </td>
                        <td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
                             <div class="flex items-center gap-3">
                                <a href="{{ route('books.edit', $book->id) }}" class="text-indigo-600 hover:text-indigo-900" title="ویرایش">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('books.destroy', $book->id) }}" method="POST" class="inline-block" onsubmit="return confirm('آیا مطمئن هستید؟')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-900" title="حذف">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-5 py-5 bg-white border-t border-gray-200">
            {{ $books->links() }}
        </div>
    </div>
</div>
@endsection