@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="header-empty-space" style="margin-top: -50px;"></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 class="col-md-4">
                    <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 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="empty-space col-xs-b25 col-sm-b60"></div>

                <div class="products-content">
                    <div class="products-wrapper stores">
                        <div class="row nopadding" id="filterResult">
                            <!-- product wrp start -->

                             @foreach ($stores as $item)