@extends('layouts.admin')

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

@section('page-title', 'Emprunts en cours')
@section('page-subtitle', 'Suivi des prêts et retours de livres.')

@section('content')
<div class="space-y-6">
    <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-amber-100 text-amber-600 rounded-2xl flex items-center justify-center">
                <i class="fa-solid fa-hand-holding-heart text-xl"></i>
            </div>
            <div>
                <h3 class="font-bold text-gray-900">{{ $issues->total() }} emprunts</h3>
                <p class="text-sm text-gray-500">
                    {{ $issues->where('status', 'borrowed')->count() }} en cours
                </p>
            </div>
        </div>
        <a href="{{ route('admin.library.issues.create') }}"
            class="inline-flex items-center gap-2 px-6 py-3 bg-amber-500 text-white font-bold rounded-xl hover:bg-amber-600 transition-all shadow-lg shadow-amber-500/20">
            <i class="fa-solid fa-plus"></i>
            Nouvel emprunt
        </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
    @if(session('error'))
        <div class="bg-red-50 border border-red-200 text-red-700 p-4 rounded-2xl font-medium">
            {{ session('error') }}
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-4">
        <form method="GET" action="{{ route('admin.library.issues.index') }}" class="flex flex-col sm:flex-row gap-4">
            <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="borrowed" {{ request('status') === 'borrowed' ? 'selected' : '' }}>Emprunté</option>
                <option value="returned" {{ request('status') === 'returned' ? 'selected' : '' }}>Retourné</option>
            </select>
            <select name="user_id" 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 étudiants</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" {{ request('user_id') === $user->id ? 'selected' : '' }}>{{ $user->name }}</option>
                @endforeach
            </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>

    <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">Étudiant</th>
                        <th class="text-left px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Date emprunt</th>
                        <th class="text-left px-6 py-4 text-xs font-bold uppercase text-gray-400 tracking-wider">Date retour</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($issues as $issue)
                        <tr class="hover:bg-gray-50/50 transition-colors {{ $issue->isOverdue() ? 'bg-red-50/30' : '' }}">
                            <td class="px-6 py-4">
                                <p class="font-bold text-gray-900 truncate max-w-[200px]">{{ $issue->book->title }}</p>
                                <p class="text-xs text-gray-400">{{ $issue->book->author }}</p>
                            </td>
                            <td class="px-6 py-4">
                                <p class="font-medium text-gray-700">{{ $issue->user->name }}</p>
                                <p class="text-xs text-gray-400">{{ $issue->user->email }}</p>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">
                                {{ $issue->borrowed_at ? $issue->borrowed_at->format('d/m/Y') : '—' }}
                            </td>
                            <td class="px-6 py-4 text-sm {{ $issue->isOverdue() ? 'text-red-600 font-bold' : 'text-gray-600' }}">
                                {{ $issue->due_at ? $issue->due_at->format('d/m/Y') : '—' }}
                                @if($issue->isOverdue())
                                    <span class="text-[10px] bg-red-100 text-red-600 px-2 py-0.5 rounded-full ml-1">En retard</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if($issue->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-green-100 text-green-700 text-xs font-bold rounded-full">Retourné</span>
                                @endif
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center justify-end gap-2">
                                    @if($issue->status === 'borrowed')
                                        <form action="{{ route('admin.library.issues.return', $issue) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="px-3 py-1.5 bg-green-500 text-white text-xs font-bold rounded-lg hover:bg-green-600 transition-all">
                                                Retourner
                                            </button>
                                        </form>
                                    @endif
                                    <form action="{{ route('admin.library.issues.destroy', $issue) }}" method="POST" class="inline"
                                        onsubmit="return confirm('Supprimer cet emprunt ?');">
                                        @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">
                                            <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-hand-holding-heart text-gray-400 text-2xl"></i>
                                </div>
                                <p class="text-gray-500 font-medium">Aucun emprunt enregistré</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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