@extends('Frontend.Master')
@section('style')
@stop
@section('title')
{{  $category->fa_name.' '.GetPageTitle()  }}
@stop
@section('seo_description')
    {{  $category->description }}
@stop
@section('key_words')
@stop
@section('content')
    <div class="w90">
        <div class="options">
            <ul>
                <li><a href="/"> <span>خانه</span> <i class="fa fa-chevron-left"></i> </a></li>
                <li><a href="#"> <span>دسته </span> <i class="fa fa-chevron-left"></i> </a></li>
                <li><a href="{{ url('Category/' . $category->slug )  }}">
                        <span>{{ $category->fa_name }}</span> </a></li>
            </ul>
        </div>
        <div class="prodactcell">
            <div id="contactpro" class="overhid product">
                <div class="options-titel-container"><span class="options-text">
                
                 (
                            <span class="options-meta">نمایش</span> <span
                                class="options-meta-first">{{  $product->currentPage() * 10 - 9 }}</span>
                            <span class="options-meta">-</span> <span
                                class="options-meta-first">{{  $product->currentPage() * 10  }}</span>
                            <span class="options-meta">محصول از </span> <span
                                class="options-meta-first"> {{ $product->total()  }}</span> )
                                 <span>&nbsp;&nbsp;&nbsp;</span> </span>

                </div>
                {{--sorter--}}
                                <div class="categore-des">
                    <div class="title-categore"><h1>{{ $category->fa_name }}</h1>
                        <span>{{ $specialCategory?$specialCategory->special_title:'' }}</span></div>
                    {{--<p>--}}

                    <div class="clear about-index-des slideDownJQ">
                        <p class="slide">
                            {!!  $category->description !!}
                        </p>
                        <span class="btn-more">نمایش بیشتر</span>
                    </div>
                        
                </div>
                <div class="option-sort">
                    <ul>
                        <li>مرتب سازی بر اساس:</li>
                        <li class="active sort"><a href="#a" data-sort="1">پربازدیدترین</a></li>
                        <li class="sort"><a data-sort="2">جدیدترین</a></li>
                        <li class="sort"><a data-sort="3">پرفروش ترین</a></li>
                        <li class="sort"><a data-sort="4">ارزانترین</a></li>
                        <li class="sort"><a data-sort="5">گرانترین</a></li>
                    </ul>
                </div>
                {{-- product--}}
                <div class="prodacts col-xs-12">
                    @if(count($product))
                        @foreach($product as $item )
                            <article class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pull-right">
                                <a href="{{  url('product/' . $item->id .'/' . $item->slug )}}">
                                    <img src="{{ url("images/400/400" . $item->imageUrl)}}" alt=" {{ $item->seo_title }}" title="{{ $item->fa_name }}" >
                                    <div class="footer"><span>{{ $item->fa_name }}</span>
                                        @if($showPrice)
                                            @if($item->status == 'normal')
                                                <span class="price-pro">{{ $item->price }} تومان </span>
                                            @elseif($item->status == 'discount')
                                                <span class="old-price-pro">{{ $item->price }}</span>
                                                <span class="price-pro">{{ $item->discount }} تومان </span>
                                            @else
                                                <span class="price-pro">ناموجود </span></div>
                                            @endif
                                        @endif

                                </a>
                            </article>
                        @endforeach
                    @else
                        <article class="col-xs-12">

                            <p> محصولی در این دسته یافت نشد </p>

                        </article>
                    @endif

                </div>
                {{--pagination--}}
                <div class="overhid text-center pagination">
                    {!! $product->appends(['status' => request('status') , 'sort' => request('sort')])->render() !!}

                </div>
                {{----}}
            </div>
            {{-- side bar--}}
            <div id="sidebar-menu" class="overhid rtl">
                <div class="menu-list">
                    <form method="get" id="filter">
                        <ul id="menu-content" class="menu-content collapse out">
                            <input id="SortInp" name="sort" value="{{ request('sort') }}" type="hidden">
                              @if($showPrice)
                            <li>
                                <input type="checkbox" name="status" value="1"
                                       @if(request('status') == "1")  checked @endif>
                                <label>فقط کالا های موجود </label>
                            </li>
                            {{----}}
                            <li>
                                <a data-toggle="collapse" data-target="#price" class="collapsed">
                                    <i class="fa fa-angle-down"></i>محدوده قیمت موردنظر (تومان) <span
                                            class="arrow"></span>
                                </a>
                                <ul class="sub-menu collapse rtl" id="price">
                                    <li>
                                        <div id="slider-range"></div>
                                        <p>
                                            <input type="text" id="amount" value="{{(int)request('start_price')}}"
                                                   readonly
                                                   style="border:0; color:#057DC0; margin-top:20px; text-align:center"
                                                   name="start_price">
                                            <input type="text" id="amounttow" readonly
                                                   value="{{(int)request('end_price')}}"
                                                   style="border:0; color:#057DC0; margin-top:20px; text-align:center"
                                                   name="end_price">
                                        </p>
                                        <button class="btnprice">اعمال محدوده قیمت</button>
                                    </li>
                                </ul>
                            </li>
                            @endif
                            {{----}}
                            {{--<li>--}}
                            {{--<label for="t"> Start</label>--}}
                            {{--<input type="text" name="start_price" value="{{(int)request('start_price')}}"--}}
                            {{--placeholder="start">--}}
                            {{--<br>--}}
                            {{--<label for="t">end</label>--}}
                            {{--<input type="text" name="end_price" value="{{(int)request('end_price')}}"--}}
                            {{--placeholder="end">--}}
                            {{--</li>--}}

                            {!! json_decode($features) !!}


                            <li>
                                <button type="submit" class="btnprice">اعمال فیلتر</button>
                            </li>
                        </ul>

                    </form>
                </div>
            </div>
            {{--  side bar --}}
        </div>
        {{-- cookie  --}}
        @include("Frontend.Sections.ObservedProduct")
        {{--  --}}
    </div>



@stop
@section('script_area')
    <script>
        $(document).on('click', 'li.sort a', function () {
            var this_btn = $(this);
            var sort = this_btn.attr('data-sort');
            this_btn.parent().siblings().removeClass('active');
            this_btn.parent().addClass('active');
            $('input#SortInp').val(sort);
            $('form#filter').submit();
        });
        $(document).ready(function () {
            @if(app('request')->input('sort') != null)
            $('li.sort').removeClass('active');
            $('li.sort').find('a[data-sort={{ request('sort') }}]').parent().addClass('active');
            @endif
        });
    </script>
    <script>
        $(function () {
            $("#slider-range").slider({
                range: true,
                min: 0,
                max: 1000000,
                values: ["{{(int)request('start_price')}}", "{{(int)request('end_price') == 0 ? "1000000" : (int)request('end_price')}}"],
                slide: function (event, ui) {
                    $("#amount").val(+ui.values[0]);
                    $("#amounttow").val(+ui.values[1]);
                }
            });
            $("#amount").val($("#slider-range").slider("values", 0));
            $("#amounttow").val($("#slider-range").slider("values", 1));


        });
    </script>


@endsection