@extends('layouts.master')
@section('title', 'Welcome to the online vegitable store') @yield('navbar')
@section('content')



<style>
    .starrrproductdiv {
        /*margin-left: 35%;*/
        display: flex;
        align-items: center;
        /* Align the flex-items vertically */
        justify-content: center;
    }
</style>

<meta name="_token" content="{{ csrf_token() }}">


<div class="empty-space col-xs-b15 col-sm-b30"></div>
<div class="empty-space col-xs-b15 col-sm-b30"></div>
<div class="empty-space col-xs-b15 col-sm-b30"></div>
<div class="empty-space col-xs-b25 col-sm-b30"></div>
<div class="empty-space col-xs-b45 col-sm-b30"></div>
<div class="empty-space col-xs-b45 col-sm-b30"></div>
<div class="container">
    <div class="empty-space col-xs-b15 col-sm-b30"></div>
    <div class="empty-space col-xs-b25"></div>
    <div class="breadcrumbs">
        <a href="{{url('home')}}">home</a>
        <a href="{{url('vegitables')}}">Kik Vegie</a>

    </div>
    <div class="empty-space col-xs-b15 col-sm-b50 col-md-b25"></div>

    <div class="row stores">
        <div class="col-md-12">
            <div class="store-name uppercase">
                <h1>Kik Vegie</h1>
            </div>
        </div>
    </div>
    <div class="row stores">

        <div class="col-md-6" hidden="">
            <div class="h4 col-xs-b25">Select filter</div>
            <div class="form-group ">
                {{-- <label for="exampleFormControlSelect1">Select  Filter</label> --}}
                <select class="SlectBox small" id="filtercombo">
                    <option disabled="disabled" selected="selected">Search Filter</option>
                    <option value="price-filter">Price</option>
                    <option value="rating-filter">Ratings</option>
                    <option value="city-filter">City</option>

                </select>
            </div>

            <div class="row">

                {{-- <div class="col-md-12 hidden-xs hidden-sm filter price-filter" hidden="">

                          <div class="h4 col-xs-b25">Price</div>
                          <div id="prices-range"></div>
                          <div class="simple-article size-1">
                              PRICE: <b class="grey">LKR<span class="min-price">100</span> - LKR<span
                                          class="max-price">10000</span></b>
                          </div>

                      </div>
                      <div class="col-md-12 hidden-xs hidden-sm filter rating-filter" hidden="">

                          <div class="h4 col-xs-b25">Ratings</div>
                          <div id="star-range"></div>
                          <div class="simple-article size-1">
                              RATING: <b class="grey"><span class="min-star">0 Star</span> - <span
                                          class="max-star">5 Star</span></b>
                          </div>

                      </div>
                      <div class="col-md-12 hidden-xs hidden-sm filter city-filter" hidden="">
                          <div class="h4 col-xs-b25">City</div>
                          <div class="align-inline spacing-1 product-search">
                              <select class="SlectBox small" id="cityfilter">

                                  <option disabled="disabled" selected="selected">Search City</option>
                                  @foreach($cities as $city)

                                      <option value="{{$city->city_id}}">{{$city->name}}</option>


                @endforeach

                </select>
            </div>
        </div>
        --}}
    </div>


</div>
<div class="col-md-2"></div>
<div class="col-md-2">

    <div class="h5 col-xs-b25">Search Product</div>
</div>
<div class="col-md-5 ">

    <div class="align-inline spacing-1 product-search">

        <input type="text" class="simple-input" placeholder="Search here" id="searchfilter">
        <input type="hidden" id="storeQuery">

        <script>
            $('#searchfilter').keypress(function (e) {
                            if (e.which == '13') {
                                e.preventDefault();

                                $('#filterResult').load('{{url("/vegitables/catesearch")}}' + '/' + this.value + "(+)" + 1, function () {
                                    _functions.initSwiper();
                                    window.flag=false;
                                });
                                $("#storeQuery").val(this.value + "(+)" + 1)


                                // alert(this.value);
                            }
                        });

                        $(document).ready(function () {
                            // 767px
                            var newWindowWidth = $(window).width();

                            if (newWindowWidth < 767) {
                                $('.filter-div').removeClass('pull-right');
                                $('.filter-div').addClass('text-right');

                            }


                        });

        </script>

    </div>

</div>
<div class="col-md-1">
    <div class="empty-space col-xs-b15 "></div>
    <div class="h6 theme-green filter-div pull-right"><a id="filter-btn"><i class="fas fa-filter"></i>
            Filter</a></div>
</div>


