132 lines
4.7 KiB
HTML
132 lines
4.7 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block styles %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/add_product.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/add_product.js') }}" defer></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="admin-container">
|
|
<h2>Add New Product</h2>
|
|
<form method="POST" enctype="multipart/form-data" class="product-form">
|
|
<div class="form-grid">
|
|
<div class="form-section">
|
|
<h3>Basic Information</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="name">Product Name *</label>
|
|
<input type="text" id="name" name="name" required class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="sku">SKU (Stock Keeping Unit)</label>
|
|
<input type="text" id="sku" name="sku" class="form-control" placeholder="e.g., TSHIRT-RED-M">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea id="description" name="description" class="form-control" rows="4"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="price">Price ($) *</label>
|
|
<input type="number" step="0.01" id="price" name="price" required class="form-control">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="stock">Stock Quantity *</label>
|
|
<input type="number" id="stock" name="stock" value="0" min="0" required class="form-control">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Product Details</h3>
|
|
|
|
<div class="form-group">
|
|
<label for="category_id">Category *</label>
|
|
<select id="category_id" name="category_id" class="form-control">
|
|
<option value="">-- Select Category --</option>
|
|
{% for c in categories %}
|
|
<option value="{{ c.id }}">{{ c.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="material">Material</label>
|
|
<input type="text" id="material" name="material" class="form-control" placeholder="e.g., Cotton, Polyester">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="size">Size</label>
|
|
<select id="size" name="size" class="form-control">
|
|
<option value="">-- Select Size --</option>
|
|
{% for size in sizes %}
|
|
<option value="{{ size }}">{{ size }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="color">Color</label>
|
|
<input type="text" id="color" name="color" class="form-control" placeholder="e.g., Red, Blue">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="company">Brand/Company</label>
|
|
<input type="text" id="company" name="company" class="form-control" placeholder="e.g., Nike, Adidas">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="weight">Weight (kg)</label>
|
|
<input type="number" step="0.01" id="weight" name="weight" class="form-control" placeholder="0.5">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="dimensions">Dimensions</label>
|
|
<input type="text" id="dimensions" name="dimensions" class="form-control" placeholder="10x5x3 cm">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Product Images</h3>
|
|
|
|
<div class="form-group">
|
|
<label>Upload Images *</label>
|
|
<div class="image-upload-area" id="image-upload-area">
|
|
<div class="upload-prompt">
|
|
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
|
|
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
|
<polyline points="17 8 12 3 7 8"></polyline>
|
|
<line x1="12" y1="3" x2="12" y2="15"></line>
|
|
</svg>
|
|
<p>Click or drag images here</p>
|
|
<p class="upload-hint">First image will be primary</p>
|
|
</div>
|
|
<input type="file" name="images[]" multiple accept="image/*" class="image-input" id="image-input">
|
|
</div>
|
|
|
|
<div class="image-preview" id="image-preview"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="submit" class="btn btn-primary">Save Product</button>
|
|
<a href="{{ url_for('admin.dashboard') }}" class="btn btn-secondary">Cancel</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{% endblock %}
|