<style>
	.close_i {
		right: 5px !important;
		position: absolute !important;
		border-radius: 50%;
		top: 5px !important;
		cursor: pointer;
		box-shadow: 2px 2px 5px;
		background: #ffffffcc;
	}

	.error {
		color: darkred;
		font-size: 90%;
		padding: 6px 0px 0px 2px;
		display: block;
	}
</style>
<div class="container-fluid">
	<div class="container">
		<h3 class="text-center btn-block " style="background-color:#F3920F;color: #fff;padding: 10px 0 3px;margin: 0;border-radius: 5px;text-transform: uppercase;">
			<i> <?= $user->name ?> </i> :
			<small>Product Setup Form </small>
		</h3>
	</div>
	<br>
	<br>
</div>

<form id="pdt">
	<div class="row">
		<div class="col-md-11 col-sm-12 form-group">
			<label for="title">Product Title:</label>
			<input type="text" class="form-control valid" required name="name" id='title' placeholder='Product Title...'>
			<div class="error" id="nameErr"></div>
		</div>
	</div>
	<div class="row">
		<div class="col-md-4 col-sm-4 form-group">
			<label for="brand">Brand/Company Name:</label>
			<input type="text" class="form-control " required name="company" id='brand' placeholder='Brand/Company Name...'>

		</div>

		<div class="col-md-4 col-sm-4 form-group">
			<label for="color">Color:</label>
			<select name="color_id[]" required multiple id="color" class="form-control color select2"></select>
		</div>

		<div class="col-md-4 col-sm-4 form-group">
			<label for="color">Size :</label>
			<select name="size_id[]" id="size" required multiple class="form-control size select2"></select>
		</div>


	</div>
	<div class="row form-group">
		<div class="col-md-6 col-sm-12">
			<label for="subCat">Select Category:</label>
			<select class="form-control categories valid" name='cat' required id="category" onchange="findSubCategory()">
				<option disabled selected>Choose Category</option>
				<?php foreach ($categories as $key => $value) : ?>
					<option value="<?= $key ?>"><?= $value ?></option>
				<?php endforeach; ?>
			</select>
			<div class="error" id="catErr"></div>

		</div>
		<div class="col-md-6 col-sm-12">
			<label for="subCat">Select Sub Category:</label>
			<select class="form-control valid" name="sub_cat" required id="sub_categories">
				<option disabled selected value="">Select One...</option>
			</select>
			<div class="error" id="subErr"></div>

		</div>
	</div>
	<div class="row form-group">
		<div class="col-12">
			<label for="description">Description:</label>
			<textarea class="form-control valid" name="desc" required rows="5" id="description"></textarea>
			<div class="error" id="descriptionErr"></div>
		</div>
	</div>
	<div class="row form-group">
		<div class="col-12">
			<label for="spec">Specification Table/ Seller Information:</label>
			<textarea class="form-control" rows="5" required name="spec" id="spec"></textarea>
			<div class="error" id="specErr"></div>

		</div>
	</div>
	<div class="row form-group">
		<div class="col-md-3 col-sm-12">
			<label for="price">Price:</label>
			<input type="number" class="form-control valid" name="price" id="price" required placeholder="00.00">
			<div class="error" id="priceErr"></div>
		</div>
		<div class="col-md-3 col-sm-12">
			<label for="discount">Discount:</label>
			<input type="number" class="form-control" name="discount" value="0" required id='discount' placeholder='00.00'>
		</div>
		<div class="col-md-3 col-sm-12">
			<label for="discount">Quantity:</label>
			<input type="number" class="form-control" name="quantity" value="1" required id='quan' placeholder='0'>
		</div>

		<div class="col-md-3 col-sm-12">
			<label for="discount">Delivery Duration :</label>
			<input type="text" class="form-control" name="delivery" id="delivery" value="5" required placeholder='' ">
		</div>
	</div>
	
	<?php if ($this->session->user_id == 1) : ?>
	<div class=" row form-group">
			<div class="col-md-6 col-sm-12">
				<label for="price">Coupon Type</label>
				<select class="form-control" name="coupon_type" id="coupon_type">
					<option disabled selected>Choose Coupon</option>
					<option value="1">Cashback</option>
				</select>
			</div>
			<div class="col-md-6 col-sm-12">
				<label for="price">Cashback (%)</label>
				<input type="number" class="form-control" name="cashback" id="cashback" />
			</div>
		</div>
	<?php endif ?>

	<div class="row justify-content-center p-2">
		<div id="drop-area" class="col-md-11 col-sm-12">
			<form class="my-form">
				<p>Upload multiple files with the file dialog or by dragging and dropping
					images onto the dashed region
				</p>
				<input type="file" id="fileElem" class="valid" multiple accept="image/*" onchange="handleFiles(this)">
				<label class="button" for="fileElem">Select some files <i class="fa fa-cloud-upload"></i> </label>

			</form>
			<progress class="d-none" id="progress-bar" max=100 value=0></progress>
			<div id="gallery" class="row"></div>
			<div class="error" id="imageErr"></div>
		</div>
	</div>

	<div class="row justify-content-center mb-3">
		<div class="col-md-10 col-sm-12">
			<label for="vdo">Embed Video link:</label>
			<textarea class="form-control" name="vdo" id="vdo" rows="3"></textarea>
		</div>
	</div>

	<input type="hidden" name="own_refer_id" id="own_refer_id" value="<?= $user->own_refer_id ?>">

	<div class="row justify-content-center">
		<div class="col-md-4 col-sm-8">
			<button class="btn btn-success btn-block" id="_btn" onclick="save_product()">Save
				<i class="" id="loading"></i> </button>
		</div>
	</div>
