@extends('site.shop.layouts.main')

@section('content')
    <div id="content" class="site-content" tabindex="-1">
        <div class="col-full">
            <div id="primary" class="content-area">
                <main id="main" class="site-main">
                    <div class="columns-3">
                            <ul class="products">
                                                                @foreach($data["products"] as $productId => $product)

                                    <li class="product">
                                        <div class="product-outer">
                                            <div class="product-inner">
                                                <div class="product-image-wrapper">
                                                    <a href="{{env('APP_URL')."/meal/".$product["slug"]}}"
                                                       class="woocommerce-LoopProduct-link"><img
                                                                                                 src="{{env("APP_URL")}}/storage/{{$product["logo"]}}"
                                                                                                 class="img-responsive"
                                                                                                 style="width: 250px; height: 250px"
                                                                                                 alt=""
                                                                                                 title="{{$product["title"]}}"/></a>
                                                </div>
                                                <div class="product-content-wrapper">
                                                    <a href="single-product-v3.html"
                                                       class="woocommerce-LoopProduct-link">
                                                        <h3>{{$product["title"]}}</h3>

                                                        <div itemprop="description">
                                                            <p>{{$product["description"]}}</p>
                                                        </div>
                                                    </a>
                                                    <div class="yith_wapo_groups_container">
                                                        <a style="display:block; margin: 0px 20px 0px 20px"
                                                           data-quantity="1" data-product_id="{{$productId}}"
                                                           data-product_sku=""
                                                           class="button addToCart bg-success">Buy Now for Rs. {{$product["amount"]}}</a>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- /.product-inner -->
                                        </div>
                                        <!-- /.product-outer -->
                                    </li>


                                @endforeach
                            </ul>
                    </div>




                    <div class="banner center">
                        <a href="#">
                            <div class="banner-bg"
                                 style="background-size: cover; background-position: center center; background-image: url( {{asset("shop-assets/images/homepage-banners/30.jpg")}}); height: 231px;">
                                <div class="caption">
                                    <h3 class="title">FREE DELIVERY IN YOUR CITY</h3>
                                    <h4 class="subtitle">ON ORDERS FOR OVER 68$</h4>
                                </div>
                            </div>
                        </a>
                    </div>
                </main>
                <!-- #main -->
            </div>
            <!-- #primary -->
        </div>
        <!-- .col-full -->
    </div>

@endsection