<div class="upload_music no-min-height" id="upload-song-form-{{form_id}}">
	<div class="upload" data-block="audio-drop-zone-{{form_id}}">
		<div class="upload_innr">
			<div class="file_icon_cont">
				<div class="file_icon_shadow"></div>
				<div class="file_icon">
					<svg height="30" viewBox="0 0 24 24" width="30" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z"></path></svg>
				</div>
			</div>
			<h4>{{LANG Select files to upload}}</h4>
			<p>{{LANG or drag & drop files here}}</p>
		</div>
		<br>
		<div class="progress hidden">
		  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
		</div>
	</div>
	<form action="" method="POST" id="upload-audio-{{form_id}}" class="v-hidden">
		<input type="file" name="audio" accept="audio/*" class="upload-audio-file-{{form_id}} hidden">
	</form>
	<div class="row hidden" id="upload-form-{{form_id}}">
		<div class="col-md-1"></div>
		<form action="" class="form-horizontal col-md-10 upload_form" method="POST" id="song-form-{{form_id}}">
			<div class="remove-album-song" id="remove-album-song-{{form_id}}">
				<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-trash-2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
			</div>
			<div class="col-md-12">
				<div class="alert alert-danger alert-empty" id="output-song-errors-{{form_id}}"></div>
			</div>
			<div class="form-group mat_input">
				<label class="col-md-12" for="title"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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" /></svg> {{LANG Title}}</label>  
				<div class="col-md-12">
					<input id="title-{{form_id}}" name="title" type="text" placeholder="" class="form-control input-md">
					<span class="help-block">{{LANG Your song title, 2 - 55 characters}}</span>
				</div>
			</div>

			<div class="form-group mat_input song_thumb">
				<div class="col-md-12">
					<div class="upload-song-image" onclick="document.getElementById('thumbnail-{{form_id}}').click(); return false">
						<div class="upload-image-content" id="upload-image-content-{{form_id}}">
							<svg xmlns="http://www.w3.org/2000/svg" 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>
					<div class="progress hidden mt-2" id="img_upload_progress-{{form_id}}">
						<div id="img_upload_progress_bar-{{form_id}}" class="progress-bar progress-bar-striped bg-success progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
					</div>
				</div>
			</div>

			<div class="form-group mat_input">
				<label class="col-md-12" for="description"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M4,5H20V7H4V5M4,9H20V11H4V9M4,13H20V15H4V13M4,17H14V19H4V17Z" /></svg> {{LANG Description}}</label>  
				<div class="col-md-12">
					<textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
				</div>
			</div>

			<div class="form-group mat_input">
				<label class="col-md-12" for="lyrics"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19,3A2,2 0 0,1 21,5V13.34C20.36,13.11 19.68,13 19,13C15.68,13 13,15.69 13,19C13,19.68 13.11,20.36 13.34,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3H9.18C9.5,2.16 10.14,1.5 11,1.2C12.53,0.64 14.25,1.44 14.82,3H19M12,3A1,1 0 0,0 11,4A1,1 0 0,0 12,5A1,1 0 0,0 13,4A1,1 0 0,0 12,3M11,17V15H7V17H11M13,13V11H7V13H13M17,9V7H7V9H17M17,16L22,19L17,22V16Z" /></svg> {{LANG Lyrics}}</label>
				<div class="col-md-12">
					<textarea name="lyrics" id="lyrics" cols="30" rows="5" class="form-control"></textarea>
				</div>
			</div>

			<div class="form-group mat_input">
				<label class="col-md-12" for="tags-{{form_id}}"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><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" /></svg> {{LANG Tags}}</label>  
				<div class="col-md-12">
					<input name="tags" id="tags-{{form_id}}" type="text" placeholder="" class="form-control">
					<span class="help-block">{{LANG Add tags to describe more about your track}}</span>
				</div>
			</div>
		
			<div class="form-group mat_input">
				<label class="col-md-12" for="age_restriction"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" /></svg> {{LANG Age Restriction}}</label>  
				<div class="col-md-12">
					<select name="age_restriction" id="age_restriction" class="form-control">
						<option value="0" selected>{{LANG All ages can listen this song}}</option>
						<option value="1">{{LANG Only +18}}</option>
					</select>
				</div>
			</div>
			<div class="last-sett-btn">
				<button type="submit" class="btn btn-primary btn-mat btn-save-songs hidden" id="btn-song-submit-{{form_id}}" data-id="{{form_id}}">{{LANG Save}}</button>
			</div>
			<input type="hidden" name="song-location" id="song-location-{{form_id}}" value="">
			<input type="hidden" name="song-thumbnail" id="song-thumbnail-{{form_id}}" value="">
			<input type="hidden" name="category_id" value="{{genre_id}}">
		</form>
		<div class="col-md-1"></div>
	</div>
	<form action="" id="thumbnail-form-{{form_id}}" method="POST">
	   <input id="thumbnail-{{form_id}}" name="thumbnail" type="file" style="visibility: hidden;" accept="image/*">
	</form>
