<!DOCTYPE html>
<html lang="es">
<!-- Include Head -->
<%- include('partials/head', {title: 'Formulario de creación'}) %>
<body>
	<!-- Header -->
	<%- include('partials/headerNavbar') %>
	<!-- /Header -->

	<div class="container products-wrapper">
		<div class="row">
			<div class="col-12">
				<h2 class="products-title">Formulario de creación de productos</h2>
			</div>
		</div>
		<div class="col-12">
			<form action="/products/create" method="POST" enctype="multipart/form-data">
				<div class="row product-detail">
					<div class="col-12 col-md-6">
						<label for="name" class="form-label"><b>Nombre del producto:</b></label>
						<input type="text" id="name" name="name" placeholder="Ej: Zapatillas Reebok" 
							class="form-input form-control"  
							<%= locals.errors && errors.name ? style="border: 2px solid red" : null %>
							value="<%= locals.oldData ? oldData.name : null %>"
						>
						<% if (locals.errors && errors.name) { %>
							<div class="text-danger" style="color: red">
								<%= errors.name.msg %>
							</div>

						<% } %>
					</div>
					<div class="col-12 col-md-6">
						<label for="price" class="form-label">Precio del producto:</label>
						<input type="text" id="price" name="price" placeholder="Ej: 5678" class="form-input"
							<%= locals.errors && errors.price ? style="border: 2px solid red" : null %>
							value="<%= locals.oldData ? oldData.price : null %>"
						>
						<% if (locals.errors && errors.price) { %>
							<div class="text-danger" style="color: red">
								<%= errors.price.msg %>
							</div>

						<% } %>
					</div>
					<div class="col-12 col-md-6">
						<label for="discount" class="form-label">Descuento:</label>
						<input type="text" id="discount" name="discount" placeholder="Ej: 15" class="form-input"
							<%= locals.errors && errors.discount ? style="border: 2px solid red" : null %>
							value="<%= locals.oldData ? oldData.discount : null %>"
						>
						<% if (locals.errors && errors.discount) { %>
							<div class="text-danger" style="color: red">
								<%= errors.discount.msg %>
							</div>

						<% } %>
					</div>
					<div class="col-12 col-md-6">
						<label for="category" class="form-label">Categoría:</label>
						<select name="category" id="category" class="form-input" 
						<%= locals.errors && errors.category ? style="border: 2px solid red" : null %>>
							<option value="">Elegí una categoría</option>
							<% 
								let categories = ['En oferta', 'Ultimos agregados', 'Mas vendidos'];
							%>
							<% for (const category in categories) { %>
								<option 
									value="<%= `${category}` %>" 
									<%= locals.oldData && (`${category}` == oldData.category) ? "selected" : null %>
									> 
										<%= `${categories[category]}` %> 
								</option>
							<% } %>
						</select>
						<% if (locals.errors && errors.category) { %>
							<div class="text-danger" style="color: red" style="font-weight: bold">
								<%= errors.category.msg %>
							</div>
						<% } %>
					</div>
					<div class="col-12">
						<label for="description" class="form-label">Descipción:</label>
						<textarea name="description" 
							id="description" class="form-input" 
							<%= locals.errors && errors.description ? style="border: 2px solid red" : null %>>
						<%= locals.oldData ? oldData.description : null %>
						</textarea>
						<% if (locals.errors && errors.description) { %>
							<div class="text-danger" style="color: red">
								<%= errors.description.msg %>
							</div>

						<% } %>
					</div>
					<div class="col-12">
						<label for="image" class="form-label">Imagen:</label>
						<input type="file" id="image" name="imageProduct" placeholder="Ej: url" class="form-input">
						<% if (locals.errors && errors.imageProduct) { %>
							<div class="text-danger" style="color: red">
								<%= errors.imageProduct.msg %>
							</div>

						<% } %>
					</div>

					<div class="col-12">
						<button type="submit" class="buy-now-button">Guardar producto</button>
					</div>
				</div>
			</form>
		</div>

	</div>
	<!-- /todos los productos -->

	<!-- footer -->
	<%- include('partials/footer') %>
	<!-- /footer -->
</body>	
</html>