@extends('frontend.layouts.app')
@section('title')
	{{translate('Venue Detail')}}
@endsection
@section('content')
<div class="pageMainLayout__wr venueDetailPage">
	<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">
		<article class="perfomanceDetailParentSec__wr venueDetailParentSec__wr">
			<section class="venueDetailBannerSec__wr">
				<picture class="venueDetailBg__wr">
					@if(!empty($venue_detail->image))
						<img src="{{asset('uploads/venues/' . $venue_detail->image)}}" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="985" height="267">
					@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>
				<a href="javascript:void(0);" class="galleryBtn__wr">{{translate("See more photos")}}</a>
			</section>
			<section class="shareWrapSec__wr">
				<div class="col-md-6">
					@if($venue_detail->featured == 1)
					<a class="itemFeatured__wr">{{translate('Featured')}}</a>
					@endif
				</div>
				<div class="col-md-6">
					<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">
							<i class="fa-light fa-heart"></i>
						</a>
						<div class="itemFollower__wr mx-3">
							<i class="fas fa-user"></i>
							<span>{{$venue_likes . " Followers"}}</span>
						</div>
					</div>
				</div>
			</section>
			<section class="venueperfListwrapSec__wr">
				<div class="venueperfListWrap__wr">
					<div class="secTitleParent__wr">
						<p class="secTitle__wr">{{translate('Artist Performing')}}</p>
					</div>
					<div class="gridRowWrapp__wr">
						@if(!empty($venue_performance))
							@foreach ($venue_performance as $item)
							<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12 mb-4">
								<div class="itemWrap__wr">
									<a href="{{route('artist.detail', $item->artist_data->id)}} target="_blank"">
										<picture class="artistPic__wr">
											@if($item->artist_data->image == !NULL)
												<img src="{{asset('uploads/artists/' . $item->artist_data->image)}}" loading="lazy" class="img-fluid" alt="artist-image-bg" title="artist-image-bg" width="" height="">
											@else
												<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="artist-image-bg" title="artist-image-bg" width="" height="">
											@endif
										</picture>
										<div class="artistInfoWrap__wr">
											<p class="artistTitle__wr">{{translate(ucwords($item->artist_data->stage_name))}}</p>
										</div>
									</a>
								</div>
							</div>
							@endforeach
						@else
						<p>{{translate('There Are No Artists Who Performed Here.')}}</p>
						@endif
					</div>
				</div>
				<div class="venueDateTimeDataWrap__wr">
					<div class="locationAddressDataWrap__wr">
						<p class="labelTitle__wr">{{translate('Location:')}}</p>
						<p>{{translate(ucwords($venue_detail->address))}}</p>
					</div>
					<a href="http://maps.google.co.uk/maps?q={{$venue_detail->latitude . ',' . $venue_detail->longitude}}" target="_blank" class="viewMapLink">View Map</a>
					<div class="resvationBtn__wr">{{translate('Make a reservation')}}</div>
					<ul class="perfSocialInfoDataWrap__wr">
						<li>
							<a href="tell:{{$venue_detail->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">{{$venue_detail->phone_number}}</span>
							</a>
						</li>
						@if($venue_detail->whatsapp_number !== NULL)
						<li>
							<a href="https://wa.me/{{$venue_detail->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">{{$venue_detail->whatsapp_number}}</span>
							</a>
						</li>
						@endif
						<li>
							<a href="mailto:{{$venue_detail->email}}" class="mailInfo__wr">
								<span class="icon__wr"><img src="{{asset('assets/frontend/images/mail-icon.svg')}}" class="imgsvg"></span>
								<span class="labelTitle__wr">{{$venue_detail->email}}</span>
							</a>
						</li>
						@if($venue_detail->facebook_id !== NULL)
						<li>
							<a href="https://www.facebook.com/{{$venue_detail->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">{{$venue_detail->facebook_id}}</span>
							</a>
						</li>
						@endif
						@if($venue_detail->instagram_id !== NULL)
						<li>
							<a href="https://www.instagram.com/{{$venue_detail->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">{{$venue_detail->instagram_id}}</span>
							</a>
						</li>
						@endif
						@if($venue_detail->twitter_id !== NULL)
						<li>
							<a href="https://x.com/{{$venue_detail->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">{{$venue_detail->twitter_id}}</span>
							</a>
						</li>
						@endif
						@if($venue_detail->website !== NULL)
						<li>
							<a href="https://{{$venue_detail->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">{{$venue_detail->website}}</span>
							</a>
						</li>
						@endif
					</ul>
				</div>
			</section>
			<section class="venueMapLocationSec__wr">
				<div name="map" id="abc" class="gmaps">
				</div>
				<div class="venueLocationDataWrap__wr">
					<p class="eventTitle__wr">{{translate(ucwords($venue_detail->name))}}</p>
					<p class="labelTitle__wr">{{translate('Location')}}</p>
					<p class="adress__wr">{{translate(ucwords($venue_detail->address))}}</p>
					<a href="http://maps.google.co.uk/maps?q={{$venue_detail->latitude . ',' . $venue_detail->longitude}}" target="_blank" class="locateBtn__wr"><i class="fa-solid fa-location-dot"></i>Locate Now!</a>
				</div>
			</section>
		</article>
		<section class="venueListWrapSec__wr">
			<div class="secTitleParent__wr centered__wr">
				<p class="secTitle__wr">{{translate('More venues you may like.')}}</p>
			</div>
			<div class="gridRowWrapp__wr">
				@foreach ($random_venue as $item)
					<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12">
						<div class="itemWrap__wr">
							<a href="{{route('venue.detail', $item->id)}}" target="_blank">
								<picture class="itemImage__wr">
								@if(!empty($item->image))
									<img src="{{asset('uploads/venues/' . $item->image)}}" loading="lazy" class="img-fluid" alt="artist-venues-slider-bg" title="artist-venues-slider-bg" width="" height="">
								@else
									<img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="artist-image-bg" title="artist-image-bg" width="" height="">
								@endif
								</picture>
								<div class="itemContentWrap__wr">
									<p class="itemTitle__wr">{{translate(ucwords($item->name))}}</p>
									<p>{{translate('VENUE')}}</p>
								</div>
							</a>
						</div>
					</div>
				@endforeach
			</div>
		</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>
@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('abc', {
			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)
	  });
	   
	})
	</script>
@endsection