From 35d514749e4b806bce879d3154be21120d98638d Mon Sep 17 00:00:00 2001
From: ariefabbauftech-ai <arief.abbauftech@gmail.com>
Date: Thu, 18 Sep 2025 09:00:15 +0700
Subject: [PATCH] [Update sidebar & kategori_fitur]

---
 .../views/admin/fitur/index.blade.php         |   2 +-
 .../admin/kategori_fitur/create.blade.php     |   4 +-
 .../views/admin/kategori_fitur/edit.blade.php |   4 +-
 .../admin/kategori_fitur/index.blade.php      | 261 ++++++++++++++++--
 backend/resources/views/layouts/app.blade.php |  47 +++-
 5 files changed, 273 insertions(+), 45 deletions(-)

diff --git a/backend/resources/views/admin/fitur/index.blade.php b/backend/resources/views/admin/fitur/index.blade.php
index b58f8cd..10a6180 100644
--- a/backend/resources/views/admin/fitur/index.blade.php
+++ b/backend/resources/views/admin/fitur/index.blade.php
@@ -6,7 +6,7 @@
 <div class="container mx-auto py-4">
     <!-- Header -->
     <div class="flex justify-between items-center mb-4">
-        <h3 class="text-xl font-bold">Manajemen Fitur</h3>
+        <h3 class="text-xl font-bold">Daftar Fitur</h3>
         <button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
             <i class="bi bi-plus-lg mr-1"></i> Tambah Fitur
         </button>
diff --git a/backend/resources/views/admin/kategori_fitur/create.blade.php b/backend/resources/views/admin/kategori_fitur/create.blade.php
index e0ce78a..a2bbb3a 100644
--- a/backend/resources/views/admin/kategori_fitur/create.blade.php
+++ b/backend/resources/views/admin/kategori_fitur/create.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+{{-- @extends('layouts.app')
 
 @section('title', 'Tambah Kategori Fitur')
 
@@ -15,4 +15,4 @@
         <a href="{{ route('admin.kategori_fitur.index') }}" class="ml-2 text-gray-600">Batal</a>
     </form>
 </div>
-@endsection
+@endsection --}}
diff --git a/backend/resources/views/admin/kategori_fitur/edit.blade.php b/backend/resources/views/admin/kategori_fitur/edit.blade.php
index a241ae9..22b9884 100644
--- a/backend/resources/views/admin/kategori_fitur/edit.blade.php
+++ b/backend/resources/views/admin/kategori_fitur/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.app')
+{{-- @extends('layouts.app')
 
 @section('title', 'Edit Kategori Fitur')
 
@@ -16,4 +16,4 @@
         <a href="{{ route('admin.kategori_fitur.index') }}" class="ml-2 text-gray-600">Batal</a>
     </form>
 </div>
-@endsection
+@endsection --}}
diff --git a/backend/resources/views/admin/kategori_fitur/index.blade.php b/backend/resources/views/admin/kategori_fitur/index.blade.php
index 7f78a1b..c64a643 100644
--- a/backend/resources/views/admin/kategori_fitur/index.blade.php
+++ b/backend/resources/views/admin/kategori_fitur/index.blade.php
@@ -1,40 +1,241 @@
 @extends('layouts.app')
 
-@section('title', 'Kategori Fitur')
+@section('title', 'Manajemen Kategori Fitur')
 
 @section('content')
 <div class="container mx-auto py-4">
-    <h3 class="text-xl font-bold mb-4">Daftar Kategori Fitur</h3>
-    <a href="{{ route('admin.kategori_fitur.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded">+ Tambah</a>
+    <!-- Header -->
+    <div class="flex justify-between items-center mb-4">
+        <h3 class="text-xl font-bold">Daftar Kategori Fitur</h3>
+        <button id="openTambahModal" class="bg-blue-600 text-white px-3 py-2.5 rounded flex items-center">
+            <i class="bi bi-plus-lg mr-1"></i> Tambah Kategori
+        </button>
+    </div>
 
