@php
    $mediaTabs = [
        'tab1' => [
            'url' => 'media-tv-news.html',
            'label' => 'Television',
            'articles' => $ArrRecentRightPanelTelevisionAricles,
        ],
        'tab2' => [
            'url' => 'digital-news.html',
            'label' => 'Digital',
            'articles' => $ArrRecentRightPanelDigitalAricles,
        ],
        'tab3' => [
            'url' => 'out-of-home-news.html',
            'label' => 'Out of Home',
            'articles' => $ArrRecentRightPanelOutofHomeAricles,
        ],
        'tab4' => [
            'url' => 'media-print-news.html',
            'label' => 'Print',
            'articles' => $ArrRecentRightPanelPrintAricles,
        ],
        'tab5' => [
            'url' => 'media-radio-news.html',
            'label' => 'Radio',
            'articles' => $ArrRecentRightPanelRadioAricles,
        ],
    ];
@endphp


<div class="lg:w-9/12 flex flex-col gap-4 overflow-hidden">
    <div id="media-tabs">

        <!-- Tabs -->
        <div class="border-b border-red-300 mb-0 flex flex-wrap gap-2 font-rethink1 hidden md:block">

            <button
                class="relative hidden md:inline-flex items-center text-xl px-4 py-2 text-white bg-red-500 title1 uppercase">
                Media
            </button>

            @foreach ($mediaTabs as $tabId => $tab)
                <button
                    class="tab-btn px-[3px] py-1 md:px-4 md:py-2 text-md uppercase transition
                {{ $loop->first ? 'txt-red border-b-2 border-red-700 active-tab' : 'text-black hover:txt-red' }}"
                    data-tab="{{ $tabId }}">
                    {{ $tab['label'] }}
                </button>
            @endforeach

        </div>

        <div class="tab-wrapper">

            @foreach ($mediaTabs as $tabId => $tab)
                <div id="{{ $tabId }}"
                    class="tab-content grid gap-4 lg:my-5
                {{ $loop->first ? 'visible fade-slide-in' : 'hidden' }}">

                    <!-- Section Header -->
                    <div class="flex items-center justify-between mb-5 font-rethink1">
                        @php
                            $words = explode(' ', $tab['label'], 2);
                        @endphp

                        <h2 class="text-[1.35rem] leading-normal text-black whitespace-nowrap">
                            {{ $words[0] }}
                            <span class="txt-red">{{ $words[1] ?? '' }}</span>
                        </h2>

                        <a href="{{ $tab['url'] }}"
                            class="text-black border border-gray-300 hover:bg-red-600 hover:text-white transition px-3 py-2 text-sm rounded-2xl">
                            View All
                        </a>
                    </div>

                    @if (!empty($tab['articles']) && count($tab['articles']) > 0)
                        @php $big = $tab['articles'][0]; @endphp

                        <div class="flex flex-col md:flex-row gap-4">

                            <!-- BIG ARTICLE -->
                            <article
                                class="w-full md:w-1/2 rounded-xl shadow overflow-hidden hover:shadow-lg transition">
                                <a href="{{ $big->url }}" class="flex-shrink-0">
                                    <img src="{{ Config::get('constants.Sitethumbnail') . $big->photopath }}"
                                        alt="{{ $big->title }}"
                                        class="w-full lg:h-64 h-auto object-cover rounded-t-xl">
                                </a>

                                <div class="p-2">
                                    <a href="{{ $big->url }}" class="flex-shrink-0">
                                        <h3
                                            class="text-xl lg:text-[1.75rem] lg:leading-[1.25] hover:txt-red transition">
                                            {{ $big->title }}
                                        </h3>
                                    </a>

                                    <p class="text-xs text-gray-500 mt-1">
                                        <i class="fa-regular fa-clock"></i>
                                        {{ \Carbon\Carbon::parse($big->publish_date)->diffForHumans() }}
                                    </p>

                                    @if (!empty($big->summary))
                                        <p class="mt-1 font-rethink">
                                            {{ Str::limit($big->summary, 120) }}
                                        </p>
                                    @endif
                                </div>
                            </article>

                            <!-- SMALL ARTICLES -->
                            <div
                                class="w-full md:w-1/2 grid grid-cols-1 gap-2 text-base/6 lg:text-[17px] lg:leading-[1.4]">

                                @foreach ($tab['articles']->skip(1)->take(4) as $small)
                                    <article
                                        class="flex gap-2 lg:gap-4 lg:bg-gray-50 hover:shadow-md transition lg:p-2">

                                        <a href="{{ $small->url }}" class="flex-shrink-0">
                                            <img src="{{ Config::get('constants.Sitethumbnail') . $small->photopath }}"
                                                alt="{{ $small->title }}"
                                                class="w-24 h-14 lg:w-32 lg:h-20 object-cover rounded-lg flex-shrink-0">
                                        </a>

                                        <div>
                                            <a href="{{ $small->url }}" class="flex-shrink-0">
                                                <h3 class="hover:txt-red transition">
                                                    {{ Str::limit($small->title, 70) }}
                                                </h3>
                                            </a>

                                            <p class="text-xs text-gray-500 mt-1">
                                                <i class="fa-regular fa-clock"></i>
                                                {{ \Carbon\Carbon::parse($small->publish_date)->diffForHumans() }}
                                            </p>
                                        </div>
                                    </article>

                                    <hr class="lg:hidden">
                                @endforeach

                            </div>

                        </div>
                    @endif

                </div>
            @endforeach

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