@extends('layouts.frontend')

@php
    $siteName = \App\Models\Setting::get('site_name', config('app.name'));
    $siteTagline = \App\Models\Setting::get('site_tagline', 'Popular E-Commerce & Gadget Online Market in Bangladesh');
@endphp

@section('title', $siteName . ' - ' . $siteTagline)

@section('content')

<!-- Header Banners Section (1:2 Grid) - After Menu, Only on Homepage -->
@php
    $heroBanners = \App\Models\Banner::active()->position('hero')->orderBy('sort_order')->get();
    $mainSideBanners = \App\Models\Banner::active()->position('main_side')->orderBy('sort_order')->take(2)->get();
@endphp
@if($heroBanners->count() > 0 || $mainSideBanners->count() > 0)
<div class="bg-white py-4">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <!-- Main Carousel (2/3 width) -->
            @if($heroBanners->count() > 0)
            <div class="lg:col-span-2">
                <div class="swiper hero-swiper rounded-lg overflow-hidden">
                    <div class="swiper-wrapper">
                        @foreach($heroBanners as $banner)
                        <div class="swiper-slide">
                            @if($banner->link)
                            <a href="{{ $banner->link }}" target="_blank">
                                <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-48 lg:h-64 object-cover">
                            </a>
                            @else
                            <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-48 lg:h-64 object-cover">
                            @endif
                        </div>
                        @endforeach
                    </div>
                    @if($heroBanners->count() > 1)
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    @endif
                </div>
            </div>
            @endif
            
            <!-- Side Banners (1/3 width) -->
            @if($mainSideBanners->count() > 0)
            <div class="space-y-4">
                @foreach($mainSideBanners as $banner)
                <div class="rounded-lg overflow-hidden">
                    @if($banner->link)
                    <a href="{{ $banner->link }}" target="_blank">
                        <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-20 lg:h-28 object-cover hover:opacity-90 transition-opacity">
                    </a>
                    @else
                    <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-20 lg:h-28 object-cover">
                    @endif
                </div>
                @endforeach
            </div>
            @endif
        </div>
    </div>
</div>
@endif

<!-- Categories Section -->
@php
    $homeCategories = \App\Models\Category::where('status', true)
        ->whereNull('parent_id')
        ->orderBy('name')
        ->get();
@endphp
<section class="py-6 bg-white">
    <div class="container mx-auto px-4">
        <div class="section-title-header">
            <h2 class="section-title-name">Categories</h2>
        </div>
        <div class="category-grid-row" x-data="{ showAll: false }">
            @foreach($homeCategories as $index => $category)
            <div class="category-grid-item category-item" 
                 x-show="showAll || {{ $index }} < 8"
                 x-cloak>
                <a href="{{ route('products.index', ['category' => $category->slug]) }}" class="block text-center group">
                    <div class="cat_img mx-auto mb-2">
                        @if($category->image)
                        <img src="{{ asset('storage/' . $category->image) }}" alt="{{ $category->name }}">
                        @else
                        <div class="w-[50px] h-[50px] bg-pink-50 rounded-full flex items-center justify-center mx-auto">
                            <svg class="w-6 h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6z"></path>
                            </svg>
                        </div>
                        @endif
                    </div>
                    <span class="category-name group-hover:text-brand-pink-600 transition">{{ $category->name }}</span>
                </a>
            </div>
            @endforeach
        </div>
        
        <!-- Show More Button (Mobile Only) -->
        @if($homeCategories->count() > 8)
        <div class="text-center mt-4 md:hidden">
            <button @click="showAll = !showAll"
                    id="toggleCategoriesBtn"
                    class="px-6 py-2 border border-brand-pink-600 text-brand-pink-600 rounded-full text-sm font-medium hover:bg-brand-pink-600 hover:text-white transition touch-target">
                <span x-text="showAll ? 'Show Less' : 'Show More'">Show More</span>
            </button>
        </div>
        @endif
    </div>
</section>

<!-- Free Shipping Products -->
@if($freeShippingProducts->count() > 0)
<section class="container mx-auto px-4 py-6 md:py-8">
    @include('frontend.partials.section-header', [
        'title' => 'Free Shipping',
        'icon' => '🚚',
        'link' => route('products.index', ['free_shipping' => 1])
    ])
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($freeShippingProducts as $product)
        @include('frontend.partials.product-card', ['product' => $product])
        @endforeach
    </div>
</section>
@endif

