233 lines
14 KiB
PHP
233 lines
14 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Katalog Buku')
|
|
|
|
@section('content')
|
|
<div x-data="{ isModalBukuOpen: {{ $errors->any() || request('add') == 'true' ? 'true' : 'false' }} }">
|
|
<x-page-header title="Portofolio Katalog Buku">
|
|
<x-slot name="actions">
|
|
<button @click="isModalBukuOpen = true"
|
|
class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-5 py-2.5 rounded-xl shadow-lg shadow-blue-500/30 transition-all font-semibold flex items-center gap-2 transform hover:scale-105">
|
|
<i class="fas fa-plus"></i> Tambah Buku Baru
|
|
</button>
|
|
</x-slot>
|
|
</x-page-header>
|
|
|
|
<x-alert type="success" :message="session('success')" />
|
|
|
|
<div class="mb-6">
|
|
<form method="GET" action="{{ route('admin.buku.index') }}" class="flex gap-2">
|
|
<x-text-input type="text" name="search" value="{{ request('search') }}"
|
|
placeholder="Cari berdasarkan Judul atau BIBID..." class="w-full md:w-80" />
|
|
<x-primary-button>
|
|
Cari
|
|
</x-primary-button>
|
|
</form>
|
|
</div>
|
|
|
|
<x-card>
|
|
<x-table>
|
|
<x-slot name="head">
|
|
<x-th>BIBID</x-th>
|
|
<x-th>Judul & Pengarang</x-th>
|
|
<x-th>Kategori</x-th>
|
|
<x-th>Stok</x-th>
|
|
<x-th class="text-right">Aksi</x-th>
|
|
</x-slot>
|
|
|
|
@forelse ($buku as $item)
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">{{ $item->bibid }}</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm font-bold text-gray-900">{{ $item->judul }}</div>
|
|
<div class="text-sm text-gray-500">{{ $item->pengarang }}</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $item->kategori->nama_kategori ?? 'Umum' }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $item->eksemplar }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div class="flex justify-end gap-3">
|
|
<a href="{{ route('admin.buku.edit', $item->id_buku) }}"
|
|
class="text-blue-600 hover:text-blue-900">
|
|
Edit
|
|
</a>
|
|
<form action="{{ route('admin.buku.destroy', $item->id_buku) }}" method="POST"
|
|
onsubmit="return confirm('Apakah Anda yakin ingin menghapus aset buku ini?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="text-red-600 hover:text-red-900 font-medium transition duration-150 ease-in-out">
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="px-6 py-8 text-center text-sm text-gray-500">
|
|
Tidak ada data aset buku ditemukan.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
|
|
<div class="mt-4">
|
|
{{ $buku->withQueryString()->links() }}
|
|
</div>
|
|
</x-card>
|
|
<!-- MODAL TAMBAH BUKU -->
|
|
<div x-show="isModalBukuOpen" style="display: none;" class="fixed inset-0 z-50 overflow-y-auto"
|
|
aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<!-- Background overlay -->
|
|
<div x-show="isModalBukuOpen" x-transition.opacity
|
|
class="fixed inset-0 transition-opacity bg-gray-900/60 backdrop-blur-sm" aria-hidden="true"
|
|
@click="isModalBukuOpen = false"></div>
|
|
|
|
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
|
|
|
|
<!-- Modal panel -->
|
|
<div x-show="isModalBukuOpen" x-transition:enter="ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="ease-in duration-200"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="inline-block px-4 pt-5 pb-4 overflow-hidden text-left align-bottom transition-all transform bg-white rounded-3xl shadow-2xl shadow-indigo-500/10 sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full sm:p-8 border border-gray-100">
|
|
|
|
<div class="flex justify-between items-center mb-6 pl-2">
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-gray-900" id="modal-title">Tambah Koleksi Buku</h3>
|
|
<p class="text-sm text-gray-500 mt-1">Masukkan detail buku baru ke dalam katalog perpustakaan.
|
|
</p>
|
|
</div>
|
|
<button @click="isModalBukuOpen = false"
|
|
class="w-10 h-10 rounded-full bg-gray-50 hover:bg-red-50 text-gray-400 hover:text-red-500 flex items-center justify-center transition-colors">
|
|
<i class="fas fa-times text-lg"></i>
|
|
</button>
|
|
</div>
|
|
|
|
@if ($errors->any())
|
|
<div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r-xl text-sm shadow-sm"
|
|
role="alert">
|
|
<p class="font-bold mb-1"><i class="fas fa-exclamation-circle mr-1"></i> Validasi Gagal</p>
|
|
<ul class="list-disc ml-5 space-y-1">
|
|
@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="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 bg-gray-50/50" :value="old('bibid')" required />
|
|
</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-xl shadow-sm bg-gray-50/50"
|
|
required>
|
|
<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 bg-gray-50/50" :value="old('judul')" required />
|
|
</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 bg-gray-50/50" :value="old('pengarang')" required />
|
|
</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 bg-gray-50/50" :value="old('nomor_panggil')" required />
|
|
</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 bg-gray-50/50" :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 bg-gray-50/50" :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 bg-gray-50/50" :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 bg-gray-50/50" :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 bg-gray-50/50" :value="old('eksemplar')" required />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-100 pt-6">
|
|
<x-input-label for="cover" value="Unggah Gambar Cover (Opsional)" class="mb-2" />
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="cover"
|
|
class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed border-indigo-200 rounded-2xl cursor-pointer bg-indigo-50/30 hover:bg-indigo-50 transition-colors">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<i class="fas fa-cloud-upload-alt text-3xl text-indigo-400 mb-2"></i>
|
|
<p class="mb-1 text-sm text-gray-500"><span
|
|
class="font-semibold text-indigo-600">Klik untuk unggah</span> atau seret
|
|
file ke sini</p>
|
|
<p class="text-xs text-gray-400">PNG, JPG, JPEG (Maks. 2MB)</p>
|
|
</div>
|
|
<input id="cover" name="cover" type="file" class="hidden"
|
|
accept="image/jpeg, image/png, image/jpg" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-end gap-3 pt-6 border-t border-gray-100 mt-8">
|
|
<button type="button" @click="isModalBukuOpen = false"
|
|
class="px-5 py-2.5 text-gray-600 bg-gray-100 hover:bg-gray-200 hover:text-gray-900 rounded-xl font-semibold transition-colors">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white px-6 py-2.5 rounded-xl font-bold shadow-lg shadow-blue-500/30 transition-all transform hover:scale-105">
|
|
<i class="fas fa-save mr-2"></i> Simpan Buku
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|