{{-- Depricated: used livewire/highlight-content instead --}}

{{-- remove commented array items and watch browser add items automatically within 10s. Be sure to turn off Vite. --}}
@php
    $items = [
//                (object)[
//                    'id' => 779,
//                    'type' => 'generic',
//                    'title' => '',
//                    'text' => '',
//                    'text_secondary' => '',
//                    'link_text' => '',
//                    'link_url' => '',
//                    'image' => '',
//                ],
//                (object)[
//                    'id' => 66,
//                    'type' => 'verse',
//                    'title' => 'I have come that they may have life, and have it to the full.',
//                    'text' => 'John 10:10',
//                    'link_text' => 'Read More',
//                    'link_url' => '#'
//                ],
//                (object)[
//                    'id' => 1,
//                    'type' => 'verse',
//                    'title' => 'I have come that they may have life, and have it to the full.',
//                    'text' => 'John 10:10',
//                    'link_text' => 'Read More',
//                    'link_url' => '#'
//                ],
        (object)[
            'id' => 4,
            'type' => 'verse',
            'title' => 'I have come that they may have life, and have it to the full.',
            'text' => 'John 10:10',
            'link_text' => 'Read More',
            'link_url' => '#'
        ],
        (object)[
            'id' => 5,
            'type' => 'quote',
            'title' => 'I agree that we should be brushing our teeth, but I draw the line at three times a day.',
            'text' => 'PeterPlumber23',
            'text_secondary' => 'Listening in Glasgow',
        ],
        (object)[
            'id' => 2,
            'type' => 'generic',
            'title' => '',
            'text' => '',
            'text_secondary' => '',
            'link_text' => '',
            'link_url' => '',
            'image' => fake()->imageUrl(400,600),
        ],
    ];
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-11" x-data="{
                init() {
                    window.wrapGrid(this.$el);

                    {{-- get highlight fragment every 10 seconds and add items that are new --}}
                    setInterval(()=>{
                        fetch('/styles-highlight-test')
                          .then(response => response.text())
                          .then(data => {
                            const oldIds = Array.from(this.$el.querySelectorAll('div'))
                              .map(item => item.dataset.id).filter(Boolean);

                            const temp = document.createElement('div');
                            temp.innerHTML = data;

                            const newElements = Array.from(temp.querySelectorAll('div[data-id]'))
                                .filter(item => !(oldIds.indexOf(item.dataset.id) >= 0));

                            if (newElements.length > 0) {
                                this.$el.insertAdjacentHTML('afterbegin', newElements.map(el => el.outerHTML).join(''));
                            }
                          });
                    }, 10000);
                }
            }">
    @fragment('highlights')
    @foreach($items as $item)
        @switch($item->type)
            @case('verse')
                <div data-id="{{$item->id}}" class="animate-fadein bg-grad-grey rounded-sm flex">
                    <div class="flex flex-col p-7 text-white">
                        <p class="italic flex-auto max-w-md">{{ $item->title }}</p>
                        <h5 class="text-lg font-bold pt-2">{{ $item->text }}</h5>
                        <a href="#" class="font-bold text-pink underline">{{ $item->link_text }}</a>
                    </div>
                </div>
                @break
            @case('quote')
                <div data-id="{{$item->id}}" class="animate-fadein bg-grad-grey rounded-sm flex">
                    <div class="flex flex-col p-7 text-white">
                        <x-icon name="quote" size="1.3rem" />
                        <p class="italic flex-auto py-2 max-w-md">{{ $item->title }}</p>
                        <h5 class="text-lg font-bold pt-8">{{ $item->text }}</h5>
                        <h5>{{ $item->text_secondary }}</h5>
                    </div>
                </div>
                @break
            @case('generic')
                @if($item->image)
                    <div data-id="{{$item->id}}" class="animate-fadein md:col-span-2 bg-grad-grey md:bg-none rounded-sm overflow-hidden flex">
                        <div class="text-white flex flex-col md:flex-row items-center md:items-stretch w-full">
                            <div class="flex flex-none max-w-[10rem] pt-7 pb-5 md:py-5 relative">
                                <div class="bg-grad-grey px-5 rounded-l-sm absolute inset-y-0 right-0 hidden md:block"></div>
                                <div class="flex items-center">
                                    <img class="relative items-center block" width="400" height="600" src="{{ fake()->imageUrl(400,600) }}"  alt=""/>
                                </div>
                            </div>
                            <div class="md:bg-grad-grey pt-0 p-7 md:pt-7 flex flex-col md:pl-5 text-center md:text-left w-full">
                                <h5 class="text-lg font-bold">On Earth as in Heaven</h5>
                                <p class="">By Tom Wright</p>
                                <p class="pt-4 pb-2 flex-auto max-w-2xl">On Earth as in Heaven is a 365 devotional book, offering daily meditations from one of the world's best-loved inspirational writers.</p>
                                <a href="#" class="font-bold text-pink underline">Purchase Book</a>
                            </div>
                        </div>
                    </div>
                @else
                    <div data-id="{{$item->id}}" class="animate-fadein bg-grad-grey rounded-sm xl:col-span-2 flex">
                        <div class="p-7 text-white flex flex-col w-full">
                            <h5 class="text-lg font-bold">On Earth as in Heaven</h5>
                            <p class="">By Tom Wright</p>
                            <p class="pt-4 pb-2 flex-auto">On Earth as in Heaven is a 365 devotional book, offering daily meditations from one of the world's best-loved inspirational writers.</p>
                            <a href="#" class="font-bold text-pink underline">Purchase Book</a>
                        </div>
                    </div>
                @endif
                @break
        @endswitch
    @endforeach
    @endfragment
</div>