-    <table class="w-full mt-4 border">
-        <thead>
-            <tr class="bg-gray-200">
-                <th class="border px-4 py-2">ID</th>
-                <th class="border px-4 py-2">Deskripsi</th>
-                <th class="border px-4 py-2">Aksi</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach($kategoriFitur as $item)
-            <tr>
-                <td class="border px-4 py-2">{{ $item->id }}</td>
-                <td class="border px-4 py-2">{{ $item->deskripsi }}</td>
-                <td class="border px-4 py-2 flex gap-2">
-                    <a href="{{ route('admin.kategori_fitur.edit', $item->id) }}" class="bg-yellow-500 text-white px-2 py-1 rounded">Edit</a>
-                    <form action="{{ route('admin.kategori_fitur.destroy', $item->id) }}" method="POST" onsubmit="return confirm('Yakin hapus?')">
-                        @csrf
-                        @method('DELETE')
-                        <button class="bg-red-500 text-white px-2 py-1 rounded">Hapus</button>
-                    </form>
-                </td>
-            </tr>
-            @endforeach
-        </tbody>
-    </table>
+    <!-- Flash Message -->
+    @if (session('success'))
+        <div id="toast-success" class="mb-4 p-3 rounded bg-green-100 text-green-800 border border-green-300 shadow">
+            {{ session('success') }}
+        </div>
+        <script>
+            setTimeout(() => document.getElementById('toast-success')?.remove(), 3000);
+        </script>
+    @endif
 
-    <div class="mt-4">
-        {{ $kategoriFitur->links() }}
+    @if ($errors->any())
+        <div id="toast-error" class="mb-4 p-3 rounded bg-red-100 text-red-800 border border-red-300 shadow">
+            <ul class="list-disc ml-5">
+                @foreach ($errors->all() as $error)
+                    <li>{{ $error }}</li>
+                @endforeach
+            </ul>
+        </div>
+        <script>
+            setTimeout(() => document.getElementById('toast-error')?.remove(), 5000);
+        </script>
+    @endif
+
+    <!-- Tabel Kategori -->
+    <div class="bg-white rounded-lg shadow-sm">
+        <div class="p-4 overflow-x-auto">
+            <table class="w-full table-fixed border border-gray-300 text-left">
+                <thead class="bg-gray-100">
+                    <tr>
+                        <th class="w-[10%] p-2 border border-gray-300 text-center">ID</th>
+                        <th class="w-[60%] p-2 border border-gray-300 text-center">Deskripsi</th>
+                        <th class="w-[30%] p-2 border border-gray-300 text-center">Aksi</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @forelse ($kategoriFitur as $item)
+                        <tr class="hover:bg-gray-50">
+                            <td class="py-4 px-2 border border-gray-300 text-center">
+                                {{ $item->id }}
+                            </td>
+                            <td class="py-4 px-2 border border-gray-300">
+                                {{ $item->deskripsi }}
+                            </td>
+                            <td class="py-4 px-2 border border-gray-300 text-center">
+                                <div class="flex justify-center space-x-2">
+                                    <button class="text-blue-600 flex items-center pr-4 openEditModalBtn"
+                                        data-id="{{ $item->id }}">
+                                        <i class="bi bi-pencil mr-1"></i> Ubah
+                                    </button>
+                                    <button class="text-red-600 flex items-center openDeleteModalBtn"
+                                        data-id="{{ $item->id }}">
+                                        <i class="bi bi-trash mr-1"></i> Hapus
+                                    </button>
+                                </div>
+                            </td>
+                        </tr>
+                    @empty
+                        <tr>
+                            <td colspan="3" class="p-2 text-center text-gray-500">Belum ada kategori fitur</td>
+                        </tr>
+                    @endforelse
+                </tbody>
+            </table>
+        </div>
+
+        <!-- Pagination -->
+        <div class="p-4 flex justify-center">
+            {{ $kategoriFitur->links() }}
+        </div>
     </div>
 </div>
