@extends('frontend.layouts.app', ['title' => 'SOAP OPERA offers elegant and trendy ladies fashion, featuring stylish outfits, accessories, and timeless essentials for the modern woman'])

@section('content')
        <main class="main">
            <div class="intro-section">
                <div class="intro-section-slider">
                    <div class="container">
                        <div class="intro-slider-container slider-container-ratio mb-0">
                            <div class="intro-slider owl-carousel owl-simple owl-light" data-toggle="owl" 
                                data-owl-options='{
                                    "nav": false, 
                                    "dots": true,
                                    "responsive": {
                                        "1200": {
                                            "nav": true,
                                            "dots": false
                                        }
                                    }
                                }'>
                                @foreach ($banners as $banner)
                                <div class="intro-slide">
                                    <figure class="slide-image">
                                        <picture>
                                            <source media="(max-width: 480px)" srcset="{{ asset('storage/' . $banner->image) }}">
                                            <img src="{{ asset('storage/' . $banner->image) }}" alt="Image Desc">
                                        </picture>
                                    </figure><!-- End .slide-image -->


                                </div><!-- End .intro-slide -->
                                @endforeach
                                {{-- <div class="intro-slide">
                                    <figure class="slide-image">
                                        <picture>
                                            <source media="(max-width: 480px)" srcset="assets/images/demos/demo-9/slider/slide-2-480w.jpg">
                                            <img src="assets/images/demos/demo-9/slider/slide-2.jpg" alt="Image Desc">
                                        </picture>
                                    </figure><!-- End .slide-image -->

                                    <div class="intro-content">
                                        <h3 class="intro-subtitle">New Collection</h3><!-- End .h3 intro-subtitle -->
                                        <h1 class="intro-title text-white">Men’s <br>Coats & Jackets</h1><!-- End .intro-title -->

                                        <a href="category.html" class="btn btn-primary">
                                            <span>DISCOVER NOW</span>
                                        </a>
                                    </div><!-- End .intro-content -->
                                </div><!-- End .intro-slide -->

                                <div class="intro-slide">
                                    <figure class="slide-image">
                                        <picture>
                                            <source media="(max-width: 480px)" srcset="assets/images/demos/demo-9/slider/slide-3-480w.jpg">
                                            <img src="assets/images/demos/demo-9/slider/slide-3.jpg" alt="Image Desc">
                                        </picture>
                                    </figure><!-- End .slide-image -->

                                    <div class="intro-content">
                                        <h3 class="intro-subtitle">Deals and Promotions</h3><!-- End .h3 intro-subtitle -->
                                        <h1 class="intro-title text-white">Sneakers & Athletic Shoes</h1><!-- End .intro-title -->

                                        <div class="intro-text text-white">from ₹9.99</div><!-- End .intro-text -->

                                        <a href="category.html" class="btn btn-primary">
                                            <span>SHOP NOW</span>
                                        </a>
                                    </div><!-- End .intro-content -->
                                </div><!-- End .intro-slide --> --}}
                            </div><!-- End .intro-slider owl-carousel owl-simple -->
                                    
                            <span class="slider-loader"></span><!-- End .slider-loader -->
                        </div><!-- End .intro-slider-container -->
                    </div><!-- End .container -->
                </div><!-- End .intro-section-slider -->

                <div class="icon-boxes-container pt-0 pb-0">
                    <div class="container">
                        <div class="owl-carousel owl-simple" data-toggle="owl" 
                            data-owl-options='{
                                "nav": false, 
                                "dots": false,
                                "margin": 30,
                                "loop": false,
                                "autoplay": true,
                                "autoplayTimeout": 8000,
                                "responsive": {
                                    "0": {
                                        "items":1
                                    },
                                    "480": {
                                        "items":2
                                    },
                                    "992": {
                                        "items":3
                                    },
                                    "1200": {
                                        "items":4
                                    }
                                }
                            }'>
                                <div class="icon-box icon-box-side">
                                    <span class="icon-box-icon">
                                        <i class="icon-rocket"></i>
                                    </span>

                                    <div class="icon-box-content">
                                        <h3 class="icon-box-title">Free Shipping</h3><!-- End .icon-box-title -->
                                        <p>PAN India</p>
                                    </div><!-- End .icon-box-content -->
                                </div><!-- End .icon-box -->
                            
                                <div class="icon-box icon-box-side">
                                    <span class="icon-box-icon">
                                        <i class="icon-rotate-left"></i>
                                    </span>

                                    <div class="icon-box-content">
                                        <h3 class="icon-box-title">Free Returns</h3><!-- End .icon-box-title -->
                                        <p>Within 15 days</p>
                                    </div><!-- End .icon-box-content -->
                                </div><!-- End .icon-box -->

                                <div class="icon-box icon-box-side">
                                    <span class="icon-box-icon">
                                        <i class="icon-info-circle"></i>
                                    </span>

                                    <div class="icon-box-content">
                                        <h3 class="icon-box-title">Enjoy 7% Off above ₹2500</h3><!-- End .icon-box-title -->
                                        <p>Use "Code-007"</p>
                                    </div><!-- End .icon-box-content -->
                                </div><!-- End .icon-box -->

                                <div class="icon-box icon-box-side">
                                    <span class="icon-box-icon">
                                        <i class="icon-life-ring"></i>
                                    </span>

                                    <div class="icon-box-content">
                                        <h3 class="icon-box-title">We Support</h3><!-- End .icon-box-title -->
                                        <p>24/7 amazing services</p>
                                    </div><!-- End .icon-box-content -->
                                </div><!-- End .icon-box -->
                        </div><!-- End .owl-carousel -->
                    </div><!-- End .container -->
                </div><!-- End .icon-boxes-container -->
            </div><!-- End .intro-section -->

           
            <div class="category_list pt-4">
                <div class="container">
                    
                        <div class="heading heading-center mb-3">
                            <h2 class="title">Explore Our Collections</h2><!-- End .title -->
    
                        </div>
                        <div class="row">
                        <div class="owl-carousel owl-simple" data-toggle="owl" 
                        data-owl-options='{
                            "nav": false, 
                            "dots": true,
                            "margin": 20,
                            "loop": false,
                            "responsive": {
                                "0": {
                                    "items":2
                                },
                                "480": {
                                    "items":2
                                },
                                "768": {
                                    "items":3
                                },
                                "992": {
                                    "items":4
                                },
                                "1200": {
                                    "items":4,
                                    "nav": true,
                                    "dots": false
                                }
                            }
                        }'>
                      @foreach ($categories as $category )
                            @php
                                $countProduct = 0;
                                
                                // Count products directly in the main category
                                $countProduct += $category->products->where('is_deleted', 0)->count();
                                
                                // Count products in subcategories
                                foreach( $category->sub_categories as $subCat ){
                                    $countProduct += $subCat->products->where('is_deleted', 0)->count();
                                }
                            @endphp
                            
                            {{-- @if ($countProduct > 0) --}}
                                <div class="banner banner-cat">
                                    @if($countProduct > 0)
                                    <a href="categories/{{ $category->slug }}/0" class="cat-img-h">
                                        <img src="{{ asset($category->image) }}" alt="Banner">
                                    </a>
                                    @else   

                                    <a class="cat-img-h">
                                        <img src="{{ asset($category->image) }}" alt="Banner">
                                    </a>

                                    @endif
                                   

                                    <div class="banner-content banner-content-static text-center">
                                        <h3 class="banner-title">{{ $category->title }}</h3><!-- End .banner-title -->
                                        <h4 class="banner-subtitle">{{ $countProduct }} Products</h4><!-- End .banner-subtitle -->

                                    @if($countProduct > 0)
                                        <a href="categories/{{ $category->slug }}/0" class="banner-link">Shop Now</a>
                                        @else   

                                        <a  class="banner-link">Shop Now</a>

                                    @endif
                                   
                                       
                                    </div><!-- End .banner-content -->
                                </div><!-- End .banner -->
                            {{-- @endif --}}
                        @endforeach
            		

            		
        			</div>
                    </div>
                </div>
            </div>

         
            <div class="bg-light-2 pt-6 pb-6 featured">
                <div class="container">
                    <div class="heading heading-center mb-3">
                        <h2 class="title">Top Trending Looks</h2><!-- End .title -->
                    </div><!-- End .heading -->

                    <div class="tab-content tab-content-carousel">
                        <div class="tab-pane p-0 fade show active" id="featured-women-tab" role="tabpanel" aria-labelledby="featured-women-link">
                            <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl" 
                                data-owl-options='{
                                    "nav": false, 
                                    "dots": true,
                                    "margin": 20,
                                    "loop": false,
                                    "responsive": {
                                        "0": {
                                            "items":2
                                        },
                                        "480": {
                                            "items":2
                                        },
                                        "768": {
                                            "items":3
                                        },
                                        "992": {
                                            "items":4
                                        },
                                        "1200": {
                                            "items":5,
                                            "nav": true
                                        }
                                    }
                                }'>

                               
                                @foreach ($best_seller_products as  $product )
                                {{-- @dd($product->images) --}}

                                 @php
                                $isInWishlist = $wishlist->contains('product_id', $product->product_id);
                            @endphp

                               @php
                                    $mrp = $product->variations[0]->mrp ?? $product->base_mrp;
                                    $price = $product->variations[0]->price ?? $product->base_price;
                                    $percentOff = $mrp > 0 && $price > 0 ? round((($mrp - $price) / $mrp) * 100) : 0;
                                @endphp
                                
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="{{ asset('storage/'.$product->product_image) }}" alt="Product image" class="product-image">
                                            <img src="{{ asset('storage/'.$product->images[0]->image) }}" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a  class="btn-product-icon btn-wishlist btn-expandable {{ $isInWishlist ? 'liked' : 'add-to-wishlist' }}" data-id="{{ $product->product_id }}" onclick="addTowishListClass(this)"><span>add to wishlist</span></a>
                                            {{-- <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a> --}}
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a class="btn-product btn-cart add-to-cart" data-id="{{ $product->product_id }}"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">{{ $product->product_name }}</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            ₹{{ number_format($price, 2, '.', ',') }}
                                        </div><!-- End .product-price -->
                                        
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                @endforeach

                              
                              
                                {{-- @push('scriptsLivewire')
                                    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
                                    <script>
                                       // document.addEventListener('livewire:load', function () {
                                            console.log("LivewireLoaded");
                                            $(document).on('click', '.add-to-cart', function () {
                                                console.log("clicked");
                                                var productId = $(this).data('id');
                                                window.Livewire.emit('addToCart', productId);
                                            });
                                      //  });
                                    </script>
                                    @endpush --}}

                                {{-- <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="assets/images/demos/demo-7/products/product-2-1.jpg" alt="Product image" class="product-image">
                                            <img src="assets/images/demos/demo-7/products/product-2-2.jpg" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a href="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
                                            <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">Biker jacket</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            ₹120.99
                                        </div><!-- End .product-price -->
                                       

                                        <div class="product-nav product-nav-dots">
                                            <a href="#" class="active" style="background: #d79442;"><span class="sr-only">Color name</span></a>
                                            <a href="#" style="background: #cc3333;"><span class="sr-only">Color name</span></a>
                                        </div><!-- End .product-nav -->
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="assets/images/demos/demo-7/products/product-3-1.jpg" alt="Product image" class="product-image">
                                            <img src="assets/images/demos/demo-7/products/product-3-2.jpg" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a href="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
                                            <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">Sandals</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            ₹70.00
                                        </div><!-- End .product-price -->
                                      
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <span class="product-label label-circle label-sale">Sale</span>
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="assets/images/demos/demo-7/products/product-4-1.jpg" alt="Product image" class="product-image">
                                            <img src="assets/images/demos/demo-7/products/product-4-2.jpg" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a href="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
                                            <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->

                                        <div class="deal-countdown offer-countdown" data-until="+11d"></div><!-- End .deal-countdown -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">Super Skinny High Jeggings</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            <span class="new-price">₹190.00</span>
                                            <span class="old-price">₹310.00</span>
                                        </div><!-- End .product-price -->
                                      
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <span class="product-label label-circle label-top">Top</span>
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="assets/images/demos/demo-7/products/product-5-1.jpg" alt="Product image" class="product-image">
                                            <img src="assets/images/demos/demo-7/products/product-5-2.jpg" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a href="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
                                            <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">Short wrap dress</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            ₹80.00
                                        </div><!-- End .product-price -->
                                      
                                    </div><!-- End .product-body -->
                                </div><!-- End .product -->
                                <div class="product product-7 text-center">
                                    <figure class="product-media">
                                        <a href="{{ route('single.product.view', $product->slug) }}">
                                            <img src="assets/images/demos/demo-7/products/product-1-1.jpg" alt="Product image" class="product-image">
                                            <img src="assets/images/demos/demo-7/products/product-1-2.jpg" alt="Product image" class="product-image-hover">
                                        </a>

                                        <div class="product-action-vertical">
                                            <a href="#" class="btn-product-icon btn-wishlist btn-expandable"><span>add to wishlist</span></a>
                                            <a href="popup/quickView.html" class="btn-product-icon btn-quickview" title="Quick view"><span>Quick view</span></a>
                                        </div><!-- End .product-action-vertical -->

                                        <div class="product-action">
                                            <a href="#" class="btn-product btn-cart"><span>add to cart</span></a>
                                        </div><!-- End .product-action -->
                                    </figure><!-- End .product-media -->

                                    <div class="product-body">
                                        <h3 class="product-title"><a href="{{ route('single.product.view', $product->slug) }}">Backpack</a></h3><!-- End .product-title -->
                                        <div class="product-price">
                                            ₹60.00
                                        </div><!-- End .product-price -->
                                       
                                    </div><!-- End .product-body -->
                                </div><!-- End .product --> --}}
                            </div><!-- End .owl-carousel -->
                        </div><!-- .End .tab-pane -->
                       
                    </div><!-- End .tab-content -->
                </div><!-- End .container-fluid -->
            </div><!-- End .bg-light-2 pt-4 pb-4 -->

            <div class="mb-6"></div><!-- End .mb-6 -->



                
                   @livewire('product-list')
               
  
        </main><!-- End .main -->


                                

@endsection