{% extends 'base.html' %}
{% block content %}

<section class="hero-panel p-4 p-lg-5 mb-4">
	<h1 class="display-6 fw-semibold mb-2">Admin Console</h1>
	<p class="mb-0">Create and manage storefront products.</p>
</section>

<div class="row g-4 justify-content-center">
	<div class="col-12 col-xl-6">
		<div class="form-container">
			<h2 class="h4 mb-3">Create New Item</h2>
			<form method="POST" action="{{ url_for('order.create_item') }}">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<div class="mb-3">
					<label for="name" class="form-label">Item Name</label>
					<input type="text" class="form-control" id="name" name="name" required placeholder="Enter item name">
				</div>
				<div class="row g-3">
					<div class="col-12 col-md-6">
						<label for="quantity" class="form-label">Item Quantity</label>
						<input type="number" class="form-control" id="quantity" name="quantity" min="1" required placeholder="Enter quantity">
					</div>
					<div class="col-12 col-md-6">
						<label for="price" class="form-label">Item Price</label>
						<input type="number" class="form-control" id="price" name="price" step="0.01" required placeholder="0.00">
					</div>
				</div>
				<div class="mt-3 mb-4">
					<label for="description" class="form-label">Item Description</label>
					<textarea class="form-control" id="description" name="description" rows="4" required placeholder="Describe this item"></textarea>
				</div>
				<button type="submit" class="btn btn-outline-primary w-100">Create Item</button>
			</form>
		</div>
	</div>

	<div class="col-12 col-xl-6">
		<div class="form-container">
			<h2 class="h4 mb-3">Update Existing Item</h2>
			<form method="POST" id="update-item-form" action="#">
				<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
				<div class="mb-3">
					<label for="update_item_id" class="form-label">Select Item</label>
					<select class="form-select" id="update_item_id" required>
						<option value="" selected disabled>Choose an item to update</option>
					</select>
				</div>
				<div class="mb-3">
					<label for="update_name" class="form-label">Item Name</label>
					<input type="text" class="form-control" id="update_name" name="name" required placeholder="Enter item name">
				</div>
				<div class="row g-3">
					<div class="col-12 col-md-6">
						<label for="update_quantity" class="form-label">Item Quantity</label>
						<input type="number" class="form-control" id="update_quantity" name="quantity" min="0" required placeholder="Enter quantity">
					</div>
					<div class="col-12 col-md-6">
						<label for="update_price" class="form-label">Item Price</label>
						<input type="number" class="form-control" id="update_price" name="price" step="0.01" required placeholder="0.00">
					</div>
				</div>
				<div class="mt-3 mb-4">
					<label for="update_description" class="form-label">Item Description</label>
					<textarea class="form-control" id="update_description" name="description" rows="4" required placeholder="Describe this item"></textarea>
				</div>
				<button type="submit" class="btn btn-outline-primary w-100">Update Item</button>
			</form>
		</div>
	</div>
</div>

<div id="getItemsSrc" data-link="{{ url_for('order.get_items') }}"></div>
<div id="updateItemUrlTemplate" data-link="{{ url_for('order.update_item', item_id=0) }}"></div>
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
{% endblock %}