@section('page-title', 'Ringkasan Buku')
<x-app-layout>
    <div class="d-flex flex-column" style="min-height: calc(100vh - 110px);">

        {{-- Header --}}
        <div class="d-flex align-items-center mb-4">
            <a href="{{ route('peminjaman.index')}}" class="btn btn-outline-secondary me-3">
                <i class="bi bi-arrow-left"></i>
            </a>
            <h1 class="h2 mb-0">Ringkasan Buku</h1>
        </div>

        {{-- Wrapper main content --}}
        <main class="flex-grow-1 d-flex align-items-center justify-content-center">
            <div class="container-fluid">
                <div class="row g-5 align-items-center">

                    {{-- Kolom Kiri untuk Cover Buku --}}
                    <div class="col-lg-4 text-center">
                        <img src="{{ asset($buku['cover']) }}" class="img-fluid rounded-3 shadow-lg"
                            style="max-height: 450px; max-width: 300px; object-fit: cover;" alt="Cover {{ $buku['judul'] }}">
                    </div>

                    {{-- Kolom Kanan untuk Detail & Button --}}
                    <div class="col-lg-8">
                        <h1 class="display-5 fw-bold mb-2">{{ $buku['judul'] }}</h1>
                        <p class="h5 text-muted mb-4">oleh {{ $buku['penulis'] }}</p>
                        
                        <p class="lead" style="text-align: justify;">
                            Ini adalah ringkasan atau sinopsis dari buku "{{ $buku['judul'] }}". Lorem ipsum dolor sit
                            amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
                            magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                            aliquip ex ea commodo consequat.
                        </p>

                        <div class="mt-5">
                            <a href="{{ route('peminjaman.form', $buku['id']) }}" class="btn btn-primary btn-lg rounded-pill px-5 py-3">
                                <i class="bi bi-file-earmark-text-fill me-2"></i>
                                Lanjutkan ke Form Peminjaman
                            </a>
                        </div>
                    </div>

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

        <footer class="mt-auto text-center text-muted py-3">
            <small>Copyright &copy; {{ date('Y') }} Perpus.</small>
        </footer>

    </div>
</x-app-layout>