@extends('layouts.app')

@section('titulo', 'Biblioteca')
@section('subtitulo', 'Catálogo de títulos y ejemplares')

@php $q = request('q'); $catActual = request('categoria'); @endphp

@section('contenido')
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
    @foreach ([
        ['Títulos', $kpis['titulos'], 'from-brand-500 to-brand-400', 'library'],
        ['Ejemplares', $kpis['ejemplares'], 'from-violet-500 to-fuchsia-400', 'book'],
        ['Prestados', $kpis['prestados'], 'from-amber-500 to-orange-400', 'clipboard'],
        ['Vencidos', $kpis['vencidos'], 'from-red-500 to-orange-400', 'calendar'],
    ] as [$label, $valor, $color, $icono])
        <div class="bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60 flex items-center gap-4">
            <div class="h-12 w-12 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg shrink-0">@include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])</div>
            <div><p class="text-2xl font-extrabold text-slate-800 leading-tight">{{ $valor }}</p><p class="text-sm text-slate-500">{{ $label }}</p></div>
        </div>
    @endforeach
</div>

<div class="flex flex-col sm:flex-row sm:items-center gap-3 mb-5">
    <form method="GET" class="relative flex-1 max-w-md">
        <svg class="h-5 w-5 text-slate-400 absolute left-3.5 top-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-4.35-4.35M11 19a8 8 0 100-16 8 8 0 000 16z"/></svg>
        @if ($catActual)<input type="hidden" name="categoria" value="{{ $catActual }}">@endif
        <input type="text" name="q" value="{{ $q }}" placeholder="Buscar título, autor, código o ISBN..."
               class="w-full rounded-xl border border-slate-200 bg-white pl-11 pr-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100">
    </form>
    <form method="GET">
        @if ($q)<input type="hidden" name="q" value="{{ $q }}">@endif
        <select name="categoria" onchange="this.form.submit()" class="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm outline-none focus:border-brand-400">
            <option value="">Todas las categorías</option>
            @foreach ($categorias as $c)
                <option value="{{ $c }}" @selected($catActual === $c)>{{ $c }}</option>
            @endforeach
        </select>
    </form>
    <div class="flex items-center gap-2 sm:ml-auto">
        <a href="{{ route('biblioteca.prestamos') }}" class="inline-flex items-center gap-2 rounded-xl bg-white border border-slate-200 hover:border-brand-300 text-slate-700 font-medium px-4 py-2.5 text-sm transition">Préstamos</a>
        <a href="{{ route('biblioteca.libros.create') }}" class="inline-flex items-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold px-4 py-2.5 shadow-lg shadow-brand-500/30 transition">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14"/></svg>
            Nuevo libro
        </a>
    </div>
</div>

@if ($libros->count())
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        @foreach ($libros as $l)
            <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-5 flex flex-col hover:shadow-md transition">
                <div class="flex items-start justify-between">
                    <span class="h-11 w-11 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center shrink-0">@include('partials.icon', ['name' => 'library', 'class' => 'h-5 w-5'])</span>
                    @if ($l->hayDisponibles())
                        <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-600">{{ $l->disponibles }} disponibles</span>
                    @else
                        <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-red-50 text-red-600">Sin stock</span>
                    @endif
                </div>
                <h3 class="mt-3 font-bold text-slate-800 line-clamp-2">{{ $l->titulo }}</h3>
                <p class="text-sm text-slate-500">{{ $l->autor ?? 'Autor desconocido' }}</p>
                <p class="text-xs text-slate-400 mt-1 font-mono">{{ $l->codigo }} @if($l->categoria) · {{ $l->categoria }} @endif</p>

                <div class="mt-4 pt-4 border-t border-slate-100 flex items-center justify-between">
                    <div class="text-xs text-slate-400">
                        <span class="font-semibold text-slate-600">{{ $l->prestados() }}</span> prestados de {{ $l->ejemplares }}
                        @if ($l->ubicacion)<span class="block">{{ $l->ubicacion }}</span>@endif
                    </div>
                    <div class="flex items-center gap-1.5">
                        <a href="{{ route('biblioteca.libros.edit', $l) }}" title="Editar" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-brand-50 text-slate-500 hover:text-brand-600 flex items-center justify-center transition">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </a>
                        <form method="POST" action="{{ route('biblioteca.libros.destroy', $l) }}" onsubmit="return confirm('¿Eliminar este libro del catálogo?');">
                            @csrf @method('DELETE')
                            <button type="submit" title="Eliminar" class="h-9 w-9 rounded-lg bg-slate-50 hover:bg-red-50 text-slate-500 hover:text-red-600 flex items-center justify-center transition">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="mt-5">{{ $libros->links() }}</div>
@else
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-12 text-center">
        <div class="mx-auto h-14 w-14 rounded-2xl bg-brand-50 text-brand-500 flex items-center justify-center mb-3">@include('partials.icon', ['name' => 'library', 'class' => 'h-7 w-7'])</div>
        <p class="text-slate-500 font-medium">El catálogo está vacío @if($q || $catActual)con esos filtros @endif</p>
        <a href="{{ route('biblioteca.libros.create') }}" class="mt-3 inline-block text-sm font-medium text-brand-600 hover:underline">Registrar el primer libro</a>
    </div>
@endif
@endsection