@extends('layouts.front.main')
@section('title', __('frontWords.album_single'))
@section('content')
    @php
        $playlist = [];
    @endphp
    <style>
        .ms_rcnt_box_text h4,
        .w_top_song .w_tp_song_name h4 {

            text-align: center;

        }

        .ms_rcnt_boxs {

            height: 140px;
        }

        #brandCarousel1 .owl-nav button.owl-prev {

            top: 150px;

        }

        #brandCarousel1 .owl-nav button.owl-next {

            top: 150px;

        }

        #brandCarousel .owl-nav button.owl-prev {

            top: 150px;

        }

        #brandCarousel .owl-nav button.owl-next {

            top: 150px;

        }

        @media(max-width:600px) {
            .ms_rcnt_boxs {

                height: auto;
            }

            .ms_rcnt_box_img {

                height: auto;
            }

            .album-img11 {
                width: 100%;
                height: auto;
                min-width: 250px;
                transform: scale(1.0, 1.0);
            }

            .pd {

                padding-left: 15px;
                padding-right: 15px;
            }
        }
    </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">PODCASTS</h1>
                    </div>
                </div>
            </div>

        </div>

    </div>


    <div class="events-area schedules-style-two-areas events-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="section-title pt-4 ">

                        <h2>

                            Featured Podcasts</h2>
                    </div>
                    <div class="  " data-cue="slideInLeft" data-duration="1200" data-show="true"
                        style="animation-name: slideInLeft; animation-duration: 1200ms; animation-timing-function: ease; animation-delay: 0ms; animation-direction: normal; animation-fill-mode: both; ">

                        <div class=" inner-block">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="owl-slider">
                                        <div id="brandCarousel1" class="owl-carousel ms_top_artist">
                                            @if ($featured->count() > 0)
                                                @foreach ($featured as $featured_song)
                                                    @php
                                                        $f_src = '';
                                                        $f_audios = '';
                                                        $f_songs = '';
                                                        // $f_src = asset('/images/podcast/'.$featured_song->image);

                                                        if (
                                                            ($featured_song->image != '' &&
                                                                strpos($featured_song->image, 'https://') !== false) ||
                                                            strpos($featured_song->image, 'http://') !== false
                                                        ) {
                                                            $f_src = $featured_song->image;
                                                        } elseif (
                                                            $featured_song->image != '' &&
                                                            file_exists(
                                                                public_path('images/podcast/' . $featured_song->image),
                                                            )
                                                        ) {
                                                            $f_src = asset('images/podcast/' . $featured_song->image);
                                                        } else {
                                                            $f_src = dummyImage(
                                                                'custom',
                                                                $featured_song->album_slug,
                                                                500,
                                                            );
                                                        }

                                                        $f_audios = $featured_song->song_list
                                                            ? json_decode($featured_song->song_list)
                                                            : [];
                                                        if (!is_array($f_audios) || count($f_audios) == 0) {
                                                            continue;
                                                        }
                                                        $f_songs = Modules\Audio\Entities\Audio::findOrFail(
                                                            $f_audios[0],
                                                        );
                                                        if ($f_songs->parent_program) {
                                                            $playlistItem = [
                                                                'src' => audioPath($f_songs),
                                                                'artist' => '',
                                                                'title' => $featured_song->album_name,
                                                                'poster' => $f_src,
                                                                'id' => count($playlist) + 50,
                                                                'song_id' => $f_songs->id,
                                                                'song_name' => $f_songs->audio_title,
                                                                'program' => $f_songs->parent_program->program_name,
                                                            ];
                                                            $playlist[] = $playlistItem;
                                                        }
                                                    @endphp
                                                    <div class="item pd">
                                                        <div class="ms_rcnt_box ">
                                                            <div class="ms_rcnt_box_img">
                                                                <a
                                                                    href="{{ route('single_album', ['slug' => $featured_song->album_slug]) }}">
                                                                    <img src="{{ $f_src }}" alt=""
                                                                        class="img-fluid album-img11" style=""></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', ['type' => 'podcast', 'id' => $featured_song->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="podcast" data-content-id="{{ $featured_song->id }}" data-content-name="{{ $featured_song->album_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('single_album', ['slug' => $featured_song->album_slug]) }}"
                                                                                data-sharename="{{ $featured_song->album_slug }}"><span
                                                                                    class="opt_icon"><span
                                                                                        class="icon icon_share"></span></span>Share</a>
                                                                        </li>
                                                                    </ul>
                                                                    <div class="ms_play_icon play_btn play_music play_icon_btn d-none"
                                                                        data-musicid="8" data-musictype="artist"
                                                                        data-url="#">

                                                                    </div>
                                                                </div>
                                                                <div class="  centered">
                                                                    <a id="ppbutton1" data-id="{{ $playlistItem['id'] }}"
                                                                        class="ppbutton fa fa-play"
                                                                        data-src="{{ audioPath($f_songs) }}"></a>

                                                                </div>

                                                            </div>
                                                        </div>
                                                        <div class="ms_rcnt_box_text ms_rcnt_boxs m-0">
                                                            <h4 class=""><a
                                                                    href="{{ route('single_album', ['slug' => $featured_song->album_slug]) }}">{{ $featured_song->album_name }}</a>
                                                            </h4>
                                                            <p>
                                                            <div class="overflow-description"> {!! $featured_song->description !!}
                                                            </div>
                                                            </p>
                                                        </div>

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

                                </div>
                            </div>
                        </div>



                    </div>

                </div>



                <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="section-title pt-4">
                        <h2>Newly Released Podcasts</h2>
                    </div>

                    <div class="   pb-4 " data-cue="slideInLeft" data-duration="1200" data-show="true"
                        style="animation-name: slideInLeft; animation-duration: 1200ms; animation-timing-function: ease; animation-delay: 0ms; animation-direction: normal; animation-fill-mode: both;  ">

                        <div class=" inner-block">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="owl-slider">
                                        <div id="brandCarousel" class="owl-carousel ms_top_artist">
                                            @if ($newly_released->count() > 0)
                                                @foreach ($newly_released as $new_songs)
                                                    @php
                                                        $new_src = '';
                                                        $new_audios = '';
                                                        $n_songs = '';
                                                        //  $new_src = asset('/images/podcast/'.$new_songs->image);

                                                        if (
                                                            ($new_songs->image != '' &&
                                                                strpos($new_songs->image, 'https://') !== false) ||
                                                            strpos($new_songs->image, 'http://') !== false
                                                        ) {
                                                            $new_src = $new_songs->image;
                                                        } elseif (
                                                            $new_songs->image != '' &&
                                                            file_exists(
                                                                public_path('images/podcast/' . $new_songs->image),
                                                            )
                                                        ) {
                                                            $new_src = asset('images/podcast/' . $new_songs->image);
                                                        } else {
                                                            $new_src = dummyImage(
                                                                'custom',
                                                                $new_songs->album_slug,
                                                                500,
                                                            );
                                                        }

                                                        $new_audios = $new_songs->song_list
                                                            ? json_decode($new_songs->song_list)
                                                            : [];

                                                        if (!is_array($new_audios) || count($new_audios) == 0) {
                                                            continue;
                                                        }
                                                        //dd($new_audios);
                                                        $n_songs = Modules\Audio\Entities\Audio::findOrFail(
                                                            $new_audios[0],
                                                        );
                                                        //  dd($n_songs);
                                                        if ($n_songs->parent_program) {
                                                            $playlistItem = [
                                                                'src' => audioPath($n_songs),
                                                                'artist' => '',
                                                                'title' => $new_songs->album_name,
                                                                'poster' => $new_src,
                                                                'id' => count($playlist) + 50,
                                                                'song_id' => $n_songs->id,
                                                                'song_name' => $n_songs->audio_title,
                                                                'program' => $n_songs->parent_program->program_name,
                                                            ];
                                                            $playlist[] = $playlistItem;
                                                        }
                                                    @endphp
                                                    <div class="item pd">
                                                        <div class="ms_rcnt_box ">
                                                            <div class="ms_rcnt_box_img">
                                                                <a
                                                                    href="{{ route('single_album', ['slug' => $new_songs->album_slug]) }}">
                                                                    <img src="{{ $new_src }}" alt=""
                                                                        class="img-fluid album-img11" style=""> </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="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 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="podcast" data-content-id="{{ $new_songs->id }}" data-content-name="{{ $new_songs->album_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('single_album', ['slug' => $new_songs->album_slug]) }}"
                                                                                data-sharename="{{ $new_songs->album_slug }}"><span
                                                                                    class="opt_icon"><span
                                                                                        class="icon icon_share"></span></span>Share</a>
                                                                        </li>
                                                                    </ul>
                                                                    <div class="ms_play_icon play_btn play_music play_icon_btn d-none"
                                                                        id="pt_1" onclick="play_prime(1)"
                                                                        data-musicid="8" data-musictype="artist"
                                                                        data-url="#">

                                                                    </div>
                                                                </div>
                                                                <div class="  centered">
                                                                    <a id="ppbutton1" data-id="{{ $playlistItem['id'] }}"
                                                                        class="ppbutton fa fa-play"
                                                                        data-src="{{ audioPath($n_songs) }}"></a>

                                                                </div>

                                                            </div>
                                                        </div>
                                                        <div class="ms_rcnt_box_text ms_rcnt_boxs m-0">
                                                            <h4 class=""><a
                                                                    href="{{ route('single_album', ['slug' => $new_songs->album_slug]) }}">{{ $new_songs->album_name }}
                                                                </a></h4>
                                                            <p>
                                                                <a href="{{ route('single_album', ['slug' => $new_songs->album_slug]) }}"
                                                                    style="color: #ffffff;">
                                                                    <div class="overflow-description">
                                                                        {!! $new_songs->description !!} </div>
                                                                </a>
                                                            </p>
                                                        </div>

                                                    </div>
                                                @endforeach
                                            @endif

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>



                    </div>

                </div>


            </div>
        </div>

    </div>
    <div id="pagination_data">
        @include('front.podcast_pagination')
    </div>

    <style>
        .owl-nav button.owl-prev {
            left: -27px;
            top: 184px;
            diplay: none;

        }

        .owl-nav button.owl-next {
            right: -25px;
            top: 184px;
        }

        @media (max-width:600px) {

            .owl-nav button.owl-prev {
                left: 0px;
                top: 184px;
                diplay: none;

            }

            .owl-nav button.owl-next {
                right: 0px;
                top: 184px;
            }

        }
    </style>


    </div>
