@extends('simaju.layouts.main')
@section('title', 'Edit Buku')
@section('page-title', 'Edit Buku')
@section('page-subtitle', 'Perbarui data buku')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden">
        <!-- Elegant Header -->
        <div class="relative bg-gradient-to-br from-amber-500 via-orange-600 to-yellow-600 px-8 py-8">
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-0 right-0 w-64 h-64 bg-white rounded-full -mr-32 -mt-32"></div>
                <div class="absolute bottom-0 left-0 w-48 h-48 bg-white rounded-full -ml-24 -mb-24"></div>
            </div>
            <div class="relative flex items-center gap-5">
                <div class="w-16 h-16 bg-white bg-opacity-20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-edit text-white text-3xl"></i>
                </div>
                <div>
                    <h2 class="text-3xl font-bold text-white font-heading mb-1">Edit Buku</h2>
                    <p class="text-orange-100">Perbarui informasi buku yang sudah ada</p>
                </div>
            </div>
        </div>

        <!-- Form -->
        <form action="{{ route('perpustakaan.buku.update', $buku) }}" method="POST" enctype="multipart/form-data" class="p-8">
            @csrf
            @method('PUT')

                    <!-- Section: Informasi Buku -->
                    <div class="mb-8">
                        <div class="flex items-center gap-3 mb-6">
                            <div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
                                <i class="fas fa-book-open text-amber-600"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">Informasi Buku</h3>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div class="md:col-span-2">
                                <label class="block text-sm font-bold text-gray-700 mb-2">
                                    Judul Buku <span class="text-red-500">*</span>
                                </label>
                                <div class="relative">
                                    <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                        <i class="fas fa-heading text-gray-400"></i>
                                    </div>
                                    <input type="text" name="judul_buku" value="{{ old('judul_buku', $buku->judul_buku) }}" 
                                           class="w-full pl-12 pr-4 py-3.5 border-2 border-gray-200 rounded-xl focus:ring-2 focus:ring-amber-500 focus:border-amber-500 transition-all @error('judul_buku') border-red-500 @enderror" 
                                           placeholder="Masukkan judul buku..." required>
                                </div>
                                @error('judul_buku')
                                    <p class="mt-2 text-sm text-red-600 flex items-center gap-1">
                                        <i class="fas fa-exclamation-circle"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label for="pengarang" class="form-label fw-bold">Pengarang <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('pengarang') is-invalid @enderror" 
                                   id="pengarang" name="pengarang" value="{{ old('pengarang', $buku->pengarang) }}" 
                                   placeholder="Masukkan nama pengarang" required>
                            @error('pengarang')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="penerbit" class="form-label fw-bold">Penerbit <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('penerbit') is-invalid @enderror" 
                                   id="penerbit" name="penerbit" value="{{ old('penerbit', $buku->penerbit) }}" 
                                   placeholder="Masukkan nama penerbit" required>
                            @error('penerbit')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label for="isbn" class="form-label fw-bold">ISBN <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('isbn') is-invalid @enderror" 
                                   id="isbn" name="isbn" value="{{ old('isbn', $buku->isbn) }}" 
                                   placeholder="Contoh: 978-3-16-148410-0" required>
                            @error('isbn')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="tahun_terbit" class="form-label fw-bold">Tahun Terbit <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('tahun_terbit') is-invalid @enderror" 
                                   id="tahun_terbit" name="tahun_terbit" min="1900" max="2100" 
                                   value="{{ old('tahun_terbit', $buku->tahun_terbit) }}" placeholder="Contoh: 2023" required>
                            @error('tahun_terbit')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label for="kategori_id" class="form-label fw-bold">Kategori <span class="text-danger">*</span></label>
                            <select class="form-select form-select-lg @error('kategori_id') is-invalid @enderror" 
                                    id="kategori_id" name="kategori_id" required>
                                @foreach($kategoris as $kategori)
                                    <option value="{{ $kategori->id }}" {{ old('kategori_id', $buku->kategori_id) == $kategori->id ? 'selected' : '' }}>
                                        {{ $kategori->nama_kategori }}
                                    </option>
                                @endforeach
                            </select>
                            @error('kategori_id')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-4">
                            <label class="form-label fw-bold">Kategori</label>
                            @if($buku->kategori)
                            <div class="alert alert-info">{{ $buku->kategori->nama_kategori }}</div>
                            @else
                            <div class="alert alert-warning">Kategori tidak ditemukan</div>
                            @endif
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-4">
                            <label for="jumlah_buku" class="form-label fw-bold">Jumlah Buku (Total) <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('jumlah_buku') is-invalid @enderror" 
                                   id="jumlah_buku" name="jumlah_buku" min="0" 
                                   value="{{ old('jumlah_buku', $buku->jumlah_buku) }}" placeholder="Contoh: 10" required>
                            @error('jumlah_buku')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="jumlah_tersedia" class="form-label fw-bold">Jumlah Tersedia <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('jumlah_tersedia') is-invalid @enderror" 
                                   id="jumlah_tersedia" name="jumlah_tersedia" min="0" 
                                   value="{{ old('jumlah_tersedia', $buku->jumlah_tersedia) }}" placeholder="Contoh: 10" required>
                            @error('jumlah_tersedia')
                                <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="deskripsi" class="form-label fw-bold">Deskripsi <span class="text-muted">(Opsional)</span></label>
                        <textarea class="form-control @error('deskripsi') is-invalid @enderror" 
                                  id="deskripsi" name="deskripsi" rows="3" 
                                  placeholder="Masukkan deskripsi atau sinopsis buku...">{{ old('deskripsi', $buku->deskripsi) }}</textarea>
                        @error('deskripsi')
                            <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-4">
                        <label for="foto_buku" class="form-label fw-bold">Foto Buku <span class="text-muted">(Opsional)</span></label>
                        <input type="file" class="form-control @error('foto_buku') is-invalid @enderror" 
                               id="foto_buku" name="foto_buku" accept="image/*">
                        <small class="text-muted d-block mt-2">Format: JPG, PNG. Max: 2MB</small>
                        @error('foto_buku')
                            <div class="invalid-feedback d-block"><i class="fas fa-exclamation-circle"></i> {{ $message }}</div>
                        @enderror
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-warning btn-lg">
                            <i class="fas fa-save"></i> Simpan Perubahan
                        </button>
                        <a href="{{ route('perpustakaan.buku.index') }}" class="btn btn-outline-secondary btn-lg">
                            <i class="fas fa-arrow-left"></i> Kembali
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection