@php

    // receive $spotlights collection
    $items = $stations ? $stations->map(function($station){
        $on_air_now = $station->epgFeed()?->onAirAt(now());

        $title = $on_air_now?->getTitle() ?? $station->title;
        $has_multilines = strpos($station->title, "\n");

        if($has_multilines){
            $title = \App\Helpers\FormattingHelper::explodeWithNewLine($title);
        }else{
            $title = \App\Helpers\FormattingHelper::formatWithString($title);
        }

        return (object)[
            'image' => $station->getThumbnail(true),
            'url' => $station->getUrl(),
            'text' => $title,
            'sub_thumbnail' => $on_air_now?->getBrand()?->getThumbnailForHomepage() ?? null,
            'live' => true
        ];
    }) : null;
@endphp

<x-layouts.master
    description="Premier Plus. Four Christian radio stations, live 24/7. Podcasts, music and sermons available on-demand. Never run out of quality Christian content. All completely FREE."
    :radiothons="$radiothons"
>
    <x-sections.header-home
        :items="$items"
    >
        <x-slot name="title">
            <h1 class="h3 text-white px-8">
                Experience&nbsp;Christian audio <br class="hidden sm:block lg:hidden" /> like&nbsp;never before
            </h1>
        </x-slot>
    </x-sections.header-home>

    @if(auth()->check())
        @if ($latest_episodes->count() >= 4)
            <div class="container-1 py-16 pb-16">
                <h2 class="h2 text-center text-purple pb-12">Latest Episodes For You</h2> 

                <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">
                    @foreach($latest_episodes as $item)
                        <x-cards.feature-card
                            :id="$item['latest_episode']->id"
                            :image="$item['latest_episode']->getOptimisedThumbnailRoute()"
                            :title="$item['subscription']->title"
                            :text="$item['latest_episode']->title"
                            :is-playable="true"
                            :url="$item['latest_episode']->getUrl()"
                            :button-url="$item['subscription']->getUrl()"
                            button-text="All Episodes"
                        ></x-cards.feature-card>
                    
                    @endforeach
                </div>
            </div>
        @endif

        @if ($listenable_progress_items->count() >= 4)
            <div class="container-1 py-16 pb-16">

                <div class="flex w-full justify-center">
                    <x-alert
                        class="mb-8 w-full max-w-md"
                        type="error"
                        :message="session('error')"
                    />
                </div>
                <h2 class="h2 text-center text-purple pb-12">Jump Back In</h2>

                <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">
                    @foreach($listenable_progress_items as $item)
                        @php
                            if (!$item->listenable) {
                                continue;
                            }
                            $type = $item->listenable_type === \App\Models\PodcastEpisode::class?'podcast':'audioSeries';
                            $text = !empty($item->listenable->episode_data->subtitle) ? $item->listenable->episode_data->subtitle : $item->listenable->intro;
                        @endphp

                        <x-cards.feature-card
                            :id="$item->id"
                            :image="$item->listenable->getOptimisedThumbnailRoute()"
                            :title="$item->listenable->title"
                            :text="$text"
                            :progress="$item->percentagePlayed()"
                            :is-playable="true"
                            :url="$item->listenable->getUrl()"
                            :button-url="$item->listenable->{$type}?->getUrl()"
                            button-text="All Episodes"
                        ></x-cards.feature-card>
                    @endforeach
                </div>
            </div>
        @endif
        <x-recommendations.index 
            recommendation-type="recommended"
            title="You Might Like"
            area="radio"
        />
    @else
        <x-recommendations.index
            recommendation-type="recommended"
            title="You Might Like"
            area="radio"
        />
    @endif

    @if ($block = $thematic_blocks->firstWhere('position', 'after_our_picks'))
        @include('components.thematic-block', ['items' => $block->recommendations, 'title' => $block->title]) 
    @endif

    <div class="container-1 py-16 pb-16">
        <h2 class="h2 text-center text-purple pb-12">Recent Podcasts</h2>

        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">

        @foreach($recent_podcasts as $item)

            <x-cards.feature-card
                :image="$item['thumbnail_img']"
                :title="$item['series_title']"
                :text="$item['intro']"
                :is-playable="true"
                :url="$item['url']"
                :button-url="$item['series_url']"
                button-text="All Episodes"
            ></x-cards.feature-card>

        @endforeach
        </div>
        
    </div>

    @if ($block = $thematic_blocks->firstWhere('position', 'after_recent_podcasts'))
        @include('components.thematic-block', ['items' => $block->recommendations, 'title' => $block->title]) 
    @endif

    <div class="container-1 py-16 pb-16">
        <h2 class="h2 text-center text-purple pb-12">Recent Music</h2>

        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">
            @foreach($recent_music as $item)

                <x-cards.feature-card
                    :image="$item['thumbnail_img']"
                    :title="$item['series_title']"
                    :text="$item['intro']"
                    :is-playable="true"
                    :url="$item['url']"
                    :button-url="$item['series_url']"
                    button-text="All Episodes"
                ></x-cards.feature-card>
            
            @endforeach
        </div>
        
    </div>

    @if ($block = $thematic_blocks->firstWhere('position', 'after_recent_music'))
        @include('components.thematic-block', ['items' => $block->recommendations, 'title' => $block->title]) 
    @endif

    <div class="container-1 py-16 pb-16">
        <h2 class="h2 text-center text-purple pb-12">Recent Sermons</h2>

        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-6 gap-4 md:gap-6 lg:gap-8">
            @foreach($recent_sermons as $item)

                <x-cards.feature-card
                    :image="$item['thumbnail_img']"
                    :title="$item['series_title']"
                    :text="$item['intro']"
                    :is-playable="true"
                    :url="$item['url']"
                    :button-url="$item['series_url']"
                    button-text="All Episodes"
                ></x-cards.feature-card>
            
            @endforeach
        </div>
        
    </div>

    @if ($block = $thematic_blocks->firstWhere('position', 'after_recent_sermons'))
        @include('components.thematic-block', ['items' => $block->recommendations, 'title' => $block->title]) 
    @endif

    @if ($promotional_blocks->count() >= 1)
         <x-promotional-blocks :promo_blocks="$promotional_blocks->take(2)" :start_purple="$promotional_blocks->take(2)->count() % 2 == 0"/>
    @endif
   
    <x-recommendations.index-bespoke
        content-types="AudioSeries,Podcast"
        title="Trending Audio"
    />

    @if ($block = $thematic_blocks->firstWhere('position', 'after_trending_audio'))
        @include('components.thematic-block', ['items' => $block->recommendations, 'title' => $block->title]) 
    @endif

    @php
        $remaining_two_promo_blocks = $promotional_blocks->splice(2);
    @endphp
    <x-promotional-blocks :promo_blocks="$remaining_two_promo_blocks" :start_purple="$remaining_two_promo_blocks->count() % 2 == 0"></x-promotional-blocks>

    <div class="bg-grad-explore-alt md:bg-grad-explore py-20">
        <div class="container-1 text-white pb-14">
            <h1 class="h3 md:h1 text-center">Explore</h1>
            <h4 class="h4 md:h3 py-7">Sermons</h4>

            <div class="grid grid-cols-2 text-center sm:grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6 lg:gap-4 xl:gap-6">
                @foreach($sermon_themes as $sermon_theme)
                    <x-cards.thumb
                        :href="$sermon_theme->getSearchUrl()"
                        :title="$sermon_theme->title"
                        :image="$sermon_theme->getOptimisedThumbnailRoute()"
                    />
                @endforeach
            </div>
        </div>
        <div class="container-1 text-white pb-14">
            <h4 class="h4 md:h3 py-7">Music</h4>

            <div class="grid grid-cols-2 text-center sm:grid-cols-3 sm:grid-cols-4 md:grid-cols-4 lg:grid-cols-6 gap-4 sm:gap-6 lg:gap-4 xl:gap-6">
                @foreach($music_genres as $music_genre)
                    <x-cards.thumb
                        :href="$music_genre->getSearchUrl()"
                        :title="$music_genre->genre"
                        :image="$music_genre->getOptimisedThumbnailRoute()"
                    />
                @endforeach
            </div>
        </div>
    </div>

    <template x-if="!appRequest">
        <x-sections.footer />
    </template
</x-layouts.master>