@extends('layouts.welcomelayouts.app')
@section('title')
<title> {{$appSetting->h1}} | {{$appSetting->slogan}}</title>
@endsection
@section('SEO')
<meta name="description" content="{!!$appSetting->meta_description!!}">
<meta name="keywords" content="{{$appSetting->meta_keyword}}">
<meta property="og:title" content="{{$appSetting->h1}} {{$appSetting->slogan}}">
<meta property="og:description" content="{!!$appSetting->meta_description!!}">
<meta property="og:image" content="{asset($appSetting->logo())}}">
<meta property="og:url" content="{{route('welcome.welcome')}}">
@endsection
@push('css')
<style type="text/css">
    .ajax-load{
            background: #e1e1e1;
            padding: 10px 0px;
            width: 100%;
    }
    .hidedestopslider{
        display: none;
    }
    .hidedestopdeal{
        display: none;
    }
    .hidedestopbrand{
        display: none;
    }
    
    .owl-carousel .owl-nav button.owl-prev {
        position: absolute;
        left: 0;
        bottom: 50%;
        background:#dfdfdf;
        padding:10px!important;
    }
    
    .owl-carousel .owl-nav button.owl-next {
        position: absolute;
        right: 0;
        bottom: 50%;
        background:#dfdfdf;
        padding:10px!important;
    }
    button:focus {
    outline: 1px dotted;
    outline: 0px auto -webkit-focus-ring-color;
        }
    .catagorymenusitem {
    max-height: 552px;
    overflow: hidden;
    }
    .morectegoryshow {
    padding: 10px;
    text-align: center;
    background: gray;
    color: white;
    font-weight: bold;
    bottom: 0;
    position: absolute;
    width: 100%;
    }
    .morectegoryshow:hover {
    background: #c3c3c3;
    cursor: pointer;
    }

    .owl-theme .owl-nav.disabled+.owl-dots {
    display: none;
    }
    .owl-carousel .owl-nav.disabled {
    margin: 0;
    }
    
    .mobile-products-div{
        display:none;
        background: white;
        margin: 25px 0;
        padding: 10px;
    }
    @media only screen and (max-width: 769px) {
        .mobile-products-div{
        display:block;
        }
      .hidemobileslider{
            display: none;
        }
      .hidedestopslider{
        display: block;
        }
        .hidedestopdeal{
        display: block;
        }
        .hidemobiledeal{
            display: none;
        }
        .hidedestopbrand{
        display: block;
        }
        .hidemobilebrand{
            display: none;
        }
        .hidemobilesidebar{
            display: none;
        }
    }
    
