/home/ejrndhmu/tokobiolink.com/admin/pages/products.php
<?php
// Get admin products only (reseller_id IS NULL)
$products = getAdminProducts();
?>
<div class="bg-white rounded-lg shadow-sm border border-gray-200">
<div class="p-6 border-b border-gray-200 flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-900">Daftar Produk Digital</h3>
<div class="flex space-x-2">
<button onclick="exportProducts()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
<i class="fas fa-download mr-2"></i>
Export Excel
</button>
<button onclick="openImportModal()" class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
<i class="fas fa-upload mr-2"></i>
Import Excel
</button>
<button onclick="openAddProductModal()" class="bg-blue-primary hover:bg-blue-dark text-white px-4 py-2 rounded-lg transition duration-200 flex items-center">
<i class="fas fa-plus mr-2"></i>
Tambah Produk
</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Produk</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kategori</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Harga</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Aksi</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<?php if (empty($products)): ?>
<tr>
<td colspan="5" class="px-6 py-4 text-center text-gray-500">
Belum ada produk yang tersedia.
</td>
</tr>
<?php else: ?>
<?php foreach ($products as $product): ?>
<tr class="hover:bg-gray-50">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="w-12 h-12 bg-gradient-to-br from-blue-100 to-blue-200 rounded-lg flex items-center justify-center">
<i class="fas fa-box text-blue-primary text-lg"></i>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900"><?php echo htmlspecialchars($product['name']); ?></div>
<div class="text-sm text-gray-500"><?php echo htmlspecialchars(substr($product['description'], 0, 50)) . (strlen($product['description']) > 50 ? '...' : ''); ?></div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full bg-gray-100 text-gray-800">
<?php echo htmlspecialchars($product['category'] ?: 'Umum'); ?>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">
<?php echo formatRupiah($product['price']); ?>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full <?php echo $product['status'] === 'active' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'; ?>">
<?php echo $product['status'] === 'active' ? 'Aktif' : 'Nonaktif'; ?>
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
<button onclick="editProduct(<?php echo $product['id']; ?>)" class="text-blue-600 hover:text-blue-900 transition duration-200" title="Edit">
<i class="fas fa-edit"></i>
</button>
<form method="POST" class="inline" onsubmit="return confirmDelete('Apakah Anda yakin ingin menghapus produk ini?')">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<input type="hidden" name="action" value="delete_product">
<input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
<button type="submit" class="text-red-600 hover:text-red-900 transition duration-200" title="Hapus">
<i class="fas fa-trash"></i>
</button>
</form>
</td>
</tr>
<?php endforeach; ?>
<?php endif; ?>
</tbody>
</table>
</div>
</div>
<!-- Add Product Modal -->
<div id="addProductModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg max-w-lg w-full max-h-screen overflow-y-auto">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-900">Tambah Produk Baru</h3>
<button onclick="closeAddProductModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<form id="addProductForm" method="POST" class="p-6 space-y-4">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<input type="hidden" name="action" value="add_product">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Produk</label>
<input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Deskripsi</label>
<textarea name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent"></textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Harga</label>
<input type="number" name="price" min="0" step="1000" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
<select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<option value="">Pilih Kategori</option>
<option value="E-book">E-book</option>
<option value="Video Course">Video Course</option>
<option value="Template">Template</option>
<option value="Plugin">Plugin</option>
<option value="Software">Software</option>
<option value="Audio">Audio</option>
<option value="Lainnya">Lainnya</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">URL File</label>
<input type="url" name="file_url" placeholder="https://example.com/file.zip" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<p class="text-xs text-gray-500 mt-1">URL untuk mengunduh produk digital</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">URL Thumbnail</label>
<input type="url" name="thumbnail" placeholder="https://example.com/thumbnail.jpg" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<p class="text-xs text-gray-500 mt-1">URL gambar thumbnail produk</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
<select name="status" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<option value="active">Aktif</option>
<option value="inactive">Nonaktif</option>
</select>
</div>
<div class="flex justify-end space-x-3 pt-4">
<button type="button" onclick="closeAddProductModal()" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition duration-200">
Batal
</button>
<button type="submit" class="px-4 py-2 bg-blue-primary text-white rounded-lg hover:bg-blue-dark transition duration-200">
Tambah Produk
</button>
</div>
</form>
</div>
</div>
<!-- Edit Product Modal -->
<div id="editProductModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg max-w-lg w-full max-h-screen overflow-y-auto">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-900">Edit Produk</h3>
<button onclick="closeEditProductModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<form id="editProductForm" method="POST" class="p-6 space-y-4">
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
<input type="hidden" name="action" value="edit_product">
<input type="hidden" name="product_id" id="editProductId">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Produk</label>
<input type="text" name="name" id="editProductName" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Deskripsi</label>
<textarea name="description" id="editProductDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent"></textarea>
</div>
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Harga</label>
<input type="number" name="price" id="editProductPrice" min="0" step="1000" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Kategori</label>
<select name="category" id="editProductCategory" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<option value="">Pilih Kategori</option>
<option value="E-book">E-book</option>
<option value="Video Course">Video Course</option>
<option value="Template">Template</option>
<option value="Plugin">Plugin</option>
<option value="Software">Software</option>
<option value="Audio">Audio</option>
<option value="Lainnya">Lainnya</option>
</select>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">URL File</label>
<input type="url" name="file_url" id="editProductFileUrl" placeholder="https://example.com/file.zip" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<p class="text-xs text-gray-500 mt-1">URL untuk mengunduh produk digital</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">URL Thumbnail</label>
<input type="url" name="thumbnail" id="editProductThumbnail" placeholder="https://example.com/thumbnail.jpg" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<p class="text-xs text-gray-500 mt-1">URL gambar thumbnail produk</p>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
<select name="status" id="editProductStatus" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
<option value="active">Aktif</option>
<option value="inactive">Nonaktif</option>
</select>
</div>
<div class="flex justify-end space-x-3 pt-4">
<button type="button" onclick="closeEditProductModal()" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition duration-200">
Batal
</button>
<button type="submit" class="px-4 py-2 bg-blue-primary text-white rounded-lg hover:bg-blue-dark transition duration-200">
Update Produk
</button>
</div>
</form>
</div>
</div>
<!-- Import Modal -->
<div id="importModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
<div class="bg-white rounded-lg max-w-lg w-full">
<div class="p-6 border-b border-gray-200">
<div class="flex justify-between items-center">
<h3 class="text-lg font-semibold text-gray-900">Import Produk dari Excel</h3>
<button onclick="closeImportModal()" class="text-gray-400 hover:text-gray-600">
<i class="fas fa-times"></i>
</button>
</div>
</div>
<form id="importForm" enctype="multipart/form-data" class="p-6 space-y-4">
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-4">
<div class="flex items-start">
<i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
<div>
<h4 class="text-sm font-medium text-blue-800 mb-1">Format File Excel</h4>
<p class="text-sm text-blue-700 mb-2">File harus berformat .xlsx dengan kolom:</p>
<ul class="text-xs text-blue-600 list-disc list-inside space-y-1">
<li>name (Nama Produk)</li>
<li>description (Deskripsi)</li>
<li>price (Harga)</li>
<li>category (Kategori)</li>
<li>file_url (URL File)</li>
<li>thumbnail (URL Thumbnail)</li>
<li>status (active/inactive)</li>
</ul>
<div class="mt-3">
<a href="../ajax/download_template.php" class="text-blue-600 hover:text-blue-800 text-xs underline">
<i class="fas fa-download mr-1"></i>
Download Template Excel
</a>
</div>
</div>
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Pilih File Excel</label>
<input type="file" name="excel_file" accept=".xlsx,.xls" required class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-primary focus:border-transparent">
</div>
<div class="flex justify-end space-x-3 pt-4">
<button type="button" onclick="closeImportModal()" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition duration-200">
Batal
</button>
<button type="button" onclick="importProducts()" class="px-4 py-2 bg-orange-600 text-white rounded-lg hover:bg-orange-700 transition duration-200">
<i class="fas fa-upload mr-2"></i>
Import Produk
</button>
</div>
</form>
</div>
</div>
<script>
function openAddProductModal() {
document.getElementById('addProductModal').classList.remove('hidden');
}
function closeAddProductModal() {
document.getElementById('addProductModal').classList.add('hidden');
document.getElementById('addProductForm').reset();
}
function openEditProductModal() {
document.getElementById('editProductModal').classList.remove('hidden');
}
function closeEditProductModal() {
document.getElementById('editProductModal').classList.add('hidden');
document.getElementById('editProductForm').reset();
}
function editProduct(productId) {
// Fetch product data via AJAX
fetch('?action=get_product&id=' + productId)
.then(response => response.json())
.then(data => {
if (data.success) {
const product = data.product;
document.getElementById('editProductId').value = product.id;
document.getElementById('editProductName').value = product.name;
document.getElementById('editProductDescription').value = product.description || '';
document.getElementById('editProductPrice').value = product.price;
document.getElementById('editProductCategory').value = product.category || '';
document.getElementById('editProductFileUrl').value = product.file_url || '';
document.getElementById('editProductThumbnail').value = product.thumbnail || '';
document.getElementById('editProductStatus').value = product.status;
openEditProductModal();
} else {
alert('Error: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Terjadi kesalahan saat mengambil data produk.');
});
}
function confirmDelete(message) {
return confirm(message);
}
// Export/Import functions
function exportProducts() {
window.location.href = '../ajax/export_products.php';
}
function openImportModal() {
document.getElementById('importModal').classList.remove('hidden');
}
function closeImportModal() {
document.getElementById('importModal').classList.add('hidden');
document.getElementById('importForm').reset();
}
function importProducts() {
const fileInput = document.querySelector('input[name="excel_file"]');
const file = fileInput.files[0];
// Validate file
if (!file) {
alert('Silakan pilih file Excel terlebih dahulu.');
return;
}
const allowedExtensions = ['xlsx', 'xls'];
const fileExtension = file.name.split('.').pop().toLowerCase();
if (!allowedExtensions.includes(fileExtension)) {
alert('File harus berformat Excel (.xlsx atau .xls)');
return;
}
// Check file size (max 5MB)
if (file.size > 5 * 1024 * 1024) {
alert('Ukuran file tidak boleh lebih dari 5MB.');
return;
}
const formData = new FormData(document.getElementById('importForm'));
// Show loading
const importButton = document.querySelector('button[onclick="importProducts()"]');
const originalText = importButton.innerHTML;
importButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Mengimport...';
importButton.disabled = true;
fetch('../ajax/import_products.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Import berhasil! ' + data.imported + ' produk telah ditambahkan.');
closeImportModal();
location.reload();
} else {
alert('Error: ' + data.message);
}
})
.catch(error => {
console.error('Error:', error);
alert('Terjadi kesalahan saat import. Silakan coba lagi.');
})
.finally(() => {
// Reset button
importButton.innerHTML = originalText;
importButton.disabled = false;
});
}
// Close modals when clicking outside
document.getElementById('addProductModal').addEventListener('click', function(e) {
if (e.target === this) {
closeAddProductModal();
}
});
document.getElementById('editProductModal').addEventListener('click', function(e) {
if (e.target === this) {
closeEditProductModal();
}
});
document.getElementById('importModal').addEventListener('click', function(e) {
if (e.target === this) {
closeImportModal();
}
});
</script>