@extends('themes.organic.layouts.master')
@section('title', \App\Services\ThemeProfileService::metaTitle())

@section('content')

@php
    $hp = $hp ?? ($homepageSettings ?? []);
    $useBuilder = \App\Services\HomepageSettingsService::usesPageBuilder();
    $sliderMs = max(2000, min(15000, (int) ($hp['slider_interval'] ?? 4500)));
    $firstHero = $banners->first();
@endphp

@if($firstHero && !$useBuilder)
@push('head-preload')
<link rel="preload" as="image" href="{{ \App\Support\OptimizedImage::url($firstHero->image) }}" fetchpriority="high">
@endpush
@endif

@if($useBuilder)
    @include('frontEnd.partials.grapes-content')
@else

{{-- ══ 1. Hero: Left Category Sidebar + Right Slider (Organic centered) ══ --}}
<div class="hero-section-outer">
    <div class="container hero-section-container">
        <div class="hero-wrap">
    @include('themes.shared.hero-category-sidebar', ['categories' => $categories])

    <div class="hero-slider-wrap">
        @if($banners->count() > 0)
        <div id="heroBanner" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="{{ $sliderMs }}">
            <div class="carousel-inner h-100">
                @foreach($banners as $i => $banner)
                @php $heroImg = \App\Support\OptimizedImage::heroAttributes($banner->image, (string) $banner->title, $i === 0); @endphp
                <div class="carousel-item h-100 {{ $i == 0 ? 'active' : '' }}">
                    @if($banner->link && !$banner->title && !$banner->subtitle)
                    <a href="{{ $banner->link }}" class="d-block h-100">
                        <img src="{{ $heroImg['src'] }}" alt="{{ $heroImg['alt'] }}" class="hero-slide-img"
                             loading="{{ $heroImg['loading'] }}" decoding="{{ $heroImg['decoding'] }}" fetchpriority="{{ $heroImg['fetchpriority'] }}">
                    </a>
                    @else
                    <img src="{{ $heroImg['src'] }}" alt="{{ $heroImg['alt'] }}" class="hero-slide-img"
                         loading="{{ $heroImg['loading'] }}" decoding="{{ $heroImg['decoding'] }}" fetchpriority="{{ $heroImg['fetchpriority'] }}">
                    @if($banner->title || $banner->subtitle || ($banner->link && $banner->button_text))
                    <div class="carousel-caption hero-slide-caption">
                        @if($banner->title)<h2>{{ $banner->title }}</h2>@endif
                        @if($banner->subtitle)<p>{{ $banner->subtitle }}</p>@endif
                        @if($banner->link && $banner->button_text)
                        <a href="{{ $banner->link }}" class="btn btn-light fw-bold mt-2">{{ $banner->button_text }}</a>
                        @endif
                    </div>
                    @endif
                    @endif
                </div>
                @endforeach
            </div>
            @if($banners->count() > 1)
            <button class="carousel-control-prev" type="button" data-bs-target="#heroBanner" data-bs-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#heroBanner" data-bs-slide="next">
                <span class="carousel-control-next-icon"></span>
            </button>
            <div class="carousel-indicators hero-slide-dots">
                @foreach($banners as $i => $b)
                <button type="button" data-bs-target="#heroBanner" data-bs-slide-to="{{ $i }}" class="{{ $i==0?'active':'' }}"></button>
                @endforeach
            </div>
            @endif
        </div>
        @else
        <div class="hero-section h-100 d-flex align-items-center justify-content-center">
            <div class="text-center px-4">
                <h1 style="font-size:clamp(1.4rem,3vw,2.2rem);font-weight:800;color:var(--primary)">🌿 প্রাকৃতিক পণ্যের সেরা গন্তব্য</h1>
                <p class="text-muted mt-2 mb-4">১০০% অর্গানিক ও আয়ুর্বেদিক পণ্য — সারাদেশে ডেলিভারি</p>
                <a href="#trending" class="btn btn-success btn-lg"><i class="fas fa-shopping-bag me-2"></i>Shop Now</a>
            </div>
        </div>
        @endif
    </div>
        </div>
    </div>
</div>

{{-- ══ 2. Trust Bar ══ --}}
@include('themes.shared.trust-bar', ['hp' => $hp])

{{-- ══ 3. Categories — style from Homepage Settings ══ --}}
@include('themes.shared.home-categories', ['hp' => $hp, 'categories' => $categories])

{{-- ══ 3b. Promo Cards (3 banners after categories) ══ --}}
@php $promoCards = \App\Services\HomepagePromoCardsService::activeCards($hp); @endphp
@if($promoCards->isNotEmpty())
@include('themes.shared.home-promo-cards', ['cards' => $promoCards])
@endif

