@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">

                    @if($device == "desktop")
                        <div class="home-v1-slider">
                            <div id="owl-main" class="owl-carousel owl-inner-nav owl-ui-sm">

                                @foreach($data["sliders"] as $key => $slider)
                                    <div class="item {{$slider["class"]}}"
                                         style="background-image: url({{env("APP_URL")."/".$slider["path"]}});">
                                        <div class="caption fadeIn" style="top:59%">
                                            <div class="pre-title">{{$slider["preTitle"]}}</div>
                                            <div class="title">{!! $slider["title"]  !!}</div>
                                            @if(!empty($slider["subTitle"]))
                                                <div class="sub-title">{{$slider["subTitle"]}}</div>
                                            @endif

                                            @if(!empty($slider["bottomCaption"]))
                                                <div class="bottom-caption">{!! $slider["bottomCaption"] !!}</div>
                                            @endif
                                        </div>
                                        <!-- /.caption -->
                                    </div>

                                @endforeach
                            </div>
                            <!-- /.owl-carousel -->
                        </div>
                        <div class="banners">
                            <div class="row">
                                @foreach($data["banners"] as $banner)
                                    <div class="banner col-sm-4">
                                        <a href="#">
                                            <div class="banner-bg"
                                                 style="background-size: cover; background-position: center center; background-image: url({{env("APP_URL")."/".$banner["path"]}}); height: 255px;">
                                                <div class="caption">
                                                    <h3 class="title">{{$banner["title"]}}</h3>
                                                    <h4 class="subtitle">{{$banner["subTitle"]}}</h4>
                                                    <span class="condition">{!! $banner["condition"] !!}</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                                        @foreach($data["products"] as $category => $row)
                        <div class="products-card">
                            <div class="media">
                                @if($device == "mobile" || $device == "tablet")
                                    <h2 class="section-title"
                                        style="margin-top: 0.69em; font-weight: bold">{{$data["categories"][$category]["name"]}}</h2>
                                @else
                                    @if($toggle == 0)
                                        <div class="media-body">
                                            <img width="810" height="922"
                                                 src="{{env("IMAGE_BASE_URL")."/".$data["categories"][$category]["bannerImage"]}}"
                                                 alt=""/>
                                            <div class="caption">
                                                <h3 class="section-title">{{$data["categories"][$category]["name"]}}</h3>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                                <div class="@if($toggle == 0) media-left @else media-right @endif media-middle">
                                    <div class="products-4">
                                        <div class="woocommerce columns-2">
                                            <ul class="products">
                                                                                                @foreach($row 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
                                                                            style="width: 250px; height: 250px"
                                                                            src="{{env("APP_URL")}}/storage/{{$product["logo"]}}"
                                                                            class="img-responsive"
                                                                            alt=""
                                                                            title=""/></a>
                                                                </div>
                                                                <div class="product-content-wrapper">
                                                                    <a href="{{env('APP_URL')."/meal/".$product["slug"]}}"
                                                                       class="woocommerce-LoopProduct-link">
                                                                        <h3>{{$product["title"]}}</h3>

                                                                        <div itemprop="description"
                                                                             style="display:block">
                                                                            <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_price="Buy Now For Rs. {{$product["amount"]}}"
                                                                           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>
                                </div>
                                @if($device == "desktop")
                                    @if($toggle == 1)
                                        <div class="media-body">
                                            <img width="810" height="922"
                                                 src="{{env("IMAGE_BASE_URL")."/".$data["categories"][$category]["bannerImage"]}}"
                                                 alt=""/>
                                            <div class="caption">
                                                <h3 class="section-title">{{$data["categories"][$category]["name"]}}</h3>
                                            </div>
                                        </div>
                                    @endif
                                @endif
                            </div>
                        </div>
                                            @endforeach
                    <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