@extends('layouts.app')

@section('content')
<main class="container mx-auto px-4 py-6">
    
    <!-- Hero Section (1 Large + 4 Small) -->
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4 mb-12">
        @if(isset($featuredPost) && $featuredPost)
        <!-- Featured Post (2/4 columns on large) -->
        <div class="lg:col-span-2 relative h-[350px] lg:h-[480px] rounded-3xl overflow-hidden group shadow-2xl card-glow">
            <a href="{{ route('post.show', $featuredPost->slug) }}" class="block h-full">
                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent z-10 transition-all duration-500 group-hover:from-primary/80"></div>
                @if($featuredPost->featured_image)
                    <img src="{{ $featuredPost->featured_image }}" alt="{{ $featuredPost->title }}" class="w-full h-full object-cover transition-transform duration-[1.5s] group-hover:scale-110">
                @else
                    <div class="w-full h-full bg-gray-200"></div>
                @endif
                <div class="absolute bottom-0 right-0 left-0 p-8 z-20 text-white">
                    <span class="bg-primary/90 backdrop-blur-sm text-white text-[10px] font-black px-3 py-1.5 rounded-full mb-4 inline-block uppercase tracking-widest shadow-lg">{{ $featuredPost->category->name ?? 'أخبار' }}</span>
                    <h1 class="text-3xl lg:text-4xl font-black mb-4 leading-tight group-hover:text-white transition-colors drop-shadow-lg">{{ $featuredPost->title }}</h1>
                    <div class="flex items-center text-xs text-gray-300 gap-4 font-bold">
                        <span class="flex items-center gap-1.5"><i class="fa-regular fa-clock"></i> {{ \Carbon\Carbon::parse($featuredPost->created_at)->locale('ar')->isoFormat('D MMMM Y') }}</span>
                        <span class="flex items-center gap-1.5"><i class="fa-solid fa-eye text-primary"></i> {{ number_format($featuredPost->views_count) }}</span>
                    </div>
                </div>
            </a>
        </div>
        @endif

        @if(isset($latestPosts) && $latestPosts->count() > 0)
        <!-- 4 Secondary Posts -->
        <div class="lg:col-span-2 grid grid-cols-2 gap-4">
            @foreach($latestPosts->take(4) as $post)
            <div class="relative h-[160px] lg:h-[232px] rounded-2xl overflow-hidden group shadow-md card-glow">
                <a href="{{ route('post.show', $post->slug) }}" class="block h-full">
                    <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent z-10 group-hover:from-primary/60 transition-all duration-500"></div>
                    @if($post->featured_image)
                        <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-full object-cover transition-transform duration-[1.2s] group-hover:scale-110">
                    @else
                        <div class="w-full h-full bg-gray-200"></div>
                    @endif
                    <div class="absolute bottom-0 right-0 left-0 p-4 z-20 text-white">
                        <span class="bg-primary/80 backdrop-blur-sm text-white text-[8px] font-black px-2 py-1 rounded-md mb-2 inline-block shadow-md leading-none">{{ $post->category->name ?? 'أخبار' }}</span>
                        <h2 class="text-xs lg:text-sm font-black leading-snug line-clamp-2 drop-shadow-md">{{ $post->title }}</h2>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
        @endif
    </div>

    <div class="flex flex-col lg:flex-row gap-8">
        
        <!-- Main Content Area (First Child visually in RTL = Right) -->
        <div class="w-full lg:w-8/12">

            <!-- Weather Scrolling Ticker -->
            <div class="bg-white border border-gray-100 rounded-2xl mb-8 flex items-center overflow-hidden shadow-sm h-14 border-t-4 border-t-primary" x-data="{
                cities: [
                    { name: 'القاهرة', lat: 30.0626, lon: 31.2497, temp: '--' },
                    { name: 'الإسكندرية', lat: 31.2001, lon: 29.9187, temp: '--' },
                    { name: 'الجيزة', lat: 30.0131, lon: 31.2089, temp: '--' },
                    { name: 'بورسعيد', lat: 31.2565, lon: 32.2841, temp: '--' },
                    { name: 'الأقصر', lat: 25.6872, lon: 32.6396, temp: '--' },
                    { name: 'أسوان', lat: 24.0889, lon: 32.8998, temp: '--' },
                    { name: 'المنصورة', lat: 31.0413, lon: 31.3785, temp: '--' },
                    { name: 'دمياط', lat: 31.4175, lon: 31.8144, temp: '--' },
                    { name: 'أسيوط', lat: 27.1783, lon: 31.1859, temp: '--' },
                    { name: 'شرم الشيخ', lat: 27.9158, lon: 34.3299, temp: '--' }
                ],
                async fetchWeather() {
                    const lats = this.cities.map(c => c.lat).join(',');
                    const lons = this.cities.map(c => c.lon).join(',');
                    const res = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${lats}&longitude=${lons}&current_weather=true`);
                    const data = await res.json();
                    if (Array.isArray(data)) {
                        data.forEach((d, i) => { this.cities[i].temp = Math.round(d.current_weather.temperature); });
                    } else if (data.current_weather) {
                        this.cities[0].temp = Math.round(data.current_weather.temperature);
                    }
                    // Handle multi-city response if API supports or loop
                    for(let i=0; i < this.cities.length; i++) {
                       const r = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${this.cities[i].lat}&longitude=${this.cities[i].lon}&current_weather=true`);
                       const d = await r.json();
                       this.cities[i].temp = Math.round(d.current_weather.temperature);
                    }
                }
            }" x-init="fetchWeather()">
                <div class="bg-primary text-white px-6 h-full flex items-center font-black text-xs ticker-btn z-10 whitespace-nowrap">
                    <i class="fa-solid fa-cloud-sun text-lg ml-2"></i> درجات الحرارة
                </div>
                <div class="ticker-wrap flex-1 bg-white relative overflow-hidden">
                    <div class="ticker flex items-center h-full">
                        <template x-for="city in cities">
                            <div class="ticker__item flex items-center gap-2">
                                <span class="text-gray-400 font-bold" x-text="city.name"></span>
                                <span class="text-primary font-black ml-4" x-text="city.temp + '°C'"></span>
                            </div>
                        </template>
                        <!-- Duplicate for infinite loop if needed, but the CSS animation handles it -->
                    </div>
                </div>
            </div>
            
            @if(isset($categoryPosts))
                @foreach($categoryPosts as $data)
                <!-- Category Section -->
                <section class="mb-12">
                    <div class="flex items-center justify-between mb-6 border-b-2 border-primary/20 pb-2">
                        <h2 class="text-xl font-black text-gray-900 flex items-center gap-2">
                            <span class="w-2 h-6 bg-primary rounded-sm"></span>
                            {{ $data['category']->name }}
                        </h2>
                        <a href="{{ route('category.show', $data['category']->slug) }}" class="text-xs font-bold text-primary hover:underline transition-all hover:pr-2">عرض المزيد <i class="fa-solid fa-chevron-left text-[8px]"></i></a>
                    </div>

                    @if($loop->index % 2 == 0)
                        <!-- Layout Type 1: Main featured + sidebar list -->
                        <div class="flex flex-col md:flex-row gap-6">
                            @php $catFeatured = $data['posts']->first(); @endphp
                            @if($catFeatured)
                            <div class="w-full md:w-1/2 group">
                                <a href="{{ route('post.show', $catFeatured->slug) }}" class="block p-4 bg-white rounded-2xl card-glow h-full">
                                    <div class="relative h-72 md:h-80 rounded-2xl overflow-hidden mb-5 shadow-md img-zoom">
                                        @if($catFeatured->featured_image)
                                            <img src="{{ $catFeatured->featured_image }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full bg-gray-100 flex items-center justify-center"><i class="fa-solid fa-image text-5xl text-gray-200"></i></div>
                                        @endif
                                        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-6">
                                            <span class="text-white text-sm font-black"><i class="fa-solid fa-plus ml-2"></i> اقرأ المزيد</span>
                                        </div>
                                    </div>
                                    <h3 class="text-xl md:text-2xl font-black text-gray-900 group-hover:text-primary transition-colors" style="line-height: 1.6;">{{ $catFeatured->title }}</h3>
                                    <p class="text-base text-gray-500 mt-3 line-clamp-2 leading-relaxed font-medium">{{ $catFeatured->subtitle ?? strip_tags(mb_substr($catFeatured->content, 0, 180)) }}...</p>
                                </a>
                            </div>
                            @endif

                            <div class="w-full md:w-1/2 flex flex-col gap-4">
                                @foreach($data['posts']->skip(1) as $p)
                                <a href="{{ route('post.show', $p->slug) }}" class="flex gap-5 group p-3 hover:bg-primary/5 rounded-2xl transition-all">
                                    <div class="w-28 h-20 lg:w-40 lg:h-28 rounded-xl overflow-hidden flex-shrink-0 shadow-sm img-zoom border border-gray-50">
                                        @if($p->featured_image)
                                            <img src="{{ $p->featured_image }}" class="w-full h-full object-cover">
                                        @else
                                            <div class="w-full h-full bg-gray-100 flex items-center justify-center"><i class="fa-solid fa-image text-gray-200"></i></div>
                                        @endif
                                    </div>
                                    <div class="flex-1 flex flex-col justify-center">
                                        <h4 class="text-base font-black text-gray-800 line-clamp-2 group-hover:text-primary transition-colors" style="line-height: 1.6;">{{ $p->title }}</h4>
                                        <span class="text-[11px] text-gray-400 font-black mt-3 block"><i class="fa-regular fa-clock ml-1"></i> {{ \Carbon\Carbon::parse($p->created_at)->locale('ar')->diffForHumans() }}</span>
                                    </div>
                                </a>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <!-- Layout Type 2: Three column grid -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                            @foreach($data['posts']->take(3) as $p)
                            <a href="{{ route('post.show', $p->slug) }}" class="group block p-4 bg-white rounded-3xl card-glow border border-gray-50">
                                <div class="relative h-48 lg:h-56 rounded-2xl overflow-hidden mb-4 img-zoom shadow-sm">
                                    @if($p->featured_image)
                                        <img src="{{ $p->featured_image }}" class="w-full h-full object-cover">
                                    @else
                                        <div class="w-full h-full bg-gray-100 flex items-center justify-center"><i class="fa-solid fa-image text-4xl text-gray-200"></i></div>
                                    @endif
                                </div>
                                <h3 class="text-base font-black text-gray-900 line-clamp-2 leading-snug group-hover:text-primary transition-colors min-h-[3rem]">{{ $p->title }}</h3>
                                <div class="flex items-center justify-between mt-4">
                                    <span class="text-[10px] text-gray-400 font-black"><i class="fa-regular fa-clock ml-1"></i> {{ \Carbon\Carbon::parse($p->created_at)->locale('ar')->diffForHumans() }}</span>
                                    <span class="text-primary text-[10px] font-black opacity-0 group-hover:opacity-100 transition-opacity">اقرأ المزيد <i class="fa-solid fa-arrow-left mr-1"></i></span>
                                </div>
                            </a>
                            @endforeach
                        </div>
                    @endif
                </section>
                @endforeach
            @endif

        </div>

        <!-- Sidebar (Second child in RTL = Left) -->
        <aside class="w-full lg:w-4/12 flex flex-col gap-6">
            @include('partials.sidebar', ['settings' => app(\App\Settings\SiteSettings::class), 'topPosts' => $topPosts, 'categories' => $categories])
        </aside>

    </div>
</main>
@endsection