@extends('layouts.front.main')
@section('title', __('frontWords.favourites'))
@section('style')
<link href="{{ asset('assets/css/star-rating.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('content')
<style>
    
    .playlist-items{
        cursor: pointer;
        color:#fff;
    }
    .playlist-items:hover{
        color: rgb(190, 3, 47);
    }
    .playlist-items.playing{
        color: rgb(190, 3, 47);
    }
    .play-button-individual{
        color: rgb(190, 3, 47);   
    }
    </style>

@php
$playlist  = [];
$trackList = [];
@endphp


@if(!empty($audios))
	

<div class="ms-banner hero-area-two1">
    <div class="container ">
    <h2>All Favourite Tracks</h2>   
        <div class="ms_album_single_wrapper">     
            <!----Song List---->
            <div class="album_inner_list">
                <div class="album_list_wrapper">
                    <ul class="album_list_name">
                        <li></li>
                        <li>Episode Tittle</li>
                        <li>Artist</li>
                        <li class="text-center">Duration</li>

                        <li class="text-center">More</li>
                    </ul>
                    @php 
                        $i = 1;
                     @endphp
                   @foreach($audios as $audio)
                   
                   @php
                   $artist_array = [];
                    if($audio->song){
                        $artist_id = json_decode($audio->song->artist_id, true) ?: [];
                        
                        if(is_array($artist_id)){
                            foreach($artist_id as $artist){
                                $artists = Modules\Artist\Entities\Artist::select('artist_name')->where('id',$artist)->first();
                                if($artists){
                                    $artist_array[] = $artists->artist_name;
                                }
                            }
                        }
                            

                    }else{
                        continue;
                    }
                    $artist_name = implode(',',$artist_array);

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

                    $sharePath = route('program_details',array('slug' => $audio->song->parent_program->slug));
                    $shareslug = $audio->song->parent_program->program_name;
                    @endphp

                    <ul data-id="{{$playlistItem['id']}}" class="playlist-items item_row_{{$playlistItem['id']}}">
                        <li class="fa fa-play play-button-individual"></li>
                        
                        <li>{{ $audio->song->audio_title }}</li>
                        <audio style="display: none;" id="songs{{ $audio->song->id }}" data-s_no="{{ $i }}">
                            <source src="{{ audioPath($audio->song) }}" type="audio/mpeg">
                        </audio>
                        <li>
                               {{ $artist_name }}
                            </li>
                        <li class="text-center">{{ $audio->song->audio_duration }}</a></li>

                        <li class="text-center ms_more_icon"><a href="javascript:;"><span class="ms_icon1 ms_active_icon"></span></a>
                            <ul class="more_option">
                                <!-- <li><a href="#"><span class="opt_icon"><span class="icon icon_fav"></span></span>Add To Favourites</a></li> -->
                                <!-- <li><a href="#"><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> --}}
                                {{-- delete --}}
                                <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{$sharePath."?song=".$audio->song->id}}" data-sharename="{{ $shareslug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                <li><a href="javascript:;" onclick="deleteFavourite({{ $audio->id }})"><span class="opt_icon"><span class="icon icon_queue"></span></span>Delete</a></li>
                            </ul>
                        </li>
                    </ul>

                    @php $i++; @endphp
                @endforeach
                   
                    <span class="num_of_songs" style="display: none;">{{ '' }}</span>
                   

                </div>
            </div>
        </div>
    </div>
</div>
@endif

@if( isset($recently_added) && $recently_added->count() > 0)
@php 

$sharePath = route('program_details',array('slug' => $recently_added[0]->song->parent_program->slug));
$shareslug = $recently_added[0]->song->parent_program->program_name;

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

            <h3>

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

                <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{$sharePath."?song=".$recently_added[0]->song->id}}" data-sharename="{{ $shareslug }}"><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 $i = 1; @endphp
                @foreach($recently_added as $recent)
                    @php

                        if(!$recent->song){
                            continue;
                        }

                        $src = '';

                        // check $recent->song->image is a local file or url
                        if (filter_var($recent->song->image, FILTER_VALIDATE_URL)) {
                            $src = $recent->song->image;
                        } else {
                            $src = asset('/images/audio/thumb/'.$recent->song->image);
                        }


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

                    $sharePath = route('program_details',array('slug' => $recent->song->parent_program->slug));
                    $shareslug = $recent->song->parent_program->program_name;

                       // $src = asset('/images/audio/thumb/'.$recent->song->image);
                    @endphp
                  
                    <div class="swiper-slide">
                    <div class="ms_rcnt_box">
                        <div class="ms_rcnt_box_img">
                            <a href="#"> <img src="{{ $src }}" alt="" style="" class="img-fluid album-img11"></a>

                            <div class=" centered"><a href="#/" id="ppbutton{{ $i }}" class="ppbutton pp_bg fa fa-play" data-id="{{$playlistItem['id']}}"></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="javascript:;" 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" 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="ms_share_music" data-shareuri="{{$sharePath."?song=".$recent->song->id}}" data-sharename="{{ $shareslug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                        {{-- delete --}}
                                    <li><a href="javascript:;" class="delete_song delete-favourite" data-id="{{ $recent->id }}" data-songname="{{ $recent->song->audio_title }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Delete</a></li>

                                </ul>

                            </div>
                        </div>

                    </div>
                   <a href="#"> <div class="ms_rcnt_box_text">
                        <h4>{{ $recent->song->audio_title }}</h4>
                        <p> {!! $recent->song->audio_description !!} </p>
                    </div> </a>
                </div>

                 @php $i++; @endphp
                @endforeach
               
                
            </div>
        </div>
        <div class="swiper-button-next3 slider_nav_next"></div>
        <div class="swiper-button-prev3 slider_nav_prev"></div>
    </div>
</div>
@else
             <div class="text-center">{{ 'No Tracks Available!'  }}</div>
@endif


@if( isset($programs) && $programs->count() > 0)
<!-- Podcast -->
<div class="ms_fea_album_slider join-conference-area1 ">
    <div class="container">
        <div class="section-title pt-4">
            <!-- <span class="top-title">Podcast and On-Demand</span> -->
            <h2>

                Favourite Programs</h2>
        </div>
        <div class="ms_program_slider swiper-container pb-5">
            <div class="swiper-wrapper">
             
                @foreach($programs as $program)

                @php
               // dd($program->program);
                    if(!$program->program){
                        continue;
                    }

                $p_src = '';
                $audios = '';
                $songs = '';
                $p_src = imagePath($program->program->image,'program',$program->program->program_name); // asset('/images/podcast/'.$podcast->podcast->image);

                $audios = json_decode($program->program->song_list, true) ?: [];
                if(empty($audios) || !is_array($audios) || count($audios) == 0 || !isset($audios[0])){
                    continue;
                }
                $songs = Modules\Audio\Entities\Audio::find($audios[0]);
                if(!$songs){
                    continue;
                }

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

                    $sharePath = route('program_details',array('slug' => $program->program->slug));
                    $shareslug = $program->program->program_name;

                @endphp
                <div class="swiper-slide pd">
                    <div class="ms_rcnt_box ms">
                        <div class="ms_rcnt_box_img">
                            <a href="{{ route('single_album',array('id' => $program->program->id,'slug' => $program->program->slug)) }}"> <img src="{{ $p_src }}" alt="" style="" class="img-fluid album-img11"></a>

                            <div class=" centered"><a href="#/" id="ppbutton40{{ $program->program->id }}" class="ppbutton pp_bg fa fa-play" data-id="{{$playlistItem['id']}}"></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="" 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 d-none"><span class="icon icon_queue"></span></span>Add To Queue</a></li>
                                    
                                    <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{$sharePath}}" data-sharename="{{ $shareslug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                    {{-- delete --}}
                                    <li><a href="javascript:;" class="delete_song delete-favourite" data-id="{{ $program->id }}" data-songname="{{ $program->program->program_name }}"><span class="opt_icon"><span class="icon icon_queue"></span></span>Delete</a></li>
                                </ul>

                            </div>
                            <audio style="display: none;" id="podcast{{ $program->id }}">
                                <source src="{{ audioPath($songs) }}" type="audio/mpeg">
                            </audio>
                        </div>

                    </div>
                   <a href="{{ route('single_album',array('id' => $program->program->id,'slug' => $program->program->slug)) }}"> <div class="ms_rcnt_box_text">
                        <h4>{{ $program->program->program_name }}</h4>
                        <p style=" "> {!! $program->program->description !!} </p>
                    </div> </a>
                </div>
                @endforeach
               
            </div>
        </div>


        <div class="swiper-button-next-programs slider_nav_next"></div>
        <div class="swiper-button-prev-programs slider_nav_prev"></div>
    </div>
</div>
@endif



@if( isset($podcasts) && $podcasts->count() > 0)
<!-- Podcast -->
<div class="ms_fea_album_slider join-conference-area1 ">
    <div class="container">
        <div class="section-title pt-4">
            <!-- <span class="top-title">Podcast and On-Demand</span> -->
            <h2>

                Favourite Podcast</h2>
        </div>
        <div class="ms_album_slider swiper-container pb-5">
            <div class="swiper-wrapper">
             
                @foreach($podcasts as $podcast)

                @php
                    if(!$podcast->podcast){
                        continue;
                    }

                $p_src = '';
                $audios = '';
                $songs = '';
                $p_src = imagePath($podcast->podcast->image,'podcast',$podcast->podcast->album_name); // asset('/images/podcast/'.$podcast->podcast->image);

                $audios = json_decode($podcast->podcast->song_list, true) ?: [];
                if(!is_array($audios) || count($audios) == 0 || !isset($audios[0])){
                    continue;
                }
                $songs = Modules\Audio\Entities\Audio::find($audios[0]);
                if(!$songs){
                    continue;
                }

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

                    $sharePath = route('single_album',array('slug' => $podcast->podcast->album_slug));
                    $shareslug = $podcast->podcast->album_name;

                @endphp
                <div class="swiper-slide pd">
                    <div class="ms_rcnt_box ms">
                        <div class="ms_rcnt_box_img">
                            <a href="{{ route('single_album',array('id' => $podcast->podcast->id,'slug' => $podcast->podcast->album_slug)) }}"> <img src="{{ $p_src }}" alt="" style="" class="img-fluid album-img11"></a>

                            <div class=" centered"><a href="#/" id="ppbutton40{{ $podcast->podcast->id }}" class="ppbutton pp_bg fa fa-play" data-id="{{$playlistItem['id']}}"></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="" 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 d-none"><span class="icon icon_queue"></span></span>Add To Queue</a></li>
                                    {{-- <li><a href="javascript:;" class="" data-shareuri="#" data-sharename="Sonya Roberson"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li> --}}
                                    <li><a href="javascript:;" class="ms_share_music" data-shareuri="{{$sharePath}}" data-sharename="{{ $shareslug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                    {{-- delete --}}
                                    <li><a href="javascript:;" class="delete_song delete-favourite" data-id="{{ $podcast->id }}" data-songname="{{ $podcast->podcast->album_name }}"><span class="opt_icon"><span class="icon icon_queue"></span></span>Delete</a></li>
                                </ul>

                            </div>
                            <audio style="display: none;" id="podcast{{ $podcast->id }}">
                                <source src="{{ audioPath($songs) }}" type="audio/mpeg">
                            </audio>
                        </div>

                    </div>
                   <a href="{{ route('single_album',array('id' => $podcast->podcast->id,'slug' => $podcast->podcast->album_slug)) }}"> <div class="ms_rcnt_box_text">
                        <h4>{{ $podcast->podcast->album_name }}</h4>
                        <p style=" "> {!! $podcast->podcast->description !!} </p>
                    </div> </a>
                </div>
                @endforeach
               
            </div>
        </div>


        <div class="swiper-button-next-podcasts slider_nav_next"></div>
        <div class="swiper-button-prev-podcasts slider_nav_prev"></div>
    </div>
</div>
@endif

<style>.ms_rcnt_box_text p, .w_top_song .w_tp_song_name p {
   
    text-align: left;
}</style>
<!-- Artist -->
@if(isset($artist_data) && $artist_data->count() > 0)
<div class="ms_fea_album_slider join-conference-area1 ">
    <div class="container">
        <div class="section-title pt-4">
            <!-- <span class="top-title">Podcast and On-Demand</span> -->
            <h2>

                Favourite Artist</h2>
        </div>
        <div class="ms_artist_slider swiper-container pb-5">
            <div class="swiper-wrapper">
               
                @foreach($artist_data as $singer)


                @php

                if(!$singer->artist){
                continue;
                }


                $a_src = '';
                if($singer->artist && $singer->artist->image){
                $a_src = asset('/images/artist/'.$singer->artist->image);
                }
                //dd($singer->artist->id);

                // get last songs
                $songs = Modules\Audio\Entities\Audio::where('artist_id',"LIKE","%".$singer->artist->id."%")->orderBy('id','desc')->first();
               // dd($songs,$singer->artist);

               if($songs){
                $playlistItem = [
                                        "src" => audioPath($songs),
                                        "artist" =>'',
                                        "title" => $songs->audio_title ?? '',
                                        "poster" => $a_src,
                                        "id" => count($playlist)+50,
                                        "song_id" => $songs->id,
                                        'song_name' => $songs->audio_title,
                                        "program" =>$songs->parent_program->program_name,
                                    ];
                    $playlist[] =$playlistItem;
              }

                    $sharePath = route('presenters_view',array('id' => $singer->artist->id, 'slug' => $singer->artist->artist_slug));
                    $shareslug = $singer->artist->artist_name;

                @endphp
                <div class="swiper-slide pd">
                    <div class="ms_rcnt_box ms">
                        <div class="ms_rcnt_box_img">
                            <a href="{{ route('presenters_view',array('id' => $singer->artist->id, 'slug' => $singer->artist->artist_slug)) }}"> <img src="{{ $a_src }}" alt=""  class="img-fluid album-img1"></a>

                            <div class=" centered"><a href="#/"  class="ppbutton pp_bg fa fa-play" data-id={{$playlistItem['id']}}></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="" 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="ms_share_music" data-shareuri="{{$sharePath}}" data-sharename="{{ $shareslug }}"><span class="opt_icon"><span class="icon icon_share"></span></span>Share</a></li>
                                    {{-- delete --}}
                                    <li><a href="javascript:;" class="delete_song delete-favourite" data-id="{{ $singer->id }}" data-songname="{{ $singer->artist->artist_name }}"><span class="opt_icon"><span class="icon icon_queue"></span></span>Delete</a></li>
                                </ul>

                            </div>
    
                        </div>

                    </div>
                   <a href="{{ route('presenters_view',array('id' => $singer->artist->id, 'slug' => $singer->artist->artist_slug)) }}"> <div class="ms_rcnt_box_text">
                        <h4 class="">{{ $singer->artist->artist_name }}</h4>
                        <p> {!! $singer->artist->description !!} </p>
                    </div> </a>
                </div>
                @endforeach
               
            </div>
        </div>


        <div class="swiper-button-next-artists slider_nav_next"></div>
        <div class="swiper-button-prev-artists slider_nav_prev"></div>
    </div>
</div>
@endif


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

@endsection

@section('script')
<script>
isDetailsPage=true
    function deleteFavourite(id){
        let url = "{{ route('delete_from_favourite',':id') }}";
        url = url.replace(':id',id);
        $.ajax({
            url: url,
            type: 'GET',
            success: function(response){
                if(response.status == 1){
                    toastr.success(response.message);
                     //  $('#favourite_'+id).remove();
                    window.location.reload();
                }else{
                    toastr.error(response.message);
                }
            }
        });
    }
    
    // }

    //let 
    try{
        programPlaylist = JSON.parse('{!! json_encode($trackList,JSON_HEX_APOS) !!}');
        }catch(e){
        try{
            programPlaylist = {!! json_encode($trackList,JSON_HEX_APOS) !!}
        }catch(e){
            programPlaylist = [];
        }
    }


    $(document).on('click','.delete-favourite',function(){
        let id = $(this).data('id');

        let r = confirm("Are you sure you want to delete this item from your favourite list?");

        if (r == true) {
            
           let url = '{{ route("delete_from_favourite",":id") }}';
              url = url.replace(':id',id);

                $.ajax({
                    url: url,
                    type: 'GET',
                    success: function(response){
                        if(response.status == 1){
                            toastr.success(response.message);
                            window.location.reload();
                        }else{
                            toastr.error(response.message);
                        }
                    }
                });




        } else {
            return false;
        }


    });



    let plist = {!! json_encode($playlist) !!};

    //  function paycrntsong(el,icon=""){
    //     // console.log(icon);
        
    //     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 .play_no').removeClass('fa fa-pause');
    //         $(this).closest('ul').find('li:first a .play_no').removeClass('fa-play'); 
    //         $(this).closest('ul').find('li:first a .play_no').html(s_no);

    //     });
    //     if($('#'+el).hasClass('playing')){
    //         crntsong.pause();
    //         $(element).closest('ul').find('li:first .play_no').removeClass('fa fa-pause');
    //         $(element).closest('ul').find('li:first a .play_no').html("");
    //         $(element).closest('ul').find('li:first .play_no').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 .play_no').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 .play_no').removeClass('fa fa-pause');    
    //             $(element).closest('ul').find('li:first .play_no').addClass('fa fa-play'); 
    //             $(element).closest('ul').find('li').css({'color':'#be032f'});
    //             $(element).removeClass('playing');
    //            });
    //     }

        //change icon 
        // if(icon != ""){
        //      const elm = '#'+icon;
        //     $('.ppbutton').not(this).each(function(){
        //         $(this).removeClass('fa-pause');
        //          $(this).addClass('fa-play');
        //     });  
        //     if($('#'+icon).hasClass('start')){
        //         // alert('play');
        //         $(elm).removeClass('fa-pause');
        //         $(elm).addClass('fa-play');
        //         $(elm).removeClass('start');
        //     }else{
        //         // alert('pause');
        //         $(elm).removeClass('fa-play');
        //         $(elm).addClass('fa-pause');
        //         $(elm).addClass('start');
        //     }

        // }
   // }

</script>
@endsection