<?php
// Get products for this reseller only
$products = getProductsByReseller($_SESSION['user_id']);
?>
<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">Produk Digital Saya</h3>
<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 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">Dibuat</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="6" class="px-6 py-4 text-center text-gray-500">
Belum ada produk yang Anda buat. Klik "Tambah Produk" untuk membuat produk pertama.
</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 text-gray-500">
<?php echo formatDateIndo($product['created_at']); ?>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2">
<button onclick="viewProduct(<?php echo $product['id']; ?>)" class="text-green-600 hover:text-green-900 transition duration-200" title="Lihat Detail">
<i class="fas fa-eye"></i>
</button>
<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>
<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 viewProduct(productId) {
alert('Fitur lihat detail produk akan segera hadir.');
}
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);
}
// 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();
}
});
</script>