<div class="col-md-12">

    <div class="align-inline spacing-1">
        <div class="h4">Vegetables</div>
    </div>
    <div class="align-inline spacing-1 pull-right">


    </div>
    <div class="align-inline spacing-1">
        {{-- <div class="simple-article size-1">SHOWING <b class="grey">{{count($itemStore)}}</b> OF <b
            class="grey">{{$itemStore->total()}} </b> RESULTS --}}
        {{-- </div> --}}
    </div>
    <div class="align-inline spacing-1 hidden-xs pull-right">
        <a class="pagination toggle-products-view active"><img src="{{URL::asset('img/icon-14.png')}}" alt="" /><img
                src=" {{URL::asset('img/icon-15.png')}}" alt="" /></a>
        <a class="pagination toggle-products-view"><img src="{{URL::asset('img/icon-16.png')}}" alt="" /><img
                src="{{URL::asset('img/icon-17.png')}}" alt="" /></a>
    </div>


    <div class="empty-space col-xs-b25 col-sm-b60"></div>

    <div class="products-content">
        <div class="products-wrapper stores">
            <div class="row nopadding">

                <div class="row vegi" id="filterResult">
                                                                                

                    @include('include.productinclude',['itemStore_vegi'=>$itemStore_vegi])

                    <div id="pageload">


                    </div>

                    <div class="text-center text-green h1 preloader-spin"><i class="fas fa-spinner fa-pulse"></i></div>



                    <div class="row">
                        <div class="col-md-12 text-center">

                            <div class="pagination-wrapper">
                                {{-- <a class="pagination active">1</a>
                                            <a class="pagination">2</a>
                                            <a class="pagination">3</a>
                                            <a class="pagination">4</a>
                                            <span class="pagination">...</span>
                                            <a class="pagination">23</a> --}}
                                {{-- {!! $itemStore_vegi->render() !!} --}}
                            </div>

                        </div>
                    </div>


                </div>


            </div>
        </div>
    </div>
    <div class="empty-space col-xs-b35 col-sm-b0"></div>
    <div class="row">

        <div class="col-sm-12">


        </div>


        <div class="col-sm-3 hidden-xs">
            {{-- <a class="button size-1 style-5" href="#" hidden="">
                                   <span class="button-wrapper">
                                       <span class="icon"><i class="fa fa-angle-left" aria-hidden="true"></i></span>
                                       <span class="text">prev page</span>
                                   </span>
                           </a> --}}
        </div>
        <div class="col-sm-6 text-center">


        </div>
        <div class="col-sm-3 hidden-xs text-right">
            {{-- <a class="button size-1 style-5" href="#" hidden="">
                                  <span class="button-wrapper">
                                      <span class="icon"><i class="fa fa-angle-right" aria-hidden="true"></i></span>
                                      <span class="text">prev page</span>
                                  </span>
                          </a> --}}
        </div>
    </div>

    <div class="empty-space col-xs-b35 col-md-b70"></div>
    <div class="empty-space col-md-b70"></div>
</div>

</div>
</div>


<!-- Modal -->
<div id="FilterModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Filter</h4>
            </div>
            <div class="modal-body">


                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1"> Filter by Price</a>
                            </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse">
                            <div class="panel-body">

                                <div class="col-md-12  filter price-filter">

                                    <div class="h4 col-xs-b25">Price</div>
                                    <div id="prices-range"></div>
                                    <div class="simple-article size-1">
                                        PRICE: <b class="grey">LKR <span class="min-price">100</span> - LKR <span
                                                class="max-price">10000</span></b>
                                    </div>

                                </div>


                            </div>
                            {{-- <div class="panel-footer">Panel Footer</div> --}}
                        </div>
                    </div>
                </div>


                <div class="panel-group">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse2">Filter By Ratings</a>
                            </h4>
                        </div>
                        <div id="collapse2" class="panel-collapse collapse">
                            <div class="panel-body">


                                <div class="col-md-12  filter rating-filter">


                                    <div class="h4 col-xs-b25">Ratings</div>
                                    <div id="star-range"></div>
                                    <div class="simple-article size-1">
                                        RATING: <b class="grey"><span class="min-star">0 Star</span> - <span
                                                class="max-star">5 Star</span></b>
                                    </div>

                                </div>


                            </div>
                            {{-- <div class="panel-footer">Panel Footer</div> --}}
                        </div>
                    </div>
                </div>


                <div class="panel-group" hidden="">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse3">Filter By City</a>
                            </h4>
                        </div>
                        <div id="collapse3" class="panel-collapse collapse">
                            <div class="panel-body">

                                <div class="col-md-12  filter city-filter">
                                    <div class="h4 col-xs-b25">City</div>
                                    {{--<p>{{json_encode($cities)}}</p>--}}
                                    {{-- <div class="align-inline spacing-1 product-search"> --}}
                                    <select class="SlectBox small" id="cityfilter">
                                        <option disabled="disabled" selected="selected">Search City</option>
                                        @foreach($cities as $city)

                                        <option value="{{$city->city_id}}">{{$city->name}}</option>


                                        @endforeach
                                    </select>
                                    {{-- </div> --}}
                                </div>


                            </div>

                        </div>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')
