<div class="ma_page_content" id="container_blog">
    <div class="ma_pc_inner">
        <div class="page_padding">
			<h2 class="home_widget_title">
				<span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z"></path></svg></span> {{LANG Create Event}}
			</h2>

            <div class="content upload_music no-flex ds_create_edit_ads_cont pt-4">
				<form class="user-event-form ds_create_edit_prods" method="POST">
					<div class="row">
						<div class="col-lg-8 offset-lg-2">
							<div class="user-event-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-3 col-form-label" for="name"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1M17,12H12V17H17V12Z"></path></svg> {{LANG Event Name}}</label>
								<div class="col-md-9">
									<input type="text" id="name" name="name" class="form-control">
								</div>
							</div>

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

							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="location"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12,2Z"></path></svg> {{LANG Event location}}</label>
								<div class="col-md-9">
									<select name="location" id="location" class="form-control" onchange="ShowLocation(this)">
										<option value="online">{{LANG Online}}</option>
										<option value="real">{{LANG Real Location}}</option>
									</select>
								</div>
							</div>

							<div class="form-group row mat_input online_url">
								<label class="col-md-3 col-form-label" for="online_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-9">
									<input type="text" id="online_url" name="online_url" class="form-control" required>
								</div>
							</div>

							<div class="form-group row mat_input real_address" style="display: none;">
								<label class="col-md-3 col-form-label" for="real_address"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M12,3L2,12H5V20H19V12H22L12,3M12,7.7C14.1,7.7 15.8,9.4 15.8,11.5C15.8,14.5 12,18 12,18C12,18 8.2,14.5 8.2,11.5C8.2,9.4 9.9,7.7 12,7.7M12,10A1.5,1.5 0 0,0 10.5,11.5A1.5,1.5 0 0,0 12,13A1.5,1.5 0 0,0 13.5,11.5A1.5,1.5 0 0,0 12,10Z"></path></svg> {{LANG Address}}</label>
								<div class="col-md-9">
									<textarea name="real_address" id="real_address" rows="3" class="form-control"></textarea>
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="real_address"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z"></path></svg> {{LANG Event Start Date}}</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-6">
											<input type="text" id="start_date" class="start_date" name="start_date" class="form-control" placeholder="{{LANG Date}}">
										</div>
										<div class="col-md-6">
											<input type="text" id="start_time" class="time" name="start_time" class="form-control" placeholder="{{LANG Event Start Time}}">
										</div>
									</div>
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="real_address"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z"></path></svg> {{LANG Event End Date}}</label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-6">
											<input type="text" id="end_date" class="end_date" name="end_date" class="form-control" placeholder="{{LANG Date}}">
										</div>
										<div class="col-md-6">
											<input type="text" id="end_time" class="time" name="end_time" class="form-control" placeholder="{{LANG Event End Time}}">
										</div>
									</div>
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="location"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M15,12H16.5V16.25L19.36,17.94L18.61,19.16L15,17V12M23,16A7,7 0 0,1 16,23C13,23 10.4,21.08 9.42,18.4L8,17.9L2.66,19.97L2.5,20A0.5,0.5 0 0,1 2,19.5V4.38C2,4.15 2.15,3.97 2.36,3.9L8,2L14,4.1L19.34,2H19.5A0.5,0.5 0 0,1 20,2.5V10.25C21.81,11.5 23,13.62 23,16M9,16C9,12.83 11.11,10.15 14,9.29V6.11L8,4V15.89L9,16.24C9,16.16 9,16.08 9,16M16,11A5,5 0 0,0 11,16A5,5 0 0,0 16,21A5,5 0 0,0 21,16A5,5 0 0,0 16,11Z"></path></svg> {{LANG Timezone}}</label>
								<div class="col-md-9">
									<select name="timezone" id="timezone" class="form-control">
										<?php foreach ($music->timezones as $key => $value) { ?>
											<option value="<?php echo($key) ?>"><?php echo($value) ?></option>
										<?php } ?>
									</select>
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 col-form-label" for="location"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="17"><path fill="currentColor" d="M13,8.5H11V6.5H13V8.5M13,13H11V11H13V13M13,17.5H11V15.5H13V17.5M22,10V6C22,4.89 21.1,4 20,4H4A2,2 0 0,0 2,6V10C3.11,10 4,10.9 4,12A2,2 0 0,1 2,14V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V14A2,2 0 0,1 20,12A2,2 0 0,1 22,10Z"></path></svg> {{LANG Sell Tickets}}</label>
								<div class="col-md-9">
									<select name="sell_tickets" id="sell_tickets" class="form-control" onchange="ShowTickets(this)">
										<option value="no">{{LANG No}}</option>
										<option value="yes">{{LANG Yes}}</option>
									</select>
								</div>
							</div>

							<div class="form-group row mat_input sell_tickets"  style="display: none;">
								<label class="col-md-3 col-form-label"></label>
								<div class="col-md-9">
									<div class="row">
										<div class="col-md-6">
											<input type="number" id="available_tickets" name="available_tickets" class="form-control" placeholder="{{LANG Tickets available(Total tickets available for this event)}}">
										</div>
										<div class="col-md-6">
											<input type="number" id="ticket_price" name="ticket_price" class="form-control" placeholder="{{LANG Ticket Price}}">
										</div>
									</div>
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 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 Event Cover}}</label>
								<div class="col-md-9 ds_media_file mt-0">
									<span class="btn btn-file image_file" onclick="$('#event-media').trigger('click'); return false;">
										<span id="event-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="event-media" name="image" accept="image/*">
								</div>
							</div>

							<div class="form-group row mat_input">
								<label class="col-md-3 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="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z"></path></svg> {{LANG Event Video/Trailer}}</label>
								<div class="col-md-9 ds_media_file mt-0">
									<span class="btn btn-file image_file" onclick="$('#event-video').trigger('click'); return false;">
										<span id="event-video-holder"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z"></path></svg></span>
									</span>
									<input type="file" class="video" id="event-video" name="video" accept="video/*">
									<input type="text" readonly id="video_name" style="display: none;">
								</div>
							</div>

						</div>
					</div>

					<div class="last-sett-btn modal-footer">
						<button type="submit" class="btn btn-primary btn-mat" id="submit-btn">{{LANG Publish}}</button>
					</div>
				</form>
            </div>
        </div>
    </div>
</div>
<script>
function ShowTickets(self) {
  if ($(self).val() == 'no') {
    $('.sell_tickets').slideUp();
    $('#available_tickets').removeAttr('required');
    $('#ticket_price').removeAttr('required');
  }
  else{
    $('.sell_tickets').slideDown();
    $('#available_tickets').attr('required','true');
    $('#ticket_price').attr('required','true');
  }
}
function ShowLocation(self) {
  if ($(self).val() == 'online') {
    $('.online_url').slideDown();
    $('#online_url').attr('required','true');
    $('.real_address').slideUp();
    $('#real_address').removeAttr('required');
  }
  else{
    $('.online_url').slideUp();
    $('.real_address').slideDown();
    $('#real_address').attr('required','true');
    $('#online_url').removeAttr('required');
  }
}



$(document).ready(function() {
  $( ".start_date" ).datepicker({ dateFormat: 'yy-mm-dd', minDate: 'today'});
  $( ".end_date" ).datepicker({ dateFormat: 'yy-mm-dd', minDate: '+1day'});
  $( ".time" ).timepicker();
	$("#event-media").on('change', function() {
	//Get count of selected files
	$("#event-media-holder").html("<img src='" + window.URL.createObjectURL(this.files[0]) + "' alt='Picture'>");
	});
  $("#event-video").on('change', function() {
        var file_size = $("#event-video").prop('files')[0].size;
        if (file_size > <?php echo $music->config->user_max_upload?>) {
          alert("Your File is too large.");
          return false;
        } else {
          var filename = $('#event-video').val().split('\\').pop();
          $('#video_name').slideDown();
          $('#video_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-event-form').submit(function(event) {
        var mediafile = HasExtension('#event-media', ['.jpg', '.gif', '.png', '.jpeg']);
        if (!mediafile){
          scrollToTop();
          $('#event-media').val('');
          $(".user-event-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-event-form').ajaxForm({
      url: '{{CONFIG ajax_url}}/event/create?hash_id=' + getHashID(),
      dataType:"json",
      beforeSend: function() {

        var mediafile = $("#event-media").prop('files');
        if( $("#event-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();
                        $("#event-media").val('');
                    },
                    function () {
                        swal.close();
                        $("#event-media").val('');
                    });
                return false;
            }
        }
        if ($("#event-media").val()) {
          $(".user-event-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).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-event-alert").empty();
          }
      },
      success: function(data) {
        scrollToTop();
        $('#submit-btn').removeAttr('disabled').text('{{LANG Publish}}');
        if (data.status == 200){
          $(".user-event-alert").html('<div class="alert alert-success bg-success"><i class="fa fa-check"></i> '+
            data.message
            +'</div>');
            _Delay(function(){
            /*window.location.href = data.url;*/
            goToAjaxLink("feed");
          },2000);

        }
        else {
          $('#submit-btn').removeAttr('disabled').text('{{LANG Publish}}');
          $(".user-event-alert").html('<div class="alert alert-danger bg-danger"><i class="fa fa-info-circle"></i> '+
            data.message
            +'</div>');
        }
      }
    });
	});
</script>
