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

<style>
.pagination-item.active{
    background: #dc143c;
    border-radius: 50%;
}
/* clickable ellipses */
.pagination .dots{ cursor: pointer; padding: 0 8px; color: #fff; }

/* Pagination styling */
.lara-pagination .pagination {
    display: flex;
    list-style: none;
    padding: 20px 0;
    margin: 0;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}
.lara-pagination .pagination li {
    display: inline-block;
}
.lara-pagination .pagination li a,
.lara-pagination .pagination li span {
    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;
    background: transparent;
}
.lara-pagination .pagination li a:hover {
    background: rgba(220,20,60,0.3);
    border-color: #dc143c;
}
.lara-pagination .pagination li.active span,
.lara-pagination .pagination li a.active {
    background: #dc143c;
    border-color: #dc143c;
}
.lara-pagination .pagination li.disabled span {
    opacity: 0.5;
    cursor: not-allowed;
}
</style>

<div class="events-area hero-area-postcard mt-5">
    <div class="container">
<div class="row postcard_1">
                    
						

 
						
							   <div class="col-lg-12 col-md-6 col-xl-12 pb-5 pt-5" data-cues="fadeIn" data-group="images" data-duration="1000" data-disabled="true">
                       	<div class="postcard_img">
						<h1 class="m-5">ON-AIR PRESENTERS</h1>
                               
                            </div>
							</div>
					  </div>
       
    </div>

</div>



<style>.ms_rcnt_box_text h4, .w_top_song .w_tp_song_name h4 {
    font-size: 24px;
   
}
.ms_rcnt_box_text h5, .w_top_song .w_tp_song_name h5 {
    font-size: 15px;
    
}
.ms_rcnt_boxs {
   
  height: 170px;
  
    overflow: hidden;
}
.ms_rcnt_box_text h4, .w_top_song .w_tp_song_name h4 {
   
    text-align: center;
  
}
.ms_rcnt_box_img {
   
    height: auto;
}

@media (max-width:600px) {
	
.ms_rcnt_box_img {
   
    height: auto;
}	

	
}
</style>



<div class="events-area schedules-style-two-areas bg_4">
    <div class="container">

        <div class="row  ">

            <div class="col-lg-12 col-md-12 col-xl-12 Program1" data-cues="fadeIn" data-group="images" data-duration="1000" data-disabled="true">

                <div class="row pb-5">
                   @if($artists->count() > 0)
                   @foreach($artists as $artist)
                    <div class="col-lg-3 col-md-6 mt-4 pd">
                        <div class="ms_rcnt_box">
                            <div class="ms_rcnt_box_img">
                                <a href="{{ route('presenters_view',array('slug' => $artist->artist_slug)) }}"> <img src="{{ asset('/images/artist/'.$artist->image) }}" alt="" class="img-fluid album-img1"></a>
                                <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' => 'artist','id' => $artist->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="artist" data-content-id="{{ $artist->id }}" data-content-name="{{ $artist->artist_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('presenters_view',array('slug' => $artist->artist_slug)) }}" data-sharename="{{ $artist->artist_slug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                    </ul>

                                </div>



                            </div>

                        </div>
                        <div class="ms_rcnt_box_text ms_rcnt_boxs m-0">
                            <h4 class=""><a href="{{ route('presenters_view',array('slug' => $artist->artist_slug)) }}" style="font-size: 20px;display:-webkit-box;overflow: hidden;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{  $artist->artist_name }} </a></h4>
                            <h5 class="">{{ $artist->genre ? $artist->genre->genre_name : "" }}</h5>
                            <p>
                               <a href="{{ route('presenters_view',array('slug' => $artist->artist_slug)) }}" style="color: #ffffff;"><div class="overflow-description"> {!! $artist->description !!} </a></div></p>
                        </div>




                    </div>
                  @endforeach
              
                  @endif


                </div>
                <div class="lara-pagination">
                     {{ $artists->links() }}
                </div>
            
            </div>






        </div>
    </div>

</div>




</div>
@endsection


@section('script')
<script>$('.pagination').on('click', 'a', function() {

  if($(this).hasClass("next") ){
    var active = $('.pagination a.active').removeClass('active');
    active.next().addClass('active');
    //$(this).addClass('active');
 }else if($(this).hasClass("prev")){
    var active = $('.pagination a.active').removeClass('active');
    active.prev().addClass('active');
 }
  else{
        $('.pagination a.active').removeClass('active');
       $(this).addClass('active');
  }
  console.log($(this).hasClass("next"))
});</script>
<script>

    /*read more read less js start here*/
    // Set up the toggle effect:
    $('#show-more-content').hide();

    $('#show-more').click(function() {
        $('#show-more-content').show(700);
        $('#show-less').show();
        $('#show-more').hide();
    });

    $('#show-less').click(function() {
        $('#show-more-content').hide(150);
        $('#show-more').show();
        $(this).hide();
    });
</script>
<script>
    function paycrntsong(el) {

        var crntsong = document.getElementById(el);
        var element = '#' + el;
        console.log(crntsong);
        // pause all songs
        $('audio').not('#' + el).each(function() {
            this.pause();
            var s_no = $(this).data('s_no');
            // console.log(s_no);
            $(this).removeClass('playing');
            $(this).closest('ul').find('li a').css({
                'color': ''
            });
            $(this).closest('ul').find('li:first').removeClass('fa fa-pause');
            $(this).closest('ul').find('li:first a .play_no').html(s_no);

        });
        if ($('#' + el).hasClass('playing')) {
            crntsong.pause();
            $(element).closest('ul').find('li:first').removeClass('fa fa-pause');
            $(element).closest('ul').find('li:first').addClass('fa fa-play');
            $(element).closest('ul').find('li').css({
                'color': '#be032f'
            });
            $(element).removeClass('playing');
        } else {
            $(element).closest('ul').find('li:first a .play_no').html("");
            $(element).closest('ul').find('li:first').addClass('fa fa-pause');
            $(element).closest('ul').find('li a').css({
                'color': '#be032f'
            });
            crntsong.play();
            $(element).addClass('playing');
            crntsong.addEventListener("ended", function() {
                $(element).closest('ul').find('li:first').removeClass('fa fa-pause');
                $(element).closest('ul').find('li:first').addClass('fa fa-play');
                $(element).closest('ul').find('li').css({
                    'color': '#be032f'
                });
                $(element).removeClass('playing');
            });
        }
    }

    $('.play_btn').click(function() {
        var audioElements = $('audio');
        var isPlaying = false;

        for (var i = 0; i < audioElements.length; i++) {
            if (audioElements[i].paused === false) {
                isPlaying = true;
                audioElements[i].pause();
                $('audio').each(function() {
                    var s_no = $(this).data('s_no');
                    // console.log(s_no);
                    $(this).removeClass('playing');
                    $(this).closest('ul').find('li a').css({
                        'color': ''
                    });
                    $(this).closest('ul').find('li:first').removeClass('fa fa-pause');
                    $(this).closest('ul').find('li:first').removeClass('fa fa-play');
                    $(this).closest('ul').find('li:first a .play_no').html(s_no);
                    // $('.pause_all').css('display','none');
                    // $('.play_all').css('display','inline');
                    // $(this).removeClass('playing');
                });
                break;
            }
        }
        if (isPlaying) {
            return false;
        } else {
            playNextSong(1);
        }
    });

    function playNextSong(index) {
        $('audio').each(function() {
            $(this).closest('ul').find('li a').css({
                'color': ''
            });
        });


        var num_of_songs = $('.num_of_songs').text();
        var element = '#songs' + index;
        var remove_el = '#songs' + (index - 1);

        //remove class pass & replace with S.No
        $(remove_el).closest('ul').find('li:first').removeClass('fa fa-play');
        $(remove_el).closest('ul').find('li:first').removeClass('fa fa-pause');
        $(remove_el).closest('ul').find('li:first a .play_no').html(index - 1);


        if (index > num_of_songs) {
            return false;
        }


        var audio = document.getElementById('songs' + index + '');

        //remove playing class from all
        $('audio').not(element).each(function() {
            $(this).removeClass('playing');
        });
        audio.play();
        $(element).addClass('playing');

        audio.addEventListener("ended", function() {
            playNextSong(index + 1);
        });

        //add color for ul
        if ($(element).hasClass('playing')) {
            $(element).closest('ul').find('li:first a .play_no').html("");
            $(element).closest('ul').find('li:first').addClass('fa fa-pause');
            $(element).closest('ul').find('li a').css({
                'color': '#be032f'
            });


        } else {
            $('ul li a').css({
                'color': 'red',
                'text-decoration': 'none'
            });
        }



    }
</script>

<script>
    $(document).ready(function() {
        // Check notification subscription status for all presenters
        $('.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') {
                return; // continue to next element
            }
            
            // Check if user is subscribed to this presenter
            $.ajax({
                url: '/notifications/check-subscription',
                method: 'GET',
                data: {
                    content_type: contentType,
                    content_id: contentId
                },
                success: function(response) {
                    if (response.subscribed) {
                        $toggle.find('.icon_bell').addClass('icon-bell-active');
                    }
                }
            });
        });
    });
</script>
@endsection