@extends('themes.cloth.layouts.master')
@section('title', ($setting->name ?? 'Top Ten Mart Ltd') . ' — Fashion Store')

@section('content')

@php
    $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

{{-- Hero Slider --}}
@if($banners->count() > 0)
<section class="cloth-hero" data-section="hero">
    <div id="clothHero" 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' : '' }}">
                @php $bannerSrc = $mediaUrl($banner->image); @endphp
                @if($banner->link)
                <a href="{{ $banner->link }}" class="cloth-hero-link">
                    <img src="{{ $bannerSrc }}" alt="{{ $banner->title }}" class="cloth-hero-img">
                </a>
                @else
                <img src="{{ $bannerSrc }}" alt="{{ $banner->title }}" class="cloth-hero-img">
                @endif
                @if($banner->title || $banner->subtitle)
                <div class="cloth-hero-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="cloth-btn-outline">{{ $banner->button_text }}</a>
                    @endif
                </div>
                @endif
            </div>
            @endforeach
        </div>
        @if($banners->count() > 1)
        <button class="carousel-control-prev" type="button" data-bs-target="#clothHero" data-bs-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#clothHero" data-bs-slide="next">
            <span class="carousel-control-next-icon"></span>
        </button>
        @endif
    </div>
</section>
@endif

{{-- Trust Bar --}}
@if(!empty($hp['show_trust_bar']))
@include('themes.shared.trust-bar', ['hp' => $hp, 'colClass' => 'col-6 col-lg-3'])
@endif

{{-- Top Categories --}}
@if(!empty($hp['show_categories']) && $categories->count() > 0)
<section class="cloth-section" data-section="categories">
    <div class="container">
        <h2 class="cloth-sec-title">Top Categories</h2>
        <div class="cloth-cat-grid">
            @foreach($categories->take(5) as $cat)
            <a href="{{ route('frontend.category', $cat->slug) }}" class="cloth-cat-tile">
                <div class="cloth-cat-img">
                    @if($cat->image)
                        <img src="{{ $mediaUrl($cat->image) }}" alt="{{ $cat->name }}" loading="lazy">
                    @else
                        <span class="cloth-cat-fallback"><i class="fas {{ $cat->icon ?? 'fa-tag' }}"></i></span>
                    @endif
                </div>
                <span class="cloth-cat-label">{{ $cat->name }}</span>
            </a>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Featured Collections --}}
@if(!empty($hp['show_featured_collections']) && (($menProducts ?? collect())->count() || ($womenProducts ?? collect())->count()))
<section class="cloth-section cloth-section-alt" data-section="featured">
    <div class="container">
        <h2 class="cloth-sec-title">Featured Collections</h2>
        <ul class="nav cloth-tabs" role="tablist">
            <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#featWomen" type="button">Women's</button></li>
            <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#featMen" type="button">Men's</button></li>
        </ul>
        <div class="tab-content pt-3">
            <div class="tab-pane fade show active" id="featWomen">
                <div class="row g-3">
                    @forelse(($womenProducts ?? collect()) as $product)
                        @include('themes.cloth.layouts.product-card', compact('product'))
                    @empty
                        <div class="col-12 text-center text-muted py-4">No women's products yet.</div>
                    @endforelse
                </div>
            </div>
            <div class="tab-pane fade" id="featMen">
                <div class="row g-3">
                    @forelse(($menProducts ?? collect()) as $product)
                        @include('themes.cloth.layouts.product-card', compact('product'))
                    @empty
                        <div class="col-12 text-center text-muted py-4">No men's products yet.</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</section>
@endif

