@extends('layouts.user')



@section('content')



<!-- Sub Categories -->

<!-- Categories -->

<section class="flat-spacing">

    <div class="container">

        <div class="heading-section-2 wow fadeInUp">

            <h3 class="heading">Explore Collections</h3>

            <a href="{{ url('categories') }}" class="btn-line">View All Collection</a>

        </div>

    </div>



    <!-- Subcategories Slider -->

    <div class="container-full slider-layout-right wow fadeInUp" data-wow-delay="0.1s">

        @if($sub_categories->count() > 0)

            <div dir="ltr" class="swiper tf-sw-categories" data-preview="6" data-tablet="4" data-mobile-sm="3" data-mobile="2"

                 data-space-lg="20" data-space-md="20" data-space="15" data-pagination="2" data-pagination-md="2" data-pagination-lg="1">

                 

                <div class="swiper-wrapper">

                    @foreach($sub_categories as $sub)

                        <div class="swiper-slide">

                            <!-- <div class="collection-position-2 hover-img category-box">

                                <a href="{{ route('user.subcategory.products', $sub->sub_category_id) }}" class="img-style">

                                    <img class="lazyload" 

                                         data-src="{{ asset($sub->sub_category_image ?? 'images/collections/collection-circle/default.jpg') }}" 

                                         src="{{ asset($sub->sub_category_image ?? 'images/collections/collection-circle/default.jpg') }}" 

                                         alt="{{ $sub->sub_category_name }}">

                                </a>

                                <div class="content text-center">

                                    <a href="{{ route('user.subcategory.products', $sub->sub_category_id) }}" class="cls-btn">

                                        <h6 class="text">{{ $sub->sub_category_name }}</h6>

                                        <i class="icon icon-arrowUpRight"></i>

                                    </a>

                                </div>

                            </div> -->

                            <div class="collection-position-2 hover-img category-box" style="border-radius:0; overflow:hidden;">

    <a href="{{ route('user.subcategory.products', $sub->sub_category_id) }}" class="img-style" style="border-radius:0;">
        <img class="lazyload"
             data-src="{{ asset($sub->sub_category_image ?? 'images/collections/collection-circle/default.jpg') }}"
             src="{{ asset($sub->sub_category_image ?? 'images/collections/collection-circle/default.jpg') }}"
             alt="{{ $sub->sub_category_name }}"
             style="border-radius:0;">
    </a>

     <div class="content text-center">

                                    <a href="{{ route('user.subcategory.products', $sub->sub_category_id) }}" class="cls-btn">

                                        <h6 class="text">{{ $sub->sub_category_name }}</h6>

                                        <i class="icon icon-arrowUpRight"></i>

                                    </a>

                                </div>

</div>

                        </div>

                    @endforeach

                </div>



                <div class="sw-pagination-categories sw-dots type-circle justify-content-center"></div>

            </div>

        @else

            <p class="text-center text-danger">No subcategories found.</p>

        @endif

    </div>

</section>



<!-- Styling -->

<style>

/* Subcategory slider image style */

.category-box .img-style img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 12px;

}



/* On mobile: shorter rectangle */

@media (max-width: 767px) {

    .category-box .img-style img {

        height: 150px;

        border-radius: 8px;

    }

}



/* Center content in slider */

.category-box .content {

    position: absolute;

    bottom: 10px;

    width: 100%;

}

</style>



<!-- Products -->

<section class="flat-spacing">

    <div class="container">

        <!-- Shop controls -->

        <div class="wrapper-control-shop">

            <div class="meta-filter-shop">

                <div id="product-count-grid" class="count-text"></div>

                <div id="product-count-list" class="count-text"></div>

                <div id="applied-filters"></div>

                <button id="remove-all" class="remove-all-filters text-btn-uppercase" style="display: none;">
                    REMOVE ALL <i class="icon icon-close"></i>
                </button>

            </div>

            <div class="tf-list-layout wrapper-shop" id="listLayout"></div>

            <div class="tf-grid-layout wrapper-shop tf-col-4" id="gridLayout">

                @php
                    $wishlistProductIds = session()->get('wishlist', []);
                @endphp

                @if($products->count() > 0)
                    @foreach($products as $product)

                        @php
                            $variant = $product->variants->first();
                            $isWishlisted = in_array($product->product_id, $wishlistProductIds);

                            // Price fallback
                            $mrp = $variant->mrp ?? $product->product_base_mrp;
                            $salePrice = $variant->sale_price ?? $product->product_base_price;

                            $thumbnail = $product->product_thumbnail ? asset($product->product_thumbnail) : asset('images/no-image.png');
                            $hoverImage = $variant && $variant->image ? asset($variant->image) : $thumbnail;
                        @endphp

                        <div class="card-product grid" 
                             data-availability="{{ $variant ? 'In stock' : 'Out of stock' }}" 
                             data-brand="{{ $product->brand ?? 'N/A' }}"
                             style="border-radius:0; overflow:hidden;">

                            <div class="card-product-wrapper" style="border-radius:0; overflow:hidden;">

                                <a href="{{ url('product-details/'.$product->product_id) }}" 
                                   class="product-img d-block"
                                   style="border-radius:0; overflow:hidden; display:block;">

                                    <img class="lazyload img-product" 
                                         data-src="{{ $thumbnail }}" 
                                         src="{{ $thumbnail }}" 
                                         alt="{{ $product->product_name }}"
                                         style="border-radius:0;">

                                    <img class="lazyload img-hover" 
                                         data-src="{{ $hoverImage }}" 
                                         src="{{ $hoverImage }}" 
                                         alt="{{ $product->product_name }}"
                                         style="border-radius:0;">
                                </a>

                                <div class="list-product-btn">

                                    <a href="{{ url('wishlist/toggle/'.$product->product_id) }}" 
                                       class="box-icon wishlist btn-icon-action {{ $isWishlisted ? 'text-danger' : '' }}"
                                       style="border-radius:0;">

                                        <span class="icon icon-heart"></span>
                                        <span class="tooltip">{{ $isWishlisted ? 'Remove from Wishlist' : 'Wishlist' }}</span>

                                    </a>

                                </div>

                                <!-- ⭐ ADDED EXACTLY AS YOU PROVIDED (Add to Cart Button) -->
                                <div class="list-btn-main">

                                    <form action="{{ url('cart/add/'.$product->product_id) }}" method="POST">

                                        @csrf

                                        <input type="hidden" name="product_id" value="{{ $product->product_id }}">

                                        <input type="hidden" name="product_name" value="{{ $product->product_name }}">

                                        <input type="hidden" name="product_price" value="{{ $product->product_base_price }}">

                                        <input type="hidden" name="product_image" value="{{ $product->product_thumbnail }}">

                                        <button type="submit" class="btn-main-product">Add To cart</button>

                                    </form>

                                </div>
                                <!-- ⭐ END ADD TO CART BUTTON -->

                            </div>

                            <div class="card-product-info" style="border-radius:0;">
                                <a href="{{ url('product-details/'.$product->product_id) }}" 
                                   class="title link">{{ $product->product_name }}</a>

                                <div class="price">
                                    @if($mrp && $salePrice && $salePrice < $mrp)
                                        <span class="old-price">₹{{ number_format($mrp, 2) }}</span>
                                    @endif

                                    <span class="current-price">₹{{ number_format($salePrice, 2) }}</span>
                                </div>
                            </div>

                        </div>
                    @endforeach

                @else
                    <p class="text-center text-danger">No products found in this category.</p>
                @endif

            </div>

        </div>

    </div>

</section>

<style>
/* Make button sharp rectangle */
.btn-main-product {
    border-radius: 0px !important;
}

/* Desktop hover color: #006361 with 60% opacity */
@media (min-width: 768px) {
    .btn-main-product:hover {
        background-color: rgba(0, 99, 97, 0.6) !important;
    }
}

/* Mobile view: constant color */
@media (max-width: 767px) {
    .btn-main-product {
        background-color: #FFFFFFFF !important;
    }
}
</style>




<style>

.sub-category-circle-img {

    width: 100%;

    aspect-ratio: 1 / 1;

    border-radius: 50%;

    object-fit: cover;

    display: block;

}



/* Mobile two-column layout for product grid */

@media (max-width: 767px) {

    .tf-grid-layout.tf-col-4 {

        display: grid;

        grid-template-columns: repeat(2, 1fr) !important;

        gap: 15px;

    }

}

</style>

@endsection