@extends('layouts.front-layout')

@section('content')

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('front-assets/images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>PRODUCTS</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">
                    @if(!isset($search_data))
                    <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>
                    @endif
                    <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">
                                @if(isset($get_feature_products))
                                @forelse($get_feature_products as $feature_product)
                                    <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                    <div class="col-md-3">
                                        <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->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->price == null)
                                                    @if ($feature_product->productVariation->first())
                                                        <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                            <del>
                                                                $ {{ $feature_product->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                                            $ {{ $feature_product->productVariation->first()->variant_price ? : '' }}
                                                        </a>
                                                    @endif
                                                @else
                                                    <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                        @if($feature_product->product_discount == null)
                                                            $ {{ $feature_product->price ? : '' }}
                                                        @else
                                                            <del>$ {{ $feature_product->price ? : '' }}</del>
                                                            $ {{ $feature_product->product_discount ? : '' }}

                                                        @endif

                                                    </a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    </a>
                                @empty
                                    <h4 class="mx-auto">Featured Product Data Not Available</h4>
                                @endforelse
                                @elseif(isset($search_data))
                                    @forelse($search_data as $feature_product)
                                        <div class="col-md-3">
                                            <div class="productWrap">
                                                <figure>
                                                    <img
                                                        src="{{ $feature_product->productImage('product_main_image') ? : '' }}"
                                                        class="img-fluid" alt="">
                                                </figure>
                                                <div class="productContent">
                                                    <ul class="topIcon">
                                                        <li><span>-11%</span></li>
                                                        <li><span>Product</span></li>
                                                    </ul>
                                                    <h3>{{ $feature_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->price == null)
                                                        @if ($feature_product->productVariation->first())
                                                            <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                                <del>
                                                                    $ {{ $feature_product->productVariation->first()->variant_compare_at_price ? : '' }}</del>
                                                                $ {{ $feature_product->productVariation->first()->variant_price ? : '' }}
                                                            </a>
                                                        @endif
                                                    @else
                                                        <a href="{{route('product.detail',['slug'=>$feature_product->slug] ? : '')}}">
                                                            @if($feature_product->product_discount == null)
                                                                $ {{ $feature_product->price ? : '' }}
                                                            @else
                                                                <del>$ {{ $feature_product->price ? : '' }}</del>
                                                                $ {{ $feature_product->product_discount ? : '' }}

                                                            @endif

                                                        </a>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <h4 class="mx-auto">Search Product Data Not Available</h4>
                                    @endforelse
                                    @endif
                            </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--}}
                                @if(isset($get_popular_products))
                                @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->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->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->price ? : '' }}
                                                        @else
                                                            <del>$ {{ $popular_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
                                @endif
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-contact" role="tabpanel"
                             aria-labelledby="pills-contact-tab">
                            <div class="row align-items-center">
                                {{-- Category--}}
                                @if(isset($get_categories))
                                @forelse($get_categories as $category)
                                    <div class="col-md-3">
                                        <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>
                                    </div>
                                @empty
                                    <h4 class="mx-auto">Category Data Not Available</h4>
                                @endforelse
                               @endif
                            </div>
                        </div>
                        <div class="tab-pane fade" id="pills-brand" role="tabpanel" aria-labelledby="pills-brand-tab">
                            <div class="row align-items-center">

                                {{-- Brand--}}
                                @if(isset($get_brands))
                                @forelse($get_brands as $brand)
                                    <div class="col-md-3">
                                        <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>
                                    </div>
                                @empty
                                    <h4 class="mx-auto">Brand Data Not Available</h4>
                                @endforelse
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection