refactor: katalog dropdown with card-image

app/Http/Controllers/KatalogController.php

@@ -9,7 +9,6 @@ class KatalogController extends Controller
 {
     public function index(Request $request, $tipe = null) 
     {
-        // Ambil semua input filter dari form
         $filters = [
             'search' => $request->query('search'),
             'kategori' => $request->query('kategori'),
@@ -17,9 +16,6 @@ public function index(Request $request, $tipe = null)
             'penulis' => $request->query('penulis'),
         ];
         
-        if ($tipe) {
-            $filters['tipe'] = $tipe;
-        }
 
         $semuaBuku = DummyDataService::getKatalogBuku($filters);
         

resources/views/auth/login.blade.php

@@ -11,7 +11,8 @@
 
         <div class="mb-3">
             <label for="nisn" class="form-label">Nomor Induk Siswa Nasional (NISN)</label>
-            <input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror" type="text" name="nisn" value="{{ old('nisn') }}" required autofocus autocomplete="username" />
+            <input id="nisn" class="form-control bg-body-tertiary @error('nisn') is-invalid @enderror"
+                type="text" name="nisn" value="{{ old('nisn') }}" required autofocus autocomplete="username" />
             @error('nisn')
                 <div class="invalid-feedback">{{ $message }}</div>
             @enderror
@@ -19,11 +20,17 @@
 
         <div class="mb-3">
             <label for="password" class="form-label">Kata Sandi</label>
-            <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror" type="password" name="password" required autocomplete="current-password" />
+            <div class="input-group">
+                <input id="password" class="form-control bg-body-tertiary @error('password') is-invalid @enderror"
+                    type="password" name="password" required autocomplete="current-password" />
+                <span class="input-group-text bg-body-tertiary" id="togglePassword" style="cursor: pointer;">
+                    <i class="bi bi-eye-slash-fill"></i>
+                </span>
                 @error('password')
                     <div class="invalid-feedback">{{ $message }}</div>
                 @enderror
             </div>
+        </div>
 
         <div class="d-flex justify-content-end align-items-center mb-3">
             @if (Route::has('password.request'))
@@ -44,4 +51,25 @@
             <a href="{{ route('register') }}" class="fw-semibold text-decoration-none">Daftar sekarang</a>
         </p>
     </form>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+
+            const togglePassword = document.querySelector('#togglePassword');
+            const passwordInput = document.querySelector('#password');
+            const icon = togglePassword.querySelector('i');
+
+            togglePassword.addEventListener('click', function() {
+                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
+                passwordInput.setAttribute('type', type);
+
+                if (type === 'password') {
+                    icon.classList.remove('bi-eye-fill');
+                    icon.classList.add('bi-eye-slash-fill');
+                } else {
+                    icon.classList.remove('bi-eye-slash-fill');
+                    icon.classList.add('bi-eye-fill');
+                }
+            });
+        });
+    </script>
 </x-guest-layout>

resources/views/katalog.blade.php

@@ -7,32 +7,39 @@
     <!-- Filter & Pencarian -->
     <div class="card mb-4">
         <div class="card-body">
-            <form action="{{ route('katalog.index') }}" method="GET">
+            <form action="{{ route('katalog') }}" method="GET">
                 <div class="row g-3 align-items-center">
                     <div class="col-md-4">
-                        <input type="text" name="search" class="form-control" placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
+                        <input type="text" name="search" class="form-control"
+                            placeholder="Cari buku berdasarkan judul..." value="{{ $input['search'] ?? '' }}">
                     </div>
                     <div class="col-md-2">
                         <select name="kategori" class="form-select">
                             <option value="">Semua Kategori</option>
