@extends('frontend.layouts.app')
@section('title')
	{{translate('Performance Detail')}}
@endsection
@section('content')
<div class="pageMainLayout__wr performanceDetailPage">
	<div class="addsSpace__wr leftSpace__wr">
		<a href="javascript:void(0);">
			<img src="{{asset('assets/frontend/images/inner-layout-adds-dummy-bg.png')}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
		</a>
	</div>
	<div class="pageInnerLayout__wr">
		<section class="perfomanceDetailParentSec__wr">
			<div class="perDetailBannerWrapSec__wr">
				<picture class="perDetailVenueBg__wr">
					@if(!empty($performance_detail->venue_data->image))
						<img src="{{asset('uploads/venues/' . $performance_detail->venue_data->image)}}" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="621" height="244">
					@else
						<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="621" height="244">
					@endif
				</picture>
				<div class="perDetailGalleryWrap__wr">
					<picture class="perDetailPoster__wr">
						@if(!empty($performance_detail->image))
							<img src="{{asset('uploads/performances/' . $performance_detail->image)}}" loading="lazy" class="img-fluid" alt="performance-detail-banner-poster-bg" title="performance-detail-banner-poster-bg" width="277" height="244">
						@else
							<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="621" height="244">
						@endif
					</picture>
					<div class="perDetailGalleryPicWrap__wr">
						<picture class="perDetailGalleryPic__wr">
							<img src="{{asset('assets/frontend/images/gallery-slider-dummy-bg.jpg')}}" loading="lazy" class="img-fluid" alt="performance-gallery-image" title="performance-gallery-image" width="136" height="85">
						</picture>
						<picture class="perDetailGalleryPic__wr">
							<img src="{{asset('assets/frontend/images/gallery-slider-dummy-bg.jpg')}}" loading="lazy" class="img-fluid" alt="performance-gallery-image" title="performance-gallery-image" width="136" height="85">
						</picture>
					</div>
				</div>
			</div>
			<div class="proDetailShareWrapSec__wr">
				<div class="col-md-6">
					@if($performance_detail->featured == 1)
						<a class="itemFeatured__wr">{{translate('Featured')}}</a>
					@endif
				</div>
				<div class="shareInfoWrap__wr">
					<a href="javascript:void(0);" class="itemShare__wr"><i class="fa-light fa-share-nodes"></i></a>
					<a href="javascript:void(0)" class="itemFavourate__wr mr-3" id="heart_icon">
						@if($user_fav !== NULL)	
							@if($user_fav->status == 1)
								<i class="fa-solid fa-heart" style="color: #ab1b1b"></i>
							@else
								<i class="fa-light fa-heart" style="color: #ab1b1b"></i>
							@endif
						@else
							<i class="fa-light fa-heart" style="color: #ab1b1b"></i>
						@endif
					</a>
					<div class="itemFollower__wr">
						<i class="fas fa-user"></i>
						<span id="like_count">{{$performance_likes . ' Followers'}}</span>
					</div>
				</div>
			</div>
			<div class="perfDetailDesDataWrapSec__wr">
				<div class="perfDesDataWrap__wr">
					<picture class="perfDetailMainPoster__wr">
						@if(!empty($performance_detail->image))
							<img src="{{asset('uploads/performances/' . $performance_detail->image)}}" loading="lazy" class="img-fluid" alt="performance-detail-main-poster-bg" title="performance-detail-main-poster-bg" width="183" height="254">
						@else
							<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="621" height="244">
						@endif
					</picture>
					<div class="perfDesTextWrap__wr">
						<p class="title__wr">{{{translate(ucwords($performance_detail->title))}}}</p>
						<p class="artistGroup__wr">{{translate("Artist/Group:")}}
							<span class="labelTitle__wr">{{translate(ucwords($performance_detail->artist_data->stage_name))}}</span>
						</p>
						<p class="venueArea__wr">{{translate(ucwords('Venue/Area: ' . $performance_detail->venue_data->name))}}</p>
						<p class="address__wr">City/Address: {{$performance_detail->venue_data->address}}</p>
						@if(!empty($performance_detail->description))
							<p>{{translate(ucwords($performance_detail->description))}}</p>
						@else
							<p>{{translate('Description Not Available')}}</p>
						@endif
						<a href="{{route('artist.detail', $performance_detail->artist_id)}}" target="_blank" class="profilePicWrap__wr">
							<span class="profilePic__wr">
								@if($performance_detail->artist_data->image == !NULL)
									<img src="{{asset('uploads/artists/' . $performance_detail->artist_data->image)}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="40" height="40">
								@else
									<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="40" height="40">
								@endif
							</span>
							<span class="labelTitle__wr">{{translate('View Artist Profile')}}</span>
						</a>
						<div class="tagsListWrap__wr">
							<p class="labelTitle__wr">{{translate('Tags:')}}</p>
							<ul>
								<li><a href="javascript:void(0);">{{translate(ucwords($performance_category_names))}}</a></li>
								<li><a href="javascript:void(0);">{{translate(ucwords($performance_detail->artist_data->name))}}</a></li>
								<li><a href="javascript:void(0);">{{translate(ucwords($performance_detail->artist_data->surname))}}</a></li>
								<li><a href="javascript:void(0);">{{translate(ucwords($performance_detail->venue_data->name))}}</a></li>
								<li><a href="javascript:void(0);">{{translate(ucwords($performance_detail->artist_data->stage_name))}}</a></li>
							</ul>
						</div>
					</div>
				</div>
				@php
					$today = Carbon\Carbon::now();
					$today->setTimezone('Asia/Kolkata');
					$date = $today->format('Y-m-d');
					$current_time = $today->format('h:i:s a');
					$start_datetime = new Carbon\Carbon($performance_detail->start_date .' '. $performance_detail->start_time);
					$end_datetime = new Carbon\Carbon($performance_detail->end_date .' '. $performance_detail->end_time);
					$current_datetime = new Carbon\Carbon($date .' '. $current_time);	
				@endphp
				<div class="perfDateTimeDataWrap__wr">
					@if($current_datetime >= $start_datetime && $current_datetime < $end_datetime)
						<span class="statusData__wr">{{translate('Live')}}</span>
					@endif
					<div class="dateTimeDataWrap__wr">
						<p class="labelTitle__wr">{{translate('Date and time:')}}</p>
						<p class="date__wr">{{date('l, F, d, Y', strtotime($performance_detail->start_date))}}</p>
						<p class="time__wr">{{date('h:i A', strtotime($performance_detail->start_time))}}</p>
						<p class="timeZone__wr">{{translate('United Arab Emirate Time')}}</p>
					</div>
					<div class="locationAddressDataWrap__wr">
						<p class="labelTitle__wr">Location:</p>
						<p>{{$performance_detail->venue_data->address}}</p>
					</div>
					<a href="http://maps.google.co.uk/maps?q={{$performance_detail->venue_data->latitude . ',' . $performance_detail->venue_data->longitude}}" target="_blank" class="viewMapLink">{{translate('View Map')}}</a>
				</div>
			</div>
			<div class="perfDetailAboutWrapSec__wr">
				<div class="perfAboutDataWrap__wr">
					<p class="abtTitle__wr">{{translate('About this performance: ')}}</p>
					<p>{{translate(ucwords($performance_detail->description ?? " Description Not Availaible"))}}</p>
				</div>
				<div class="perfSocialInfoDataWrap__wr">
					<div class="resvationBtn__wr">{{translate('Make a reservation')}}</div>
					<ul class="perfSocialInfoDataWrap__wr">
						<li>
							<a href="tell:{{$performance_detail->venue_data->phone_number}}" class="callInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/call-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->phone_number}}</span>
							</a>
						</li>
						@if($performance_detail->venue_data->whatsapp_number !== NULL)
						<li>
							<a href="https://wa.me/{{$performance_detail->venue_data->whatsapp_number}}" target="_blank" class="whatsappInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/whatsapp-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->whatsapp_number}}</span>
							</a>
						</li>
						@endif
						<li>
							<a href="mailto:{{$performance_detail->venue_data->email}}" class="mailInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/mail-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->email}}</span>
							</a>
						</li>
						@if($performance_detail->venue_data->facebook_id !== NULL)
						<li>
							<a href="https://www.facebook.com/{{$performance_detail->venue_data->facebook_id}}" target="_blank" class="facebookInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/facebook-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->facebook_id}}</span>
							</a>
						</li>
						@endif
						@if($performance_detail->venue_data->instagram_id !== NULL)
						<li>
							<a href="https://www.instagram.com/{{$performance_detail->venue_data->instagram_id}}" target="_blank" class="instaInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/instagram-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->instagram_id}}</span>
							</a>
						</li>
						@endif
						@if($performance_detail->venue_data->twitter_id !== NULL)
						<li>
							<a href="https://x.com/{{$performance_detail->venue_data->twitter_id}}" target="_blank" class="twitterInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/twitter-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->twitter_id}}</span>
							</a>
						</li>
						@endif
						@if($performance_detail->venue_data->website !== NULL)
						<li>
							<a href="https://{{$performance_detail->venue_data->website}}" target="_blank" class="webInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/web-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$performance_detail->venue_data->website}}</span>
							</a>
						</li>
						@endif
					</ul>
					<a href="{{route('venue.detail', $performance_detail->venue_data->id)}}" class="venueDetailLink__wr">{{translate('View Venue Profile')}}</a>
				</div>
			</div>
			<div class="perfDetailMapLocationSec__wr">
				<div name="map" id="map" class="gmaps"></div>
				<div class="perfDetailLocationWrap__wr">
					<p class="eventTitle__wr">{{translate(ucwords($performance_detail->venue_data->name))}}</p>
					<p class="labelTitle__wr">{{translate('Location')}}</p>
					<p class="adress__wr">{{translate(ucwords($performance_detail->venue_data->address))}}</p>
					<a href="http://maps.google.co.uk/maps?q={{$performance_detail->venue_data->latitude . ',' . $performance_detail->venue_data->longitude}}" target="_blank" class="locateBtn__wr"><i class="fa-solid fa-location-dot"></i>{{translate('Locate Now!')}}</a>
				</div>
			</div>
			<div class="perfDetailUpliveWrapSec__wr">
				<div class="secTitleParent__wr">
					<p class="secTitle__wr">{{translate('Have you been here? Share your experience through UpLive')}}.</p>
					<a href="javascript:void(0);" class="uploadBtn__wr">{{translate('Upload Photos/Videos')}}</a>
				</div>
				<div class="owl-carousel owl-theme upliveGallerySlider">
					@foreach ($live_performances as $item)
						@php
							$today = Carbon\Carbon::now();
							$today->setTimezone('Asia/Kolkata');
							$date = $today->format('Y-m-d');
							$current_time = $today->format('h:i:s a');
							$start_datetime = new Carbon\Carbon($item->start_date .' '. $item->start_time);
							$end_datetime = new Carbon\Carbon($item->end_date .' '. $item->end_time);
							$current_datetime = new Carbon\Carbon($date .' '. $current_time);	
						@endphp
						@if($current_datetime >= $start_datetime && $current_datetime < $end_datetime)
						<div class="itemWrap__wr">
							<div class="itemContentWrap__wr">
								<a href="{{route('artist.detail', $item->artist_data->id)}}" target="_blank" class="profileInfoWrap__wr">
									<span class="profilePic__wr">
									@if(!empty($item->artist_data->image))
                                        <img src="{{asset('uploads/artists/' . $item->artist_data->image)}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="31" height="31"> 
                                    @else
                                        <img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="31" height="31">
                                    @endif
									</span>
									<span class="labelTitle__wr">{{translate('Live Artist Fan')}}</span>
								</a>
								<a href="{{route('performance.detail', $item->id)}}">
									<picture class="itemImage__wr">
										<img src="{{asset('uploads/performances/' . $item->image)}}" loading="lazy" class="img-fluid" alt="uplive-gallery-bg" title="uplive-gallery-bg" width="" height="">
									</picture>
								</a>
							</div>
						</div>
						@endif
					@endforeach
				</div>
			</div>
		</section>
		<section class="eventListSec__wr moreEventPerformance__wr">
			<div class="secTitleParent__wr centered__wr">
				<p class="secTitle__wr">{{translate('More Upcoming Performance')}}</p>
			</div>
			<div class="gridRowWrapp__wr">
				@foreach ($random_performances as $item)
				<div class="col-xl-4 col-lg-4 col-md-6 col-sm-6 col-12 mb-4">
					<div class="itemWrap__wr">
						<a href="{{route('performance.detail', $item->id)}}" target="_blank">
							<div class="itemBckgrndWrap__wr">
								<picture class="venueBg__wr">
									<img src="{{asset('uploads/performances/' . $item->image)}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
								</picture>
							</div>
							<div class="itemContentWrap__wr">
								<picture class="proFilePic__wr">
									@if(!empty($item->artist_data->image))
										<img src="{{asset('uploads/artists/' . $item->artist_data->image)}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
									@else
										<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
									@endif
								</picture>
								<span class="itemDate__wr">{{date('D, M d,', strtotime($item->start_date)) . date(' h:i A', strtotime($item->start_time))}}</span>
								@if($item->featured == 1)
									<span class="itemStatus__wr">{{translate('Featured')}}</span>
								@endif
								<p class="itemTitle__wr">{{translate(ucwords($item->artist_data->name))}}</p>
								<p class="itemVenue__wr">{{translate(ucwords($item->venue_data->name))}}</p>
								<p class="itemEvent__wr">{{translate(ucwords($performance_category_names))}}</p>
							</div>
						</a>
					</div>
				</div>
				@endforeach
		</section>
	</div>
	<div class="addsSpace__wr rightSpace__wr">
		<a href="javascript:void(0);">
			<img src="{{asset('assets/frontend/images/inner-layout-adds-dummy-bg.png')}}" loading="lazy" class="img-fluid" alt="" title="" width="" height="">
		</a>
	</div>