{{-- ══ 4. Trending Now (Neemba carousel) ══ --}}
@if(!empty($hp['show_trending']) && ($trendingProducts ?? $featuredProducts)->count() > 0)
<section class="home-prod-block home-trending-block" id="trending" data-section="trending">
    <div class="sec-bar">
        <div class="container">
            <div class="sec-bar-inner">
                <h3>Trending Now</h3>
                <a href="{{ route('frontend.products') }}">View All <i class="fas fa-chevron-right ms-1"></i></a>
            </div>
        </div>
    </div>
    <div class="sec-products sec-trending-bg">
        <div class="container">
            <div class="prod-carousel-wrap" data-prod-carousel>
                <button type="button" class="prod-carousel-btn prod-carousel-btn--prev" aria-label="Previous" data-carousel-prev>
                    <i class="fas fa-chevron-left"></i>
                </button>
                <div class="prod-carousel-track" data-carousel-track>
                    @foreach(($trendingProducts ?? $featuredProducts) as $product)
                    @include('themes.organic.layouts.product-card', ['product' => $product, 'layout' => 'carousel'])
                    @endforeach
                </div>
                <button type="button" class="prod-carousel-btn prod-carousel-btn--next" aria-label="Next" data-carousel-next>
                    <i class="fas fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</section>
@endif

