@extends('layouts.main')

@section('styles')
@endsection

@section('content')
@include('includes.header')
<!-- Slider Area -->
<section class="hero-slider">
  <!-- Single Slider -->
  <div class="single-slider" style="background-image:url({{ asset('storage/mainheader/'.$main->pic)}})">
    <div class="container">
      <div class="row no-gutters">
        <div class="col-lg-9 offset-lg-3 col-12">
          <div class="text-inner">
            <div class="row">
              <div class="col-lg-7 col-12">
                <div class="hero-text">
                 
                  <div class="button">
                    <!-- <a href="#" class="btn">Shop Now!</a> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--/ End Single Slider -->
</section>
<!--/ End Slider Area -->

<!-- Start Small Banner  -->
<!--  -->
<!-- End Small Banner -->

<!-- Start Product Area -->
  <div class="product-area section" id="myproducts">
          <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="section-title">
            <h2>Products</h2>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          <div class="product-info">
            <div class="nav-main">
              <!-- Tab Nav -->
              <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item"><a class="nav-link active " data-toggle="tab" href="#tabmenu_all" role="tab">All</a></li>
                @foreach($menus as $smallmenu)
                <li class="nav-item"><a class="nav-link " data-toggle="tab" href="#tabmenu_{{$smallmenu->id}}" role="tab">{{$smallmenu->name}}</a></li>
                @endforeach

              </ul>
              <!--/ End Tab Nav -->
            </div>
            <div class="tab-content" id="myTabContent">
              <!-- Start Single Tab -->
              <div class="tab-pane fade show  active " id="tabmenu_all" role="tabpanel">
                <div class="tab-single">
                  <div class="row">

                    @foreach($products as $prosmal)
                    <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                      <div class="single-product">
                        <div class="product-img" style="height: 200px;">
                          <a href="{{ route('itemDetail' , $prosmal->id)}}">
                            <img class="default-img" src="{{ asset('storage/products/'.$prosmal->image1)}}" alt="#" style="height: 200px;">
                            <img class="hover-img" src="{{ asset('storage/products/'.$prosmal->image1)}}" alt="#" style="height: 200px;">
                          @if($prosmal->sale != 0)  <span class="new">SALE {{$prosmal->sale}} %</span> @endif
                          </a>
                          <div class="button-head">
                            <div class="product-action">
                              <a   title="Quick View" href="{{ route('itemDetail' , $prosmal->id)}}"><i class=" ti-eye"></i><span>Quick Shop</span></a>

                            </div>
                            <div class="product-action-2">
                              <a title="Add to cart" href="#">Book</a>
                            </div>
                          </div>
                        </div>
                        <div class="product-content">
                          <h3><a href="{{ route('itemDetail' , $prosmal->id)}}">{{$prosmal->name}}</a></h3>
                          <p>{{$prosmal->brand->name}}</p>
                          <p>{{$prosmal->menu->name}}</p>
                          <div class="product-price">
                            <span>@if($prosmal->sale != 0) <s> {{$prosmal->actual_price}} PKR</s>  @endif {{$prosmal->price}} PKR</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endforeach






                  </div>
                </div>
              </div>
              @foreach($menus as $smallmenu)
              <div class="tab-pane fade show" id="tabmenu_{{$smallmenu->id}}" role="tabpanel">
                <div class="tab-single">
                  <div class="row">

                    @foreach($smallmenu->products as $prosmal)
                    <div class="col-xl-3 col-lg-4 col-md-4 col-12">
                      <div class="single-product">
                        <div class="product-img">
                          <a href="{{ route('itemDetail' , $prosmal->id)}}">
                            <img class="default-img" src="{{ asset('storage/products/'.$prosmal->image1)}}" alt="#">
                            <img class="hover-img" src="{{ asset('storage/products/'.$prosmal->image1)}}" alt="#">
                          @if($prosmal->sale != 0)  <span class="new">SALE {{$prosmal->sale}} %</span> @endif
                          </a>
                          <div class="button-head">
                            <div class="product-action">
                              <a   title="Quick View" href="{{ route('itemDetail' , $prosmal->id)}}"><i class=" ti-eye"></i><span>Quick Shop</span></a>

                            </div>
                            <div class="product-action-2">
                              <a title="Add to cart" href="#">Book</a>
                            </div>
                          </div>
                        </div>
                        <div class="product-content">
                          <h3><a href="{{ route('itemDetail' , $prosmal->id)}}">{{$prosmal->name}}</a></h3>
                          <p>{{$prosmal->brand->name}}</p>
                          <p>{{$prosmal->menu->name}}</p>
                          <div class="product-price">
                            <span>@if($prosmal->sale != 0) <s> {{$prosmal->actual_price}} PKR</s>  @endif {{$prosmal->price}} PKR</span>
                          </div>
                        </div>
                      </div>
                    </div>
                    @endforeach






                  </div>
                </div>
              </div>
              @endforeach
              <!--/ End Single Tab -->





            </div>
          </div>
        </div>
      </div>
          </div>
  </div>
<!-- End Product Area -->



<!-- End Most Popular Area -->

<!-- End Shop Home List  -->




@endsection

@section('scripts')
@endsection
