@extends('admin_pages_master')
@section('styles')
<style type="text/css">
    @media only screen and (max-width: 449px) {
      .logo img {
        margin-left: -10px;
      }
      .logo {
        min-width: 1.4rem;
        margin-right: 2rem;
      }
      #search {
        display: block;
        width: 100%;
        min-height: 2.7rem;
      }
    }
    .header a:not(.btn) {
      color: #6a6868;
    }
    /* border-radius: 13px;
  margin-left: 13px;*/

    #scroll-top i {
      color: #fff;
      opacity: 1;
      background-color: #ef8b1a;
      border: 2px solid #e77513;
    }
    .category p {
      font-size: 12px;
    }
    .header-bottom {
      border-bottom: 1px solid #fff0f0;
    }
    .product-list .btn-product {
  background-color: transparent;
  border: 2px solid #171817;
  color: #333;
 
}
.product-list .btn-product:hover {
  background-color: #f39b09;
  border-color: #f39b09;
  color: #fff;
}
.banner .banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
}
.btn-primary.btn-outline {
  color: #696a6c;
  border-color: #c1c3c6;
  background-color: transparent;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:active, .btn-primary.btn-outline:focus {
  background-color: #272625;
  color: #fff;
  border-color: #272625;
}
.toolbox .toolbox-show select {
  padding-left: 1.3rem;
  padding-right: 1.8rem;
  width: 10.4rem;
}
@media (max-width: 575px) {
  .toolbox .left-sidebar-toggle span {
      display: inline-block;
      padding-left: 5px;
  }
  .toolbox-right{
    display: none;
  }
}
@media (min-width: 575px) {
.sticky-link i, .cart-dropdown .sticky-link i {
 display: none;
}
.sticky-link.search-toggle p {
  display: none;
}
}

.back-btn {
  color: orange;
  margin-top: 0px;
}
.back-btn:hover{
color:orange;
}
@media screen and (min-width: 550px) {
#back-btn{
  display: none !important;
}
}
</style>
@endsection

@section('content')
<main class="main">
    <!-- Start of Breadcrumb -->
    <nav class="breadcrumb-nav">
        <div class="container">
            <ul class="breadcrumb bb-no">
                <li><a href="index.html">Home</a></li>
                <li><a href="javascript:void(0)">Wishlist</a></li>
               
            </ul>
        </div>
    </nav>
    <!-- End of Breadcrumb -->

    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
        <!-- Back Button -->
        <a class="back-btn d-flex align-items-center" id="back-btn" onclick="goBack()">
            <i class="w-icon-long-arrow-left"></i>
            <div>Back</div>
        </a>
      
     </div>
    </div>

    <!-- Start of Page Content -->
    <div class="page-content mb-10">
       
        <!-- End of Shop Banner -->
        <div class="container-fluid">
            <!-- Start of Shop Content -->
            <div class="shop-content">
                

                <!-- Start of Shop Main Content -->
                <div class="main-content">
                  
                    <div class="product-wrapper row cols-xl-2 cols-sm-1 cols-xs-2 cols-1">
                        @foreach($products as $product)
                        <div class="product product-list">
                            <figure class="product-media">
                                <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">
                                    <img src="{{ $product->product_image }}" alt="Product" width="330"
                                        height="338" />
                                </a>
                                
                            </figure>
                            <div class="product-details">
                               
                                <h4 class="product-name">
                                    <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">{{ $product->title }}</a>
                                </h4>
                               
                                <div class="product-price">₦{{ number_format($product->price, 2) }}</div>
                                <div class="product-desc">
                                    {!! Str::limit($product->description ,90, ' ...') !!}
                                </div>
                                <div class="product-action">
                                    <a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"  class="btn-product "
                                        title="view {{ $product->title }}">Proceed</a>
                                   
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                 
                </div>
                <!-- End of Shop Main Content -->
            </div>
            <!-- End of Shop Content -->
        </div>
    </div>
    <!-- End of Page Content -->
</main>
@endsection