<div class="ma_page_content">
	<div class="ma_pc_inner">
		<div class="artist_profile event_profile">
			<!-- Artist Profile -->
				<div class="artist_header">
					<div class="artist_cover">
						<?php if ($music->userData->owner == true) {?>
						<div class="edit_cover">
							<form action="" method="POST" id="event-change-cover-form">
								<span class="btn-file" id="change-cover-icon">
									<span class="icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>
									</span>
									<input type="file" name="image" id="event-cover" accept="image/x-png, image/jpeg">
								</span>
								<input type="hidden" id="event_id" name="event_id" value="{{ID}}">
						    </form>
						</div>
						<?php } ?>
						<div class="profileBox_gradient"></div>
						<div class="event_cover_image">
							<img src="{{IMAGE}}" alt="User Cover" id="cover">
						</div>
					</div>
					<div class="container">
						<div class="content artist_user_info d-block">
							<div class="d-flex align-items-start">
								<div class="short_start_dt position-relative">
									<b><?php echo date('d',strtotime(date($music->event->end_date))); ?></b>
									<p><?php echo date('M',strtotime(date($music->event->end_date))); ?></p>
								</div>

								<div class="info_container">
									<h4>{{NAME}}</h4>
									<div class="mt-2">
										<svg xmlns="http://www.w3.org/2000/svg" class="mr-1" opacity="0.5" width="22" height="22" viewBox="0 0 24 24"><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" /></svg> <span class="event-time"><span><?php echo $music->event->start_date; ?> <b>(<?php echo date('H:i',strtotime($music->event->start_time)); ?>)</b></span>&nbsp;&nbsp;•&nbsp;&nbsp;<span><?php echo $music->event->end_date; ?> <b>(<?php echo date('H:i',strtotime($music->event->end_time)); ?>)</b></span></span>
									</div>
									<div class="mt-2">
										<svg xmlns="http://www.w3.org/2000/svg" class="mr-1" opacity="0.5" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" /></svg> <?php echo $music->event->going; ?> {{LANG Joined people}}
									</div>
									<?php if (!empty($music->event->available_tickets)) { ?>
										<div class="mt-2">
											<svg xmlns="http://www.w3.org/2000/svg" class="mr-1" opacity="0.5" width="22" height="22" viewBox="0 0 24 24"><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" /></svg> <?php echo $music->event->available_tickets; ?> {{LANG Available Tickets}}
										</div>
									<?php } ?>
									<div class="mt-2">
										<svg xmlns="http://www.w3.org/2000/svg" class="mr-1" opacity="0.5" width="22" height="22" viewBox="0 0 24 24"><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" /></svg> {{LANG Location}}: <?php if (!empty($music->event->online_url)) { ?>
												<a href="<?php echo($music->event->online_url) ?>"><?php echo($music->event->online_url) ?></a>
											<?php }else{
												echo $music->event->real_address;
											} ?>
									</div>
									
									<div class="ap_options view_event_btns">
										<div class="clearfix"></div>
										<?php if (IS_LOGGED && $music->event->user_data->id != $music->user->id) { ?>
											<span id="going-{{ID}}">
												<?php if ($music->is_joined > 0) { ?>
													<button type="button" onclick="JoinEvent('{{ID}}',this,'unjoin')" class="btn btn-primary btn-mat">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M0.41,13.41L6,19L7.41,17.58L1.83,12M22.24,5.58L11.66,16.17L7.5,12L6.07,13.41L11.66,19L23.66,7M18,7L16.59,5.58L10.24,11.93L11.66,13.34L18,7Z"></path></svg> <span class="button-text"> {{LANG Joined}}</span>
													</button>
												<?php }else{ ?>
													<button type="button" onclick="JoinEvent('{{ID}}',this,'join')" class="btn btn-primary btn-mat">
														<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.74,11.72C11.21,12.95 11.16,14.23 9.75,14.74C6.85,15.81 6.2,13 6.16,12.86L10.74,11.72M5.71,10.91L10.03,9.84C9.84,8.79 10.13,7.74 10.13,6.5C10.13,4.82 8.8,1.53 6.68,2.06C4.26,2.66 3.91,5.35 4,6.65C4.12,7.95 5.64,10.73 5.71,10.91M17.85,19.85C17.82,20 17.16,22.8 14.26,21.74C12.86,21.22 12.8,19.94 13.27,18.71L17.85,19.85M20,13.65C20.1,12.35 19.76,9.65 17.33,9.05C15.22,8.5 13.89,11.81 13.89,13.5C13.89,14.73 14.17,15.78 14,16.83L18.3,17.9C18.38,17.72 19.89,14.94 20,13.65Z"></path></svg> <span class="button-text"> {{LANG Join}}</span>
													</button>
												<?php } ?>
											</span>
											<?php if (!empty($music->event->ticket_price) && $music->event->ticket_price > 0 && !empty($music->event->available_tickets)) { ?>
												&nbsp;&nbsp;&nbsp;<button type="button" onclick="BuyTicket('{{ID}}',this,'join','<?php echo($music->event->ticket_price) ?>','hide','<?php echo($music->event->available_tickets) ?>','{{IMAGE}}')" class="btn btn-default btn-mat">
													<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><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> <span class="button-text"> {{LANG Buy a ticket}} {{CONFIG currency_symbol}}<?php echo($music->event->ticket_price) ?></span>
												</button>
											<?php } ?>
										<?php } ?>
										
										<?php if ($music->userData->owner == true || isAdmin()) {?>
											<a href="<?php echo($music->event->edit_url) ?>"  data-load="<?php echo($music->event->edit_data_load) ?>" class="btn btn-mat btn-primary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"></path></svg> {{LANG Edit Event}}</a>
										<?php } ?>
										<?php if (!empty($music->event->video) || !empty($music->event->video_4096) || !empty($music->event->video_2048) || !empty($music->event->video_1080) || !empty($music->event->video_720) || !empty($music->event->video_480) || !empty($music->event->video_360) || !empty($music->event->video_240)) {?>
											&nbsp;&nbsp;&nbsp;<button class="btn btn-mat" onclick="ViewTrailer();"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17,10.5L21,6.5V17.5L17,13.5V17A1,1 0 0,1 16,18H4A1,1 0 0,1 3,17V7A1,1 0 0,1 4,6H16A1,1 0 0,1 17,7V10.5M14,16V15C14,13.67 11.33,13 10,13C8.67,13 6,13.67 6,15V16H14M10,8A2,2 0 0,0 8,10A2,2 0 0,0 10,12A2,2 0 0,0 12,10A2,2 0 0,0 10,8Z"></path></svg> {{LANG View Trailer}}</button>
										<?php } ?>
									</div>
								</div>
							</div>
							
							<hr class="my-4">
							
							<div class="row">
								<div class="col-lg-9">
									<div class="feed_post_block">
										<?php echo $music->event->desc; ?>
									</div>
								</div>
								<div class="col-lg-3">
									<div>
										<ul class="d-flex align-items-center justify-content-around event_cdown mb-0">
											<li><span id="days"></span>days</li>
											<li><span id="hours"></span>Hours</li>
											<li><span id="minutes"></span>Minutes</li>
											<li><span id="seconds"></span>Seconds</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			<!-- End Artist Profile -->
		</div>
	</div>
	<input type="hidden" id="user-id" name="user-id" value="{{USER id}}">
