<div class="ma_page_content" id="container_blog">
    <div class="ma_pc_inner">
        <div class="page_padding">
			<div class="ma_tabs">
				<ul class="list-unstyled mb-0">
					<li>
						<a href="{{LINK ads}}" data-load="ads">{{LANG Advertising}}</a>
					</li>
					<li class="active">
						<a href="{{LINK create-ads}}" data-load="create-ads">{{LANG Create ad}}</a>
					</li>
				</ul>
			</div>
            <div class="content upload_music no-flex ds_create_edit_ads_cont">
				<?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { ?>
					<div class="alert alert-warning">{{LANG Your current wallet balance is: 0, please top up your wallet to continue.}} <a href="{{LINK ads}}" data-load="ads">{{LANG Top Up}}</a></div>
				<?php } ?>
				<form class="user-ads-settings-form" method="POST">
					<div class="user-ads-settings-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="row m-0">
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0" for="name"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M17,7H22V17H17V19A1,1 0 0,0 18,20H20V22H17.5C16.95,22 16,21.55 16,21C16,21.55 15.05,22 14.5,22H12V20H14A1,1 0 0,0 15,19V5A1,1 0 0,0 14,4H12V2H14.5C15.05,2 16,2.45 16,3C16,2.45 16.95,2 17.5,2H20V4H18A1,1 0 0,0 17,5V7M2,7H13V9H4V15H13V17H2V7M20,15V9H17V15H20Z"></path></svg> {{LANG name}}</label>
							<input type="text" id="name" name="name" class="form-control" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
						</div>
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0" for="title"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M5,4V7H10.5V19H13.5V7H19V4H5Z"></path></svg> {{LANG title}}</label>  
							<input type="text" id="title" name="title" class="form-control" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
						</div>
					</div>
					<div class="form-group mat_input col-md-12">
						<label class="col-md-12 p-0" for="url"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><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>
						<input type="text" id="url" name="url" class="form-control" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
					</div>
					<div class="form-group mat_input col-md-12">
						<label class="col-md-12 p-0" for="desc"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M13,9H11V7H13M13,17H11V11H13M12,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 description}}</label>
						<textarea name="desc" id="desc" rows="3" class="form-control" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>></textarea>
					</div>
					<div class="row m-0">
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M16 17V19H2V17S2 13 9 13 16 17 16 17M12.5 7.5A3.5 3.5 0 1 0 9 11A3.5 3.5 0 0 0 12.5 7.5M15.94 13A5.32 5.32 0 0 1 18 17V19H22V17S22 13.37 15.94 13M15 4A3.39 3.39 0 0 0 13.07 4.59A5 5 0 0 1 13.07 10.41A3.39 3.39 0 0 0 15 11A3.5 3.5 0 0 0 15 4Z"></path></svg> {{LANG Target Audience}}</label>
							<select class="form-control selectpicker show-menu-arrow show-tick" multiple name="audience-list[]" data-live-search="true" title="{{LANG Target Audience}}" data-actions-box="true" name="audience-list[]" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
								<?php foreach ($countries_name as $country_id => $country_name): ?>
									<option value="<?php echo($country_id); ?>"><?php echo($country_name); ?></option>
								<?php endforeach; ?>
							</select>
						</div>
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0" for="ad-placement"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M13,3V9H21V3M13,21H21V11H13M3,21H11V15H3M3,13H11V3H3V13Z"></path></svg> {{LANG Placement}}</label>  
							<select name="placement" id="ad-placement" class="form-control" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
								<option value="1">{{LANG Show only in track page}}</option>
								<option value="2">{{LANG Show on all pages}}</option>
							</select>
						</div>
					</div>
					<div class="row m-0">
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0" for="cost"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z"></path></svg> {{LANG Pricing}}</label>
							<select name="cost" id="cost" class="form-control">
								<option value="1">{{LANG Pay Per Click}} ({{CURRENCY}} {{CONFIG ad_c_price}})</option>
								<option value="2">{{LANG Pay Per Impression}} ({{CURRENCY}} {{CONFIG ad_v_price}})</option>
							</select>
						</div>
						<div class="form-group mat_input col-md-6">
							<label class="col-md-12 p-0" for="day_limit"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path fill="currentColor" d="M15,4A8,8 0 0,1 23,12A8,8 0 0,1 15,20A8,8 0 0,1 7,12A8,8 0 0,1 15,4M15,18A6,6 0 0,0 21,12A6,6 0 0,0 15,6A6,6 0 0,0 9,12A6,6 0 0,0 15,18M3,12C3,14.61 4.67,16.83 7,17.65V19.74C3.55,18.85 1,15.73 1,12C1,8.27 3.55,5.15 7,4.26V6.35C4.67,7.17 3,9.39 3,12Z"></path></svg> {{LANG Spending limit per day}}</label>  
							<input type="number" id="day_limit" name="day_limit" class="form-control" placeholder="0" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
						</div>
					</div>
					<div class="col-md-12 ds_media_file">
						<span class="btn btn-file" onclick="$('#ad-media').trigger('click'); return false;">
							<span id="ad-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> <b>{{LANG Select Media}}</b>
						</span>
						<input type="file" class="media" id="ad-media" name="media" accept="image/* video/*" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>
					</div>
					<div class="last-sett-btn modal-footer">
						<button type="submit" class="btn btn-primary btn-mat" id="submit-btn" <?php if ($music->user->wallet == '0.00' || $music->user->wallet == '0') { echo 'disabled'; }?>>{{LANG Publish}}</button>
					</div>
				</form>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
	$("#ad-media").on('change', function() {
	//Get count of selected files
	$("#ad-media-holder").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture'>");
	});
});

    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-ads-settings-form').submit(function(event) {
      if ($("#ad-placement").val() == 2 && $("#ad-media").val() != ''){  
        var mediafile = HasExtension('#ad-media', ['.jpg', '.gif', '.png', '.jpeg']);
        if (!mediafile){
          scrollToTop();
          $('#ad-media').val('');
          $(".user-ads-settings-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-ads-settings-form').ajaxForm({
      url: '{{CONFIG ajax_url}}/ads/create?hash_id=' + getHashID(),
      dataType:"json",
      beforeSend: function() {

        var mediafile = $("#ad-media").prop('files');
        if( $("#ad-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();
                        $("#ad-media").val('');
                    },
                    function () {
                        swal.close();
                        $("#ad-media").val('');
                    });
                return false;
            }
        }
        if ($("#ad-media").val()) {
          $(".user-ads-settings-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-ads-settings-alert").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        if (data.status == 200){
          $(".user-ads-settings-alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            _Delay(function(){
            window.location.href = '{{LINK ads}}';
          },2000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').find('span').text('{{LANG Publish}}');
          $(".user-ads-settings-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
	});
</script>