@extends('layouts.app')

@section('title', ($shopSettings['meta_title'] ?? (($shopSettings['shop_name'] ?? 'Orange Groceries') . ' - Online Grocery Store & 30-Min Delivery')))
@section('meta_description', $shopSettings['meta_description'] ?? ('Order quality groceries, daily staples, snacks and essentials online from ' . ($shopSettings['shop_name'] ?? 'Orange Groceries') . '. Enjoy lowest prices and fast 30-minute delivery.'))
@section('meta_keywords', $shopSettings['meta_keywords'] ?? ('online grocery, buy grocery online, daily essentials, spices, staples, snacks, ' . ($shopSettings['shop_name'] ?? 'Orange Groceries')))
@section('canonical', route('home'))

@section('content')

<!-- Promotional Popup Offer Modal (Displays Only Once On First Visit) -->
@if($activePopup)
<div x-data="{ show: false }" 
     x-init="
        if (!localStorage.getItem('popup_seen_{{ $activePopup->id }}')) {
            show = true;
            localStorage.setItem('popup_seen_{{ $activePopup->id }}', 'true');
        }
     "
     x-show="show" 
     x-cloak 
     class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/60 backdrop-blur-sm" 
     x-transition>
    <div @click.outside="show = false" class="bg-white rounded-3xl max-w-lg w-full overflow-hidden shadow-2xl relative border border-slate-100 animate-in fade-in zoom-in duration-300">
        <button @click="show = false" class="absolute top-4 right-4 w-9 h-9 rounded-full bg-slate-900/50 hover:bg-slate-900 text-white flex items-center justify-center transition z-10">
            <i class="fa-solid fa-xmark"></i>
        </button>
        @if($activePopup->image)
            <img src="{{ $activePopup->image }}" alt="{{ $activePopup->title }}" class="w-full h-44 sm:h-52 object-cover">
        @endif
        <div class="p-5 sm:p-6 text-center">
            <span class="inline-block bg-amber-100 text-amber-800 text-[10px] sm:text-[11px] font-extrabold px-3 py-1 rounded-full uppercase mb-2">🎉 Special Promotional Offer</span>
            <h3 class="text-xl sm:text-2xl font-extrabold text-slate-900 tracking-tight mb-2">{{ $activePopup->title }}</h3>
            <p class="text-xs text-slate-600 mb-5 sm:mb-6 leading-relaxed">{{ $activePopup->description }}</p>
            <div class="flex items-center justify-center gap-3">
                <a href="{{ route('products.index') }}" @click="show = false" class="px-6 py-3 bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-xs sm:text-sm rounded-2xl transition shadow-lg shadow-brand-600/30">Shop Offers Now</a>
            </div>
        </div>
    </div>
</div>
@endif

