@extends('layouts.main-app')

@section('title')

@section('content')

<style>
    #navbar.shrink {
        margin: 0 auto;
        width: 65%;
    }
    
    #navbar.unshrink {
        margin: 0 auto;
        width: 100%;
    }

    @media (max-width: 640px) {
        #navbar.shrink {
            width: 90%;
        }
    }
</style>

@include('layouts.header')  

<section class="container max-w-screen-lg mx-auto px-4 py-8 md:py-12">
    <div class="flex justify-center items-center w-full flex-col">

        @foreach ($events as $event)
            @if (\Carbon\Carbon::parse($event->event_date)->isFuture())
            <h1 class="text-2xl md:text-3xl text-black text-center font-semibold  ubuntu-font mb-6 w-full">
                Up Comming Events
            </h1>
            @endif
        @endforeach

        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 w-full">
            @foreach ($events as $event)
            @if (\Carbon\Carbon::parse($event->event_date)->isFuture())
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300">
                <a href="{{ route('eventsItem', $event->id) }}" class="block">
                    <!-- Image Container -->
                    <div class="relative aspect-[4/3]">
                        <img 
                            src="{{ asset(json_decode($event->image)[0]) }}" 
                            alt="{{ $event->title }}" 
                            class="w-full h-full object-cover group-hover:scale-105 duration-500 transition-all"
                        >
                        <!-- Badges Container -->
                        <div class="flex absolute bottom-0 left-0 w-full">
                            <!-- Date Badge -->
                            <div class="bg-black text-white py-2 px-4 flex flex-col items-center">
                                <p class="text-base md:text-lg font-bold">
                                    {{ \Carbon\Carbon::parse($event->event_date)->format('d') }}
                                </p>
                                <p class="text-xs uppercase">
                                    {{ \Carbon\Carbon::parse($event->event_date)->format('M') }}
                                </p>
                            </div>
                            <!-- Author Badge -->
                            <div class="bg-white shadow-md flex px-3 md:px-4 items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 8a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
                                </svg>
                                <span class="text-xs md:text-sm font-medium text-gray-700">Admin</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section -->
                    <div class="p-4 space-y-3">
                        <h2 class="text-base md:text-lg font-semibold text-gray-800 line-clamp-2">
                            {{ $event->title }}
                        </h2>
                        <div class="flex items-center text-sm text-gray-700 group-hover:text-[#729ACE]">
                            <span class="group-hover:underline">Read More</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transition-transform duration-300 group-hover:-rotate-45" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M12.293 9.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L13.586 13H4a1 1 0 110-2h9.586l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </a>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

<section class="container max-w-screen-lg mx-auto px-4 py-8 md:py-12">
    <div class="flex justify-center items-center w-full flex-col">
        <h1 class="text-2xl md:text-3xl text-black font-semibold text-left ubuntu-font mb-6 w-full">
            Recent Events
        </h1>
        
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 w-full">
            @foreach ($events as $event)
            @if (\Carbon\Carbon::parse($event->event_date)->isPast())
            <div class="bg-white rounded-lg shadow-sm overflow-hidden group hover:shadow-md transition-all duration-300">
                <a href="{{ route('eventsItem', $event->id) }}" class="block">
                    <!-- Image Container -->
                    <div class="relative aspect-[4/3]">
                        <img 
                            src="{{ asset(json_decode($event->image)[0]) }}" 
                            alt="{{ $event->title }}" 
                            class="w-full h-full object-cover group-hover:scale-105 duration-500 transition-all"
                        >
                        <!-- Badges Container -->
                        <div class="flex absolute bottom-0 left-0 w-full">
                            <!-- Date Badge -->
                            <div class="bg-black text-white py-2 px-4 flex flex-col items-center">
                                <p class="text-base md:text-lg font-bold">
                                    {{ \Carbon\Carbon::parse($event->event_date)->format('d') }}
                                </p>
                                <p class="text-xs uppercase">
                                    {{ \Carbon\Carbon::parse($event->event_date)->format('M') }}
                                </p>
                            </div>
                            <!-- Author Badge -->
                            <div class="bg-white shadow-md flex px-3 md:px-4 items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10 8a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" />
                                </svg>
                                <span class="text-xs md:text-sm font-medium text-gray-700">Admin</span>
                            </div>
                        </div>
                    </div>

                    <!-- Content Section -->
                    <div class="p-4 space-y-3">
                        <h2 class="text-base md:text-lg font-semibold text-gray-800 line-clamp-2">
                            {{ $event->title }}
                        </h2>
                        <div class="flex items-center text-sm text-gray-700 group-hover:text-[#729ACE]">
                            <span class="group-hover:underline">Read More</span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1 transition-transform duration-300 group-hover:-rotate-45" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M12.293 9.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L13.586 13H4a1 1 0 110-2h9.586l-1.293-1.293a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </div>
                    </div>
                </a>
            </div>
            @endif
            @endforeach
        </div>
    </div>
</section>

@endsection