+
+<!-- Modal Tambah -->
+<div id="modalTambah" class="fixed inset-0 hidden items-center justify-center z-50">
+    <div class="absolute inset-0 bg-black opacity-50" id="closeTambahModal"></div>
+    <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+        <form action="{{ route('admin.kategori_fitur.store') }}" method="POST">
+            @csrf
+            <div class="p-4 border-b">
+                <h5 class="text-lg font-medium">Tambah Kategori Fitur</h5>
+            </div>
+            <div class="p-4 space-y-4">
+                <div>
+                    <label class="block text-sm font-medium">Deskripsi</label>
+                    <input type="text" name="deskripsi" class="w-full p-2 border rounded" required>
+                </div>
+            </div>
+            <div class="p-4 border-t flex justify-end space-x-2">
+                <button type="button" id="closeTambahBtn" class="bg-gray-300 text-black px-3 py-1 rounded">Batal</button>
+                <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan</button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Modal Edit -->
+@foreach ($kategoriFitur as $item)
+    <div id="modalEdit{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
+        <div class="absolute inset-0 bg-black opacity-50 closeEditOverlay" data-id="{{ $item->id }}"></div>
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+            <form action="{{ route('admin.kategori_fitur.update', $item->id) }}" method="POST">
+                @csrf
+                @method('PUT')
+                <div class="p-4 border-b">
+                    <h5 class="text-lg font-medium">Edit Kategori Fitur</h5>
+                </div>
+                <div class="p-4 space-y-4">
+                    <div>
+                        <label class="block text-sm font-medium">Deskripsi</label>
+                        <input type="text" name="deskripsi" value="{{ $item->deskripsi }}" class="w-full p-2 border rounded" required>
+                    </div>
+                </div>
+                <div class="p-4 border-t flex justify-end space-x-2">
+                    <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeEditBtn"
+                        data-id="{{ $item->id }}">Batal</button>
+                    <button class="bg-blue-600 text-white px-3 py-1 rounded">Simpan Perubahan</button>
+                </div>
+            </form>
+        </div>
+    </div>
+@endforeach
+
+<!-- Modal Hapus -->
+@foreach ($kategoriFitur as $item)
+    <div id="modalDelete{{ $item->id }}" class="fixed inset-0 hidden items-center justify-center z-50">
+        <div class="absolute inset-0 bg-black opacity-50 closeDeleteOverlay" data-id="{{ $item->id }}"></div>
+        <div class="bg-white rounded-lg shadow-lg w-full max-w-md z-50 overflow-hidden">
+            <div class="p-4 border-b">
+                <h5 class="text-lg font-medium">Hapus Kategori Fitur</h5>
+            </div>
+            <div class="p-4">
+                <p>Apakah Anda yakin ingin menghapus kategori <strong>{{ $item->deskripsi }}</strong>?</p>
+            </div>
+            <div class="p-4 border-t flex justify-end space-x-2">
+                <button type="button" class="bg-gray-300 text-black px-3 py-1 rounded closeDeleteBtn"
+                    data-id="{{ $item->id }}">Batal</button>
+                <form action="{{ route('admin.kategori_fitur.destroy', $item->id) }}" method="POST" class="inline">
+                    @csrf
+                    @method('DELETE')
+                    <button class="bg-red-600 text-white px-3 py-1 rounded">Hapus</button>
+                </form>
+            </div>
+        </div>
+    </div>
+@endforeach
+
+<script>
+    // Modal Tambah
+    const openTambahModal = document.getElementById('openTambahModal');
+    const modalTambah = document.getElementById('modalTambah');
+    const closeTambahBtn = document.getElementById('closeTambahBtn');
+    const closeTambahOverlay = document.getElementById('closeTambahModal');
+
+    openTambahModal.addEventListener('click', () => {
+        modalTambah.classList.remove('hidden');
+        modalTambah.classList.add('flex');
+    });
+    closeTambahBtn.addEventListener('click', () => {
+        modalTambah.classList.add('hidden');
+        modalTambah.classList.remove('flex');
+    });
+    closeTambahOverlay.addEventListener('click', () => {
+        modalTambah.classList.add('hidden');
+        modalTambah.classList.remove('flex');
+    });
+
+    // Modal Edit
+    const openEditBtns = document.querySelectorAll('.openEditModalBtn');
+    const closeEditBtns = document.querySelectorAll('.closeEditBtn');
+    const closeEditOverlays = document.querySelectorAll('.closeEditOverlay');
+
+    openEditBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        });
+    });
+    closeEditBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        });
+    });
+    closeEditOverlays.forEach(overlay => {
+        overlay.addEventListener('click', () => {
+            const id = overlay.dataset.id;
+            const modal = document.getElementById('modalEdit' + id);
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        });
+    });
+
+    // Modal Delete
+    const openDeleteBtns = document.querySelectorAll('.openDeleteModalBtn');
+    const closeDeleteBtns = document.querySelectorAll('.closeDeleteBtn');
+    const closeDeleteOverlays = document.querySelectorAll('.closeDeleteOverlay');
+
+    openDeleteBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalDelete' + id);
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        });
+    });
+    closeDeleteBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const id = btn.dataset.id;
+            const modal = document.getElementById('modalDelete' + id);
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        });
+    });
+    closeDeleteOverlays.forEach(overlay => {
+        overlay.addEventListener('click', () => {
+            const id = overlay.dataset.id;
+            const modal = document.getElementById('modalDelete' + id);
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        });
+    });
+</script>
 @endsection
