@extends('layouts.admin')

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

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

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

        @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.update', $buku->id_buku) }}" method="POST" enctype="multipart/form-data"
            class="p-6 space-y-6">
            @csrf
            @method('PUT')

            <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', $buku->bibid)" />
                </div>
                <div>
                    <x-input-label for="id_kategori" value="Kategori" />
                    <select id="id_kategori" name="id_kategori"
                        class="border border-gray-200 bg-gray-50 text-gray-900 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block w-full p-3 shadow-sm hover:bg-white transition-all duration-200 outline-none">
                        <option value="">Pilih Kategori</option>
                        @foreach ($kategori as $kat)
                            <option value="{{ $kat->id_kategori }}"
                                {{ old('id_kategori', $buku->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', $buku->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', $buku->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', $buku->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', $buku->penerbit)" required />
                </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', $buku->tahun_terbit)" required />
                </div>
                <div>
                    <x-input-label for="edisi" value="Edisi" />
                    <x-text-input id="edisi" name="edisi" type="number" class="mt-1 block w-full"
                        :value="old('edisi', $buku->edisi)" required />
                </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', $buku->deskripsi_fisik)" required />
                </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', $buku->eksemplar)" required />
                </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 Perubahan
                </x-primary-button>
            </div>
        </form>
    </x-card>
@endsection