@extends('layouts.master')

@section('title', 'Welcome to the online vegitable store')


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


    <div class="header-empty-space"></div>
    <style>
        .starrrproductdiv {
            /*margin-left: 35%;*/

            display: flex;
            align-items: center; /* Align the flex-items vertically */
            justify-content: center;
        }
    </style>


    <div class="container">
        <div class="empty-space col-xs-b15 col-sm-b30"></div>
        <div class="breadcrumbs">
            <a href="{{url('/')}}">home</a>
            <a href="{{url('/kikfoods')}}">kikfoods</a>
            <a href="{{url('kikstore/'.$store->store_id)}}">{{$store->name}}</a>
           {{--  <a href="#">gadgets</a>
            <a href="#">sport gadgets</a> --}}
        </div>
        <div class="empty-space col-xs-b15 col-sm-b50 col-md-b100"></div>
        <div class="row stores">
            <div class="col-md-9 col-md-push-3">
                <div class="row">
                    <div class="col-md-12">
                        <div class="store-name">
                            <h1>{{$store->name}}</h1>
                        </div>
                    </div>

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


                    <div class="starrr text-center" style=" margin-left: 320px ">
                    </div>

                    <p class="text-primary starrrproductdiv" id="ratingtext">

                        Star rating

                    </p>

                </div>
                <script>

                    $(document).ready(function () {

                        $.ajaxSetup({
                            headers:
                                {'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')}
                        });


                        var currentLocation = window.location;
                        var url = "" + currentLocation;

                        // alert(url)

                        $.ajax({

                            method: "post",
                            url: "/kikstore/rateing",
                            data: {url: url},
                            success: function (response) {

                                var num = parseFloat(response).toFixed(1);


                                $('.starrr').rateYo({
                                    rating: num,
                                    ratedFill: "#b8cd06",
                                    starWidth: "30px",
                                    readOnly: true
                                })

                                var ratingtext = parseFloat(num) * 2;

                                $("#ratingtext").text(parseFloat(ratingtext).toFixed(1));

                            }

                        })

                    })


                </script>
                <div class="align-inline spacing-1 product-search">
                    <select class="SlectBox small">
                        <option disabled="disabled" selected="selected">Search Products</option>
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="mercedes">Mercedes</option>
                        <option value="audi">Audi</option>
                    </select>
                </div>
                <div class="align-inline spacing-1">
                    <div class="h4">Foods</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 ($itemStore as $item)