<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 wo-create-forms">			
			<div class="wo_settings_page">
				<div class="sun_head_onboard shortpwidth product">
					<img class="sho_img" src="<?php echo $wo['config']['theme_url'];?>/img/cads/product.svg" alt="<?php echo $wo['lang']['edit_product'] ?>" />
					<span class="go_back_link">
						<a href="<?php echo Wo_SeoLink('index.php?link1=my-products'); ?>">
							<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg><?php echo $wo['lang']['my_products'];?>
						</a>
					</span>
					<div class="sun_head_onboard_innr">
						<h2><?php echo $wo['lang']['edit_product'];?></h2>
					</div>
				</div>
				
				<form class="create-album-form form-horizontal" method="post">
					<div class="setting-panel row no-padding-both">
						<!-- Text input-->
						<div class="form-group col-lg-8">
							<label class="col-md-12" for="name"><?php echo $wo['lang']['name'] ?></label>  
							<div class="col-md-12">
								<input id="album_name" name="name" type="text" class="form-control input-md" value="<?php echo $wo['product']['name']?>">
							</div>
						</div>
						<div class="form-group col-lg-4">
							<label class="col-md-12" for="price"><?php echo $wo['lang']['price'] ?></label>  
							<div class="col-md-12">
								<input id="price" name="price" type="text" class="form-control input-md" value="<?php echo $wo['product']['price']?>">
							</div>
						</div>
						<div class="form-group col-lg-8">
							<label class="col-md-12" for="category"><?php echo $wo['lang']['category'] ?></label>  
							<div class="col-md-12">
								<select class="form-control" name="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="form-group col-lg-8">
							<label class="col-md-12" for="product_sub_category"><?php echo $wo['lang']['sub_category'] ?></label>  
							<div class="col-md-12">
								<select class="form-control" 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="form-group col-lg-4">
							<label class="col-md-12" for="type"><?php echo $wo['lang']['type'] ?></label>  
							<div class="col-md-12">
								<select class="form-control" name="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 class="form-group col-lg-8">
							<label class="col-md-12" for="location"><?php echo $wo['lang']['location'] ?></label>  
							<div class="col-md-12">
								<input id="address" name="location" type="text" class="form-control input-md" value="<?php echo $wo['product']['location']?>">
							</div>
						</div>
						<div class="form-group col-lg-4">
							<label class="col-md-12" for="price"><?php echo $wo['lang']['currency'] ?></label>  
							<div class="col-md-12">
								<select name="currency" id="currency" class="form-control">
									<?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 class="form-group col-lg-12">
							<label class="col-md-12" for="description"><?php echo $wo['lang']['description'] ?></label>  
							<div class="col-md-12">
								<textarea class="form-control" name="description" rows="5"><?php echo $wo['product']['edit_description']?></textarea>
								<span class="help-block"><?php echo $wo['lang']['please_describe_your_product'] ?>.</span>	
							</div>
							<?php $fields = Wo_GetCustomFields('product'); 
						if (!empty($fields)) {
							foreach ($fields as $key => $wo['field']) {
								echo Wo_LoadPage('products/edit_fields');
							}
						}
						?>
						</div>
						<input type="hidden" name="product_id" value="<?php echo $wo['product']['id'];?>">
						
						<div class="form-group col-lg-12">
							<label class="col-md-12" for="photos"><?php echo $wo['lang']['photos'];?></label>
							<div class="col-md-12 create_album_images">
								<div id="productimage-holder">
									<div class="upload-product-image" onclick="document.getElementById('publisher-photos').click(); return false">
										<div class="upload-image-content product">
											<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="currentColor" d="M5,3A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H14.09C14.03,20.67 14,20.34 14,20C14,19.32 14.12,18.64 14.35,18H5L8.5,13.5L11,16.5L14.5,12L16.73,14.97C17.7,14.34 18.84,14 20,14C20.34,14 20.67,14.03 21,14.09V5C21,3.89 20.1,3 19,3H5M19,16V19H16V21H19V24H21V21H24V19H21V16H19Z" /></svg>
										</div>
									</div>
									<?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-product"><i class="fa fa-remove"></i></span>
										<div class="background_image_product" style="background-image: url('<?php echo $value['image']; ?>');"></div>
										<!-- <img src="<?php echo $value['image']; ?>" width="100%"> -->
									</span>
									<?php } } ?>
								</div>
								<div class="input-group hidden">
									<span class="btn btn-default btn-file">
										<i class="fa fa-camera" ></i><input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg" name="postPhotos[]" multiple="multiple">
									</span>
								</div>
							</div>
						</div>
						
						<div class="form-group hidden" id="photo-form">
							<label class="col-md-3"></label>  
							<div class="col-md-6">
								<input type="text" class="form-control input-md" readonly>
							</div>
						</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>
					
					<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="form-group last-sett-btn modal-footer">
						<div class="ball-pulse"><div></div><div></div><div></div></div>
						<button type="submit" class="btn btn-main setting-panel-mdbtn"><?php echo $wo['lang']['save'] ?></button>
					</div>
				</form>
			</div>
		</div>
		<!-- .col-md-8 -->
		<?php echo Wo_LoadPage('sidebar/content');?>
	</div>
	<!-- .row -->
</div>
<style type="text/css">
	.background_image_product{
		background-size: cover;
	    background-repeat: no-repeat;
	    background-position: 50% 50%;
	    width: 100%;
	    height: 100%;
	}
</style>
<!-- .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();
		var text = "";
		if (typeof(sub_categories_array[id]) == 'undefined') {
		    $('#product_sub_category').html('');
		}
		else{
		   	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 = $("#productimage-holder");
	product_image_holder.find('.product_uploaded_images').remove();
	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 product_uploaded_images" id="delete_uploaded_image_by_id_'+ii+'"><span class="pointer thumb-image-delete-btn-product" onclick="DeleteUploadedImageById('+name+','+ii+')"><i class="fa fa-remove"></i></span><img src="'+e.target.result+'" width="100%"></span>');
				$(product_image_holder).prepend('<span class="thumb-image thumb-image-delete product_uploaded_images" id="delete_uploaded_image_by_id_'+ii+'"><span class="pointer thumb-image-delete-btn-product" 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() {
   	$("#publisher-photos").change(function () {
        var numFiles = this.files.length;
        $("#photo-form input").val(numFiles + ' photo(s) selected');
        $("#photo-form").slideDown(200);
    });
    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);
         $('.wo_settings_page').find('.last-sett-btn .ball-pulse').fadeIn(100);
       },
       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);
         }
         $('.wo_settings_page').find('.last-sett-btn .ball-pulse').fadeOut(100);
       }
     });
   });
  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>