@extends('layouts.admin')

@section('title', 'Bibliothèque - Livres')

@section('page-title', 'Bibliothèque numérique')
@section('page-subtitle', 'Gestion des livres et ressources pédagogiques.')

@section('content')
<div class="space-y-6">
    <!-- Header actions -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div class="flex items-center gap-4">
            <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-2xl flex items-center justify-center">
                <i class="fa-solid fa-book-atlas text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold text-gray-900">{{ $books->total() }} livres</h3>
                <p class="text-sm text-gray-500">
                    {{ $books->where('available_copies', '>', 0)->count() }} disponibles
                </p>
            </div>
        </div>
        <a href="{{ route('admin.library.books.create') }}"
            class="inline-flex items-center gap-2 px-6 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-500/20">
            <i class="fa-solid fa-plus"></i>
            Ajouter un livre
        </a>
    </div>

    @if(session('success'))
        <div class="bg-green-50 border border-green-200 text-green-700 p-4 rounded-2xl font-medium">
            {{ session('success') }}
        </div>
    @endif

    <!-- Filters -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('admin.library.books.index') }}" class="flex flex-col sm:flex-row gap-4">
            <div class="flex-1">
                <input type="text" name="search" value="{{ request('search') }}"
                    placeholder="Rechercher par titre, auteur, ISBN..."
                    class="w-full px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50">
            </div>
            <select name="category" class="px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50">
                <option value="">Toutes les catégories</option>
                @foreach($categories as $cat)
                    <option value="{{ $cat }}" {{ request('category') === $cat ? 'selected' : '' }}>{{ $cat }}</option>
                @endforeach
            </select>
            <select name="status" class="px-4 py-2.5 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 bg-gray-50">
                <option value="">Tous les statuts</option>
                <option value="available" {{ request('status') === 'available' ? 'selected' : '' }}>Disponible</option>
                <option value="borrowed" {{ request('status') === 'borrowed' ? 'selected' : '' }}>Emprunté</option>
                <option value="maintenance" {{ request('status') === 'maintenance' ? 'selected' : '' }}>Maintenance</option>
            </select>
            <button type="submit" class="px-6 py-2.5 bg-gray-800 text-white font-bold rounded-xl hover:bg-gray-900 transition-all">
                Filtrer
            </button>
        </form>
    </div>

    <!-- Books table -->
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-gray-100 bg-gray-50/50">
                        <th class="text-left px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Livre</th>
                        <th class="text-left px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Auteur</th>
                        <th class="text-left px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Catégorie</th>
                        <th class="text-center px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Exemplaires</th>
                        <th class="text-center px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Statut</th>
                        <th class="text-right px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($books as $book)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-4">
                                    @if($book->cover_image)
                                        <img src="{{ asset('storage/' . $book->cover_image) }}" alt="{{ $book->title }}"
                                            class="w-10 h-14 object-cover rounded-lg shadow-sm">
                                    @else
                                        <div class="w-10 h-14 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <i class="fa-solid fa-book text-blue-500 text-sm"></i>
                                        </div>
                                    @endif
                                    <div>
                                        <p class="font-bold text-gray-900 truncate max-w-[200px]">{{ $book->title }}</p>
                                        @if($book->isbn)
                                            <p class="text-xs text-gray-400">ISBN: {{ $book->isbn }}</p>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">{{ $book->author }}</td>
                            <td class="px-6 py-4">
                                @if($book->category)
                                    <span class="px-3 py-1 bg-gray-100 text-gray-600 text-xs font-bold rounded-full">{{ $book->category }}</span>
                                @else
                                    <span class="text-gray-400 text-xs">—</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="font-bold text-gray-900">{{ $book->available_copies }}</span>
                                <span class="text-gray-400 text-xs">/{{ $book->total_copies }}</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if($book->status === 'available')
                                    <span class="px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full">Disponible</span>
                                @elseif($book->status === 'borrowed')
                                    <span class="px-3 py-1 bg-amber-100 text-amber-700 text-xs font-bold rounded-full">Emprunté</span>
                                @else
                                    <span class="px-3 py-1 bg-red-100 text-red-700 text-xs font-bold rounded-full">Maintenance</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-end gap-2">
                                    @if($book->file_path)
                                        <a href="{{ route('admin.library.books.download', $book) }}" 
                                            class="w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100 transition-all"
                                            title="Télécharger PDF">
                                            <i class="fa-solid fa-download text-xs"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('admin.library.books.edit', $book) }}"
                                        class="w-8 h-8 bg-gray-50 text-gray-600 rounded-lg flex items-center justify-center hover:bg-gray-100 transition-all"
                                        title="Modifier">
                                        <i class="fa-solid fa-pen text-xs"></i>
                                    </a>
                                    <form action="{{ route('admin.library.books.destroy', $book) }}" method="POST" class="inline"
                                        onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce livre ?');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100 transition-all"
                                            title="Supprimer">
                                            <i class="fa-solid fa-trash text-xs"></i>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="px-6 py-16 text-center">
                                <div class="w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mx-auto mb-4">
                                    <i class="fa-solid fa-book text-gray-400 text-2xl"></i>
                                </div>
                                <p class="text-gray-500 font-medium">Aucun livre trouvé</p>
                                <a href="{{ route('admin.library.books.create') }}" class="text-blue-600 font-bold text-sm hover:underline mt-2 inline-block">
                                    Ajouter votre premier livre
                                </a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($books->hasPages())
            <div class="px-6 py-4 border-t border-gray-100">
                {{ $books->links() }}
            </div>
        @endif
    </div>
</div>
@endsection