<div class="ma_page_content" id="container_blog">
    <div class="ma_pc_inner">
        <div class="page_padding">
			<div class="text-center banner_header">
				<div class="circle-1"></div>
				<div class="circle-2"></div>
				<div class="position-relative">
					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M13 2.05V4.07C16.95 4.56 20 7.92 20 12C20 15.21 18.08 18 15.28 19.28L13 17V22H18L16.78 20.78C19.91 19.07 22 15.76 22 12C22 6.82 18.05 2.55 13 2.05M11 2C9.05 2.2 7.2 2.96 5.68 4.21L7.1 5.63C8.23 4.75 9.58 4.2 11 4V2M4.2 5.68C2.96 7.2 2.2 9.05 2 11H4C4.19 9.58 4.75 8.23 5.63 7.1L4.2 5.68M6 8V10H9V11H8C6.9 11 6 11.9 6 13V16H11V14H8V13H9C10.11 13 11 12.11 11 11V10C11 8.9 10.11 8 9 8H6M12 8V13H15V16H17V13H18V11H17V8H15V11H14V8H12M2 13C2.2 14.95 2.97 16.8 4.22 18.32L5.64 16.9C4.76 15.77 4.2 14.42 4 13H2M7.11 18.37L5.68 19.79C7.2 21.03 9.05 21.8 11 22V20C9.58 19.81 8.24 19.25 7.11 18.37Z"></path></svg>
					<h3>{{LANG Create Story}}</h3>
				</div>
			</div>
			
            <div class="content upload_music no-flex ds_create_edit_ads_cont pt-4">
				<form class="user-story-form ds_create_edit_prods" method="POST">
					<div class="row">
						<div class="col-lg-5 offset-lg-1">
							<div class="user-story-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-12 col-form-label" for="url"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path></svg> {{LANG URL}}</label>
								<div class="col-md-12">
									<input type="text" id="url" name="url" class="form-control">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-12 col-form-label" for="who"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"></path></svg> {{LANG Who can see}}</label>
								<div class="col-md-12">
									<select name="who" id="who" class="form-control" onchange="CheckWallet(this)">
										<option value="followers">{{LANG Show to my followers only}}</option>
										<option value="all">{{LANG Show to all users}} <?php echo(!empty($music->config->story_price) && is_numeric($music->config->story_price) && $music->config->story_price > 0 ? $music->config->currency_symbol.$music->config->story_price : '') ?></option>
									</select>
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-12 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 Story Image}}</label>
								<div class="col-md-12 ds_media_file mt-0">
									<span class="btn btn-file image_file" onclick="$('#story-media').trigger('click'); return false;">
										<span id="story-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>
									<input type="file" class="media" id="story-media" name="image" accept="image/*">
								</div>
							</div>
							
							<div class="form-group row mat_input">
								<label class="col-md-12 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="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 Upload Song}}</label>
								<div class="col-md-12 ds_media_file mt-0">
									<span class="btn btn-file image_file" onclick="$('#story-audio').trigger('click'); return false;">
										<span id="story-audio-holder"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" 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"></path></svg></span>
									</span>
									<input type="file" class="audio" id="story-audio" name="audio" accept="<?php if ($music->config->ffmpeg_system == "off") {?>audio/mpeg<?php } else { ?>audio/mpeg,audio/ogg,audio/x-wav<?php } ?>">
									<input type="text" readonly id="audio_name" style="display: none;">
								</div>
							</div>
						</div>
						
						<div class="col-lg-5 offset-lg-1">
							<div class="lightbox-content create-story-preview">
								<div class="story-img">
								</div>
								<div class="wo_story_header">
									<div class="wo_stor_h_info">
										<div class="user-avatar">
											<img src="{{ME avatar}}" alt="">
										</div>
										<div class="wo_s_h_i_r">
											<div class="user-name h5">
												<a href="{{ME url}}" data-load="{{ME username}}">{{ME name}}</a>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="last-sett-btn modal-footer mt-5">
						<button type="submit" class="btn btn-primary btn-mat" id="submit-btn">{{LANG Publish}}</button>
					</div>
				</form>
            </div>
		</div>
    </div>
</div>


