@extends('layouts.landingapp')
  @section('content')
  <style>
  
  .pricefilter {
      font-size: 14px;
    /* color: #0d0d0d; */
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    display: inline-block;
    padding: 5px 16px 5px 24px;
    border: 2px solid #ff0000;
    position: absolute;
    right: 0;
    bottom: -5px;
    border-radius: 2px;
    }
  </style>
  
 <!-- Breadcrumb Begin -->
 <div class="breadcrumb-option">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="breadcrumb__links">
                    <a href="{{ url('/')}}"><i class="fa fa-home"></i> Home</a>
                    <span>Shop</span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Breadcrumb End -->

<!-- Shop Section Begin -->
<section class="shop spad">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3">
                <div class="shop__sidebar">              
                    <div class="sidebar__categories">
                        <div class="section-title">
                            <h4>Store Categories</h4>
                        </div>
                        <div class="categories__accordion">
                            <div class="accordion" id="accordionExample">
                                @foreach($Storecategories as $item)
                                <div class="card">                                   
                                    <div class="card-heading active">
                                        <a href="{{url('ShopeStores/'.$item->id)}}">{{$item->title}}</a>
                                    </div>
                                  
                                    {{-- <div id="collapseOne" class="collapse show" data-parent="#accordionExample">
                                        <div class="card-body">
                                            <ul>
                                                <li><a href="#">Coats</a></li>
                                                <li><a href="#">Jackets</a></li>
                                                <li><a href="#">Dresses</a></li>
                                                <li><a href="#">Shirts</a></li>
                                                <li><a href="#">T-shirts</a></li>
                                                <li><a href="#">Jeans</a></li>
                                            </ul>
                                        </div>
                                    </div> --}}
                                </div>
                                @endforeach
                             
                            </div>
                        </div>
                    </div>

                     {{-- <div class="sidebar__filter">
                        <div class="section-title">
                            <h4>Shop by price</h4>
                        </div>
                        <form id="filter" action="{{url('/Products')}}" method="GET">
                        <div class="filter-range-wrap">
                            <div class="price-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
                            data-min="0" data-max="999"></div>
                            <div class="range-slider">
                                <div class="price-input">
                                    <p>Price:</p>
                                    <input type="text"  id="minamount" value=""  name="minamount">
                                    <input type="text" id="maxamount" value=""  name="maxamount">
                                </div>
                            </div>
                        </div>
                        <a onclick="filterAmount()">Filter</a>
                    </div> --}}
                    
                    <div class="sidebar__sizes">
                        <div class="section-title">
                            <h4>Sort by Price</h4>
                        </div>
                        <form id="filter" action="{{url('/Products')}}" method="GET">
                        <div class="size__list">
                            <label for="price500">
                                100 - 500
                                <input type="checkbox" id="price500" name="price500" @if(!empty($price500)) checked @endif  value="500">
                                <span class="checkmark"></span>
                            </label>
                            <label for="price1500">
                                500 - 1500
                                <input type="checkbox" id="price1500" name="price1500" @if(!empty($price1500)) checked @endif value="1500">
                                <span class="checkmark"></span>
                            </label>
                            <label for="price3000">
                               1500 - 3000
                                <input type="checkbox" id="price3000" name="price3000" @if(!empty($price3000)) checked @endif value="3000">
                                <span class="checkmark"></span>
                            </label>
                            <label for="price6000">
                               3000 - 6000
                                <input type="checkbox" id="price6000" name="price6000" @if(!empty($price6000)) checked @endif value="6000">
                                <span class="checkmark"></span>
                            </label>
                            <label for="price6000">
                            <a class="pricefilter" onclick="filterAmount()">Filter</a></span>
                            </label>
                        </div>
                        </form>
                    </div>
               

                    {{-- <div class="sidebar__color">
                        @foreach(App\ProductPropertyType::get() as $item)
                        <div class="section-title">
                            <h4>{{$item->title}}</h4>
                        </div>
                         @foreach(App\ProductPropertyTypeValue::get() as $value)
                         @if($item->id == $value->product_property_type_id)
                        <div class="size__list color__list">
                            <label for="ValueID{{$value}}">
                                {{$value->title}}
                                <input type="radio" name="ProductPropertyTypeValue" id="ValueID{{$value}}">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                         @endif
                         @endforeach
                        @endforeach
                    </div>  --}}


                </div>
            </div>
            <div class="col-lg-9 col-md-9">
                <div class="row">
                    @foreach($Products as $Product)
                    <div class="col-lg-4 col-md-4 col-6">
                        <div class="product__item">
                            <div class="product__item__pic set-bg" data-setbg="{{url('storage/images/products/'.$Product->image)}}" onclick="window.location.href ='{{url('/shope/'.$Product->id)}}';">
                                {{-- <div class="label new">New</div> --}}
                                <ul class="product__hover">
                                    @if($Product->ProductProperties()->count() != 0)
                                        @foreach($Product->ProductProperties as $item)
                                        <li>{{$item->product_property_type_value->title ?? ''}}</li>
                                        @endforeach
                                    @endif
                                </ul> 
                            </div>
                            <div class="product__item__text">
                                <h6><a href="{{url('/shope/'.$Product->id)}}">{{$Product->title}}</a></h6>                               
                                <div class="product__price">@currency($Product->sales_amount)<span>@currency($Product->mrp)</span></div>
                                
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Shop Section End -->

<!-- Instagram Begin -->
<div class="instagram">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-1.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-2.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-3.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-4.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-5.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-4 col-sm-4 p-0">
                <div class="instagram__item set-bg" data-setbg="{{ asset('ashion/img/instagram/insta-6.jpg') }}">
                    <div class="instagram__text">
                        <i class="fa fa-instagram"></i>
                        <a href="#">@ ashion_shop</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Instagram End -->

<script>
    function add_to_cart(productID){
    
        $.get('/add-to-cart/'+productID, function(data){
    
            document.getElementById("spanCartCount").innerHTML=data;
            $('#cartdiv').load(document.URL + ' #cartdiv'); 
           
                });
    
    }

    function filterAmount(){
        document.getElementById("filter").submit();
        // var minamount = document.getElementById('minamount').value;       
        // var minamount = minamount.replace('₹','');
        // var maxamount = document.getElementById('maxamount').value;
        // var maxamount = maxamount.replace('₹','');

        // $.ajax({
        // url: '{{ url('/productFilter') }}',
        // method: "post",
        // data: {_token: '{{ csrf_token() }}',minamount:minamount,maxamount:maxamount },
        //             success: function (response) {
        //             alert(response);
                   
                    
        //                 }
        //         });        
    }
    </script>
@endsection