</div>
<div class="modal fade" id="video-event" tabindex="-1" role="dialog" aria-labelledby="video-event" aria-hidden="true" data-id="0">
	<div class="modal-dialog mat_box" role="document">
		<div class="modal-content">
			<div class="modal-header">
			</div>
			<div class="modal-body">
				<video id="my_video_<?php echo $music->event->id; ?>">
					<?php if (!empty($music->event->video_4096)) { ?>
	               <source src="<?php echo($music->event->video_4096) ?>" type="video/mp4" data-quality="4K" title='4K' label='4K' res='4096' size='4096'>
	               <?php } ?>
					<?php if (!empty($music->event->video_2048)) { ?>
	               <source src="<?php echo($music->event->video_2048) ?>" type="video/mp4" data-quality="2K" title='2K' label='2K' res='2048' size='2048'>
	               <?php } ?>
					<?php if (!empty($music->event->video_1080)) { ?>
	               <source src="<?php echo($music->event->video_1080) ?>" type="video/mp4" data-quality="1080p" title='1080p' label='1080p' res='1080' size='1080'>
	               <?php } ?>
					<?php if (!empty($music->event->video_720)) { ?>
	               <source src="<?php echo($music->event->video_720) ?>" type="video/mp4" data-quality="720p" title='720p' label='720p' res='720' size='720'>
	               <?php } ?>
					<?php if (!empty($music->event->video_480)) { ?>
	               <source src="<?php echo($music->event->video_480) ?>" type="video/mp4" data-quality="480p" title='480p' label='480p' res='480' size='480'>
	               <?php } ?>
					<?php if (!empty($music->event->video_360)) { ?>
	               <source src="<?php echo($music->event->video_360) ?>" type="video/mp4" data-quality="360p" title='360p' label='360p' res='360' size='360'>
	               <?php } ?>
					<?php if (!empty($music->event->video_240)) { ?>
	               <source src="<?php echo($music->event->video_240) ?>" type="video/mp4" data-quality="240p" title='240p' label='240p' res='240' size='240'>
	               <?php } ?>
	               <?php if (empty($music->event->video_4096) && empty($music->event->video_2048) && empty($music->event->video_1080) && empty($music->event->video_720) && empty($music->event->video_480) && empty($music->event->video_360) && empty($music->event->video_240)) { ?>
	               	<source src="<?php echo $music->event->video; ?>" type="video/mp4">
	               <?php } ?>
					
				</video>
			</div>	
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" onclick="StopEventVideo()">{{LANG Cancel}}</button>
			</div>
		</div>
	</div>