<!-- Offers Section - Products with Discounts -->
@if($offerProducts->count() > 0)
<section class="container mx-auto px-4 py-6 md:py-8">
    @include('frontend.partials.section-header', [
        'title' => 'Offers',
        'icon' => '🏷️',
        'link' => route('products.index', ['on_sale' => 1])
    ])
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($offerProducts as $product)
        @include('frontend.partials.product-card', ['product' => $product])
        @endforeach
    </div>
</section>
@endif

<!-- Hot Deals -->
@if($hotDealProducts->count() > 0)
<section class="container mx-auto px-4 py-6 md:py-8">
    @include('frontend.partials.section-header', [
        'title' => 'Hot Deal',
        'icon' => '🔥',
        'link' => route('products.index', ['hot_deal' => 1])
    ])
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($hotDealProducts as $product)
        @include('frontend.partials.product-card', ['product' => $product])
        @endforeach
    </div>
</section>
@endif

<!-- Category-wise Products -->
@foreach($categoryProducts as $categoryData)
<section class="container mx-auto px-4 py-6 md:py-8">
    @include('frontend.partials.section-header', [
        'title' => $categoryData['category']->name,
        'link' => route('products.index', ['category' => $categoryData['category']->slug])
    ])
    
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3 md:gap-4">
        @foreach($categoryData['products'] as $product)
        @include('frontend.partials.product-card', ['product' => $product])
        @endforeach
    </div>
</section>
@endforeach

<!-- Brands Carousel -->
@include('frontend.partials.brand-carousel')

<!-- Blog Section -->
@if($blogs->count() > 0)
<section class="container mx-auto px-4 py-8 md:py-12">
    @include('frontend.partials.section-header', [
        'title' => 'Blogs',
        'icon' => '📝',
        'link' => route('blog.index')
    ])
    
    <div class="swiper blog-swiper">
        <div class="swiper-wrapper">
            @foreach($blogs as $blog)
            <div class="swiper-slide">
                @include('frontend.partials.blog-card', ['blog' => $blog])
            </div>
            @endforeach
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    new Swiper('.blog-swiper', {
        slidesPerView: 1.2,
        spaceBetween: 16,
        breakpoints: {
            480: { slidesPerView: 1.5, spaceBetween: 16 },
            640: { slidesPerView: 2, spaceBetween: 20 },
            768: { slidesPerView: 3, spaceBetween: 24 },
            1024: { slidesPerView: 4, spaceBetween: 24 },
        },
    });
});
</script>
@endif

<!-- Features Section -->
<section class="bg-white py-8 md:py-12 border-t">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div class="text-center">
                <div class="w-14 h-14 mx-auto bg-brand-pink-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-brand-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 text-sm md:text-base">Free Shipping</h3>
                <p class="text-xs md:text-sm text-gray-500">On orders over ৳1000</p>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 mx-auto bg-brand-pink-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-brand-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 text-sm md:text-base">Secure Payment</h3>
                <p class="text-xs md:text-sm text-gray-500">100% secure checkout</p>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 mx-auto bg-brand-pink-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-brand-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 text-sm md:text-base">Easy Returns</h3>
                <p class="text-xs md:text-sm text-gray-500">7 days return policy</p>
            </div>
            <div class="text-center">
                <div class="w-14 h-14 mx-auto bg-brand-pink-100 rounded-full flex items-center justify-center mb-3">
                    <svg class="w-7 h-7 text-brand-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                </div>
                <h3 class="font-semibold text-gray-900 text-sm md:text-base">24/7 Support</h3>
                <p class="text-xs md:text-sm text-gray-500">Dedicated support</p>
            </div>
        </div>
    </div>
</section>

<!-- Footer Banners Section (1:1 - 2 banners) -->
@php
    $footerBanners = \App\Models\Banner::active()->position('footer')->orderBy('sort_order')->take(2)->get();
@endphp
@if($footerBanners->count() > 0)
<section id="footer-banners" class="py-8 bg-gray-50">
    <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            @foreach($footerBanners as $banner)
            <div class="rounded-lg overflow-hidden shadow-sm">
                @if($banner->link)
                <a href="{{ $banner->link }}" target="_blank">
                    <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-48 md:h-64 object-cover hover:opacity-90 transition-opacity">
                </a>
                @else
                <img src="{{ asset('storage/' . $banner->image) }}" alt="{{ $banner->title }}" class="w-full h-48 md:h-64 object-cover">
                @endif
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection