@extends('layouts.front-layout')
@section('title') All Product @endsection
@section('content')

    <!-- Begin: Main Slider -->
    <div class="innerBan">
                <img src="{{ asset('front-assets/images/lipestick.jpg
        ') }}" class="w-100" alt="">
        <!--<img src="{{ asset('front-assets/images/shop_fav_new.jpg') }}" class="w-100" alt="">-->
        <!--<div class="overlay">-->
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <!--<h2>{{ $pageData['Product']['top_banner_title'] ?? '' }}</h2>-->
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->
    <section class="productSec product-page">
        <div class="container">
            <div class="productHeading text-center" data-aos="fade-up">
                <span class="smallHeading">Top Branded</span>
                <h2 class="secHeading">Products</h2>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="productTabs" data-aos="fade-up">
                        <ul class="nav nav-pills" id="pills-tab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-home-tab" data-toggle="pill"
                                        data-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
                                        aria-selected="true">Featured
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-profile-tab" data-toggle="pill"
                                        data-target="#pills-profile" type="button" role="tab"
                                        aria-controls="pills-profile"
                                        aria-selected="false">Popular
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-contact-tab" data-toggle="pill"
                                        data-target="#pills-contact" type="button" role="tab"
                                        aria-controls="pills-contact"
                                        aria-selected="false">Category
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-brand-tab" data-toggle="pill"
                                        data-target="#pills-brand" type="button" role="tab" aria-controls="pills-brand"
                                        aria-selected="false">Brand
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent" data-aos="fade-up">
                        <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
                             aria-labelledby="pills-home-tab">
                            <div class="row align-items-center">
                                @forelse($get_feature_products as $feature_product)
                                    <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                    <div class="col-md-3 product_data">
                                        <div class="productWrap">
                                            <figure>
                                                <img src="
                                                    {{
                        $feature_product->productImage('product_main_image') ?:
                        ($feature_product->productVariation->first() && $feature_product->productVariation->first()->productVariationImage()->first()
                            ? $feature_product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                                }}
                                                        "
                                                    class="img-fluid" alt="">
                                            </figure>
                                            <div class="productContent">
                                                <ul class="topIcon">
                                                    <li><span>-11%</span></li>
                                                    <li><span>Featured</span></li>
                                                </ul>
                                                <h3>{{ $feature_product->product_name ? : '' }}</h3>
                                                <p>{!! \Illuminate\Support\Str::limit(strip_tags($feature_product->description), 70, '...') !!}</p>
                                                <ul>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                </ul>

                                                @if($feature_product->product_price == null)
                                                    @if ($feature_product->productVariation->first())
                                                        <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                            $ {{ $feature_product->productVariation->first()->variant_price ? : '' }}
                                                            <del>
                                                                $ {{ $feature_product->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                                        </a>
                                                    @endif
                                                @else
                                                    <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                        @if($feature_product->product_discount == null)
                                                            $ {{ $feature_product->product_price ? : '' }}
                                                        @else
                                                            $ {{ $feature_product->product_discount ? : '' }}
                                                            <del>$ {{ $feature_product->product_price ? : '' }}</del>

                                                        @endif

                                                    </a>
                                                @endif
                                                <input type="hidden" class="product_id" value="{{$feature_product->id}}">
                                                @guest
                                                    <a href="{{route('user.login-view')}}" class="btn btn-danger btn-sm btn-block" style="color:white!important;padding:8px;"> <i class="fa fa-heart"> &nbsp;Add to Wishlist</i> </a>
                                                @else
                                                    <button type="button" class=" add_to_wishlist_btn btn btn-danger btn-sm btn-block" style="color:white!important;padding:8px;"> <i class="fa fa-heart"> &nbsp;Add to Wishlist</i> </button>

                                                @endguest
                                            </div>
                                        </div>
                                    </div>
                                    </a>
                                @empty
                                    <h4 class="mx-auto">Featured Product Data Not Available</h4>
                                @endforelse

                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
                            <div class="row align-items-center">
                                {{-- Popular product--}}

                                @forelse($get_popular_products as $popular_product)
                                    <a href="{{route('product.detail',['slug'=>$popular_product->slug] ? : '')}}">
                                    <div class="col-md-3">
                                        <div class="productWrap">
                                            <figure>
                                                <img
                                                    src="
                                                      {{$popular_product->productImage('product_main_image') ?:
                        ($popular_product->productVariation->first() && $popular_product->productVariation->first()->productVariationImage()->first()
                            ? $popular_product->productVariation->first()->productVariationImage()->first()->getUrl()
                            : asset('upload/No-Image.png'))
                                }}
                                                        "
                                                    class="img-fluid" alt="">
                                            </figure>
                                            <div class="productContent">
                                                <ul class="topIcon">
                                                    <li><span>-11%</span></li>
                                                    <li><span>Featured</span></li>
                                                </ul>
                                                <h3>{{ $popular_product->product_name ? : '' }}</h3>
                                                <p>{!! \Illuminate\Support\Str::limit(strip_tags($popular_product->description), 70, '...') !!}</p>
                                                <ul>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                    <li><i class="fas fa-star"></i></li>
                                                </ul>

                                                @if($popular_product->product_price == null)
                                                    @if ($popular_product->productVariation->first())
                                                        <a href="{{route('product.detail',['slug'=>$popular_product->slug] ? : '')}}">
                                                            <del>
                                                                $ {{ $popular_product->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                                            $ {{ $popular_product->productVariation->first()->variant_price ? : '' }}
                                                        </a>
                                                    @endif
                                                @else
                                                    <a href="{{route('product.detail',['slug'=>$popular_product->slug] ? : '')}}">
                                                        @if($popular_product->product_discount == null)
                                                            $ {{ $popular_product->product_price ? : '' }}
                                                        @else
                                                            <del>$ {{ $popular_product->product_price ? : '' }}</del>
                                                            $ {{ $popular_product->product_discount ? : '' }}

                                                        @endif

                                                    </a>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                    </a>
                                @empty
                                    <h4 class="mx-auto">Popular Product Data Not Available</h4>
                                @endforelse


                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                             aria-labelledby="pills-contact-tab">
                            <div class="row align-items-center">
                                {{-- Category--}}
                                @forelse($get_categories as $category)
                                    <div class="col-md-3">
                                        <a href="{{route('category.wise.product',['slug'=>$category->slug])}}">
                                        <div class="productWrap">
                                            <figure>
                                                <img src="{{ $category->categoryImage('category_image') ? : '' }}"
                                                     class="img-fluid" alt="">
                                            </figure>
                                            <div class="productContent">
                                                <ul class="topIcon">
                                                    <li><span>-11%</span></li>
                                                    <li><span>Featured</span></li>
                                                </ul>
                                                <h3>{{ $category->category_name ? : '' }}</h3>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                @empty
                                    <h4 class="mx-auto">Category Data Not Available</h4>
                                @endforelse

                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-brand" role="tabpanel" aria-labelledby="pills-brand-tab">
                            <div class="row align-items-center">

                                {{-- Brand--}}
                                @forelse($get_brands as $brand)
                                    <div class="col-md-3">
                                        <a href="{{route('brand.wise.product',['slug'=>$brand->slug])}}">

                                        <div class="productWrap">
                                            <figure>
                                                <img src="{{ $brand->brandImage('brand_image') ? : '' }}"
                                                     class="img-fluid" alt="">
                                            </figure>
                                            <div class="productContent">
                                                <ul class="topIcon">
                                                    <li><span>-11%</span></li>
                                                    <li><span>Featured</span></li>
                                                </ul>
                                                <h3>{{ $brand->brand_name ? : '' }}</h3>
                                            </div>
                                        </div>
                                        </a>
                                    </div>
                                @empty
                                    <h4 class="mx-auto">Brand Data Not Available</h4>
                                @endforelse


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

@endsection