<!-- Hero Banner Slider -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 pt-3 sm:pt-6">
    <div x-data="{ active: 0, total: {{ count($heroBanners) > 0 ? count($heroBanners) : 1 }} }" 
         x-init="setInterval(() => { active = (active + 1) % total }, 5000)" 
         class="relative rounded-2xl sm:rounded-3xl overflow-hidden shadow-xl shadow-slate-200/50 min-h-[200px] sm:min-h-[380px] bg-slate-900">
        
        @if(count($heroBanners) > 0)
            @foreach($heroBanners as $index => $banner)
                <div x-show="active === {{ $index }}" 
                     x-transition:enter="transition ease-out duration-500" 
                     x-transition:enter-start="opacity-0 scale-95" 
                     x-transition:enter-end="opacity-100 scale-100" 
                     class="relative w-full h-[200px] sm:h-[380px] group cursor-pointer"
                     onclick="window.location.href='{{ $banner->link ? (Str::startsWith($banner->link, 'http') ? $banner->link : url($banner->link)) : route('products.index') }}'">
                    <img src="{{ $banner->image }}" alt="{{ $banner->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
                    
                    @if(strtolower(trim($banner->title)) !== 'banner' && !empty(trim($banner->title)))
                        <div class="absolute inset-0 bg-gradient-to-r from-slate-950/70 via-slate-950/20 to-transparent flex items-center p-5 sm:p-12">
                            <div class="max-w-xl text-white space-y-2 sm:space-y-3">
                                <span class="inline-block px-2.5 py-0.5 sm:px-3 sm:py-1 bg-brand-500 text-slate-950 text-[9px] sm:text-xs font-black uppercase rounded-full tracking-wider shadow-md">⚡ Fast 30-Min Express Delivery</span>
                                <h1 class="text-xl sm:text-4xl font-extrabold tracking-tight leading-tight drop-shadow-lg line-clamp-2">{{ $banner->title }}</h1>
                                <div class="pt-1 sm:pt-2">
                                    <a href="{{ $banner->link ? (Str::startsWith($banner->link, 'http') ? $banner->link : url($banner->link)) : route('products.index') }}" class="inline-flex items-center gap-2 px-4 py-2 sm:px-6 sm:py-3 bg-white text-slate-900 hover:bg-brand-600 hover:text-white font-extrabold text-xs sm:text-sm rounded-xl sm:rounded-2xl transition-all shadow-lg">
                                        <span>Explore Catalog</span>
                                        <i class="fa-solid fa-arrow-right text-xs"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    @endif
                </div>
            @endforeach
        @else
            <!-- Fallback Hero -->
            <div class="relative w-full h-[200px] sm:h-[380px] bg-gradient-to-r from-emerald-800 to-teal-900 flex items-center p-5 sm:p-8">
                <div class="max-w-lg text-white space-y-2 sm:space-y-3">
                    <span class="inline-block px-2.5 py-0.5 bg-amber-400 text-slate-950 text-[10px] sm:text-xs font-extrabold uppercase rounded-full">Super Grocery Saver</span>
                    <h1 class="text-2xl sm:text-4xl font-extrabold tracking-tight">Daily Grocery Essentials Delivered Fast</h1>
                    <p class="text-xs sm:text-sm text-emerald-100">Get up to 40% OFF on daily groceries, staples, snacks & essentials today.</p>
                    <a href="{{ route('products.index') }}" class="inline-block px-5 py-2.5 bg-white text-emerald-950 font-extrabold text-xs rounded-xl sm:rounded-2xl shadow-md">Shop Catalog</a>
                </div>
            </div>
        @endif

        <!-- Slider Dots -->
        <div class="absolute bottom-3 left-1/2 -translate-x-1/2 flex space-x-1.5 z-10">
            @for($i = 0; $i < (count($heroBanners) > 0 ? count($heroBanners) : 1); $i++)
                <button @click="active = {{ $i }}" :class="active === {{ $i }} ? 'w-6 sm:w-8 bg-brand-500' : 'w-2 sm:w-2.5 bg-white/60'" class="h-2 sm:h-2.5 rounded-full transition-all duration-300"></button>
            @endfor
        </div>
    </div>
</section>

<!-- Category Circles Bar -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6 sm:py-8">
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <div>
            <h2 class="text-lg sm:text-2xl font-extrabold text-slate-900 tracking-tight">Explore Categories</h2>
            <p class="text-xs text-slate-500 font-medium">Browse daily essentials by category</p>
        </div>
        <a href="{{ route('products.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700 flex items-center gap-1">
            View All <i class="fa-solid fa-chevron-right text-[10px]"></i>
        </a>
    </div>

    <div class="grid grid-cols-4 sm:grid-cols-4 md:grid-cols-7 gap-2 sm:gap-4">
        @foreach($categories as $cat)
            <a href="{{ route('products.index', ['category' => $cat->slug]) }}" class="group flex flex-col items-center p-2 sm:p-3 bg-white hover:bg-emerald-50/60 rounded-2xl sm:rounded-3xl border border-slate-200/70 shadow-sm hover:shadow-md transition text-center {{ request('category') == $cat->slug ? 'ring-2 ring-brand-500 bg-brand-50/30' : '' }}">
                <div class="w-12 h-12 sm:w-20 sm:h-20 rounded-xl sm:rounded-2xl overflow-hidden mb-1.5 sm:mb-2 shadow-inner group-hover:scale-105 transition-transform">
                    <img src="{{ $cat->image }}" alt="{{ $cat->name }}" class="w-full h-full object-cover">
                </div>
                <span class="text-[10px] sm:text-xs font-bold text-slate-800 group-hover:text-brand-700 line-clamp-1 truncate w-full">{{ $cat->name }}</span>
            </a>
        @endforeach
    </div>
