Notes

Write a note in this area. It's really easy to share with others. Click here ...{% extends "admin/admin_base.html" %}
{% load static %}
{% block content %}

<style>
/* ===== Page layout ===== */
.main {
padding: 30px;
font-family: "Poppins", sans-serif;
background: #f8f9fa;
min-height: 100vh;
}

.navbar {
margin-bottom: 15px;
}

input, textarea, select {
padding: 10px;
width: 300px;
border: 1px solid #ccc;
border-radius: 8px;
outline: none;
}

button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
}

button:hover {
background: #0056b3;
}

/* ===== Modal styling ===== */
#productModal {
display: none;
position: fixed;
z-index: 1000;
left: 0; top: 0;
width: 100%; height: 100%;
background: rgba(0,0,0,0.5);
}

.modal-content {
background: white;
margin: 10% auto;
padding: 20px;
border-radius: 10px;
width: 40%;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
from {opacity: 0; transform: scale(0.9);}
to {opacity: 1; transform: scale(1);}
}

/* ===== Product table ===== */
.table-container {
margin-top: 30px;
}

table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
background: white;
border-radius: 10px;
overflow: hidden;
}

th, td {
padding: 12px;
text-align: center;
border-bottom: 1px solid #ddd;
}

th {
background: #007bff;
color: white;
}
</style>

<div class="main">
<div class="navbar">
<h3>Welcome, {{ request.user.username }}</h3>
</div>

<div class="navbar">
<form id="categoryForm" method="post">
{% csrf_token %}
<input type="text" id="categoryName" name="name" placeholder="Enter category name" required>
<textarea id="categoryDescription" name="description" placeholder="Enter category description" required></textarea>
<button id="openModal" type="button">Add Product</button>
</form>
</div>

<!-- Product Modal -->
<div id="productModal">
<div class="modal-content">
<h3>Add Product to <span id="modalCategoryName"></span></h3>
<form id="productForm">
<input type="text" id="productId" placeholder="Product ID" required><br><br>
<input type="text" id="productName" placeholder="Product Name" required><br><br>
<textarea id="productDesc" placeholder="Product Description" required></textarea><br><br>
<button type="submit">Add Product</button>
<button type="button" id="closeModal">Cancel</button>
</form>
</div>
</div>

<!-- Product Table -->
<div class="table-container">
<h3>Product List</h3>
<table id="productTable">
<thead>
<tr>
<th>Category Name</th>
<th>Product ID</th>
<th>Product Name</th>
<th>Description</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// Open modal
$('#openModal').click(function() {
let category = $('#categoryName').val().trim();
if (category === "") {
alert("Please enter category name first!");
return;
}
$('#modalCategoryName').text(category);
$('#productModal').fadeIn();
});

// Close modal
$('#closeModal').click(function() {
$('#productModal').fadeOut();
$('#productForm')[0].reset();
});

// Add product to table
$('#productForm').submit(function(e) {
e.preventDefault();

let category = $('#categoryName').val();
let productId = $('#productId').val();
let productName = $('#productName').val();
let productDesc = $('#productDesc').val();

let newRow = `
<tr>
<td>${category}</td>
<td>${productId}</td>
<td>${productName}</td>
<td>${productDesc}</td>
</tr>
`;

$('#productTable tbody').append(newRow);
$('#productForm')[0].reset();
$('#productModal').fadeOut();
});
});
</script>

{% endblock %}