@extends('website.layout.master')



@section('title')



@endsection



@section('content')





        <!-- page-title -->

        <section class="page-title centred"> 

            <div class="pattern-layer" style="background-image:url(website/images/background/page-title.jpg);"></div>

            <div class="auto-container">

                <div class="content-box">

                    <h1>Food</h1>

                    <ul class="bread-crumb clearfix">

                        <li><i class="flaticon-home-1"></i><a href="{{route('home')}}">Home</a></li>

                        <li>Food</li>

                    </ul>

                </div>

            </div>

        </section>

        <!-- page-title end -->



        <!-- shop-page-section -->

        <section class="shop-page-section sidebar-page-container shop-page-2">

            <div class="auto-container">

                <div class="row clearfix">

                    <div class="col-lg-3 col-md-12 col-sm-12 sidebar-side">

                        <div class="sidebar shop-sidebar">

                            <div class="sidebar-widget search-widget">

                                <form action="#" method="post" class="search-form">

                                    <div class="form-group">

                                        <input type="search" name="search-field" placeholder="Search..." required="">

                                        <button type="submit"><i class="flaticon-search"></i></button>

                                    </div>

                                </form>

                            </div>

                            <div class="sidebar-widget categories-widget">

                                <div class="widget-title">

                                    <h3>Shop by Categories</h3>

                                </div>

                                <div class="widget-content">

                                    <ul class="categories-list clearfix">

                                        <li><a href="{{route('food')}}">ALL</a></li>

                                        @foreach($categories as $cat)

                                        <li><a href="{{ url('food_cat',$cat->id) }}">{{ $cat->name }} ({{ $cat->products_count }})</a></li>

                                        @endforeach
                                        

                                    </ul>

                                </div>

                            </div>

                        </div>

                    </div>

                    <div class="col-lg-9 col-md-12 col-sm-12 content-side">

                        <div class="sidebar-content">

                            <div class="item-shorting clearfix">

                                <div class="left-column pull-left clearfix">

                                    <div class="text"><p>Showing 1–12 of 50 Results</p></div>

                                </div>

                                <div class="right-column pull-right clearfix">

                                    <div class="short-box clearfix">

                                        <p>Sort by</p>

                                        <div class="select-box">

                                            <select class="wide">

                                               <option value="1">New Collection</option>

                                               <option value="2">Top Sell</option>

                                               <option value="4">Top Rated</option>

                                            </select>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="our-shop">

                                <div class="row clearfix">
                                    @foreach($allproduct as $pro)

                                    <div class="col-lg-4 col-md-6 col-sm-12 shop-block">

                                        <div class="shop-block-one">

                                            <div class="inner-box">

                                                <figure class="image-box">

                                                    <img src="{{ url('/admin/assets/uploads/'.$pro->image) }}" alt="">

                                                    <ul class="info-list clearfix">

                                                        <li><a href="#"><i class="flaticon-heart"></i></a></li>

                                                        <li><a href="{{route('productdetail',$pro->id)}}">View Details</a></li>

                                                        <li><a href="{{ url('/admin/assets/uploads/'.$pro->image) }}" class="lightbox-image" data-fancybox="gallery"><i class="flaticon-search"></i></a></li>

                                                    </ul>

                                                </figure>

                                                <div class="lower-content">

                                                    <a href="{{url('productdetail',$pro->id)}}">{{ $pro->name }}</a>

                                                    <span class="price"><del>{{ $pro->cut_price }}</del> {{ $pro->price }} PKR</span>

                                                </div>

                                            </div>

                                        </div>

                                    </div>

                                    @endforeach


                                    
                                    

                                </div>

                            </div>







                            <div class="pagination-wrapper centred">

                                <ul class="pagination clearfix">

                                    <li><a href="shop.html">Prev</a></li>

                                    <li><a href="shop.html">1</a></li>

                                    <li><a href="shop.html" class="active">2</a></li>

                                    <li><a href="shop.html">3</a></li>

                                    <li><a href="shop.html">4</a></li>

                                    <li><a href="shop.html">5</a></li>

                                    <li><a href="shop.html">Next</a></li>

                                </ul>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </section>

        <!-- shop-page-section end -->

@endsection