@inject('carbon', 'Carbon\Carbon')

@props([
    'items' => [
        (object)[
            'image' => asset('images/stations/radio-christian.jpg'),
            'url' => '/stations/premier-christian-radio/schedule/today',
            'slug' => 'premier-christian-radio'
        ],
        (object)[
            'image' => asset('images/stations/radio-praise.jpg'),
            'url' => '/stations/premier-praise/schedule/today',
            'slug' => 'premier-praise'

        ],
        (object)[
            'image' => asset('images/stations/radio-gospel.jpg'),
            'url' => '/stations/premier-gospel/schedule/today',
            'slug' => 'premier-gospel'
        ]
    ],
    'station' => (object)[]
])

<div class="bg-grad-header overflow-x-hidden">
    <div class="relative">
        <x-sections.header-top/>
        <h1 class="h2 md:h1 pt-10 md:pt-2 text-center text-white">Radio Schedule</h1>
    </div>

    <div class="relative pt-14 pb-14">
        <div class="absolute z-10 bottom-0 left-0 right-0 h-2/5 bg-grad-more"></div>
        <div class="container-1 relative">
            <div class="relative justify-between items-center w-full z-30 flex">
                @foreach($items as $item)
                    @php($selected = $item->slug === $station->slug)
                    <a href="{{ $item->url }}" @class([
                    'group relative block flex-auto mx-2 sm:mx-5 lg:mx-14 outline-none',
                    'md:basis-[25%] ' => !$selected,
                    'md:basis-[28%] ' => $selected,
                    ])>
                        <div class="
                        absolute inset-0 group-hover:bg-grad-white-fade-80-0 group-hover:border-2 border-white rounded scale-110 group-focus:bg-grad-white-fade-80-0 group-focus:border-2
                        {{$selected ? 'bg-grad-white-fade-80-0 border-2 border-white rounded' : 'opacity-50'}}
                        "></div>
                        <div
                            class="group-hover:shadow-lg aspect-square bg-grey-600 bg-center bg-cover rounded-sm flex justify-center relative"
                            style="background-image: url({{ $item->image }})">
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </div>


    <div class="container-1 relative z-40">
        <div class="flex flex-wrap py-8 justify-center gap-x-4">

            <a
                class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2 font-barlow text-2xl {{ ( request()->segment(4) == 'yesterday') ? 'underline' : '' }}"
                href="{{ route('stations.schedule.show', ['station' => $station->slug, 'type' => 'yesterday'])}}">
                Yesterday
            </a>
            <a
                class="link hover:opacity-75 text-white px-2.5 py-2 font-barlow text-2xl {{ ( request()->segment(4) == 'today') ? 'underline' : '' }}"
                href="{{ route('stations.schedule.show', ['station' => $station->slug, 'type' => 'today'])}}">
                Today
            </a>
            <a
                class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2 font-barlow text-2xl {{ ( request()->segment(4) == 'tomorrow') ? 'underline' : '' }}"
                href="{{ route('stations.schedule.show', ['station' => $station->slug, 'type' => 'tomorrow'])}}">
                Tomorrow
            </a>
            @foreach(range(2, 7) as $day)
                <a
                    class="link hover:opacity-75 hover:no-underline text-white px-2.5 py-2 font-barlow text-2xl {{ ( request()->segment(4) == strtolower($carbon::now()->addDays($day)->format('l')) ) ? 'underline' : '' }}"
                    href="{{ route('stations.schedule.show', ['station' => $station->slug, 'type' => strtolower($carbon::now()->addDays($day)->format('l'))]) }}">
                    @if($day < 7)
                        {{ substr($carbon::now()->addDays($day)->format('l'), 0, 3) }}
                    @endif
                </a>
            @endforeach
        </div>
    </div>

    @push('head.bottom')
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
        />
    @endpush
    @push('body.bottom')
        <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
    @endpush
</div>