@extends('layouts.admin')

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

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

    <x-card class="max-w-2xl mx-auto">
        <form action="{{ route('admin.buku.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Judul -->
            <div>
                <x-input-label for="judul" value="Judul Buku" />
                <x-text-input id="judul" name="judul" type="text" class="mt-1 block w-full" :value="old('judul')" required autofocus />
                <x-input-error class="mt-2" :messages="$errors->get('judul')" />
            </div>

            <!-- Penulis -->
            <div>
                <x-input-label for="pengarang" value="Pengarang" />
                <x-text-input id="pengarang" name="pengarang" type="text" class="mt-1 block w-full" :value="old('pengarang')" required />
                <x-input-error class="mt-2" :messages="$errors->get('pengarang')" />
            </div>

            <!-- Penerbit -->
            <div>
                <x-input-label for="penerbit" value="Penerbit" />
                <x-text-input id="penerbit" name="penerbit" type="text" class="mt-1 block w-full" :value="old('penerbit')" required />
                <x-input-error class="mt-2" :messages="$errors->get('penerbit')" />
            </div>

            <div class="grid grid-cols-2 gap-4">
                <!-- Tahun Terbit -->
                <div>
                    <x-input-label for="tahun_terbit" value="Tahun Terbit" />
                    <x-text-input id="tahun_terbit" name="tahun_terbit" type="number" class="mt-1 block w-full" :value="old('tahun_terbit')" required />
                    <x-input-error class="mt-2" :messages="$errors->get('tahun_terbit')" />
                </div>

                <!-- Stok -->
                <div>
                    <x-input-label for="stok" value="Stok" />
                    <x-text-input id="stok" name="stok" type="number" class="mt-1 block w-full" :value="old('stok')" required />
                    <x-input-error class="mt-2" :messages="$errors->get('stok')" />
                </div>
            </div>

            <div class="flex items-center justify-end gap-4 mt-6">
                <a href="{{ route('admin.buku.index') }}" class="text-gray-600 hover:text-gray-900 font-medium text-sm">
                    Batal
                </a>
                <x-primary-button>
                    Simpan Buku
                </x-primary-button>
            </div>
        </form>
    </x-card>
@endsection