@extends('frontend.layouts.app')
@section('title')
Performance
@endsection
@section('content')
<div class="pageMainLayout__wr performancePage">
	<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="performancePageListWrap__wr">
            <form class="secWrapper__wr">
                <div class="filterSecWrap__wr">
                    <div class="filterSwitchWrap__wr">
                        <div class="filterSwitchItem__wr">
                            <input id="live_status" type="checkbox">
                            <div class="toggle__wr">
                                <span class="checkmark__wr"></span>
                            </div>
                            <span class="labelTitle__wr">{{translate("Live")}}</span>
                        </div>
                        <div class="filterSwitchItem__wr">
                            <input id="upcoming_status" type="checkbox">
                            <div class="toggle__wr">
                                <span class="checkmark__wr"></span>
                            </div>
                            <span class="labelTitle__wr">{{translate("Scheduled")}}</span>
                        </div>
                    </div>
                    <div class="filterSortWrap__wr">
                        <div class="dropdown">
                            <a class="btn dropdown-toggle" href="javascript:void(0);" role="button" data-toggle="dropdown" aria-expanded="false">
                                <span class="icon__wr"><img src="{{asset('assets/frontend/images/sort-icon.svg')}}" class="imgsvg"></span>
                                <span class="titleLabel__wr">{{translate("SORT BY")}}</span>
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="{{route('performance.page')}}">{{translate("Latest")}}</a>
                                <a class="dropdown-item" href="{{route('performance.page', ['sort_by' => 'oldest'])}}">{{translate("Oldest")}}</a>
                                <a class="dropdown-item" href="{{route('performance.page', ['sort_by' => 'a_to_z'])}}">{{translate("Name (A-Z)")}}</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="allPerformanceListWrap__wr">
                    <div class="gridRowWrapp__wr">
                        @if(!empty($live))
                            @foreach ($live as $item)
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="performanceItemWrap__wr">
                                        <div class="performanceImageWrap__wr">
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                                <picture class="performancePoster__wr">
                                                    <img src="{{$item['venue_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/no-image.jpg')}}';" loading="lazy" class="img-fluid" alt="performance-event-poster-bg" title="performance-event-poster-bg" width="148" height="197">
                                                </picture>
                                                <div class="performanceGalleryWrap__wr">
                                                    <picture class="performanceVenue__wr">
                                                        <img src="{{$item['performance_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/no-image.jpg')}}';" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="151" height="107">
                                                    </picture>
                                                    <div class="galleryPicWrap__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>
                                            </a>
                                        </div>
                                        <div class="performanceContentWrap__wr">
                                            <a href="{{route('artist.detail', $item['artist_id'])}}" target="_blank" class="profilePic__wr">
                                                <img src="{{$item['artist_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/users/user-dummy-img.jpg')}}';" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="90" height="90">
                                            </a>
                                            <div class="performanceInfoData__wr">
                                                <span class="dateData__wr">{{date('dS. D, F, Y', strtotime($item['performance_start_date'])) . " | " . $item['performance_start_time']}}</span>
                                                <span class="statusData__wr">{{translate("Live")}}</span>
                                            </div>
                                            <p class="performanceTitle__wr">
                                                <a href="javascript:void(0);"  data-toggle="modal" data-target="#exampleModal">{{translate(ucwords($item['performance_title']))}}</a>
                                            </p>
                                            <p class="artistGroup__wr">{{translate("Artist/Group:")}}
                                                <span class="labelTitle__wr">{{translate(ucwords($item['artist_stage_name']))}}</span>
                                            </p>
                                            <p class="venueArea__wr">{{translate(ucwords("Venue/Area:" . $item['venue_name']))}}</p>
                                            <p>{{translate(ucwords(mb_strimwidth("Address: " .  $item['venue_name'], 0, 75, "......")))}}</p>
                                            @if(!empty($item['performance_description']))
                                                <p class="mt-2">{{translate(ucwords(mb_strimwidth($item['performance_description'], 0, 90, "........")))}}</p>
                                            @else
                                                <p class="mt-2">{{translate('Description Not Available')}}</p>
                                            @endif
                                            <div class="itemFootWrap__wr">
                                                <p class="footText__wr">{{translate(ucwords($item['performance_category_name'] . ', ' . $item['artist_name'] . ', ' . $item['artist_surname'] . ', ' . $item['venue_name'] . ', ' . $item['artist_stage_name']))}}</p>
                                                <div class="footInfoData__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(in_array($item['performance_id'], $user_fav))
                                                            <i class="fa-solid fa-heart" style="color: #0E3D0A"></i>
                                                        @else
                                                            <i class="fa-light fa-heart" style="color: #0E3D0A"></i>
                                                        @endif
                                                    </a>
                                                    @if($item['performance_featured'] == 1)
                                                        <div class="itemFeatured__wr ml-2">{{translate("Featured")}}</div>
                                                    @endif
                                                    <div class="itemFollower__wr mx-2">
                                                        <i class="fas fa-user"></i>
                                                        <span>{{$item['performance_like_count']}} Followers</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                        @if(!empty($non_live))
                            @foreach ($non_live as $item)
                                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="performanceItemWrap__wr">
                                        <div class="performanceImageWrap__wr">
                                            <a href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">
                                                <picture class="performancePoster__wr">
                                                    <img src="{{$item['venue_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/no-image.jpg')}}';" loading="lazy" class="img-fluid" alt="performance-event-poster-bg" title="performance-event-poster-bg" width="148" height="197">
                                                </picture>
                                                <div class="performanceGalleryWrap__wr">
                                                    <picture class="performanceVenue__wr">
                                                        <img src="{{$item['performance_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/no-image.jpg')}}';" loading="lazy" class="img-fluid" alt="performance-event-venue-bg" title="performance-event-venue-bg" width="151" height="107">
                                                    </picture>
                                                    <div class="galleryPicWrap__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>
                                            </a>
                                        </div>
                                        <div class="performanceContentWrap__wr">
                                            <a href="{{route('artist.detail', $item['artist_id'])}}" target="_blank" class="profilePic__wr">
                                                <img src="{{$item['artist_image']}}" onerror="this.onerror=null;this.src='{{asset('assets/backend/images/users/user-dummy-img.jpg')}}';" loading="lazy" class="img-fluid" alt="profile pic" title="profile pic" width="90" height="90">
                                            </a>
                                            <div class="performanceInfoData__wr">
                                                <span class="dateData__wr">{{date('dS. D, F, Y', strtotime($item['performance_start_date'])) . " | " . $item['performance_start_time']}}</span>
                                            </div>
                                            <p class="performanceTitle__wr">
                                                <a  href="javascript:void(0);" data-toggle="modal" data-target="#exampleModal">{{translate(ucwords($item['performance_title']))}}</a>
                                            </p>
                                            <p class="artistGroup__wr">{{translate("Artist/Group:")}}
                                                <span class="labelTitle__wr">{{translate(ucwords($item['artist_stage_name']))}}</span>
                                            </p>
                                            <p class="venueArea__wr">{{translate(ucwords("Venue/Area:" . $item['venue_name']))}}</p>
                                            <p>{{translate(ucwords(mb_strimwidth("Address: " .  $item['venue_name'], 0, 75, "......")))}}</p>
                                            @if(!empty($item['performance_description']))
                                                <p class="mt-2">{{translate(ucwords(mb_strimwidth($item['performance_description'], 0, 90, "........")))}}</p>
                                            @else
                                                <p class="mt-2">{{translate('Description Not Available')}}</p>
                                            @endif
                                            <div class="itemFootWrap__wr">
                                                <p class="footText__wr">{{translate(ucwords($item['performance_category_name'] . ', ' . $item['artist_name'] . ', ' . $item['artist_surname'] . ', ' . $item['venue_name'] . ', ' . $item['artist_stage_name']))}}</p>
                                                <div class="footInfoData__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" loading="lazy" decoding="async">
                                                        @if(in_array($item['performance_id'], $user_fav))
                                                            <i class="fa-solid fa-heart" style="color: #ab1b1b"></i>
                                                        @else
                                                            <i class="fa-light fa-heart" style="color: #ab1b1b"></i>
                                                        @endif
                                                    </a>
                                                    @if($item['performance_featured'] == 1)
                                                        <div class="itemFeatured__wr ml-2">{{translate("Featured")}}</div>
                                                    @endif
                                                    <div class="itemFollower__wr mx-2">
                                                        <i class="fas fa-user"></i>
                                                        <span>{{$item['performance_like_count']}} Followers</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
            </form>
        </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', $item['performance_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-performance.page', $item['performance_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('hello');
}
</script>
@endsection