@extends('layouts.user-koleksi') 
@section('content')

<div class="max-w-md mx-auto bg-white shadow-lg rounded-2xl overflow-hidden mt-10 border border-orange-300">
  <div class="flex flex-col items-center bg-gradient-to-b from-orange-50 to-white p-6 pb-3 relative">
    @if ($koleksi->image)
      <div class="w-48 aspect-[4/3] rounded-lg overflow-hidden shadow-md border border-gray-200">
        <img 
          src="{{ asset('storage/' . $koleksi->image) }}" 
          alt="{{ $koleksi->title }}" 
          class="w-full h-full object-cover"
        >
      </div>
    @else
      <div class="w-48 aspect-[4/3] bg-gray-100 flex items-center justify-center rounded-lg shadow-md">
        <i class="bi bi-book text-5xl text-gray-400"></i>
      </div>
    @endif

    <div class="mt-3 text-center">
      @if ($koleksi->borrowTransactions->whereIn('status', ['menunggu','disetujui','dipinjam','pengembalian_menunggu'])->count() > 0)
        <span class="inline-block bg-orange-500 text-black font-semibold px-6 py-2 rounded-full shadow-md">
          DIPINJAM
        </span>
      @else
        <span class="inline-block bg-orange-500 text-black font-semibold px-6 py-2 rounded-full shadow-md">
          TERSEDIA
        </span>
      @endif
    </div>
  </div>

  <div class="p-6 border-t border-gray-200">
    <h1 class="text-lg font-bold text-gray-800 mb-1 text-center">{{ $koleksi->title ?? '-' }}</h1>
    <div class="border-t border-orange-200 my-4"></div>
    <h2 class="text-base font-semibold text-orange-600 mb-3 border-b-2 border-orange-400 inline-block">
      Informasi Buku
    </h2>

    <table class="w-full text-sm text-gray-700 mb-6 border border-orange-100 rounded-lg overflow-hidden">
      </tr>
      <tr class="border-b border-orange-100">
        <td class="py-2 px-3 font-medium text-gray-600 bg-orange-50">Pengarang</td>
        <td class="py-2 px-3">{{ $koleksi->sor ?? '-' }}</td>
      </tr>
      <tr class="border-b border-orange-100">
        <td class="py-2 px-3 font-medium text-gray-600 bg-orange-50">Tahun Terbit</td>
        <td class="py-2 px-3">{{ $koleksi->publish_year ?? '-' }}</td>
      </tr>
      <tr>
        <td class="py-2 px-3 font-medium text-gray-600 bg-orange-50">Kode Eksemplar</td>
        <td class="py-2 px-3">{{ $koleksi->kode_eksemplar ?? '-' }}</td>
      </tr>
      <tr>
        <td class="py-2 px-3 font-medium text-gray-600 bg-orange-50">Nomor Klasifikasi</td>
        <td class="py-2 px-3">{{ $koleksi->classification ?? '-' }}</td>
      </tr>
    </table>
  </div>
</div>

@endsection