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

@section('content')
@php
    use App\Models\Product;
    use App\Services\ThemeCatalogService;
    $hp = $hp ?? ($homepageSettings ?? []);
    $useBuilder = \App\Services\HomepageSettingsService::usesPageBuilder();
    $sliderMs = max(2000, min(15000, (int) ($hp['slider_interval'] ?? 4500)));
    $mediaUrl = function ($path) {
        if (!$path) return null;
        if (str_starts_with($path, 'http://') || str_starts_with($path, 'https://')) return $path;
        return asset($path);
    };
@endphp

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

@if($banners->count() > 0)
<section class="pj-hero">
    <div id="pjHero" class="carousel slide" data-bs-ride="carousel" data-bs-interval="{{ $sliderMs }}">
        <div class="carousel-inner">
            @foreach($banners as $i => $banner)
            <div class="carousel-item {{ $i === 0 ? 'active' : '' }}">
                @if($banner->link)
                <a href="{{ $banner->link }}"><img src="{{ $mediaUrl($banner->image) }}" alt="{{ $banner->title }}" class="pj-hero-img"></a>
                @else
                <img src="{{ $mediaUrl($banner->image) }}" alt="{{ $banner->title }}" class="pj-hero-img">
                @endif
            </div>
            @endforeach
        </div>
        @if($banners->count() > 1)
        <button class="carousel-control-prev" type="button" data-bs-target="#pjHero" data-bs-slide="prev"><span class="carousel-control-prev-icon"></span></button>
        <button class="carousel-control-next" type="button" data-bs-target="#pjHero" data-bs-slide="next"><span class="carousel-control-next-icon"></span></button>
        @endif
    </div>
</section>
@endif

@if(!empty($hp['show_new_arrivals']) && ($newArrivals ?? collect())->count() > 0)
<section class="pj-section">
    <div class="container">
        <div class="pj-section-head">
            <h2 class="pj-section-title">Discover What's New</h2>
            <a href="{{ route('frontend.products', ['sort' => 'new']) }}" class="pj-view-all">View all</a>
        </div>
        <div class="row g-3 g-md-4">
            @foreach($newArrivals->take(12) as $product)
            @include('themes.panjabi.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

@if(!empty($hp['show_category_sections']))
@foreach($categories as $cat)
@php
    $catProducts = Product::where('status', 1)
        ->where(function ($q) use ($cat) {
            $q->where('category_id', $cat->id)
              ->orWhereIn('category_id', $cat->children()->where('status', 1)->pluck('id'));
        });
    ThemeCatalogService::scopeProducts($catProducts);
    $catProducts = $catProducts->latest()->limit(12)->get();
@endphp
@if($catProducts->count())
<section class="pj-section pj-section-alt">
    <div class="container">
        <div class="pj-section-head">
            <h2 class="pj-section-title">{{ $cat->name }}</h2>
            <a href="{{ route('frontend.category', $cat->slug) }}" class="pj-view-all">View all</a>
        </div>
        <div class="row g-3 g-md-4">
            @foreach($catProducts as $product)
            @include('themes.panjabi.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif
@endforeach
@endif

@if(!empty($hp['show_trending']) && ($trendingProducts ?? collect())->count() > 0)
<section class="pj-section pj-explore">
    <div class="container">
        <div class="pj-explore-intro text-center mb-4">
            <h2 class="pj-section-title">Explore All Panjabis</h2>
            <p class="pj-explore-text">Explore our full collection of Panjabis, offering a variety of styles, fabrics, and colors for every occasion. Find your perfect fit with ease.</p>
        </div>
        <div class="row g-3 g-md-4">
            @foreach($trendingProducts->take(12) as $product)
            @include('themes.panjabi.layouts.product-card', compact('product'))
            @endforeach
        </div>
        <div class="text-center mt-4">
            <a href="{{ route('frontend.products') }}" class="pj-view-all-btn">View all</a>
        </div>
    </div>
</section>
@endif

@endif
@endsection