{% extends 'shared/secure.html.twig'%}
{% block title %}Product Manager{% endblock %}

{% block css %}

{% endblock %}

{% block heading %}
Product Manager
{% endblock %}

{% block breadcrumb %}
<!--begin::Item-->
<li class="breadcrumb-item">
	<span class="bullet bg-gray-300 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Catalog</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item">
	<span class="bullet bg-gray-300 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Products</li>
<!--end::Item-->

<!--begin::Item-->
<li class="breadcrumb-item">
	<span class="bullet bg-gray-300 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Product Manager</li>
		<!--end::Item-->
{% endblock %}


{% block content %}
<!--begin::Post-->
						<div class="post d-flex flex-column-fluid" id="kt_post">
							<!--begin::Container-->
							<div id="kt_content_container" class="container-xxl">
								<!--begin::Form-->
								<form id="kt_ecommerce_add_product_form" class="form d-flex flex-column flex-lg-row"
								 method="post" action="">

									<!--begin::Main column-->
									<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10  me-lg-10">

										<!--begin::Tab content-->
										<div class="tab-content">
											<!--begin::Tab pane-->
											<div class="tab-pane fade show active" id="kt_ecommerce_add_product_general" role="tab-panel">
												<div class="d-flex flex-column gap-7 gap-lg-10">
													<!--begin::General options-->
													<div class="card card-flush py-4">
														<!--begin::Card header-->
														<div class="card-header">
															<div class="card-title">
																<h2>Product Name Here Item</h2>
															</div>
														</div>
														<!--end::Card header-->

													</div>
													<!--end::General options-->


													<!--begin::Variations-->
													<div class="card card-flush py-4">
														<!--begin::Card header-->
														<div class="card-header">
															<div class="card-title">
																<h2>Variations</h2>
															</div>
														</div>
														<!--end::Card header-->
														<!--begin::Card body-->
														<div class="card-body pt-0">
														<div class="d-flex flex-wrap gap-5">
															<!--begin::Input group-->
																<div class="fv-row w-50 flex-md-root">
																	<!--begin::Label-->
																	<label class="required form-label">Size</label>
																	<!--end::Label-->
																	<!--begin::Select2-->
																	<select class="form-select Sb-2" name="tax" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
																		<option></option>
																		<option value="0">None</option>
																		<option value="1">Small</option>
																		<option value="2">Medium</option>
																		<option value="3">Large</option>
																	</select>
																	<!--end::Select2-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set the product size variation.</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->

																<!--begin::Input group-->
																<div class="fv-row w-50 flex-md-root">
																	<!--begin::Label-->
																	<label class="required form-label">Color</label>
																	<!--end::Label-->
																	<!--begin::Select2-->
																	<select class="form-select Sb-2" name="tax" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
																		<option></option>
																		<option value="0">None</option>
																		<option value="1">Black</option>
																		<option value="2">White</option>
																		<option value="3">Brown</option>
																	</select>
																	<!--end::Select2-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set the product size variation.</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->


														</div>

														</div>
														<!--end::Card header-->

														<!--begin::Card header-->
														<div class="card-header">
															<div class="card-title">
																<p>Inventory details for this variation</p>
															</div>
														</div>
														<!--end::Card header-->
														<!--begin::Card body-->
														<div class="card-body pt-0">
														<div class="d-flex flex-wrap gap-5">
															<!--begin::Input group-->
																<div class="fv-row w-50 flex-md-root">
																<!--begin::Label-->
																<label class="required form-label">Quantity</label>
																<!--end::Label-->
																<!--begin::Input-->
																<div class="d-flex gap-3">
																	<input type="number" name="shelf" class="form-control mb-2" placeholder="On shelf" value="" />
																</div>
																<!--end::Input-->
																<!--begin::Description-->
																<div class="text-muted fs-7">Enter the product quantity.</div>
																<!--end::Description-->
															</div>
															<!--end::Input group-->


																<!--begin::Input group-->
																<div class="fv-row w-50 flex-md-root">
																	<!--begin::Label-->
																	<label class="required form-label">Warehouse Location</label>
																	<!--end::Label-->
																	<!--begin::Select2-->
																	<select class="form-select mb-2" name="tax" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
																		<option></option>
																		<option value="0">ikeja City Mall</option>
																		<option value="1">Arena - Bolade Ikeja</option>
																		<option value="2">Downloadable Product</option>
																	</select>
																	<!--end::Select2-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set the Warehouse Location.</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->

																<!--begin::Input group-->
																<div class="fv-row w-100 flex-md-root">
																	<!--begin::Label-->
																	<label class="form-label">Shelf ID</label>
																	<!--end::Label-->
																	<!--begin::Input-->
																	<input type="text" class="form-control mb-2" value="" />
																	<!--end::Input-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set the Shelf ID in Location.</div>
																	<!--end::Description-->

																<!--end::Input group-->
																</div>
															</div>
															<!--begin::Input group-->
															<div class="fv-row">
																<!--begin::Label-->
																<label class="form-label">Allow Backorders</label>
																<!--end::Label-->
																<!--begin::Input-->
																<div class="form-check form-check-custom form-check-solid mb-2">
																	<input class="form-check-input" type="checkbox" value="" />
																	<label class="form-check-label">Yes</label>
																</div>
																<!--end::Input-->
																<!--begin::Description-->
																<div class="text-muted fs-7">Allow customers to purchase products that are out of stock.</div>
																<!--end::Description-->
															</div>
															<!--end::Input group-->
														</div>
														<!--end::Card header-->

														<!--begin::Card header-->
														<div class="card-header">
															<div class="card-title">
																<p>Pricing for this variation</p>
															</div>
														</div>
														<!--end::Card header-->
														<!--begin::Card body-->
														<div class="card-body pt-0">
															<!--begin::Input group-->
															<div class="mb-10 fv-row">
																<!--begin::Label-->
																<label class="required form-label">Product Sales Price</label>
																<!--end::Label-->
																<!--begin::Input-->
																<input type="text" name="price" class="form-control mb-2" placeholder="Product price" value="" />
																<!--end::Input-->
																<!--begin::Description-->
																<div class="text-muted fs-7">Set the product price.</div>
																<!--end::Description-->
															</div>
															<!--end::Input group-->
															<!--begin::Input group-->
															<div class="fv-row mb-10">
																<!--begin::Label-->
																<label class="fs-6 fw-semibold mb-2">Discount Type
																<span class="ms-1" data-bs-toggle="tooltip" title="Select a discount type that will be applied to this product">
																	<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
																		<span class="path1"></span>
																		<span class="path2"></span>
																		<span class="path3"></span>
																	</i>
																</span></label>
																<!--End::Label-->
																<!--begin::Row-->
																<div class="row row-cols-1 row-cols-md-3 row-cols-lg-1 row-cols-xl-3 g-9" data-kt-buttons="true" data-kt-buttons-target="[data-kt-button='true']">
																	<!--begin::Col-->
																	<div class="col">
																		<!--begin::Option-->
																		<label class="btn btn-outline btn-outline-dashed btn-active-light-primary active d-flex text-start p-6" data-kt-button="true">
																			<!--begin::Radio-->
																			<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
																				<input class="form-check-input" type="radio" name="discount_option" value="1" checked="checked" />
																			</span>
																			<!--end::Radio-->
																			<!--begin::Info-->
																			<span class="ms-5">
																				<span class="fs-4 fw-bold text-gray-800 d-block">No Discount</span>
																			</span>
																			<!--end::Info-->
																		</label>
																		<!--end::Option-->
																	</div>
																	<!--end::Col-->
																	<!--begin::Col-->
																	<div class="col">
																		<!--begin::Option-->
																		<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
																			<!--begin::Radio-->
																			<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
																				<input class="form-check-input" type="radio" name="discount_option" value="2" />
																			</span>
																			<!--end::Radio-->
																			<!--begin::Info-->
																			<span class="ms-5">
																				<span class="fs-4 fw-bold text-gray-800 d-block">Percentage %</span>
																			</span>
																			<!--end::Info-->
																		</label>
																		<!--end::Option-->
																	</div>
																	<!--end::Col-->
																	<!--begin::Col-->
																	<div class="col">
																		<!--begin::Option-->
																		<label class="btn btn-outline btn-outline-dashed btn-active-light-primary d-flex text-start p-6" data-kt-button="true">
																			<!--begin::Radio-->
																			<span class="form-check form-check-custom form-check-solid form-check-sm align-items-start mt-1">
																				<input class="form-check-input" type="radio" name="discount_option" value="3" />
																			</span>
																			<!--end::Radio-->
																			<!--begin::Info-->
																			<span class="ms-5">
																				<span class="fs-4 fw-bold text-gray-800 d-block">Fixed Price</span>
																			</span>
																			<!--end::Info-->
																		</label>
																		<!--end::Option-->
																	</div>
																	<!--end::Col-->
																</div>
																<!--end::Row-->
															</div>
															<!--end::Input group-->
															<!--begin::Input group-->
															<div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_percentage">
																<!--begin::Label-->
																<label class="form-label">Set Discount Percentage</label>
																<!--end::Label-->
																<!--begin::Slider-->
																<div class="d-flex flex-column text-center mb-5">
																	<div class="d-flex align-items-start justify-content-center mb-7">
																		<span class="fw-bold fs-3x" id="kt_ecommerce_add_product_discount_label">0</span>
																		<span class="fw-bold fs-4 mt-1 ms-2">%</span>
																	</div>
																	<div id="kt_ecommerce_add_product_discount_slider" class="noUi-sm"></div>
																</div>
																<!--end::Slider-->
																<!--begin::Description-->
																<div class="text-muted fs-7">Set a percentage discount to be applied on this product.</div>
																<!--end::Description-->
															</div>
															<!--end::Input group-->
															<!--begin::Input group-->
															<div class="d-none mb-10 fv-row" id="kt_ecommerce_add_product_discount_fixed">
																<!--begin::Label-->
																<label class="form-label">Fixed Discounted Price</label>
																<!--end::Label-->
																<!--begin::Input-->
																<input type="text" name="dicsounted_price" class="form-control mb-2" placeholder="Discounted price" />
																<!--end::Input-->
																<!--begin::Description-->
																<div class="text-muted fs-7">Set the discounted product price. The product will be reduced at the determined fixed price</div>
																<!--end::Description-->
															</div>
															<!--end::Input group-->
															<!--begin::Tax-->
															<div class="d-flex flex-wrap gap-5">
																<!--begin::Input group-->
																<div class="fv-row w-50 flex-md-root">
																	<!--begin::Label-->
																	<label class="required form-label">Tax Class</label>
																	<!--end::Label-->
																	<!--begin::Select2-->
																	<select class="form-select mb-2" name="tax" data-control="select2" data-hide-search="true" data-placeholder="Select an option">
																		<option></option>
																		<option value="0">Tax Free</option>
																		<option value="1">Taxable Goods</option>
																		<option value="2">Downloadable Product</option>
																	</select>
																	<!--end::Select2-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set the product tax class.</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->

															</div>
															<!--end:Tax-->
														</div>
														<!--end::Card header-->
													</div>
													<!--end::Pricing-->

													<!--begin::Shipping-->
													<div class="card card-flush py-4">
														<!--begin::Card header-->
														<div class="card-header">
															<div class="card-title">
																<h2>Shipping</h2>
															</div>
														</div>
														<!--end::Card header-->
														<!--begin::Card body-->
														<div class="card-body pt-0">

															<!--begin::Shipping form-->
															<div id="kt_ecommerce_add_product_shipping" class=" mt-10">
																<!--begin::Input group-->
																<div class="mb-10 fv-row">
																	<!--begin::Label-->
																	<label class="form-label">Weight</label>
																	<!--end::Label-->
																	<!--begin::Editor-->
																	<input type="text" name="weight" class="form-control mb-2" placeholder="Product weight" value="" />
																	<!--end::Editor-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Set a product weight in kilograms (kg).</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->
																<!--begin::Input group-->
																<div class="fv-row">
																	<!--begin::Label-->
																	<label class="form-label">Dimension</label>
																	<!--end::Label-->
																	<!--begin::Input-->
																	<div class="d-flex flex-wrap flex-sm-nowrap gap-3">
																		<input type="number" name="width" class="form-control mb-2" placeholder="Width (w)" value="" />
																		<input type="number" name="height" class="form-control mb-2" placeholder="Height (h)" value="" />
																		<input type="number" name="length" class="form-control mb-2" placeholder="Lengtn (l)" value="" />
																	</div>
																	<!--end::Input-->
																	<!--begin::Description-->
																	<div class="text-muted fs-7">Enter the product dimensions in centimeters (cm).</div>
																	<!--end::Description-->
																</div>
																<!--end::Input group-->
															</div>
															<!--end::Shipping form-->
														</div>
														<!--end::Card header-->
													</div>
													<!--end::Shipping-->

												</div>
											</div>
											<!--end::Tab pane-->
											<!--begin::Tab pane-->
											<div class="tab-pane fade" id="kt_ecommerce_add_product_advanced" role="tab-panel">
												<div class="d-flex flex-column gap-7 gap-lg-10">


												</div>
											</div>
											<!--end::Tab pane-->
										</div>
										<!--end::Tab content-->
										<div class="d-flex justify-content-end">
											<!--begin::Button-->
											<a href="apps/ecommerce/catalog/products.html" id="kt_ecommerce_add_product_cancel" class="btn btn-light me-5">Cancel</a>
											<!--end::Button-->
											<!--begin::Button-->
											<button type="submit" id="kt_ecommerce_add_product_submit" class="btn btn-primary">
												<span class="indicator-label">Save Changes</span>
												<span class="indicator-progress">Please wait...
												<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
											</button>
											<!--end::Button-->
										</div>
									</div>
									<!--end::Main column-->
									<!--begin::Aside column-->
									<div class="d-flex flex-column gap-7 gap-lg-10 w-100 w-lg-300px mb-7">
										<!--begin::Thumbnail settings-->
										<div class="card card-flush py-4">
											<!--begin::Card header-->
											<div class="card-header">
												<!--begin::Card title-->
												<div class="card-title">
													<h2>Thumbnail</h2>
												</div>
												<!--end::Card title-->
											</div>
											<!--end::Card header-->
											<!--begin::Card body-->
											<div class="card-body text-center pt-0">
												<!--begin::Image input-->
												<!--begin::Image input placeholder-->
												<style>.image-input-placeholder { background-image: url('assets/media/svg/files/blank-image.svg'); } [data-bs-theme="dark"] .image-input-placeholder { background-image: url('assets/media/svg/files/blank-image-dark.svg'); }</style>
												<!--end::Image input placeholder-->
												<div class="image-input image-input-empty image-input-outline image-input-placeholder mb-3" data-kt-image-input="true">
													<!--begin::Preview existing avatar-->
													<div class="image-input-wrapper w-150px h-150px"></div>
													<!--end::Preview existing avatar-->
													<!--begin::Label-->
													<label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar">
														<i class="ki-duotone ki-pencil fs-7">
															<span class="path1"></span>
															<span class="path2"></span>
														</i>
														<!--begin::Inputs-->
														<input type="file" name="avatar" accept=".png, .jpg, .jpeg" />
														<input type="hidden" name="avatar_remove" />
														<!--end::Inputs-->
													</label>
													<!--end::Label-->
													<!--begin::Cancel-->
													<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar">
														<i class="ki-duotone ki-cross fs-2">
															<span class="path1"></span>
															<span class="path2"></span>
														</i>
													</span>
													<!--end::Cancel-->
													<!--begin::Remove-->
													<span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar">
														<i class="ki-duotone ki-cross fs-2">
															<span class="path1"></span>
															<span class="path2"></span>
														</i>
													</span>
													<!--end::Remove-->
												</div>
												<!--end::Image input-->
												<!--begin::Description-->
												<div class="text-muted fs-7">Set the product thumbnail image. Only *.png, *.jpg and *.jpeg image files are accepted</div>
												<!--end::Description-->
											</div>
											<!--end::Card body-->
										</div>
										<!--end::Thumbnail settings-->
										<!--begin::Status-->
										<div class="card card-flush py-4">
											<!--begin::Card header-->
											<div class="card-header">
												<!--begin::Card title-->
												<div class="card-title">
													<h2>Status</h2>
												</div>
												<!--end::Card title-->
												<!--begin::Card toolbar-->
												<div class="card-toolbar">
													<div class="rounded-circle bg-success w-15px h-15px" id="kt_ecommerce_add_product_status"></div>
												</div>
												<!--begin::Card toolbar-->
											</div>
											<!--end::Card header-->
											<!--begin::Card body-->
											<div class="card-body pt-0">
												<!--begin::Select2-->
												<select class="form-select mb-2" data-control="select2" data-hide-search="true" data-placeholder="Select an option" id="kt_ecommerce_add_product_status_select">
													<option></option>
													<option value="published" selected="selected">Published</option>
													<option value="draft">Draft</option>
													<option value="scheduled">Scheduled</option>
													<option value="inactive">Inactive</option>
												</select>
												<!--end::Select2-->
												<!--begin::Description-->
												<div class="text-muted fs-7">Set the product status.</div>
												<!--end::Description-->
												<!--begin::Datepicker-->
												<div class="d-none mt-10">
													<label for="kt_ecommerce_add_product_status_datepicker" class="form-label">Select publishing date and time</label>
													<input class="form-control" id="kt_ecommerce_add_product_status_datepicker" placeholder="Pick date & time" />
												</div>
												<!--end::Datepicker-->
											</div>
											<!--end::Card body-->
										</div>
										<!--end::Status-->



									</div>
									<!--end::Aside column-->
								</form>
								<!--end::Form-->
							</div>
							<!--end::Container-->
						</div>
						<!--end::Post-->

{% endblock %}

{% block Javascript %}
<script src="{{secure_assets}}/plugins/custom/datatables/datatables.bundle.js"></script>
<script src="{{secure_assets}}/plugins/custom/formrepeater/formrepeater.bundle.js"></script>
<script src="{{secure_assets}}/js/custom/apps/catalog/save-product.js"></script>

{% endblock %}