<div class="ma_page_content">
	<div class="ma_pc_inner">

		<div class="product_seller_header">
			<div class="dummy_header"><img src="<?php echo($music->product->user_data->avatar) ?>" alt="User Avatar"><div class="black-bg"></div></div>
			<div class="container position-relative">
				<div class="d-flex align-items-center">
					<div class="avatar">
						<a href="<?php echo($music->product->user_data->url) ?>" data-load="<?php echo($music->product->user_data->username) ?>">
							<img src="<?php echo($music->product->user_data->avatar) ?>" alt="User Avatar" id="avatar">
						</a>
					</div>
					<div class="info">
						<a href="<?php echo($music->product->user_data->url) ?>" data-load="<?php echo($music->product->user_data->username) ?>">
							<h3><?php echo($music->product->user_data->name) ?></h3>
						</a>
						<?php if (IS_LOGGED && $music->user->id != $music->product->user_id) {?>
							<?php if (!isFollowing($music->product->user_id)) { ?>
								<button class="btn btn-primary" id="follow-user" data-user-id="<?php echo($music->product->user_id) ?>">{{LANG Follow}}</button>
							<?php } else { ?>
								<button class="btn btn-success" id="unfollow-user" data-user-id="<?php echo($music->product->user_id) ?>">{{LANG Following}}</button>
							<?php } ?>
						<?php } ?>
					</div>
				</div>
			</div>
		</div>

		<div class="container">
			<div class="content">
				<input id="product_page_id" type="hidden" value="<?php echo $music->product->id; ?>">
				<div class="row">
					<div class="col-lg-6">
						<div class="feed_post_block">
							<div class="product_img_zoom">
								<div class="prod_zoom_img">
									<img class="prod_img_zoom img-fluid" src="<?php echo($music->product->images[0]['image']) ?>" xoriginal="<?php echo($music->product->images[0]['image']) ?>">
								</div>
								<div class="prod_zoom_thumbs">
									<div class="prod_img_zoom-thumbs">
										<?php foreach ($music->product->images as $key => $value) { ?>
											<a href="<?php echo($value['image']) ?>">
												<img class="prod_img_zoom-gallery" width="80" src="<?php echo($value['image']) ?>">
											</a>
										<?php } ?>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="col-lg-6">
						<div class="position-sticky fixed-top pt-2">
							<div class="stars" data-stars="<?php echo($music->product->rating) ?>">
								<svg class="star rating" viewBox="0 0 24 24" data-rating="1"><path d="M6.516,14.323l-1.49,6.452c-0.092,0.399,0.068,0.814,0.406,1.047C5.603,21.94,5.801,22,6,22 c0.193,0,0.387-0.056,0.555-0.168L12,18.202l5.445,3.63c0.348,0.232,0.805,0.223,1.145-0.024c0.338-0.247,0.487-0.68,0.372-1.082 l-1.829-6.4l4.536-4.082c0.297-0.268,0.406-0.686,0.278-1.064c-0.129-0.378-0.47-0.644-0.868-0.676L15.378,8.05l-2.467-5.461 C12.75,2.23,12.393,2,12,2s-0.75,0.23-0.911,0.589L8.622,8.05L2.921,8.503C2.529,8.534,2.192,8.791,2.06,9.16 c-0.134,0.369-0.038,0.782,0.242,1.056L6.516,14.323z"></path></svg>
								<svg class="star rating" viewBox="0 0 24 24" data-rating="2"><path d="M6.516,14.323l-1.49,6.452c-0.092,0.399,0.068,0.814,0.406,1.047C5.603,21.94,5.801,22,6,22 c0.193,0,0.387-0.056,0.555-0.168L12,18.202l5.445,3.63c0.348,0.232,0.805,0.223,1.145-0.024c0.338-0.247,0.487-0.68,0.372-1.082 l-1.829-6.4l4.536-4.082c0.297-0.268,0.406-0.686,0.278-1.064c-0.129-0.378-0.47-0.644-0.868-0.676L15.378,8.05l-2.467-5.461 C12.75,2.23,12.393,2,12,2s-0.75,0.23-0.911,0.589L8.622,8.05L2.921,8.503C2.529,8.534,2.192,8.791,2.06,9.16 c-0.134,0.369-0.038,0.782,0.242,1.056L6.516,14.323z"></path></svg>
								<svg class="star rating" viewBox="0 0 24 24" data-rating="3"><path d="M6.516,14.323l-1.49,6.452c-0.092,0.399,0.068,0.814,0.406,1.047C5.603,21.94,5.801,22,6,22 c0.193,0,0.387-0.056,0.555-0.168L12,18.202l5.445,3.63c0.348,0.232,0.805,0.223,1.145-0.024c0.338-0.247,0.487-0.68,0.372-1.082 l-1.829-6.4l4.536-4.082c0.297-0.268,0.406-0.686,0.278-1.064c-0.129-0.378-0.47-0.644-0.868-0.676L15.378,8.05l-2.467-5.461 C12.75,2.23,12.393,2,12,2s-0.75,0.23-0.911,0.589L8.622,8.05L2.921,8.503C2.529,8.534,2.192,8.791,2.06,9.16 c-0.134,0.369-0.038,0.782,0.242,1.056L6.516,14.323z"></path></svg>
								<svg class="star rating" viewBox="0 0 24 24" data-rating="4"><path d="M6.516,14.323l-1.49,6.452c-0.092,0.399,0.068,0.814,0.406,1.047C5.603,21.94,5.801,22,6,22 c0.193,0,0.387-0.056,0.555-0.168L12,18.202l5.445,3.63c0.348,0.232,0.805,0.223,1.145-0.024c0.338-0.247,0.487-0.68,0.372-1.082 l-1.829-6.4l4.536-4.082c0.297-0.268,0.406-0.686,0.278-1.064c-0.129-0.378-0.47-0.644-0.868-0.676L15.378,8.05l-2.467-5.461 C12.75,2.23,12.393,2,12,2s-0.75,0.23-0.911,0.589L8.622,8.05L2.921,8.503C2.529,8.534,2.192,8.791,2.06,9.16 c-0.134,0.369-0.038,0.782,0.242,1.056L6.516,14.323z"></path></svg>
								<svg class="star rating" viewBox="0 0 24 24" data-rating="5"><path d="M6.516,14.323l-1.49,6.452c-0.092,0.399,0.068,0.814,0.406,1.047C5.603,21.94,5.801,22,6,22 c0.193,0,0.387-0.056,0.555-0.168L12,18.202l5.445,3.63c0.348,0.232,0.805,0.223,1.145-0.024c0.338-0.247,0.487-0.68,0.372-1.082 l-1.829-6.4l4.536-4.082c0.297-0.268,0.406-0.686,0.278-1.064c-0.129-0.378-0.47-0.644-0.868-0.676L15.378,8.05l-2.467-5.461 C12.75,2.23,12.393,2,12,2s-0.75,0.23-0.911,0.589L8.622,8.05L2.921,8.503C2.529,8.534,2.192,8.791,2.06,9.16 c-0.134,0.369-0.038,0.782,0.242,1.056L6.516,14.323z"></path></svg>&nbsp;(<?php echo($music->product->reviews_count) ?> {{LANG Reviews}})
							</div>
							<h2 class="product_v_title"><?php echo($music->product->title) ?></h2>
							<p class="product_v_price">{{CONFIG currency_symbol}}<?php echo($music->product->formatted_price) ?></p>
							<div class="d-flex align-items-center product_v_btns">
								<?php if (IS_LOGGED && $music->user->id != $music->product->user_id) {
									if ($music->product->units > 0) {
								?>
									<select id="cart_product_qty">
										<?php for ($i=1; $i <= $music->product->units; $i++) {  ?>
											<option value="<?php echo $i; ?>"><?php echo $i; ?></option>
										<?php } ?>
									</select>
									<button type="button" onclick="AddProductToCart(this,'<?php echo($music->product->id) ?>','<?php echo(!empty($music->product->added_to_cart) && $music->product->added_to_cart > 0 ? 'remove' : 'add') ?>')" class="btn btn-primary btn-mat"><?php echo(!empty($music->product->added_to_cart) && $music->product->added_to_cart > 0 ? lang('Remove From Cart') : lang('Add To Cart')) ?></button>
								<?php }else{ ?>
									<div class='alert alert-warning  bg-warning'>{{LANG Currently unavailable.}}</div>
								<?php }}else{
									  if (IS_LOGGED) { ?>
									 	<a href="<?php echo $music->product->edit_url; ?>" class="btn btn-primary btn-mat" data-load="<?php echo $music->product->edit_data_load; ?>"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"></path></svg> {{LANG Edit Product}}</a>
									  <?php }else{ ?>
									<a href="{{LINK purchased}}" data-load="purchased" class="btn btn-primary btn-mat"> {{LANG Login To Purchase}}</a>
								<?php }} ?>
							</div>

							<div class="related_to_song" onclick="playSong('<?php echo($music->product->related_song->audio_id) ?>')">
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM14.66 13.73L13.38 14.47L12.1 15.21C10.45 16.16 9.1 15.38 9.1 13.48V12V10.52C9.1 8.61 10.45 7.84 12.1 8.79L13.38 9.53L14.66 10.27C16.31 11.22 16.31 12.78 14.66 13.73Z" fill="#eb5b8c"/></svg>
								<b>{{LANG Related to song}}</b>
								<p><?php echo($music->product->related_song->title) ?></p>
							</div>

							<ul class="list-unstyled product_v_info">
								<li>
									<span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24px" height="24px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zM9 9H5V5h4v4zm11-6h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 6h-4V5h4v4zm-9 4H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zm-1 6H5v-4h4v4zm8-6c-2.206 0-4 1.794-4 4s1.794 4 4 4s4-1.794 4-4s-1.794-4-4-4zm0 6c-1.103 0-2-.897-2-2s.897-2 2-2s2 .897 2 2s-.897 2-2 2z" fill="currentColor"/></svg> {{LANG Category}}</span>
									<span><?php echo $music->products_categories[$music->product->cat_id]; ?></span>
								</li>
								<li>
									<span><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="24px" height="24px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><g fill="none"><path d="M15.244 21.366a2.164 2.164 0 0 1-3.061 0l-8.549-8.549A2.164 2.164 0 0 1 3 11.287V5.163C3 3.97 3.97 3 5.164 3h6.123c.573 0 1.124.228 1.53.634l8.549 8.549a2.164 2.164 0 0 1 0 3.061l-6.122 6.122z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.5 6.5L7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></g></svg> {{LANG Tags}}</span>
									<span>
										<?php
										$ar = explode(',', $music->product->tags);
										if (!empty($ar)) {

											foreach ($ar as $key => $value) {
												$value = preg_replace('/on[^<>=]+=[^<>]*/m', '', $value);
												$value = preg_replace('/\((.*?)\)/m', '', $value);
												?>
												<a href="{{LINK search/products}}?tag=<?php echo $value; ?>">#<?php echo $value; ?></a>
											<?php } } ?>
									</span>
								</li>
							</ul>
						</div>
					</div>

					<div class="col-md-12">
						<hr class="my-4">

						<ul class="nav nav-tabs" role="tablist">
							<li class="nav-item" role="presentation">
								<a class="nav-link active" id="desc-tab" data-toggle="tab" href="#desc" role="tab" aria-controls="desc" aria-selected="true">{{LANG Description}}</a>
							</li>
							<li class="nav-item" role="presentation">
								<a class="nav-link" id="review-tab" data-toggle="tab" href="#review" role="tab" aria-controls="review" aria-selected="false">{{LANG Reviews}}</a>
							</li>
						</ul>
						<div class="tab-content" id="myTabContent">
							<div class="tab-pane fade show active" id="desc" role="tabpanel" aria-labelledby="desc-tab">
								<div class="px-md-4 pb-md-4 product_v_desc"><?php echo $music->product->desc; ?></div>
							</div>
							<div class="tab-pane fade" id="review" role="tabpanel" aria-labelledby="review-tab">
								<?php if ($music->can_review > 0 && $music->is_reviewed < 1) { ?>
									<button type="button" class="btn write_a_prod_review" data-toggle="modal" data-target="#write-review"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.19 6H6.79C6.53 6 6.28 6.01 6.04 6.04C3.35 6.27 2 7.86 2 10.79V14.79C2 18.79 3.6 19.58 6.79 19.58H7.19C7.41 19.58 7.7 19.73 7.83 19.9L9.03 21.5C9.56 22.21 10.42 22.21 10.95 21.5L12.15 19.9C12.3 19.7 12.54 19.58 12.79 19.58H13.19C16.12 19.58 17.71 18.24 17.94 15.54C17.97 15.3 17.98 15.05 17.98 14.79V10.79C17.98 7.6 16.38 6 13.19 6ZM6.5 14C5.94 14 5.5 13.55 5.5 13C5.5 12.45 5.95 12 6.5 12C7.05 12 7.5 12.45 7.5 13C7.5 13.55 7.05 14 6.5 14ZM9.99 14C9.43 14 8.99 13.55 8.99 13C8.99 12.45 9.44 12 9.99 12C10.54 12 10.99 12.45 10.99 13C10.99 13.55 10.55 14 9.99 14ZM13.49 14C12.93 14 12.49 13.55 12.49 13C12.49 12.45 12.94 12 13.49 12C14.04 12 14.49 12.45 14.49 13C14.49 13.55 14.04 14 13.49 14Z" fill="currentColor"/><path d="M21.9802 6.79V10.79C21.9802 12.79 21.3602 14.15 20.1202 14.9C19.8202 15.08 19.4702 14.84 19.4702 14.49L19.4802 10.79C19.4802 6.79 17.1902 4.5 13.1902 4.5L7.10025 4.51C6.75025 4.51 6.51025 4.16 6.69025 3.86C7.44025 2.62 8.80025 2 10.7902 2H17.1902C20.3802 2 21.9802 3.6 21.9802 6.79Z" fill="currentColor"/></svg> {{LANG Write Review}}</button>
								<?php } ?>
								<div class="prod_reviews_cont">
									<h4>{{LANG Reviews}}</h4>
									<div class="reviews_section">
										{{reviews_html}}
									</div>
									<?php if (!empty($music->reviews)) { ?>
										<div class="text-center see_all">
											<a href="javascript:void(0); loadMore('reviews', '');" id="load-more-button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,13H13V17H11V13H7V11H11V7H13V11H17M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"></path></svg> {{LANG Load More}}</a>
										</div>
									<?php } ?>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<?php if (!empty($music->may_like)) { ?>
			<!-- Related Products -->
			<div class="content">
				<h2 class="home_widget_title mb-0">
					<span class="you_also_like"><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 You may also like}}
				</h2>
				<div class="row">
					{{may_like_html}}
				</div>
			</div>
			<!-- Related Products -->
			<?php } ?>
		</div>
	</div>
	<input type="hidden" id="user-id" name="user-id" value="{{USER id}}">
