@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;
    }
     .product-shortcode.style-1 .title{
      height:   10px;
    }
    .product-shortcode.style-1 .description {
    height: 95px;
}
</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="container">
    {{--
    <div class="empty-space col-xs-b15 col-sm-b30"></div>--}} {{--
    <button class="dest"></button>--}}
    <div class="breadcrumbs">
        <a href="#">home</a>
        <a href="{{url('kikfoods')}}">kikfoods</a> {{-- <a href="#">gadgets</a>
        <a href="#">sport gadgets</a> --}}
    </div>
    {{--
    <div class="empty-space col-xs-b15 col-sm-b20 col-md-b50"></div>--}}
    <div class="row stores" style="margin-top: 20px">

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

            {{-- <div class="col-md-4">

                <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-4">


                <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="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <div class="store-name">
                        <h1>{{$query}}</h1>
                    </div>
                </div>
            </div>

            <div class="align-inline spacing-1">
                <div class="h4">Search Results</div>
            </div>
            <div class="align-inline spacing-1">
                {{-- <div class="simple-article size-1">SHOWING <b class="grey">15</b> OF <b class="grey">2 358</b> RESULTS --}}
                {{-- </div> --}}
            </div>
            <div class="align-inline spacing-1 hidden-xs pull-right">
                <a class="pagination toggle-products-view active"><img src="img/icon-14.png" alt=""/><img
                                src="img/icon-15.png" alt=""/></a>
                <a class="pagination toggle-products-view"><img src="img/icon-16.png" alt=""/><img
                                src="img/icon-17.png" alt=""/></a>
            </div>

            <div class="align-inline spacing-1 pull-right">
                <div class="h6 theme-green filter-div pull-right"><a id="filter-btn"><i class="fas fa-filter"></i> Filter</a></div>

            </div>

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

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

}





});
    
</script>


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


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


                                                                                                                          

                                @include('include.productinclude',['itemStore_vegi'=>$stores])
                        
                         </div>
                </div>
            </div>
            <div class="empty-space col-xs-b35 col-sm-b0"></div>
            {{--
            <div class="row">
                <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 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> --}} {{-- {!! $kikitemStore->render() !!} --}}
                    </div>
                </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>


{{-- ----------------------------MODEL---------------------- --}}


<!-- 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 s 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>




{{-- -------------------------END MODEL--------------------------- --}} 
@section('scripts')
<script>
    $('#filter-btn').click(function(event) {
    $('#FilterModal').modal();
});


    $(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: 5,
                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);


                    $('#filterResult').load('{{url("/search/pricefilter")}}' + '/' + min + "(+)" + max+"(+)"+"{{$query}}(+)items",function () {
                       
    _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 min = parseFloat(ui.values[0]).toFixed(1);
                    var max = parseFloat(ui.values[1]).toFixed(1);


                    $('#filterResult').load('{{url("/search/ratefilter/")}}' + '/' + min + "(+)" + max+"(+){{$query}}(+)stores",function () {
                       
    _functions.initSwiper();
                    });


                }
            });
        });


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

            var cityid = $("#cityfilter").find(":selected").val();
            $('#filterResult').load('{{url("/search/cityfilter")}}' + '/' + cityid+"(+){{$query}}(+)items");
            

        })

</script>
@endsection

@endsection