@extends('layouts.main')

@section('styles')

@endsection

@section('content')
@include('includes.smallHeader')
<!-- Breadcrumbs -->
<div class="breadcrumbs">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="bread-inner">
          <ul class="bread-list">
            <li><a href="{{ route('main')}}">Home<i class="ti-arrow-right"></i></a></li>
            <li class="active"><a href="#">{{$type}}</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Breadcrumbs -->

<!-- Product Style -->
<section class="product-area shop-sidebar shop section">
  <div class="container">
    <div class="row">

      <div class="col-lg-9 col-md-8 col-12">
        <div class="row">
          <div class="col-12">
            <!-- Shop Top -->
            <div class="shop-top">
              <div class="shop-shorter">
                <h5>Showing Products for: {{$type}}/{{$txt->name}}</h5>
                <!-- <div class="single-shorter">
                  <label>Show :</label>
                  <select>
                    <option selected="selected">09</option>
                    <option>15</option>
                    <option>25</option>
                    <option>30</option>
                  </select>
                </div> -->
                <!-- <div class="single-shorter">
                  <label>Sort By :</label>
                  <select>
                    <option selected="selected">Name</option>
                    <option>Price</option>
                    <option>Size</option>
                  </select>
                </div> -->
              </div>
              <ul class="view-mode">
                <!-- <li class="active"><a href="shop-grid.html"><i class="fa fa-th-large"></i></a></li>
                <li><a href="shop-list.html"><i class="fa fa-th-list"></i></a></li> -->
              </ul>
            </div>
            <!--/ End Shop Top -->
          </div>
        </div>
        <div class="row">

          @foreach($products as $pp)
          <div class="col-lg-4 col-md-6 col-12">
            <div class="single-product">
              <div class="product-img">
                <a href="{{ route('itemDetail' , $pp->id)}}">
                  <img class="default-img" src="{{ asset('storage/products/'.$pp->image1)}}" alt="#">
                  <img class="hover-img" src="{{ asset('storage/products/'.$pp->image1)}}" alt="#">
                  @if($pp->sale != 0)  <span class="new">SALE {{$pp->sale}} %</span> @endif
                </a>
                <div class="button-head">
                  <div class="product-action">
                    <a  title="Quick View" href="{{ route('itemDetail' , $pp->id)}}"><i class=" ti-eye"></i><span>Quick Shop</span></a>
                  </div>
                  <div class="product-action-2">
                    <a title="Add to cart" href="#">Add to cart</a>
                  </div>
                </div>
              </div>
              <div class="product-content">
                <h3><a href="{{ route('itemDetail' , $pp->id)}}">{{$pp->name}}</a></h3>
                <p>{{$pp->brand->name}}</p>
                <p>{{$pp->menu->name}}</p>
                <div class="product-price">
                <span>@if($pp->sale != 0) <s> {{$pp->actual_price}} PKR</s>  @endif {{$pp->price}} PKR</span>
                </div>
              </div>
            </div>
          </div>
          @endforeach

        </div>
      </div>


      <div class="col-lg-3 col-md-4 col-12">

        <div class="shop-sidebar">
            <!-- Single Widget -->


          <!-- <div data-role="main" class="ui-content"> -->
          <form method="get" action="{{ route('itemList')}}">
          <input type="hidden" value="{{$type}}" name="type">
          <input type="hidden" value="{{$type_id}}" name="id">
          <div class="row">
            <div class="col-md-12">
          <label for="price-min">Min:</label>
          <input type="text" disabled id="showmin" value="0" style="border:0px;">
          <input type="range" name="min" id="price-min" onchange="setmin()" value="0" min="0" max="10000" class="form-control">

        </div>
        <div class="col-md-12">
          <label for="price-max">Min:</label>
          <input type="text" disabled id="showmax" value="5000" style="border:0px;">
          <input type="range" name="max" id="price-max" onchange="setmax()"  value="5000" min="0" max="10000"  class="form-control">

          </div>
        </div>

          <input type="submit"  value="Submit" class="btn" style="background:green;color:white">
          {{ csrf_field()}}
          </form>
          <!-- </div> -->

            <div class="single-widget category">
              <h3 class="title">Categories</h3>
              <ul class="categor-list">
                @foreach($submenus as $smmn)
                <li><a href="{{ route('itemLists',['menu',$smmn->id])}}">{{$smmn->name}}</a></li>
                @endforeach
              </ul>
            </div>
            <!--/ End Single Widget -->
            <!-- Shop By Price -->

              <!--/ End Shop By Price -->
            <!-- Single Widget -->

            <!--/ End Single Widget -->
            <!-- Single Widget -->
            <div class="single-widget category">
              <h3 class="title">Brands</h3>
              <ul class="categor-list">
                @foreach($brands as $bbc)
                <li><a href="{{ route('itemLists',['brand',$bbc->id])}}">{{$bbc->name}}</a></li>
                @endforeach
              </ul>
            </div>
            <!--/ End Single Widget -->
        </div>
      </div>
    </div>
  </div>
</section>
<!--/ End Product Style 1  -->

<!-- Start Shop Newsletter  -->
<!--  -->
<!-- End Shop Newsletter -->



@endsection

@section('scripts')
<script>
function setmin()
{
  var m = $("#price-min").val();
  $("#showmin").val(m);
}

</script>
<script>
function setmax()
{
  var m = $("#price-max").val();
  $("#showmax").val(m);
}

</script>

@endsection
