@extends('frontend.layouts.template')
@section('stylesheet')
	<!-- jquery-ui CSS -->
	<link rel="stylesheet" href="{{ asset('assets/css/jquery-ui.css') }}">
<style>
    .widget_categories a::before{
        content: "\f3d0" !important;
    }
    .widget_categories .collapsed a::before{
        content: "\f3d1" !important;
    }
    .sub-menu{
        padding-left: 35px;
    }
    .sub-menu li a::before{
        content: unset !important;
    }
</style>
@endsection
@section('content')
<!-- START SECTION BREADCRUMB -->
<div class="breadcrumb_section bg_gray page-title-mini">
    <div class="container"><!-- STRART CONTAINER -->
        <div class="row align-items-center">
        	<div class="col-md-6">
                <div class="page-title">
            		<h1>{{ trans('menu.all_products') }}</h1>
                </div>
            </div>
            <div class="col-md-6">
                <ol class="breadcrumb justify-content-md-end">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">{{ trans('label.home') }}</a></li>
                    <li class="breadcrumb-item"><a href="#">{{ trans('label.product') }}</a></li>
                    {{-- <li class="breadcrumb-item active">{{ trans('menu.all_products') }}</li> --}}
                
                </ol>
            </div> 
        </div>
    </div><!-- END CONTAINER-->
</div>
<!-- END SECTION BREADCRUMB -->
<!-- START MAIN CONTENT -->
<div class="main_content">

    <!-- START SECTION SHOP -->
    <div class="section">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="row align-items-center mb-4 pb-1">
                        <div class="col-12">
                            <div class="product_header">
                                <div class="product_header_left">
                                    <div class="custom_select">
                                        <select id="sortBy" class="form-control form-control-sm">
                                            <option value="">{{ trans('label.default_sorting') }}</option>
                                            <option value="popularity">{{ trans('label.sort_by_popularity') }}</option>
                                            <option value="date">{{ trans('label.sort_by_newness') }}</option>
                                            <option value="price">{{ trans('label.sort_by_price_low_to_high') }}</option>
                                            <option value="price-desc">{{ trans('label.sort_by_price_high_to_low') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="product_header_right">
                                    <div class="products_view">
                                        <a href="#" class="shorting_icon grid active"><i class="ti-view-grid"></i></a>
                                        <a href="#" class="shorting_icon list"><i class="ti-layout-list-thumb"></i></a>
                                    </div>
                                    <div class="custom_select">
                                        <select id="perPage" class="form-control form-control-sm">
                                            <option value="">{{ trans('label.showing') }}</option>
                                            <option value="6">6</option>
                                            <option value="9">9</option>
                                            <option value="12">12</option>
                                            <option value="18">18</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row shop_container">
                        @if($products)
                        @foreach( $products as $product )
                        @php
                            $subject = json_decode( $product->subject )
                        @endphp
                        <div class="col-md-4 col-6">
                            <div class="product">
                                <div class="product_img">
                                    @if ($product->label == 'SALE')
                                        <span class="pr_flash bg-success">Sale</span>
                                    @endif
                                    @if ($product->label == 'HOT')
                                        <span class="pr_flash bg-danger">Hot</span>
                                    @endif
                                    @if ($product->label == 'NEW')
                                        <span class="pr_flash">New</span>
                                    @endif
                                    <a href="{{ url('product/detail/'. $product->id .'/'. encodelink( objectName( $product->subject ) ) ) }}">
                                        @if( $product->product_images )
                                        <img src="{{ asset( $product->product_images[0]->link ) }}" alt="{{ objectName( $product->subject ) }}_1">
                                        @endif
                                    </a>
                                    <div class="product_action_box">
                                        <ul class="list_none pr_action_btn">
                                            <li class="add-to-cart"><a href="#" product-id="{{ $product->id }}" class="quick-cart"><i class="icon-basket-loaded"></i> {{ trans('label.add_to_cart') }}</a></li>
                                            <li><a href="{{ url('product/quick-view/' . $product->id ) }}" class="popup-ajax ajax-popup-link"><i class="icon-magnifier-add"></i></a></li>
                                            <li><a href="{{ url('account/wishlist/'. $product->id ) }}" class="add_wishlist"><i class="icon-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="product_info">
                                    <h6 class="product_title"><a href="{{ url('product/detail/'. $product->id .'-'. $product->category  .'/'. encodelink( objectName( $product->subject ) ) ) }}">{{ objectName( $product->subject ) }}</a></h6>
                                    <div class="product_price">
                                        <span class="price">฿{{ nb($product->price,2) }}</span>
                                        @if( $product->discount > 0)
                                        <del>฿{{ nb($product->discount,2) }}</del>
                                        <div class="on_sale">
                                            <span>{{ nb(discount_of( $product->price,$product->discount),2) }}% Off</span>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="rating_wrap">
                                        <div class="rating">
                                            <div class="product_rate" style="width:{{ rating($product->id) }}%"></div>
                                        </div>
                                        <span class="rating_num">({{ review($product->id) }})</span>
                                    </div>
                                    <div class="pr_desc">
                                        {!! objectName( $product->short_description) !!}
                                    </div>

                                    <div class="list_product_action_box">
                                        <ul class="list_none pr_action_btn">
                                            <li class="add-to-cart"><a href="#"><i class="icon-basket-loaded"></i> {{ trans('label.add_to_cart') }}</a></li>
                                            <li><a href="{{ url('product/quick-view/'. $product->id ) }}" class="popup-ajax"><i class="icon-magnifier-add"></i></a></li>
                                            <li><a href="{{ url('account/wishlist/'. $product->id ) }}" class="add_wishlist"><i class="icon-heart"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                    @if ($products->lastPage() > 1)
                        <div class="row">
                            <div class="col-12">
                                <input type="hidden" name="page" id="page" value="{{ $products->currentPage() }}">
                                {!! pagination($products) !!}
                                {{--                                 
                                <ul class="pagination mt-3 justify-content-center pagination_style1">
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#"><i class="linearicons-arrow-right"></i></a></li>
                                </ul> --}}
                            </div>
                        </div>
                    @endif
                </div>
                <div class="col-lg-3 order-lg-first mt-4 pt-2 mt-lg-0 pt-lg-0">
                    @include('frontend.products.inc-category-sidebar')
                </div>
            </div>
        </div>
    </div>
    <!-- END SECTION SHOP -->

    </div>
    <!-- END MAIN CONTENT -->
@endsection
@section('after_javascript')
	<!-- jquery-ui -->
	<script src="{{ asset('assets/js/jquery-ui.js') }}"></script>

@endsection
@section('javascript')
<script type="text/javascript">
    (function($){
        @if ( Request::exists('sortBy') )
            $('#sortBy').val('{{ Request::input('sortBy')}}');
        @endif
        @if ( Request::exists('perPage') )
            $('#perPage').val('{{ Request::input('perPage')}}');
        @endif
        @if ( Request::exists('rank') )
            let ranks = "{{ Request::input('rank')}}";
            let rank = ranks.split('-');
            let price_filter = $('#price_filter');
            if( rank && rank.length ){
                if(rank[0] && rank[0] != 'undefined')
                $('#price_first').val( rank[0]);
                if(rank[1] && rank[1] != 'undefined')
                $('#price_second').val( rank[1]);
                if(rank[0] && rank[0] != 'undefined')
                price_filter.attr('data-min-value',rank[0]);
                if(rank[1] && rank[1] != 'undefined')
                price_filter.attr('data-max-value',rank[1]);
            }
        @endif
    }(jQuery));
</script>

@endsection