84 lines
3.6 KiB
Plaintext
84 lines
3.6 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Create Order";
|
|
}
|
|
|
|
<div class="container mt-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow">
|
|
<div class="card-body p-5">
|
|
<h2 class="mb-4">Create New Order</h2>
|
|
|
|
<form method="post" id="createOrderForm">
|
|
<div class="mb-3">
|
|
<label for="creatorName" class="form-label">Order Name</label>
|
|
<input type="text" class="form-control" id="creatorName" name="creatorName" placeholder="e.g., Pizza Party" required>
|
|
<small class="text-muted">Give your order a name</small>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h5 class="mb-3">Menu Items</h5>
|
|
<p class="text-muted">Add items that people can order</p>
|
|
|
|
<div id="itemsContainer">
|
|
<div class="item-row mb-3">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<input type="text" class="form-control" placeholder="Item name (e.g., Margherita Pizza)" name="itemNames[]">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<span class="input-group-text">$</span>
|
|
<input type="number" class="form-control" placeholder="Price" name="itemPrices[]" step="0.01" min="0">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" class="btn btn-secondary mb-3" id="addItemBtn">+ Add Another Item</button>
|
|
|
|
<hr>
|
|
|
|
<div class="d-flex gap-2">
|
|
<button type="submit" class="btn btn-primary">Create Order</button>
|
|
<a href="/Home/Dashboard" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('addItemBtn').addEventListener('click', function() {
|
|
const container = document.getElementById('itemsContainer');
|
|
const newRow = document.createElement('div');
|
|
newRow.className = 'item-row mb-3';
|
|
newRow.innerHTML = `
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<input type="text" class="form-control" placeholder="Item name" name="itemNames[]">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="input-group">
|
|
<span class="input-group-text">$</span>
|
|
<input type="number" class="form-control" placeholder="Price" name="itemPrices[]" step="0.01" min="0">
|
|
<button type="button" class="btn btn-outline-danger" onclick="this.closest('.item-row').remove()">Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
container.appendChild(newRow);
|
|
});
|
|
|
|
// Add first item row on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const container = document.getElementById('itemsContainer');
|
|
if (container.children.length === 0) {
|
|
document.getElementById('addItemBtn').click();
|
|
}
|
|
});
|
|
</script> |