@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('layouts.navbar')

<div data-aos="fade-up"
    data-aos-duration="1500" class="container max-w-screen-xl px-4 py-8 mx-auto space-y-4">
    <h1 data-aos="fade-up"
        data-aos-duration="1500" class="font-bold text-center text-md lg:text-4xl">UEDI in the Media</h1>
    <ul id="filter-list"
        data-aos="fade-up"
        data-aos-duration="1500" class="flex flex-row justify-start space-x-4 overflow-auto md:justify-center md:space-x-12 text-nowrap">
        <li data-filter="News and Events" class="text-sm font-semibold cursor-pointer filter-item active md:text-md hover:border-b-2 hover:border-b-green-500">News & Events</li>
        <li data-filter="Articles" class="text-sm font-semibold cursor-pointer filter-item md:text-md hover:border-b-2 hover:border-b-green-500">Articles</li>
        <li data-filter="VIP Night" class="text-sm font-semibold cursor-pointer filter-item md:text-md hover:border-b-2 hover:border-b-green-500">VIP Night</li>
        <li data-filter="Tower Plaza Ground Breaking" class="text-sm font-semibold cursor-pointer filter-item md:text-md hover:border-b-2 hover:border-b-green-500">Tower Plaza Ground Breaking</li>
        <li data-filter="Altezza Grande Launch" class="text-sm font-semibold cursor-pointer filter-item md:text-md hover:border-b-2 hover:border-b-green-500">Altezza Grande Launch</li>
    </ul>
    <div id="uedi-container" class="grid hidden grid-cols-2 gap-8 md:grid-cols-4">
        @foreach ($uedi as $uedis)
        <div class="uedi-item" data-category="{{ $uedis->type }}" data-aos="zoom-in" data-aos-duration="1500">
            <img class="w-full h-[20rem] object-cover" src="{{ asset($uedis->image) }}" alt="{{ $uedis->type }}">
        </div>
        @endforeach
    </div>
    <div id="news-events-container" class="grid grid-cols-2 gap-8 md:grid-cols-4">
        @foreach ($news_and_events as $event)
       
            <div class="news-event-item space-y-2" data-aos="zoom-in" data-aos-duration="1500">
                <a href="{{url($event->link)}}">
                    <img class="w-full h-[20rem] object-cover" src="{{ asset($event->image) }}" alt="{{ $event->title }}">
                </a>
                <h2 class="font-bold">{{ $event->title }}</h2>
            
            
                <ul>
                    <li>
                        <a href="{{url($event->link)}}" class="text-sm text-blue-500 hover:underline break-all">{{ $event->link }}</a>
                    </li>
                </ul>
            
            </div>
      
        
        @endforeach
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const filterItems = document.querySelectorAll('.filter-item');
        const uediContainer = document.getElementById('uedi-container');
        const newsEventsContainer = document.getElementById('news-events-container');

        // Set initial view to News and Events
        uediContainer.style.display = 'none';
        newsEventsContainer.style.display = 'grid';

        filterItems.forEach(filter => {
            filter.addEventListener('click', () => {
                const filterCategory = filter.getAttribute('data-filter');

                // Update active class
                filterItems.forEach(item => item.classList.remove('active'));
                filter.classList.add('active');

                if (filterCategory === 'News and Events') {
                    uediContainer.style.display = 'none';
                    newsEventsContainer.style.display = 'grid';
                } else {
                    uediContainer.style.display = 'grid';
                    newsEventsContainer.style.display = 'none';

                    // Filter uedi items
                    const uediItems = document.querySelectorAll('.uedi-item');
                    uediItems.forEach(item => {
                        if (item.getAttribute('data-category') === filterCategory) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                }
            });
        });
    });
</script>

<style>
    .filter-item.active {
        border-bottom: 2px solid green;
    }
</style>

@include('layouts.footer')
@endsection