diff --git a/backend/resources/views/layouts/app.blade.php b/backend/resources/views/layouts/app.blade.php
index 1b1555c..28a94d9 100644
--- a/backend/resources/views/layouts/app.blade.php
+++ b/backend/resources/views/layouts/app.blade.php
@@ -61,17 +61,34 @@
                     <i class="bi bi-diagram-3 me-2"></i> Kategori
                 </a>
 
-                <a href="{{ route('admin.kategori_fitur.index') }}"
-                    class="flex items-center py-2 px-3 rounded hover:bg-blue-50 {{ request()->routeIs('admin.kategori_fitur.*') ? 'bg-blue-100 text-blue-600' : 'text-gray-700' }}">
-                    <i class="bi bi-list-task me-2"></i> Kategori Fitur
-                </a>
-
+                <!-- MANAJEMEN FITUR DROPDOWN -->
                 <li>
-                    <a href="{{ route('admin.fitur.index') }}"
-                        class="flex items-center py-2 px-3 rounded hover:bg-blue-50 {{ request()->is('admin/fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-700' }}">
-                        <i class="bi bi-grid me-2"></i> Fitur
-                    </a>
+                    @php
+                        $isFiturPage = request()->is('admin/fitur*') || request()->is('admin/kategori_fitur*');
+                    @endphp
+                    <button
+                        class="w-full flex items-center justify-between py-2 px-3 text-gray-700 rounded hover:bg-blue-50 {{ $isFiturPage ? 'bg-blue-100 text-blue-600' : '' }}"
+                        id="manajemenFiturBtn">
+                        <span><i class="bi bi-grid me-2"></i>Manajemen Fitur</span>
+                        <i class="bi bi-chevron-down transition-transform {{ $isFiturPage ? 'rotate-180' : '' }}"
+                            id="manajemenFiturIcon"></i>
+                    </button>
+                    <ul class="submenu pl-6 space-y-1 {{ $isFiturPage ? 'show' : '' }}" id="manajemenFiturSubmenu">
+                        <li>
+                            <a href="{{ route('admin.kategori_fitur.index') }}"
+                                class="block py-2 px-2 rounded {{ request()->is('admin/kategori_fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50' }}">
+                                Kategori Fitur
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ route('admin.fitur.index') }}"
+                                class="block py-2 px-2 rounded {{ request()->is('admin/fitur*') ? 'bg-blue-100 text-blue-600' : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50' }}">
+                                Fitur
+                            </a>
+                        </li>
+                    </ul>
                 </li>
+
                 <!-- Dropdown Templat -->
                 <li>
                     @php
@@ -80,7 +97,7 @@
                     <button
                         class="w-full flex items-center justify-between py-2 px-3 text-gray-700 rounded hover:bg-blue-50 {{ $isTemplatePage ? 'bg-blue-100 text-blue-600' : '' }}"
                         id="templatBtn">
-                        <span><i class="bi bi-card-list me-2"></i> Templat</span>
+                        <span><i class="bi bi-card-list me-2"></i>Manajemen Templat</span>
                         <i class="bi bi-chevron-down transition-transform {{ $isTemplatePage ? 'rotate-180' : '' }}"
                             id="templatIcon"></i>
                     </button>
@@ -147,6 +164,16 @@
             templatSubmenu.classList.toggle('show');
             templatIcon.classList.toggle('rotate-180');
         });
+
+        // Dropdown Manajemen Fitur
+    const manajemenFiturBtn = document.getElementById('manajemenFiturBtn');
+    const manajemenFiturSubmenu = document.getElementById('manajemenFiturSubmenu');
+    const manajemenFiturIcon = document.getElementById('manajemenFiturIcon');
+
+    manajemenFiturBtn.addEventListener('click', () => {
+        manajemenFiturSubmenu.classList.toggle('show');
+        manajemenFiturIcon.classList.toggle('rotate-180');
+    });
     </script>
 </body>