@extends('layouts.app2')

@section('content')
    <div class="ms-hero ms-hero-img-wall ms-bg-fixed pb-4">
        <div id="carousel-shop" class="ms-carousel-shop carousel carousel-fade slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-shop" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-shop" data-slide-to="1"></li>
                <li data-target="#carousel-shop" data-slide-to="2"></li>
            </ol>
            <div class="container ">
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <div class="row">
                            <div class="col-md-6 col-md-push-6">
                                <div class="carousel-caption">
                                    <h1>Macbook Pro 2016</h1>
                                    <p class="lead">Commodi consectetur quam asperiores ut iure non illum eaque officia
                                        molestias optio beatae iste.</p>
                                    <ul class="list-unstyled">
                                        <li>Touch Bar with integrated Touch ID sensor.</li>
                                        <li>Retina display: 2880-by-1800 native resolution.</li>
                                        <li>2.6GHz quad-core Intel Core i7, Turbo Boost up to 3.5GHz.</li>
                                        <li>16GB of 2133MHz LPDDR3 onboard memory.</li>
                                    </ul>
                                    <a href="javascript:void(0)" class="btn btn-success btn-raised">More info</a>
                                    <a href="javascript:void(0)" class="btn btn-primary btn-raised">Buy Now</a>
                                </div>
                            </div>
                            <div class="col-md-6 col-md-pull-6">
                                <img src="assets/img/demo/macbook2016.png" class="img-responsive" alt="..."></div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="carousel-caption">
                                    <h1>Apple Watch Serie 2</h1>
                                    <p class="lead">Commodi consectetur quam asperiores ut iure non illum eaque officia
                                        molestias optio beatae iste.</p>
                                    <ul class="list-unstyled">
                                        <li>Touch Bar with integrated Touch ID sensor.</li>
                                        <li>Retina display: 2880-by-1800 native resolution.</li>
                                        <li>2.6GHz quad-core Intel Core i7, Turbo Boost up to 3.5GHz.</li>
                                        <li>16GB of 2133MHz LPDDR3 onboard memory.</li>
                                    </ul>
                                    <a href="javascript:void(0)" class="btn btn-success btn-raised">More info</a>
                                    <a href="javascript:void(0)" class="btn btn-primary btn-raised">Buy Now</a>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <img src="assets/img/demo/watch.png" class="img-responsive" alt="..."></div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-md-6 col-md-push-6">
                                <div class="carousel-caption">
                                    <h1>Microsoft Surface Book</h1>
                                    <p class="lead">Commodi consectetur quam asperiores ut iure non illum eaque officia
                                        molestias optio beatae iste.</p>
                                    <ul class="list-unstyled">
                                        <li>Touch Bar with integrated Touch ID sensor.</li>
                                        <li>Retina display: 2880-by-1800 native resolution.</li>
                                        <li>2.6GHz quad-core Intel Core i7, Turbo Boost up to 3.5GHz.</li>
                                        <li>16GB of 2133MHz LPDDR3 onboard memory.</li>
                                    </ul>
                                    <a href="javascript:void(0)" class="btn btn-success btn-raised">More info</a>
                                    <a href="javascript:void(0)" class="btn btn-primary btn-raised">Buy Now</a>
                                </div>
                            </div>
                            <div class="col-md-6 col-md-pull-6">
                                <img src="assets/img/demo/book.png" class="img-responsive" alt="..."></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Controls -->
            <a href="#carousel-shop"
               class="btn-circle btn-circle-sm btn-circle-raised btn-circle-primary left carousel-control" role="button"
               data-slide="prev">
                <i class="zmdi zmdi-chevron-left"></i>
            </a>
            <a href="#carousel-shop"
               class="btn-circle btn-circle-sm btn-circle-raised btn-circle-primary right carousel-control"
               role="button" data-slide="next">
                <i class="zmdi zmdi-chevron-right"></i>
            </a>
        </div>
    </div>
    <div class="wrap ms-hero-img-beach ms-hero-bg-primary ms-bg-fixed">
        <div class="container index-1">
            <div class="text-center color-white mb-4">
                <h1>Welcome to our Food Ordering center</h1>
                <p class="lead">Please, always note.
                    <br>Place orders on days you will be available for the collection. to reduce cost of warehousing</p>
            </div>
            <div class="row color-dark">
                <?php  $n = 1; ?>
                @include('includes.flash')

                @foreach($products as $product)
                    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-6 mix laptop apple" data-price="{{$product->sales_price}}"
                         data-date="20160901">
                        <div class="card wow zoomInUp">
                            <div class="card-block text-center">
                                <a href="product/id" class="">
                                    <div class="product"
                                         style=" background: url('{{asset("assets/img/productThumbImage/".$product->image)}}');
                                                 background-size:cover;
                                                 background-repeat: no-repeat;
                                                 ">
                                        <img src="{{asset('assets/img/productThumbImage/invisible.png')}}"
                                             data-reference="{{$product->product_id}}" alt="{{$product->name}}"
                                             title="{{$product->name}}"
                                             class="img-responsive center-block">
                                    </div>

                                </a>
                                <h4 class="text-normal text-capitalize text-center">{{$product->name}}</h4>
                                <p>Description.</p>
                                <div class="mt-2">
                                <span class="mr-2">
                                  <i class="zmdi zmdi-star color-primary"></i>
                                  <i class="zmdi zmdi-star color-primary"></i>
                                  <i class="zmdi zmdi-star color-primary"></i>
                                  <i class="zmdi zmdi-star color-primary"></i>
                                  <i class="zmdi zmdi-star"></i>

                                </span>
                                    <span class="ms-tag ms-tag-success">&#x20a6;{{$product->sales_price}}</span>
                                </div>
                                <form method="post" action="javascript:void(0);">
                                    <div class="form-group">
                                        <div class="col-ms-6 col-sm-6 col-xs-6">
                                            <label for="quantity"> Qty</label>
                                        </div>
                                        <div class="col-ms-6 col-sm-6 col-xs-6">
                                            <input type="number" name="quantity" value="1" id="quantity<?php if (isset($n) && $n !== ''){echo $n;} ?>" class="form-control"/>
                                        </div>

                                        <button href="javascript:void(0)"
                                                class="btn btn-primary btn-sm btn-block btn-raised  no-mb addcart" data-added="{{$product->id}}"
                                                data-price="{{$product->sales_price}}" data-name="{{$product->name}}"
                                                data-qty="quantity<?php if (isset($n) && $n !== ''){echo $n;} ?>"
                                                data-image="{{$product->image}}" id="addcart">
                                            <i class="zmdi zmdi-shopping-cart-plus"></i>
                                            Add to Cart
                                        </button>
                                    </div>

                                </form>

                            </div>
                        </div>
                    </div>
                    <?php $n++; ?>

                    {{--@if ($n % 3 == 0)--}}
                        {{--<div class="clearfix"></div>--}}
                    {{--@endif--}}
                @endforeach
                {{--<div class="col-lg-4 col-md-6 col-xs-12 mix tablet apple" data-price="999.99" data-date="20160705">--}}
                {{--<div class="card wow zoomInUp">--}}
                {{--<div class="card-block text-center">--}}
                {{--<a href="ecommerce-item.html">--}}
                {{--<img src="assets/img/demo/products/ipad.png" alt="" class="img-responsive center-block">--}}
                {{--</a>--}}
                {{--<h4 class="text-normal text-center">iPad Pro</h4>--}}
                {{--<p>Quibusdam aperiam tempora ut blanditiis cumque ab pariatur.</p>--}}
                {{--<div class="mt-2">--}}
                {{--<span class="mr-2">--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--</span>--}}
                {{--<span class="ms-tag ms-tag-success">$ 999.99</span>--}}
                {{--</div>--}}
                {{--<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-block btn-raised mt-2 no-mb">--}}
                {{--<i class="zmdi zmdi-shopping-cart-plus"></i> Add to Cart</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--<div class="col-lg-4 col-md-6 col-xs-12 mix accessory samsung" data-price="459.89" data-date="20160815">--}}
                {{--<div class="card wow zoomInUp">--}}
                {{--<div class="card-block text-center">--}}
                {{--<a href="ecommerce-item.html">--}}
                {{--<img src="assets/img/demo/products/gear.png" alt="" class="img-responsive center-block">--}}
                {{--</a>--}}
                {{--<h4 class="text-normal text-center">Galaxy Gear S3</h4>--}}
                {{--<p>Quibusdam aperiam tempora ut blanditiis cumque ab pariatur.</p>--}}
                {{--<div class="mt-2">--}}
                {{--<span class="mr-2">--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--</span>--}}
                {{--<span class="ms-tag ms-tag-success">$ 459.89</span>--}}
                {{--</div>--}}
                {{--<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-block btn-raised mt-2 no-mb">--}}
                {{--<i class="zmdi zmdi-shopping-cart-plus"></i> Add to Cart</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--<div class="col-lg-4 col-md-6 col-xs-12 mix accessory apple" data-price="769.99" data-date="20151014">--}}
                {{--<div class="card wow zoomInUp">--}}
                {{--<div class="card-block text-center">--}}
                {{--<a href="ecommerce-item.html">--}}
                {{--<img src="assets/img/demo/products/appleWatch.png" alt=""--}}
                {{--class="img-responsive center-block">--}}
                {{--</a>--}}
                {{--<h4 class="text-normal text-center">Apple Watch Serie 2</h4>--}}
                {{--<p>Quibusdam aperiam tempora ut blanditiis cumque ab pariatur.</p>--}}
                {{--<div class="mt-2">--}}
                {{--<span class="mr-2">--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--</span>--}}
                {{--<span class="ms-tag ms-tag-success">$ 769.99</span>--}}
                {{--</div>--}}
                {{--<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-block btn-raised mt-2 no-mb">--}}
                {{--<i class="zmdi zmdi-shopping-cart-plus"></i> Add to Cart</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--<div class="col-lg-4 col-md-6 col-xs-12 mix smartphone samsung" data-price="569.99"--}}
                {{--data-date="20151201">--}}
                {{--<div class="card wow zoomInUp">--}}
                {{--<div class="card-block text-center">--}}
                {{--<a href="ecommerce-item.html">--}}
                {{--<img src="assets/img/demo/products/s7.png" alt="" class="img-responsive center-block">--}}
                {{--</a>--}}
                {{--<h4 class="text-normal text-center">Samsung Galaxy S7</h4>--}}
                {{--<p>Quibusdam aperiam tempora ut blanditiis cumque ab pariatur.</p>--}}
                {{--<div class="mt-2">--}}
                {{--<span class="mr-2">--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--</span>--}}
                {{--<span class="ms-tag ms-tag-success">$ 569.99</span>--}}
                {{--</div>--}}
                {{--<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-block btn-raised mt-2 no-mb">--}}
                {{--<i class="zmdi zmdi-shopping-cart-plus"></i> Add to Cart</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--<div class="col-lg-4 col-md-6 col-xs-12 mix laptop microsoft" data-price="2499.25" data-date="20161205">--}}
                {{--<div class="card wow zoomInUp">--}}
                {{--<div class="card-block text-center">--}}
                {{--<a href="ecommerce-item.html">--}}
                {{--<img src="assets/img/demo/products/surfaceBook.png" alt=""--}}
                {{--class="img-responsive center-block">--}}
                {{--</a>--}}
                {{--<h4 class="text-normal text-center">Microsoft Surface Book</h4>--}}
                {{--<p>Quibusdam aperiam tempora ut blanditiis cumque ab pariatur.</p>--}}
                {{--<div class="mt-2">--}}
                {{--<span class="mr-2">--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star color-warning"></i>--}}
                {{--<i class="zmdi zmdi-star"></i>--}}
                {{--</span>--}}
                {{--<span class="ms-tag ms-tag-success">$ 2499.25</span>--}}
                {{--</div>--}}
                {{--<a href="javascript:void(0)" class="btn btn-primary btn-sm btn-block btn-raised mt-2 no-mb">--}}
                {{--<i class="zmdi zmdi-shopping-cart-plus"></i> Add to Cart</a>--}}
                {{--</div>--}}
                {{--</div>--}}
                {{--</div>--}}
            </div>
        </div>
        <!-- conrainer -->
    </div>
@endsection