</section>

<!-- Flipkart-style Interactive Filter Toolbar -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8">
    @include('customer.components.flipkart_filter_bar', ['categories' => $categories])
</section>

<!-- FILTERED RESULTS SECTION (Triggers when user applies filters) -->
@if($hasFilter)
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6">
    <div class="bg-white rounded-3xl p-6 border border-brand-200/80 shadow-md space-y-6">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <span class="text-xs font-bold text-brand-600 uppercase tracking-wider">Search & Filter Results</span>
                <h2 class="text-xl font-extrabold text-slate-900">Found {{ $filteredProducts->total() }} Products</h2>
            </div>
            <a href="{{ route('home') }}" class="text-xs font-bold text-slate-500 hover:text-slate-700">Reset Search</a>
        </div>

        @if($filteredProducts->count() > 0)
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6">
                @foreach($filteredProducts as $product)
                    @include('customer.components.product_card', ['product' => $product])
                @endforeach
            </div>

            <div class="pt-4">
                {{ $filteredProducts->links() }}
            </div>
        @else
            <div class="text-center py-12 space-y-3">
                <div class="w-16 h-16 bg-slate-100 rounded-full flex items-center justify-center mx-auto text-slate-400 text-2xl">
                    <i class="fa-solid fa-box-open"></i>
                </div>
                <h4 class="font-extrabold text-slate-800 text-base">No Products Found</h4>
                <p class="text-xs text-slate-500 max-w-sm mx-auto">We couldn't find any products matching your selected filter criteria. Try adjusting your filters.</p>
                <a href="{{ route('home') }}" class="inline-block px-5 py-2.5 bg-brand-600 text-white font-extrabold text-xs rounded-xl shadow mt-2">Clear Filters</a>
            </div>
        @endif
    </div>
</section>
@endif

<!-- Default Home Page Catalog Sections (Shown when no filter or alongside filters) -->
@if(!$hasFilter)

<!-- Featured Products Section -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-6">
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <div class="flex items-center gap-2">
            <div class="w-2.5 sm:w-3 h-6 sm:h-8 bg-brand-500 rounded-full"></div>
            <div>
                <h2 class="text-lg sm:text-2xl font-extrabold text-slate-900 tracking-tight">Featured Products</h2>
                <p class="text-xs text-slate-500 font-medium">Handpicked premium items with top discounts</p>
            </div>
        </div>
        <a href="{{ route('products.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700">See More</a>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6">
        @foreach($featuredProducts as $product)
            @include('customer.components.product_card', ['product' => $product])
        @endforeach
    </div>
</section>

<!-- Offer Banner Section -->
@if(count($offerBanners) > 0)
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6 sm:py-8">
    <div class="rounded-2xl sm:rounded-3xl overflow-hidden relative shadow-xl">
        <img src="{{ $offerBanners[0]->image }}" alt="{{ $offerBanners[0]->title }}" class="w-full h-36 sm:h-64 object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-slate-950/85 via-slate-950/45 to-transparent p-4 sm:p-10 flex items-center">
            <div class="text-white space-y-1.5 sm:space-y-2">
                <span class="bg-amber-400 text-slate-950 text-[9px] sm:text-[10px] font-extrabold px-2.5 py-0.5 rounded-full uppercase">Limited Time Weekend Offer</span>
                <h3 class="text-lg sm:text-3xl font-extrabold leading-snug">{{ $offerBanners[0]->title }}</h3>
                <a href="{{ route('products.index') }}" class="inline-block px-4 py-2 sm:px-5 sm:py-2.5 bg-brand-600 hover:bg-brand-700 text-white font-bold text-xs rounded-xl shadow-lg mt-1 sm:mt-2">Claim Offer Now</a>
            </div>
        </div>
    </div>