@endsection


@section('script')

    <script type="text/javascript">
        let plist = {!! json_encode($playlist) !!};
        let plistCnt = plist.length;
        let lastplistID = parseInt(plist[plist.length - 1].id);

        // podcast-item-all
        // $('.podcast-item-all .ppbutton').each(function(){

        // })




        function addToPlaylist() {
            let i = 1;
            $('.podcast-item-all').each(function() {
                let src = $(this).find('.ppbutton').attr('data-src');
                let image = $(this).find('.ms_rcnt_box_img').find('img').attr('src');
                let title = $(this).find('.ms_rcnt_box_text').find('h4').find('a').text();
                let artist = '';

                let newIndx = lastplistID + i;
                let newItm = {
                    'src': src,
                    'poster': image,
                    'title': title,
                    'artist': artist,
                    "id": newIndx
                }
                plist.push(newItm);

                $(this).find('.ppbutton').attr('data-id', newIndx);

                i++;
            })




        }
        addToPlaylist();


        $(window).on('hashchange', function() {
            if (window.location.hash) {
                let hashValue = window.location.hash.replace('#', '');
                // #page=2
                var page = hashValue.split('=')[1];
                if (page == Number.NaN || page <= 0) {
                    return false;
                } else {
                    getData(page);
                }
            }
        });
        $(document).ready(function() {
            $(document).on('click', '.pagination a', function(event) {
                event.preventDefault();
                $('li').removeClass('active');
                $(this).parent('li').addClass('active');
                var myurl = $(this).attr('href');
                var page = $(this).attr('href').split('page=')[1];
                getData(page);
            });
        });

        function getData(page) {
            $.ajax({
                url: '?page=' + page,
                type: "get",
                datatype: "html"
            }).done(function(data) {
                $("#pagination_data").empty().html(data);
                location.hash = "page=" + page;
                addToPlaylist();
            }).fail(function(jqXHR, ajaxOptions, thrownError) {
                alert('No response from server');
            });
        }
    </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(800);
            $('#show-less').show();
            $('#show-more').hide();
        });

        $('#show-less').click(function() {
            $('#show-more-content').hide(150);
            $('#show-more').show();
            $(this).hide();
        });
    </script>
    <script>
        function play_song(el) {
            event.preventDefault();
            var audio = document.getElementById(el);
            var el_Id = '#' + el;
            $('audio').not(audio).each(function() {
                $(this).removeClass('playing');
                this.pause();
            });
            if ($(el_Id).hasClass('playing')) {
                audio.pause();
                $(el_Id).removeClass('playing');
            } else {
                $(el_Id).addClass('playing');
                audio.play();
            }
            return false;
        }
    </script>

    <script>
        $(document).ready(function() {
            @if(Auth::check())
            // Check notification subscription status for all podcasts
            $('.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 podcast
                $.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');
                        }
                    }
                });
            });
            @endif
        });
    </script>
@endsection