</form>
<br>

<div class="alertMsg">

</div>

<!-- Script start  -->


<script src="https://cdn.ckeditor.com/4.11.3/standard-all/ckeditor.js"></script>

<script src="https://myadmin.mali-mart.com/js/image-compressor.min.js"></script>
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>

<script src="<?= base_url('app-assets/js/image-compress.js') ?>"></script>


<script>
	$(document).ready(function() {

		/* Color API start */
		ApiColors();
		/* Size Api Start */
		ApiSizes();

		CKEDITOR.replace('description', {
			height: 200,
			removeButtons: "Image,Source,About"
		});

		CKEDITOR.replace('spec', {
			height: 150,
			extraPlugins: 'placeholder',
			removeButtons: "Unlink,Image,Source,About,Underline,Strike,Subscript,Superscript,List,BlockQuote"
		});


	});

	function ApiColors() {
		$.ajax({
			method: "get",
			url: "https://myadmin.mali-mart.com/api/colors",
			dataType: "json",
			success: function(res) {

				if (res.colors) {
					for (var i = 0; i < res.colors.length; i++) {
						var option = '<option value="' + res.colors[i].id + '">' + res.colors[i].name + '</option>';
						$(".color").append(option);
					}
				}
				console.log(res);
			}
		});
	}

	function ApiSizes() {
		$.ajax({
			method: "get",
			url: "https://myadmin.mali-mart.com/api/sizes",
			dataType: "json",

			success: function(res) {
				if (res.sizes) {
					for (var i = 0; i < res.sizes.length; i++) {
						var option = '<option value="' + res.sizes[i].id + '">' + res.sizes[i].name + '</option>';
						$(".size").append(option);
					}
				}
			}
		});
	}

	function findSubCategory() {
		let cat_id = $("#category").val();
		let sub_id = $("#sub_categories");
		sub_id.empty();
		$.ajax({
			method: "get",
			url: "https://myadmin.mali-mart.com/api/subcategory/" + cat_id,
			dataType: "json",
			success: function(res) {

				$.each(res, function(index, value) {
					var subCat = '<option value="' + index + '">' + value + '</option>';
					sub_id.append(subCat);
				});
			}
		});
	}
</script>

<!-- Script End  -->