</div>

<?php if ($music->can_review > 0 && $music->is_reviewed < 1) { ?>
	<div class="modal fade" id="write-review" tabindex="-1" role="dialog" aria-labelledby="write-review">
		<div class="modal-dialog mat_box" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">{{LANG Write Review}}</h5>
				</div>
				<form id="write_review_form" method="post">
					<div class="modal-body">
						<div class="write_review_alert"></div>
						<div class="valign-wrapper star_rating">
							<input type="radio" id="5-stars" name="rating" value="5">
							<label for="5-stars" class="star">★</label>
							<input type="radio" id="4-stars" name="rating" value="4">
							<label for="4-stars" class="star">★</label>
							<input type="radio" id="3-stars" name="rating" value="3">
							<label for="3-stars" class="star">★</label>
							<input type="radio" id="2-stars" name="rating" value="2">
							<label for="2-stars" class="star">★</label>
							<input type="radio" id="1-star" name="rating" value="1">
							<label for="1-star" class="star">★</label>
						</div>
						<div class="form-group">
							<b class="se_prod_ordr_title">{{LANG Photos}}</b>
							<div class="create_prod_images">
								<div class="productimage-holder">
									<div class="upload-product-image" onclick="document.getElementById('p_photos').click(); return false">
										<div class="valign-wrapper upload-image-content">
											<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"></path></svg>
										</div>
									</div>
								</div>
								<span class="d-none">
									<input type="file" id="p_photos" accept="image/x-png, image/jpeg" multiple="multiple" name="images[]">
								</span>
							</div>
						</div>
						<div class="form-group">
							<textarea class="form-control shop_input" placeholder="{{LANG Review}}" rows="5" name="review"></textarea>
						</div>
						<input name="product_id" class="form-control shop_input" type="hidden" value="<?php echo $music->product->id; ?>">
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">{{LANG Cancel}}</button>
						<button type="submit" class="btn btn-primary write_review_btn_submit" id="write_review_button">{{LANG Submit}}</button>
					</div>
				</form>
			</div>
		</div>
	</div>
<?php } ?>