</div>
<script>
$(document).on("click", '#remove-album-song-{{form_id}}',  function () {
	if (!confirm("{{LANG Are you sure you want to delete this song?}}")) {
		return false;
	}
	$('#upload-song-form-{{form_id}}').slideUp('slow', function() {
		$(this).remove();
	});
	$.get("{{CONFIG ajax_url}}/delete-uploaded-album", {thumb: $('#song-thumbnail-{{form_id}}').val(), song: $('#song-location-{{form_id}}').val()});
})
$(function () {
	$("#tags-{{form_id}}").tagit({
		allowSpaces: true
	});
	var audio_drop_block = $("[data-block='audio-drop-zone-{{form_id}}']");

	if (typeof(window.FileReader)){
		audio_drop_block[0].ondragover = function() {
			audio_drop_block.addClass('drag_active');
			return false;
		};
		audio_drop_block[0].ondragleave = function() {
			audio_drop_block.removeClass('drag_active');
			return false;
		};
		audio_drop_block[0].ondrop = function(event) {
			event.preventDefault();
			audio_drop_block.removeClass('drag_active');
			var file = event.dataTransfer.files;
			$('#upload-audio-{{form_id}}').find('input').prop('files', file);
			$('#upload-audio-{{form_id}}').submit();
		};
	}

	$('#thumbnail-{{form_id}}').change(function(event) {
		if (!validate_fileupload($('#thumbnail-{{form_id}}').val(), ["jpg","png","jpeg"])) {
			alert("{{LANG Invalid file format, only jpg, jpeg, png are allowed}}");
			return false;
		}
        let bar = $('#img_upload_progress-{{form_id}}');
        let percent = $('#img_upload_progress_bar-{{form_id}}');
        bar.removeClass('hidden');
	   $.ajax({
           xhr: function() {
               let xhr = new window.XMLHttpRequest();
               xhr.upload.addEventListener("progress", function(evt){
                   if (evt.lengthComputable) {
                       let percentComplete = evt.loaded / evt.total;
                       percentComplete = parseInt(percentComplete * 100);
                       //status.html( percentComplete + "%");
                       percent.width(percentComplete + '%');
                       percent.html(percentComplete + '%');
                       if (percentComplete === 100) {
                           // bar.addClass('hidden');
                           // percent.width('0%');
                           // percent.html('0%');
                       }
                   }
               }, false);
               return xhr;
           },
	        type: 'POST',
	        url: '{{CONFIG ajax_url}}/upload-thumbnail?hash_id=' + $('.main_session').val(),
	        data: new FormData($("#thumbnail-form-{{form_id}}")[0]),
	        processData: false, 
	        contentType: false, 
	        success: function(data) {
                bar.addClass('hidden');
                percent.width('0%');
                percent.html('0%');
	        	if (data.status == 200) {
	        		$('#upload-image-content-{{form_id}}').html('<img src="' + data.full_thumbnail + '" class="w-100">');
	        		$('#song-thumbnail-{{form_id}}').val(data.thumbnail);
	        	} else if (data.status == 400) {
	        		alert(data.message);
	        	} else {
	        		alert("{{LANG Error found while uploading your image, please try again later.}}");
	        	}
	        }
	    });
	});

	 var options = { 
    	url: "{{CONFIG ajax_url}}/submit-song?hash_id=" + getHashID(),
        beforeSubmit:  function () {
        	$('#output-song-errors-{{form_id}}').removeClass("alert-success").addClass('alert-danger');
        	$('#output-song-errors-{{form_id}}').empty();
        	$("#btn-song-submit-{{form_id}}").text("{{LANG Please wait..}}");
        	$("#btn-song-submit-{{form_id}}").attr("disabled", "true");
        }, 
        success: function (data) {
        	if (data.status == 200) {
        		$('html,body').animate({
			        scrollTop: $("#upload-song-form-{{form_id}}").offset().top
			    }, 'slow');
        		$('#output-song-errors-{{form_id}}').removeClass("alert-danger").addClass('alert-success');
        		<?php if ($music->config->ffmpeg_system == "on") { ?>
        		$('#output-song-errors-{{form_id}}').html("{{LANG Please wait, your track is being coverted to mp3 audio file. This might take a few minutes.}}");
        		$.post('{{CONFIG ajax_url}}/convert-track?reset=false', {id: data.audio_id, file: data.song_location}, function(dataSecond, textStatus, xhr) {
        			if (dataSecond.status == 200) {
	                   	$('#song-form-{{form_id}}').html('<div class="hidden submitted-song" data-id="' + data.audio_id + '"></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M17,18H7V16H17V18M10.3,14L7,10.7L8.4,9.3L10.3,11.2L15.6,5.9L17,7.3L10.3,14Z"></path></svg> ' + $('#title-{{form_id}}').val() + ' {{LANG successfully uploaded}}');
	                   	$('#song-form-{{form_id}}').addClass('no-padding-form submitted');
	                   	publish();
	                   	$('#song-form-{{form_id}} .btn-save-songs').addClass('submitted');
        			}
        		});
        		<?php } else { ?>
        			$('#song-form-{{form_id}}').html('<div class="hidden submitted-song" data-id="' + data.audio_id + '"></div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M17,18H7V16H17V18M10.3,14L7,10.7L8.4,9.3L10.3,11.2L15.6,5.9L17,7.3L10.3,14Z"></path></svg> ' + $('#title-{{form_id}}').val() + ' {{LANG successfully uploaded}}');
        			$('#song-form-{{form_id}}').addClass('no-padding-form submitted');
	                publish();
	                $('#song-form-{{form_id}} .btn-save-songs').addClass('submitted');
        		<?php } ?>
        	} else if (data.status == 400) {
        		$("#btn-song-submit-{{form_id}}").removeAttr("disabled");
        		$("#btn-song-submit-{{form_id}}").text("{{LANG Publish}}");
        		$('#output-song-errors-{{form_id}}').html(data.message);
        		$('#btn-publish-song').removeAttr('disabled');
				$('#btn-publish-song').text("{{LANG Publish}}");
        		$('html,body').animate({
			        scrollTop: $("#upload-song-form-{{form_id}}").offset().top
			    }, 'slow');
        	}
        }
    }; 

    $('#song-form-{{form_id}}').ajaxForm(options); 

	$('#upload-audio-{{form_id}}').ajaxForm({
	    url: '{{CONFIG ajax_url}}/upload-song?hash_id=' + $('.main_session').val(),
	    dataType:'json',
	    beforeSend: function() {
	        $('#upload-song-form-{{form_id}} .progress').removeClass('hidden');
	        var percentVal = '0%';
	        $("#upload-song-form-{{form_id}} .progress-bar").width(percentVal);
	        $("#upload-song-form-{{form_id}} .progress-bar").html(percentVal);
	    },
	    uploadProgress: function(event, position, total, percentComplete) {
	        if(percentComplete > 50) {
	            $("#upload-song-form-{{form_id}} .progress-bar").addClass('white');
	        }
	        var percentVal = percentComplete + '%';
	        $("#upload-song-form-{{form_id}} .progress-bar").width(percentVal);
	        $("#upload-song-form-{{form_id}} .progress-bar").html(percentVal);

	        if (percentComplete == 100) {
	            $('#upload-song-form-{{form_id}} .progress').find('.bar').removeClass('upload-progress-bar');
	        }
	    },
	    success: function(data) {
	    	$('.upload-audio-file-{{form_id}}').val("");
	    	percentVal = '0%';
	    	$("#upload-song-form-{{form_id}} .progress-bar").width(percentVal);
            $('#upload-song-form-{{form_id}} .progress').addClass('hidden');  
	    	if (data.status == 200) {
	    		$('#upload-form-{{form_id}}').removeClass('hidden');
	    		$('#upload-song-form-{{form_id}} .upload').addClass('hidden');
	    		$("#song-location-{{form_id}}").val(data.file_path);
                $("#song-thumbnail-{{form_id}}").val($('#song-thumbnail').attr('value'));
				$("#upload-image-content-{{form_id}}").html('<img src="'+$('#song-thumbnail').attr('value')+'" class="w-100">');
	    	} else if (data.status == 400) {
        		alert(data.message);
        	} else {
        		alert("{{LANG Error found while uploading your track, please try again later.}}");
        	}
		}
	});

	$('#upload-audio-{{form_id}}').submit(function(event) {
		var allowed = [<?php echo ($music->config->ffmpeg_system == "off") ? '"mp3"' : '"mp3","ogg","wav"'?>];
		var file_size = $(".upload-audio-file-{{form_id}}").prop('files')[0].size;
		if (file_size > <?php echo $music->config->user_max_upload?>) {
			alert("Your File is too large.");
			return false;
		} else if (!validate_fileupload($('.upload-audio-file-{{form_id}}').val(), allowed)) {
			alert("<?php echo ($music->config->ffmpeg_system == "off") ? lang("Invalid file format, only mp3 is allowed") : lang("Invalid file format, only mp3, ogg, wav, and mpeg is allowed")?>");
			return false;
		} else {
			var filename = $('.upload-audio-file-{{form_id}}').val().split('\\').pop();
			$('#upload-song-form-{{form_id}}').addClass('no-flex');
			$('#title-{{form_id}}').val(filename);
		}
	});

	$('.upload-audio-file-{{form_id}}').on('change', function() {
		$('#upload-audio-{{form_id}}').submit();
	});

})

jQuery(function($) {
	$(document).ready(function() {
		$('#upload-song-form-{{form_id}} .upload').on('click', function(e) {
			$('.upload-audio-file-{{form_id}}').trigger("click");
		});
	});
});
</script>