@extends('layouts.admin')

@section('title', 'Laporan Peminjaman')

@section('content')
    <x-page-header title="Laporan Peminjaman" />
    <x-card>
        <div class="mb-4 flex flex-col md:flex-row justify-between items-center gap-4">
            <p class="text-gray-500 text-sm">Berikut adalah seluruh rekap data peminjaman buku perpustakaan.</p>
            <button onclick="window.print()" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm transition-all flex items-center gap-2">
                <i class="fas fa-print"></i> Cetak Laporan
            </button>
        </div>

        <div class="overflow-x-auto print:overflow-visible">
            <x-table>
                <x-slot name="head">
                    <x-th>No</x-th>
                    <x-th>Peminjam</x-th>
                    <x-th>Buku</x-th>
                    <x-th>Tgl Pinjam</x-th>
                    <x-th>Tgl Kembali (Tenggat)</x-th>
                    <x-th>Tgl Dikembalikan</x-th>
                    <x-th>Denda</x-th>
                    <x-th>Status</x-th>
                </x-slot>
                
                @forelse($peminjaman as $index => $item)
                    <tr class="hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-0">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $index + 1 }}</td>
                        <td class="px-6 py-4">
                            @if($item->anggota)
                                <div class="text-sm font-bold text-gray-900">{{ $item->anggota->nama }}</div>
                                <div class="text-xs text-gray-500">ID: {{ $item->anggota->no_identitas }}</div>
                            @else
                                <div class="text-sm font-bold text-gray-900">{{ $item->user->name ?? 'Anonim' }}</div>
                                <div class="text-xs text-gray-400 italic">User Lama</div>
                            @endif
                        </td>
                        <td class="px-6 py-4">
                            <div class="text-sm font-bold text-gray-900 line-clamp-2 max-w-xs">{{ $item->buku->judul ?? 'Buku Dihapus' }}</div>
                            <div class="text-xs text-gray-500 mt-1">Ref: {{ $item->buku->bibid ?? '-' }}</div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                            {{ \Carbon\Carbon::parse($item->tanggal_pinjam)->format('d M Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">
                            {{ \Carbon\Carbon::parse($item->tanggal_kembali)->format('d M Y') }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700 font-medium">
                            @if($item->tanggal_dikembalikan)
                                <span class="text-green-600">{{ \Carbon\Carbon::parse($item->tanggal_dikembalikan)->format('d M Y') }}</span>
                            @else
                                <span class="text-gray-400 italic">-</span>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($item->denda > 0)
                                <div class="text-sm font-bold text-red-600">Rp {{ number_format($item->denda, 0, ',', '.') }}</div>
                            @else
                                <div class="text-sm text-gray-400">-</div>
                            @endif
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            @if($item->status_peminjaman == 'Dipinjam')
                                <x-badge color="yellow">Dipinjam</x-badge>
                            @else
                                <x-badge color="green">Dikembalikan</x-badge>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center text-gray-500 py-8">Belum ada data peminjaman untuk direkap.</td>
                    </tr>
                @endforelse
            </x-table>
        </div>
    </x-card>
    
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            .sidebar, header, nav, footer, button, .mb-4 {
                display: none !important;
            }
            .print\:overflow-visible, .print\:overflow-visible * {
                visibility: visible !important;
            }
            .print\:overflow-visible {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0 !important;
                padding: 0 !important;
            }
        }
    </style>
@endsection