@extends('layouts.main')

@section('content')
    <div class="body-content outer-top-vs" id="top-banner-and-menu">
        <div class="container">
            <div class="row">
                @include('partials.sigma.catalogue.sidebar')
                <div class="col-xs-12 col-sm-12 col-md-9 homebanner-holder" style="margin-bottom: 10rem;">
                    <!-- ========================================== SECTION – HERO ========================================= -->

                    @if(!$products)
                        <header class="section-header text-center">
                            <h3 class="text-center">No Products available.</h3>
                        </header>
                    @endif

                    @if(isset($products))
                        @if($products)
                            <div class="clearfix filters-container m-t-10" style="
                            border-bottom: 1px solid #cccc;
                            padding-bottom: 10px;">
                                <div class="row">

                                    <!-- /.col -->
                                    <div class="col col-sm-12 hidden-sm">
                                        <div class="col col-sm-12 col-md-6 col-lg-6 no-padding">
                                            <h5><a href="{{url('/')}}">Home</a> / <a href="{{url('catalogue')}}">Catalogue</a> / Search results for {{$title ? ucwords($title) : ''}}</h5>
                                        </div>
                                        <div class="col col-sm-3 col-md-3 col-lg-3 no-padding text-right">
                                            <div class="lbl-cnt">
                                                <div class="fld inline">
                                                    <div class="dropdown dropdown-small dropdown-med dropdown-white inline">
                                                        <button data-toggle="dropdown" type="button" class="btn dropdown-toggle"> Sort by <span class="caret"></span> </button>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li role="presentation"><a href="#" class="price_sort_li" id="0">None</a></li>
                                                            <li role="presentation"><a href="#" class="price_sort_li" id="1">Price:Lowest first</a></li>
                                                            <li role="presentation"><a href="#" class="price_sort_li" id="2">Price:HIghest first</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <!-- /.fld -->
                                            </div>
                                            <!-- /.lbl-cnt -->
                                        </div>
                                        <!-- /.col -->
                                        <div class="col col-sm-3 col-md-3 col-lg-3 no-padding text-right hidden-sm">
                                            <div class="lbl-cnt">
                                                <div class="fld inline">
                                                    <div class="dropdown dropdown-small dropdown-med dropdown-white inline">
                                                        <button data-toggle="dropdown" type="button" class="btn dropdown-toggle"> Delivery method <span class="caret"></span> </button>
                                                        <ul role="menu" class="dropdown-menu">
                                                            <li role="presentation"><a class="delivery_method_li" id="0" href="#">All</a></li>
                                                            <li role="presentation"><a class="delivery_method_li" id="1" href="#">Pickup</a></li>
                                                            <li role="presentation"><a class="delivery_method_li" id="2" href="#">Delivery</a></li>
                                                            <li role="presentation"><a class="delivery_method_li" id="3" href="#">Pickup + Delivery</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <!-- /.fld -->
                                            </div>
                                            <!-- /.lbl-cnt -->
                                        </div>
                                        <!-- /.col -->
                                        <!-- /.col -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <!-- /.row -->
                            </div>
                            <div class="search-result-container ">
                                <div class="col col-sm-12 col-md-5 col-lg-5 hidden-sm hidden-md hidden-lg " style="margin-bottom: 50px; margin-top: 20px;">
                                    <div class="col col-xs-2 col-sm-6 col-md-6 no-padding">
                                        <div class="lbl-cnt">
                                            <div class="fld inline">
                                                <div class="dropdown dropdown-small dropdown-med dropdown-white inline">
                                                    <button data-toggle="dropdown" type="button" class="btn dropdown-toggle"> Sort by <span class="caret"></span> </button>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li role="presentation"><a href="#" class="price_sort_li" id="0">position</a></li>
                                                        <li role="presentation"><a href="#" class="price_sort_li" id="1">Price:Lowest first</a></li>
                                                        <li role="presentation"><a href="#" class="price_sort_li" id="2">Price:HIghest first</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- /.fld -->
                                        </div>
                                        <!-- /.lbl-cnt -->
                                    </div>
                                    <!-- /.col -->
                                    <div class="col col-xs-3 col-sm-6 col-md-6 no-padding hidden-sm hidden-md">
                                        <div class="lbl-cnt">
                                            <div class="fld inline">
                                                <div class="dropdown dropdown-small dropdown-med dropdown-white inline">
                                                    <button data-toggle="dropdown" type="button" class="btn dropdown-toggle"> Delivery method <span class="caret"></span> </button>
                                                    <ul role="menu" class="dropdown-menu">
                                                        <li role="presentation"><a class="delivery_method_li" id="0" href="#">All</a></li>
                                                        <li role="presentation"><a class="delivery_method_li" id="1" href="#">Pickup</a></li>
                                                        <li role="presentation"><a class="delivery_method_li" id="2" href="#">Delivery</a></li>
                                                        <li role="presentation"><a class="delivery_method_li" id="3" href="#">Pickup + Delivery</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <!-- /.fld -->
                                        </div>
                                        <!-- /.lbl-cnt -->
                                    </div>
                                    <!-- /.col -->
                                </div>
                                <div id="myTabContent" class="tab-content category-list">
                                    <div class="tab-pane active " id="grid-container">
                                        <div class="category-product">

                                            <div class="row category_products">

                                                @if(isset($products))
                                                    @foreach($products as $product)
                                                        <div class="col-sm-6 col-md-3 col-lg-3">
                                                            <div class="item">
                                                                <div class="products">
                                                                    <div class="product">
                                                                        <div class="product-image">
                                                                            <div class="image">
                                                                                <a  href="{{url('catalogue/product', [$product->product_code])}}" title="{{$product->product}}">
                                                                                    <img src="{{asset('assets/images/spinnerb.gif')}}" alt="" class="img-responsive" data-src="{{$product->image}}"  style="object-fit: contain;">
                                                                                    {{--<img src="{{asset('assets/images/spinnerb.gif')}}" alt="" class="hover-image">--}}
                                                                                </a>
                                                                            </div>
                                                                        </div>

                                                                        <div class="product-info text-left">
                                                                            <h3 class="name">
                                                                                <a  href="{{url('catalogue/product', [$product->product_code])}}" title="{{$product->product}}">{{str_limit($product->product, 18)}}</a></h3>
                                                                            @if(Auth::check())
                                                                                @if(Auth::user()->currency->is_currency_fixed == '1')
                                                                                    <div class="product-price">
                                                                                        <span class="price">&#8358;{{transform_product_price($product->price, 1) }}</span>
                                                                                        @if($product->sale == 1)
                                                                                            <span class="price-before-discount">&#8358; {{transform_product_price($product->old_price, 1)}}</span>
                                                                                        @endif
                                                                                    </div>
                                                                                @else
                                                                                    <div class="product-price">
                                                                                        <span class="price">{{ transform_product_price($product->price, Auth::user()->currency->rate )  }} {{Auth::user()->currency->currency }}</span>
                                                                                        @if($product->sale == 1)
                                                                                            <span class="price-before-discount">{{ transform_product_price($product->old_price, Auth::user()->currency->rate )  }} {{Auth::user()->currency->currency}}</span>
                                                                                        @endif
                                                                                    </div>
                                                                                @endif
                                                                            @endif

                                                                        </div>

                                                                    </div>
                                                                    <!-- /.product -->

                                                                </div>
                                                                <!-- /.products -->
                                                            </div>
                                                        </div>
                                                    @endforeach
                                            </div>

                                            @else
                                                <p>No Products available</p>
                                            @endif
                                        </div>
                                        <!-- /.category-product -->

                                    </div>

                                </div>

                            </div>
                        @endif
                    @endif

                </div>
            </div>
        </div>
    </div>
@endsection('content')
@push('style')
    <link rel="stylesheet" type="text/css" href="{{asset('sigma/css/alertui.min.css')}}">
@endpush

@push('script')
    <script src="{{asset('sigma/js/alertui.min.js')}}"></script>
    <script>
        var baseUrl = "