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

@section('content')

<main>

      <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
                <div class="container d-flex align-items-center">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('index') }}">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('shop.page.index') }}">Products</a></li>
                        <li class="breadcrumb-item active" aria-current="page">{{ $query }}</li>
                    </ol>

                    {{-- <nav class="product-pager ml-auto" aria-label="Product">
                        <a class="product-pager-link product-pager-prev" href="#" aria-label="Previous" tabindex="-1">
                            <i class="icon-angle-left"></i>
                            <span>Prev</span>
                        </a>

                        <a class="product-pager-link product-pager-next" href="#" aria-label="Next" tabindex="-1">
                            <span>Next</span>
                            <i class="icon-angle-right"></i>
                        </a>
                    </nav><!-- End .pager-nav --> --}}
                </div><!-- End .container -->
            </nav><!-- End .breadcrumb-nav -->

<div class="container">

      <h2 class="title text-center mb-4">Search Result</h2><!-- End .title text-center -->

                    <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":1
                                },
                                "480": {
                                    "items":2
                                },
                                "768": {
                                    "items":3
                                },
                                "992": {
                                    "items":4
                                },
                                "1200": {
                                    "items":4,
                                    "nav": true,
                                    "dots": false
                                }
                            }
                        }'>

                    @if (isset($products) && count($products) > 0)
                    @foreach ($products as $product)
                                @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">
                                {{-- <span class="product-label label-new">New</span> --}}
                                <a href="{{ route('single.product.view', $product->slug) }}">
                                    <img src="{{ asset('storage/' . $product->product_image) }}" alt="Product image" class="product-image">
                                </a>

                                <div class="product-action-vertical">
                                    <a href="#" 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> --}}
                                    {{-- <a href="#" class="btn-product-icon btn-compare" title="Compare"><span>Compare</span></a> --}}
                                </div><!-- End .product-action-vertical -->

                                <div class="product-action">
                                    <a href="#" 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">
                                <div class="product-cat">
                                    <a href="#">Women</a>
                                </div><!-- End .product-cat -->
                                <h3 class="product-title"><a href="product.html">{{ $product->product_name }}</a></h3><!-- End .product-title -->
                                <div class="product-price">
                                    ₹{{ number_format($price, 2, '.', ',') }}
                                </div><!-- End .product-price -->

                                {{-- <div class="product-nav product-nav-thumbs">
                                    <a href="#" class="active">
                                        <img src="assets/images/products/product-4-thumb.jpg" alt="product desc">
                                    </a>
                                    <a href="#">
                                        <img src="assets/images/products/product-4-2-thumb.jpg" alt="product desc">
                                    </a>

                                    <a href="#">
                                        <img src="assets/images/products/product-4-3-thumb.jpg" alt="product desc">
                                    </a>
                                </div><!-- End .product-nav --> --}}
                            </div><!-- End .product-body -->
                        </div><!-- End .product -->
                         @endforeach
                    @endif
                    </div><!-- End .owl-carousel -->

</div>
</main>

@endsection