</div>
<script>
var loading_icon = '<svg width="24px"  height="24px"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-dual-ring" style="background: none;"><circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.stroke}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="40" stroke-width="8" stroke="#28292f" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(308.458 50 50)"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="0.7s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>';
var camera_icon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"></path></svg>';
$(document).ready(function() { 
	$('#event-change-cover-form').ajaxForm({ 
  	url: "{{CONFIG ajax_url}}/event/edit_cover?hash_id=" + getHashID(),
      beforeSubmit:  function (arr, form, options) {
      	$('.change-cover-icon .icon').html(loading_icon);
      }, 
      success: function (data) {
      	if (data.status == 200) {
      		$('.event_cover_image').html('<img src="'+data.img+'" alt="User Cover" id="cover">');
      	}
      	else{
      		$('#ShowAlert').find('.ShowAlertText').html('<div class="alert alert-danger">'+data.message+'</div>');
      		$('#ShowAlert').modal('show');
      	}
      	$('.change-cover-icon .icon').html(camera_icon);
      }
  });
  $(document).on('change', '#event-cover', function(event) {
		$("#event-change-cover-form").submit();
	});
});
	<?php $time = time(); ?>
const player_<?php echo $music->event->id.'_'.$time; ?> = new Plyr('#my_video_<?php echo $music->event->id; ?>', {
      quality:{ default: 4096, options: [<?php if (!empty($music->event->video_4096)) { ?> 4096 ,<?php } ?><?php if (!empty($music->event->video_2048)) { ?> 2048 ,<?php } ?><?php if (!empty($music->event->video_1080)) { ?> 1080 ,<?php } ?><?php if (!empty($music->event->video_720)) { ?> 720 ,<?php } ?><?php if (!empty($music->event->video_480)) { ?> 480 ,<?php } ?><?php if (!empty($music->event->video_360)) { ?> 360 ,<?php } ?><?php if (!empty($music->event->video_240)) { ?> 240 <?php } ?>] }
   });
function StopEventVideo() {
	player_<?php echo $music->event->id.'_'.$time; ?>.stop();
}
function ViewTrailer() {
	$('#video-event').modal('show');
}
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('<?php echo date("m/d/y",strtotime($music->event->start_date_js)) . ' ' . date('H:i',strtotime($music->event->start_time)) ?>').getTime(),
x = setInterval(function() {

  let now = new Date().getTime(),
      distance = countDown - now;

  document.getElementById('days').innerHTML = Math.floor(distance / (day)),
    document.getElementById('hours').innerHTML = Math.floor((distance % (day)) / (hour)),
    document.getElementById('minutes').innerHTML = Math.floor((distance % (hour)) / (minute)),
    document.getElementById('seconds').innerHTML = Math.floor((distance % (minute)) / second);
  
  //do something later when date is reached
  if (distance < 0) {
   clearInterval(x);
    $('.event_cdown').html('');
  }

}, second)
</script>