@extends('layouts.app')

@section('titulo', 'Préstamos')
@section('subtitulo', 'Entregas y devoluciones de la biblioteca')

@php $in = 'w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100 transition'; $estadoActual = request('estado'); @endphp

@section('contenido')
<div class="flex items-center justify-between mb-4">
    <a href="{{ route('biblioteca.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600">
        <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="M15 19l-7-7 7-7"/></svg>
        Volver al catálogo
    </a>
    <div class="flex items-center gap-2">
        <a href="{{ route('biblioteca.prestamos') }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ ! $estadoActual ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">Todos</a>
        <a href="{{ route('biblioteca.prestamos', ['estado' => 'prestado']) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ $estadoActual === 'prestado' ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">Prestados</a>
        <a href="{{ route('biblioteca.prestamos', ['estado' => 'devuelto']) }}" class="text-sm px-3.5 py-1.5 rounded-lg font-medium transition {{ $estadoActual === 'devuelto' ? 'bg-brand-500 text-white shadow' : 'bg-white text-slate-600 hover:bg-slate-50' }}">Devueltos</a>
    </div>
</div>

@if ($errors->any())
    <div class="mb-5 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">{{ $errors->first() }}</div>
@endif

<div class="grid lg:grid-cols-3 gap-5">
    {{-- Nuevo préstamo --}}
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 h-fit">
        <h3 class="font-bold text-slate-800 mb-4">Nuevo préstamo</h3>
        <form method="POST" action="{{ route('biblioteca.prestar') }}" class="space-y-3">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Libro <span class="text-red-500">*</span></label>
                <select name="libro_id" required class="{{ $in }}">
                    <option value="">— Selecciona —</option>
                    @foreach ($libros as $l)
                        <option value="{{ $l->id }}" @selected(old('libro_id') == $l->id)>{{ $l->titulo }} ({{ $l->disponibles }} disp.)</option>
                    @endforeach
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Prestar a <span class="text-red-500">*</span></label>
                <select name="persona" required class="{{ $in }}">
                    <option value="">— Selecciona —</option>
                    <optgroup label="Estudiantes">
                        @foreach ($estudiantes as $e)
                            <option value="est:{{ $e->id }}" @selected(old('persona') === 'est:'.$e->id)>{{ $e->nombre_completo }}</option>
                        @endforeach
                    </optgroup>
                    <optgroup label="Docentes">
                        @foreach ($docentes as $d)
                            <option value="doc:{{ $d->id }}" @selected(old('persona') === 'doc:'.$d->id)>{{ $d->nombre_completo }}</option>
                        @endforeach
                    </optgroup>
                </select>
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Fecha de préstamo <span class="text-red-500">*</span></label>
                <input type="date" name="fecha_prestamo" value="{{ old('fecha_prestamo', now()->format('Y-m-d')) }}" required class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Devolución prevista</label>
                <input type="date" name="fecha_prevista" value="{{ old('fecha_prevista', now()->addDays(7)->format('Y-m-d')) }}" class="{{ $in }}">
            </div>
            <input type="text" name="observacion" placeholder="Observación (opcional)" class="{{ $in }}">
            <button type="submit" class="w-full rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold py-2.5 shadow-lg shadow-brand-500/30 transition">Registrar préstamo</button>
        </form>
    </div>

    {{-- Listado --}}
    <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-slate-400 bg-slate-50/60">
                        <th class="px-5 py-3 font-semibold">Libro</th>
                        <th class="px-5 py-3 font-semibold">Prestado a</th>
                        <th class="px-5 py-3 font-semibold">Devolución</th>
                        <th class="px-5 py-3 font-semibold text-center">Estado</th>
                        <th class="px-5 py-3 font-semibold text-right"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-50">
                    @forelse ($prestamos as $p)
                        <tr class="hover:bg-slate-50/60 transition">
                            <td class="px-5 py-3">
                                <p class="font-medium text-slate-800 truncate">{{ $p->libro?->titulo ?? '—' }}</p>
                                <p class="text-xs text-slate-400">{{ $p->fecha_prestamo?->format('d/m/Y') }}</p>
                            </td>
                            <td class="px-5 py-3">
                                <p class="text-slate-700 truncate">{{ $p->persona() }}</p>
                                <p class="text-xs text-slate-400">{{ $p->tipoPersona() }}</p>
                            </td>
                            <td class="px-5 py-3">
                                @if ($p->estado === 'devuelto')
                                    <span class="text-slate-500">{{ $p->fecha_devolucion?->format('d/m/Y') }}</span>
                                @else
                                    <span class="{{ $p->estaVencido() ? 'text-red-600 font-medium' : 'text-slate-500' }}">{{ $p->fecha_prevista?->format('d/m/Y') ?? '—' }}</span>
                                    @if ($p->estaVencido())<span class="block text-xs text-red-400">{{ $p->diasRetraso() }} día(s) de retraso</span>@endif
                                @endif
                            </td>
                            <td class="px-5 py-3 text-center">
                                @if ($p->estado === 'devuelto')
                                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-emerald-50 text-emerald-600">Devuelto</span>
                                @elseif ($p->estaVencido())
                                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-red-50 text-red-600">Vencido</span>
                                @else
                                    <span class="text-xs font-medium px-2.5 py-1 rounded-lg bg-amber-50 text-amber-600">Prestado</span>
                                @endif
                            </td>
                            <td class="px-5 py-3 text-right">
                                @if ($p->estado !== 'devuelto')
                                    <form method="POST" action="{{ route('biblioteca.devolver', $p) }}">
                                        @csrf @method('PATCH')
                                        <button type="submit" class="text-xs font-semibold text-white bg-emerald-500 hover:bg-emerald-600 px-3 py-1.5 rounded-lg transition">Devolver</button>
                                    </form>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-5 py-10 text-center text-slate-400">No hay préstamos registrados.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="mt-5">{{ $prestamos->links() }}</div>
@endsection