@extends('includes.master')

@section('content')



<div class="backgroundheader">
    <div class="control"> 
			<a href="{{url('/')}}"><img style="width: 21px;margin-top: 16px;" src="{{url('/assets/images/img/icon/back.png')}}" class="hom" ></a>			
			<a href="{{url('/cart')}}"><img style="margin-top: 15px;" src="{{url('/assets/images/img/icon/mycart.png')}}" class="set"></a>		
    </div>
    <section>
    <form id="searchform" style="background-color: #fff;width: 93%;margin-top: 5%;margin-left: 3%;border-radius: 10px;margin-bottom: -51px;box-shadow: 1px 0px 4px #00000045;">

        <div class="search-field">
            <input type="text" id="searchdata" value="" style="text-align: right;" placeholder="... أكتب ما تبحث عنه" />
        </div>
        <button style="height: 38px;padding-left: 16px;margin-left: -1px;" type="button" id="searchbtn" class="search-button">
            <i class="fa fa-search"></i>

        </button>
    </form>
    </section>
</div>
    <div id="wrapper" class="go-section">
        <section class="wow fadeInUp go-products">
            <div class="container">
                <div class="row">
                   
                    <div class="col-md-9">
                        <div id="products">
                    @forelse($products as $product)
                    <div class="col-xs-6 col-sm-4 product">
                        <article class="col-item">
                            <div class="photo">
                                <a href="{{url('/product')}}/{{$product->id}}/{{str_replace(' ','-',strtolower($product->title))}}"> <img src="{{url('/assets/images/products')}}/{{$product->feature_image}}" class="img-responsive" style="height: 130px;" alt="Product Image" /> </a>
                            </div>
                            <div class="info">
                                <div class="row">
                                    <div class="price-details">
                                        <a href="{{url('/product')}}/{{$product->id}}/{{str_replace(' ','-',strtolower($product->title))}}" class="row" style="min-height: 60px">
                                            <h1>{{$product->title}}</h1>
                                        </a>
                                        </br>
                                        <div class="prices">
                                            @if($product->previous_price != "")
                                            @else
                                            @endif
                                            <h1 class="prodpric" style="color: #d8d8d89e;">د.ع {{$product->price}}</h1>
                                        </div>


                                    </div>

                                </div>
                                <div class="clearfix"></div>
                            </div>
                        </article>
                    </div>
                    @empty
                    <img src="{{url('/assets/images/img/noresultf.png')}}" class="noresul" >
                    @endforelse
                    </div>
                        @if(count($products) < 0)
                            <div class="col-sm-12 col-xs-12 col-md-12 text-center" style="margin-top: 15px;">
                                <input type="hidden" id="page" value="2">
                                <div class="col-md-12">
                                <img id="load" src="{{url('/assets/images')}}/default.gif" style="display: none;width: 20px;"></div>
                                <button type="button" id="load-more" class="loadmorebuttonnnn">تحميل المزيد</button>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    </div>

@stop

@section('footer')
<script>

    $("#sortby").change(function () {
        var sort = $("#sortby").val();
        window.location = "{{url('/category')}}/{{$category->slug}}?sort="+sort;
    });

    $("#load-more").click(function () {
        $("#load").show();
        var slug = "{{$category->slug}}";
        var page = $("#page").val();
        var sort = $("#sortby").val();
        $.get("{{url('/')}}/loadcategory/"+slug+"/"+page+"?sort="+sort, function(data, status){
            $("#load").fadeOut();
            $("#products").append(data);
            //alert("Data: " + data + "\nStatus: " + status);
            $("#page").val(parseInt($("#page").val())+1);
            if ($.trim(data) == ""){
                $("#load-more").fadeOut();
            }

        });
    });
</script>
@stop