@extends('layout.app')


@section('content')
    <header class="header position-relative">
        <div class="container ">
            <div class="row pt-lg-2 pb-lg-2 justify-content-between">
                <div class="m-auto col-lg-3 col-md-4 col-6">
                    <a href="{{ route('home') }}">
                        <img src="{{ asset('img/logo.png') }}" class="img-fluid" alt="">
                    </a>

                </div>
                <div class="col-lg-8 pb-lg-0 pb-4 float-right col-md-8  mt-xl-4 mt-md-3">
                    <div class="md-form position-relative">
                        <input class="form-control searchbar" type="text" placeholder="Search" aria-label="Search">
                        <a href="#" class="searchbar-icon text-light">
                            <i class="fas fa-search"></i>
                        </a>
                        <div class="search-results">
                            <ul id="searchList">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div class="container   mt-5">

        <div class="row">
            <div class="col-12">
                <h2>Stores</h2>
                <hr>
                <div class="row">
                    @foreach ($stores as $store)
                    <div class="col-12 col-md-6 col-lg-4 mb-5 ">
                        <div class="card coupon">
                            <div class="no-gutters">
                            <div class="col-12 pl-4 pr-4" style="background: #f6f6f6;" >
                                <div class="c-img" style="background-image:url({{'https://xyzcodes.com/storage/'.$store->logo}});">
                
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="card-body">
                                <h5 class="card-title text-center">{{$store->name}}</h5>
                                </div>
                                <div class="card-footer text-center">
                                    <a href="{{route('store' , $store->slug)}}" class="btn" target="_blank">View Store</a>
                                </div>
                            </div>
                            </div>
                        </div>
                
                    </div>
                  @endforeach
                </div>
                
                <div class="col-12">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination justify-content-center">
                          <li class="page-item {{$current_page == 0 ? 'disabled' : ''}}">
                            <a class="page-link" href="{{route('stores' , ['page' => $current_page - 1])}}" tabindex="-1">Previous</a>
                          </li>

                          @for ($i = $current_page; $i <= ($current_page + 10) ; $i++)
                            <li class="page-item {{$current_page  == $i ? 'active' : ''}}">
                                <a class="page-link " href="{{route('stores' , ['page' => $i])}}">{{$i + 1}}</a>
                            </li>
                          @endfor
                          
                          <li class="page-item {{$current_page == $total_page ? 'disabled' : ''}}">
                            <a class="page-link" href="{{route('stores' , ['page' => $current_page + 1])}}">Next</a>
                          </li>
                        </ul>
                      </nav>
                </div>
            </div>  
        </div>

    </div>

@endsection