<div class="ma_page_content" id="container_blog">
    <div class="ma_pc_inner">
        <div class="page_padding">
			<h2 class="home_widget_title">
				<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18H6V14H12M21,14V12L20,7H4L3,12V14H4V20H14V14H18V20H20V14M20,4H4V6H20V4Z"></path></svg></span> {{LANG Edit Product}}
			</h2>
			
            <div class="content upload_music no-flex ds_create_edit_ads_cont pt-4">
				<h4 class="text-center mt-0 mb-4">{{LANG Product Info}}</h4>
				<form class="user-product-form ds_create_edit_prods" method="POST">
					<div class="row">
						<div class="col-lg-8 offset-lg-2">
							<div class="user-product-alert"></div>
							<div class="alert alert-success ads-settings-alert hidden"></div>
							<div class="progress hidden">
								<div class="upload-progress-bar bar progress-bar progress-bar-striped active"></div>
								<div class="percent">0%</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M12,3V12.26C11.5,12.09 11,12 10.5,12C8,12 6,14 6,16.5C6,19 8,21 10.5,21C13,21 15,19 15,16.5V6H19V3H12Z"></path></svg> {{LANG Title}}</label>
								<div class="col-md-9">
									<input type="text" id="title" name="title" class="form-control" value="<?php echo($music->product->title) ?>">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="desc"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M4,5H20V7H4V5M4,9H20V11H4V9M4,13H20V15H4V13M4,17H14V19H4V17Z"></path></svg> {{LANG Description}}</label>
								<div class="col-md-9">
									<textarea name="desc" id="desc" rows="5" class="form-control"><?php echo($music->product->desc) ?></textarea>
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="tags"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z"></path></svg> {{LANG Tags}}</label>
								<div class="col-md-9">
									<input name="tags" id="tags" type="text" placeholder="" class="form-control" value="<?php echo($music->product->tags) ?>">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="price"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M12,3A3,3 0 0,0 9,6H15A3,3 0 0,0 12,3M19,6A2,2 0 0,1 21,8V20A2,2 0 0,1 19,22H5C3.89,22 3,21.1 3,20V8C3,6.89 3.89,6 5,6H7A5,5 0 0,1 12,1A5,5 0 0,1 17,6H19M9,19L16.5,14L9,10V19Z"></path></svg> {{LANG Price}}</label>
								<div class="col-md-9">
									<input type="number" id="price" name="price" class="form-control" value="<?php echo($music->product->price) ?>">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="units"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"></path></svg> {{LANG Total Item Units}}</label>
								<div class="col-md-9">
									<input type="number" id="units" name="units" class="form-control" value="<?php echo($music->product->units) ?>">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="search_related"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z"></path></svg> {{LANG Related to song}}</label>
								<div class="col-md-9">
									<div class="dropdown">
										<input type="text" id="search_related" class="form-control dropdown-toggle" data-toggle="dropdown" onclick="SearchSong(this)" onkeyup="SearchSong(this)" value="<?php echo($music->product->related_song->title) ?>" autocomplete="off">
										<input type="hidden" id="related" name="related" class="form-control" value="<?php echo($music->product->related_song->id) ?>">
										<div class="dropdown-menu mat-dropdown w-100 product-related-song" id="SearchSong"></div>
									</div>
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="category"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M11,13.5V21.5H3V13.5H11M12,2L17.5,11H6.5L12,2M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13Z"></path></svg> {{LANG Category}}</label>
								<div class="col-md-9">
									<select name="category" id="category" class="form-control">
										<?php foreach ($music->products_categories as $key => $value) { ?>
											<option value="<?php echo($key) ?>" <?php echo($music->product->cat_id == $key ? 'selected' : '') ?> ><?php echo($value) ?></option>
										<?php } ?>
									</select>
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17" class="mt-n2"><path fill="currentColor" d="M4,5H7L9,3H15L17,5H20A2,2 0 0,1 22,7V19A2,2 0 0,1 20,21H4A2,2 0 0,1 2,19V7A2,2 0 0,1 4,5M13.09,9.45L11.05,12.18L12.6,14.25L11.73,14.91L9.27,11.64L6,16H18L13.09,9.45Z"></path></svg> {{LANG Images}}</label>
								<div class="col-md-9 ds_media_file mt-0">
									<span class="btn btn-file image_file" onclick="$('#product-media').trigger('click'); return false;">
										<span id="product-media-holder"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M7,15L11.5,9L15,13.5L17.5,10.5L21,15M22,4H14L12,2H6A2,2 0 0,0 4,4V16A2,2 0 0,0 6,18H22A2,2 0 0,0 24,16V6A2,2 0 0,0 22,4M2,6H0V11H0V20A2,2 0 0,0 2,22H20V20H2V6Z"></path></svg></span>
									</span>
									<div id="productimage-holder">
										<?php foreach ($music->product->images as $key => $value) { ?>
											<img src="<?php echo($value['image']) ?>" alt='Picture' class='thumb-image'>
										<?php } ?>
									</div>
									<input type="file" class="media" id="product-media" name="image[]" accept="image/*" multiple="multiple">
								</div>
							</div>
							
						</div>
					</div>
					
					<div class="last-sett-btn modal-footer">
						<input type="hidden" name="id" value="<?php echo($music->product->id) ?>">
						<button type="submit" class="btn btn-primary btn-mat" id="submit-btn">{{LANG Publish}}</button>
					</div>
				</form>
            </div>
        </div>
    </div>
