<div class="page-margin">
	<div class="row">
		<div class="col-md-2 leftcol"><?php echo Wo_LoadPage("sidebar/left-sidebar"); ?></div>
		<div class="col-md-7 middlecol">
			<div class="page-margin wow_content mt-0">
				<div class="wo_page_hdng pag_neg_padd pag_alone">
					<div class="wo_page_hdng_innr">
						<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12,13A5,5 0 0,1 7,8H9A3,3 0 0,0 12,11A3,3 0 0,0 15,8H17A5,5 0 0,1 12,13M12,3A3,3 0 0,1 15,6H9A3,3 0 0,1 12,3M19,6H17A5,5 0 0,0 12,1A5,5 0 0,0 7,6H5C3.89,6 3,6.89 3,8V20A2,2 0 0,0 5,22H19A2,2 0 0,0 21,20V8C21,6.89 20.1,6 19,6Z"></path></svg></span> <?php echo $wo['lang']['edit_product'];?>
					</div>
				</div>
			</div>
			
			<div class="page-margin wow_content wow_sett_content">
				<form class="create-album-form form-horizontal" method="post">
					<div class="row">
						<div class="col-md-8">
							<div class="wow_form_fields">
								<label for="name"><?php echo $wo['lang']['name'] ?></label>
								<input id="name" name="name" type="text" value="<?php echo $wo['product']['name']?>">
							</div>
						</div>
						<div class="col-md-4">
							<div class="wow_form_fields">
								<label for="price"><?php echo $wo['lang']['price']; ?></label>
								<input id="price" name="price" type="text" placeholder="0.00" value="<?php echo $wo['product']['price']?>">
							</div>
						</div>
					</div>
					<div class="wow_form_fields">
						<label for="description"><?php echo $wo['lang']['description'] ?></label>
						<textarea name="description" rows="4" id="description" placeholder="<?php echo $wo['lang']['please_describe_your_product'] ?>"><?php echo $wo['product']['edit_description']?></textarea>
					</div>
					<div class="row">
						<div class="col-md-8">
							<div class="wow_form_fields">
								<label for="category"><?php echo $wo['lang']['category'] ?></label>
								<select name="category" id="category" onchange="GetProductSubCategory(this)">
									<?php 
										foreach ($wo['products_categories'] as $key => $category) {
											$selected = ($key == $wo['product']['category']) ? 'selected' : '';
											if ($key > 0) {
									?>
										<option value="<?php echo $key;?>" <?php echo $selected?>><?php echo $category;?></option>
									<?php } } ?>
								</select>
							</div>
						</div>
						<div class="col-md-8 product_sub_category_class" style="<?php echo((empty($wo['products_sub_categories'][$wo['product']['category']]) ? 'display: none;' : '')) ?>">
							<div class="wow_form_fields">
								<label for="product_sub_category"><?php echo $wo['lang']['sub_category'] ?></label>
								<select name="product_sub_category" id="product_sub_category">
									<?php
									unset($wo['products_categories'][1]);
									if (!empty($wo['products_sub_categories'][$wo['product']['category']])) {
									foreach ($wo['products_sub_categories'][$wo['product']['category']] as $id => $sub_category) { 
										$sub_selected = ($sub_category['id'] == $wo['product']['sub_category']) ? ' selected' : '' ;
										?>
										<option value="<?php echo $sub_category['id']?>" <?php echo $sub_selected; ?>><?php echo $sub_category['lang']; ?></option>
									<?php } } ?>
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<div class="wow_form_fields">
								<label for="type"><?php echo $wo['lang']['type']; ?></label>
								<select name="type" id="type">
									<option value="0" <?php echo ($wo['product']['type'] == 0) ? 'selected' : '';?>><?php echo $wo['lang']['new'] ?></option>
									<option value="1" <?php echo ($wo['product']['type'] == 1) ? 'selected' : '';?>><?php echo $wo['lang']['used'] ?></option>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8">
							<div class="wow_form_fields">
								<label for="location"><?php echo $wo['lang']['location'] ?></label>
								<input id="location" name="location" type="text" value="<?php echo $wo['product']['location']?>">
							</div>
						</div>
						<div class="col-md-4">
							<div class="wow_form_fields">
								<label for="currency"><?php echo $wo['lang']['currency']; ?></label>
								<select name="currency" id="currency">
									<?php foreach ($wo['currencies'] as $key => $currency) { ?>
										<option value="<?php echo $key; ?>" <?php echo ($wo['product']['currency'] == $key) ? 'selected' : ''; ?>><?php echo  $currency['text'] ?> (<?php echo  $currency['symbol'] ?>)</option>
									<?php } ?>
								</select>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-8">
							<div class="wow_form_fields">
								<label for="units"><?php echo $wo['lang']['total_item'] ?></label>
								<input id="units" name="units" type="number" value="<?php echo $wo['product']['units']?>">
							</div>
						</div>
					</div>
					<?php $fields = Wo_GetCustomFields('product'); 
						if (!empty($fields)) {
							foreach ($fields as $key => $wo['field']) {
								echo Wo_LoadPage('products/edit_fields');
							}
						}
						?>
					<input type="hidden" name="product_id" value="<?php echo $wo['product']['id'];?>">
					<div class="wow_form_fields mb-0">
						<label for="photos"><?php echo $wo['lang']['photos']; ?></label>
					</div>
					<div class="wow_prod_imgs">
						<div class="upload-product-image" onclick="document.getElementById('publisher-photos').click(); return false">
							<div class="upload-image-content">
								<svg xmlns="http://www.w3.org/2000/svg" class="feather" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /></svg>
							</div>
						</div>
						<div id="productimage-holder">
							<span id="uploaded-productimage-holder"></span>
							<?php if (!empty($wo['product']['images'])) { 
								foreach ($wo['product']['images'] as $key => $value) {
							?>
								<span class="thumb-image thumb-image-delete" id="delete_image_by_id_<?php echo $value['id']; ?>">
									<span onclick="DeleteProductImageById(<?php echo $value['id']; ?>)" class="pointer thumb-image-delete-btn"><i class="fa fa-remove"></i></span>
									<div class="background_image_product" style="background-image: url('<?php echo $value['image']; ?>');"></div>
								</span>
							<?php } } ?>
						</div>
					</div>
					
					<div class="hidden">
						<input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg" name="postPhotos[]" multiple="multiple">
					</div>
					
					<div class="publisher-hidden-option">
						<div id="progress">
							<span id="percent">0%</span>
							<div class="progress">
								<div id="bar" class="progress-bar progress-bar-striped active"></div> 
							</div>
							<div class="clear"></div>
						</div>
					</div>
					
					<div class="app-general-alert setting-update-alert"></div>

					<input type="hidden" name="id" class="form-control input-md" value="">
					<input type="hidden" name="hash_id" value="<?php echo Wo_CreateSession();?>">
					
					<div class="text-center">
						<a class="btn btn-mat" href="<?php echo Wo_SeoLink('index.php?link1=my-products'); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg> <?php echo $wo['lang']['go_back'];?>
						</a>
						<button class="btn btn-main btn-mat btn-mat-raised add_wow_loader" type="submit"><?php echo $wo['lang']['save']; ?></button>
					</div>
				</form>
			</div>
		</div>
		<!-- .col-md-8 -->
		<?php echo Wo_LoadPage('sidebar/content');?>
	</div>
	<!-- .row -->
