@section('page-title', $pageTitle)
<x-app-layout>

    {{-- Filter Section --}}
    <div class="card mb-4">
        <div class="card-body">
            <form action="{{ route(request()->route()->getName()) }}" method="GET">
                <div class="row g-3 align-items-center">
                    <div class="col-md-4">
                        <input type="text" name="search" class="form-control"
                            placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
                    </div>
                    <div class="col-md-2">
                        <select name="kategori" class="form-select">
                            <option value="">Semua Kategori</option>
                            @foreach ($filterOptions['kategori'] as $kategori)
                                <option value="{{ $kategori }}"
                                    {{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="tahun" class="form-select">
                            <option value="">Semua Tahun</option>
                            @foreach ($filterOptions['tahun'] as $tahun)
                                <option value="{{ $tahun }}"
                                    {{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2">
                        <select name="penulis" class="form-select">
                            <option value="">Semua Penulis</option>
                            @foreach ($filterOptions['penulis'] as $penulis)
                                <option value="{{ $penulis }}"
                                    {{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 d-grid">
                        <button type="submit" class="btn btn-primary">Filter</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {{-- Katalog Buku Section --}}
    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
        @forelse ($semuaBuku as $buku)
            <div class="col">
                <div class="card h-100 shadow-sm border-0">
                    <img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
                        style="height: 310px;" alt="Cover {{ $buku['judul'] }}">

                    <div class="card-body d-flex flex-column p-3">
                        <div class="flex-grow-1">
                            <div class="mb-2">
                                <span class="badge fw-normal text-primary border me-1">{{ $buku['kategori'] }}</span>
                                <span
                                    class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
                            </div>
                            <h6 class="card-title fw-bold line-clamp-2">{{ $buku['judul'] }}</h6>
                            <p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
                        </div>

                        <div class="d-flex flex-column gap-2 mt-auto pt-2 border-top">
                            @php
                                $userBanned = $isBanned ?? false; 
                                $isOfflineAccess =
                                    $buku['tipe_akses'] === 'offline' ||
                                    (is_array($buku['tipe_akses']) && in_array('offline', $buku['tipe_akses']));
                                $isOnlineAccess =
                                    $buku['tipe_akses'] === 'online' ||
                                    (is_array($buku['tipe_akses']) && in_array('online', $buku['tipe_akses']));
                                $stokHabis = $buku['status'] == 'Dipinjam';
                            @endphp

                            {{-- TOMBOL PINJAM (OFFLINE) --}}
                            @if ($isOfflineAccess && $mode !== 'online')
                                @if ($stokHabis)
                                    @if (!$isOnlineAccess)
                                        <button class="btn btn-sm btn-light border w-100 text-muted" disabled><i
                                                class="bi bi-x-circle me-1"></i> Tidak Tersedia</button>
                                    @endif
                                @elseif($userBanned)
                                    {{-- LOGIC : Jika Banned, tombol Pinjam MATI --}}
                                    <button class="btn btn-sm btn-secondary w-100" disabled
                                        title="Akun Anda bermasalah">
                                        <i class="bi bi-lock-fill me-1"></i> Akun Dikunci
                                    </button>
                                @else
                                    <a href="{{ route('peminjaman.ringkasan', $buku['id']) }}"
                                        class="btn btn-sm btn-outline-primary w-100">
                                        <i class="bi bi-arrow-left-right me-1"></i> Pinjam
                                    </a>
                                @endif
                            @endif

                            {{-- TOMBOL BACA (ONLINE) - Selalu Nyala --}}
                            @if ($isOnlineAccess && $mode !== 'offline')
                                <a href="{{ route('baca.ringkasan', $buku['id']) }}"
                                    class="btn btn-sm btn-primary w-100">
                                    <i class="bi bi-book-half me-1"></i> Baca
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12">
                <div class="alert alert-warning text-center border-0 shadow-sm rounded-4 py-5 mb-0">
                    <div class="icon-circle bg-warning-subtle text-warning mx-auto mb-3" style="width: 80px; height: 80px; border-radius: 20px;">
                        <i class="bi bi-search fs-1"></i>
                    </div>
                    <h4 class="fw-bold mb-2" style="color: #856404;">Tidak Ada Hasil</h4>
                    <p class="text-muted">Tidak ada buku yang cocok dengan kriteria filter Anda.<br>Coba reset atau ubah filter pencarian Anda.</p>
                    <hr class="w-25 mx-auto my-4 opacity-10">
                    <a href="{{ route(request()->route()->getName()) }}" class="btn btn-warning px-4 rounded-pill fw-bold">
                        <i class="bi bi-arrow-counterclockwise me-1"></i> Reset Filter
                    </a>
                </div>
            </div>
        @endforelse
    </div>
</x-app-layout>
