@extends('layouts.landingapp')
@section('content')
 <!-- 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">                
                @if($Relatedstores)
                <div class="shop__sidebar">
                    <div class="sidebar__categories">
                        <div class="section-title">
                            <h4>Related Stores</h4>
                        </div>
                        <div class="categories__accordion">
                            <div class="accordion" id="accordionExample">
                                <div class="card">
                                    @foreach($Relatedstores as $item)
                                    <div class="card-heading active">
                                        <a href="{{url('StoreProducts/'.$item->id)}}">{{$item->title}}</a>
                                    </div>
                                    @endforeach                                  
                                </div>                               
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="sidebar__filter">
                        <div class="section-title">
                            <h4>Shop by price</h4>
                        </div>
                        <div class="filter-range-wrap">
                            <div class="price-range ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
                            data-min="33" data-max="99"></div>
                            <div class="range-slider">
                                <div class="price-input">
                                    <p>Price:</p>
                                    <input type="text" id="minamount">
                                    <input type="text" id="maxamount">
                                </div>
                            </div>
                        </div>
                        <a href="#">Filter</a>
                    </div>                 
                </div>
            </div> --}}
            @if($Products->count())
            <div class="col-lg-12 col-md-12 col-12">
               
                <div class="row">
                    @foreach($Products as $Product)
                    <div class="col-lg-3 col-md-6 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)}}';">
                                <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>
            @else 
            <div class="col-lg-12 col-md-12 col-12">               
            <div class="card">
                <div class="card-body">
                 No Items Available!
                </div>
              </div>
            </div>
            @endif
        </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'); 
           
                });
    
    }
    </script>

@endsection