<script>
function PayForStory() {
  $(".modal_story_pay_alert").html('');
  id = $('#story_pay_id').val();
  file = $('#story_pay_file').val();
  $.post('{{CONFIG ajax_url}}/story/pay?hash_id=' + getHashID(), {id: id}, function(data, textStatus, xhr) {
    if (data.status == 200) {
      $(".modal_story_pay_alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
      _Delay(function(){
        $('#story_pay').modal('hide');
        $(".modal_story_pay_alert").html('');
        <?php if ($music->config->ffmpeg_system == "on") { ?>
        $('.user-story-alert').html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> {{LANG Please wait, your track is being coverted to mp3 audio file. This might take a few minutes.}}</div>');
        $.post('{{CONFIG ajax_url}}/convert-track', {id: id, type: 'story',file:file}, function(dataSecond, textStatus, xhr) {
          if (dataSecond.status == 200) {
            goToAjaxLink('<?php echo($music->config->discover_land == 1 ? 'discover' : 'feed'); ?>');
          }
        });
        <?php }else{ ?>
          goToAjaxLink('<?php echo($music->config->discover_land == 1 ? 'discover' : 'feed'); ?>');
        <?php } ?>

      },2000);
    }
    else{
      $(".modal_story_pay_alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
    }
  });
}
function CheckWallet(self) {
  if ($(self).val() == 'all') {
    <?php if ($music->user->org_wallet < $music->config->story_price) { ?>
      $(".user-story-alert").html("<div class='alert alert-danger bg-danger'><i class='fa fa-info-circle'></i> {{LANG You don't have enough wallet}} <a href='{{LINK settings/{{ME username}}/wallet}}'>{{LANG Please top up your wallet}}</a></div>");
      $('#submit-btn').attr('disabled', true)
    <?php } ?>
  }
  else{
    $('#submit-btn').removeAttr('disabled')
    $(".user-story-alert").html();
  }
}



$(document).ready(function() {
	$("#story-media").on('change', function() {
	//Get count of selected files
	$("#story-media-holder").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture'>");
	$(".story-img").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture'>");
	});
  $("#story-audio").on('change', function() {
        var allowed = [<?php echo ($music->config->ffmpeg_system == "off") ? '"mp3"' : '"mp3","ogg","wav","opus","oga"'?>];
        var file_size = $("#story-audio").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($('#story-audio').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, opus, oga, wav, and mpeg is allowed")?>");
          return false;
        } else {
          var filename = $('#story-audio').val().split('\\').pop();
          $('#audio_name').slideDown();
          $('#audio_name').val(filename);
        }
  });
});

    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($) {
	  $('.selectpicker').selectpicker({});

    $("#ad-placement").change(function(event) {
      if ($(this).val() == 2) {
        $("#cost").find("option[value='2']").removeAttr('selected').attr('disabled', 'disabled');
      }
      
      else{
        $("#cost").find("option").removeAttr('disabled');
      }
    });

    $('.user-story-form').submit(function(event) {
        var mediafile = HasExtension('#story-media', ['.jpg', '.gif', '.png', '.jpeg']);
        if (!mediafile){
          scrollToTop();
          $('#story-media').val('');
          $(".user-story-alert").html("<div class='alert alert-danger bg-danger'><i class='fa fa-info-circle'></i> {{LANG Media file is invalid. Please select a valid image}}</div>");
          return false;
        }
    });

    $('.user-story-form').ajaxForm({
      url: '{{CONFIG ajax_url}}/story/create?hash_id=' + getHashID(),
      dataType:"json",
      beforeSend: function() {

        var mediafile = $("#story-media").prop('files');
        if( $("#story-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();
                        $("#story-media").val('');
                    },
                    function () {
                        swal.close();
                        $("#story-media").val('');
                    });
                return false;
            }
        }
        if ($("#story-media").val()) {
          $(".user-story-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).find('span').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-story-alert").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        if (data.status == 200){
          $(".user-story-alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            _Delay(function(){
              if (data.show_modal == 'yes') {
                $('#story_pay').modal('show');
                $('#story_pay_id').val(data.story_id);
                $('#story_pay_file').val(data.audio);
              }
              else{
                <?php if ($music->config->ffmpeg_system == "on") { ?>
                $('.user-story-alert').html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> {{LANG Please wait, your track is being coverted to mp3 audio file. This might take a few minutes.}}</div>');
                $.post('{{CONFIG ajax_url}}/convert-track', {id: data.story_id, type: 'story',file:data.audio}, function(dataSecond, textStatus, xhr) {
                  if (dataSecond.status == 200) {
                    goToAjaxLink('<?php echo($music->config->discover_land == 1 ? 'discover' : 'feed'); ?>');
                  }
                });
                <?php }else{ ?>
                  goToAjaxLink('<?php echo($music->config->discover_land == 1 ? 'discover' : 'feed'); ?>');
                <?php } ?>
              }
          },2000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').find('span').text('{{LANG Publish}}');
          $(".user-story-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
	});
</script>