{{-- Promo Banners --}}
@if(!empty($hp['show_promo_banners']))
<section class="cloth-section" data-section="promo">
    <div class="container">
        <div class="row g-3">
            <div class="col-md-6">
                <a href="{{ route('frontend.category', 'women') }}" class="cloth-promo-block">
                    <img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&h=600&fit=crop" alt="new premium dress" loading="lazy">
                    <div class="cloth-promo-text">
                        <h3>new premium dress</h3>
                        <p>explore living</p>
                        <span class="cloth-btn-outline">Shop Now</span>
                    </div>
                </a>
            </div>
            <div class="col-md-6">
                <a href="{{ route('frontend.category', 'men') }}" class="cloth-promo-block">
                    <img src="https://images.unsplash.com/photo-1445205170230-053b83016050?w=900&h=600&fit=crop" alt="ready to wear" loading="lazy">
                    <div class="cloth-promo-text">
                        <h3>ready to wear</h3>
                        <p>explore living</p>
                        <span class="cloth-btn-outline">Shop Now</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- Top Trending --}}
@if(!empty($hp['show_trending']) && ($trendingProducts ?? collect())->count() > 0)
<section class="cloth-section cloth-section-alt" data-section="trending">
    <div class="container">
        <h2 class="cloth-sec-title">Top Trending Products</h2>
        <div class="row g-3">
            @foreach($trendingProducts as $product)
                @include('themes.cloth.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- New Arrivals --}}
@if(!empty($hp['show_new_arrivals']) && ($newArrivals ?? collect())->count() > 0)
<section class="cloth-section" data-section="new-arrivals">
    <div class="container">
        <h2 class="cloth-sec-title">New Arrival Products</h2>
        <div class="row g-3">
            @foreach($newArrivals as $product)
                @include('themes.cloth.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Formal + Ethnic --}}
@if(!empty($hp['show_formal_ethnic']))
<section class="cloth-section cloth-section-alt" data-section="formal-ethnic">
    <div class="container">
        <div class="row g-3">
            <div class="col-md-6">
                <a href="{{ route('frontend.category', 'men') }}" class="cloth-lifestyle-block">
                    <img src="https://images.unsplash.com/photo-1594938298603-c8148c4dae35?w=900&h=700&fit=crop" alt="Formal Wear" loading="lazy">
                    <div class="cloth-lifestyle-text">
                        <h3>Formal Wear</h3>
                        <p>Where confidence meets cut</p>
                        <span class="cloth-btn-outline">Shop Now</span>
                    </div>
                </a>
            </div>
            <div class="col-md-6">
                <a href="{{ route('frontend.category', 'panjabi') }}" class="cloth-lifestyle-block">
                    <img src="https://images.unsplash.com/photo-1583391735256-15a5206a6549?w=900&h=700&fit=crop" alt="Ethnic wear" loading="lazy">
                    <div class="cloth-lifestyle-text">
                        <h3>ethnic wear</h3>
                        <p>Rooted in tradition, styled for today</p>
                        <span class="cloth-btn-outline">Shop Now</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>
@endif

{{-- Journal --}}
@if(!empty($hp['show_journal']) && ($journalPosts ?? collect())->count() > 0)
<section class="cloth-section" data-section="journal">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
            <h2 class="cloth-sec-title mb-0">From the Journal</h2>
            <a href="{{ route('frontend.blog.index') }}" class="cloth-link-more">view more</a>
        </div>
        <div class="row g-3">
            @foreach($journalPosts as $post)
            <div class="col-md-4">
                <a href="{{ route('frontend.blog.show', $post->slug) }}" class="cloth-journal-card">
                    @if($post->image)
                    <div class="cloth-journal-img">
                        <img src="{{ $mediaUrl($post->image) }}" alt="{{ $post->title }}" loading="lazy">
                    </div>
                    @endif
                    <div class="cloth-journal-body">
                        <time>{{ optional($post->published_at)->format('M d, Y') }}</time>
                        <h4>{{ $post->title }}</h4>
                        <p>{{ Str::limit($post->excerpt ?? strip_tags($post->content), 120) }}</p>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- Gift Cards --}}
@if(!empty($hp['show_gift_cards']) && ($giftCardProducts ?? collect())->count() > 0)
<section class="cloth-section cloth-section-alt" data-section="gift-cards">
    <div class="container">
        <h2 class="cloth-sec-title">Gift Card</h2>
        <div class="row g-3">
            @foreach($giftCardProducts as $product)
                @include('themes.cloth.layouts.product-card', compact('product'))
            @endforeach
        </div>
    </div>
</section>
@endif

@endif
@endsection