</div>
<!-- .page-margin -->
<script type="text/javascript">
	<?php 
$js_array = json_encode($wo['products_sub_categories']);
echo "var sub_categories_array = ". $js_array . ";\n";
?>
	function GetProductSubCategory(self) {
		id = $(self).val();
		$('.product_sub_category_class').slideUp();
		var text = "";
		if (typeof(sub_categories_array[id]) == 'undefined') {
		    $('#product_sub_category').html('');
		}
		else{
			$('.product_sub_category_class').slideDown();
		   	sub_categories_array[id].forEach(function(entry) {
				text = text + "<option value='"+entry.id+"'>"+entry.lang+"</option>";
			});
		    $('#product_sub_category').html(text);
		}
	}
var deleted_images_ids = [];
function DeleteProductImageById(image_id) {
	deleted_images_ids.push(image_id);
	$('#delete_image_by_id_'+image_id).remove();
}
var uploaded_deleted_images = [];
function DeleteUploadedImageById(name,id) {
	uploaded_deleted_images.push(name);
	$('#delete_uploaded_image_by_id_'+id).remove();
}
$(document).ready(function() {
	$("#publisher-photos").on('change', function() {
	uploaded_deleted_images = [];
	//Get count of selected files
	var product_countFiles = $(this)[0].files.length;
	var product_imgPath = $(this)[0].value;
	var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
	var product_image_holder = $("#uploaded-productimage-holder");
	product_image_holder.empty();
	if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
		if (typeof(FileReader) != "undefined") {
		//loop for each file selected for uploaded.
		for (var i = 0; i < product_countFiles; i++) 
		{
			var product_reader = new FileReader();
			var ii = 0;
			product_reader.onload = function(e) {
				name = "'"+$("#publisher-photos")[0].files[ii].name+"'";
				src = "'"+e.target.result+"'";
				// $(product_image_holder).prepend('<span class="thumb-image thumb-image-delete" id="delete_uploaded_image_by_id_'+ii+'"><span class="pointer thumb-image-delete-btn" onclick="DeleteUploadedImageById('+name+','+ii+')"><i class="fa fa-remove"></i></span><img src="'+e.target.result+'" class="thumb-image"></span>');
				$(product_image_holder).prepend('<span class="thumb-image thumb-image-delete" id="delete_uploaded_image_by_id_'+ii+'"><span class="pointer thumb-image-delete-btn" onclick="DeleteUploadedImageById('+name+','+ii+')"><i class="fa fa-remove"></i></span><div class="background_image_product" style="background-image: url('+src+');"></div></span>');
				ii = ii +1;
                }
                product_image_holder.show();
                product_reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              product_image_holder.html("<p>This browser does not support FileReader.</p>");
            }
         }
	});
});

   $(function() {
    var bar = $('#bar');
    var percent = $('#percent');
    var status = $('#status');
    var publisher_button = $('#publisher-button');
     $('form.create-album-form').ajaxForm({
       url: Wo_Ajax_Requests_File() + '?f=products&s=edit',
       beforeSend: function() {
         var percentVal = '0%';
         bar.width(percentVal);
         percent.html(percentVal);
         $('.create-album-form').find('.add_wow_loader').addClass('btn-loading');
       },
       uploadProgress: function (event, position, total, percentComplete) {
           var percentVal = percentComplete + '%';
           bar.width(percentVal);
           $('#progress').slideDown(200);
           if(percentComplete > 50) {
             percent.addClass('white');
           }
           percent.html(percentVal);
      },beforeSubmit: function (a,b,c) {
    	for (var i = 0 ;i < a.length ; i++) {
    		if (a[i].name == 'postPhotos[]') {
    			for (var b = 0 ;b < uploaded_deleted_images.length ; b++) {
    				if (a[i].value.name == uploaded_deleted_images[b]) {
    					a[i] = {name:'',value:''};
    				}
    			}
    		}
    	}
    	a.push({'name' : 'deleted_images_ids' , 'value' : deleted_images_ids});
    	deleted_images_ids = [];
    	uploaded_deleted_images = [];
    	
    },
       success: function(data) {
         if (data.status == 200) {
           window.location.href = data.href;
         } else {
             var errors = data.errors.join("<br>");
             $('.app-general-alert').html('<div class="alert alert-danger">' + errors + '</div>');
             $('.alert-danger').fadeIn(300);
         }
         $('.create-album-form').find('.add_wow_loader').removeClass('btn-loading');
       }
     });
   });
  var pac_input = document.getElementById('address');
  (function pacSelectFirst(input) {
    // store the original event binding function
    var _addEventListener = (input.addEventListener) ? input.addEventListener : input.attachEvent;
    function addEventListenerWrapper(type, listener) {
      // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
      // and then trigger the original listener.
      if(type == "keydown") {
        var orig_listener = listener;
        listener = function (event) {
          var suggestion_selected = $(".pac-item-selected").length > 0;
          if(event.which == 13 && !suggestion_selected) {
            var simulated_downarrow = $.Event("keydown", {
              keyCode: 40,
              which: 40
            });
            orig_listener.apply(input, [simulated_downarrow]);
          }
          orig_listener.apply(input, [event]);
        };
      }
      // add the modified listener
      _addEventListener.apply(input, [type, listener]);
    }
    if(input.addEventListener)
      input.addEventListener = addEventListenerWrapper;
    else if(input.attachEvent)
      input.attachEvent = addEventListenerWrapper;
  })(pac_input);

  $(function () {
     var autocomplete = new google.maps.places.Autocomplete(pac_input);
  });
</script>