@extends('layouts.admin')

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

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

    <x-card class="max-w-4xl mx-auto">

        @if(session('success'))
        <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 m-6 mb-0" role="alert">
            <p class="font-bold">Berhasil</p>
            <p>{{ session('success') }}</p>
        </div>
        @endif

        @if ($errors->any())
        <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 m-6 mb-0" role="alert">
            <p class="font-bold">Validasi Gagal</p>
            <ul class="list-disc ml-5">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
        @endif

        <form action="{{ route('admin.buku.store') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-6">
            @csrf
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <x-input-label for="bibid" value="BIBID" />
                    <x-text-input id="bibid" name="bibid" type="text" class="mt-1 block w-full" :value="old('bibid')" />
                </div>
                <div>
                    <x-input-label for="id_kategori" value="Kategori" />
                    <select id="id_kategori" name="id_kategori" class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm">
                        <option value="">Pilih Kategori</option>
                        @foreach($kategori as $kat)
                            <option value="{{ $kat->id_kategori }}" {{ old('id_kategori') == $kat->id_kategori ? 'selected' : '' }}>
                                {{ $kat->nama_kategori }}
                            </option>
                        @endforeach
                    </select>
                </div>
            </div>

            <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')" />
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <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')" />
                </div>
                <div>
                    <x-input-label for="nomor_panggil" value="Nomor Panggil (DDC)" />
                    <x-text-input id="nomor_panggil" name="nomor_panggil" type="text" class="mt-1 block w-full" :value="old('nomor_panggil')" />
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <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')" />
                </div>
                <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')" />
                </div>
                <div>
                    <x-input-label for="edisi" value="Edisi" />
                    <x-text-input id="edisi" name="edisi" type="text" class="mt-1 block w-full" :value="old('edisi')" />
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <x-input-label for="deskripsi_fisik" value="Deskripsi Fisik" />
                    <x-text-input id="deskripsi_fisik" name="deskripsi_fisik" type="text" class="mt-1 block w-full" :value="old('deskripsi_fisik')" />
                </div>
                <div>
                    <x-input-label for="eksemplar" value="Jumlah Eksemplar" />
                    <x-text-input id="eksemplar" name="eksemplar" type="number" class="mt-1 block w-full" :value="old('eksemplar')" />
                </div>
            </div>

            <div class="border-t border-gray-100 pt-6">
                <x-input-label for="cover" value="Unggah Gambar Cover (Opsional)" />
                <input type="file" id="cover" name="cover" accept="image/*" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100">
            </div>

            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200">
                <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