@extends('layouts.user-koleksi') 

@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">

<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;">

    <div class="max-w-6xl mx-auto">
        
       

        <!-- MAIN LAYOUT: SPLIT GRID 2 KOLOM -->
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
            
            <!-- KOLOM KIRI: VISUAL COVER & STATUS (4 Kolom) -->
            <div class="lg:col-span-4 bg-white border border-orange-100 rounded-xl p-6 shadow-sm flex flex-col items-center">
                <div class="w-full max-w-[220px] aspect-[3/4] rounded-xl overflow-hidden shadow-md border border-slate-200 bg-slate-50 relative group">
                    @if ($koleksi->image)
                        <img 
                          src="{{ asset('storage/' . $koleksi->image) }}" 
                          alt="{{ $koleksi->title }}" 
                          class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
                        >
                    @else
                        <div class="w-full h-full flex flex-col items-center justify-center gap-2 text-slate-300">
                            <i class="bi bi-journal-bookmark text-5xl text-orange-200"></i>
                            <span class="text-[10px] font-bold uppercase tracking-widest text-orange-400">No Cover Available</span>
                        </div>
                    @endif
                </div>

                <!-- Indikator Status Sirkulasi Dokumen -->
                <div class="mt-6 w-full pt-4 border-t border-slate-100">
                    <div class="text-center">
                        <span class="block text-[10px] font-bold uppercase tracking-wider text-slate-400 mb-1.5">Status peminjaman</span>
                        @if ($koleksi->borrowTransactions->whereIn('status', ['menunggu','disetujui','dipinjam','pengembalian_menunggu'])->count() > 0)
                            <span class="inline-flex items-center justify-center gap-1.5 w-full bg-rose-50 border border-rose-200 text-rose-700 font-bold text-xs uppercase tracking-widest px-4 py-2.5 rounded-lg shadow-inner">
                                <span class="h-2 w-2 rounded-full bg-rose-500 animate-pulse"></span>
                                Sedang Dipinjam
                            </span>
                        @else
                            <span class="inline-flex items-center justify-center gap-1.5 w-full bg-emerald-50 border border-emerald-200 text-emerald-700 font-bold text-xs uppercase tracking-widest px-4 py-2.5 rounded-lg shadow-inner">
                                <span class="h-2 w-2 rounded-full bg-emerald-500"></span>
                                Tersedia
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            <!-- KOLOM KANAN: DOKUMENTASI & METADATA TEKNIS (8 Kolom) -->
            <div class="lg:col-span-8 bg-white border border-orange-100 rounded-xl p-6 md:p-8 shadow-sm">
                
                <!-- Identifikasi Dokumen Utama -->
                <div class="mb-6">
                    <span class="inline-block px-2 py-0.5 rounded bg-orange-100 text-orange-800 text-[10px] font-mono font-bold uppercase tracking-wider mb-2">
                        Detail Buku Koleksi
                    </span>
                    <h2 class="text-lg md:text-xl font-extrabold text-slate-900 tracking-tight leading-snug uppercase">
                        {{ $koleksi->title ?? 'Untitled Document' }}
                    </h2>
                </div>

                <div class="border-b border-orange-100 mb-6"></div>

                <!-- Sub-Bab Lembar Spesifikasi -->
                <div class="flex items-center gap-2 text-orange-600 font-bold text-xs uppercase tracking-wider mb-3">
                    <i class="bi bi-file-earmark-text-fill"></i> Lembar Spesifikasi Koleksi Resmi
                </div>

                <!-- Tabel Data Administratif Pemerintah -->
                <div class="border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                    <table class="w-full text-xs text-left text-slate-700 table-fixed sm:table-auto">
                        <tbody>
                            <!-- Baris Pengarang -->
                            <tr class="border-b border-slate-200 bg-white hover:bg-slate-50/60 transition-colors">
                                <td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 w-1/3 sm:w-1/4 border-r border-slate-200">
                                    Pengarang
                                </td>
                                <td class="py-3 px-4 font-semibold text-slate-800">
                                    {{ $koleksi->sor ?? '-' }}
                                </td>
                            </tr>
                            <!-- Baris Tahun Terbit -->
                            <tr class="border-b border-slate-200 bg-slate-50/30 hover:bg-slate-50/60 transition-colors">
                                <td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
                                    Tahun Publikasi
                                </td>
                                <td class="py-3 px-4 text-slate-800 font-mono">
                                    {{ $koleksi->publish_year ?? '-' }}
                                </td>
                            </tr>
                            <!-- Baris Kode Eksemplar -->
                            <tr class="border-b border-slate-200 bg-white hover:bg-slate-50/60 transition-colors">
                                <td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
                                    Kode Eksemplar
                                </td>
                                <td class="py-3 px-4 text-slate-800 font-mono font-bold tracking-wide">
                                    {{ $koleksi->kode_eksemplar ?? '-' }}
                                </td>
                            </tr>
                            <!-- Baris Nomor Klasifikasi -->
                            <tr class="bg-slate-50/30 hover:bg-slate-50/60 transition-colors">
                                <td class="py-3 px-4 font-bold text-slate-500 uppercase tracking-wider bg-orange-50/40 border-r border-slate-200">
                                    Kode Klasifikasi
                                </td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-0.5 bg-slate-200 text-slate-800 font-mono font-semibold rounded text-[11px] border border-slate-300/60 shadow-sm">
                                        {{ $koleksi->classification ?? '-' }}
                                    </span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Catatan Kaki Legalitas Aplikasi -->
                <div class="mt-6 p-3 bg-slate-50 border border-slate-200 rounded-lg flex items-start gap-2.5">
                    <i class="bi bi-info-circle-fill text-orange-500 text-xs shrink-0 mt-0.5"></i>
                    <p class="text-[10px] text-slate-400 font-medium leading-relaxed">
                        Data spesifikasi di atas merupakan pencatatan inventarisasi resmi milik Perpustakaan Pustaka Nawasena Bakorwil III Malang. Segala bentuk perubahan data wajib melalui approval administrator sistem informasi.
                    </p>
                </div>
            </div>

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

<style>
    /* PENYEMBUNYIAN SCROLLBAR AGRESIF UNTUK SELURUH ELEMEN */
    *::-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 dengan mouse/sentuhan, tetapi batangnya hilang */
    }
</style>
@endsection