@extends('frontend.layout.app')
@section('content')
<!--Start breadcrumb area paroller-->
<section class="breadcrumb-area">
    <div class="breadcrumb-area-bg" style="background-image: url({{asset('frontend/images/breadcrumb/breadcrumb-1.jpg')}});"></div>
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="inner-content text-center">
                    <div class="title">
                       <h2>All Products</h2>
                    </div>
                    <div class="breadcrumb-menu">
                        <ul>
                            <li><a href="{{route('front.index')}}">Home</a></li>
                            <li><i class="fa fa-angle-right" aria-hidden="true"></i></li>
                            <li class="active">Products</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End breadcrumb area-->

<!--Start Shop Style1 Area-->
<section class="shop-page-one">
    <div class="shop-page-one_inner">
        <div class="auto-container">
            <div class="shop-style1_content">
                <!--Start Single Shop Item-->
                @foreach ($products as $product)
                <div class="single-shop-item">
                    <div class="single-shop-item_inner">
                        <div class="img-holder">
                            <img src="{{ asset('/storage/product/' . $product->image) }}" alt="">
                        </div>
                        <div class="title-holder">
                            <h3><a href="{{route('front.product-detail',$product->slug)}}">{{$product->name}}</a></h3>
                            <h6>Rs. {{$product->price}}</h6>
                            <p>{{$product->getCategory->name}}</p>
                            <div class="btn-box">
                                <a class="btn-one" href="{{route('front.product-detail',$product->slug)}}">
                                    <div class="round"></div>
                                    <span class="txt">View Details</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Single Shop Item-->
                @endforeach
            </div>
            <div class="row">
                <div class="col-xl-12">
                    <ul class="styled-pagination text-center clearfix">
                        <li class="arrow prev"><a href="#"><span class="icon-right-arrow-1 left"></span></a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li class="arrow next"><a href="#"><span class="icon-right-arrow-1 right"></span></a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</section>
<!--End Shop Style1 Area-->
@endsection