@extends('layouts.front.main')
@section('title', __('frontWords.album_single'))
@section('content')

<style>
    
    .desc p {
        color: #fff !important;
    }
	.ms_rcnt_box_text h4, .w_top_song .w_tp_song_name h4 {
    font-size: 19px;
    margin-bottom: 5px;
    text-align: center;
    font-family: 'GT America Bold';
}
.pagination-item.active{
    background: #dc143c;
    border-radius: 50%;
}
/* clickable ellipses */
.pagination .dots{ cursor: pointer; padding: 0 8px; color: #fff; }

/* Pagination styling */
.pagination {
    display: flex;
    list-style: none;
    padding: 20px 0;
    margin: 0;
    justify-content: center;
    gap: 5px;
}
.pagination li {
    display: inline-block;
}
.pagination li a {
    display: block;
    padding: 8px 12px;
    color: #fff;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 4px;
    transition: all 0.3s;
}
.pagination li a:hover {
    background: rgba(220,20,60,0.3);
    border-color: #dc143c;
}
.pagination li a.active {
    background: #dc143c;
    border-color: #dc143c;
}

@media(max-width:600px) {
		.ms_rcnt_box_img {
   
    height: auto;
}
		.album-img11 {
	  width: 100%;
    height: auto;
   
    min-width: 250px;
}
	.pd {
   
    padding-left: 15px;
    padding-right: 15px;
	}
	}
</style>

@if($program->count() > 0)
@php
$playlist = [];
$sharePath =route('program_details',array('slug' => $program->slug));
$shareslug = $program->slug;
@endphp;

<div class="ms-banner hero-area-two1">
    <div class="container ">
        <div class="ms_album_single_wrapper">
            @php
            $src = '';
            $src = asset('/images/programs/'.$program->image);
            @endphp
            <div class="album_single_data">
                <div class="album_single_img">
                    <img src="{{ $src }}" alt="" class="img-fluid">
                </div>
                <div class="album_single_text">
                    <h2>{{ $program->program_name  }}</h2>
                    @php 
                        $artist_name =[];
                        if(isset($program->artist_name) && $program->artist_name != null && $program->artist_name != ''){
                            foreach(json_decode($program->artist_name) as $key => $value){ 
                                
                                $artist_name[] = \Modules\Artist\Entities\Artist::find($value)->artist_name ?? '';
                            }
                        }
                     @endphp
                    <p class="singer_name">{{ implode(', ',$artist_name) }}</p>
                    <!-- <p class="singer_name1">{!! $program->description !!}</p> -->
                    <div class="desc">
                        {!! $program->description  !!}
                    </div>
                    

                    {{-- Supporting Video div --}}
                    @if(!empty($program->supporting_video))
                        <div class="mb-3">
                            <div class="program-supporting-video" style="width:100%;max-width:100%;">
                                <video controls playsinline preload="metadata" style="width:100%;height:auto;max-height:480px;background:#000;" poster="{{ asset('images/programs/'.$program->image) }}">
                                    <source src="{{ asset('videos/programs/'.$program->supporting_video) }}" type="video/mp4">
                                    Your browser does not support the video tag.
                                </video>
                            </div>
                        </div>
                    @endif
                    <div class="album_btn">
                        <a href="#/" class="ms_btn play_btn"><span class="play_all"><img src="{{asset('/assets/images/svg/play_all.svg')}}" alt="">Play All</span><span class="pause_all"><img src="{{asset('/assets/images/svg/pause_all.svg')}}" alt="">Pause</span></a>
                        <a href="#/" class="ms_btn d-none"><span class="play_all"><img src="{{asset('/assets/images/svg/add_q.svg')}}" alt="">Add To Queue</span></a>
                    </div>
                </div>
                <div class="album_more_optn ms_more_icon">
                    <span><img src="{{asset('/assets/images/svg/more.svg')}}" alt=""></span>
                </div>
                <ul class="more_option">
                    <li><a href="{{ route('add_favourite',array('type' => 'podcast','id' => $program->id)) }}"><span class="opt_icon"><span class="icon icon_fav"></span></span>Add To Favourites</a></li>
                    <li><a href="#"  class=" d-none"><span class="opt_icon d-none"><span class="icon icon_queue"></span></span>Add To Queue</a></li>
                    <li><a href="javascript:;" class="notification-toggle" data-content-type="program" data-content-id="{{ $program->program_id }}" data-content-name="{{ $program->program_name }}"><span class="opt_icon"><span class="icon icon_bell"></span></span>Notify Me</a></li>
                    <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{ route('program_details',array('slug' => $program->slug)) }}" data-sharename="{{ $program->slug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                    {{-- <li><a href="#"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li> --}}
                </ul>
            </div>
            <!----Song List---->
            @php
                $songsList = [];
                // Use $songs provided by the controller (paginated or collection)
            @endphp
            @if(count($songs) > 0)
                @php 
                $i = 1; 
              
                // reorder songs newer to older
                //$songs = $songs->sortByDesc('id');
                
                @endphp
                @foreach($songs as $song)

                @php
                $artist_id = json_decode($song->artist_id);
                $artist_array = [];
                foreach($artist_id as $artist){
                $artists = Modules\Artist\Entities\Artist::select('artist_name')->where('id',$artist)->first();

                    if($artists){
                        $artist_array[] = $artists->artist_name;
                    }
                }
                $artist_name = implode(',',$artist_array);
           //     $programPlaylist[] =audioPath($song);// ['title' => $song->audio_title, 'artist' => $artist_name, 'mp3' => audioPath($song)];
            // dd($programPlaylist);

            $playlistItem = [
                'src' => audioPath($song),
                'title' => $song->audio_title,
                'artist' => $artist_name,
                'poster' => $song->image,
                'id' => count($playlist)+50,
                "song_id" => $song->id,
                'song_name' => $song->audio_title,
                "program" =>$song->parent_program->program_name,
            ];

            $songsList[] = [
                "songs" => $song,
                "artist_name" => $artist_name,
                'id'=>$playlistItem['id']
            ];

            $playlist[] = $playlistItem
            

        @endphp
        @endforeach
        @endif



            @include('front.components.playlist_component')

            @if(isset($songs) && is_object($songs) && method_exists($songs,'links'))
                <div class="server-pagination mt-3">
                    {!! $songs->links() !!}
                </div>
            @endif
        </div>
    </div>
</div>
@endif



<div class="ms_fea_album_slider join-conference-area1 ">
    <div class="container">
        <div class="section-title pt-4 border-0">

            <h3>

                Newly Released Programs</h3>
            <div class="album_more_optn ms_more_icon d-none" style="
    right: 10%;
">
                <span><img src="{{asset('/assets/images/svg/more.svg')}}" alt=""></span>
            </div>
            <ul class="more_option  d-none">
                <li><a href="#"><span class="opt_icon"><span class="icon icon_fav"></span></span>Add To Favourites</a></li>
                <li><a href="#"  class=" d-none"><span class="opt_icon d-none"><span class="icon icon_queue"></span></span>Add To Queue</a></li>

                <li><a href="#"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
            </ul>

        </div>
        <div class="ms_album_slider swiper-container pb-5">
            <div class="swiper-wrapper">
                @php 
                $newplaylist = [];
                    $i=0;
                @endphp
                @if($recent_programs->count() > 0)
                @foreach($recent_programs as $list)
                    @php
                        $src = '';
                        $src = asset('/images/programs/'.$list->image);

                        $audios = '';
                        $songs = '';
                        

                        $audios = $list->song_list ? json_decode($list->song_list) : [];
                        //   dd($live);

                        if(!isset($audios[0])){
                            continue;
                        }
                        $songs = Modules\Audio\Entities\Audio::find($audios[0]);

                        if(!$songs){
                            continue;
                        }
                        $newplaylistItem = [
                            'src' => audioPath($songs),
                            'title' => $songs->audio_title,
                            'artist' =>"",
                            'poster' => $songs->image,
                            'id' => count($newplaylist)+20,
                            "song_id" => $songs->id,
                            'song_name' => $songs->audio_title,
                            "program" =>$songs->parent_program->program_name,
                        ];
                        $newplaylist[] =$newplaylistItem;

                    @endphp
                  
                <div class="swiper-slide pd">
                    <div class="ms_rcnt_box ms">
                        <div class="ms_rcnt_box_img">
                            <a href="{{ route('program_details',array('slug' => $list->slug)) }}"><img src="{{ $src }}" alt="" class="img-fluid album-img11"></a>
                            <div class=" centered"><a href="#"><svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 44.438" width="45" height="44.438">
                                    </svg></a></div>
                            <div class="ms_main_overlay">
                                <div class="ms_box_overlay"></div>
                                <div class="ms_more_icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="5.333" viewBox="0 0 20 5.333">
                                        <path fill-rule="evenodd" fill="#FFF" d="M17.333 5.332c-1.471 0 -2.667 -1.196 -2.667 -2.667 0 -1.469 1.196 -2.667 2.667 -2.667s2.667 1.197 2.667 2.667c0 1.471 -1.196 2.667 -2.667 2.667Zm-7.333 0c-1.471 0 -2.667 -1.196 -2.667 -2.667 0 -1.469 1.196 -2.667 2.667 -2.667s2.667 1.197 2.667 2.667c0 1.471 -1.196 2.667 -2.667 2.667Zm-7.333 0c-1.471 0 -2.667 -1.196 -2.667 -2.667 0 -1.469 1.196 -2.667 2.667 -2.667s2.667 1.197 2.667 2.667c0 1.471 -1.196 2.667 -2.667 2.667Z" />
                                    </svg>
                                </div>
                                <ul class="more_option">
                                    <li><a href="{{ route('add_favourite',array('type' => 'podcast','id' => $list->id)) }}" class="addToFavourite" data-favourite="8" data-type="artist"><span class="opt_icon">
                                                <span class="icon icon_fav"></span></span>Favourites</a></li>
                                    <li><a href="javascript:;" class="add_to_queue d-none" data-musicid="8" data-musictype="artist"><span class="opt_icon"><span class="icon icon_queue"></span></span>Add To Queue</a></li>
                                    <li><a href="javascript:;" class="notification-toggle" data-content-type="program" data-content-id="{{ $list->program_id }}" data-content-name="{{ $list->program_name }}"><span class="opt_icon"><span class="icon icon_bell"></span></span>Notify Me</a></li>
                                    <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{ route('program_details',array('slug' => $list->slug)) }}" data-sharename="{{ $list->slug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                </ul>

                            </div>
                            <div class="centered" id="pt_1">
                                <a class="ppbutton fa fa-play nl_icon{{ $list->id }}" data-title="{{$songs->audio_title}}" data-id="{{$newplaylistItem['id']}}" data-src="{{ audioPath($songs)}}"></a>
                            </div>
                        </div>
                        <div class="ms_rcnt_box_text ms_rcnt_boxs m-0">
                            <h4 class=""><a href="{{ route('program_details',$list->slug) }}">{{ $list->program_name }} </a></h4>
                            <p><a href="{{ route('program_details',$list->slug) }}" style="color: #ffffff;"><div class="overflow-description"> {!! $list->description !!} </div></a></p>
                        </div>
                    </div>
                </div>
                @endforeach
                @endif
                
            </div>
        </div>


        <div class="swiper-button-next3 slider_nav_next"></div>
        <div class="swiper-button-prev3 slider_nav_prev"></div>
    </div>
</div>

</div>
@endsection


@php 
$jsonPlaylist = json_encode($playlist,JSON_HEX_APOS);
//dd($jsonPlaylist)
@endphp


@section('script')

<script>

// set pagination for playlist-items

// if morethan 10 items then show pagination (compact with ellipses)
isDetailsPage  = true;

$(document).ready(function() {
    function setPagination(){
        const $wrapper = $('.album_list_wrapper').first();
        let playlistItems = $wrapper.find('.playlist-items');
        let perPage = 25;
        if(playlistItems.length > perPage){
            // compute over currently visible items (after filter/sort) within this wrapper
            let allItems = $wrapper.find('.playlist-items');
            let visibleItems = allItems.filter(function(){ return $(this).is(':visible'); });
            let total = Math.ceil(visibleItems.length / perPage);
            let current = 1; // start page

            function renderPagination(total, current){
                let html = '';

                function pageItem(p){
                    let active = (p == current) ? 'active' : '';
                    return '<li><a href="javascript:;" class="pagination-item '+active+'" data-page="'+p+'">'+p+'</a></li>';
                }

                // show all for small totals
                if(total <= 9){
                    for(let i=1;i<=total;i++) html += pageItem(i);
                }else{
                    // left edge: show first 5, ... , last 3
                    if(current <= 5){
                        for(let i=1;i<=5;i++) html += pageItem(i);
                        html += '<li><span class="dots" data-target="'+(6)+'">...</span></li>';
                        for(let i=total-2;i<=total;i++) html += pageItem(i);
                    }
                    // right edge: show first 3, ..., last 5
                    else if(current >= total - 4){
                        for(let i=1;i<=3;i++) html += pageItem(i);
                        html += '<li><span class="dots" data-target="'+(total-5)+'">...</span></li>';
                        for(let i=total-4;i<=total;i++) html += pageItem(i);
                    }
                // middle: 1 ... cur-2,cur-1,cur,cur+1,cur+2 ... last
                else{
                    html += pageItem(1);
                    html += '<li><span class="dots" data-target="'+Math.max(2,current-5)+'">...</span></li>';
                    for(let i=current-2;i<=current+2;i++) html += pageItem(i);
                    html += '<li><span class="dots" data-target="'+Math.min(total-1,current+5)+'">...</span></li>';
                    html += pageItem(total);
                }
            }

            $wrapper.find('.pagination').html(html);
            $wrapper.find('.pagination-item').off('click').on('click', function(){
                $wrapper.find('.pagination-item').removeClass('active');
                $(this).addClass('active');
                let page = parseInt($(this).attr('data-page'));
                current = page;
                showPage(page);
                renderPagination(total, current);
            });

            // dots click: jump into the hidden range
            $wrapper.find('.pagination').off('click', '.dots').on('click', '.dots', function(){
                let target = parseInt($(this).data('target'));
                if(!isNaN(target)){
                    current = target;
                    renderPagination(total, current);
                    showPage(current);
                }
            });
        }

        function showPage(page){
            let index = page - 1;
            let start = index * perPage;
            let end = start + perPage;
            let all = $wrapper.find('.playlist-items');
            
            // Hide all items first
            all.hide();
            
            // Show only the items for current page (no filtering, show actual slice)
            all.slice(start, end).show();
        }

        // initial render
        renderPagination(total, current);
        showPage(1);
    }else{
        $('.pagination').hide();
    }
}

    // Call setPagination after DOM is ready
    setPagination();
});

    // Search & Sort removed per user request; pagination remains active




let plist = {!! json_encode($newplaylist) !!};
        // $(function(){
        //     $('.playlist-items').on('click',function(){
        //         let index = $(this).index();
        //         playSong(index-1);
        //     })

        //     $('.play_btn').on('click',function(){
        //         playAll();
        //     });
        // })
       // console.log();
       // console.log('{!! $jsonPlaylist !!}');
        
       try{

            programPlaylist ={!! $jsonPlaylist !!};

       }catch(e){

            try{
                programPlaylist = {!! $jsonPlaylist !!}
            }catch(e){
                programPlaylist = [];
            }
            
       }
       





       // console.log(programPlaylist);



    function add_to_favorites(type,id)
    {
        const addFav = new XMLHttpRequest();
        addFav.open('POST','{{ route("add_favourite") }}',true);
        addFav.setRequestHeader('Content-Type','application/json');
        var data = {
            type:type,
            id:id,
            _token:"{{ csrf_token() }}",
        };
        addFav.onload  = function(){
              let result = JSON.parse(addFav.responseText);
              console.log(result);
        }
        addFav.onerror = function()
        {
           alert('error');
        };
        addFav.send(JSON.stringify(data));
    }

    // Check notification subscription status on page load
    $(document).ready(function() {
        @if(Auth::check())
        // Check subscription status for all notification toggles on the page
        $('.notification-toggle').each(function() {
            const $toggle = $(this);
            const contentType = $toggle.data('content-type');
            const contentId = $toggle.data('content-id');
            
            // Skip if content_id is missing or empty
            if (!contentId || contentId === '' || contentId === 'undefined') {
                console.warn('Skipping notification check: content_id is missing for', contentType);
                return; // continue to next element
            }
            
            // Check if user is subscribed
            $.ajax({
                url: baseURL + '/notifications/check-subscription',
                type: 'GET',
                data: {
                    content_type: contentType,
                    content_id: contentId
                },
                dataType: 'json',
                success: function(response) {
                    if (response.success && (response.subscribed || response.is_subscribed)) {
                        // User is subscribed - add active class to bell icon
                        $toggle.find('.icon_bell').addClass('icon-bell-active');
                    }
                },
                error: function(xhr, status, error) {
                    console.log('Could not check subscription status for content ID: ' + contentId);
                }
            });
        });
        @endif
    });
    
</script>
@endsection