<?php if ($music->search_page != 'products') { ?>
<div class="store_filters">
    <div class="store_widget mus_srch_widget">
        <div class="s_widget_head">
            <span class="price"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z"></path></svg></span> Price
        </div>
        <div class="store_categories">
			<?php foreach($music->song_prices as $key => $value){?>
				<span class="check_box mus_srch_cbox">
					<input type="checkbox" name="zero" id="<?php echo $key;?>" class="song_price" data-price="<?php echo $value;?>" value="1" >
					<label for="<?php echo $key;?>">{{CONFIG currency_symbol}}<?php echo $value;?></label>
				</span>
			<?php }?>
        </div>
    </div>
    <div class="store_widget mus_srch_widget">
        <div class="s_widget_head">
            <span class="geners"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z"></path></svg></span> Genres
        </div>
        <div class="store_categories">
			<?php foreach($music->categories as $key => $category){?>
				<span class="check_box">
					<input type="checkbox" name="<?php echo $category;?>" id="<?php echo $category;?>" value="<?php echo $key;?>" class="song_category" data-category="<?php echo $key;?>">
					<label for="<?php echo $category;?>"><?php echo $category;?></label>
				</span>
			<?php } ?>
        </div>
    </div>
</div>
<input type="hidden" name="filter_type" value="<?php echo $music->search_page;?>" id="filter_type">
<input type="hidden" name="filter_search_keyword" value="<?php echo $music->search_keyword;?>" id="filter_search_keyword">
<script>
	function filter_search_results(){
	    let prices = [];
	    let geners = [];
        let filter_type = $('#filter_type').val();
	    let filter_search_keyword = $('#filter_search_keyword').val();
        $('.song_price').each(function(i, obj) {
            if(this.checked){
                prices.push($(obj).attr('data-price'));
			}
        });
        $('.song_category').each(function(i, obj) {
            if(this.checked){
                geners.push($(obj).attr('data-category'));
            }
        });

        $.get(ajaxUrl() + "/search-filter", {prices: prices, geners: geners, filter_type: filter_type, filter_search_keyword: filter_search_keyword}, function (data) {
        	if(data.status == 200){
        	    $('#search_results').html(data.html);
			}
        });

	}
	$(document).on('click','.song_price,.song_category',function(e){
        filter_search_results()
	});
</script>
<?php }else{ ?>
	<div class="store_filters">

		<div class="store_widget" style="<?php if( $music->config->artist_sell !== 'on' ) { echo "display: none;";} ?>">
			<div class="s_widget_head">
				<span class="price"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M3,6H21V18H3V6M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M7,8A2,2 0 0,1 5,10V14A2,2 0 0,1 7,16H17A2,2 0 0,1 19,14V10A2,2 0 0,1 17,8H7Z"></path></svg></span> {{LANG Price}}
			</div>
			<div class="store_pric_range">
				<p>
					<label for="amount">{{LANG Price range}}:</label>
					<input type="text" id="amount" readonly data_min="1" data_max="10000">
				</p>
				<div id="slider-range"></div>
			</div>
		</div>

		<div class="store_widget">
			<div class="s_widget_head">
				<span class="geners"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,18.54L19.37,12.8L21,14.07L12,21.07L3,14.07L4.62,12.81L12,18.54M12,16L3,9L12,2L21,9L12,16M12,4.53L6.26,9L12,13.47L17.74,9L12,4.53Z"></path></svg></span> {{LANG Category}}
			</div>
			<div class="store_categories">
				<?php foreach($music->products_categories as $key => $category){?>
				<span class="check_box">
						<input type="checkbox" name="<?php echo $category;?>" id="<?php echo $category;?>" value="<?php echo $key;?>" class="song_category" data-category="<?php echo $key;?>">
						<label for="<?php echo $category;?>"><?php echo $category;?></label>
					</span>
				<?php } ?>
			</div>
		</div>
	</div>
<input type="hidden" name="filter_search_keyword" value="<?php echo $music->search_keyword;?>" id="filter_search_keyword">
<input type="hidden" name="tag" value="<?php echo $music->product_tag;?>" id="filter_search_tag">
<script type="text/javascript">
	$( function() {
	    $( "#slider-range" ).slider({
	      range: true,
	      min: 1,
	      max: 10000,
	      values: [ 1, 10000 ],
	      slide: function( event, ui ) {
	          filter_search_results(ui.values[ 0 ],ui.values[ 1 ]);
			  $( "#amount" ).val( "{{CONFIG currency_symbol}}" + ui.values[ 0 ] + " - " + "{{CONFIG currency_symbol}}" + ui.values[ 1 ] );
	      }
	    });
	    $( "#amount" ).val( "{{CONFIG currency_symbol}}" + $( "#slider-range" ).slider( "values", 0 ) + " - {{CONFIG currency_symbol}}" + $( "#slider-range" ).slider( "values", 1 ) );
	  } );

	  function filter_search_results(from=0.99,to=40){
	  	filter_search_keyword = $('#filter_search_keyword').val();
	  	tag = $('#filter_search_tag').val();
	      let category = [];
	      $('.song_category').each(function(i, obj) {
	          if(this.checked){
	              category.push($(obj).attr('data-category'));
	          }
	      });
	      $.get(ajaxUrl() + "/product/product_search", {price_from: from, price_to: to, category: category, filter_search_keyword: filter_search_keyword, tag: tag}, function (data) {
	          if(data.status == 200){
	              $('#products_search_result').html(data.html);
	              $('#load-more-button').html('<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}}');
	          }
	      });
	  }
	  $(document).on('click','.song_category',function(e){
		  var from = $( "#slider-range" ).slider( "values", 0 );
		  var to = $( "#slider-range" ).slider( "values", 1 );
	      filter_search_results(from,to);
	  });
</script>
<?php } ?>