-                            @foreach($filterOptions['kategori'] as $kategori)
+                            @foreach ($filterOptions['kategori'] as $kategori)
-                                <option value="{{ $kategori }}" {{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}</option>
+                                <option value="{{ $kategori }}"
+                                    {{ ($input['kategori'] ?? '') == $kategori ? 'selected' : '' }}>{{ $kategori }}
+                                </option>
                             @endforeach
                         </select>
                     </div>
                     <div class="col-md-2">
                         <select name="tahun" class="form-select">
                             <option value="">Semua Tahun</option>
-                            @foreach($filterOptions['tahun'] as $tahun)
+                            @foreach ($filterOptions['tahun'] as $tahun)
-                                <option value="{{ $tahun }}" {{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}</option>
+                                <option value="{{ $tahun }}"
+                                    {{ ($input['tahun'] ?? '') == $tahun ? 'selected' : '' }}>{{ $tahun }}
+                                </option>
                             @endforeach
                         </select>
                     </div>
                     <div class="col-md-2">
                         <select name="penulis" class="form-select">
                             <option value="">Semua Penulis</option>
-                             @foreach($filterOptions['penulis'] as $penulis)
+                            @foreach ($filterOptions['penulis'] as $penulis)
-                                <option value="{{ $penulis }}" {{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}</option>
+                                <option value="{{ $penulis }}"
+                                    {{ ($input['penulis'] ?? '') == $penulis ? 'selected' : '' }}>{{ $penulis }}
+                                </option>
                             @endforeach
                         </select>
                     </div>
@@ -45,34 +52,38 @@
     </div>
 
     <!-- Daftar Buku -->
-    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
+    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4">
         @forelse ($semuaBuku as $buku)
             <div class="col">
-                <div class="card h-100 shadow-sm">
+                <div class="card h-100 shadow-sm border-0">
-                    <img src="{{ asset($buku['cover']) }}" class="card-img-top" alt="Cover {{ $buku['judul'] }}" style="height: 250px; object-fit: cover;">
+                    <img src="{{ asset($buku['cover']) }}" class="card-img-top rounded-2 object-fit-cover"
-                    <div class="card-body">
+                        style="height: 310px;" alt="Cover {{ $buku['judul'] }}">
-                        <div>
-                            <span class="badge bg-light text-dark border">{{ $buku['kategori'] }}</span>
-                            <span class="badge {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
-                        </div>
-                        <h5 class="card-title mt-2">{{ $buku['judul'] }}</h5>
-                        <p class="card-text small text-muted">{{ $buku['penulis'] }}</p>
-                    </div>
-                    <div class="card-footer bg-white border-0">
-                         <div class="d-grid">
-                            @if ($buku['status'] == 'Dipinjam')
-                                <!-- Jika buku sedang dipinjam, tombol nonaktif -->
-                                <button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i> Tidak Tersedia</button>
-                            @else
-                                <!-- Jika buku tersedia, cek tipe aksesnya -->
-                                @if ($buku['tipe_akses'] == 'online')
-                                    <button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca Buku Online</button>
-                                @else
-                                    <!-- Anggap default (offline atau null) adalah pinjam offline -->
-                                    <button class="btn btn-outline-primary btn-sm"><i class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
-                                @endif
-                            @endif
 
+                    <div class="card-body d-flex flex-column p-3">
+                        <div class="flex-grow-1">
+                            <div class="mb-2">
+                                <span class="badge fw-normal bg-light text-dark border me-1">{{ $buku['kategori'] }}</span>
+                                <span
+                                    class="badge fw-normal {{ $buku['status'] == 'Tersedia' ? 'bg-success-subtle text-success-emphasis' : 'bg-warning-subtle text-warning-emphasis' }} border">{{ $buku['status'] }}</span>
+                            </div>
+                            <h5 class="card-title fw-bold ">{{ $buku['judul'] }}</h5>
+                            <p class="card-text small text-muted mb-2">{{ $buku['penulis'] }}</p>
+                        </div>
+
+
+                        <div class="d-grid mt-auto">
+                            @if ($buku['status'] == 'Dipinjam')
+                                <button class="btn btn-secondary btn-sm" disabled><i class="bi bi-x-circle me-1"></i>
+                                    Tidak Tersedia</button>
+                            @else
+                                @if ($buku['tipe_akses'] == 'online')
+                                    <button class="btn btn-primary btn-sm"><i class="bi bi-book me-1"></i> Baca
+                                        Online</button>
+                                @else
+                                    <button class="btn btn-outline-primary btn-sm"><i
+                                            class="bi bi-arrow-down-up me-1"></i> Pinjam Offline</button>
+                                @endif
+                            @endif
                         </div>
                     </div>
                 </div>

resources/views/layouts/sidebar.blade.php

@@ -12,7 +12,7 @@
                 <span class="nav-text ms-2">Dashboard</span>
             </a>
         </li>
-        <li class="nav-item">
+        {{-- <li class="nav-item">
             <a class="nav-link collapsed" data-bs-toggle="collapse" href="#katalog-collapse" role="button" aria-expanded="false" aria-controls="katalog-collapse">
                 <i class="bi bi-book me-2"></i>
                 <span class="nav-text">Katalog Buku</span>
@@ -32,6 +32,12 @@
                     </li>
                 </ul>
             </div>
+        </li> --}}
+        <li class="nav-item">
+            <a href="{{ route('katalog') }}" class="nav-link {{ request()->routeIs('katalog') ? 'active' : '' }}">
+                <i class="bi bi-book me-2"></i>
+                <span class="nav-text ms-2">Katalog</span>
+            </a>
         </li>
         <li class="nav-item">
             <a href="#" class="nav-link">

routes/web.php

@@ -12,7 +12,8 @@
 
 Route::get('/dashboard', [DashboardController::class, 'index'])
     ->middleware(['auth'])->name('dashboard');
-Route::get('/katalog-buku/{tipe?}', [KatalogController::class, 'index'])->middleware('auth')->name('katalog.index');
+Route::get('/katalog', [KatalogController::class, 'index'])
+    ->middleware('auth')->name('katalog');
 
 
 // Route untuk user profile dari laravel breeze