<script>
    $('.preloader-spin').hide();
var flag=true;
        $('#filter-btn').click(function (event) {
            // alert('show');
            $('#FilterModal').modal();


        });

        $(document).ready(function () {

            $("#storeQuery").val("(+)" + 1)

        });

        $(document).ready(function () {
            var minVal = parseInt($('.min-price').text());
            var maxVal = parseInt($('.max-price').text());
            $("#prices-range").slider({
                range: true,
                min: minVal,
                max: maxVal,
                step: 50,
                values: [minVal, maxVal],
                slide: function (event, ui) {
                    $('.min-price').text(parseFloat(ui.values[0]).toFixed(2));
                    $('.max-price').text(parseFloat(ui.values[1]).toFixed(2));


                    var min = parseFloat(ui.values[0]).toFixed(2);
                    var max = parseFloat(ui.values[1]).toFixed(2);

                    var query = $("#storeQuery").val();

                    $('#filterResult').load('{{url("/vegitables/pricefilter")}}' + '/' + min + "(+)" + max + '(+)' + query, function (argument) {
                        _functions.initSwiper();
                    });


                }
            });
        });


        $(document).ready(function () {
            var minVal = parseInt($('.min-star').text());
            var maxVal = parseInt($('.max-star').text());
            $("#star-range").slider({
                range: true,
                min: minVal,
                max: maxVal,
                step: 0.5,
                values: [minVal, maxVal],
                slide: function (event, ui) {
                    $('.min-star').text(parseFloat(ui.values[0]).toFixed(1));
                    $('.max-star').text(parseFloat(ui.values[1]).toFixed(1));

                    var d = parseFloat(ui.values[0]).toFixed(1);
                    var max = parseFloat(ui.values[1]).toFixed(1);

                    var query = $("#storeQuery").val();

                    $('#filterResult').load('{{url("/vegitables/ratefilter")}}' + '/' + d + "(+)" + max + '(+)' + query, function (argument) {
                        _functions.initSwiper();
                        window.flag=false;
                    });

                }
            });
        });

        $("#cityfilter").change(function () {

            var cityid = $("#cityfilter").find(":selected").val();
            var query = $("#storeQuery").val();

            $('#filterResult').load('{{url("/vegitables/filtercity")}}' + '/' + cityid + '(+)' + query);

        });


        $('#filtercombo').change(function (event) {
            var index = $("#filtercombo option:selected").index();

            if (index != 0) {

// var cls=$('#filtercombo :selected').val();
                var cls = $('#filtercombo :selected').val();
                $('.filter').removeClass('hidden-xs');
                $('.filter').removeClass('hidden-sm');
                $('.filter').removeAttr('hidden');
                $('.filter').addClass('hidden-xs');
                $('.filter').addClass('hidden-sm');
                $('.filter').attr('hidden', 'true');
                $('.' + cls).removeClass('hidden-xs');
                $('.' + cls).removeClass('hidden-sm');
                $('.' + cls).removeAttr('hidden');


                console.log(index);

            }


        });
        $('.pagination').css('width', 'auto');
        $('.pagination').css('border', 'none');




	var page = 2;

	$(window).scroll(function() {
    //    alert('ok');
        
if (window.flag) {
     if($(window).scrollTop() + $(window).height() >= $(document).height()-300) {

	        page++;

	        loadMoreData(page);
// alert('ok');
        
	    }
}
	   

	});


	function loadMoreData(page){

	  $.ajax(

	        {

	            url: '?page=' + page,

	            type: "get",
            

	            beforeSend: function()

	            {

	               $('.preloader-spin').show();

	            }

	        })

	        .done(function(data)

	        {




	            if(data.html == " "){

	                $('.ajax-load').html("No more records found");

	                return;

	            }

	           $('.preloader-spin').hide();

	            $("#pageload").append(data.html);

console.log(data);

	        })

	        .fail(function(jqXHR, ajaxOptions, thrownError)

	        {

	              alert('server not responding...');

	        });

	}


$(document).ready(function () {
    $(document).on('keyup','#searchfilter',function(){
        console.log('trigger');
        
var se=$(this);
      $.get("{{ url('vegetable/autocomplete') }}",{'term':$( this ).val(),'catagory':1}).done(function(data, status){
var arr=[];
var json=JSON.parse(data);
console.log(json);

$('#autoresults ul').empty();
    
  for (let i = 0; i < json.length; i++) {
    arr.push(json[i].name);
      
  }

      se.autocomplete({
      source: json,
       select: function( event, ui ) { 
        //    se.val('');
            window.location.href = ui.item.url;
           
        }
    });
    // $('#autoresults').append('</ul>');

                    // response(JSON.parse(data.name));
                    // alert(data);
        });

 
});


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