</div>

{{-- Share Modal --}}

<div class="modal" tabindex="-1" id="share_modal">
	<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
	  <div class="modal-content">
		<div class="card card-bordered">
			<div class="card-body">
                <div class="row">
                    <div class="col-md-10">
                        <div id="kt_clipboard_4" class="me-5 clipBoardInput__wr">
                            <input type="text" id="links" class="form-control" value="{{url(route('performance.detail', $performance_detail->id))}}">
                        </div>
                    </div>
                    <div class="col-md-1">
                        <button onclick="copy_link()" class="btn btn__wr copy_btn" data-clipboard-target="#kt_clipboard_4"><i class="fa-solid fa-copy"></i></button>
                    </div>
                </div>
			</div>
		</div>
		
	  </div>
	</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAtZujFZCLv_cLB0LqYyKZlaILEtttXchg"></script>
<script src="https://unpkg.com/location-picker/dist/location-picker.min.js"></script>
<script>
	$(document).ready(function(){
		var lp = new locationPicker('map', {
			lat: 28.633082,
			lng: 77.219939,
		  }, {
			zoom: 11
		});
	
		google.maps.event.addListener(lp.map, 'idle', function (event) {
		// Get current location and show it in HTML
		var location = lp.getMarkerPosition();
		$('[name="longitude"]').val(location.lng)
		$('[name="latitude"]').val(location.lat)
	  });
	   
	})

	$(document).ready(function(){
		$(".fa-heart").hover(function(){
			$(this).css({'zoom': 0.9});
		});
		$(".fa-heart").mouseout(function(){
			$(this).css({'zoom': 1});
		});
		
		$("#heart_icon").click(function(){
    		$(this).find('.fa-heart').animate({'zoom': 1.3}, 50).delay( 500 ).animate({'zoom': 0.9}, 100);
			$.ajax({
				url:'{{route('fav-performance.page', $performance_detail->id)}}',
				type:'GET',
				success: function(data){
					if(data == 1){
						$("#heart_icon").find('.fa-heart').removeClass("fa-light fa-heart").addClass("fa-solid fa-heart")
					}else{
						$("#heart_icon").find('.fa-heart').removeClass("fa-solid fa-heart").addClass("fa-light fa-heart")
					}
				}
			});
  		});
	})
$('.itemShare__wr').click(function(){
    $("#share_modal").modal({
        onOpen: function (dialog) {
            dialog.data.show();
            dialog.container.show();
            dialog.overlay.fadeIn('fast');
        }
    });
});
function copy_link() {
    var copyText = document.getElementById("links");
    copyText.select();
    copyText.setSelectionRange(0, 99999);
    navigator.clipboard.writeText('helllo');
}
</script>
@endsection