@extends('layouts.admin')

@section('title', 'Detail Buku')

@section('content')
    <x-page-header title="Detail Buku" />

    <x-card class="max-w-2xl mx-auto">
        <div class="space-y-6">
            <div class="relative overflow-hidden rounded-lg bg-gray-50 border border-gray-100 p-6">
                <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Judul Buku</dt>
                        <dd class="mt-1 text-lg font-semibold text-gray-900">{{ $buku->judul }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Penulis</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $buku->pengarang }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Penerbit</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $buku->penerbit }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Tahun Terbit</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $buku->tahun_terbit }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Stok</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            <x-badge :color="$buku->stok > 0 ? 'green' : 'red'">
                                {{ $buku->stok }} Tersedia
                            </x-badge>
                        </dd>
                    </div>
                </dl>
            </div>

            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                <a href="{{ route('admin.buku.index') }}" class="text-gray-600 hover:text-gray-900 font-medium text-sm">
                    &larr; Kembali
                </a>
                <div class="flex gap-3">
                    <x-action-button href="{{ route('admin.buku.edit', $buku->id_buku) }}" variant="warning"
                        class="bg-yellow-50 px-4 py-2 rounded-lg">
                        Edit Buku
                    </x-action-button>
                </div>
            </div>
        </div>
    </x-card>
@endsection