<script>
	$("#p_photos").on('change', function() {
		//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('img').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();
				product_reader.onload = function(e) {
					$("<img />", {
						"src": e.target.result,
						"class": "thumb-image"
					}).appendTo(product_image_holder);
					}
					product_image_holder.show();
					product_reader.readAsDataURL($(this)[0].files[i]);
				}
			} else {
				product_image_holder.html("<p>This browser does not support FileReader.</p>");
			}
		}
	});

$(document).ready(function() {
	$('.prod_img_zoom, .prod_img_zoom-gallery').xzoom({
		position: 'inside',
		smoothScale: 3,
		fadeTrans: false,
        hover: false,
		openOnSmall: false,
    });
    $('#write_review_form').ajaxForm({
    	url: '{{CONFIG ajax_url}}/product/review?hash_id=' + getHashID(),
        beforeSubmit:  function () {
        	$('#write_review_button').html("{{LANG Please wait..}}");
		    $('#write_review_button').attr('disabled', "true");
        },
        success: function (data) {
        	$('#write_review_button').removeAttr('disabled');
			$('#write_review_button').text("{{LANG Submit}}");
        	if (data.status == 200) {
        		$('.write_review_alert').html("<div class='alert alert-success bg-success'><i class='fa fa-check'></i> "+data.message+"</div>");
				setTimeout(function () {
	            	$('.write_review_alert').html("");
	            	location.href = "<?php echo $music->product->url; ?>";
	            },2000);
        	}
        	else{
        		$('.write_review_alert').html("<div class='alert alert-danger bg-danger'><i class='fa fa-check'></i> "+data.message+"</div>");
				setTimeout(function () {
	            	$('.write_review_alert').html("");
	            },2000);

        	}
        }
    });
});

</script>
