aku mau buat web toko novel (responsif) ada admin user menggunakan (codeigniter4) , admin ada CRUD, ada login admin dan user , menggunakan database pake (mysqlworkbench) buatkan database nya , buatkan struktur projectnya , modifikasi code di bawah yaaa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NovelStore - Online Novel Shop</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .novel-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .sidebar {
            transition: all 0.3s;
        }
        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }
            .sidebar.active {
                transform: translateX(0);
            }
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <!-- Navigation -->
    <nav class="bg-indigo-900 text-white shadow-lg">
        <div class="container mx-auto px-4">
            <div class="flex justify-between items-center py-4">
                <div class="flex items-center space-x-4">
                    <button id="sidebarToggle" class="md:hidden text-white focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    <a href="#" class="flex items-center">
                        <i class="fas fa-book-open text-2xl mr-2"></i>
                        <span class="font-bold text-xl">NovelStore</span>
                    </a>
                </div>
                
                <div class="hidden md:flex items-center space-x-6">
                    <a href="#" class="hover:text-indigo-200">Home</a>
                    <a href="#" class="hover:text-indigo-200">Novels</a>
                    <a href="#" class="hover:text-indigo-200">Categories</a>
                    <a href="#" class="hover:text-indigo-200">About</a>
                    <a href="#" class="hover:text-indigo-200">Contact</a>
                </div>
                
                <div class="flex items-center space-x-4">
                    <a href="#" class="hover:text-indigo-200">
                        <i class="fas fa-search"></i>
                    </a>
                    <a href="#" class="hover:text-indigo-200">
                        <i class="fas fa-shopping-cart"></i>
                    </a>
                    <div class="dropdown relative">
                        <button class="hover:text-indigo-200 flex items-center">
                            <i class="fas fa-user mr-1"></i>
                            <span>Account</span>
                            <i class="fas fa-chevron-down ml-1 text-xs"></i>
                        </button>
                        <div class="dropdown-menu absolute hidden right-0 mt-2 w-48 bg-white text-gray-800 rounded-md shadow-lg py-1 z-50">
                            <a href="#" class="block px-4 py-2 hover:bg-indigo-100" id="userLoginBtn">User Login</a>
                            <a href="#" class="block px-4 py-2 hover:bg-indigo-100" id="adminLoginBtn">Admin Login</a>
                            <div class="border-t border-gray-200"></div>
                            <a href="#" class="block px-4 py-2 hover:bg-indigo-100">Register</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Sidebar (Mobile) -->
    <div class="sidebar fixed inset-y-0 left-0 w-64 bg-gray-800 text-white z-50 md:hidden">
        <div class="p-4">
            <div class="flex items-center mb-8">
                <i class="fas fa-book-open text-2xl mr-2"></i>
                <span class="font-bold text-xl">NovelStore</span>
            </div>
            <ul class="space-y-2">
                <li><a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Home</a></li>
                <li><a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Novels</a></li>
                <li><a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Categories</a></li>
                <li><a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">About</a></li>
                <li><a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Contact</a></li>
                <li class="pt-4 border-t border-gray-700">
                    <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">User Login</a>
                </li>
                <li>
                    <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Admin Login</a>
                </li>
                <li>
                    <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded">Register</a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Overlay for sidebar -->
    <div id="sidebarOverlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden"></div>

    <!-- Main Content -->
    <div class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <div class="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-8 text-white mb-12">
            <div class="max-w-2xl">
                <h1 class="text-4xl font-bold mb-4">Discover Your Next Favorite Novel</h1>
                <p class="text-xl mb-6">Browse our extensive collection of novels from various genres and authors worldwide.</p>
                <div class="flex">
                    <input type="text" placeholder="Search novels..." class="px-4 py-3 rounded-l-lg w-full text-gray-800 focus:outline-none">
                    <button class="bg-indigo-900 hover:bg-indigo-800 px-6 py-3 rounded-r-lg font-semibold">
                        <i class="fas fa-search mr-2"></i> Search
                    </button>
                </div>
            </div>
        </div>

        <!-- Featured Novels -->
        <section class="mb-12">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-2xl font-bold">Featured Novels</h2>
                <a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">View All</a>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                <!-- Novel Card 1 -->
                <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
                    <div class="relative">
                        <img src="https://via.placeholder.com/300x450" alt="Novel Cover" class="w-full h-64 object-cover">
                        <div class="absolute top-2 right-2 bg-indigo-600 text-white px-2 py-1 rounded text-xs font-semibold">Bestseller</div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-1">The Silent Patient</h3>
                        <p class="text-gray-600 text-sm mb-2">Alex Michaelides</p>
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-gray-600 text-sm ml-2">4.5 (120)</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-indigo-600">$12.99</span>
                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-cart-plus mr-1"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Novel Card 2 -->
                <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
                    <div class="relative">
                        <img src="https://via.placeholder.com/300x450" alt="Novel Cover" class="w-full h-64 object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-1">Where the Crawdads Sing</h3>
                        <p class="text-gray-600 text-sm mb-2">Delia Owens</p>
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="far fa-star"></i>
                            </div>
                            <span class="text-gray-600 text-sm ml-2">4.0 (95)</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-indigo-600">$14.99</span>
                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-cart-plus mr-1"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Novel Card 3 -->
                <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
                    <div class="relative">
                        <img src="https://via.placeholder.com/300x450" alt="Novel Cover" class="w-full h-64 object-cover">
                        <div class="absolute top-2 right-2 bg-green-600 text-white px-2 py-1 rounded text-xs font-semibold">New</div>
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-1">The Midnight Library</h3>
                        <p class="text-gray-600 text-sm mb-2">Matt Haig</p>
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="text-gray-600 text-sm ml-2">5.0 (210)</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-indigo-600">$10.99</span>
                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-cart-plus mr-1"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- Novel Card 4 -->
                <div class="novel-card bg-white rounded-lg shadow-md overflow-hidden transition duration-300">
                    <div class="relative">
                        <img src="https://via.placeholder.com/300x450" alt="Novel Cover" class="w-full h-64 object-cover">
                    </div>
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-1">Educated</h3>
                        <p class="text-gray-600 text-sm mb-2">Tara Westover</p>
                        <div class="flex items-center mb-2">
                            <div class="flex text-yellow-400">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="text-gray-600 text-sm ml-2">4.7 (180)</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-indigo-600">$13.49</span>
                            <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded text-sm">
                                <i class="fas fa-cart-plus mr-1"></i> Add
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Categories -->
        <section class="mb-12">
            <h2 class="text-2xl font-bold mb-6">Browse by Category</h2>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-magic text-2xl"></i>
                    </div>
                    <span class="font-medium">Fantasy</span>
                </a>
                
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-heart text-2xl"></i>
                    </div>
                    <span class="font-medium">Romance</span>
                </a>
                
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-user-secret text-2xl"></i>
                    </div>
                    <span class="font-medium">Mystery</span>
                </a>
                
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-rocket text-2xl"></i>
                    </div>
                    <span class="font-medium">Sci-Fi</span>
                </a>
                
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-ghost text-2xl"></i>
                    </div>
                    <span class="font-medium">Horror</span>
                </a>
                
                <a href="#" class="bg-white hover:bg-indigo-50 rounded-lg shadow p-4 text-center transition duration-300">
                    <div class="text-indigo-600 mb-2">
                        <i class="fas fa-history text-2xl"></i>
                    </div>
                    <span class="font-medium">Historical</span>
                </a>
            </div>
        </section>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">NovelStore</h3>
                    <p class="text-gray-400">Your one-stop shop for all kinds of novels. Discover, read, and enjoy.</p>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Home</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Novels</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Categories</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Customer Service</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQs</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Shipping Policy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Returns & Refunds</a></li>
                    </ul>
                </div>
                
                <div>
                    <h4 class="font-bold mb-4">Newsletter</h4>
                    <p class="text-gray-400 mb-4">Subscribe to get updates on new arrivals and special offers.</p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg w-full text-gray-800 focus:outline-none">
                        <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg">
                            <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-pinterest"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 NovelStore. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Login Modals -->
    <!-- User Login Modal -->
    <div id="userLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-2xl font-bold text-gray-800">User Login</h3>
                    <button id="closeUserLogin" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form>
                    <div class="mb-4">
                        <label for="userEmail" class="block text-gray-700 mb-2">Email</label>
                        <input type="email" id="userEmail" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="your@email.com">
                    </div>
                    
                    <div class="mb-6">
                        <label for="userPassword" class="block text-gray-700 mb-2">Password</label>
                        <input type="password" id="userPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••">
                    </div>
                    
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <input type="checkbox" id="rememberMe" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label for="rememberMe" class="ml-2 block text-sm text-gray-700">Remember me</label>
                        </div>
                        <a href="#" class="text-sm text-indigo-600 hover:text-indigo-800">Forgot password?</a>
                    </div>
                    
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
                        Login
                    </button>
                    
                    <div class="mt-4 text-center">
                        <p class="text-gray-600">Don't have an account? <a href="#" class="text-indigo-600 hover:text-indigo-800">Register</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Admin Login Modal -->
    <div id="adminLoginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-2xl font-bold text-gray-800">Admin Login</h3>
                    <button id="closeAdminLogin" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form>
                    <div class="mb-4">
                        <label for="adminUsername" class="block text-gray-700 mb-2">Username</label>
                        <input type="text" id="adminUsername" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="admin">
                    </div>
                    
                    <div class="mb-6">
                        <label for="adminPassword" class="block text-gray-700 mb-2">Password</label>
                        <input type="password" id="adminPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="••••••••">
                    </div>
                    
                    <div class="flex items-center justify-between mb-4">
                        <div class="flex items-center">
                            <input type="checkbox" id="rememberAdmin" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                            <label for="rememberAdmin" class="ml-2 block text-sm text-gray-700">Remember me</label>
                        </div>
                    </div>
                    
                    <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
                        Login
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Admin Dashboard (Hidden by default) -->
    <div id="adminDashboard" class="hidden">
        <!-- Admin Sidebar -->
        <div class="fixed inset-y-0 left-0 w-64 bg-gray-800 text-white">
            <div class="p-4">
                <div class="flex items-center mb-8">
                    <i class="fas fa-book-open text-2xl mr-2"></i>
                    <span class="font-bold text-xl">NovelStore Admin</span>
                </div>
                <ul class="space-y-2">
                    <li>
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
                        </a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 px-4 bg-gray-700 rounded flex items-center">
                            <i class="fas fa-book mr-2"></i> Novels
                        </a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-tags mr-2"></i> Categories
                        </a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-users mr-2"></i> Users
                        </a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-shopping-cart mr-2"></i> Orders
                        </a>
                    </li>
                    <li class="pt-4 border-t border-gray-700">
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-cog mr-2"></i> Settings
                        </a>
                    </li>
                    <li>
                        <a href="#" class="block py-2 px-4 hover:bg-gray-700 rounded flex items-center">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <!-- Admin Main Content -->
        <div class="ml-64 p-8">
            <div class="flex justify-between items-center mb-8">
                <h1 class="text-3xl font-bold">Novel Management</h1>
                <button id="addNovelBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-plus mr-2"></i> Add Novel
                </button>
            </div>

            <!-- Novel Table -->
            <div class="bg-white rounded-lg shadow overflow-hidden">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cover</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Author</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th>
                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="bg-white divide-y divide-gray-200">
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <img src="https://via.placeholder.com/50x75" alt="Cover" class="h-12 w-8 object-cover">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">The Silent Patient</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">Alex Michaelides</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">$12.99</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">45</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3 editNovelBtn">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-900 deleteNovelBtn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <img src="https://via.placeholder.com/50x75" alt="Cover" class="h-12 w-8 object-cover">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">Where the Crawdads Sing</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">Delia Owens</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">$14.99</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">32</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3 editNovelBtn">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-900 deleteNovelBtn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <img src="https://via.placeholder.com/50x75" alt="Cover" class="h-12 w-8 object-cover">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">The Midnight Library</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">Matt Haig</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">$10.99</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">5</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3 editNovelBtn">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-900 deleteNovelBtn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <img src="https://via.placeholder.com/50x75" alt="Cover" class="h-12 w-8 object-cover">
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm font-medium text-gray-900">Educated</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">Tara Westover</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <div class="text-sm text-gray-500">$13.49</div>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">28</span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <button class="text-indigo-600 hover:text-indigo-900 mr-3 editNovelBtn">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="text-red-600 hover:text-red-900 deleteNovelBtn">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Add/Edit Novel Modal -->
    <div id="novelModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-2xl">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 id="modalTitle" class="text-2xl font-bold text-gray-800">Add New Novel</h3>
                    <button id="closeNovelModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <form>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <div class="mb-4">
                                <label for="novelTitle" class="block text-gray-700 mb-2">Title</label>
                                <input type="text" id="novelTitle" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Novel title">
                            </div>
                            
                            <div class="mb-4">
                                <label for="novelAuthor" class="block text-gray-700 mb-2">Author</label>
                                <input type="text" id="novelAuthor" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Author name">
                            </div>
                            
                            <div class="mb-4">
                                <label for="novelPrice" class="block text-gray-700 mb-2">Price</label>
                                <input type="number" id="novelPrice" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="0.00" step="0.01">
                            </div>
                            
                            <div class="mb-4">
                                <label for="novelStock" class="block text-gray-700 mb-2">Stock</label>
                                <input type="number" id="novelStock" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="0">
                            </div>
                        </div>
                        
                        <div>
                            <div class="mb-4">
                                <label for="novelCategory" class="block text-gray-700 mb-2">Category</label>
                                <select id="novelCategory" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                                    <option value="">Select category</option>
                                    <option value="fantasy">Fantasy</option>
                                    <option value="romance">Romance</option>
                                    <option value="mystery">Mystery</option>
                                    <option value="scifi">Science Fiction</option>
                                    <option value="horror">Horror</option>
                                    <option value="historical">Historical</option>
                                </select>
                            </div>
                            
                            <div class="mb-4">
                                <label for="novelDescription" class="block text-gray-700 mb-2">Description</label>
                                <textarea id="novelDescription" rows="4" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Novel description"></textarea>
                            </div>
                            
                            <div class="mb-4">
                                <label for="novelCover" class="block text-gray-700 mb-2">Cover Image</label>
                                <div class="flex items-center">
                                    <input type="file" id="novelCover" class="hidden">
                                    <label for="novelCover" class="cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 rounded-lg border border-gray-300">
                                        <i class="fas fa-upload mr-2"></i> Upload
                                    </label>
                                    <span id="fileName" class="ml-2 text-sm text-gray-500">No file chosen</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end mt-6 space-x-3">
                        <button type="button" id="cancelNovel" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
                            Cancel
                        </button>
                        <button type="submit" id="saveNovel" class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg">
                            Save Novel
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div id="deleteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg shadow-xl w-full max-w-md">
            <div class="p-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-xl font-bold text-gray-800">Confirm Delete</h3>
                    <button id="closeDeleteModal" class="text-gray-500 hover:text-gray-700">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                
                <p class="mb-6">Are you sure you want to delete this novel? This action cannot be undone.</p>
                
                <div class="flex justify-end space-x-3">
                    <button id="cancelDelete" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
                        Cancel
                    </button>
                    <button id="confirmDelete" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg">
                        Delete
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Mobile sidebar toggle
        const sidebarToggle = document.getElementById('sidebarToggle');
        const sidebar = document.querySelector('.sidebar');
        const sidebarOverlay = document.getElementById('sidebarOverlay');

        sidebarToggle.addEventListener('click', () => {
            sidebar.classList.add('active');
            sidebarOverlay.classList.remove('hidden');
        });

        sidebarOverlay.addEventListener('click', () => {
            sidebar.classList.remove('active');
            sidebarOverlay.classList.add('hidden');
        });

        // Login modals
        const userLoginBtn = document.getElementById('userLoginBtn');
        const adminLoginBtn = document.getElementById('adminLoginBtn');
        const userLoginModal = document.getElementById('userLoginModal');
        const adminLoginModal = document.getElementById('adminLoginModal');
        const closeUserLogin = document.getElementById('closeUserLogin');
        const closeAdminLogin = document.getElementById('closeAdminLogin');

        userLoginBtn.addEventListener('click', (e) => {
            e.preventDefault();
            userLoginModal.classList.remove('hidden');
        });

        adminLoginBtn.addEventListener('click', (e) => {
            e.preventDefault();
            adminLoginModal.classList.remove('hidden');
        });

        closeUserLogin.addEventListener('click', () => {
            userLoginModal.classList.add('hidden');
        });

        closeAdminLogin.addEventListener('click', () => {
            adminLoginModal.classList.add('hidden');
        });

        // Admin dashboard simulation (for demo purposes)
        // In a real app, this would be handled by backend authentication
        const adminPasswordInput = document.getElementById('adminPassword');
        const adminDashboard = document.getElementById('adminDashboard');
        const mainContent = document.querySelector('.container');

        adminLoginModal.querySelector('form').addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('adminUsername').value;
            const password = adminPasswordInput.value;
            
            // Simple demo authentication
            if (password === 'admin123') {
                adminLoginModal.classList.add('hidden');
                mainContent.classList.add('hidden');
                document.querySelector('footer').classList.add('hidden');
                adminDashboard.classList.remove('hidden');
            } else {
                alert('Invalid credentials. Try admin123 as password for demo.');
            }
        });

        // Novel management modals
        const addNovelBtn = document.getElementById('addNovelBtn');
        const novelModal = document.getElementById('novelModal');
        const closeNovelModal = document.getElementById('closeNovelModal');
        const cancelNovel = document.getElementById('cancelNovel');
        const deleteModal = document.getElementById('deleteModal');
        const closeDeleteModal = document.getElementById('closeDeleteModal');
        const cancelDelete = document.getElementById('cancelDelete');
        const editNovelBtns = document.querySelectorAll('.editNovelBtn');
        const deleteNovelBtns = document.querySelectorAll('.deleteNovelBtn');
        const novelCoverInput = document.getElementById('novelCover');
        const fileName = document.getElementById('fileName');

        // File upload display
        novelCoverInput.addEventListener('change', (e) => {
            if (e.target.files.length > 0) {
                fileName.textContent = e.target.files[0].name;
            } else {
                fileName.textContent = 'No file chosen';
            }
        });

        // Add novel
        addNovelBtn.addEventListener('click', () => {
            document.getElementById('modalTitle').textContent = 'Add New Novel';
            novelModal.classList.remove('hidden');
        });

        // Edit novel
        editNovelBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                document.getElementById('modalTitle').textContent = 'Edit Novel';
                // In a real app, you would populate the form with existing data
                novelModal.classList.remove('hidden');
            });
        });

        // Delete novel
        deleteNovelBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                deleteModal.classList.remove('hidden');
            });
        });

        // Close novel modal
        closeNovelModal.addEventListener('click', () => {
            novelModal.classList.add('hidden');
        });

        cancelNovel.addEventListener('click', () => {
            novelModal.classList.add('hidden');
        });

        // Close delete modal
        closeDeleteModal.addEventListener('click', () => {
            deleteModal.classList.add('hidden');
        });

        cancelDelete.addEventListener('click', () => {
            deleteModal.classList.add('hidden');
        });

        // Confirm delete
        document.getElementById('confirmDelete').addEventListener('click', () => {
            // In a real app, you would send a delete request to the server
            deleteModal.classList.add('hidden');
            alert('Novel deleted successfully (demo)');
        });

        // Save novel
        document.getElementById('saveNovel').addEventListener('click', (e) => {
            e.preventDefault();
            // In a real app, you would send the form data to the server
            novelModal.classList.add('hidden');
            alert('Novel saved successfully (demo)');
        });
    </script>
</body>
</html>