@extends('layouts.user')
@section('full', true)
@section('content')
  <!DOCTYPE html>
  <html lang="id">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pencarian Koleksi Buku - Pustaka Nawasena</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
      body {
        background: linear-gradient(to bottom, #fff8f0 0%, #ffffff 100%);
        min-height: 100vh;
      }

      .search-btn-bg {
        background-color: #f59e0b;
      }

      .search-btn-bg:hover {
        background-color: #d97706;
      }
    </style>
  </head>

  <body class="flex flex-col items-center justify-start">

    <div class="w-full max-w-[1440px] px-4 md:px-8 py-6">

      <div class="bg-white w-full p-5 md:p-8 rounded-2xl shadow-lg mb-8 border border-gray-100">
        <form method="GET" action="{{ route('user.koleksi') }}" class="space-y-5">
          <h2 class="text-lg md:text-xl font-bold text-gray-800 border-b pb-3">
            🔍 Kriteria Pencarian
          </h2>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <select name="kategori" class="p-3 border border-gray-300 rounded-lg text-sm shadow-sm">
              <option value="">Mencari seluruh database</option>
              <option value="judul" {{ request('kategori') == 'judul' ? 'selected' : '' }}>Judul</option>
              <option value="pengarang" {{ request('kategori') == 'pengarang' ? 'selected' : '' }}>Pengarang</option>
              <option value="isbn" {{ request('kategori') == 'isbn' ? 'selected' : '' }}>ISBN / Kode Eksemplar</option>
            </select>

            <select class="p-3 border border-gray-300 rounded-lg text-sm shadow-sm">
              <option>Isi konten</option>
            </select>
          </div>

          <div class="flex flex-col sm:flex-row items-center gap-3">
            <input type="text" name="search" value="{{ request('search') }}"
              placeholder="Masukkan istilah pencarian Anda..."
              class="w-full sm:flex-1 p-3 border border-gray-300 rounded-lg text-sm focus:ring-amber-500 focus:border-amber-500 transition">
            <button
              class="search-btn-bg w-full sm:w-auto px-5 py-3 rounded-lg text-white font-semibold text-sm shadow-md hover:shadow-lg transition">
              <i class="bi bi-search mr-1"></i> CARI
            </button>
          </div>
        </form>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">

        <div class="lg:col-span-3 bg-white p-5 rounded-2xl shadow-md border border-gray-100">
          <h2 class="text-sm md:text-base font-medium text-gray-600 border-b pb-3 mb-4">
            Hasil pencarian:
            <span class="font-bold text-gray-800">
              Menampilkan {{ $koleksi->firstItem() ?? 0 }}–{{ $koleksi->lastItem() ?? 0 }} dari {{ $koleksi->total() }}
              hasil
            </span>
          </h2>

          @forelse($koleksi as $item)
            @if($item->kode_eksemplar)
              <a href="{{ route('user.koleksi.show', ['koleksi' => $item->kode_eksemplar]) }}" class="...">
                {{ $item->title }}
              </a>

              <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div class="flex items-center gap-4">
                  <div
                    class="w-16 h-24 rounded-md overflow-hidden bg-gray-100 flex items-center justify-center shadow-sm shrink-0">
                    @if ($item->image)
                      <img src="{{ asset('storage/' . $item->image) }}" alt="Sampul Buku" class="object-cover w-full h-full">
                    @else
                      <i class="bi bi-book text-gray-400 text-3xl"></i>
                    @endif
                  </div>

                  <div>
                    <h3 class="font-semibold text-gray-800 text-sm md:text-base leading-snug hover:text-blue-600 transition">
                      {{ $item->title ?? '-' }}
                    </h3>
                    <p class="text-xs md:text-sm text-gray-500">Pengarang: {{ $item->sor ?? '-' }}</p>
                    <p class="text-xs text-gray-400 mt-1">Tahun: {{ $item->publish_year ?? '-' }}</p>
                    <p class="text-xs text-gray-400">Kode: {{ $item->kode_eksemplar ?? '-' }}</p>
                  </div>
                </div>

                <div class="flex items-center justify-between sm:justify-end gap-3">
                  <div class="flex text-yellow-400 text-sm">
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star-fill"></i>
                    <i class="bi bi-star"></i>
                  </div>

                  @php $status = $item->isBorrowed() ? 'Dipinjam' : 'Tersedia'; @endphp
                  <span class="px-3 py-1 text-xs font-semibold rounded-full 
                          {{ $status === 'Dipinjam' ? 'bg-yellow-100 text-yellow-700' : 'bg-green-100 text-green-700' }}">
                    {{ $status }}
                  </span>
                </div>
              </div>
            @endif
          @empty
            <div class="text-center text-gray-500 py-12">
              <i class="bi bi-inbox text-4xl text-gray-300 mb-3"></i>
              <p>Tidak ada hasil ditemukan.</p>
            </div>
          @endforelse

          <div class="pt-6 border-t mt-6">
            {{ $koleksi->appends(request()->except('page'))->links('pagination::tailwind') }}
          </div>
        </div>

        <div x-data="{ open: false }" class="lg:col-span-1 bg-white p-5 rounded-2xl shadow-md border border-gray-100">
          <div class="flex items-center justify-between border-b pb-3 mb-4">
            <h3 class="text-base md:text-lg font-bold text-gray-800 flex items-center gap-2">
              <i class="bi bi-funnel-fill text-blue-600"></i> Filter Lanjutan
            </h3>
            <button type="button" class="lg:hidden text-blue-600" @click="open = !open">
              <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
            </button>
          </div>

          <form method="GET" action="{{ route('user.koleksi') }}" class="space-y-4"
            :class="{ 'hidden': !open && window.innerWidth < 1024 }">
            <input type="hidden" name="kategori" value="{{ request('kategori') }}">
            <input type="hidden" name="search" value="{{ request('search') }}">

            <div>
              <label class="text-gray-600 font-semibold text-sm">Tipe Sumber Daya</label>
              <select name="tipe" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                <option value="">Semua tipe</option>
                <option value="buku" {{ request('tipe') == 'buku' ? 'selected' : '' }}>Buku</option>
                <option value="majalah" {{ request('tipe') == 'majalah' ? 'selected' : '' }}>Majalah</option>
                <option value="skripsi" {{ request('tipe') == 'skripsi' ? 'selected' : '' }}>Skripsi</option>
                <option value="digital" {{ request('tipe') == 'digital' ? 'selected' : '' }}>E-book / Digital</option>
              </select>
            </div>

            <div>
              <label class="text-gray-600 font-semibold text-sm">Subjek</label>
              <select name="subjek" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                <option value="">Semua subjek</option>
                <option value="umum" {{ request('subjek') == 'umum' ? 'selected' : '' }}>Umum</option>
                <option value="sains" {{ request('subjek') == 'sains' ? 'selected' : '' }}>Sains</option>
                <option value="teknologi" {{ request('subjek') == 'teknologi' ? 'selected' : '' }}>Teknologi</option>
                <option value="sosial" {{ request('subjek') == 'sosial' ? 'selected' : '' }}>Ilmu Sosial</option>
                <option value="agama" {{ request('subjek') == 'agama' ? 'selected' : '' }}>Agama</option>
              </select>
            </div>

            <div>
              <label class="text-gray-600 font-semibold text-sm">Tahun Terbit</label>
              <div class="flex gap-2">
                <input type="number" name="tahun_min" placeholder="Dari" value="{{ request('tahun_min') }}"
                  class="w-1/2 p-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                <input type="number" name="tahun_max" placeholder="Sampai" value="{{ request('tahun_max') }}"
                  class="w-1/2 p-2 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
              </div>
            </div>

            <div>
              <label class="text-gray-600 font-semibold text-sm">Lokasi Rak</label>
              <select name="lokasi" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                <option value="">Semua lokasi</option>
                <option value="lantai1" {{ request('lokasi') == 'lantai1' ? 'selected' : '' }}>Rak 1</option>
                <option value="lantai2" {{ request('lokasi') == 'lantai2' ? 'selected' : '' }}>Rak 2</option>
                <option value="lantai3" {{ request('lokasi') == 'lantai' ? 'selected' : '' }}>Rak 3</option>
                <option value="digital" {{ request('lokasi') == 'digital' ? 'selected' : '' }}>Digital</option>
              </select>
            </div>

            <div>
              <label class="text-gray-600 font-semibold text-sm">Status Buku</label>
              <select name="status" class="w-full p-3 border border-gray-300 rounded-md text-sm focus:ring-blue-500">
                <option value="">Semua status</option>
                <option value="tersedia" {{ request('status') == 'tersedia' ? 'selected' : '' }}>Tersedia</option>
                <option value="dipinjam" {{ request('status') == 'dipinjam' ? 'selected' : '' }}>Dipinjam</option>
              </select>
            </div>

            <div class="pt-3 space-y-3">
              <button
                class="w-full px-5 py-3 bg-blue-600 text-white rounded-lg text-base font-semibold hover:bg-blue-700 transition">
                Terapkan Filter
              </button>
              <a href="{{ route('user.koleksi') }}"
                class="block text-center w-full px-5 py-3 bg-red-500 text-white rounded-lg text-base font-semibold hover:bg-red-600 transition">
                Reset Filter
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
  </body>

  </html>
@endsection