@php
    $mediaTabs = [
        'tab1' => ['label' => 'Television', 'articles' => $ArrRecentRightPanelTelevisionAricles],
        'tab2' => ['label' => 'Digital', 'articles' => $ArrRecentRightPanelDigitalAricles],
        'tab3' => ['label' => 'Out of Home', 'articles' => $ArrRecentRightPanelOutofHomeAricles],
        'tab4' => ['label' => 'Print', 'articles' => $ArrRecentRightPanelPrintAricles],
        'tab5' => ['label' => 'Radio', 'articles' => $ArrRecentRightPanelRadioAricles],
    ];
@endphp

<div class="lg:w-9/12 flex flex-col gap-4 overflow-hidden">
    <!-- Section Header -->
    <div class="border-b border-red-300 mb-6 flex flex-wrap gap-2">
        <button
            class="relative inline-flex items-center text-xl px-4 py-1 font-bold text-white bg-red-500 title1 uppercase">
            <span>Media</span>
        </button>

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

    <!-- Tabs Content -->
    <div class="relative">
        @foreach ($mediaTabs as $tabId => $tab)
            <div id="{{ $tabId }}"
                class="tab-content grid gap-4 transition-all duration-500 ease-in-out 
                {{ $loop->first ? 'opacity-100 translate-x-0' : 'absolute inset-0 opacity-0 translate-x-full pointer-events-none' }}">

                <div class="flex items-center justify-between">
                    <h2 class="text-xl font-bold uppercase">
                        <span class="border-b-4 border-red-600">{{ $tab['label'] }}</span>
                    </h2>
                    <a href="{{ url(Str::slug($tab['label'])) }}"
                        class="text-red-600 font-semibold hover:text-red-800 transition">
                        View All
                    </a>
                </div>

                @if (!empty($tab['articles']) && count($tab['articles']) > 0)
                    <div class="flex flex-col md:flex-row gap-4">
                        {{-- Big Article --}}
                        @php $firstArticle = $tab['articles'][0]; @endphp
                        <article class="w-full md:w-1/2 rounded-xl shadow overflow-hidden hover:shadow-lg transition">
                            <a href="{{ $firstArticle->url }}">
                                <img src="{{ Config::get('constants.Sitethumbnail') . $firstArticle->photopath }}"
                                    alt="{{ $firstArticle->title }}"
                                    class="md:h-auto w-full h-64 object-cover rounded-t-xl">
                            </a>
                            <div class="p-4">
                                <p class="text-xs text-gray-500 mt-1">
                                    {{ \Carbon\Carbon::parse($firstArticle->publish_date)->format('M d, Y') }}</p>
                                <h3 class="text-2xl font-bold hover:text-red-600">
                                    <a href="{{ $firstArticle->url }}">{{ Str::limit($firstArticle->title, 90) }}</a>
                                </h3>
                                <p class="mt-2 text-gray-700">{{ Str::limit($firstArticle->summary ?? '', 150) }}</p>
                            </div>
                        </article>

                        {{-- Small Articles --}}
                        <div class="w-full md:w-1/2 grid grid-cols-2 grid-rows-2 gap-4">
                            @foreach ($tab['articles']->skip(1)->take(4) as $small)
                                <article class="rounded-xl shadow hover:shadow-lg transition overflow-hidden">
                                    <a href="{{ $small->url }}">
                                        <img src="{{ Config::get('constants.Sitethumbnail') . $small->photopath }}"
                                            alt="{{ $small->title }}"
                                            class="md:h-auto w-full h-28 object-cover rounded-t-xl">
                                    </a>
                                    <div class="p-2">
                                        <p class="text-xs text-gray-500 mt-0">
                                            {{ \Carbon\Carbon::parse($small->publish_date)->format('M d, Y') }}
                                        </p>
                                        <h3 class="text-base font-semibold text-gray-800 hover:text-red-600">
                                            <a href="{{ $small->url }}">{{ Str::limit($small->title, 80) }}</a>
                                        </h3>
                                    </div>
                                </article>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</div>

<!-- JS for Tab Switching -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('.tab-btn');
        const tabContents = document.querySelectorAll('.tab-content');

        tabButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                const target = btn.getAttribute('data-tab');

                // Update button active state
                tabButtons.forEach(b => b.classList.remove('active-tab', 'text-red-600',
                    'border-b-2', 'border-red-600'));
                btn.classList.add('active-tab', 'text-red-600', 'border-b-2', 'border-red-600');

                // Show/hide tab contents
                tabContents.forEach(tab => {
                    if (tab.id === target) {
                        tab.classList.remove('opacity-0', 'translate-x-full',
                            'pointer-events-none');
                        tab.classList.add('opacity-100', 'translate-x-0');
                    } else {
                        tab.classList.add('opacity-0', 'translate-x-full',
                            'pointer-events-none');
                        tab.classList.remove('opacity-100', 'translate-x-0');
                    }
                });
            });
        });
    });
</script>