</section>
@endif

<!-- Bestsellers Section -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-6">
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <div class="flex items-center gap-2">
            <div class="w-2.5 sm:w-3 h-6 sm:h-8 bg-amber-500 rounded-full"></div>
            <div>
                <h2 class="text-lg sm:text-2xl font-extrabold text-slate-900 tracking-tight">Best Sellers</h2>
                <p class="text-xs text-slate-500 font-medium">Most ordered groceries by local customers</p>
            </div>
        </div>
        <a href="{{ route('products.index') }}?sort=bestselling" class="text-xs font-bold text-brand-600">See All</a>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6">
        @foreach($bestsellers as $product)
            @include('customer.components.product_card', ['product' => $product])
        @endforeach
    </div>
</section>

<!-- Today's Trending & New Arrivals Grid -->
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-4 sm:py-6">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
        <!-- Trending -->
        <div>
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-base sm:text-lg font-extrabold text-slate-900 flex items-center gap-2">
                    <i class="fa-solid fa-fire text-amber-500"></i> Trending Products
                </h3>
                <a href="{{ route('products.index') }}?sort=popular" class="text-xs font-bold text-brand-600">View All</a>
            </div>
            <div class="grid grid-cols-2 gap-3 sm:gap-4">
                @foreach($trendingProducts->take(4) as $product)
                    @include('customer.components.product_card', ['product' => $product])
                @endforeach
            </div>
        </div>

        <!-- New Arrivals -->
        <div>
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-base sm:text-lg font-extrabold text-slate-900 flex items-center gap-2">
                    <i class="fa-solid fa-sparkles text-emerald-500"></i> New Arrivals
                </h3>
                <a href="{{ route('products.index') }}?sort=newest" class="text-xs font-bold text-brand-600">View All</a>
            </div>
            <div class="grid grid-cols-2 gap-3 sm:gap-4">
                @foreach($newArrivals->take(4) as $product)
                    @include('customer.components.product_card', ['product' => $product])
                @endforeach
            </div>
        </div>
    </div>
<!-- All Groceries & Daily Essentials Grid -->
@if(isset($allProducts) && $allProducts->count() > 0)
<section class="max-w-7xl mx-auto px-3 sm:px-6 lg:px-8 py-6 sm:py-8 border-t border-slate-100">
    <div class="flex items-center justify-between mb-4 sm:mb-6">
        <div class="flex items-center gap-2">
            <div class="w-2.5 sm:w-3 h-6 sm:h-8 bg-indigo-600 rounded-full"></div>
            <div>
                <h2 class="text-lg sm:text-2xl font-extrabold text-slate-900 tracking-tight">Explore All Products</h2>
                <p class="text-xs text-slate-500 font-medium">Browse our full selection of fresh groceries, staples & daily essentials</p>
            </div>
        </div>
        <a href="{{ route('products.index') }}" class="text-xs font-bold text-brand-600 hover:text-brand-700 flex items-center gap-1">
            View All Catalog <i class="fa-solid fa-arrow-right text-[10px]"></i>
        </a>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 sm:gap-6">
        @foreach($allProducts as $product)
            @include('customer.components.product_card', ['product' => $product])
        @endforeach
    </div>

    @if($allProducts->hasPages())
    <div class="mt-8 flex justify-center">
        {{ $allProducts->links() }}
    </div>
    @endif
</section>
@endif

@endif

@endsection