@extends('layouts.app')

@section('content')

<!-- banner section -->
<div class="xs-banner">
  <div class="xs-banner-slider owl-carousel">


   @if(!empty($sliders))
   @foreach($sliders as $slider)
   <div class="xs-banner-item" style="background-image:url({!! env('IMAGE_URL').$slider->getFirstMediaUrl('image') !!})">
    <div class="container">
      <div class="row">
        <div class="col-md-3 xs-banner-image animInLeft">
          <div class="d-none d-sm-none d-md-block">
            <img src="{!! env('IMAGE_URL').$slider->getFirstMediaUrl('image', 'thumb') !!}" alt="">
          </div>
        </div>
        <div class="col-md-6 xs-banner-content">
          <h2 class="xs-banner-sub-title animInTop">{{$slider->text}}</h2>
         {{--  <h3 class="xs-banner-title animInBottom">SHOP WISE WITH PRICE COMPARISONS</h3>
          <div class="xs-btn-wraper">
            <a href="#" class="btn btn-outline-primary animInLeft">VIEW COLLECTION</a>
            <a href="#" class="btn btn-primary animInRight">CATEGORIES</a>
          </div> --}}
        </div>
        <div class="col-md-3 xs-banner-image animInLeft">
          <div class="d-none d-sm-none d-md-block">
            <img src="{!! env('IMAGE_URL').$slider->getFirstMediaUrl('image', 'thumb') !!}" alt="">
          </div>
        </div>
      </div><!-- .row END -->
    </div><!-- .container END -->
  </div>

  @endforeach
  @endif

</div>
</div><!-- End banner section -->

<div class="xs-section-padding xs-feauture-product-section">
  <div class="container container-fullwidth">
   <div class="xs-heading">
    <h3 class="xs-heading-title">Markets</h3>
  </div>

  <div class="row markets">
  </div><!-- .row END -->
</div><!-- .container END -->
</div>

<!-- feature product section -->
<div class="xs-section-padding xs-feauture-product-section">
  <div class="container">
    <div class="xs-heading">
      <h3 class="xs-heading-title">Featured Products</h3>
    </div>
    <div class="row">
      <div class="col-lg-12 xs-padding-0">
        <div class="row xs-margin-0 featured_products"></div>
      </div>
    </div><!-- .row END -->
  </div><!-- .container END -->
</div><!-- End feature product section -->

<!-- feature product tab section -->
<div class="xs-section-padding bg-gray">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 col-md-12">
       <div class="xs-content-header">
        <h2 class="xs-content-title">Product (<a href="{{url('/categories')}}">See All</a>)</h2>
        <ul class="nav nav-tabs xs-nav-tab" role="tablist">
         @php $cat = 0;  @endphp
         @foreach($category_products as $category)
         <li class="nav-item">
          <a class="nav-link {{$cat == 0 ? 'active' : ''}}" id="on-sale-tab" data-toggle="tab" href=".cat_{{$category->id}}" role="tab" aria-controls="cat_{{$category->id}}" aria-selected="true">{{$category->name}}</a>
        </li>
        @php $cat++;  @endphp
        @endforeach
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="tab-content">
      @if(!empty($category_products))

      @php $cat_count = 0;  @endphp
      @foreach($category_products as $category)
      <div class="tab-pane fade {{$cat_count == 0 ? 'active show' : ''}} cat_{{$category->id}}" role="tabpanel" aria-labelledby="on-sale-tab">
        <div class="row no-gutters xs-product-main-wrapre">

         @if(!empty($category->products->take(10)))
         @foreach($category->products as $product)
         <div class="col-md-4">
          <div class="xs-product-wraper">

           <form id="wishlistfrom">
            <input type="hidden" name="product_id" value="{{$product->id}}">
            <div class="xs-product-header media">
              <span class="star-rating d-flex"></span>
              <a class="add_to_wishlist media-body cursor">
                <i class="fa fa-heart"></i>
              </a>
            </div><!-- .xs-product-header END -->
          </form>

          <img class="cat_product_image" src="assets/images/image_loader.gif" data-echo="{!! env('IMAGE_URL').$product->getFirstMediaUrl('image') !!}" alt="{{$product->category->name}}">
          <div class="xs-product-content">
            <h4 class="product-title"><a href="{{url('/product/detail/'.$product->id)}}">{{$product->name}}</a></h4>
            <span class="price">

             @if(checkDiscountedPrice($product, true))
             <del>{!! getPriceColumn($product) !!}</del>
             {!! getPriceColumn($product,'discount_price') !!}
             @else
             {!! getPriceColumn($product) !!}
             @endif

           </span>
         </div><!-- .xs-product-content END -->
       </div><!-- .xs-product-wraper END -->
     </div>
     @endforeach
     @endif

   </div>
 </div>

 @php $cat_count ++;  @endphp
 @endforeach
 @endif
</div>
</div>
<div class="col-lg-3"></div>
</div><!-- .row END -->
</div><!-- .container END -->
</div><!-- End feature product tab section -->

<!-- brand list section -->
<div class="xs-brand-section">
  <div class="container">
    <ul class="xs-brand-content clearfix">
      <li><a href="#"><img src="assets/images/image_loader.gif" data-echo="assets/images/sponsors/sponsors_1.png" alt=""></a></li>
      <li><a href="#"><img src="assets/images/image_loader.gif" data-echo="assets/images/sponsors/sponsors_2.png" alt=""></a></li>
      <li><a href="#"><img src="assets/images/image_loader.gif" data-echo="assets/images/sponsors/sponsors_3.png" alt=""></a></li>
      <li><a href="#"><img src="assets/images/image_loader.gif" data-echo="assets/images/sponsors/sponsors_4.png" alt=""></a></li>
      <li><a href="#"><img src="assets/images/image_loader.gif" data-echo="assets/images/sponsors/sponsors_5.png" alt=""></a></li>
    </ul>
  </div><!-- .container END -->
</div><!-- end brand list section -->

<!-- newsLetter section -->
<div class="xs-newsLetter-section newsLetter-bg-image">
  <div class="container">
    <div class="row">
      <div class="col-lg-7">
        <div class="xs-newsletter-content">
          <h3 class="xs-newsletter-sub-title">Get Latest Update</h3>
          <h4 class="xs-newsletter-title">Newsletter Subscribe</h4>
          <p class="lead">& receive $20 coupon for first shopping</p>
          <form action="#" method="POST" class="xs-newsletter round">
            <label for="xs-newsletter-email"></label>    
            <input type="email" name="email" id="xs-newsletter-email" placeholder="Enter your email....">
            <input type="submit" value="submit">
          </form><!-- .xs-newsletter END-->
        </div><!-- .xs-newsletter-content END-->
      </div>
      <div class="col-lg-5">
        <div class="xs-newsletter-content">
          <h3 class="xs-newsletter-sub-title">Read Our News</h3>
          <h4 class="xs-newsletter-title">Follow Us</h4>
          <p class="lead">First to find out about our news and promotions</p>
          <ul class="xs-social-list round">
            <li><a href="#"><i class="icon icon-facebook"></i></a></li>
            <li><a href="#"><i class="icon icon-twitter"></i></a></li>
            <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
            <li><a href="#"><i class="icon icon-pinterest"></i></a></li>
          </ul>
        </div><!-- .xs-newsletter-content END-->
      </div>
    </div><!-- .row END -->
  </div><!-- .container END -->
</div><!-- end newsLetter section -->

@endsection