@extends('layouts.app')

@section('content')


<section class="xs-pt-50 xs-section-padding-bottom">
  <div class="container">
    <ul class="nav nav-tabs xs-nav-tab-v3" id="myTab" role="tablist">
     @php $cat = 0;  @endphp
     @foreach($categories as $category)
     <li class="nav-item">

      @php 

      if(!empty($category_detail->id)) {
        $selected = $category->id == $category_detail->id ?  'active show' : '';
      } else {
        $selected = $cat == 0 ? 'active show' : '';
      }

      @endphp

      <a class="nav-link {{$selected}}"  data-toggle="tab" href="#category-{{$category->id}}" role="tab" aria-controls="cat-{{$category->name}}" aria-selected="true">
       <img class="category-wraper" src="{!! env('IMAGE_URL').$category->getFirstMediaUrl('image', 'thumb') !!}"> {{@$category->name}} <small>{{count($category->products)}} Items Available</small></a>
     </li>
     @php $cat++;  @endphp
     @endforeach
   </ul>
   <div class="tab-content" id="myTabContent">
     @php $cat_count = 0;  @endphp
     @foreach($categories as $category)

      @php 
      if(!empty($category_detail->id)) {
        $category->id == $category_detail->id ?  'active show' : '';
      } else {
        $selected = $cat_count == 0 ? 'active show' : '';
      }
      @endphp

     <div class="tab-pane fade {{$selected}}" id="category-{{$category->id}}" role="tabpanel" aria-labelledby="{{$category->name}}-tab">
      <div class="row no-gutters product-category-version-2">
        @if(!empty($category->products))
        @foreach($category->products as $product)
        <div class="col-md-4 col-lg-2">
          <div class="xs-product-category">
            <img class="cat_product_image" src="{!! env('IMAGE_URL').$product->getFirstMediaUrl('image') !!}" alt="{{@$product->market->name}}">
            <h4 class="product-title"><a href="{{url('/product/detail/'.$product->id)}}">{{@$product->name}}</a></h4>
            <span class="price version-3">
             @if(checkDiscountedPrice($product, true))
             <del>{!! getPriceColumn($product) !!}</del>
             {!! getPriceColumn($product,'discount_price') !!}
             @else
             {!! getPriceColumn($product) !!}
             @endif
           </span>
         </div><!-- .xs-product-category END -->
       </div>
       @endforeach
       @endif
     </div>
   </div>
   @php $cat_count ++;  @endphp
   @endforeach
 </div>
</div>
</section>


@endsection