@extends('layouts.user')

@section('full', true)

@section('content')
<!-- Tailwind, AlpineJS & Icon CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

<!-- Google Fonts: Inter Standar Dokumentasi Kedinasan Modern -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

<!-- PERBAIKAN SINTAKS x-data: Menggunakan objek mentah mentah tanpa intervensi kurung kurawal Blade -->
<div class="min-h-screen bg-[#FCF9F5] py-6 sm:py-8 px-4 sm:px-6 lg:px-8 font-sans text-slate-900" style="font-family: 'Inter', sans-serif;"
     x-data="{ 
        currentDate: '', 
        currentTime: '',
        updateTime() {
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            const now = new Date();
            this.currentDate = now.toLocaleDateString('id-ID', options);
            this.currentTime = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' }) + ' WIB';
        }
     }" 
     x-init="updateTime(); setInterval(() => updateTime(), 1000)">
     
    <div class="max-w-7xl mx-auto">
        
        <!-- SUB-HEADER INFORMASI & JAM DIGITAL (TEMA ORANGE NAWASENA) -->
        <div class="bg-white border-t-4 border-orange-500 border-x border-b border-orange-100 rounded-xl p-4 sm:p-6 shadow-sm mb-6 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
            <div class="space-y-1 w-full md:w-auto">
                <nav class="flex flex-wrap items-center gap-1.5 text-[11px] font-bold text-orange-400 uppercase tracking-wider">
                    <span class="text-slate-400">Layanan Elektronik</span>
                    <i class="bi bi-chevron-right text-[9px] text-slate-300"></i>
                    <span class="text-orange-600">Katalog Pustaka</span>
                </nav>
                <h1 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight leading-tight">
                    Pustaka <span class="text-orange-500 font-bold">Nawasena</span>
                </h1>
                <!-- SUB-BAB UNIT KERJA RESMI -->
                <div class="inline-flex items-center gap-1.5 px-2.5 py-1 bg-orange-500/10 border border-orange-500/20 rounded-md text-orange-800 font-bold uppercase tracking-wider text-[10px] mt-1 shadow-sm">
                    <i class="bi bi-geo-alt-fill text-orange-500"></i> Bakorwil III Malang
                </div>
            </div>
            
            <!-- Widget Waktu & Statistik -->
            <div class="w-full md:w-auto flex flex-col sm:flex-row items-stretch sm:items-center gap-3 self-stretch md:self-auto">
                <!-- Live Jam & Tanggal -->
                <div class="bg-orange-50/50 border border-orange-100 rounded-lg px-4 py-2.5 flex items-center gap-3 flex-1 sm:flex-none">
                    <i class="bi bi-calendar3 text-orange-500 text-sm hidden sm:block"></i>
                    <div class="leading-tight">
                        <div class="text-[10px] font-bold text-orange-400 uppercase tracking-wider"></div>
                        <div class="text-xs font-semibold text-slate-700">
                            <!-- AlpineJS text injection -->
                            <span x-text="currentDate"></span> — <span x-text="currentTime" class="font-mono text-orange-600 font-bold"></span>
                        </div>
                    </div>
                </div>
                
                <!-- Counter Jumlah Data -->
                <div class="bg-orange-500 border border-orange-600 rounded-lg px-4 py-2.5 flex flex-col justify-center text-center sm:text-left min-w-[120px] shadow-sm shadow-orange-500/20">
                    <div class="text-[10px] font-bold text-orange-100 uppercase tracking-wider">Total Koleksi</div>
                    <div class="text-lg font-black text-white tracking-tight">
                        {{ $koleksi->total() }} <span class="text-[11px] font-medium text-orange-200 uppercase tracking-normal">Item</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- MAIN LAYOUT -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            
            <!-- KIRI: DAFTAR DATA & PANEL CARI -->
            <main class="lg:col-span-8 order-1">
                
                <!-- Search Panel Komprehensif -->
                <div class="bg-white border border-orange-100 rounded-xl p-4 shadow-sm mb-6">
                    <form method="GET" action="{{ route('user.koleksi') }}" class="flex flex-col sm:flex-row items-stretch gap-3">
                        <div class="flex items-center flex-1 bg-orange-50/30 border border-orange-100 rounded-lg px-3 py-2.5 focus-within:bg-white focus-within:ring-2 focus-within:ring-orange-500/10 focus-within:border-orange-500 transition-all">
                            <i class="bi bi-search text-orange-400 mr-2.5 text-sm"></i>
                            <input type="text" name="search" value="{{ request('search') }}" 
                                class="w-full bg-transparent border-none focus:ring-0 text-slate-800 placeholder-slate-400 text-xs font-medium outline-none" 
                                placeholder="Masukkan Judul Buku, Penulis, atau No. ISBN...">
                        </div>
                        <button type="submit" class="px-5 py-2.5 bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold tracking-wide transition-all rounded-lg shadow-sm shadow-orange-500/10 flex items-center justify-center gap-2 shrink-0">
                            <i class="bi bi-filter-circle"></i> Cari Koleksi
                        </button>
                    </form>
                </div>

                <!-- Grid Data List -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-5">
                    @forelse($koleksi as $item)
                    <div class="group bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-orange-300 transition-all duration-200 flex flex-col justify-between">
                        
                        <!-- Header Card Status -->
                        <div class="bg-slate-50 border-b border-slate-100 px-4 py-2 flex items-center justify-between text-[11px]">
                            <span class="font-mono font-medium text-slate-500 bg-slate-200/60 px-1.5 py-0.5 rounded text-[10px]">{{ $item->kode_eksemplar }}</span>
                            
                            @php $status = $item->isBorrowed() ? 'Dipinjam' : 'Tersedia'; @endphp
                            <span class="inline-flex items-center gap-1 font-bold uppercase tracking-wider text-[9px] {{ $status === 'Dipinjam' ? 'text-rose-700 bg-rose-50 px-2 py-0.5 rounded' : 'text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded' }}">
                                <span class="h-1 w-1 rounded-full {{ $status === 'Dipinjam' ? 'bg-rose-500' : 'bg-emerald-500' }}"></span>
                                {{ $status }}
                            </span>
                        </div>

                        <!-- Konten Data -->
                        <div class="p-4 flex gap-4 items-start flex-1">
                            <div class="w-16 h-24 sm:w-20 sm:h-28 shrink-0 bg-slate-100 border border-slate-200 rounded overflow-hidden shadow-sm flex-none">
                                @if ($item->image)
                                    <img src="{{ asset('storage/' . $item->image) }}" class="w-full h-full object-cover" alt="Cover">
                                @else
                                    <div class="w-full h-full flex flex-col items-center justify-center gap-1 bg-orange-50/50 text-orange-200">
                                        <i class="bi bi-journal-bookmark text-lg"></i>
                                        <span class="text-[7px] font-bold uppercase tracking-wider text-orange-400">No Image</span>
                                    </div>
                                @endif
                            </div>

                            <div class="flex-1 min-w-0">
                                <h2 class="text-xs font-bold text-slate-900 leading-normal mb-1 line-clamp-2 uppercase tracking-tight group-hover:text-orange-600 transition-colors" title="{{ $item->title }}">
                                    {{ $item->title ?? 'Untitled Document' }}
                                </h2>
                                <p class="text-[11px] font-semibold text-orange-600 mb-3 truncate"><i class="bi bi-person text-slate-400 mr-1"></i>{{ $item->sor ?? 'Penulis Anonim' }}</p>
                                
                                <div class="space-y-1 text-[11px] border-t border-slate-100 pt-2">
                                    <div class="flex justify-between">
                                        <span class="text-slate-400">Tahun Terbit:</span>
                                        <span class="font-medium text-slate-700">{{ $item->publish_year ?? '-' }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Footer Link Detail -->
                        <div class="bg-slate-50 border-t border-slate-100 p-3 text-right mt-auto">
                            <a href="{{ route('user.koleksi.show', $item->kode_eksemplar) }}" 
                                class="w-full inline-flex items-center justify-center gap-1 px-3 py-1.5 text-[11px] font-bold text-slate-700 bg-white border border-slate-200 rounded hover:bg-orange-500 hover:text-white hover:border-orange-500 transition-all shadow-sm">
                                Periksa Eksemplar <i class="bi bi-chevron-right text-[9px]"></i>
                            </a>
                        </div>
                    </div>
                    @empty
                    <div class="col-span-full py-16 text-center border border-dashed border-orange-200 bg-white rounded-xl shadow-sm">
                        <i class="bi bi-folder-x text-4xl text-orange-300 block mb-2"></i>
                        <p class="text-slate-500 text-xs font-medium">Dokumen atau koleksi referensi tidak ditemukan</p>
                    </div>
                    @endforelse
                </div>

                <!-- Custom Elegant Pagination (Tema Orange Nawasena) -->
                <div class="mt-8 border-t border-slate-200 pt-4">
                    <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
                        
                        <div class="text-xs text-slate-500 font-medium order-2 sm:order-1 text-center sm:text-left">
                            Menampilkan <span class="font-bold text-slate-800">{{ $koleksi->firstItem() ?? 0 }}</span> - <span class="font-bold text-slate-800">{{ $koleksi->lastItem() ?? 0 }}</span> dari total <span class="font-bold text-slate-800">{{ $koleksi->total() }}</span> Koleksi.
                        </div>
                        
                        <div class="flex items-center gap-2 order-1 sm:order-2 w-full sm:w-auto justify-center sm:justify-end">
                            @if ($koleksi->onFirstPage())
                                <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-slate-100 text-slate-400 text-xs font-bold cursor-not-allowed border border-slate-200/60 select-none">
                                    <i class="bi bi-chevron-left text-[10px]"></i> Sebelumnya
                                </span>
                            @else
                                <a href="{{ $koleksi->previousPageUrl() }}" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 hover:bg-orange-50 text-xs font-bold transition-all shadow-sm">
                                    <i class="bi bi-chevron-left text-[10px]"></i> Sebelumnya
                                </a>
                            @endif

                            <div class="hidden sm:flex items-center gap-1 bg-orange-50/50 p-1 rounded-lg border border-orange-100">
                                @foreach ($koleksi->getUrlRange(max(1, $koleksi->currentPage() - 2), min($koleksi->lastPage(), $koleksi->currentPage() + 2)) as $page => $url)
                                    @if ($page == $koleksi->currentPage())
                                        <span class="inline-flex items-center justify-center w-7 h-7 bg-orange-500 rounded-md text-xs font-bold text-white shadow-sm">{{ $page }}</span>
                                    @else
                                        <a href="{{ $url }}" class="inline-flex items-center justify-center w-7 h-7 rounded-md text-xs font-semibold text-slate-600 hover:bg-white hover:text-orange-500 border border-transparent hover:border-orange-100 transition-all">{{ $page }}</a>
                                    @endif
                                @endforeach
                            </div>

                            @if ($koleksi->hasMorePages())
                                <a href="{{ $koleksi->nextPageUrl() }}" class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-orange-500 text-white hover:bg-orange-600 shadow-sm text-xs font-bold transition-all group">
                                    Selanjutnya <i class="bi bi-chevron-right text-[10px] text-white/80 transition-transform group-hover:translate-x-0.5"></i>
                                </a>
                            @else
                                <span class="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg bg-slate-100 text-slate-400 text-xs font-bold cursor-not-allowed border border-slate-200/60 select-none">
                                    Selanjutnya <i class="bi bi-chevron-right text-[10px]"></i>
                                </span>
                            @endif
                        </div>

                    </div>
                </div>
            </main>

            <!-- KANAN: SIDEBAR FILTER -->
            <aside class="lg:col-span-4 bg-white border border-orange-100 rounded-xl shadow-sm overflow-hidden order-2 h-fit lg:sticky lg:top-6">
                <div class="bg-orange-50/80 border-b border-orange-100 px-4 py-3">
                    <h3 class="text-orange-900 text-xs font-bold uppercase tracking-wider flex items-center gap-2">
                        <i class="bi bi-funnel-fill text-orange-500"></i> Penyaringan Informasi
                    </h3>
                </div>
                
                <div class="p-4 sm:p-5">
                    <form action="{{ route('user.koleksi') }}" method="GET" class="space-y-5">
                        <input type="hidden" name="search" value="{{ request('search') }}">

                        <!-- Tipe Koleksi -->
                        <div class="space-y-2">
                            <label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Format Media</label>
                            <div class="grid grid-cols-1 sm:grid-cols-3 lg:grid-cols-1 gap-2">
                                @foreach(['buku' => 'Buku Fisik', 'digital' => 'Digital (E-Book)', 'majalah' => 'Jurnal'] as $key => $label)
                                <label class="flex items-center cursor-pointer group bg-orange-50/20 border border-slate-200 px-3 py-2 rounded transition-colors hover:border-orange-200">
                                    <input type="radio" name="tipe" value="{{ $key }}" {{ request('tipe') == $key ? 'checked' : '' }} 
                                           class="w-3.5 h-3.5 text-orange-500 border-slate-300 focus:ring-orange-500/20 focus:text-orange-500 checked:bg-orange-500">
                                    <span class="ml-2.5 text-xs font-medium text-slate-700 group-hover:text-orange-600 truncate">{{ $label }}</span>
                                </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- Rentang Tahun -->
                        <div class="space-y-2">
                            <label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Tahun Publikasi</label>
                            <div class="flex items-center gap-2">
                                <input type="number" name="tahun_min" placeholder="Mulai" value="{{ request('tahun_min') }}" 
                                    class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white rounded outline-none text-xs font-medium transition-all">
                                <span class="text-slate-300 text-xs font-bold">-</span>
                                <input type="number" name="tahun_max" placeholder="Akhir" value="{{ request('tahun_max') }}" 
                                    class="w-full px-3 py-1.5 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white rounded outline-none text-xs font-medium transition-all">
                            </div>
                        </div>

                        <!-- Status Ketersediaan -->
                        <div class="space-y-2">
                            <label class="block text-[11px] font-bold text-slate-400 uppercase tracking-wider">Status Ketersediaan</label>
                            <div class="relative">
                                <select name="status" class="w-full px-3 py-2 bg-slate-50 border border-slate-200 focus:border-orange-400 focus:bg-white outline-none text-xs font-medium rounded appearance-none cursor-pointer text-slate-700">
                                    <option value="">Semua Status</option>
                                    <option value="tersedia" {{ request('status') == 'tersedia' ? 'selected' : '' }}>Tersedia di Rak</option>
                                    <option value="dipinjam" {{ request('status') == 'dipinjam' ? 'selected' : '' }}>Sedang Dipinjam</option>
                                </select>
                                <i class="bi bi-chevron-down absolute right-3 top-1/2 -translate-y-1/2 text-[10px] text-slate-400 pointer-events-none"></i>
                            </div>
                        </div>

                        <!-- Buttons Action -->
                        <div class="pt-2 space-y-2">
                            <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded text-xs font-bold tracking-wide transition-all shadow-sm shadow-orange-500/10">
                                Terapkan Penyaringan
                            </button>
                            <a href="{{ route('user.koleksi') }}" class="block text-center text-xs font-semibold text-slate-400 hover:text-orange-500 transition-colors py-1">
                                Bersihkan Parameter
                            </a>
                        </div>
                    </form>
                </div>
            </aside>
        </div>
    </div>
</div>

<style>
    /* MENYEMBUNYIKAN SCROLLBAR PADA LEVEL GLOBAL (AGRESIF) */
    *::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    * {
        -ms-overflow-style: none !important;  /* IE & Edge */
        scrollbar-width: none !important;  /* Firefox */
    }

    html, body {
        overflow-y: auto; /* Halaman tetap bisa digulirkan menggunakan mouse/gesture tanpa memunculkan bilah visual */
    }

    /* Hide arrow spinner input number */
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
    }
</style>
@endsection