@extends('main')
@section('title')
@endsection
@section('styles')
  <style>
  #wrap {
    max-width: 660px;
    margin: 100px auto;
  }
</style>
@endsection
@section('content')
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
            <li class="home">
              <a href="{{ Route('mobily.site.home.page') }}">{{ __('Home') }}</a>
              <span>/</span>
            </li>
            <li>
              {{ __('Search') }}
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <section class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-sm-9 col-xs-12 col-sm-push-3">
          <article class="col-main2">
            <div class="product-title"><span class="page-heading-title"> {{ __('Search Results For') }}</span><span style="color:red"> "{{ Request::get('s') }}" </span> <span style="float:left">{{ __('Results No') }} ( {{ $products->total() }})</span>
            </div>
            <hr>
            <div class="category-products">
              <ul class="products-grid">
                @foreach ($products as $key => $product)
                  <li class="item col-md-3 col-sm-4 col-xs-6">
                    <div class="item-inner">
                      <div class="item-img">
                        <div class="item-img-info"><a class="product-image" title="{!! $product->title !!}" href="{{ Route('mobily.product.show',[$product->category->slug,$product->slug]) }}"><img alt="{!! $product->title !!}" src="{!! path_img($product->image_url,250,250) !!}"></a>
                          @if ($product->offer)
                            <div class="hot-label hot-top-right">
                              <span class="product_discount">{!! $product->getPercentAttribute() !!}% </span>
                            </div>
                          @else
                          @endif
                          <div class="box-hover">
                            <ul class="add-to-links">
                              <li><a class="link-quickview" href="#"> {!! __('View') !!}</a></li>
                              <li><a class="link-wishlist" href="">{!! __('Cart') !!}</a></li>
                              <li><a class="link-compare" href="">{!! __('More') !!}</a></li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="item-info">
                        <div class="info-inner">
                          <div class="item-title">
                            <a title="{!! $product->title !!}" href="{{ Route('mobily.product.show',[$product->category->slug,$product->slug]) }}">
                              {!! $product->title !!}
                            </a>
                          </div>
                          <div class="item-content">
                            <div class="item-unit">
                              {!! @optional($product->unit)->title !!}
                            </div>
                            <div class="item-price">
                              <div class="price-box">
                                {!! __('Price') !!}
                                @if ($product->offer)
                                  <span class="old-price"><span class="price">{!! $product->price2 !!}</span></span>
                                  <span class="special-price"><span class="price">{!! $product->offer !!} <span>{!! __('EGP') !!}</span> </span></span>
                                @else
                                  <span class="regular-price"><span class="price">{!! $product->price2 !!}</span> <span>{!! __('EGP') !!}</span></span>
                                @endif
                              </div>
                            </div>
                            <div class="action">
                              <form action="{{ url('/cart') }}" method="POST" >
                                {!! csrf_field() !!}
                                <input type="hidden" name="quantity" value="1">
                                <input type="hidden" name="id" value="{{ $product->id }}">
                                <input type="hidden" name="name" value="{{ $product->title }}">
                                <input type="hidden" name="price" value="{{ $product->price2 }}">
                                <div class="fd_pro_add_btn">
                                  <button type="button" name="button" data-id="{{ $product->id }}" class="add-cart button btn-cart">{!! __('Order Now') !!}</button>
                                </div>
                              </form>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </li>
                @endforeach
              </ul>
            </div>

            <div class="toolbar">
              <div class="row">
                <div class="col-md-12">
                  <div class="pager">
                    <div class="pages">
                      {{ $products->links('vendor.pagination.mobile') }}
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </article>
        </div>
        <div class="col-left sidebar col-sm-3 col-xs-12 col-sm-pull-9">
          <aside class="col-left sidebar">
            @widget('ListCategoriesMenu')
            @widget('Sidebar\DeliveryReturns')
            <div class="custom-slider">
              <div>
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                  <ol class="carousel-indicators">
                    <li class="active" data-target="#carousel-example-generic" data-slide-to="0"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1" class=""></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2" class=""></li>
                  </ol>
                  <div class="carousel-inner">
                    <div class="item active"><img src="{!! asset('images/slide3.jpg') !!}" alt="slide3">
                      <div class="carousel-caption">
                        <h3><a title=" Sample Product" href="#">50% OFF</a></h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        <a class="link" href="#">Buy Now</a></div>
                      </div>
                      <div class="item"><img src="{!! asset('images/slide1.jpg') !!}" alt="slide1">
                        <div class="carousel-caption">
                          <h3><a title=" Sample Product" href="#">Hot collection</a></h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                      </div>
                      <div class="item"><img src="{!! asset('images/slide2.jpg') !!}" alt="slide2">
                        <div class="carousel-caption">
                          <h3><a title=" Sample Product" href="#">Summer collection</a></h3>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                        </div>
                      </div>
                    </div>
                    <a class="left carousel-control" href="#" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#" data-slide="next"> <span class="sr-only">Next</span> </a></div>
                  </div>
                </div>
              </aside>
            </div>
          </div>
        </div>
      </section>
    @endsection
    @section('scripts')
    @endsection