<!DOCTYPE html>
<html>
   <head>
      <title>index</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/4ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
      <link rel="stylesheet" type="text/css" href="{{ url('frontassets/owlcarousel/owl.carousel.min.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ url('frontassets/owlcarousel/owl.theme.default.min.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ url('frontassets/css/style2.css') }}">
      <link rel="stylesheet" type="text/css" href="{{ url('frontassets/css/style3.css') }}">
      <meta name="csrf-token" content="{{ csrf_token() }}" />
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Dosis:300,400,500,,600,700,700i|Lato:300,300i,400,400i,700,700i" rel="stylesheet">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
      <link href="{{ url('frontassets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
      <link href="{{ url('frontassets/vendor/icofont/icofont.min.css') }}" rel="stylesheet">
      <link href="{{ url('frontassets/vendor/boxicons/css/boxicons.min.css') }}" rel="stylesheet">
      <link href="{{ url('frontassets/vendor/venobox/venobox.css') }}" rel="stylesheet">
      <link href="{{ url('frontassets/vendor/line-awesome/css/line-awesome.min.css') }}" rel="stylesheet">
      <link href="{{ url('frontassets/vendor/owl.carousel/assets/owl.carousel.min.css') }}" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

      <link href="https://fonts.googleapis.com/css?family=Philosopher&display=swap" rel="stylesheet">
   </head>
   <body>
   @include("web.groceryheader")
   @include("web.category_slider")

      <div class="container" >
         <div class="row">
            <div class="owl-carousel owl-theme" id="owl-three"  style="transform: translate3d(0px, 7px, 0px);">
            <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f1.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
               <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f2.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
               <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f3.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
               <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f1.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
               <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f2.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
               <div class="item">
                  <center >
                     <img src="{{ url('frontassets/image/f3.jpg') }}" class="secimg_ban shadow">
                  </center>
               </div>
            </div>
         </div>
      </div>
      <div class="indo_trendback">
         <div class="container" >
         <p class="indo_trendp">Store</p>
            <div class="row">
               @if($storelist!=null)
            @foreach($storelist as $storelists)
                  <div class="item">
                     <div class="card four_card2" style="width: 100%;">
                     <a href="{{url('groceryhome')}}/{{$storelists->vendor_id}}" style="color: black">
                        <div style="position: relative;">
                           <img src="{{ url('frontassets/image/f1.jpg') }}" class="fourimg_ban shadow">
                           <div class="top-left">Promoted</div>
                           <div class="top-right"><i class="far fa-heart"></i></div>
                        </div>
                        <div class="card-body">
                           <p style="color: black">{{$storelists->vendor_name}}</p>
                           <p class="index_parae23">{{$storelists->vendor_loc}}</p>
                           <p class="index_para2to"><span><i class="far fa-clock"></i> {{$storelists->opening_time}} till {{$storelists->closing_time}}<span style="float: right;"><i class="fas fa-home"></i>{{round($storelists->distance, 2)}} km</span></span></p>
                           <p style="font-size: 13px;margin-bottom: -2px;"><span><i class="fa fa-phone-square"></i>{{$storelists->vendor_phone}}</span></p>
                        </div>
                        </a>
                     </div>
                  </div>
             
                  @endforeach
                      @else
                      <div class="item">
                     <div class="card four_card2" style="width: 100%;">
                 No Store Found at your location
               </div>
              
            </div>
                      @endif
          

            </div>
         </div>
      </div>
      @include("web.footer")

   </body>
</html>
<script type="text/javascript">
   var a = 0;
   $(window).scroll(function() {
   
   var oTop = $('#counter').offset().top - window.innerHeight;
   if (a == 0 && $(window).scrollTop() > oTop) {
    $('.counter-value').each(function() {
      var $this = $(this),
        countTo = $this.attr('data-count');
      $({
        countNum: $this.text()
      }).animate({
          countNum: countTo
        },
   
        {
   
          duration: 3000,
          easing: 'swing',
          step: function() {
            $this.text(Math.floor(this.countNum));
          },
          complete: function() {
            $this.text(this.countNum);
            //alert('finished');
          }
   
        });
    });
    a = 1;
   }
   
   });
</script>
<script src="{{ url('frontassets/owlcarousel/owl.carousel.min.js') }}"></script>
<script src="{{ url('frontassets/vendor/jquery/jquery.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/jquery.easing/jquery.easing.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/php-email-form/validate.js') }}"></script>
      <script src="{{ url('frontassets/vendor/venobox/venobox.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/waypoints/jquery.waypoints.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/counterup/counterup.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/isotope-layout/isotope.pkgd.min.js') }}"></script>
      <script src="{{ url('frontassets/vendor/owl.carousel/owl.carousel.min.js') }}"></script>
      <!-- Template Main JS File -->
      <script src="{{ url('frontassets/js/main.js') }}"></script>
<script>
   $(document).ready(function(){
     $('#owl-two').owlCarousel({
       loop:true,
       margin:10,
       autoplay:true,
       nav:true,
   
                       
   responsive: {
           0:{
               items:1
           },
           600:{
               items:1
           },
           1000:{
               items:8
           }
       }
   })
    $( "#owl-two .owl-nav .owl-prev").html('<img src="{{ url('frontassets/image/l1.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;left:8px;top:5px;" >');
      $( "#owl-two .owl-nav .owl-next").html('<img src="{{ url('frontassets/image/r2.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;right:8px;top:5px;" >');  
   });
   
   
</script>
<script>
   $(document).ready(function(){
     $('#owl-three').owlCarousel({
       loop:true,
       margin:10,
       autoplay:true,
       nav:true,
   
                       
   responsive: {
           0:{
               items:1
           },
           600:{
               items:1
           },
           1000:{
               items:4          
                }
       }
   })
    $( "#owl-three .owl-nav .owl-prev").html('<img src="{{ url('frontassets/image/l1.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;left:8px;top:115px;" >');
      $( "#owl-three .owl-nav .owl-next").html('<img src="{{ url('frontassets/image/r2.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;right:8px;top:115px;" >');  
   });
   
   
</script>
<script>
   $(document).ready(function(){
     $('#owl-four').owlCarousel({
       loop:true,
       margin:10,
       autoplay:true,
       nav:true,
   
                       
   responsive: {
           0:{
               items:1
           },
           600:{
               items:1
           },
           1000:{
               items:3          
                }
       }
   })
    $( "#owl-four .owl-nav .owl-prev").html('<img src="{{ url('frontassets/image/l1.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;left:8px;top:145px;" >');
      $( "#owl-four .owl-nav .owl-next").html('<img src="{{ url('frontassets/image/r2.png') }}" height="35" class="shadow" style="border-radius:50%;position:absolute;right:8px;top:145px;" >');  
   });
   
   
</script>