@extends('frontend.layouts.app')
@section('title')
    {{translate('Artist Detail')}}
@endsection
@section('content')
<div class="pageMainLayout__wr performanceDetailPage artistDetailPage">
    <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="artDetailParentSec__wr">
            <div class="artDetailTopWrapSec__wr">
                <div class="artProfileWrap__wr">
                    <div class="profilePicWrap__wr">
                        <picture class="profilePic__wr">
                            @if($artist_detail->image !== NULL)
                                <img src="{{asset('uploads/artists/' . $artist_detail->image)}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="233" height="249">
                            @else
                                <img src="{{asset('assets/backend/images/no-image.jpg')}}" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="233" height="249">
                            @endif
                        </picture>
                        @if($artist_detail->featured == 1)
                            <span class="labelTitle__wr">{{translate("Featured")}}</span>
                        @endif
                    </div>
                    <div class="artProfileDetailWrap__wr">
                        @if(!empty($artist_detail->stage_name))
                            <p class="title__wr">{{translate(ucwords($artist_detail->stage_name))}}</p>
                        @else
                            <p class="title__wr">{{translate("No Stage Name")}}</p>
                        @endif

                        @if(!empty($artist_category_names))
                            <p class="artType__wr">{{translate(ucwords("Type of Artist: " . $artist_category_names))}}</p>
                        @else
                            <p class="artType__wr">{{translate("Type of Artist: N/A")}}</p>
                        @endif

                        @if(!empty($artist_genre_names))
                            <p class="artGenres__wr">{{translate(ucwords("Genres: " . $artist_genre_names))}}</p>
                        @else
                            <p class="artGenres__wr">{{translate("Genres: N/A")}}</p>
                        @endif

                        @if(!empty($artist_instrument_names))    
                            <p class="artInstrument__wr">{{translate(ucwords("Instrument: " . $artist_instrument_names))}}</p>
                        @else
                            <p class="artInstrument__wr">{{translate("Instrument: N/A" )}}</p>
                        @endif

                        @if(!empty($artist_detail->nationality_data))    
                            <p class="artNationality__wr">{{translate(ucwords("Nationality: " . $artist_detail->nationality_data->name))}}</p>
                        @else
                            <p class="artNationality__wr">{{translate("Nationality: N/A")}}</p>
                        @endif   

                        <div class="artInfoDataWrap__wr">
                            <a href="javascript:void(0);">
                                <span class="icon__wr bio_btn"><img src="{{asset('assets/frontend/images/bio-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate('Bio')}}</span>
                            </a>
                            <a href="javascript:void(0);">
                                <span class="icon__wr photos_btn"><img src="{{asset('assets/frontend/images/picture-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate('Photos')}}</span>
                            </a>
                            <a href="javascript:void(0);">
                                <span class="icon__wr videos_btn"><img src="{{asset('assets/frontend/images/video-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate("Videos")}}</span>
                            </a>
                            <a href="javascript:void(0);">
                                <span class="icon__wr experience_btn"><img src="{{asset('assets/frontend/images/experience-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate("Experience")}}</span>
                            </a>
                            <a href="javascript:void(0);">
                                <span class="icon__wr docs_btn"><img src="{{asset('assets/frontend/images/documents-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate('Docs')}}</span>
                            </a>
                            <a href="javascript:void(0);">
                                <span class="icon__wr epk_btn"><img src="{{asset('assets/frontend/images/epk-icon.svg')}}" class="imgsvg"></span>
                                <span class="labelTitle__wr">{{translate('EPK')}}</span>
                            </a>
                        </div>
                        <div class="tagsListWrap__wr">
                            <p class="labelTitle__wr">{{translate('Tags:')}}</p>
                            <ul>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_category_names))}}</a></li>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_genre_names))}}</a></li>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_instrument_names))}}</a></li>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_detail->stage_name))}}</a></li>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_detail->name))}}</a></li>
                                <li><a href="javascript:void(0);">{{translate(ucwords($artist_country->country_name ?? 'Not Availaible'))}}</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="artTipQRWrap__wr">
                        <p class="labelTitle__wr">{{translate('Tip your favorite artist with Tipster.')}}</p>
                        <div class="mb-3 mt-3">
                            {{ QrCode::size(220)->generate($artist_detail->id) }}
                        </div>
                        <a href="javascript:void(0);" class="appBtn__wr">{{translate('Download App')}}</a>
                    </div>
                </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" 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>
                    <a href="javascript:void(0);" class="itemFollower__wr"><i class="fas fa-user"></i><span>{{translate($artist_likes . ' Followers')}}</span></a>
                </div>
            </div>
            <div class="artistPerformancesSec__wr">
                <div class="secTitleParent__wr rihtLine__wr">
                    <p class="secTitle__wr">{{translate('Scheduled Performances')}}</p>
                    @if($artist_upcoming_performances->isEmpty())
                        <p class="mt-4">{{translate('No Upcoming Performances/Gigs')}}</p>
                    @endif
                </div>
                <div class="gridRowWrapp__wr">
                    @foreach ($artist_upcoming_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
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-4">
                        <div class="eventWrap__wr">
                            <a href="{{route('performance.detail', $item->id)}}">
                                <picture class="eventPicWrap__wr">
                                    <img src="{{asset('uploads/performances/' . $item->image)}}" loading="lazy" class="img-fluid" alt="event-image-bg" title="event-image-bg" width="" height="">
                                </picture>
                                <div class="eventContentWrap__wr">
                                    @if($current_datetime >= $start_datetime && $current_datetime < $end_datetime)
										<span class="statusInfo__wr">{{translate(ucwords("Live"))}}</span>
									@endif
                                    <p class="eventTitle__wr">{{translate(ucwords($item->title))}}</p>
                                    <span class="timeInfo__wr">{{date('dS. D, F, Y', strtotime($item->start_date)) . " | " . date('h:i A', strtotime($item->start_time))}}</span>
                                    <p class="eventArtistName__wr">{{translate(ucwords($item->artist_data->stage_name))}}</p>
                                    <p class="eventAddress__wr font-weight-bold">{{translate(ucwords($item->venue_data->name))}}</p>
                                    @if(!empty($item->description))
                                        <p>{{((mb_strimwidth($item->description, 0, 90, "........")))}}</p>
                                    @else
                                        <p>{{translate('Description Not Available')}}</p>
                                    @endif
                                </div>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="artBioWrapSec__wr" id="bio_section">
                <div class="secTitleParent__wr">
                    <p class="secTitle__wr">{{translate('Biography')}}</p>
                </div>
                <div class="bioDetailWrap__wr">
                    <p>{{translate(ucwords($artist_detail->bio ?? 'Bio Not Availaible'))}}</p>
                </div>
            </div>
            <div class="artPhotoWrapSec__wr" id="photos_section">
                <div class="secTitleParent__wr">
                    <p class="secTitle__wr">{{translate('Photos')}}</p>
                </div>
                <div class="owl-carousel owl-theme artPhotoGallerySlider">
                    @forelse ($artist_photos as $key => $item)
                    <div class="itemWrap__wr">
                        <a href="#" id="media_image">
                            <picture class="itemImage__wr">
                                <img id="imageresource" src="{{asset('uploads/artist_media/' . $item->filename)}}" loading="lazy" class="img-fluid" alt="uplive-gallery-bg" title="uplive-gallery-bg" width="" height="">
                            </picture>
                        </a>
                    </div>
                    @empty
                    <div class="itemWrap__wr">
                        <a href="javascript:void(0);">
                            <picture class="itemImage__wr">
                                <img src="{{asset('assets/frontend/images/gallery-slider-dummy-bg.jpg')}}" loading="lazy" class="img-fluid" alt="uplive-gallery-bg" title="uplive-gallery-bg" width="" height="">
                            </picture>
                        </a>
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="artVideoWrapSec__wr" id="videos_section">
                <div class="secTitleParent__wr">
                    <p class="secTitle__wr">{{translate('Videos')}}</p>
                </div>
                <div class="owl-carousel owl-theme artVideoGallerySlider">
                    @forelse ($artist_videos as $item)    
                    <div class="itemWrap__wr">
                        <a href="javascript:void(0);">
                            <video width="230" height="auto" controls>
                                <source src="{{asset('uploads/artist_media/' . $item->filename)}}" type="video/mp4">
                            </video>
                        </a>
                    </div>
                    @empty
                    <div class="itemWrap__wr">
                        <a href="javascript:void(0);">
                            <picture class="itemImage__wr">
                                <img src="{{asset('assets/frontend/images/gallery-slider-dummy-bg.jpg')}}" loading="lazy" class="img-fluid" alt="uplive-gallery-bg" title="uplive-gallery-bg" width="" height="">
                            </picture>
                        </a>
                    </div>
                    @endforelse
                </div>
            </div>
            <div class="artExpWrapSec__wr" id="experiences_section">
                <div class="secTitleParent__wr">
                    <p class="secTitle__wr">{{translate('Experiences & Career Overview')}}</p>
                    <p>I have been a live performer since. {{(date('d-M-Y', strtotime($artist_detail->created_at)))}} | {{\Carbon\Carbon::createFromTimeStamp(strtotime($artist_detail->created_at))->diffForHumans()}}</p>
                    @if($artist_previous_performances->isEmpty())
						<p class="mt-4">{{translate('No Experiences or Past Performances')}}</p>
                    @endif
                </div>
            <div class="artistPerformancesSec__wr">
                <div class="gridRowWrapp__wr">
                    @foreach ($artist_previous_performances as $item)
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12 mb-4">
                        <div class="eventWrap__wr">
                            <a href="{{route('performance.detail', $item->id)}}.html">
                                <picture class="eventPicWrap__wr">
                                    <img src="{{asset('uploads/performances/' . $item->image)}}" loading="lazy" class="img-fluid" alt="event-image-bg" title="event-image-bg" width="" height="">
                                </picture>
                                <div class="eventContentWrap__wr">
                                    <p class="eventTitle__wr">{{translate(ucwords($item->title))}}</p>
                                    <span class="timeInfo__wr">{{date('dS. D, F, Y', strtotime($item->start_date)) . " | " . $item->start_time}}</span>
                                    <p class="eventArtistName__wr">{{translate(ucwords($item->artist_data->stage_name))}}</p>
                                    <p class="eventAddress__wr font-weight-bold">{{translate(ucwords($item->venue_data->name))}}</p>
                                    @if(!empty($item->description))
                                        <p>{{((mb_strimwidth($item->description, 0, 90, "........")))}}</p>
                                    @else
                                        <p>{{translate('Description Not Available')}}</p>
                                    @endif
                                </div>
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="artVenuesWrapSec__wr">
                <div class="secTitleParent__wr">
                    <p class="secTitle__wr">{{translate("More live artists you may like.")}}</p>
                </div>
                <div class="owl-carousel owl-theme artistVenueSlider">
                    @foreach ($random_artist_venue as $item) 
                        @if($item->getTable() == 'artist')
                        <div class="itemWrap__wr">
                            <a href="{{route('artist.detail', $item->id)}}">
                                <picture class="itemImage__wr">
                                    @if($item->image !== NULL)
                                        <img src="{{asset('uploads/artists/' . $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-venues-slider-bg" title="artist-venues-slider-bg" width="" height="">
                                    @endif
                                </picture>
                                <div class="itemContentWrap__wr">
                                    <p class="itemTitle__wr">{{translate(ucwords($item->stage_name))}}</p>
                                    <p>{{translate('Artist')}}</p>
                                </div>
                            </a>
                        </div>
                        @elseif($item->getTable() == 'venue')
                        <div class="itemWrap__wr">
                            <a href="{{route('venue.detail', $item->id)}}">
                                <picture class="itemImage__wr">
                                    @if($item->image == !NULL)
                                    <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-venues-slider-bg" title="artist-venues-slider-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>
                        @endif
                    @endforeach
                </div>
            </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>

{{-- 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('artist.detail', $artist_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>
$(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( 300 ).animate({'zoom': 0.9}, 100);
        $.ajax({
            url:'{{route('fav-artist.page', $artist_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")
                }
            }
        });
    });

    $(".bio_btn").click(function() {
        $('html, body').animate({
            scrollTop: $("#bio_section").offset().top-200
        }, 600);
    });
    $(".photos_btn").click(function() {
        $('html, body').animate({
            scrollTop: $("#photos_section").offset().top-200
        }, 600);
    });
    $(".videos_btn").click(function() {
        $('html, body').animate({
            scrollTop: $("#videos_section").offset().top-200
        }, 600);
    });
    $(".experience_btn").click(function() {
        $('html, body').animate({
            scrollTop: $("#experiences_section").offset().top-200
        }, 600);
    });
})
$('.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