<div class="upload_music no-min-height" id="upload-bulk-song-form-{{form_id}}">
	<div class="upload">
        <input class="upload-audio-file-{{form_id}} custom-file-input" type="file" {{ATTR}} multiple  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="40" viewBox="0 0 24 24" width="40" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75"></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">
        
	</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}}" onclick="remove_song(this,'{{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" id="img_upload_progress-{{form_id}}" style="margin-top: 6px;">
						<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}}" data-count="">{{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">
			<form action="" id="thumbnail-form-{{form_id}}" method="POST">
				<input id="thumbnail-{{form_id}}" name="thumbnail" type="file" style="visibility: hidden;" accept="image/*">
			</form>

            <script>
                // $(document).on("click", '.remove-album-song',  function () {
                //     if (!confirm("{{LANG Are you sure you want to delete this song?}}")) {
                //         return false;
                //     }
                //     let id = $(this).attr('data-id');
                //     $('.bulk-sound-upload[data-id="'+id+'"]').slideUp('slow', function() {
                //         $(this).remove();
                //     });
                //     $.get("{{CONFIG ajax_url}}/delete-uploaded-album", { song: $('#song-location-{{form_id}}-'+id).val()});
                // })
                $(function () {
                    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) {
                    //         console.log(event.dataTransfer.items.length);
                    //         var length = event.dataTransfer.items.length;
                    //         for (var i = 0; i < length; i++) {
                    //             var entry = event.dataTransfer.items[i].webkitGetAsEntry();
                    //             console.log(entry)
                    //             if (entry.isFile) {
                    //             } else if (entry.isDirectory) {
                    //             }
                    //           }
                    //         event.preventDefault();
                    //         audio_drop_block.removeClass('drag_active');
                    //         var file = event.dataTransfer.files;
                    //         console.log(event.dataTransfer)
                    //         $('#upload-audio-{{form_id}}').find('input').prop('files', file);
                    //         $('#upload-audio-{{form_id}}').submit();
                    //     };
                    // }
                    $('input[name="thumbnail"]').change(function(event) {
						let formid = '{{form_id}}';
						let formcount = $(this).attr('data-count');

                        if (!validate_fileupload($('#thumbnail-{{form_id}}-'+formcount).val(), ["jpg","png","jpeg"])) {
                            alert("{{LANG Invalid file format, only jpg, jpeg, png are allowed}}");
                            return false;
                        }
                        let bar = $('#img_upload_progress-{{form_id}}-'+formcount);
                        let percent = $('#img_upload_progress_bar-{{form_id}}-'+formcount);
                        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}}-"+formcount)[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}}-'+formcount).html('<img src="' + data.full_thumbnail + '" style="width: 100%">');
                                    $('#song-thumbnail-{{form_id}}-'+formcount).val(data.thumbnail);
                                } else if (data.status == 400) {
                                    alert(data.message);
                                } else {
                                    alert("{{LANG Error found while uploading your image, please try again later.}}");
                                }
                            }
                        });

                        event.preventDefault();
                        event.stopImmediatePropagation();
                        return false;

                    });

                    $('#upload-audio-{{form_id}}').submit(function(event) {
                        var allowed = [<?php echo ($music->config->ffmpeg_system == "off") ? '"mp3"' : '"mp3","ogg","wav"'?>];
                        object1 = $(".upload-audio-file-{{form_id}}").prop('files');
                        object2 = Object.keys(object1).map(function(e) {
                          return object1[e]
                        })
                        object2.sort(function(a,b) {
                            return a.size - b.size;
                        });

                        for(let i = 0 ; i < object2.length ; i++){
                            var file_size = object2[i].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 = object2[i].name.split('\\').pop();
                                $('#upload-bulk-song-form-{{form_id}} .upload').addClass('hidden');

                                let clone = $('#upload-form-{{form_id}}').clone();
                                clone.removeClass('hidden').addClass('no-flex');

                                clone.find('#song-form-{{form_id}}').addClass('bulk-sound-upload');
                                clone.find('#song-form-{{form_id}}').attr('data-id', i);
                                clone.find('#song-form-{{form_id}}').attr('id', 'song-form-{{form_id}}-' + i);
                                clone.find('#title-{{form_id}}').attr('value',filename).attr('id', 'title-{{form_id}}-' + i);

                                clone.find('#output-song-errors-{{form_id}}').attr('value',filename).attr('id', 'output-song-errors-{{form_id}}-' + i);
                                clone.find('#img_upload_progress-{{form_id}}').attr('id', 'img_upload_progress-{{form_id}}-' + i);
                                clone.find('#img_upload_progress_bar-{{form_id}}').attr('id', 'img_upload_progress_bar-{{form_id}}-' + i);

                                clone.find('#remove-album-song-{{form_id}}').attr('data-id', i);
                                clone.find('#remove-album-song-{{form_id}}').after('<div id="progress-'+i+'" class="progress hidden" style="width: 93%;margin: 0 auto;margin-bottom: 10px;"><div id="progress-bar-'+i+'" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>');

                                clone.find('#remove-album-song-{{form_id}}').attr('id', 'remove-album-song-{{form_id}}-' + i);

                                clone.find('#btn-song-submit-{{form_id}}').attr('data-count', i).attr('id', 'btn-song-submit-{{form_id}}-' + i);

                                clone.find('#song-location-{{form_id}}').attr('id', 'song-location-{{form_id}}-' + i);
                                clone.find('#song-thumbnail-{{form_id}}').attr('value',$('#song-thumbnail').attr('value')).attr('id', 'song-thumbnail-{{form_id}}-' + i);
                                clone.find('#upload-image-content-{{form_id}}').html('<img src="'+$('#song-thumbnail').attr('value')+'" style="width: 100%;">').attr('id', 'upload-image-content-{{form_id}}-' + i);

                                clone.find('.upload-song-image').attr('onclick',"document.getElementById('thumbnail-{{form_id}}-"+i+"').click(); return false");

                                clone.find('#thumbnail-form-{{form_id}}').attr('id', 'thumbnail-form-{{form_id}}-' + i);
                                clone.find('#thumbnail-{{form_id}}').attr('id', 'thumbnail-{{form_id}}-' + i).attr('data-formid','{{form_id}}').attr('data-count', i);

                                clone.find('#tags-{{form_id}}').attr('id', 'tags-{{form_id}}-' + i);


                                $('#upload-form').after(clone.html() + '<br>');


                                $('#tags-{{form_id}}-' + i).tagit({
                                    allowSpaces: true
                                });

                                var formData = new FormData();
                                var reader = new FileReader();
                                reader.onload = function(e) {};
                                reader.readAsDataURL(object2[i]);
                                formData.append("audio", object2[i],object2[0].value );

                                var constructRequest = (function() {
                                    return function() {
                                        var local_id = i;
                                        $.ajax({
                                            beforeSend: function() {
                                                $('#progress-'+local_id).removeClass('hidden');
                                                $('#progress-bar-'+local_id).width('0%');
                                                $('#progress-bar-'+local_id).show();
                                            },
                                            xhr: function() {
                                                var xhr = new window.XMLHttpRequest();
                                                xhr.upload.addEventListener("progress", function(evt){
                                                    if (evt.lengthComputable) {
                                                        var percentComplete = evt.loaded / evt.total;
                                                        percentComplete = parseInt(percentComplete * 100);
                                                        $('#progress-bar-'+local_id).width(percentComplete + '%');
                                                        if (percentComplete === 100) {

                                                        }else{
                                                            $('#progress-'+local_id).removeClass('hidden');
                                                        }
                                                    }
                                                }, false);
                                                return xhr;
                                            },
                                            url: '{{CONFIG ajax_url}}/upload-song?hash_id=' + $('.main_session').val(),
                                            type: "POST",
                                            async: true,
                                            data: formData,
                                            cache: false,
                                            contentType: false,
                                            processData: false,
                                            timeout: 60000,
                                            dataType: false,
                                            success: function(result) {
                                                if( result.status == 200 ){

                                                    $('#song-form-{{form_id}}-'+local_id).find('input[name="song-location"]').attr('value',result.file_path);
                                                    $('#song-location-{{form_id}}-' + local_id).val(result.file_path);
                                                    $('#progress-'+local_id).css({'display':'none'});
                                                    $('#progress-'+local_id).addClass('hidden');
                                                    $('#progress-bar-'+local_id).width('0%');

                                                    $('#song-form-{{form_id}}-'+local_id).ajaxForm({
                                                        url: "{{CONFIG ajax_url}}/submit-song?hash_id=" + getHashID(),
                                                        beforeSubmit:  function () {
                                                            $('#output-song-errors-{{form_id}}-'+local_id).removeClass("alert-success").addClass('alert-danger');
                                                            $('#output-song-errors-{{form_id}}-'+local_id).empty();
                                                            $("#btn-song-submit-{{form_id}}-"+local_id).text("{{LANG Please wait..}}");
                                                            $("#btn-song-submit-{{form_id}}-"+local_id).attr("disabled", "true");
                                                        },
                                                        success: function (data) {
                                                            if (data.status == 200) {
                                                                $('html,body').animate({
                                                                    scrollTop: $("#song-form-{{form_id}}-"+local_id).offset().top
                                                                }, 'slow');
                                                                $('#output-song-errors-{{form_id}}-'+local_id).removeClass("alert-danger").addClass('alert-success');
                                                            <?php if ($music->config->ffmpeg_system == "on") { ?>
                                                                    $('#output-song-errors-{{form_id}}-'+local_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}}-'+local_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}}-'+local_id).val() + ' {{LANG successfully uploaded}}');
                                                                            $('#song-form-{{form_id}}-'+local_id).addClass('no-padding-form submitted');
                                                                            publish();
                                                                            $('#song-form-{{form_id}}-'+local_id+' .btn-save-songs').addClass('submitted');
                                                                        }
                                                                    });
                                                                <?php } else { ?>
                                                                    $('#song-form-{{form_id}}-'+local_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}}-'+local_id).val() + ' {{LANG successfully uploaded}}');
                                                                    $('#song-form-{{form_id}}-'+local_id).addClass('no-padding-form submitted');
                                                                    publish();
                                                                    $('#song-form-{{form_id}}-'+local_id+' .btn-save-songs').addClass('submitted');
                                                                <?php } ?>
                                                            } else if (data.status == 400) {
                                                                $("#btn-song-submit-{{form_id}}-"+local_id).removeAttr("disabled");
                                                                $("#btn-song-submit-{{form_id}}-"+local_id).text("{{LANG Publish}}");
                                                                $('#output-song-errors-{{form_id}}-'+local_id).html(data.message);
                                                                $('#btn-publish-song').removeAttr('disabled');
                                                                $('#btn-publish-song').text("{{LANG Publish}}");
                                                                $('html,body').animate({
                                                                    scrollTop: $("#song-form-{{form_id}}-"+local_id).offset().top
                                                                }, 'slow');
                                                            }
                                                        }
                                                    });
                                                }
                                            }
                                        });
                                    }
                                })();

                                constructRequest();


                            }
                        }
                        event.preventDefault();
                    });

                    $('.upload-audio-file-{{form_id}}').on('change', 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();
                    });

                });

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

		</div>
	</div>
</div>