{{-- ══ 5. Best Combo Offer ══ --}}
@if(!empty($hp['show_combo']) && ($comboProducts ?? collect())->count() > 0)
<section class="home-prod-block home-cat-section" id="combo" data-section="combo">
    <div class="container">
        @include('themes.organic.partials.category-section-head', [
            'title' => 'Best Combo Offer',
            'count' => ($comboProducts ?? collect())->count(),
            'url' => route('frontend.combo-offers'),
            'iconClass' => 'fas fa-gift',
        ])
        <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('home') }}">
            @foreach($comboProducts as $product)
            @include('themes.organic.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══ 6. Category-wise product blocks (Skin Care, Hair Care, etc.) ══ --}}
@if(!empty($hp['show_category_sections']))
@foreach($categories->take(6) as $cat)
@php
    $childIds = $cat->children()->where('status', 1)->pluck('id');
    $catProductQuery = \App\Models\Product::withCount([
        'reviews as reviews_count' => fn ($q) => $q->where('status', 1),
        'variants as variants_count' => fn ($q) => $q->where('status', 1),
    ])->withAvg(['reviews as avg_rating' => fn ($q) => $q->where('status', 1)], 'rating')
        ->where('status', 1)
        ->where(function ($q) use ($cat, $childIds) {
            $q->where('category_id', $cat->id);
            if ($childIds->isNotEmpty()) {
                $q->orWhereIn('category_id', $childIds);
            }
        });
    \App\Services\ThemeCatalogService::scopeProducts($catProductQuery);
    $catProducts = $catProductQuery->latest()->limit(12)->get();
    $catTotal = (int) ($cat->products_count ?? $catProducts->count());
@endphp
@if($catProducts->count() > 0)
<section class="home-cat-section" data-section="category-{{ $cat->slug }}">
    <div class="container">
        @include('themes.organic.partials.category-section-head', [
            'title' => $cat->name,
            'count' => $catTotal,
            'url' => route('frontend.category', $cat->slug),
            'icon' => $cat->image,
            'iconClass' => $cat->iconClass(),
        ])
        <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('home') }}">
            @foreach($catProducts as $product)
            @include('themes.organic.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif
@endforeach
@endif

{{-- ══ 7. Popular Products ══ --}}
@if(!empty($hp['show_popular']) && ($popularProducts ?? $newArrivals)->count() > 0)
<section class="home-prod-block" id="popular" data-section="popular">
    <div class="container sec-products">
        <div class="pop-sec-head">
            <h3><i class="fas fa-star"></i> Popular Products</h3>
            <a href="{{ route('frontend.search') }}?sort=popular">View All <i class="fas fa-chevron-right ms-1"></i></a>
        </div>
        <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('home') }}">
            @foreach(($popularProducts ?? $newArrivals) as $product)
            @include('themes.organic.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ══ Optional sections ══ --}}
@if(!empty($hp['show_bestsellers']) && isset($bestSellers) && $bestSellers->count() > 0)
<section class="home-prod-block home-cat-section" data-section="bestsellers">
    <div class="container">
        @include('themes.organic.partials.category-section-head', [
            'title' => 'Best Sellers',
            'count' => $bestSellers->count(),
            'url' => route('frontend.products'),
            'iconClass' => 'fas fa-fire',
        ])
        <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('home') }}">
            @foreach($bestSellers as $product)
            @include('themes.organic.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

@if(!empty($hp['show_order_tracking']))
@include('frontEnd.partials.order-tracking-home')
@endif

@if(!empty($hp['show_testimonials']))
@php
try { $reviews = \App\Models\Review::where('status',1)->with('product')->latest()->limit(6)->get(); } catch(\Exception $e) { $reviews = collect(); }
@endphp
@if($reviews->count() > 0)
<section class="sec sec-alt" data-section="testimonials">
    <div class="container">
        <div class="sec-title">
            <h2>⭐ গ্রাহকদের মতামত</h2>
            <p>আমাদের সন্তুষ্ট গ্রাহকরা কী বলছেন</p>
        </div>
        <div class="{{ \App\Services\ProductItemSettingsService::gridRowClass('home') }}">
            @foreach($reviews as $r)
            <div class="col-md-4 col-sm-6">
                <div class="testimonial-card animate-up">
                    <div class="stars">
                        @for($i=1;$i<=5;$i++)<i class="fas fa-star{{ $i > $r->rating ? '-o' : '' }}"></i>@endfor
                    </div>
                    <p>"{{ Str::limit($r->comment, 120) }}"</p>
                    <div class="reviewer">
                        <div style="width:40px;height:40px;background:var(--primary-l);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);font-weight:700">
                            {{ strtoupper(substr($r->name,0,1)) }}
                        </div>
                        <div>
                            <div class="reviewer-name">{{ $r->name }}</div>
                            <small class="text-muted">{{ $r->created_at->format('d M Y') }}</small>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endif

@endif

@endsection

@push('scripts')
<script>
(function () {
    var wrap = document.getElementById('catScrollWrap');
    var row = document.getElementById('catScrollRow');
    if (row && wrap) {
        var isDown = false, startX = 0, scrollL = 0;
        row.addEventListener('mousedown', function (e) {
            if (e.button !== 0) return;
            isDown = true;
            startX = e.pageX;
            scrollL = wrap.scrollLeft;
            wrap.style.cursor = 'grabbing';
        });
        document.addEventListener('mouseup', function () {
            if (!isDown) return;
            isDown = false;
            wrap.style.cursor = '';
        });
        wrap.addEventListener('mouseleave', function () {
            if (!isDown) wrap.style.cursor = '';
        });
        wrap.addEventListener('mousemove', function (e) {
            if (!isDown) return;
            e.preventDefault();
            wrap.scrollLeft = scrollL - (e.pageX - startX);
        });
        if (window.matchMedia('(hover: hover) and (pointer: fine)').matches) {
            wrap.style.cursor = 'grab';
        }

        document.querySelectorAll('.cat-tap-item').forEach(function (el) {
            el.addEventListener('click', function () {
                el.classList.remove('is-tap');
                void el.offsetWidth;
                el.classList.add('is-tap');
                window.setTimeout(function () { el.classList.remove('is-tap'); }, 450);
            });
        });
    }

    document.querySelectorAll('.cat-tile-photo').forEach(function (img) {
        img.addEventListener('error', function () {
            var span = document.createElement('span');
            span.className = img.dataset.fallbackClass || 'cat-tile-fallback';
            span.innerHTML = '<i class="' + (img.dataset.fallbackIcon || 'fas fa-leaf') + '"></i>';
            img.replaceWith(span);
        }, { once: true });
    });

    document.querySelectorAll('[data-prod-carousel]').forEach(function (wrap) {
        var track = wrap.querySelector('[data-carousel-track]');
        var prev = wrap.querySelector('[data-carousel-prev]');
        var next = wrap.querySelector('[data-carousel-next]');
        if (!track || !prev || !next) return;

        function scrollStep() {
            var item = track.querySelector('.prod-carousel-item');
            return item ? item.offsetWidth + 14 : 220;
        }
        function updateBtns() {
            prev.disabled = track.scrollLeft <= 2;
            next.disabled = track.scrollLeft + track.clientWidth >= track.scrollWidth - 2;
        }
        prev.addEventListener('click', function () {
            track.scrollBy({ left: -scrollStep(), behavior: 'smooth' });
        });
        next.addEventListener('click', function () {
            track.scrollBy({ left: scrollStep(), behavior: 'smooth' });
        });
        track.addEventListener('scroll', updateBtns, { passive: true });
        updateBtns();
    });
})();

var observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (e) {
        if (e.isIntersecting) {
            e.target.classList.add('animate-up');
            observer.unobserve(e.target);
        }
    });
}, { threshold: .1 });
document.querySelectorAll('.prod-card').forEach(function (c) { observer.observe(c); });
</script>
@endpush