275 lines
8.9 KiB
PHP
275 lines
8.9 KiB
PHP
<?php
|
|
session_start();
|
|
require '../config.php';
|
|
require '../include_header.php';
|
|
|
|
?>
|
|
|
|
<body>
|
|
<?php require '../include_topbar.php';?>
|
|
<?php require '../include_master_sidebar.php';?>
|
|
|
|
|
|
<!-- MAIN CONTENT -->
|
|
<main id="content" class="content py-15">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-5 gap-3">
|
|
<div class="">
|
|
<h1 class="fs-3 mb-1">Add Product</h1>
|
|
<p class="mb-0">Manage your Product items</p>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="productForm">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body p-6">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="product_name" class="form-label">Product Name</label>
|
|
<input type="text" class="form-control" id="product_name" placeholder="Enter product name" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="sku" class="form-label">SKU</label>
|
|
<input type="text" class="form-control" id="sku" placeholder="Enter SKU" required>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="price" class="form-label">Price</label>
|
|
<input type="number" class="form-control" id="price" placeholder="0.00" step="0.01" required>
|
|
</div>
|
|
<div class="col-md-2 mb-3">
|
|
<label for="uom" class="form-label">UOM</label>
|
|
<input type="text" class="form-control" id="uom" placeholder="pcs"
|
|
list="uom_suggestions" autocomplete="off" maxlength="20">
|
|
<datalist id="uom_suggestions">
|
|
<option value="pcs">
|
|
<option value="box">
|
|
<option value="kg">
|
|
<option value="g">
|
|
<option value="l">
|
|
<option value="ml">
|
|
<option value="set">
|
|
<option value="roll">
|
|
<option value="pair">
|
|
<option value="sheet">
|
|
<option value="bag">
|
|
<option value="bottle">
|
|
</datalist>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="min_stock" class="form-label">Min Stock</label>
|
|
<input type="number" class="form-control" id="min_stock" placeholder="0" min="0" required>
|
|
<div class="invalid-feedback" id="min_stock_error"></div>
|
|
<small class="text-muted" id="min_stock_hint">Safety floor</small>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="reorder_point" class="form-label">Reorder Point</label>
|
|
<input type="number" class="form-control" id="reorder_point" placeholder="0" min="0" required>
|
|
<div class="invalid-feedback" id="reorder_point_error"></div>
|
|
<small class="text-muted" id="reorder_point_hint">Must be greater than or equal to min stock</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<label for="category" class="form-label">Category</label>
|
|
<select class="form-select" id="category" required> </select>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="status" class="form-label">status</label>
|
|
<select class="form-select" id="status" required>
|
|
<option value="1">Active</option>
|
|
<option value="0">inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<!-- Remove d-none from file input so it shows by default -->
|
|
<div class="mb-3">
|
|
<label class="form-label">Product Image</label>
|
|
<div id="current_image_display" class="d-none">
|
|
<div class="d-flex align-items-center gap-2">
|
|
<div class='input-group'>
|
|
<span class='btn btn-outline-secondary' type='button' id='change_image_btn'>Change</span>
|
|
<input type='text' class='form-control' id='current_file_label' disabled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="file" class="form-control" id="product_image" accept="image/*">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="description" class="form-label">Description</label>
|
|
<textarea class="form-control" id="description" rows="4"
|
|
placeholder="Enter product description"></textarea>
|
|
</div>
|
|
<div class="d-flex gap-2">
|
|
<button type="submit" class="btn btn-primary" onclick="manage_product();">Create</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
|
|
<?php require "../include_ending.php";?>
|
|
|
|
<script>
|
|
function manage_product() {
|
|
|
|
let formData = new FormData();
|
|
|
|
// Append the file (single image, not array)
|
|
let imageFile = $('#product_image')[0].files[0];
|
|
if (imageFile) {
|
|
formData.append('product_image', imageFile);
|
|
}
|
|
|
|
formData.append('keep_files', $('#current_file_label').val())
|
|
formData.append('uom', $('#uom').val() || 'pcs')
|
|
|
|
return ajax_request({
|
|
url: "<?php echo $server_url?>inventory/api/engine/manage_product.php",
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
debugMode: 0,
|
|
formData: formData,
|
|
action: 'manage',
|
|
onSuccess: function(res) {
|
|
|
|
window.location.href = "<?php echo $server_url?>inventory/product.php";
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function retrieve_category() {
|
|
|
|
return ajax_request({
|
|
url: "<?php echo $server_url?>inventory/api/engine/product_category.php",
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function(res) {
|
|
|
|
var option = ``;
|
|
$.each(res.output, function(key, item) {
|
|
option += `<option value='${item.id}'>${item.category}</option>`;
|
|
})
|
|
$(`select#category`).html(option);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
function retrieve_for_edit() {
|
|
|
|
<?php if(empty($_GET["id"])){ ?>
|
|
return false;
|
|
<?php } ?>
|
|
|
|
return ajax_request({
|
|
url: "<?php echo $server_url?>inventory/api/engine/retrieve_product.php",
|
|
autoPrepare: true,
|
|
checkRequired: 0,
|
|
action: 'read',
|
|
onSuccess: function(res) {
|
|
|
|
$.each(res.output, function(key, item) {
|
|
let el = $(`#${key}`);
|
|
if (el.attr('type') === 'file') return; // skip file inputs
|
|
el.val(item);
|
|
});
|
|
|
|
// Handle image field
|
|
if (res.output.product_image) {
|
|
$('#current_file_label').val(res.output.product_image);
|
|
$('#current_image_display').removeClass('d-none'); // show filename + change btn
|
|
$('#product_image').addClass('d-none'); // hide file input
|
|
}
|
|
|
|
$('#change_image_btn').on('click', function() {
|
|
$('#current_image_display').addClass('d-none');
|
|
$('#product_image').removeClass('d-none');
|
|
});
|
|
|
|
$(`button[type=submit]`).text('Update');
|
|
|
|
$(`button[type=reset]`).hide();
|
|
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
$(async function() {
|
|
try {
|
|
await retrieve_category();
|
|
await retrieve_for_edit();
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
});
|
|
|
|
|
|
function validate_stock_thresholds() {
|
|
|
|
var min_stock = parseFloat($('#min_stock').val() || 0);
|
|
var reorder_point = parseFloat($('#reorder_point').val() || 0);
|
|
|
|
// Reset both fields to clean state
|
|
$('#min_stock, #reorder_point').removeClass('is-invalid');
|
|
$('#min_stock_error, #reorder_point_error').text('');
|
|
$('#min_stock_hint, #reorder_point_hint').show();
|
|
|
|
// Helper: mark a field invalid and hide its hint
|
|
function flag(field, msg) {
|
|
$('#' + field).addClass('is-invalid');
|
|
$('#' + field + '_error').text(msg);
|
|
$('#' + field + '_hint').hide();
|
|
}
|
|
|
|
if (min_stock < 0) {
|
|
flag('min_stock', 'Cannot be negative.');
|
|
return false;
|
|
}
|
|
|
|
if (reorder_point < 0) {
|
|
flag('reorder_point', 'Cannot be negative.');
|
|
return false;
|
|
}
|
|
|
|
if (min_stock > reorder_point) {
|
|
flag('reorder_point', 'Must be greater than or equal to min stock (' + min_stock + ').');
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
// Live feedback as the user types
|
|
$('#min_stock, #reorder_point').on('input', validate_stock_thresholds);
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|