@extends('layouts.app')
@section('title','Home')
@section('content')

    <section id="main-home">
        <section id="hero-bottom">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 offset-lg-2">
                        <div class="bg">
                            <div class="row text-center">
                                <div class="col-sm-4">
                                    {!! Form::open(['method'=>'POST','action' => 'WelcomeController@retail']) !!}
                                    <button type="submit" style="background: none;
                                            color: inherit;
                                            border: none;
                                            padding: 0;
                                            font: inherit;
                                            cursor: pointer;
                                            outline: inherit;" data-toggle="tooltip" data-placement="top"
                                            title="Go to Retail">
                                        <img src="{{url('/')}}/img/retail.png" alt="">
                                        <p class="title">RETAIL</p>
                                        <p class="sub">Show Less Than 10 Items</p>
                                    </button>
                                    {!! Form::close() !!}
                                </div>
                                <div class="col-sm-4 bordered">
                                    {!! Form::open(['method'=>'POST','action' => 'WelcomeController@wholesale']) !!}
                                    <button type="submit" style="background: none;
                                            color: inherit;
                                            border: none;
                                            padding: 0;
                                            font: inherit;
                                            cursor: pointer;
                                            outline: inherit;" data-toggle="tooltip" data-placement="top"
                                            title="Go to Wholesale">
                                        <img src="{{url('/')}}/img/wholesale.png" alt="">
                                        <p class="title">WHOLESALE</p>
                                        <p class="sub">Cost Less In A Bulk</p>
                                    </button>
                                    {!! Form::close() !!}
                                </div>
                                <div class="col-sm-4">
                                    <a class="contact-us" href="{{url('/contact')}}" style="background: none;
                                            color: inherit;
                                            border: none;
                                            padding: 0;
                                            font: inherit;
                                            cursor: pointer;
                                            outline: inherit;" data-toggle="tooltip" data-placement="top"
                                       title="Contact Us">
                                        <img src="{{url('/')}}/img/wholesale.png" alt="">
                                        <img src="{{url('/')}}/img/support.png" alt="">
                                        <p class="title">SUPPORT</p>
                                        <p class="sub">Contact Us 24/7</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section id="our-products">
            <div class="container text-center">
                <h2><span>&bull;</span> OUR PRODUCTS <span>&bull;</span></h2>
                <div class="slider">
                    @foreach($categories as $category)
                        <div class="box">
                            <img class="img-fluid" src="{{$category->photo->file}}" alt="">
                            <p class="lead">{{$category->name}}</p>
                            <a href="{{route('shop-show',$category->id)}}">
                                <button type="button" class="btn btn-success">Browse Product</button>
                            </a>
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
        <section id="best-of-week">
            <div class="container text-center">
                <h2><span>&bull;</span> FEATURED PRODUCTS <span>&bull;</span></h2>
                <div class="row">

                    @foreach($products as $product)
                        <div class="col-md-3">
                            @include('partials.singleProduct')
                        </div>
                    @endforeach

                </div>
            </div>
        </section>
        <section id="why-choose-us">
            <div class="container text-center">
                <h2><span>&bull;</span> WHY CHOOSE US <span>&bull;</span></h2>
                <div class="row body">
                    <div class="offset-md-6 col-md-6 offset-lg-8 col-lg-4">
                        <div class="wrapper">
                            <img class="float-left" src="{{url('/')}}/img/natural.png" alt="">
                            <p>100% NATURAL</p>
                            <p class="small">Foods are not processed and ingredients are all came from natural
                                products.</p>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4 ">
                        <div class="wrapper">
                            <img class="float-left" src="{{url('/')}}/img/fresh.png" alt="">
                            <p>MADE FRESH</p>
                            <p class="small">It's a commitment to provide delicious and fresh foods.</p>
                        </div>
                    </div>

                    <div class="offset-md-6 col-md-6 offset-lg-8 col-lg-4 ">
                        <div class="wrapper">
                            <img class="float-left" src="{{url('/')}}/img/healthy.png" alt="">
                            <p>STAY HEALTHY</p>
                            <p class="small">Maintaining good health doesn't happen by accident. It requires work, smart
                                lifestyle choices and good choice of foods.</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="gutter-bottom"></div>

    </section>

@endsection