</style>
@endpush
@section('contents')

	<div style="background: #f3f3f3;margin-bottom:5px;">
        <div class="row" style="margin: 0;">
            <div class="col-2 col-lg-2 hidemobilesidebar" style="padding: 0;">
                @include('layouts/welcomelayouts/sidemenubar')
            </div>
            <div class="col-12 col-lg-10" style="padding: 0;">
                @include('layouts/welcomelayouts/slider')
            </div>
        </div>
    </div>
    <div class="adsblock">
        <center> <a href="#" target="_blank" style="color: #ffffff;font-weight: bold;text-decoration: none;background: none;border: 0;outline: none;"><img src="{{asset('https://nit.hostrb.com/tanbinas/public/img/1580965883.5e3b9ffb730db.png')}}" style="width: 100%;"></a></center>
    </div>

    <div class="feturedproductdiv" >
        <div class="row" style="margin: 0;">
            <div class="col-6">
                <p style="font-weight: bold;margin: 0;padding: 8px 0;">HOT DEAL</p>
            </div>
            <div class="col-6">
                <a href="#" style="color:#0d0d0d;font-weight: bold;text-decoration: none;background: none;border: 0;outline: none;display: block;text-align: right;padding: 8px 0;font-size:14px; ">ALL HOT DEAL</a>
            </div>
        </div>
        <div class="row" style="margin: 0;">
            <div class="col-12" style="padding: 0;">
                <div class="text-slider hidemobiledeal1" >
                    <div class="owl-carousel owl-theme hotdeals-owl">
                        @foreach($products as $productid)
                        @if($product =App\Model\Product::find($productid->src_id))
                        <div class="item">
                            <a href="{{ route('welcome.productSingle', [$product,new_slug($product->title)]) }}" style="text-decoration: none;">
                            <div class="fetureproducts" style="padding: 0;">
                                <div style="position: relative;">
                                    <div class="w3-display-topright pr-1 pt-1">

            <a class="add-to-wishlist" title="{{ $product->isWl() ? 'Remove from' : 'Add To' }} wishlist" href="{{ route('wl.addProductToWishList',$product) }}">
                
            <span class="fa-stack">
              <i class="fas fa-square fa-stack-2x w3-text-white"></i>
              <i class="fa fa-heart fa-stack-1x  {{ $product->isWl() ? 'w3-text-red' : 'w3-text-gray' }}"></i>
            </span>
            </a>

        </div>
                                    <img src="{{ asset($product->fi()) }}" alt="{{$product->title}}">
                                @if($product->discount_type =='percent' &&  $product->discount > 0)
                                <div style="position: absolute;top: 12px;">
                                    <div style="margin: 5px 0;border-radius: 45%;color: white;width: 38px;height: 38px;">
                                        <img src="{{asset('/storage/discount.png')}}"  style="width: 40px;">
                                       <span style="top: 30%;right: 4%;position: absolute;font-size: 14px;font-family: auto;">
                                        {{number_format($product->discount,0)}} %
                                       </span>
                                    </div>
                                </div>
                                @elseif($product->discount_type =='flat' && $product->discount > 0)
                                <div style="position: absolute;top: 12px;">
                                    <div style="margin: 5px 0;border-radius: 45%;color: white;width: 38px;height: 38px;">
                                        <img src="{{asset('/storage/discount.png')}}"  style="width: 40px;">
                                        <span style="top: 30%;right: 4%;position: absolute;font-size: 14px;font-family: auto;">
                                            {{number_format(100-($product->final_price*100/$product->sale_price),0)}} %
                                        </span>
                                    </div>
                                </div>
                                @endif
                                
                                @if($product->stock_out_limit >= $product->quantity)
                                <div style="position: absolute;right: 0;bottom: 0;">
                                    <img src="{{asset('/storage/outofstock.png')}}"  style="width:100px;">
                                </div>
                                @endif
                                </div>
                                
                                <div style="text-align: center;">
                                    <p style="color: #28a745;font-size: 12px;margin:0; ">{{$appSetting->currency}}  {{number_format($product->final_price,0)}} @if($product->discount > 0) <del style="color: #ea4335;font-size: 10px;"> {{number_format($product->sale_price,0)}} </del> @endif</p>
                                </div>
                            </div>
                            </a>
                        </div>
                        @endif
                        @endforeach

                    </div>
                   
                </div>
            </div>
        </div>
    </div>
    @if($brands->first())
    <div class="branddiv">
        <div class="text-slider hidemobilebrand" >
            <p style="font-weight: bold;margin: 0;padding: 5px 15px;">OUR BRAND</p>
            <div class="owl-carousel owl-theme hotdeals-owl">
                @foreach($brands as $brandid)
                @if($brand =App\Model\ProductBrand::find($brandid->src_id))
                <div class="item">
                    <div style="margin: 5px;border: 1px solid #dadada">
                        @if($brand->img_name)
                        <a href="{{ route('welcome.productBrand',[$brand,new_slug($brand->title)]) }}"><img src="{{ route('imagecache', [ 'template'=>'cpsm','filename' => $brand->img_name ]) }}" alt="" style="width: 100%;"></a>
                        @endif
                    </div>
                </div>
                @endif
               @endforeach
            </div>
        </div>
        <div class="text-slider hidedestopbrand" style="overflow: auto;">
            <p style="font-weight: bold;margin: 0;padding: 5px 15px;">OUR BRAND</p>
           <div class="row" style="margin: 0;">
                @foreach($brands as $brandid)
                @if($brand =App\Model\ProductBrand::find($brandid->src_id))
                <div class="col-3 col-md-3" style="padding: 0;">
                    <div style="margin: 5px;border: 1px solid #dadada">
                        @if($brand->img_name)
                        <a href="{{ route('welcome.productBrand',[$brand,new_slug($brand->title)]) }}"><img src="{{ route('imagecache', [ 'template'=>'cpsm','filename' => $brand->img_name ]) }}" alt="" style="width: 100%;"></a>
                        @endif
                    </div>
                </div>
                 @endif
                @endforeach
            </div>
        </div>
    </div>
     @endif
     
     
      @foreach($categories as $categoryid)
     @if($category = App\Model\ProductCategory::find($categoryid->src_id))
     <div class="productsection hidemobileslider">
        <div class="row" style="margin: 0;">
            <div class="col-6 col-md-2" style="padding: 0;border-right: 1px solid #efefef;">
                <div class="catagorymenudiv">
                <div class="catagorymenu"><p><a href="{{ route('welcome.productCategory',[$category,new_slug($category->title)]) }}">{{$category->title}} </a></p></div>
                <div class="catagorymenusitem">
                    <ul>
                        @foreach($category->subcats()->get() as $subctg)
                        <li><a href="{{ route('welcome.productSubcategory',[$subctg, new_slug($subctg->title)]) }}">{{$subctg->title}}</a></li>
                        @foreach($subctg->subsubcats()->get() as $subsubctg)
                        <li><a href="{{ route('welcome.productSubsubcategory',[$subsubctg,new_slug($subsubctg->title)]) }}">{{$subsubctg->title}}</a></li>
                        @endforeach
                        @endforeach
                    </ul>
                </div>
                @if($category->subcats()->count() > 0)
                <div class="morectegoryshow">
                    <span>More Category</span>
                </div>
                @endif
                </div>
            </div>
            <div class="col-6 hidedestopslider" style="padding: 0;">
                <div>

                </div>
            </div>
            <div class="col-md-10" style="padding: 0;">
                <div class="catagoryproductsdiv">
                   <div class="row" style="margin: 0;">
                            <div class="col-md-4 hidemobileslider" style="padding: 0;">
                                <div style="position: relative;">
                                    @include('layouts/welcomelayouts/homeproductslider')
                                </div>
                            </div>
                        <div class="col-md-8" style="padding: 0;">
                            <div class="row" style="margin: 0;">
                                @foreach(App\Model\PageItem::where('page_id',14)->where('datatype',6)->where('parent_id',$categoryid->id)->get() as $productid)
                                @if($product =App\Model\Product::find($productid->src_id))
                                <div class="col-md-4" style="padding: 0;">
                                    @include('welcome.products.include.productCard')
                                </div>
                                @endif
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    @endforeach
     
    <div class="hidedestopbrand">
        <div class="row" style="margin:0;">
            @foreach(App\Model\PageItem::where('page_id',14)->where('datatype',6)->get() as $productid)
            @if($product =App\Model\Product::find($productid->src_id))
            <div class="col-6" style="padding: 0;">
                @include('welcome.products.include.productCard')
            </div>
            @endif
            @endforeach
        </div>
    </div>
     
     

@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function() {
     $('.hotdeals-owl').owlCarousel({
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:3
                },
                600:{
                    items:4
                },
                1000:{
                    items:6
                }
            }
        });

     $('.products-owl').owlCarousel({
            loop:true,
            margin:0,
            nav:true,

            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
            }
        });

     });
</script>
<script src="{{asset('public/js/lightslider.js')}}"></script> 
    <script>

         $(document).ready(function() {




             var page = 1;
            $('#ajax-load2').click(function(){
                page++;
                
                loadMoreData(page);
            });
            function loadMoreData(page){
               
              $.ajax(
                    {
                     url:'?page=' + page,
                        type: "get",
                        beforeSend: function()
                        {
                            $('#ajax-load2img').show();
                        }
                    })
                    .done(function(data)
                    {
                        if(data.html == " "){
                            $('.ajax-load').html("No more records found");
                            return;
                        }
                        $('#ajax-load2img').hide();
                        $("#post-data").append(data.html);
                    })
                    .fail(function(jqXHR, ajaxOptions, thrownError)
                    {
                          alert('server not responding...');
                    });
            }
           
        });
    </script>
@endpush