</div>

<script>
$(function () {
  $("#tags").tagit({
    allowSpaces: true
  });
});
function SearchSong(self) {
  $('#SearchSong').html("");
  $.post('{{CONFIG ajax_url}}/product/search?hash_id=' + getHashID(), {word: $(self).val()}, function(data, textStatus, xhr) {
    if (data.status == 200) {
      $('#SearchSong').html(data.html);
    }
  });
}
function AddRelated(self,id) {
  $('#search_related').val($(self).find('a').html());
  $('#related').val(id);
  $('#SearchSong').html("");
}
$(document).ready(function() {
  $("#product-media").on('change', function() {
    $("#productimage-holder").html("");
    if (this.files.length > 0) {
      for (var i = 0; i < this.files.length; i++) {
        console.log(i)
        $("#productimage-holder").append("<img src='" + window.URL.createObjectURL(this.files[i]) + "' alt='Picture' class='thumb-image'>");
      }
    }
  });
});
    var _Delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

    function scrollToTop() {
        verticalOffset = typeof (verticalOffset) != 'undefined' ? verticalOffset : 0;
        element = $('html');
        offset = element.offset();
        offsetTop = offset.top;
        $('html, body').animate({
            scrollTop: offsetTop
        }, 300, 'linear');
    }
    function HasExtension(id, exts) {
        var fileName = $(id).val();
        return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
    }
  var bar         = $('.bar');
  var percent     = $('.percent');

  jQuery(document).ready(function($) {
    $('.user-product-form').ajaxForm({
      url: '{{CONFIG ajax_url}}/product/edit?hash_id=' + getHashID(),
      dataType:"json",
      beforeSend: function() {

        var mediafile = $("#product-media").prop('files');
        if( $("#product-media").val() ) {
            if (mediafile[0].size > "{{CONFIG max_upload}}") {
                swal({
                    title: '{{LANG Error!}}',
                    text: "{{LANG File is too big, Max upload size is}} <?php echo size_format($music->config->max_upload); ?>",
                    type: 'error',
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'OK',
                    buttonsStyling: true,
                    confirmButtonClass: 'btn btn-success',
                }).then(function () {
                        swal.close();
                        $("#product-media").val('');
                    },
                    function () {
                        swal.close();
                        $("#product-media").val('');
                    });
                return false;
            }
        }
        if ($("#product-media").val()) {
          $(".user-product-alert").html($('.progress').clone(true).addClass('progress-clone').removeClass('hidden'));
          bar     = $('.progress-clone').find('.bar');
          percent = $('.progress-clone').find('.percent');
        }

        $('#submit-btn').attr('disabled', true).text("{{LANG Please wait..}}");
        
      },
      uploadProgress: function(event, position, total, percentComplete) {
          if(percentComplete > 50) {
            percent.addClass('white');
          }
          var percentVal = percentComplete + '%';
          bar.width(percentVal);
          percent.html(percentVal);

          if (percentComplete == 100) {
            $(".user-product-alert").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        $('#submit-btn').removeAttr('disabled').text('{{LANG Publish}}');
        if (data.status == 200){
          $(".user-product-alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            _Delay(function(){
              /*location.href = "{{LINK manage_products}}";*/
              goToAjaxLink("manage_products");
          },2000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').text('{{LANG Publish}}');
          $(".user-product-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
  });





</script>