<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>{{LANG Edit ad}}</a>
					</li>
				</ul>
			</div>
			<div class="content upload_music no-flex ds_create_edit_ads_cont">
				<form class="user-ads-settings-form" method="POST">
					<div class="user-ads-settings-alert"></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="alert alert-success ads-settings-alert hidden"></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" value="{{NAME}}">
						</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" value="{{TITLE}}">
						</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" value="{{URL}}">
					</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">{{DESC}}</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" >
								<?php foreach ($countries_name as $country_id => $country_name): ?>
									<?php if (in_array($country_id, $music->audience)): ?>
										<option value="<?php echo($country_id); ?>" selected><?php echo($country_name); ?></option>
									<?php else: ?>
										<option value="<?php echo($country_id); ?>"><?php echo($country_name); ?></option>
									<?php endif ?>
								<?php endforeach; ?>
							</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" value="{{DAY_LIMIT}}" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
						</div>
					</div>
					<div class="last-sett-btn modal-footer">
						<button type="submit" class="btn btn-primary btn-mat" id="submit-btn">{{LANG Save}}</button>
					</div>
				</form>
			</div>
        </div>
    </div>
</div>

<script>
    var __Delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();

	jQuery(document).ready(function($) {
	  $('.selectpicker').selectpicker({});


    $('.user-ads-settings-form').ajaxForm({
      url: '{{CONFIG ajax_url}}/ads/edit?hash_id=' + getHashID(),
      dataType:"json",
      data:{id:"{{ID}}"},
      beforeSend: function() {
        $('#submit-btn').attr('disabled', true).find('span').text("{{LANG Please wait..}}");
      },
      success: function(data) {
        //scrollToTop();
        
        if (data.status == 200){
          $(".user-ads-settings-alert").removeClass('hidden').html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            setTimeout(function () {
                goToAjaxLink('ads');
            }, 1000);
          
        }
        else {
          $('#submit-btn').removeAttr('disabled').find('span').text('{{LANG Save}}');
          $(".user-ads-settings-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
	});
</script>