@extends('layouts.front.main')
@section('title', __('frontWords.home'))
@section('style')
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap"
        rel="stylesheet">
@endsection
@section('content')

    @php
        $playlist = [];
        $previousProgramPlaylist = [];

        // Get Settings home_page_banner
        $homePageSettings = \DB::table('settings')->where('name', 'home_page_banner')->first();
        $bannerData = $homePageSettings ? json_decode($homePageSettings->value) : null;

        // Determine Background Image
        $heroBgImage = '';
        if ($bannerData && isset($bannerData->background_image) && !empty($bannerData->background_image)) {
            $heroBgImage = asset('images/home_page/' . $bannerData->background_image);
        } else {
            // Default background if not set
            $heroBgImage = asset('assets/images/hero_banner.png');
        }
    @endphp


    <!-- MODERN HERO SECTION -->
    <section class="modern-hero"
        style="background: url('{{ $heroBgImage }}') no-repeat center center; background-size: cover;">
        <div class="hero-content-modern container">
            <div class="hero-left-modern">
                <div class="hero-logo-modern">
                    <img class=" banner_logo" src="{{ asset('/assets/images/logo.png') }}" alt="banner"
                        border="0">
                </div>

                @if (!empty($live) || $bannerData)
                    {{-- Lathis Infomed in Group we removed on 12-02-2026 --}}
                    {{-- <div class="hero-status-modern">
                        @if (!empty($live))
                            <span class="live-tag-modern">LIVE</span>
                            <span
                                class="time-slot-modern">{{ date('h:i A', strtotime($live->start_time)) . ' - ' . date('h:i A', strtotime($live->end_time)) }}</span>
                        @else
                            <span class="live-tag-modern">ON-DEMAND</span>
                        @endif
                    </div> --}}

                    <h1 class="hero-title-modern">
                        {{ $bannerData->program_name ?? ($live->program_name ?? '') }}
                    </h1>

                    <p class="hero-tagline-modern" style="color: #fff; font-size: 31px; margin-bottom: 30px;">
                        {{ $bannerData->tagline_text ?? '' }}
                    </p>

                    <a href="{{ $bannerData->url ?? '#' }}"
                        class="play-button-modern mb-3 d-inline-flex justify-content-center align-items-center"
                        style="text-decoration: none;">
                        <svg width="50" height="50" viewBox="0 0 130 130" fill="none"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M51.459 84.414V45.585a2.707 2.707 0 0 1 4.17-2.275l30.204 19.408a2.71 2.71 0 0 1 0 4.561L55.629 86.694a2.71 2.71 0 0 1-4.17-2.275z"
                                fill="#fff" />
                        </svg>
                    </a>

                    <button class="btn-alexa-modern">
                        Link my Alexa
                        <svg width="25" height="25" viewBox="0 0 24 24" fill="none" style="margin-left: 5px; ">
                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="white"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="white"
                                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                    </button>
                @endif
            </div>

            <div class="hero-right-modern">
                @if ($bannerData && isset($bannerData->host_image) && !empty($bannerData->host_image))
                    <img src="{{ asset('images/home_page/' . $bannerData->host_image) }}" alt="Host"
                        class="host-image-modern">
                @elseif (!empty($presenter_banner_img))
                    <img src="{{ $presenter_banner_img }}" alt="Host" class="host-image-modern">
                @else
                    <img src="{{ asset('assets/images/profile.png') }}" alt="Host" class="host-image-modern">
                @endif
            </div>
        </div>
    </section>

    <!-- UP NEXT SECTION -->
    <section class="up-next-modern">
        <div class="container">

            <div class="row area-52">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <h2 class="section-title-modern">Up Next</h2>
                    <div class="carousel-wrapper-modern">
                        <button class="carousel-nav-modern prev" onclick="scrollUpNext('prev')">
                            <i class="fas fa-chevron-left"></i>
                        </button>

                        <div class="up-next-carousel-modern " id="upNextCarousel">
                            @if (!empty($upnext))
                                @php
                                    $upnextChunked = array_chunk($upnext->toArray(), 5);
                                @endphp
                                @foreach ($upnextChunked as $chunk)
                                    <div class="carousel-slide-modern">
                                        <div class="up-next-grid-modern row">
                                            <!-- Featured Big Card (Left) -->
                                            @if (isset($chunk[0]))
                                                @php $upcomming = (object)$chunk[0]; @endphp
                                                <div class="col ">
                                                    <div class="card-image-modern">
                                                        <img class="img-fluid album-img3p123"
                                                            src="{{ asset('images/programs/' . $upcomming->image) }}"
                                                            alt="{{ $upcomming->program_name }}">
                                                    </div>
                                                    <div class="card-info-modern mt-3">
                                                        <h4 style="max-width: 100%;"><a
                                                                href="{{ route('program_details', ['slug' => $upcomming->slug]) }}"
                                                                style="color: #fff; text-decoration: none;">{{ $upcomming->program_name }}</a>
                                                        </h4>
                                                        <h3 style="text-align: center;"><i class="far fa-clock"></i>
                                                            {{ date('h:i A', strtotime($upcomming->start_time)) . ' - ' . date('h:i A', strtotime($upcomming->end_time)) }}
                                                        </h3>
                                                        <span style="font-size: 20px;text-align:center;align-items: center;">
                                                            <svg fill="#fff" width="18px" height="18px"
                                                                viewBox="0 0 0.6 0.6" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M0.3 0.375a0.1 0.1 0 0 0 0.1 -0.1V0.125A0.1 0.1 0 0 0 0.2 0.125v0.15A0.1 0.1 0 0 0 0.3 0.375ZM0.25 0.125a0.05 0.05 0 0 1 0.1 0v0.15a0.05 0.05 0 0 1 -0.1 0Zm0.25 0.15a0.025 0.025 0 0 0 -0.05 0A0.15 0.15 0 0 1 0.15 0.275a0.025 0.025 0 0 0 -0.05 0 0.2 0.2 0 0 0 0.175 0.198V0.525H0.225a0.025 0.025 0 0 0 0 0.05h0.15a0.025 0.025 0 0 0 0 -0.05H0.325V0.473A0.2 0.2 0 0 0 0.5 0.275Z">
                                                                </path>
                                                            </svg>
                                                            @php
                                                                $artist_name = [];
                                                                if (
                                                                    isset($upcomming->artist_name) &&
                                                                    $upcomming->artist_name != null &&
                                                                    $upcomming->artist_name != ''
                                                                ) {
                                                                    foreach (
                                                                        json_decode($upcomming->artist_name)
                                                                        as $key => $value
                                                                    ) {
                                                                        $artist_name[] =
                                                                            \Modules\Artist\Entities\Artist::find(
                                                                                $value,
                                                                            )->artist_name ?? '';
                                                                    }
                                                                }
                                                            @endphp
                                                            <small
                                                                class="artist-names">{{ implode(', ', array_filter($artist_name)) }}</small>
                                                        </span>

                                                    </div>
                                                </div>
                                            @endif

                                            <!-- Small Cards Grid (Right - 2x2) -->
                                            <div class="small-cards-grid-modern col-lg-9">
                                                @for ($i = 1; $i <= 4; $i++)
                                                    @if (isset($chunk[$i]))
                                                        @php $upcomming = (object)$chunk[$i]; @endphp
                                                        <div class="show-card-modern  small">
                                                            <div class="card-image-modern"
                                                                style="margin-right:3px solid white">
                                                                <img class="img-fluid album-img3p1234"
                                                                    src="{{ asset('images/programs/' . $upcomming->image) }}"
                                                                    alt="{{ $upcomming->program_name }}">
                                                            </div>
                                                            <div class="card-info-modern">
                                                                <h4 class="text-left"><a
                                                                        href="{{ route('program_details', ['slug' => $upcomming->slug]) }}"
                                                                        style="color: #fff; text-decoration: none;">{{ $upcomming->program_name }}</a>
                                                                </h4>
                                                                <h3 class="text-left mt-2"><i class="far fa-clock"></i>
                                                                    {{ date('h:i A', strtotime($upcomming->start_time)) . ' - ' . date('h:i A', strtotime($upcomming->end_time)) }}
                                                                </h3>
                                                                <span style="font-size: 20px;text-align:left;display: flex;align-items: center;">
                                                                    <svg fill="#fff" width="18px" height="18px"
                                                                        viewBox="0 0 0.6 0.6"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path
                                                                            d="M0.3 0.375a0.1 0.1 0 0 0 0.1 -0.1V0.125A0.1 0.1 0 0 0 0.2 0.125v0.15A0.1 0.1 0 0 0 0.3 0.375ZM0.25 0.125a0.05 0.05 0 0 1 0.1 0v0.15a0.05 0.05 0 0 1 -0.1 0Zm0.25 0.15a0.025 0.025 0 0 0 -0.05 0A0.15 0.15 0 0 1 0.15 0.275a0.025 0.025 0 0 0 -0.05 0 0.2 0.2 0 0 0 0.175 0.198V0.525H0.225a0.025 0.025 0 0 0 0 0.05h0.15a0.025 0.025 0 0 0 0 -0.05H0.325V0.473A0.2 0.2 0 0 0 0.5 0.275Z">
                                                                        </path>
                                                                    </svg>
                                                                    @php
                                                                        $artist_name = [];
                                                                        if (
                                                                            isset($upcomming->artist_name) &&
                                                                            $upcomming->artist_name != null &&
                                                                            $upcomming->artist_name != ''
                                                                        ) {
                                                                            foreach (
                                                                                json_decode($upcomming->artist_name)
                                                                                as $key => $value
                                                                            ) {
                                                                                $artist_name[] =
                                                                                    \Modules\Artist\Entities\Artist::find(
                                                                                        $value,
                                                                                    )->artist_name ?? '';
                                                                            }
                                                                        }
                                                                    @endphp
                                                                    <small
                                                                        class="artist-names">{{ implode(', ', array_filter($artist_name)) }}</small>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endfor
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <button class="carousel-nav-modern next" onclick="scrollUpNext('next')">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- PREVIOUS STREAM SECTION -->
    <section class="previous-stream-modern">
        <div class="container">
            <div class="row area-52">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <h2 class="section-title-modern">Previous Stream</h2>

                    <div class="carousel-wrapper-modern">
                        <button class="carousel-nav-modern prev" onclick="scrollPreviousStream('prev')">
                            <i class="fas fa-chevron-left"></i>
                        </button>

                        <div class="up-next-carousel-modern" id="previousStreamCarousel">
                            @if (!empty($previousPrograms))
                                @php
                                    $previousProgramsArray = [];
                                    foreach ($previousPrograms as $previos_stream) {
                                        if (!isset($cnt)) {
                                            $cnt = 0;
                                        }
                                        $cnt = $cnt + 1;

                                        $songs = Modules\Audio\Entities\Audio::where(
                                            'program_id',
                                            $previos_stream->program_id,
                                        )
                                            ->orderBy('id', 'desc')
                                            ->first();
                                        // skip if no audio found for this previous stream
                                        if (!$songs) {
                                            continue;
                                        }

                                        // artist name
                                        $artists = json_decode($previos_stream->artist_name);

                                        if (!is_array($artists) || count($artists) == 0) {
                                            $artists = [];
                                            continue;
                                        }
                                        $artist = \Modules\Artist\Entities\Artist::find($artists[0]);
                                        if (!$artist || $artist == '') {
                                            continue;
                                        }

                                        $item = [
                                            'src' => audioPath($songs),
                                            'artist' => $artist->artist_name ?? '',
                                            'title' => $previos_stream->program_name,
                                            'poster' => asset('/images/programs/' . $previos_stream->image),
                                            'id' => count($playlist) + 2,
                                            'song_id' => $songs->id,
                                            'song_name' => $songs->audio_title,
                                            'program' => $songs->parent_program->program_name ?? '',
                                        ];

                                        $playlist[] = $item;
                                        $previousProgramPlaylist[] = $item;

                                        $previousProgramsArray[] = [
                                            'program' => $previos_stream,
                                            'item' => $item,
                                            'songs' => $songs,
                                        ];
                                    }
                                    $previousChunked = array_chunk($previousProgramsArray, 5);
                                @endphp

                                @foreach ($previousChunked as $chunk)
                                    <div class="carousel-slide-modern">
                                        <div class="previous-stream-grid-modern row" style="">
                                            <!-- Small Cards Grid (Left - 2x2) -->
                                            <div class="small-cards-grid-modern col">
                                                @for ($i = 0; $i < 4; $i++)
                                                    @if (isset($chunk[$i]))
                                                        @php
                                                            $previos_stream = $chunk[$i]['program'];
                                                            $item = $chunk[$i]['item'];
                                                            $songs = $chunk[$i]['songs'];
                                                        @endphp
                                                        <div class="show-card-modern psmall " style="margin-left: ">
                                                            <div class="card-image-modern">
                                                                <img class="img-fluid album-img3p1234"
                                                                    src="{{ asset('images/programs/' . $previos_stream->image) }}"
                                                                    alt="{{ $previos_stream->program_name }}"
                                                                    style="">
                                                                <div
                                                                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
                                                                    <a id="ppbutton21" class="ppbutton fa fa-play"
                                                                        data-id="{{ $item['id'] }}"
                                                                        data-src="{{ audioPath($songs) }}"
                                                                        style="width: 50px; height: 50px; border-radius: 50%; background: rgba(224,49,54,0.8); display: none; align-items: center; justify-content: center; margin-right: 15px; color: #fff; font-size: 18px; cursor: pointer;"></a>
                                                                </div>
                                                            </div>
                                                            <div class="card-info-modern">
                                                                <h4 class="text-left"><a
                                                                        href="{{ route('program_details', ['slug' => $previos_stream->slug]) }}"
                                                                        style="color: #fff; text-decoration: none;">{{ $previos_stream->program_name }}</a>
                                                                </h4>
                                                                <h3 class="mt-2"><i class="far fa-clock"></i>
                                                                    {{ date('h:i A', strtotime($previos_stream->start_time)) . ' - ' . date('h:i A', strtotime($previos_stream->end_time)) }}
                                                                </h3>

                                                                <span style="font-size: 20px;text-align:left;   align-items: center;display: flex; ">
                                                                    <svg fill="#fff" width="18px" height="18px"
                                                                        viewBox="0 0 0.6 0.6"
                                                                        xmlns="http://www.w3.org/2000/svg">
                                                                        <path
                                                                            d="M0.3 0.375a0.1 0.1 0 0 0 0.1 -0.1V0.125A0.1 0.1 0 0 0 0.2 0.125v0.15A0.1 0.1 0 0 0 0.3 0.375ZM0.25 0.125a0.05 0.05 0 0 1 0.1 0v0.15a0.05 0.05 0 0 1 -0.1 0Zm0.25 0.15a0.025 0.025 0 0 0 -0.05 0A0.15 0.15 0 0 1 0.15 0.275a0.025 0.025 0 0 0 -0.05 0 0.2 0.2 0 0 0 0.175 0.198V0.525H0.225a0.025 0.025 0 0 0 0 0.05h0.15a0.025 0.025 0 0 0 0 -0.05H0.325V0.473A0.2 0.2 0 0 0 0.5 0.275Z">
                                                                        </path>
                                                                    </svg>
                                                                    @php
                                                                        $artist_name = [];
                                                                        if (
                                                                            isset($previos_stream->artist_name) &&
                                                                            $previos_stream->artist_name != null &&
                                                                            $previos_stream->artist_name != ''
                                                                        ) {
                                                                            foreach (
                                                                                json_decode(
                                                                                    $previos_stream->artist_name,
                                                                                )
                                                                                as $key => $value
                                                                            ) {
                                                                                $artist_name[] =
                                                                                    \Modules\Artist\Entities\Artist::find(
                                                                                        $value,
                                                                                    )->artist_name ?? '';
                                                                            }
                                                                        }
                                                                    @endphp
                                                                    <small
                                                                        class="artist-names">{{ implode(', ', array_filter($artist_name)) }}</small>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    @endif
                                                @endfor
                                            </div>

                                            <!-- Featured Big Card (Right) -->
                                            @if (isset($chunk[4]))
                                                @php
                                                    $previos_stream = $chunk[4]['program'];
                                                    $item = $chunk[4]['item'];
                                                    $songs = $chunk[4]['songs'];
                                                @endphp
                                                <div class="show-card-modern  purple col">
                                                    <div class="card-image-modern">
                                                        <img class="img-fluid album-img3p1235"
                                                            src="{{ asset('images/programs/' . $previos_stream->image) }}"
                                                            alt="{{ $previos_stream->program_name }}"
                                                            style="margin-left:0px;    width: 100%;">

                                                        <div
                                                            style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10;">
                                                            <a id="ppbutton21" class="ppbutton fa fa-play"
                                                                data-id="{{ $item['id'] }}"
                                                                data-src="{{ audioPath($songs) }}"
                                                                style="width: 70px; height: 70px; border-radius: 50%; background: rgba(255,255,255,0.3); display: none; align-items: center; justify-content: center; color: #fff; font-size: 24px; cursor: pointer; border: 2px solid #fff;"></a>
                                                        </div>
                                                    </div>
                                                    <div class="card-info-modern">
                                                        <h4 class="mt-3" style="max-width: 100%;"><a
                                                                href="{{ route('program_details', ['slug' => $previos_stream->slug]) }}"
                                                                style="color: #fff; text-decoration: none;">{{ $previos_stream->program_name }}</a>
                                                        </h4>
                                                        <h3 style="text-align: center;max-width: 100%;"><i
                                                                class="far fa-clock"></i>
                                                            {{ date('h:i A', strtotime($previos_stream->start_time)) . ' - ' . date('h:i A', strtotime($previos_stream->end_time)) }}
                                                        </h3>
                                                        <span style="font-size: 20px;text-align:center;">
                                                            <svg fill="#fff" width="18px" height="18px"
                                                                viewBox="0 0 0.6 0.6" xmlns="http://www.w3.org/2000/svg">
                                                                <path
                                                                    d="M0.3 0.375a0.1 0.1 0 0 0 0.1 -0.1V0.125A0.1 0.1 0 0 0 0.2 0.125v0.15A0.1 0.1 0 0 0 0.3 0.375ZM0.25 0.125a0.05 0.05 0 0 1 0.1 0v0.15a0.05 0.05 0 0 1 -0.1 0Zm0.25 0.15a0.025 0.025 0 0 0 -0.05 0A0.15 0.15 0 0 1 0.15 0.275a0.025 0.025 0 0 0 -0.05 0 0.2 0.2 0 0 0 0.175 0.198V0.525H0.225a0.025 0.025 0 0 0 0 0.05h0.15a0.025 0.025 0 0 0 0 -0.05H0.325V0.473A0.2 0.2 0 0 0 0.5 0.275Z">
                                                                </path>
                                                            </svg>
                                                            @php
                                                                $artist_name = [];
                                                                if (
                                                                    isset($previos_stream->artist_name) &&
                                                                    $previos_stream->artist_name != null &&
                                                                    $previos_stream->artist_name != ''
                                                                ) {
                                                                    foreach (
                                                                        json_decode($previos_stream->artist_name)
                                                                        as $key => $value
                                                                    ) {
                                                                        $artist_name[] =
                                                                            \Modules\Artist\Entities\Artist::find(
                                                                                $value,
                                                                            )->artist_name ?? '';
                                                                    }
                                                                }
                                                            @endphp
                                                            <small
                                                                class="artist-names">{{ implode(', ', array_filter($artist_name)) }}</small>
                                                        </span>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

                        <button class="carousel-nav-modern next" onclick="scrollPreviousStream('next')">
                            <i class="fas fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @if ($campaigns)
        <div class="modal fade campaign-model" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class=" ">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                        style="
    z-index: 1;
    "><span aria-hidden="true"><svg fill="#ffffff" width="18px"
                                height="18px" viewBox="0 0 0.6 0.6" id="cross" data-name="Flat Color"
                                xmlns="http://www.w3.org/2000/svg" class="icon flat-color">
                                <path id="primary"
                                    d="m0.335 0.3 0.158 -0.157a0.025 0.025 0 1 0 -0.035 -0.035L0.3 0.265l-0.157 -0.158a0.025 0.025 0 0 0 -0.035 0.035l0.158 0.157 -0.158 0.157a0.025 0.025 0 0 0 0 0.035 0.025 0.025 0 0 0 0.035 0l0.157 -0.158 0.157 0.158a0.025 0.025 0 0 0 0.035 0 0.025 0.025 0 0 0 0 -0.035Z"
                                    style="fill: #fff" />
                            </svg></span></button>

                    <img src="{{ asset('/images/sites/' . $campaigns->image) }}" alt="" style=" width:100%;">

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

    <style>
        .carousel-nav-modern {
            color: white;
            background: transparent;
            border: 3px solid white;
        }

        .campaign-model .modal-dialog {
            /* Width */
            max-width: 100%;
            width: 900px !important;
            display: inline-block;
        }

        .campaign-model .close {
            position: absolute;
            /*right: 22px;*/
            z-index: 1;
            /*top: 89px;*/
            width: 30px;
            height: 30px;
            background-image: linear-gradient(140deg, #7F051D 0%, #DA0238 100%);
            opacity: 1;
            border-radius: 100%;
            cursor: pointer !important;
            line-height: 10px;
        }

        .owl-nav button.owl-next {
            right: -67px;
            top: 50%;
        }

        .owl-nav button.owl-prev {
            left: -69px;
            top: 50%;
            diplay: none;
        }

        .owl-carousel .owl-nav button.owl-next,
        .owl-carousel .owl-nav button.owl-prev,
        .owl-carousel button.owl-dot {
            background-color: transparent;
            color: inherit;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 3px solid white;
            padding: 0 !important;
            font: inherit;
        }

        .owl-nav i {
            font-size: 22px;
            position: relative;
            line-height: 31px;
        }

        @media (max-width:600px) {
            .campaign-model .close {
                position: absolute;
                right: 22px;
                z-index: 1;
                /* top: 33px;*/
                line-height: 10px;
                width: 25px;
                height: 25px;
                background-image: linear-gradient(140deg, #7F051D 0%, #DA0238 100%);
                opacity: 1;
                border-radius: 100%;
                cursor: pointer !important;
            }

            .campaign-model .modal-dialog {
                /* Width */
                max-width: 100%;
                width: 100% !important;
                display: inline-block;
                padding-right: 13px;
            }

            .owl-nav button.owl-next {
                right: -31px;
                top: 50%;
            }

            .owl-nav button.owl-prev {
                left:-31px;
                top: 50%;
                diplay: none;
            }
			.owl-carousel .owl-nav button.owl-next,
        .owl-carousel .owl-nav button.owl-prev,
        .owl-carousel button.owl-dot {
            background-color: transparent;
            color: inherit;
            width: 35px;
            height: 35px;
            border-radius: 50%;
            border: 3px solid white;
            padding: 0 !important;
            font: inherit;
        }
		.owl-nav i {
    font-size: 17px;
    position: relative;
    line-height: 31px;
}
        }
		
    </style>


    <!-- PRIME TIME PROGRAMS SECTION -->
    <section class="flagship-programs-modern">
        <div class="container">
            <div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <h2 class="section-title-modern text-white">Flagship Programs</h2>

                    <div class="owl-slider">


                        <div class="owl-carousel ms_top_artist" id="primetimeGrid">
                            @if (!empty($prime_programs))
                                @foreach ($prime_programs as $prime_program)
                                    @php
                                        $src = '';
                                        $audios = '';
                                        $songs = '';
                                        $src = asset('/images/programs/' . $prime_program->image);

                                        $audios = json_decode($prime_program->song_list);
                                        $songs = Modules\Audio\Entities\Audio::where(
                                            'program_id',
                                            $prime_program->program_id,
                                        )
                                            ->orderBy('id', 'desc')
                                            ->first();
                                        if (!$songs) {
                                            continue;
                                        }

                                        $artist_name = [];
                                        if (isset($prime_program->artist_name) && $prime_program->artist_name != '') {
                                            foreach (json_decode($prime_program->artist_name) as $key => $value) {
                                                $artist_name[] =
                                                    \Modules\Artist\Entities\Artist::find($value)->artist_name ?? '';
                                            }
                                        }
                                        $playlistItem = [
                                            'src' => audioPath($songs),
                                            'poster' => $src,
                                            'title' => $prime_program->program_name,
                                            'artist' => implode(',', $artist_name),
                                            'id' => count($playlist) + 2,
                                            'song_id' => $songs->id,
                                            'song_name' => $songs->audio_title,
                                            'program' => $songs->parent_program->program_name ?? '',
                                        ];
                                        $playlist[] = $playlistItem;

                                    @endphp

                                    <div class="program-card-modern">
                                        <div class="program-image-modern">
                                            <a href="{{ route('program_details', ['slug' => $prime_program->slug]) }}">
                                                <img class="img-fluid album-img3p" src="{{ $src }}"
                                                    alt="{{ $prime_program->program_name }}">
                                            </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">
                                                        </path>
                                                    </svg>
                                                </div>
                                                <ul class="more_option">
                                                    <li><a href="javascript:;" class="addToFavourite"
                                                            data-favourite="{{ $songs->id }}" data-type="audio"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_fav"></span></span>Add To
                                                            Favourites</a></li>
                                                    <li><a href="javascript:;" class="add_to_queue d-none"
                                                            data-musicid="{{ $songs->id }}"
                                                            data-musictype="audio"><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="{{ $prime_program->program_id }}"
                                                            data-content-name="{{ $prime_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', ['slug' => $prime_program->slug]) }}"
                                                            data-sharename="{{ $prime_program->program_name }}"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_share"></span></span>Share</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="program-footer-modern">
                                            <button class="play-btn-small-modern" id="ppbutton20{{ $prime_program->id }}"
                                                data-id="{{ $playlistItem['id'] }}" data-src="{{ audioPath($songs) }}"
                                                onclick="event.preventDefault(); playAudio(this);">
                                                <i class="fas fa-play"></i>
                                            </button>
                                            <div class="program-info-modern">
                                                <h3><a href="{{ route('program_details', ['slug' => $prime_program->slug]) }}"
                                                        style="color: #fff; text-decoration: none;">{{ $prime_program->program_name }}</a>
                                                </h3>
                                                @php
                                                    $time = $prime_program->time;
                                                    if ($time == null) {
                                                        $start_time = $prime_program->start_time;
                                                        $end_time = $prime_program->end_time;
                                                        $time =
                                                            date('h:i A', strtotime($start_time)) .
                                                            ' - ' .
                                                            date('h:i A', strtotime($end_time));
                                                    }
                                                @endphp
                                                <p>{{ implode(', ', $artist_name) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>

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

    <!-- SPECIALIST PROGRAMS SECTION -->
    <section class="flagship-programs-modern" style="background: var(--dark-bg);">
        <div class="container">
            <div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <h2 class="section-title-modern text-white">Specialist Programs</h2>

                    <div class="owl-slider">


                        <div id="SpecialistPrograms" class="owl-carousel ms_top_artist">
                            @if (!empty($specialist_programs))
                                @foreach ($specialist_programs as $specialist_program)
                                    @php
                                        $src = '';
                                        $audios = '';
                                        $songs = '';
                                        $src = asset('/images/programs/' . $specialist_program->image);

                                        $audios = json_decode($specialist_program->song_list);
                                        $songs = Modules\Audio\Entities\Audio::where(
                                            'program_id',
                                            $specialist_program->program_id,
                                        )
                                            ->orderBy('id', 'desc')
                                            ->first();
                                        if (!$songs) {
                                            continue;
                                        }
                                        $artist_name = [];
                                        if (
                                            isset($specialist_program->artist_name) &&
                                            $specialist_program->artist_name != ''
                                        ) {
                                            foreach (json_decode($specialist_program->artist_name) as $key => $value) {
                                                $artist_name[] =
                                                    \Modules\Artist\Entities\Artist::find($value)->artist_name ?? '';
                                            }
                                        }

                                        $playlistItem = [
                                            'src' => audioPath($songs),
                                            'title' => $specialist_program->program_name,
                                            'artist' => implode(',', $artist_name),
                                            'poster' => $src,
                                            'id' => count($playlist) + 2,
                                            'song_id' => $songs->id,
                                            'song_name' => $songs->audio_title,
                                            'program' => $songs->parent_program->program_name ?? '',
                                        ];

                                        $playlist[] = $playlistItem;

                                    @endphp

                                    <div class="program-card-modern">
                                        <div class="program-image-modern">
                                            <a
                                                href="{{ route('program_details', ['slug' => $specialist_program->slug]) }}">
                                                <img class="img-fluid album-img3p" src="{{ $src }}"
                                                    alt="{{ $specialist_program->program_name }}">
                                            </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">
                                                        </path>
                                                    </svg>
                                                </div>
                                                <ul class="more_option">
                                                    <li><a href="javascript:;" class="addToFavourite"
                                                            data-favourite="{{ $songs->id }}" data-type="audio"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_fav"></span></span>Add To
                                                            Favourites</a></li>
                                                    <li><a href="javascript:;" class="add_to_queue d-none"
                                                            data-musicid="{{ $songs->id }}"
                                                            data-musictype="audio"><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="{{ $specialist_program->program_id }}"
                                                            data-content-name="{{ $specialist_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', ['slug' => $specialist_program->slug]) }}"
                                                            data-sharename="{{ $specialist_program->program_name }}"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_share"></span></span>Share</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="program-footer-modern">
                                            <button class="play-btn-small-modern"
                                                id="ppbutton_spprime{{ $specialist_program->id }}"
                                                data-id="{{ $playlistItem['id'] }}" data-src="{{ audioPath($songs) }}"
                                                onclick="event.preventDefault(); playAudio(this);">
                                                <i class="fas fa-play"></i>
                                            </button>
                                            <div class="program-info-modern">
                                                <h3><a href="{{ route('program_details', ['slug' => $specialist_program->slug]) }}"
                                                        style="color: #fff; text-decoration: none;">{{ $specialist_program->program_name }}</a>
                                                </h3>
                                                <p>{{ implode(', ', $artist_name) }}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>


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




    <div class="schedules-style-two-area1 p-4">
        <div class="container">

            <div class="schedules-style-two-tabs">

                <div class="banner-area-2  pb-90 clearfix">
                    <!-- Single Banner -->
                    <div class="sin-banner-2 col-xl-12 col-md-12 zoomWrapper"><img src="assets/images/banner.jpg"
                            alt="banner">
                        <div class="banner-content-2 center">
                            <h1>ADVERTISE WITH US</h2>
                                <a href="{{ url('/advertise') }}" class="ms_btn2 mt-3"
                                    style="    background: none;    border: 1px solid;">Contact Us</a>
                        </div>
                    </div>
                    <!-- Single Banner -->

                    <!-- Single Banner -->

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




    <!-- POPULAR PODCASTS SECTION -->
    <section class="flagship-programs-modern">
        <div class="container">
            <div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <p class="section-subtitle-modern">Podcast & On-Demand</p>
                    <h2 class="section-title-modern text-white">Popular Podcasts</h2>


                    <div class="owl-slider">


                        <div class="owl-carousel ms_top_artist" id="podcastspop">
                            @if ($podcasts->count() > 0)
                                @foreach ($podcasts as $podcast)
                                    @php
                                        $src = '';
                                        $audios = '';
                                        $songs = '';
                                        // $src = asset('/images/podcast/'.$podcast->image);

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

                                        $audios = json_decode($podcast->song_list);
                                        if (!is_array($audios) || count($audios) == 0) {
                                            $audios = [];
                                            $audios[] = 0;
                                            continue;
                                        }
                                        $lastSong = end($audios);
                                        $songs = Modules\Audio\Entities\Audio::find($lastSong);
                                        if (!$songs) {
                                            continue;
                                        }
                                        $playlistItem = [
                                            'src' => audioPath($songs),
                                            'title' => $podcast->album_name,
                                            'artist' => '',
                                            'poster' => $src,
                                            'id' => count($playlist) + 2,
                                            'song_id' => $songs->id,
                                            'song_name' => $songs->audio_title,
                                            'program' => $songs->parent_program->program_name ?? '',
                                        ];
                                        $playlist[] = $playlistItem;
                                    @endphp
                                    <div class="program-card-modern">
                                        <div class="program-image-modern">
                                            <a href="{{ route('single_album', ['slug' => $podcast->album_slug]) }}">
                                                <img class="img-fluid album-img3p" src="{{ $src }}"
                                                    alt="{{ $podcast->album_name }}">
                                            </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">
                                                        </path>
                                                    </svg>
                                                </div>
                                                <ul class="more_option">
                                                    <li><a href="javascript:;" class="addToFavourite"
                                                            data-favourite="{{ $songs->id }}" data-type="audio"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_fav"></span></span>Add To
                                                            Favourites</a></li>
                                                    <li><a href="javascript:;" class="add_to_queue d-none"
                                                            data-musicid="{{ $songs->id }}"
                                                            data-musictype="audio"><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="{{ $podcast->id }}"
                                                            data-content-name="{{ $podcast->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' => $podcast->album_slug]) }}"
                                                            data-sharename="{{ $podcast->album_name }}"><span
                                                                class="opt_icon"><span
                                                                    class="icon icon_share"></span></span>Share</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="program-footer-modern">
                                            <button class="play-btn-small-modern" id="ppbutton40{{ $podcast->id }}"
                                                data-id="{{ $playlistItem['id'] }}" data-src="{{ audioPath($songs) }}"
                                                onclick="event.preventDefault(); playAudio(this);">
                                                <i class="fas fa-play"></i>
                                            </button>
                                            <div class="program-info-modern">
                                                <h3><a href="{{ route('single_album', ['slug' => $podcast->album_slug]) }}"
                                                        style="color: #fff; text-decoration: none;">{{ $podcast->album_name }}</a>
                                                </h3>
                                                <p class="podcast-description "style="font-size:14px;">{!! strip_tags($podcast->description) !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>


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



    <!-- ONLY ON DISRUPT SECTION -->
    <section class="flagship-programs-modern" style="background: var(--dark-bg);">
        <div class="container">
            <div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
                    <p class="section-subtitle-modern">Conversation</p>
                    <h2 class="section-title-modern text-white">Only On Disrupt</h2>


                    <div class="owl-slider">


                        <div class="owl-carousel ms_top_artist" id="disruptGrid">
                            @if ($blogs->count() > 0)
                                @foreach ($blogs as $blog)
                                    @php
                                        $src = '';
                                        $src = asset('/images/blogs/' . $blog->image);
                                    @endphp
                                    <div class="program-card-modern">
                                        <a href="{{ route('blog_details', $blog->id) }}">
                                            <div class="program-image-modern">
                                                <img class="img-fluid album-img3p12" src="{{ $src }}"
                                                    alt="{{ $blog->title }}">
                                            </div>
                                        </a>
                                        <div class="program-footer-modern"
                                            style="background: transparent; padding: 20px 0;height:161px;">
                                            <div class="program-info-modern px-3" style="width: 100%;">
                                                <h5 class="mb-3"><a href="{{ route('blog_details', $blog->id) }}"
                                                        style="color: #fff; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">{{ $blog->title }}</a>
                                                </h5>
                                                <p class="blog-excerpt"
                                                    style="display: -webkit-box; -webkit-line-clamp: 3;        font-size: 13px; -webkit-box-orient: vertical; overflow: hidden;">
                                                    {!! strip_tags($blog->detail) !!}</p>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                        </div>


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

    <!-- ========================================
                                         HOW TO LISTEN SECTION
                                    ======================================== -->
    <section class="how-to-listen">
        <div class="container">
		<div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
            <h2 class="section-title-modern ">How To Listen</h2>

            <div class="listen-options">
                <div class="listen-card">
                    <div class="listen-icon">
                        <img src="{{ asset('assets/images/svg/computer1.svg') }}" />
                    </div>
                    <h3>Web Stream</h3>
                </div>

                <div class="listen-card">
                    <div class="listen-icon">
                        <img src="{{ asset('assets/images/svg/phone3.svg') }}" />
                    </div>
                    <h3>Mobile App</h3>
                </div>

                <div class="listen-card">
                    <div class="listen-icon">
                        <img src="{{ asset('assets/images/svg/headphone2.svg') }}" />
                    </div>
                    <h3>Podcasts</h3>
                </div>

                <div class="listen-card">
                    <div class="listen-icon">
                        <img src="{{ asset('assets/images/svg/smart-speaker4.svg') }}" />
                    </div>
                    <h3>Smart Speakers</h3>
                </div>
            </div>
       

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

    <!-- ========================================
                                         NEWSLETTER SECTION - DARE TO DISRUPT
                                    ======================================== -->
    <section class="newsletter-section">
        <div class="container">
		<div class="row area-5">
                <div class="col-lg-12 col-md-12 col-xl-12 Program">
            <div class="newsletter-content">
                <div class="newsletter-text">
                    <h2>Newsletter Sign-up</h2>
                    <p>The best of Disrupt Radio <br>delivered directly to your inbox.</p>
                </div>
                <form class="newsletter-form" method="post" action="{{ route('save_subscribers') }}"
                    id="subscriber_form">
                    @csrf
                    <input type="email" name="subs_email" id="subscriber_email" placeholder="Your Email Address"
                        required>
                    <button type="submit" class="btn-subscribe" id="subsformbtn">SUBSCRIBE</button>
                </form>
            </div>
			 </div>
			  </div>
        </div>
    </section>
    </div>
    </div>

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


    <div class="ms_fea_album_slider d-none">
        <div class="ms_heading">
            <h1>{{ __('frontWords.featured') . ' ' . __('frontWords.album') }}</h1>
        </div>
        @if (sizeof($featured_album) > 0)

            <div class="ms_album_slider swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($featured_album as $album)
                        @php
                            $artist_name = get_artist_name(['album_id' => $album->id]);
                            $getLikeDislikeAlbum = getFavDataId(['column' => 'album_id', 'album_id' => $album->id]);
                        @endphp
                        <div class="swiper-slide">
                            <div class="ms_rcnt_box">
                                <div class="ms_rcnt_box_img">
                                    @if ($album->image != '' && file_exists(public_path('images/album/' . $album->image)))
                                        <img src="{{ asset('images/album/' . $album->image) }}" alt=""
                                            class="img-fluid album-img">
                                    @else
                                        <img src="{{ dummyImage('album') }}" alt="" class="img-fluid album-img">
                                    @endif

                                    <div class="ms_main_overlay">
                                        <div class="ms_box_overlay"></div>
                                        <div class="ms_more_icon">
                                            <img src="{{ asset('assets/images/svg/more.svg') }}" alt="">
                                        </div>
                                        <ul class="more_option">
                                            <li><a href="javascript:;" class="addToFavourite"
                                                    data-favourite="{{ $album->id }}" data-type="album"><span
                                                        class="opt_icon"><span
                                                            class="icon {{ $getLikeDislikeAlbum == 1 ? 'icon_fav_add' : 'icon_fav' }}"></span></span>{{ __('frontWords.favourites') }}</a>
                                            </li>
                                            <li><a href="javascript:;" class="add_to_queue"
                                                    data-musicid="{{ $album->id }}" data-musictype="album"><span
                                                        class="opt_icon"><span
                                                            class="icon icon_queue"></span></span>{{ __('frontWords.add_to') . ' ' . __('frontWords.queue') }}</a>
                                            </li>
                                            <li><a href="javascript:;" class=""
                                                    data-shareuri="{{ url('album/single/' . $album->id . '/' . $album->album_slug) }}"
                                                    data-sharename="{{ $album->album_name }}"><span
                                                        class="opt_icon"><span
                                                            class="icon icon_share"></span></span>{{ __('frontWords.share') }}</a>
                                            </li>
                                        </ul>
                                        <div class="ms_play_icon play_btn play_music play_icon_btn"
                                            data-musicid="{{ $album->id }}" data-musictype="album"
                                            data-url="{{ url('/songs') }}">

                                        </div>
                                    </div>
                                </div>
                                <div class="ms_rcnt_box_text">
                                    <h3><a
                                            href="{{ url('album/single/' . $album->id . '/' . $album->album_slug) }}">{{ $album->album_name }}</a>
                                    </h3>
                                    <p>{{ rtrim($artist_name, ',') }}</p>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @else
            <div class="ms_empty_data">
                <p>{{ __('frontWords.no_album') }}</p>
            </div>
        @endif
        <div class="swiper-button-next1 slider_nav_next"></div>
        <div class="swiper-button-prev1 slider_nav_prev"></div>
    </div>

    @if (sizeof($testimonials) > 0)

        <div class="ms_fea_album_slider ms_test_wrapper d-none">
            <div class="ms_heading">
                <input type="hidden" id="testimonial_count" value="{{ sizeof($testimonials) }}">
                <h1>{{ __('frontWords.testimonial') }} ({{ sizeof($testimonials) }})</h1>
            </div>
            <div class="ms_testimonial_slider swiper-container">
                <div class="swiper-wrapper">
                    @foreach ($testimonials as $testimonial)
                        <div class="swiper-slide">
                            <div class="ms_test_box">
                                <div class="ms_test_top">
                                    <div class="ms_test_img">
                                        @if ($testimonial->image != '' && file_exists(public_path('images/testimonial/' . $testimonial->image)))
                                            <img src="{{ asset('images/testimonial/' . $testimonial->image) }}"
                                                alt="" class="img-fluid">
                                        @else
                                            <img src="{{ dummyImage('testimonial') }}" alt=""
                                                class="img-fluid">
                                        @endif
                                    </div>
                                    <div class="ms_test_name">
                                        <h3>{{ $testimonial->client_name }}</h3>
                                        <div class="ms_test_para">
                                            <p>{{ strtoupper($testimonial->designation) }}</p>
                                            <div class="rating{{ $testimonial->id }}" data-star="rating"
                                                data-rating="{{ $testimonial->rating }}"></div>
                                        </div>
                                        <p>{{ strip_tags($testimonial->detail) }}</p>
                                        <span
                                            class="cmnt_time">{{ $testimonial->created_at->diffForHumans(date('Y-m-d h:i:s')) }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="swiper-button-next1 slider_nav_next"></div>
            <div class="swiper-button-prev1 slider_nav_prev"></div>
        </div>

    @endif

@endsection

@section('script')


    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>

    <script>
        $(document).ready(function() {
            @if ($campaigns)
                setTimeout(function() {
                    $('.campaign-model').modal('show');
                }, 1000);
            @endif

            $('.campaign-model').on('hidden.bs.modal', function() {
                $('.campaign-model').remove();
            });
        });

        // player = videojs('myVideo'); // Removed - no element with id 'myVideo' exists
        // player = videojs('myVideo'); // Duplicate removed
        let liveProgram = @json($live->program_name ?? '');
        if (typeof liveProgram === 'string' && liveProgram.length > 0) {
            liveProgram = liveProgram.replace(/ /g, "_");
            liveProgram = liveProgram.replace(/&/g, "_");
            liveProgram = liveProgram.replace(/:/g, "_");
            liveProgram = liveProgram.replace(/,/g, "_");
            liveProgram = liveProgram.replace(/'/g, "_");
        } else {
            liveProgram = '';
        }

        currentTimesec = new Date();
        liveProgram = liveProgram + "_" + currentTimesec.getDate() + currentTimesec.getMonth() + currentTimesec
            .getFullYear();

        var radio_text = document.getElementById('radio_text');
        window.plist = {!! json_encode($playlist) !!};

        $(document).ready(function() {
            $('#subscriber_email').keyup(function() {
                let email = $(this).val();
                if (email.length > 0) {
                    checkMailisUnique(email);
                }
            });
            $('#subscriber_email').blur(function() {
                let email = $(this).val();
                if (email.length > 0) {
                    checkMailisUnique(email);
                }
            });

            function checkMailisUnique(email) {
                $.ajax({
                    type: "POST",
                    url: "{{ route('checkSubMailIsUnique') }}",
                    data: {
                        email: email,
                        _token: "{{ csrf_token() }}",
                    },
                    success: function(resp) {
                        let data = JSON.parse(resp);
                        if (data.status == 'error') {
                            $('.subs_email_err').show();
                            $('#subsformbtn').attr('disabled', true);
                        } else {
                            $('.subs_email_err').hide();
                            $('#subsformbtn').attr('disabled', false);
                        }
                    }
                });
            }
        });
    </script>

    <!-- Modern Dashboard Carousel JavaScript -->
    <script>
        // ========================================
        // CAROUSEL FUNCTIONALITY
        // ========================================

        let upNextCurrentSlide = 0;
        let previousStreamCurrentSlide = 0;

        // Up Next Carousel Navigation
        window.scrollUpNext = function(direction) {
            const carousel = document.getElementById("upNextCarousel");
            if (!carousel) return;

            const slides = carousel.querySelectorAll(".carousel-slide-modern");
            const totalSlides = slides.length;

            if (direction === "next") {
                upNextCurrentSlide = (upNextCurrentSlide + 1) % totalSlides;
            } else {
                upNextCurrentSlide = (upNextCurrentSlide - 1 + totalSlides) % totalSlides;
            }

            carousel.style.transform = `translateX(-${upNextCurrentSlide * 100}%)`;
        };

        // Previous Stream Carousel Navigation
        window.scrollPreviousStream = function(direction) {
            const carousel = document.getElementById("previousStreamCarousel");
            if (!carousel) return;

            const slides = carousel.querySelectorAll(".carousel-slide-modern");
            const totalSlides = slides.length;

            if (direction === "next") {
                previousStreamCurrentSlide =
                    (previousStreamCurrentSlide + 1) % totalSlides;
            } else {
                previousStreamCurrentSlide =
                    (previousStreamCurrentSlide - 1 + totalSlides) % totalSlides;
            }

            carousel.style.transform = `translateX(-${
    previousStreamCurrentSlide * 100
  }%)`;
        };

        // Helper function for play live radio
        window.playLiveRadio = function() {
            if (typeof player !== 'undefined' && player) {
                player.play();
            }
        };
    </script>

    <script>
        jQuery("#SpecialistPrograms").owlCarousel({
            autoplay: false,
            rewind: true,
            /* use rewind if you don't want loop */
            margin: 20,
            /*
              animateOut: 'fadeOut',
              animateIn: 'fadeIn',
              */
            responsiveClass: true,
            autoHeight: true,
            autoplayTimeout: 7000,
            smartSpeed: 800,
            nav: true,
            navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },

                600: {
                    items: 2
                },

                1024: {
                    items: 4
                },

                1366: {
                    items: 4
                }
            }
        });
    </script>
    <script>
        jQuery("#primetimeGrid").owlCarousel({
            autoplay: false,
            rewind: true,
            /* use rewind if you don't want loop */
            margin: 20,
            /*
              animateOut: 'fadeOut',
              animateIn: 'fadeIn',
              */
            responsiveClass: true,
            autoHeight: true,
            autoplayTimeout: 7000,
            smartSpeed: 800,
            nav: true,
            navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },

                600: {
                    items: 2
                },

                1024: {
                    items: 4
                },

                1366: {
                    items: 4
                }
            }
        });
    </script>
    <script>
        jQuery("#podcastspop").owlCarousel({
            autoplay: false,
            rewind: true,
            /* use rewind if you don't want loop */
            margin: 20,
            /*
              animateOut: 'fadeOut',
              animateIn: 'fadeIn',
              */
            responsiveClass: true,
            autoHeight: true,
            autoplayTimeout: 7000,
            smartSpeed: 800,
            nav: true,
            navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },

                600: {
                    items: 2
                },

                1024: {
                    items: 4
                },

                1366: {
                    items: 4
                }
            }
        });
    </script>
    <script>
        jQuery("#disruptGrid").owlCarousel({
            autoplay: false,
            rewind: true,
            /* use rewind if you don't want loop */
            margin: 20,
            /*
              animateOut: 'fadeOut',
              animateIn: 'fadeIn',
              */
            responsiveClass: true,
            autoHeight: true,
            autoplayTimeout: 7000,
            smartSpeed: 800,
            nav: true,
            navText: ["<i class='fa fa-angle-left'></i>", "<i class='fa fa-angle-right'></i>"],
            dots: false,
            responsive: {
                0: {
                    items: 1
                },

                600: {
                    items: 2
                },

                1024: {
                    items: 4
                },

                1366: {
                    items: 4
                }
            }
        });
    </script>
    <!-- Include external modern dashboard JavaScript -->
    <script src="{{ asset('assets/js/front/modern-dashboard.js') }}"></script>

    <script>
        // Dashboard initialization - rely on main audio-player-videojs.js for all player functionality
        $(document).ready(function() {
            // Show player wrapper initially
            $('.ms_player_wrapper').show();

            // Monitor jp-state-playing class changes for button state sync
            if (document.getElementById('jp_container_1')) {
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            var target = mutation.target;
                            if (!target.classList.contains('jp-state-playing')) {
                                // When jp-state-playing is removed, clear custom button states
                                $('.dashboard-playlist-items, .play-btn-small-modern').removeClass(
                                    'playing');
                            }
                        }
                    });
                });

                observer.observe(document.getElementById('jp_container_1'), {
                    attributes: true,
                    attributeFilter: ['class']
                });
            }
        });

        // Play a program/playlist item - delegates to main VideoJS player
        window.playAudio = function(el) {
            try {
                var $el = $(el);
                var songId = $el.attr('data-song-id') || $el.attr('data-id');

                if (!songId) {
                    console.warn('playAudio: no song id found on element', el);
                    return;
                }

                // Get playlist data
                var list = window.plist || [];
                console.log('Searching for song ID:', songId, 'in playlist:', list);

                // Find the entry - try multiple search strategies
                var entry = list.find(function(p) {
                        return String(p.song_id) === String(songId);
                    }) ||
                    list.find(function(p) {
                        return String(p.id) === String(songId);
                    }) ||
                    list.find(function(p) {
                        return parseInt(p.song_id) === parseInt(songId);
                    }) ||
                    list.find(function(p) {
                        return parseInt(p.id) === parseInt(songId);
                    });

                if (!entry) {
                    console.warn('playAudio: playlist entry not found for', songId);
                    console.log('Available playlist entries:', list.map(function(p) {
                        return {
                            id: p.id,
                            song_id: p.song_id,
                            title: p.title || p.song_name
                        };
                    }));
                    return;
                }

                // Validate audio source
                if (!entry.src || entry.src === 'undefined' || entry.src.trim() === '') {
                    console.error('playAudio: invalid audio source:', entry.src);
                    alert('Audio source not available for this track');
                    return;
                }

                // Check if this exact song is already playing (toggle behavior)
                if ($el.hasClass('playing')) {
                    // Toggle off - stop the main player
                    if (typeof gmoplayer !== 'undefined' && gmoplayer) {
                        gmoplayer.pause();
                    }
                    $el.removeClass('playing');
                    return;
                }

                // Remove playing class from all buttons
                $('.dashboard-playlist-items, .play-btn-small-modern').removeClass('playing');

                // Create VideoJS compatible playlist item
                var videoJsSong = {
                    id: entry.song_id || entry.id || Math.floor(Math.random() * 10000) +
                        100, // Ensure it's not 1 (live stream ID)
                    sources: [{
                        src: entry.src,
                        type: 'audio/mpeg'
                    }],
                    title: entry.title || entry.song_name || 'Unknown Title',
                    artist: entry.artist || 'Unknown Artist',
                    poster: entry.poster || ''
                };

                // Use main VideoJS player (no duplication)
                if (typeof gmoplayer !== 'undefined' && gmoplayer) {
                    gmoplayer.playlist([videoJsSong]);
                    gmoplayer.playlist.currentItem(0);
                    gmoplayer.play();

                    // Update UI
                    $el.addClass('playing');
                    $('.ms_player_wrapper').removeClass('close_player').show();
                } else {
                    console.error('Main VideoJS player not available');
                }

            } catch (e) {
                console.error('playAudio error:', e);
            }
        };

        // Support clicks on play-button-individual inside playlist component (delegated)
        $(document).on('click', '.play-button-individual', function(e) {
            var $li = $(this);
            var $row = $li.closest('.dashboard-playlist-items');
            if ($row && $row.length) {
                var id = $row.attr('data-id');
                if (id) {
                    var entry = (window.plist || []).find(function(p) {
                        return String(p.song_id) === String(id) || String(p.id) === String(id);
                    });
                    if (entry) {
                        playAudio($('<button data-song-id="' + entry.song_id + '"></button>'));
                        return;
                    }
                }
            }
            var audioEl = $row.find('audio')[0];
            if (audioEl) {
                audioEl.play();
            }
        });
    </script>

    <!-- Check notification subscription status on page load -->
    <script>
        $(document).ready(function() {
            // Only check if user is logged in
            @if (Auth::check())
                $('.notification-toggle').each(function() {
                    var toggle = $(this);
                    var contentType = toggle.attr('data-content-type');
                    var contentId = toggle.attr('data-content-id');

                    // Skip if content_id is missing or empty
                    if (!contentId || contentId === '' || contentId === 'undefined') {
                        return; // continue to next element
                    }

                    // Check subscription status
                    $.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) {
                            // Silently fail - keep default icon
                            console.log('Could not check subscription status');
                        }
                    });
                });
            @endif
        });
    </script>
@endsection